Implement PWA shell (task 50)

Add web manifest, placeholder icons, app-shell service worker, and
install prompt so famapp is installable on iOS and Android home screens.

- public/manifest.webmanifest — name, short_name, standalone display,
  start_url /, all four icon sizes (192/384/512 + maskable)
- public/icon-{180,192,384,512,512-maskable}.png — indigo placeholder
  squares generated by scripts/generate-icons.mjs (pnpm gen:icons)
- public/icon.svg — house-icon SVG source for future branded export
- public/sw.js — hand-rolled app-shell SW: precaches offline.html,
  cache-first for /_next/static/, network-first navigation with offline
  fallback, network-only for /api/*
- public/offline.html — branded offline fallback page
- src/components/pwa-register.tsx — client SW registration
- src/components/install-prompt.tsx — dismissible install banner:
  beforeinstallprompt on Android, "Add to Home Screen" hint on iOS
- Root layout: viewport themeColor, manifest/appleWebApp metadata,
  apple-touch-icon, mounts PwaRegister + InstallPrompt

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/app/layout.tsx

@@ -1,4 +1,4 @@
-import type { Metadata } from "next";
+import type { Metadata, Viewport } from "next";
 import "./globals.css";
 import { Geist } from "next/font/google";
 import { cn } from "@/lib/utils";
@@ -13,12 +13,27 @@ import { getQuickAdds } from "@/modules/_core";
 import { QuickAddProvider } from "@/components/quick-add-provider";
 import { QuickAddSheet } from "@/components/quick-add-sheet";
 import { CommandPalette } from "@/components/command-palette";
+import { PwaRegister } from "@/components/pwa-register";
+import { InstallPrompt } from "@/components/install-prompt";
 
 const geist = Geist({ subsets: ["latin"], variable: "--font-sans" });
 
+export const viewport: Viewport = {
+  themeColor: "#4F46E5",
+};
+
 export const metadata: Metadata = {
   title: "famapp",
   description: "Family coordination app",
+  manifest: "/manifest.webmanifest",
+  appleWebApp: {
+    capable: true,
+    statusBarStyle: "default",
+    title: "famapp",
+  },
+  icons: {
+    apple: "/icon-180.png",
+  },
 };
 
 // Runs before paint — reads localStorage / prefers-color-scheme and applies
@@ -82,6 +97,8 @@ export default async function RootLayout({
           <main>{children}</main>
           <QuickAddSheet />
           <CommandPalette />
+          <InstallPrompt />
+          <PwaRegister />
         </QuickAddProvider>
       </body>
     </html>

src/components/install-prompt.tsx

@@ -0,0 +1,124 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { X, Share, Plus } from "lucide-react";
+
+const DISMISSED_KEY = "pwa-install-dismissed";
+
+type Prompt = "android" | "ios";
+
+function isIos() {
+  return (
+    /iphone|ipad|ipod/i.test(navigator.userAgent) ||
+    // iPad on iOS 13+ reports as Mac
+    (navigator.platform === "MacIntel" && navigator.maxTouchPoints > 1)
+  );
+}
+
+function isInStandaloneMode() {
+  return (
+    "standalone" in window.navigator &&
+    (window.navigator as { standalone?: boolean }).standalone === true
+  );
+}
+
+export function InstallPrompt() {
+  const [prompt, setPrompt] = useState<Prompt | null>(null);
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const [deferredEvent, setDeferredEvent] = useState<any>(null);
+
+  useEffect(() => {
+    if (localStorage.getItem(DISMISSED_KEY)) return;
+
+    // Android / Chrome desktop — beforeinstallprompt fires
+    const handler = (e: Event) => {
+      e.preventDefault();
+      setDeferredEvent(e);
+      setPrompt("android");
+    };
+    window.addEventListener("beforeinstallprompt", handler);
+
+    // iOS — no beforeinstallprompt; defer setState out of the synchronous
+    // effect body to satisfy react-hooks/set-state-in-effect.
+    let iosTimer: ReturnType<typeof setTimeout> | undefined;
+    if (isIos() && !isInStandaloneMode()) {
+      iosTimer = setTimeout(() => setPrompt("ios"), 0);
+    }
+
+    return () => {
+      window.removeEventListener("beforeinstallprompt", handler);
+      clearTimeout(iosTimer);
+    };
+  }, []);
+
+  function dismiss() {
+    localStorage.setItem(DISMISSED_KEY, "1");
+    setPrompt(null);
+  }
+
+  async function install() {
+    if (!deferredEvent) return;
+    deferredEvent.prompt();
+    const { outcome } = await deferredEvent.userChoice;
+    if (outcome === "accepted" || outcome === "dismissed") {
+      dismiss();
+    }
+  }
+
+  if (!prompt) return null;
+
+  return (
+    <div
+      role="banner"
+      className="fixed bottom-0 left-0 right-0 z-50 flex items-start gap-3 border-t bg-background px-4 py-3 shadow-lg sm:bottom-4 sm:left-1/2 sm:right-auto sm:-translate-x-1/2 sm:rounded-xl sm:border sm:px-5 sm:py-4 sm:shadow-xl"
+    >
+      {/* App icon */}
+      <div className="mt-0.5 h-10 w-10 shrink-0 overflow-hidden rounded-xl bg-[#4F46E5]">
+        {/* eslint-disable-next-line @next/next/no-img-element */}
+        <img src="/icon-192.png" alt="" className="h-full w-full object-cover" />
+      </div>
+
+      <div className="flex-1 text-sm">
+        <p className="font-semibold leading-snug">Add famapp to your home screen</p>
+
+        {prompt === "android" && (
+          <>
+            <p className="mt-0.5 text-muted-foreground">
+              Install for a faster, app-like experience.
+            </p>
+            <button
+              onClick={install}
+              className="mt-2 rounded-md bg-[#4F46E5] px-3 py-1.5 text-xs font-semibold text-white"
+            >
+              Install
+            </button>
+          </>
+        )}
+
+        {prompt === "ios" && (
+          <p className="mt-0.5 text-muted-foreground">
+            Tap{" "}
+            <Share
+              className="inline-block h-4 w-4 align-text-bottom"
+              aria-label="Share"
+            />{" "}
+            then{" "}
+            <strong className="font-medium">
+              <Plus className="inline-block h-3.5 w-3.5 align-text-bottom" />
+              &nbsp;Add to Home Screen
+            </strong>
+            .
+          </p>
+        )}
+      </div>
+
+      <button
+        onClick={dismiss}
+        aria-label="Dismiss"
+        className="mt-0.5 shrink-0 rounded p-1 text-muted-foreground hover:bg-muted"
+      >
+        <X className="h-4 w-4" />
+      </button>
+    </div>
+  );
+}

src/components/pwa-register.tsx

@@ -0,0 +1,28 @@
+"use client";
+
+import { useEffect } from "react";
+
+export function PwaRegister() {
+  useEffect(() => {
+    if (!("serviceWorker" in navigator)) return;
+
+    navigator.serviceWorker
+      .register("/sw.js", { scope: "/" })
+      .then((reg) => {
+        reg.addEventListener("updatefound", () => {
+          const next = reg.installing;
+          if (!next) return;
+          next.addEventListener("statechange", () => {
+            if (next.state === "installed" && navigator.serviceWorker.controller) {
+              // New version available — the next navigation will pick it up
+              // because skipWaiting() is called in the SW install handler.
+              console.info("[famapp] Service worker updated.");
+            }
+          });
+        });
+      })
+      .catch((err) => console.warn("[famapp] SW registration failed:", err));
+  }, []);
+
+  return null;
+}