Added PWA support

app/app.vue

@@ -3,6 +3,16 @@ const { currentSong, isPlaying } = usePlayer()
 const debugView = useCookie("DEBUG_VIEW")
 const debugViewEnabled = computed(() => String(debugView.value ?? "") === "1")
 
+useHead({
+	meta: [
+		{ name: "theme-color", content: "#09090b" },
+		{ name: "viewport", content: "width=device-width, initial-scale=1, viewport-fit=cover" },
+		{ name: "apple-mobile-web-app-capable", content: "yes" },
+		{ name: "apple-mobile-web-app-status-bar-style", content: "black-translucent" },
+	],
+	link: [{ rel: "apple-touch-icon", href: "/icons/apple-touch-icon.png" }],
+})
+
 useHead(
 	computed(() => ({
 		titleTemplate:
@@ -14,6 +24,7 @@ useHead(
 </script>
 
 <template>
+	<NuxtPwaManifest />
 	<ToastContainer />
 	<NuxtLayout>
 		<NuxtPage />

app/layouts/default.vue

@@ -21,10 +21,11 @@ const onSearchInput = (v: string) => {
 }
 
 const { data: user } = useApiFetch<any>("/user")
+const song = useSong()
 </script>
 
 <template>
-	<Sidebar class="default-shell">
+	<Sidebar class="default-shell" :class="{ 'has-player': song }">
 		<template #sidebar>
 			<p class="title">Music</p>
 
@@ -180,7 +181,12 @@ const { data: user } = useApiFetch<any>("/user")
 		}
 
 		:deep(> main) {
-			padding: 1.25rem 1rem calc(6rem + env(safe-area-inset-bottom) + $player-height);
+			padding: calc(1.25rem + env(safe-area-inset-top)) 1rem
+				calc(6rem + env(safe-area-inset-bottom));
+		}
+
+		&.has-player :deep(> main) {
+			padding-bottom: calc(6rem + env(safe-area-inset-bottom) + $player-height);
 		}
 	}
 

app/styles/_variables.scss

@@ -1,5 +1,5 @@
 $color-accent: rgb(255, 69, 58);
-$color-background: oklch(14.1% 0.005 285.823); // #1a202c
+$color-background: oklch(14.1% 0.005 285.823); // #09090b
 $color-secondary-background: oklch(26.862% 0.00003 271.152);
 $color-text: rgba(255, 255, 255, 0.92);
 $color-placeholder-text: rgba(255, 255, 255, 0.44);

app/styles/global.scss

@@ -1,11 +1,17 @@
 @use "reset" as *;
 @use "util" as *;
+@use "variables" as *;
 
 html {
 	font-family:
 		-apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial,
 		sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
 	color: white;
+	background-color: $color-background;
+}
+
+body {
+	background-color: $color-background;
 }
 
 main > h1 {