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,12 +1,7 @@
 import { DrizzleAdapter } from "@auth/drizzle-adapter";
 import NextAuth, { type DefaultSession } from "next-auth";
 import { db } from "@/lib/db";
-import {
-  accounts,
-  sessions,
-  users,
-  verificationTokens,
-} from "@/modules/_core/schema";
+import { accounts, sessions, users, verificationTokens } from "@/modules/_core/schema";

 declare module "next-auth" {
  interface Session {
@@ -0,0 +1,31 @@
+import "server-only";
+import { getRegistry } from "@/modules/_core";
+import type { SerializedWidgetMeta } from "@/modules/_core/registry";
+import type { DashboardLayout, PresetId } from "./dashboard";
+import { computePresetLayoutFromMetas } from "./dashboard";
+
+/** Build a layout matching one of the design's three dashboard arrangements
+ *  using the live module registry. Server-only — the registry is empty on
+ *  the client. */
+export function computePresetLayout(preset: PresetId): DashboardLayout {
+  const { widgets } = getRegistry();
+  if (widgets.length === 0) return { version: 1, widgets: [] };
+
+  const sorted = [...widgets].sort((a, b) => a.defaultPriority - b.defaultPriority);
+  const metas: SerializedWidgetMeta[] = sorted.map((w) => ({
+    id: w.id,
+    title: w.title,
+    description: w.description,
+    category: w.category,
+    defaultSize: w.defaultSize,
+    minSize: w.minSize,
+    maxSize: w.maxSize,
+    defaultConfig: w.defaultConfig,
+  }));
+
+  return computePresetLayoutFromMetas(preset, metas);
+}
+
+export function computeDefaultLayout(): DashboardLayout {
+  return computePresetLayout("classic");
+}
@@ -1,5 +1,5 @@
 import { z } from "zod";
-import { getRegistry } from "@/modules/_core";
+import type { SerializedWidgetMeta } from "@/modules/_core/registry";

 export type WidgetPlacement = {
  widgetId: string;
@@ -35,33 +35,104 @@ export function parseDashboardLayout(raw: unknown): DashboardLayout | null {
  return result.data;
 }

-export function computeDefaultLayout(): DashboardLayout {
-  const { widgets } = getRegistry();
-  const sorted = [...widgets].sort((a, b) => a.defaultPriority - b.defaultPriority);
+export type PresetId = "classic" | "split" | "glance";

-  const placements: WidgetPlacement[] = [];
-  let curX = 0;
-  let curY = 0;
-  let rowH = 0;
-
-  for (const widget of sorted) {
-    const { w, h } = widget.defaultSize;
-    if (curX + w > 12) {
-      curY += rowH;
-      curX = 0;
-      rowH = 0;
-    }
-    placements.push({
-      widgetId: widget.id,
-      config: widget.defaultConfig,
-      x: curX,
-      y: curY,
-      w,
-      h,
-    });
-    curX += w;
-    rowH = Math.max(rowH, h);
+/** Client-safe layout builder: pass the metas explicitly. The server-only
+ *  variants (`computePresetLayout`, `computeDefaultLayout`) live in
+ *  `dashboard.server.ts` because they reach into the module registry. */
+export function computePresetLayoutFromMetas(
+  preset: PresetId,
+  metas: SerializedWidgetMeta[],
+): DashboardLayout {
+  switch (preset) {
+    case "classic":
+      return classicLayout(metas);
+    case "split":
+      return splitLayout(metas);
+    case "glance":
+      return glanceLayout(metas);
  }
+}
+
+function classicLayout(metas: SerializedWidgetMeta[]): DashboardLayout {
+  const placements: WidgetPlacement[] = [];
+  let mainY = 0;
+  let railY = 0;
+
+  metas.forEach((m, i) => {
+    const inRail = i % 3 === 0 && i > 0;
+    if (inRail) {
+      placements.push({
+        widgetId: m.id,
+        config: m.defaultConfig,
+        x: 8,
+        y: railY,
+        w: 4,
+        h: m.defaultSize.h,
+      });
+      railY += m.defaultSize.h;
+    } else {
+      placements.push({
+        widgetId: m.id,
+        config: m.defaultConfig,
+        x: 0,
+        y: mainY,
+        w: 8,
+        h: m.defaultSize.h,
+      });
+      mainY += m.defaultSize.h;
+    }
+  });

  return { version: 1, widgets: placements };
 }
+
+function splitLayout(metas: SerializedWidgetMeta[]): DashboardLayout {
+  const placements: WidgetPlacement[] = [];
+  let leftY = 0;
+  let rightY = 0;
+
+  metas.forEach((m, i) => {
+    const left = i % 2 === 0;
+    if (left) {
+      placements.push({
+        widgetId: m.id,
+        config: m.defaultConfig,
+        x: 0,
+        y: leftY,
+        w: 6,
+        h: m.defaultSize.h,
+      });
+      leftY += m.defaultSize.h;
+    } else {
+      placements.push({
+        widgetId: m.id,
+        config: m.defaultConfig,
+        x: 6,
+        y: rightY,
+        w: 6,
+        h: m.defaultSize.h,
+      });
+      rightY += m.defaultSize.h;
+    }
+  });
+
+  return { version: 1, widgets: placements };
+}
+
+function glanceLayout(metas: SerializedWidgetMeta[]): DashboardLayout {
+  const placements: WidgetPlacement[] = [];
+  let y = 0;
+  metas.forEach((m) => {
+    placements.push({
+      widgetId: m.id,
+      config: m.defaultConfig,
+      x: 0,
+      y,
+      w: 12,
+      h: m.defaultSize.h,
+    });
+    y += m.defaultSize.h;
+  });
+  return { version: 1, widgets: placements };
+}