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
@@ -1,49 +1,182 @@
 "use client";

-import { useCallback, useState } from "react";
-import type { ThemeId, ThemeMode } from "@/modules/_core/themes";
+import { useCallback, useEffect, useState } from "react";
+import type {
+  Palette,
+  ThemeMode,
+  FontPair,
+  Density,
+  DashLayout,
+  CalView,
+  NavStyle,
+} from "@/modules/_core/themes";
+import { navStyleToDataNav } from "@/modules/_core/themes";
 import { setUserTheme } from "@/app/settings/actions";

-function applyTheme(theme: ThemeId, mode: ThemeMode) {
+const MOBILE_QUERY = "(max-width: 759px)";
+const DARK_QUERY = "(prefers-color-scheme: dark)";
+
+function applyTheme(state: {
+  palette: Palette;
+  mode: ThemeMode;
+  fontPair: FontPair;
+  density: Density;
+  navStyle: NavStyle;
+}) {
  const html = document.documentElement;
-  html.setAttribute("data-theme", theme);
+  html.setAttribute("data-theme", state.palette);
+  html.setAttribute("data-font-pair", state.fontPair);
+  html.setAttribute("data-density", state.density);
+
+  const isMobile = window.matchMedia(MOBILE_QUERY).matches;
+  const desktopNav = navStyleToDataNav(state.navStyle);
+  const dataNav = isMobile ? (state.navStyle === "fab-only" ? "fab" : "bottom") : desktopNav;
+  html.setAttribute("data-nav", dataNav);
+
  const dark =
-    mode === "dark" ||
-    (mode === "system" && window.matchMedia("(prefers-color-scheme: dark)").matches);
+    state.mode === "dark" || (state.mode === "system" && window.matchMedia(DARK_QUERY).matches);
  html.classList.toggle("dark", dark);
+
  try {
-    localStorage.setItem("theme", theme);
-    localStorage.setItem("themeMode", mode);
+    localStorage.setItem("themePalette", state.palette);
+    localStorage.setItem("themeMode", state.mode);
+    localStorage.setItem("themeFontPair", state.fontPair);
+    localStorage.setItem("themeDensity", state.density);
+    localStorage.setItem("themeNavStyle", state.navStyle);
  } catch {
    // storage blocked
  }
 }

 export function useTheme(
-  initialTheme: ThemeId = "default",
-  initialMode: ThemeMode = "system",
+  initial: {
+    palette?: Palette;
+    mode?: ThemeMode;
+    fontPair?: FontPair;
+    density?: Density;
+    dashLayout?: DashLayout;
+    calView?: CalView;
+    navStyle?: NavStyle;
+  } = {},
  signedIn = false,
 ) {
-  const [theme, setThemeState] = useState<ThemeId>(initialTheme);
-  const [mode, setModeState] = useState<ThemeMode>(initialMode);
+  const [palette, setPaletteState] = useState<Palette>(initial.palette ?? "clay");
+  const [mode, setModeState] = useState<ThemeMode>(initial.mode ?? "system");
+  const [fontPair, setFontPairState] = useState<FontPair>(initial.fontPair ?? "serif-sans");
+  const [density, setDensityState] = useState<Density>(initial.density ?? "regular");
+  const [dashLayout, setDashLayoutState] = useState<DashLayout>(initial.dashLayout ?? "classic");
+  const [calView, setCalViewState] = useState<CalView>(initial.calView ?? "month");
+  const [navStyle, setNavStyleState] = useState<NavStyle>(initial.navStyle ?? "rail-desktop");

-  const setTheme = useCallback(
-    (next: ThemeId) => {
-      setThemeState(next);
-      applyTheme(next, mode);
-      if (signedIn) void setUserTheme({ theme: next, mode });
+  // Re-apply data-nav whenever the viewport crosses the mobile breakpoint.
+  useEffect(() => {
+    const mq = window.matchMedia(MOBILE_QUERY);
+    const onChange = () => applyTheme({ palette, mode, fontPair, density, navStyle });
+    mq.addEventListener("change", onChange);
+    return () => mq.removeEventListener("change", onChange);
+  }, [palette, mode, fontPair, density, navStyle]);
+
+  // Re-apply dark when system pref flips and we're in 'system' mode.
+  useEffect(() => {
+    if (mode !== "system") return;
+    const mq = window.matchMedia(DARK_QUERY);
+    const onChange = () => applyTheme({ palette, mode, fontPair, density, navStyle });
+    mq.addEventListener("change", onChange);
+    return () => mq.removeEventListener("change", onChange);
+  }, [palette, mode, fontPair, density, navStyle]);
+
+  const persist = useCallback(
+    (patch: Parameters<typeof setUserTheme>[0]) => {
+      if (signedIn) void setUserTheme(patch);
    },
-    [mode, signedIn],
+    [signedIn],
+  );
+
+  const setPalette = useCallback(
+    (next: Palette) => {
+      setPaletteState(next);
+      applyTheme({ palette: next, mode, fontPair, density, navStyle });
+      persist({ palette: next });
+    },
+    [mode, fontPair, density, navStyle, persist],
  );

  const setMode = useCallback(
    (next: ThemeMode) => {
      setModeState(next);
-      applyTheme(theme, next);
-      if (signedIn) void setUserTheme({ theme, mode: next });
+      applyTheme({ palette, mode: next, fontPair, density, navStyle });
+      persist({ mode: next });
    },
-    [theme, signedIn],
+    [palette, fontPair, density, navStyle, persist],
  );

-  return { theme, mode, setTheme, setMode };
+  const setFontPair = useCallback(
+    (next: FontPair) => {
+      setFontPairState(next);
+      applyTheme({ palette, mode, fontPair: next, density, navStyle });
+      persist({ fontPair: next });
+    },
+    [palette, mode, density, navStyle, persist],
+  );
+
+  const setDensity = useCallback(
+    (next: Density) => {
+      setDensityState(next);
+      applyTheme({ palette, mode, fontPair, density: next, navStyle });
+      persist({ density: next });
+    },
+    [palette, mode, fontPair, navStyle, persist],
+  );
+
+  const setDashLayout = useCallback(
+    (next: DashLayout) => {
+      setDashLayoutState(next);
+      try {
+        localStorage.setItem("themeDashLayout", next);
+      } catch {
+        // storage blocked
+      }
+      persist({ dashLayout: next });
+    },
+    [persist],
+  );
+
+  const setCalView = useCallback(
+    (next: CalView) => {
+      setCalViewState(next);
+      try {
+        localStorage.setItem("themeCalView", next);
+      } catch {
+        // storage blocked
+      }
+      persist({ calView: next });
+    },
+    [persist],
+  );
+
+  const setNavStyle = useCallback(
+    (next: NavStyle) => {
+      setNavStyleState(next);
+      applyTheme({ palette, mode, fontPair, density, navStyle: next });
+      persist({ navStyle: next });
+    },
+    [palette, mode, fontPair, density, persist],
+  );
+
+  return {
+    palette,
+    mode,
+    fontPair,
+    density,
+    dashLayout,
+    calView,
+    navStyle,
+    setPalette,
+    setMode,
+    setFontPair,
+    setDensity,
+    setDashLayout,
+    setCalView,
+    setNavStyle,
+  };
 }