feat: PWA overhaul

- Remove debug artifact from login page ('Use Link component: HOME')
- Full icon set: 48/72/96/128/144/152/192/384/512 + maskable variants
- Proper manifest: display_override, shortcuts, categories, scope
- Better service worker: offline fallback page, pre-caching, stale-while-revalidate
- Custom install banner (Android beforeinstallprompt + iOS instructions)
- Connection status indicator (online/offline toast)
- Updated index.html with proper favicon sizes and meta tags

web/public/sw.js

@@ -1,61 +1,79 @@
-// ponytail: bump CACHE_NAME on each deploy, or stale HTML breaks assets.
-// Network-first for navigation (index.html) keeps hashed asset refs fresh.
-const CACHE_NAME = 'dumpster-v3';
+// Dumpster PWA Service Worker
+// Bump CACHE_VERSION on each deploy to force re-cache of hashed assets.
+const CACHE_VERSION = 'dumpster-v4';
+const OFFLINE_URL = '/offline.html';
 
-self.addEventListener('install', () => {
-  self.skipWaiting();
+// Assets to pre-cache on install (shell files)
+const PRECACHE_URLS = [
+  '/',
+  '/offline.html',
+  '/favicon.png',
+  '/icons/icon-192.png',
+  '/icons/icon-512.png',
+];
+
+// Install: pre-cache shell and skip waiting
+self.addEventListener('install', (event) => {
+  event.waitUntil(
+    caches.open(CACHE_VERSION).then((cache) => cache.addAll(PRECACHE_URLS)).then(() => self.skipWaiting())
+  );
 });
 
+// Activate: clean old caches and claim clients
 self.addEventListener('activate', (event) => {
   event.waitUntil(
-    caches.keys().then((names) =>
-      Promise.all(names.filter((n) => n !== CACHE_NAME).map((n) => caches.delete(n)))
-    )
+    caches
+      .keys()
+      .then((names) => Promise.all(names.filter((n) => n !== CACHE_VERSION).map((n) => caches.delete(n))))
+      .then(() => self.clients.claim())
   );
-  self.clients.claim();
 });
 
+// Fetch handler
 self.addEventListener('fetch', (event) => {
   if (event.request.method !== 'GET') return;
   const url = new URL(event.request.url);
 
-  // Skip API + WS
+  // Skip API, WebSocket, and cross-origin requests
   if (url.pathname.startsWith('/api/') || url.pathname.startsWith('/ws')) return;
-
-  // Skip cross-origin requests (e.g. Giphy, LiveKit)
   if (url.origin !== self.location.origin) return;
 
-  // Network-first for navigation requests (index.html) — always fetch fresh HTML
-  // so hashed asset references stay current after deploys.
+  // Navigation requests: network-first, offline fallback
   if (event.request.mode === 'navigate') {
     event.respondWith(
       fetch(event.request)
         .then((response) => {
           const clone = response.clone();
-          caches.open(CACHE_NAME).then((c) => c.put(event.request, clone));
+          caches.open(CACHE_VERSION).then((c) => c.put(event.request, clone));
           return response;
         })
-        .catch(() => caches.match('/index.html'))
+        .catch(() =>
+          caches.match(event.request).then((cached) => cached || caches.match(OFFLINE_URL))
+        )
     );
     return;
   }
 
-  // Cache-first for static assets (JS, CSS, images, fonts)
+  // Static assets (JS, CSS, images, fonts): stale-while-revalidate
+  // Serve cached immediately, fetch fresh in background
   event.respondWith(
     caches.match(event.request).then((cached) => {
-      const fetchPromise = fetch(event.request).then((response) => {
-        if (response.ok) {
-          const clone = response.clone();
-          caches.open(CACHE_NAME).then((c) => c.put(event.request, clone));
-        }
-        return response;
-      }).catch(() => cached);
+      const fetchPromise = fetch(event.request)
+        .then((response) => {
+          if (response.ok) {
+            const clone = response.clone();
+            caches.open(CACHE_VERSION).then((c) => c.put(event.request, clone));
+          }
+          return response;
+        })
+        .catch(() => cached);
 
       return cached || fetchPromise;
     })
   );
 });
 
+// Push notifications
 self.addEventListener('push', (event) => {
   if (!event.data) return;
   const data = event.data.json();
@@ -65,11 +83,14 @@ self.addEventListener('push', (event) => {
       icon: '/icons/icon-192.png',
       badge: '/icons/icon-192.png',
       vibrate: [100, 50, 100],
+      tag: data.tag || 'dumpster-notification',
+      renotify: true,
       data: { url: data.url || '/' },
     })
   );
 });
 
+// Notification click: focus or open window
 self.addEventListener('notificationclick', (event) => {
   event.notification.close();
   event.waitUntil(