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
@@ -0,0 +1,83 @@
+import {
+  Bell,
+  Calendar,
+  CalendarDays,
+  CheckSquare,
+  ChevronDown,
+  ChevronLeft,
+  ChevronRight,
+  Circle,
+  Clock,
+  Eye,
+  FileText,
+  Filter,
+  Globe,
+  History,
+  Home,
+  Link as LinkIcon,
+  ListChecks,
+  Lock,
+  Mail,
+  Menu,
+  MoreHorizontal,
+  Pencil,
+  Phone,
+  Pin,
+  PinOff,
+  Plus,
+  Search,
+  Settings,
+  Share2,
+  ShoppingCart,
+  Sparkles,
+  Sun,
+  Trash2,
+  Users,
+  X,
+} from "lucide-react";
+import type { LucideProps } from "lucide-react";
+
+const ICONS: Record<string, React.ComponentType<LucideProps>> = {
+  home: Home,
+  calendar: Calendar,
+  "calendar-days": CalendarDays,
+  list: ListChecks,
+  "check-square": CheckSquare,
+  "file-text": FileText,
+  note: FileText,
+  settings: Settings,
+  history: History,
+  link: LinkIcon,
+  people: Users,
+  users: Users,
+  plus: Plus,
+  search: Search,
+  bell: Bell,
+  pin: Pin,
+  "pin-off": PinOff,
+  cart: ShoppingCart,
+  "shopping-cart": ShoppingCart,
+  share: Share2,
+  lock: Lock,
+  eye: Eye,
+  clock: Clock,
+  sparkles: Sparkles,
+  pencil: Pencil,
+  trash: Trash2,
+  globe: Globe,
+  phone: Phone,
+  filter: Filter,
+  sun: Sun,
+  mail: Mail,
+  menu: Menu,
+  more: MoreHorizontal,
+  x: X,
+  "chevron-left": ChevronLeft,
+  "chevron-right": ChevronRight,
+  "chevron-down": ChevronDown,
+};
+
+export function NavIcon({ name, ...rest }: { name: string } & LucideProps) {
+  const Icon = ICONS[name] ?? Circle;
+  return <Icon strokeWidth={1.6} {...rest} />;
+}