feat: offline content

app/(app)/offline-content/page.tsx

@@ -0,0 +1,203 @@
+"use client";
+
+/**
+ * /offline-content — the reader's device-local offline library.
+ *
+ * Lists everything saved via the header's "Save offline" button and lets them
+ * open (offline-capable) or remove each item. Items link with a plain <a> (a
+ * hard navigation) so the service worker can serve the cached HTML document
+ * when there's no network — a soft client navigation would try the network and
+ * fail. This page also doubles as the SW's offline navigation fallback.
+ */
+
+import { useCallback, useEffect, useState } from "react";
+import {
+  BookOpen,
+  FileText,
+  HardDriveDownload,
+  Mail,
+  Mic,
+  Newspaper,
+  Trash2,
+  Wifi,
+  WifiOff,
+} from "lucide-react";
+import { PageHeader } from "@/components/layout/page-header";
+import {
+  listOffline,
+  offlineSupported,
+  removeOffline,
+  usageBytes,
+  type OfflineItem,
+  type OfflineType,
+} from "@/lib/offline";
+import { cn } from "@/lib/utils";
+
+const TYPE_META: Record<OfflineType, { label: string; icon: React.ReactNode }> = {
+  verse: { label: "Verse", icon: <BookOpen className="size-4" /> },
+  prose: { label: "Chapter", icon: <BookOpen className="size-4" /> },
+  letter: { label: "Letter", icon: <Mail className="size-4" /> },
+  magazine: { label: "Magazine", icon: <Newspaper className="size-4" /> },
+  transcript: { label: "Transcript", icon: <Mic className="size-4" /> },
+  journal: { label: "Journal", icon: <FileText className="size-4" /> },
+  essay: { label: "Essay", icon: <FileText className="size-4" /> },
+  document: { label: "Document", icon: <FileText className="size-4" /> },
+};
+
+function formatBytes(n: number): string {
+  if (!n || n < 1024) return `${n || 0} B`;
+  const units = ["KB", "MB", "GB"];
+  let v = n / 1024;
+  let i = 0;
+  while (v >= 1024 && i < units.length - 1) {
+    v /= 1024;
+    i++;
+  }
+  return `${v.toFixed(v >= 10 ? 0 : 1)} ${units[i]}`;
+}
+
+function formatDate(ms: number): string {
+  try {
+    return new Date(ms).toLocaleDateString(undefined, {
+      year: "numeric",
+      month: "short",
+      day: "numeric",
+    });
+  } catch {
+    return "";
+  }
+}
+
+export default function OfflineContentPage() {
+  const [items, setItems] = useState<OfflineItem[] | null>(null);
+  const [usage, setUsage] = useState<number | null>(null);
+  const [online, setOnline] = useState(true);
+  const [supported, setSupported] = useState(true);
+
+  const refresh = useCallback(async () => {
+    setItems(await listOffline());
+    setUsage(await usageBytes());
+  }, []);
+
+  useEffect(() => {
+    if (!offlineSupported()) {
+      setSupported(false);
+      setItems([]);
+      return;
+    }
+    setOnline(navigator.onLine);
+    void refresh();
+    const on = () => setOnline(true);
+    const off = () => setOnline(false);
+    window.addEventListener("online", on);
+    window.addEventListener("offline", off);
+    return () => {
+      window.removeEventListener("online", on);
+      window.removeEventListener("offline", off);
+    };
+  }, [refresh]);
+
+  async function remove(key: string) {
+    await removeOffline(key);
+    await refresh();
+  }
+
+  return (
+    <>
+      <PageHeader>
+        <h1 className="text-2xl font-bold text-foreground">Offline library</h1>
+        <p className="mt-1 text-sm text-muted-foreground">
+          Pages and lectures you&rsquo;ve saved to read or listen to without a
+          connection. Stored on this device.
+        </p>
+        <div className="mt-3 flex items-center gap-3 text-xs text-muted-foreground">
+          <span
+            className={cn(
+              "inline-flex items-center gap-1.5",
+              online ? "text-muted-foreground" : "text-amber-600",
+            )}
+          >
+            {online ? (
+              <Wifi className="size-3.5" />
+            ) : (
+              <WifiOff className="size-3.5" />
+            )}
+            {online ? "Online" : "Offline"}
+          </span>
+          {usage !== null && (
+            <span className="inline-flex items-center gap-1.5">
+              <HardDriveDownload className="size-3.5" />
+              {formatBytes(usage)} used
+            </span>
+          )}
+        </div>
+      </PageHeader>
+
+      <main className="max-w-5xl mx-auto px-4 sm:px-6 py-8">
+        {!supported ? (
+          <p className="py-16 text-center text-sm text-muted-foreground">
+            This browser doesn&rsquo;t support offline saving.
+          </p>
+        ) : items === null ? (
+          <p className="py-16 text-center text-sm text-muted-foreground">
+            Loading…
+          </p>
+        ) : items.length === 0 ? (
+          <div className="py-16 text-center">
+            <HardDriveDownload className="mx-auto size-8 text-muted-foreground/50" />
+            <p className="mt-3 text-sm text-muted-foreground">
+              Nothing saved yet. Tap{" "}
+              <span className="font-medium text-foreground">Save offline</span>{" "}
+              on any chapter, letter, magazine, or transcript to keep it here.
+            </p>
+          </div>
+        ) : (
+          <ul className="space-y-2">
+            {items.map((item) => {
+              const meta = TYPE_META[item.type] ?? TYPE_META.document;
+              return (
+                <li
+                  key={item.key}
+                  className="flex items-center gap-3 rounded-lg border border-border bg-card px-4 py-3 transition-colors hover:bg-muted/50"
+                >
+                  {/* Hard navigation so the SW can serve the cached document offline. */}
+                  <a href={item.href} className="flex min-w-0 flex-1 items-center gap-3">
+                    <span className="shrink-0 text-muted-foreground">
+                      {meta.icon}
+                    </span>
+                    <span className="min-w-0">
+                      <span className="block truncate font-medium text-foreground">
+                        {item.title}
+                      </span>
+                      <span className="mt-0.5 flex items-center gap-2 text-xs text-muted-foreground">
+                        <span className="rounded bg-muted px-1.5 py-0.5">
+                          {meta.label}
+                        </span>
+                        {item.audioKey && (
+                          <span className="inline-flex items-center gap-1">
+                            <Mic className="size-3" /> audio
+                          </span>
+                        )}
+                        <span>{formatDate(item.savedAt)}</span>
+                        <span>· {formatBytes(item.bytes)}</span>
+                      </span>
+                    </span>
+                  </a>
+                  <button
+                    type="button"
+                    onClick={() => remove(item.key)}
+                    aria-label={`Remove ${item.title} from offline`}
+                    title="Remove from offline"
+                    className="shrink-0 rounded-md p-2 text-muted-foreground transition-colors hover:bg-destructive/10 hover:text-destructive"
+                  >
+                    <Trash2 className="size-4" />
+                  </button>
+                </li>
+              );
+            })}
+          </ul>
+        )}
+      </main>
+    </>
+  );
+}

app/(app)/settings/page.tsx

@@ -66,6 +66,15 @@ export default function SettingsPage() {
         <NotificationMatrix />
       </Section>
 
+      <Section
+        title="Offline"
+        description="Pages and lectures you've saved to read or listen to without a connection. Saved on this device — open the library to remove downloads and free up space."
+      >
+        <ul className="divide-y divide-border">
+          <LegalLink href="/offline-content" label="Manage offline library" />
+        </ul>
+      </Section>
+
       <Section title="Authentication">
         {/* Suspense boundary required because LinkResult reads
             useSearchParams — Next.js bails out of SSR otherwise. */}

app/(app)/transcriptions/[slug]/page.tsx

@@ -93,7 +93,15 @@ export default async function TranscriptionPage({
           isPartOf: "Lectures & Conversations of Śrīla Prabhupāda",
         })}
       />
-      <PageHeader sticky>
+      <PageHeader
+        sticky
+        offline={{
+          type: "transcript",
+          title: t.name,
+          subtitle: [t.date, t.place].filter(Boolean).join(" · ") || undefined,
+          audioUrl: t.audioUrl ?? undefined,
+        }}
+      >
         <Link
           href={backHref}
           className="text-sm text-muted-foreground hover:text-foreground transition-colors"

app/layout.tsx

@@ -10,6 +10,7 @@ import { AuthGateProvider } from "@/components/auth/auth-gate";
 import { NotificationsProvider } from "@/components/notifications/notifications-provider";
 import { SharePostProvider } from "@/components/social/share-post-provider";
 import { Toaster } from "@/components/ui/toaster";
+import { ServiceWorkerRegistrar } from "@/components/pwa/sw-register";
 import "./globals.css";
 
 const geistSans = Geist({
@@ -106,6 +107,7 @@ export default function RootLayout({
                         route groups. */}
                       <FloatingPlayer />
                       <Toaster />
+                      <ServiceWorkerRegistrar />
                     </SharePostProvider>
                   </TooltipProvider>
                 </AudioPlayerProvider>