Apply paper-and-ink design system across all surfaces

Replaces the generic shadcn/ui gray theme + horizontal top-bar shell with the paper-and-ink language from the Claude Design handoff bundle: warm off-white paper, near-black ink, Source Serif 4 + Inter, hairline borders, muted ink accents (clay/indigo/sage/plum/ochre) used functionally for calendars and share scopes. Theme switcher expanded from 2 dimensions (theme × mode) to 7: palette × mode × fontPair × density × dashLayout × calView × navStyle. All exposed in Settings → Appearance and persisted on the users row. Pre-paint script applies all four data-* attributes from localStorage so reload doesn't flash. App shell restructured to a CSS-grid driven by data-nav on <html>: sidebar on desktop, bottom-nav + FAB under 760px. Four desktop nav modes wired (sidebar/rail/top/fab-only). Topbar gets a search-→-CommandPalette button, notification bell, "+ New" quick-add, avatar. Dashboard, calendar, lists, notes, settings, login, public share viewer, and quick-add sheet all reskinned. Dashboard editor gains a Preset menu (classic/split/glance) that fills the layout from the registered widgets. FullCalendar wrapped in .fc-skin and inherits all paper-and-ink tokens via CSS variable overrides. Public share viewer (/s/<token>) rebuilt around ShareFrame: expiration banner, brand strip, eyebrow chip, 38px serif title, mini-day + mini-map cards, share-rows. Schema: drops users.theme; adds theme_palette, theme_font_pair, theme_density, theme_dash_layout, theme_cal_view, theme_nav_style with defaults that match the design (clay / serif-sans / regular / classic / month / rail-desktop). Migration 0014_paper_ink_theme. Middleware sets x-pathname so the AppShell server component can render bare for /s/* and /login without a route-group refactor. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
2026-05-07 01:03:21 -05:00
parent e130cda6c5
commit 9612a54e52
61 changed files with 4173 additions and 894 deletions
@@ -70,36 +70,51 @@ export function InstallPrompt() {
  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"
+      className="fixed bottom-[80px] left-0 right-0 z-50 flex items-start gap-3 px-4 py-3 sm:bottom-4 sm:left-1/2 sm:right-auto sm:-translate-x-1/2 sm:px-5 sm:py-4"
+      style={{
+        background: "var(--card)",
+        border: "0.5px solid var(--hair-2)",
+        borderRadius: "var(--r-lg)",
+        boxShadow: "var(--shadow-pop)",
+        margin: "0 14px",
+      }}
    >
-      {/* 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
+        className="mt-0.5 size-10 shrink-0 overflow-hidden flex items-center justify-center"
+        style={{
+          borderRadius: 8,
+          background: "var(--ink)",
+          color: "var(--paper)",
+          fontFamily: "var(--serif)",
+          fontSize: 18,
+          fontWeight: 500,
+        }}
+      >
+        f
      </div>

-      <div className="flex-1 text-sm">
-        <p className="font-semibold leading-snug">Add famapp to your home screen</p>
+      <div className="flex-1 text-[13.5px]">
+        <p className="font-medium leading-snug text-[var(--ink)] m-0">
+          Add famapp to your home screen
+        </p>

        {prompt === "android" && (
          <>
-            <p className="mt-0.5 text-muted-foreground">
+            <p className="mt-1 muted text-[12.5px] m-0">
              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"
-            >
+            <button onClick={install} className="btn btn-sm btn-primary mt-2">
              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{" "}
+          <p className="mt-1 muted text-[12.5px] m-0">
+            Tap <Share className="inline-block size-3.5 align-text-bottom" aria-label="Share" />{" "}
+            then{" "}
            <strong className="font-medium">
-              <Plus className="inline-block h-3.5 w-3.5 align-text-bottom" />
+              <Plus className="inline-block size-3 align-text-bottom" />
              &nbsp;Add to Home Screen
            </strong>
            .
@@ -110,9 +125,9 @@ export function InstallPrompt() {
      <button
        onClick={dismiss}
        aria-label="Dismiss"
-        className="mt-0.5 shrink-0 rounded p-1 text-muted-foreground hover:bg-muted"
+        className="mt-0.5 shrink-0 rounded p-1 text-[var(--ink-mute)] hover:bg-[var(--shade)]"
      >
-        <X className="h-4 w-4" />
+        <X className="size-4" />
      </button>
    </div>
  );