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,55 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { NavIcon } from "@/components/nav-icon";
+import { cn } from "@/lib/utils";
+
+function isActive(pathname: string, href: string): boolean {
+  // Strip query/fragment from href before matching.
+  const cleaned = href.split("#")[0]?.split("?")[0] ?? href;
+  if (cleaned === "/") return pathname === "/" || pathname.startsWith("/d/");
+  return pathname === cleaned || pathname.startsWith(cleaned + "/");
+}
+
+interface Props {
+  href: string;
+  icon: string;
+  label: string;
+  className?: string;
+  iconClassName?: string;
+  variant?: "sidebar" | "bottom";
+}
+
+export function NavLink({
+  href,
+  icon,
+  label,
+  className,
+  iconClassName,
+  variant = "sidebar",
+}: Props) {
+  const pathname = usePathname() ?? "";
+  const active = isActive(pathname, href);
+
+  if (variant === "bottom") {
+    return (
+      <Link href={href} aria-current={active ? "page" : undefined} className={className}>
+        <NavIcon name={icon} className={cn("size-5", iconClassName)} />
+        <span>{label}</span>
+      </Link>
+    );
+  }
+
+  return (
+    <Link
+      href={href}
+      aria-current={active ? "page" : undefined}
+      className={cn("nav-item", className)}
+      title={label}
+    >
+      <NavIcon name={icon} className={cn("size-4", iconClassName)} />
+      <span className="nav-label">{label}</span>
+    </Link>
+  );
+}