feat: implement PWA installability for desktop and mobile (#247)

* feat: implement PWA installability for desktop and mobile

- Add @vite-pwa/sveltekit plugin with service worker generation
- Create manifest.webmanifest with required PWA fields
- Generate PWA icons (192x192, 512x512, maskable) from logo
- Configure workbox with network-first caching for API requests
- Add manifest link and theme-color meta tag to layout
- Enable auto-update service worker registration

Closes #165

* fix: use import.meta.env for PUBLIC_API_URL to fix type check

Replace /static/public import with import.meta.env to handle
optional environment variable without TypeScript errors.

* feat: replace placeholder icons with vinyl record logo

- replaced PWA icons with vinyl record design
- updated main logo.png
- added favicon.ico
- uses app colors (#0a0a0a bg, #3a7dff accent)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <[e-mail]>

---------

Co-authored-by: Claude <[e-mail]>

frontend/package.json

···
 		"@sveltejs/vite-plugin-svelte": "^6.2.0",
 		"@typescript-eslint/eslint-plugin": "^8.46.4",
 		"@typescript-eslint/parser": "^8.46.4",
+		"@vite-pwa/sveltekit": "^1.0.1",
 		"eslint": "^9.39.1",
 		"eslint-plugin-svelte": "^3.13.0",
 		"svelte": "^5.39.5",

frontend/src/lib/config.ts

···
-import { PUBLIC_API_URL } from '$env/static/public';
-
-export const API_URL = PUBLIC_API_URL || 'http://localhost:8001';
+export const API_URL = import.meta.env.PUBLIC_API_URL || 'http://localhost:8001';
 
 interface ServerConfig {
 	max_upload_size_mb: number;

frontend/src/routes/+layout.svelte

···
 
 <svelte:head>
 	<link rel="icon" href={logo} />
+	<link rel="manifest" href="/manifest.webmanifest" />
+	<meta name="theme-color" content="#0a0a0a" />
 
 	{#if !hasPageMetadata}
 		<!-- default meta tags for pages without specific metadata -->

frontend/static/manifest.webmanifest

···
+{
+  "name": "plyr.fm",
+  "short_name": "Plyr",
+  "start_url": "/",
+  "display": "standalone",
+  "background_color": "#0a0a0a",
+  "theme_color": "#0a0a0a",
+  "scope": "/",
+  "icons": [
+    {
+      "src": "/icons/icon-192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "any"
+    },
+    {
+      "src": "/icons/icon-512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "any"
+    },
+    {
+      "src": "/icons/icon-maskable.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "maskable"
+    }
+  ]
+}
+

frontend/vite.config.ts

···
 import { sveltekit } from '@sveltejs/kit/vite';
 import { defineConfig } from 'vite';
+import { SvelteKitPWA } from '@vite-pwa/sveltekit';
 
 export default defineConfig({
-	plugins: [sveltekit()]
+	plugins: [
+		sveltekit(),
+		SvelteKitPWA({
+			strategies: 'generateSW',
+			registerType: 'autoUpdate',
+			manifest: false,
+			workbox: {
+				globPatterns: ['**/*.{js,css,html,ico,png,svg,woff2}'],
+				runtimeCaching: [
+					{
+						urlPattern: /^https:\/\/api\.plyr\.fm\/.*/i,
+						handler: 'NetworkFirst',
+						options: {
+							cacheName: 'api-cache',
+							expiration: {
+								maxEntries: 50,
+								maxAgeSeconds: 60 * 60
+							}
+						}
+					}
+				]
+			}
+		})
+	]
 });