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,115 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import Link from "next/link";
+import { useRouter, usePathname, useSearchParams } from "next/navigation";
+import { NavIcon } from "@/components/nav-icon";
+import { cn } from "@/lib/utils";
+
+const SECTIONS = [
+  { id: "household", label: "Household", icon: "people" },
+  { id: "sharing", label: "Sharing & links", icon: "link" },
+  { id: "notifications", label: "Notifications", icon: "bell" },
+  { id: "calendars", label: "Calendars & lists", icon: "calendar" },
+  { id: "appearance", label: "Appearance", icon: "sun" },
+  { id: "data", label: "Data & backups", icon: "history" },
+] as const;
+
+export type SectionId = (typeof SECTIONS)[number]["id"];
+
+export function SettingsSidebar({ active }: { active: SectionId }) {
+  const router = useRouter();
+  const pathname = usePathname();
+
+  return (
+    <nav
+      className="rounded-[var(--r-lg)] border-[0.5px] bg-[var(--card)] shadow-[var(--shadow-1)] h-fit"
+      style={{ borderColor: "var(--hair)" }}
+      aria-label="Settings sections"
+    >
+      <div className="card-h">
+        <h3 className="serif text-[15px] m-0 font-medium">Settings</h3>
+      </div>
+      <div className="p-1.5">
+        {SECTIONS.map((s) => (
+          <button
+            key={s.id}
+            type="button"
+            className={cn("nav-item h-9")}
+            aria-current={active === s.id ? "page" : undefined}
+            onClick={() => {
+              const url = new URL(window.location.href);
+              url.searchParams.set("s", s.id);
+              router.replace(url.pathname + "?" + url.searchParams.toString() + url.hash, {
+                scroll: false,
+              });
+            }}
+          >
+            <NavIcon name={s.icon} className="size-4" />
+            <span className="nav-label">{s.label}</span>
+          </button>
+        ))}
+        <div className="nav-divider" />
+        <Link href="/settings/household" className="nav-item h-9">
+          <NavIcon name="users" className="size-4" />
+          <span className="nav-label">Manage household</span>
+        </Link>
+      </div>
+      <SectionHashSync pathname={pathname} />
+    </nav>
+  );
+}
+
+// When the URL changes with a hash like #sharing (used by sidebar Share-links link),
+// ensure the matching section opens.
+function SectionHashSync({ pathname }: { pathname: string | null }) {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    const hash = window.location.hash.slice(1);
+    if (!hash) return;
+    if (!SECTIONS.some((s) => s.id === hash)) return;
+    if (searchParams?.get("s") === hash) return;
+    const url = new URL(window.location.href);
+    url.searchParams.set("s", hash);
+    router.replace(url.pathname + "?" + url.searchParams.toString(), { scroll: false });
+  }, [pathname, router, searchParams]);
+  return null;
+}
+
+export function SettingsTabsMobile({ active }: { active: SectionId }) {
+  const router = useRouter();
+  return (
+    <div className="seg w-full overflow-x-auto" style={{ display: "flex" }}>
+      {SECTIONS.map((s) => (
+        <button
+          key={s.id}
+          type="button"
+          role="tab"
+          aria-selected={active === s.id}
+          onClick={() => {
+            const url = new URL(window.location.href);
+            url.searchParams.set("s", s.id);
+            router.replace(url.pathname + "?" + url.searchParams.toString(), { scroll: false });
+          }}
+        >
+          {s.label.split(" ")[0]}
+        </button>
+      ))}
+    </div>
+  );
+}
+
+export function ResponsiveSidebar({ active }: { active: SectionId }) {
+  const [isMobile, setIsMobile] = useState(false);
+  useEffect(() => {
+    const mq = window.matchMedia("(max-width: 759px)");
+    const apply = () => setIsMobile(mq.matches);
+    apply();
+    mq.addEventListener("change", apply);
+    return () => mq.removeEventListener("change", apply);
+  }, []);
+  if (isMobile) return <SettingsTabsMobile active={active} />;
+  return <SettingsSidebar active={active} />;
+}