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,13 +1,20 @@
 import { notFound } from "next/navigation";
 import { Suspense } from "react";
 import { getCurrentSession } from "@/lib/session";
-import { parseDashboardLayout, computeDefaultLayout } from "@/lib/dashboard";
+import { parseDashboardLayout } from "@/lib/dashboard";
+import { computeDefaultLayout } from "@/lib/dashboard.server";
 import { getWidget, getWidgetMetas } from "@/modules/_core";
 import { getDashboardBySlug } from "@/app/d/actions";
 import { DashboardEditor } from "@/components/dashboard-editor";
-import { QuickAddFab } from "@/components/quick-add-fab";
 import { EditDashboardButton } from "@/components/edit-dashboard-button";
+import { DashboardSwitcher } from "@/components/dashboard-switcher";
+import { DashboardTab } from "@/components/dashboard-tab";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { auth } from "@/lib/auth";
+import { db } from "@/lib/db";
+import { dashboards } from "@/modules/_core/schema";
+import { asc, eq } from "drizzle-orm";
+import type { DashLayout } from "@/modules/_core/themes";

 const smColSpan: Record<number, string> = {
  1: "sm:col-span-1",
@@ -24,6 +31,9 @@ const smColSpan: Record<number, string> = {
  12: "sm:col-span-12",
 };

+const greetingForHour = (h: number) =>
+  h < 5 ? "Up early" : h < 12 ? "Good morning" : h < 18 ? "Good afternoon" : "Good evening";
+
 export default async function DashboardPage({
  params,
  searchParams,
@@ -52,17 +62,55 @@ export default async function DashboardPage({
    );
  }

+  // For dashboard tabs sub-header, pull the user's dashboards (small list).
+  const session = await auth();
+  const userDashboards = session?.user?.id
+    ? await db
+        .select({
+          id: dashboards.id,
+          name: dashboards.name,
+          slug: dashboards.slug,
+          isDefault: dashboards.isDefault,
+          position: dashboards.position,
+        })
+        .from(dashboards)
+        .where(eq(dashboards.userId, session.user.id))
+        .orderBy(asc(dashboards.position), asc(dashboards.createdAt))
+    : [];
+
  const ctx = { userId: user.id, householdId: household.id };
  const placements = [...layout.widgets].sort((a, b) => a.y - b.y || a.x - b.x);
+  const dashLayout = (user.themeDashLayout as DashLayout) ?? "classic";
+  const containerCls =
+    dashLayout === "glance" ? "max-w-[760px] mx-auto" : dashLayout === "split" ? "" : "";
+  const greeting = greetingForHour(new Date().getHours());
+  const today = new Date().toLocaleDateString(undefined, {
+    weekday: "long",
+    month: "long",
+    day: "numeric",
+  });
+  const firstName = (user.name ?? "").split(" ")[0] ?? "";

  return (
-    <div className="p-4 sm:p-6">
-      <div className="mb-6 flex items-center justify-between">
-        <h1 className="text-2xl font-bold">{dashboard.name}</h1>
-        <div className="flex items-center gap-2">
-          <QuickAddFab />
-          <EditDashboardButton />
+    <div className={containerCls}>
+      {userDashboards.length > 1 && (
+        <div className="flex items-center gap-1 mb-4 overflow-x-auto">
+          {userDashboards.map((d) => (
+            <DashboardTab key={d.id} slug={d.slug} name={d.name} />
+          ))}
+          <DashboardSwitcher dashboards={userDashboards} />
        </div>
+      )}
+
+      <div className="mb-6 flex items-end justify-between gap-4 flex-wrap">
+        <div>
+          <h1 className="serif text-[26px] sm:text-[30px] leading-tight tracking-tight">
+            {greeting}
+            {firstName && `, ${firstName}`}.
+          </h1>
+          <p className="muted mt-1 text-[13px]">{today}</p>
+        </div>
+        <EditDashboardButton />
      </div>

      <div className="grid grid-cols-1 gap-4 sm:grid-cols-12">
@@ -73,8 +121,8 @@ export default async function DashboardPage({
          return (
            <div key={i} className={`col-span-1 ${colClass}`}>
              <Card className="h-full">
-                <CardHeader className="pb-2">
-                  <CardTitle className="text-base">{widget.title}</CardTitle>
+                <CardHeader>
+                  <CardTitle>{widget.title}</CardTitle>
                </CardHeader>
                <CardContent>
                  <Suspense