Add the Install the app bottom sheet for mobile browsers

- New InstallSheet mounted in the root layout: appears ~1s after load on
  iOS/Android phones and tablets, over any screen including the key gate,
  with a dimmed backdrop. Never on desktop, never in standalone mode, and
  at most once per 7 days after a dismissal (localStorage).
- Platform/browser detection (lib/install.ts): iPhone/iPad incl. iPadOS
  reporting as Mac with touch, Android, Safari vs Chrome vs other vs
  in-app browsers, with step 1 adapted accordingly.
- iOS: numbered steps with chips (Safari, Share, ... , More, Add to Home
  Screen) and the accent Add pill. Android: captured beforeinstallprompt
  turns into a native Install button; fallback steps use Install app /
  Add to Home screen chips and an accent Install pill.
- Close via X, backdrop, Escape or swipe-down on the handle; the site is
  untouched afterwards. Anchored to 100dvh so browser toolbars never hide
  the last step; pb-safe respects the home indicator.
- Dark sheet by default; light only when the app theme was explicitly set
  to light. Settings gains a mobile-only Install app row that reopens it.
- The inline head script captures beforeinstallprompt before hydration and
  records appinstalled. Old InstallHint banner removed.
- Tests: new install-sheet suite (45 checks across iPhone Safari/Chrome/
  in-app, Android Chrome/Samsung, desktop, prompt path, dismissal, 7-day
  expiry, standalone, Settings row, both themes); pwa suite updated.

components/SettingsDialog.tsx

@@ -4,13 +4,15 @@ import { AnimatePresence, motion } from "framer-motion";
 import { useEffect, useState } from "react";
 
 import { cn } from "@/lib/utils";
+import { openInstallSheet, useInstallAvailable } from "@/lib/install";
 import { clearApiKey, saveSettings } from "@/lib/settings";
 import { useHealth } from "@/lib/use-health";
-import { AlertTriangleIcon, CheckCircleIcon, XCircleIcon } from "@/components/icons";
+import { AlertTriangleIcon, CheckCircleIcon, ChevronRightIcon, DownloadIcon, XCircleIcon } from "@/components/icons";
 import { Button, Spinner } from "@/components/ui";
 
 export function SettingsDialog({ open, onClose }: { open: boolean; onClose: () => void }) {
   const { health, loading, error, refresh, apiKey } = useHealth();
+  const installAvailable = useInstallAvailable();
   const [keyDraft, setKeyDraft] = useState(apiKey);
   const [reveal, setReveal] = useState(false);
   const [saved, setSaved] = useState(false);
@@ -145,6 +147,36 @@ export function SettingsDialog({ open, onClose }: { open: boolean; onClose: () =
               </div>
             </section>
 
+            {/* ------------------------------------------------ install */}
+            {installAvailable ? (
+              <section className="mb-4 rounded-2xl border border-[var(--hairline)] bg-[var(--surface-sunken)] p-1.5">
+                <button
+                  type="button"
+                  onClick={() => {
+                    onClose();
+                    openInstallSheet();
+                  }}
+                  className="flex w-full items-center gap-3 rounded-xl px-2.5 py-2 text-left transition hover:bg-[var(--hover)]"
+                >
+                  <span
+                    aria-hidden
+                    className="grid size-9 shrink-0 place-items-center rounded-xl border border-[var(--hairline)] bg-[var(--surface)] text-[var(--text-muted)]"
+                  >
+                    <DownloadIcon className="size-4" />
+                  </span>
+                  <span className="min-w-0 flex-1">
+                    <span className="block text-sm font-semibold text-frost-950 dark:text-frost-50">
+                      Install app
+                    </span>
+                    <span className="block text-[12px] text-[var(--text-subtle)]">
+                      Add Freezmo to your home screen
+                    </span>
+                  </span>
+                  <ChevronRightIcon className="size-4 shrink-0 text-[var(--text-subtle)]" />
+                </button>
+              </section>
+            ) : null}
+
             {loading && !health ? (
               <div className="flex items-center gap-3 py-6 text-sm text-slate-600 dark:text-slate-300">
                 <Spinner className="size-5" /> Checking Ollama…