Merge pull request #1 from ChrisBrooksbank/claude/graceful-offline-degradation-o63Cg

Degrade gracefully offline: replace big browser error with subtle indicator

Author: ChrisBrooksbank

app/layout.tsx

@@ -4,6 +4,7 @@ import BottomNav from '@/components/BottomNav';
 import BackupProvider from '@/components/BackupProvider';
 import FontSizeProvider from '@/components/FontSizeProvider';
 import ThemeProvider from '@/components/ThemeProvider';
+import OfflineIndicator from '@/components/OfflineIndicator';
 import './globals.css';
 
 const geistSans = Geist({
@@ -42,6 +43,7 @@ export default function RootLayout({
                 <BackupProvider />
                 <FontSizeProvider />
                 <ThemeProvider />
+                <OfflineIndicator />
                 <main className="flex-1 overflow-y-auto scroll-smooth">{children}</main>
                 <BottomNav />
             </body>

app/sw.ts

@@ -14,7 +14,7 @@ const serwist = new Serwist({
     precacheEntries: self.__SW_MANIFEST,
     skipWaiting: true,
     clientsClaim: true,
-    navigationPreload: true,
+    navigationPreload: false,
     runtimeCaching: defaultCache,
 });
 

components/OfflineIndicator.tsx

@@ -0,0 +1,32 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+
+export default function OfflineIndicator() {
+    const [offline, setOffline] = useState(false);
+
+    useEffect(() => {
+        setOffline(!navigator.onLine);
+        const handleOffline = () => setOffline(true);
+        const handleOnline = () => setOffline(false);
+        window.addEventListener('offline', handleOffline);
+        window.addEventListener('online', handleOnline);
+        return () => {
+            window.removeEventListener('offline', handleOffline);
+            window.removeEventListener('online', handleOnline);
+        };
+    }, []);
+
+    if (!offline) return null;
+
+    return (
+        <div
+            role="status"
+            aria-live="polite"
+            className="flex items-center justify-center gap-1.5 bg-elevated px-3 py-1 text-xs text-muted border-b border-default"
+        >
+            <span className="h-1.5 w-1.5 rounded-full bg-yellow-500" aria-hidden="true" />
+            Offline — notes save locally
+        </div>
+    );
+}