feat: offline support tier 1 — IndexedDB query persistence and offline banner

Persist React Query cache to IndexedDB via idb-keyval so timeline,
entry details, subscriptions, and other read data survive page reloads
and brief offline periods. Add network status banner in reader layout.

1 files changed, 5 insertions, 1 deletions

diff --git a/apps/web/app/reader/_components/reader-layout-shell.tsx b/apps/web/app/reader/_components/reader-layout-shell.tsx
index 9d2eb24..fe158b5 100644
--- a/apps/web/app/reader/_components/reader-layout-shell.tsx
+++ b/apps/web/app/reader/_components/reader-layout-shell.tsx
@@ -12,6 +12,7 @@ import { AddFeedDialog } from "./add-feed-dialog"
 import { SearchOverlay } from "./search-overlay"
 import { KeyboardShortcutsDialog } from "./keyboard-shortcuts-dialog"
 import { MfaChallenge } from "./mfa-challenge"
+import { OfflineBanner } from "./offline-banner"
 import { useKeyboardNavigation } from "@/lib/hooks/use-keyboard-navigation"
 import { createSupabaseBrowserClient } from "@/lib/supabase/client"
 import { useSubscriptions } from "@/lib/queries/use-subscriptions"
@@ -284,7 +285,9 @@ export function ReaderLayoutShell({
   }
 
   return (
-    <div className="flex h-screen">
+    <div className="flex h-screen flex-col">
+      <OfflineBanner />
+      <div className="flex min-h-0 flex-1">
       {isMobile ? (
         <>
           <div
@@ -405,6 +408,7 @@ export function ReaderLayoutShell({
         <SearchOverlay onClose={() => setSearchOpen(false)} />
       )}
       <KeyboardShortcutsDialog />
+      </div>
     </div>
   )
 }