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
@@ -4,17 +4,73 @@ import { eq } from "drizzle-orm";
 import { revalidatePath } from "next/cache";
 import { db } from "@/lib/db";
 import { users } from "@/modules/_core/schema";
-import { VALID_THEME_IDS, VALID_THEME_MODES } from "@/modules/_core/themes";
-import type { ThemeId, ThemeMode } from "@/modules/_core/themes";
+import {
+  VALID_PALETTES,
+  VALID_THEME_MODES,
+  VALID_FONT_PAIRS,
+  VALID_DENSITIES,
+  VALID_DASH_LAYOUTS,
+  VALID_CAL_VIEWS,
+  VALID_NAV_STYLES,
+} from "@/modules/_core/themes";
+import type {
+  Palette,
+  ThemeMode,
+  FontPair,
+  Density,
+  DashLayout,
+  CalView,
+  NavStyle,
+} from "@/modules/_core/themes";
 import { getCurrentSession } from "@/lib/session";
 import { revokeShareLink } from "@/modules/_core/share";

-export async function setUserTheme({ theme, mode }: { theme: ThemeId; mode: ThemeMode }) {
-  if (!VALID_THEME_IDS.has(theme)) throw new Error("Invalid theme");
-  if (!VALID_THEME_MODES.has(mode)) throw new Error("Invalid theme mode");
+export interface ThemePatch {
+  palette?: Palette;
+  mode?: ThemeMode;
+  fontPair?: FontPair;
+  density?: Density;
+  dashLayout?: DashLayout;
+  calView?: CalView;
+  navStyle?: NavStyle;
+}
+
+export async function setUserTheme(patch: ThemePatch) {
+  const update: Record<string, string> = {};
+
+  if (patch.palette !== undefined) {
+    if (!VALID_PALETTES.has(patch.palette)) throw new Error("Invalid palette");
+    update["themePalette"] = patch.palette;
+  }
+  if (patch.mode !== undefined) {
+    if (!VALID_THEME_MODES.has(patch.mode)) throw new Error("Invalid theme mode");
+    update["themeMode"] = patch.mode;
+  }
+  if (patch.fontPair !== undefined) {
+    if (!VALID_FONT_PAIRS.has(patch.fontPair)) throw new Error("Invalid font pair");
+    update["themeFontPair"] = patch.fontPair;
+  }
+  if (patch.density !== undefined) {
+    if (!VALID_DENSITIES.has(patch.density)) throw new Error("Invalid density");
+    update["themeDensity"] = patch.density;
+  }
+  if (patch.dashLayout !== undefined) {
+    if (!VALID_DASH_LAYOUTS.has(patch.dashLayout)) throw new Error("Invalid dashboard layout");
+    update["themeDashLayout"] = patch.dashLayout;
+  }
+  if (patch.calView !== undefined) {
+    if (!VALID_CAL_VIEWS.has(patch.calView)) throw new Error("Invalid calendar view");
+    update["themeCalView"] = patch.calView;
+  }
+  if (patch.navStyle !== undefined) {
+    if (!VALID_NAV_STYLES.has(patch.navStyle)) throw new Error("Invalid nav style");
+    update["themeNavStyle"] = patch.navStyle;
+  }
+
+  if (Object.keys(update).length === 0) return;

  const { user } = await getCurrentSession();
-  await db.update(users).set({ theme, themeMode: mode }).where(eq(users.id, user.id));
+  await db.update(users).set(update).where(eq(users.id, user.id));
 }

 export async function setCompletionVisibilityHours(hours: number): Promise<void> {