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
@@ -12,6 +12,7 @@ import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { ShareButton } from "@/components/share-button";
+import type { CalView } from "@/modules/_core/themes";
 import {
  Select,
  SelectContent,
@@ -43,14 +44,38 @@ type EventDraft = {
  remindMinutesBefore: number | null;
 };

-const DEFAULT_COLOR = "#2563eb";
+const DEFAULT_COLOR = "#B85C3C";
+
+const VIEW_MAP: Record<CalView, string> = {
+  month: "dayGridMonth",
+  week: "timeGridWeek",
+  day: "timeGridDay",
+};
+
+function withAlpha(hex: string, alpha: number): string {
+  // Accept #RGB / #RRGGBB / non-hex (return as-is for non-hex e.g. var(--))
+  if (!hex.startsWith("#")) return hex;
+  let h = hex.slice(1);
+  if (h.length === 3)
+    h = h
+      .split("")
+      .map((c) => c + c)
+      .join("");
+  if (h.length !== 6) return hex;
+  const a = Math.round(Math.min(1, Math.max(0, alpha)) * 255)
+    .toString(16)
+    .padStart(2, "0");
+  return `#${h}${a}`;
+}

 export function CalendarShell({
  calendars,
  events,
+  defaultView = "month",
 }: {
  calendars: CalendarDto[];
  events: CalendarEventDto[];
+  defaultView?: CalView;
 }) {
  const [calendarRows, setCalendarRows] = useState(calendars);
  const [eventRows, setEventRows] = useState(events);
@@ -380,15 +405,22 @@ export function CalendarShell({
        </div>
      </aside>

-      <section className="min-w-0 p-4">
+      <section className="fc-skin min-w-0 p-4">
        <FullCalendar
          plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin]}
-          initialView="dayGridMonth"
+          initialView={VIEW_MAP[defaultView]}
          headerToolbar={{
            left: "prev,next today",
            center: "title",
            right: "dayGridMonth,timeGridWeek,timeGridDay",
          }}
+          buttonText={{
+            today: "Today",
+            month: "Month",
+            week: "Week",
+            day: "Day",
+          }}
+          dayHeaderFormat={{ weekday: "short" }}
          selectable
          editable
          eventResizableFromStart
@@ -396,19 +428,26 @@ export function CalendarShell({
          eventClick={openExistingEvent}
          eventDrop={moveEvent}
          eventResize={moveEvent}
-          events={visibleEvents.map((event) => ({
-            id: event.id,
-            title: event.title,
-            start: event.startAt,
-            end: event.endAt,
-            allDay: event.allDay,
-            backgroundColor:
+          events={visibleEvents.map((event) => {
+            const color =
              calendarRows.find((calendar) => calendar.id === event.calendarId)?.color ??
-              DEFAULT_COLOR,
-            borderColor:
-              calendarRows.find((calendar) => calendar.id === event.calendarId)?.color ??
-              DEFAULT_COLOR,
-          }))}
+              DEFAULT_COLOR;
+            return {
+              id: event.id,
+              title: event.title,
+              start: event.startAt,
+              end: event.endAt,
+              allDay: event.allDay,
+              backgroundColor: withAlpha(color, 0.14),
+              borderColor: color,
+              textColor: "var(--ink-2)",
+              extendedProps: { calendarId: event.calendarId, color },
+            };
+          })}
+          eventClassNames={(arg) => {
+            const id = String(arg.event.extendedProps["calendarId"] ?? "");
+            return id ? [`fc-cal-${id.slice(0, 8)}`] : [];
+          }}
          height="auto"
        />
      </section>
@@ -1,77 +1,167 @@
-import { MapPin, StickyNote } from "lucide-react";
+import { Calendar as CalendarIcon, MapPin } from "lucide-react";
 import type { CalendarShareData, EventShareData } from "../server/share-queries";
+import { ShareEyebrow } from "@/components/share/share-eyebrow";
+import { MiniDayCard } from "@/components/share/mini-day-card";
+import { MiniMapCard } from "@/components/share/mini-map-card";
+import { ShareDetailCard, ShareRow } from "@/components/share/share-detail-card";

-function formatEventTime(startAt: string, endAt: string, allDay: boolean): string {
+function formatTime(d: Date): string {
+  return d.toLocaleTimeString(undefined, { hour: "numeric", minute: "2-digit" });
+}
+
+function formatTimeRange(startAt: string, endAt: string, allDay: boolean): string {
  const start = new Date(startAt);
  const end = new Date(endAt);
-  if (allDay) {
-    return start.toLocaleDateString(undefined, { weekday: "short", month: "long", day: "numeric" });
-  }
-  const dateStr = start.toLocaleDateString(undefined, {
-    weekday: "short",
+  if (allDay) return "All day";
+  return `${formatTime(start)} – ${formatTime(end)}`;
+}
+
+function formatFullDate(d: Date): string {
+  return d.toLocaleDateString(undefined, {
+    weekday: "long",
    month: "long",
    day: "numeric",
+    year: "numeric",
  });
-  const startTime = start.toLocaleTimeString(undefined, { hour: "numeric", minute: "2-digit" });
-  const endTime = end.toLocaleTimeString(undefined, { hour: "numeric", minute: "2-digit" });
-  return `${dateStr} · ${startTime}–${endTime}`;
 }

 export function EventSharedView({ data }: { data: EventShareData }) {
+  const start = new Date(data.startAt);
+  const end = new Date(data.endAt);
+  const time = data.allDay ? "All day" : `${formatTime(start)} – ${formatTime(end)}`;
+
  return (
-    <div className="mx-auto max-w-xl space-y-4 p-4">
-      <header className="space-y-1">
-        <p className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
-          {data.calendarName}
+    <>
+      <ShareEyebrow>
+        <CalendarIcon className="size-3" />
+        Event
+      </ShareEyebrow>
+      <h1
+        className="serif"
+        style={{
+          fontSize: "clamp(28px, 6vw, 38px)",
+          lineHeight: 1.15,
+          letterSpacing: "-0.02em",
+          color: "var(--ink)",
+          margin: "0 0 8px",
+          textWrap: "pretty",
+        }}
+      >
+        {data.title}
+      </h1>
+      {data.calendarName && (
+        <p
+          className="serif"
+          style={{
+            fontSize: 17,
+            color: "var(--ink-soft)",
+            margin: "0 0 28px",
+          }}
+        >
+          On the {data.calendarName} calendar.
        </p>
-        <h1 className="text-2xl font-semibold">{data.title}</h1>
-        <p className="text-sm text-muted-foreground">
-          {formatEventTime(data.startAt, data.endAt, data.allDay)}
-        </p>
-      </header>
-      {data.location && (
-        <div className="flex items-start gap-2 text-sm">
-          <MapPin className="mt-0.5 size-4 shrink-0 text-muted-foreground" />
-          <span>{data.location}</span>
-        </div>
      )}
+
+      <div
+        className="grid gap-3.5 mb-6"
+        style={{ gridTemplateColumns: data.location ? "1fr 1fr" : "1fr" }}
+      >
+        <MiniDayCard date={start} time={time} />
+        {data.location && <MiniMapCard name={data.location} />}
+      </div>
+
+      <ShareDetailCard>
+        <ShareRow label="When">
+          {formatFullDate(start)}
+          {!data.allDay && (
+            <>
+              {" · "}
+              {formatTimeRange(data.startAt, data.endAt, data.allDay)}
+            </>
+          )}
+        </ShareRow>
+        {data.location && (
+          <ShareRow label="Where">
+            <span className="inline-flex items-center gap-1.5">
+              <MapPin className="size-3.5 text-[var(--ink-mute)]" />
+              {data.location}
+            </span>
+          </ShareRow>
+        )}
+        <ShareRow label="Calendar">{data.calendarName}</ShareRow>
+      </ShareDetailCard>
+
      {data.notes && (
-        <div className="flex items-start gap-2 text-sm">
-          <StickyNote className="mt-0.5 size-4 shrink-0 text-muted-foreground" />
-          <p className="whitespace-pre-wrap">{data.notes}</p>
-        </div>
+        <p
+          className="serif"
+          style={{
+            fontSize: 16,
+            lineHeight: 1.65,
+            color: "var(--ink-2)",
+            background: "var(--paper-2)",
+            borderRadius: 8,
+            padding: "18px 22px",
+            margin: "14px 0 24px",
+            textWrap: "pretty",
+            whiteSpace: "pre-wrap",
+          }}
+        >
+          {data.notes}
+        </p>
      )}
-    </div>
+    </>
  );
 }

 export function CalendarSharedView({ data }: { data: CalendarShareData }) {
  return (
-    <div className="mx-auto max-w-xl space-y-4 p-4">
-      <header>
-        <h1 className="text-2xl font-semibold">{data.name}</h1>
-        <p className="text-sm text-muted-foreground">Upcoming events — next 90 days</p>
-      </header>
-      {data.events.length === 0 ? (
-        <p className="text-sm text-muted-foreground">No upcoming events.</p>
-      ) : (
-        <ul className="divide-y rounded-lg border bg-background">
-          {data.events.map((event) => (
-            <li key={event.id} className="flex flex-col gap-0.5 px-4 py-3">
-              <span className="font-medium">{event.title}</span>
-              <span className="text-xs text-muted-foreground">
-                {formatEventTime(event.startAt, event.endAt, event.allDay)}
-              </span>
-              {event.location && (
-                <span className="flex items-center gap-1 text-xs text-muted-foreground">
-                  <MapPin className="size-3" />
-                  {event.location}
-                </span>
-              )}
-            </li>
-          ))}
-        </ul>
-      )}
-    </div>
+    <>
+      <ShareEyebrow>
+        <CalendarIcon className="size-3" />
+        Calendar
+      </ShareEyebrow>
+      <h1
+        className="serif"
+        style={{
+          fontSize: "clamp(28px, 6vw, 38px)",
+          lineHeight: 1.15,
+          letterSpacing: "-0.02em",
+          color: "var(--ink)",
+          margin: "0 0 8px",
+          textWrap: "pretty",
+        }}
+      >
+        {data.name}
+      </h1>
+      <p className="serif" style={{ fontSize: 17, color: "var(--ink-soft)", margin: "0 0 28px" }}>
+        Upcoming events — next 90 days.
+      </p>
+
+      <ShareDetailCard>
+        {data.events.length === 0 ? (
+          <p className="muted text-[13.5px] py-2">No upcoming events.</p>
+        ) : (
+          data.events.map((event) => {
+            const start = new Date(event.startAt);
+            return (
+              <div key={event.id} className="list-row" style={{ padding: "10px 0" }}>
+                <span className="dot" style={{ background: data.color ?? "var(--c-household)" }} />
+                <div className="flex-1 min-w-0">
+                  <div className="text-[14px] font-medium text-[var(--ink-2)]">{event.title}</div>
+                  <div className="muted tnum text-[12px] mt-0.5">
+                    {start.toLocaleDateString(undefined, {
+                      month: "short",
+                      day: "numeric",
+                    })}
+                    {!event.allDay && ` · ${formatTime(start)}`}
+                    {event.location && ` · ${event.location}`}
+                  </div>
+                </div>
+              </div>
+            );
+          })
+        )}
+      </ShareDetailCard>
+    </>
  );
 }
@@ -18,6 +18,22 @@ const upcomingConfigSchema = z.object({

 const monthConfigSchema = z.object({ calendarIds: calendarIdsSchema });

+function dayLabel(d: Date): string {
+  const today = new Date();
+  today.setHours(0, 0, 0, 0);
+  const tomorrow = new Date(today);
+  tomorrow.setDate(tomorrow.getDate() + 1);
+  const target = new Date(d);
+  target.setHours(0, 0, 0, 0);
+  if (target.getTime() === today.getTime()) return "Today";
+  if (target.getTime() === tomorrow.getTime()) return "Tomorrow";
+  return d.toLocaleDateString(undefined, { weekday: "long" });
+}
+
+function formatTime(d: Date): string {
+  return d.toLocaleTimeString(undefined, { hour: "numeric", minute: "2-digit" });
+}
+
 async function UpcomingEventsWidget({ config }: { config: unknown; ctx: WidgetContext }) {
  const parsed = upcomingConfigSchema.parse(config);
  const now = new Date();
@@ -32,26 +48,52 @@ async function UpcomingEventsWidget({ config }: { config: unknown; ctx: WidgetCo
    );
  }

+  // Group by day
+  const groups = new Map<string, { day: Date; events: typeof events }>();
+  for (const e of events) {
+    const start = new Date(e.startAt);
+    const key = start.toDateString();
+    if (!groups.has(key)) groups.set(key, { day: start, events: [] });
+    groups.get(key)!.events.push(e);
+  }
+
  return (
-    <ul className="space-y-2">
-      {events.slice(0, 8).map((event) => {
-        const start = new Date(event.startAt);
-        const label = event.allDay
-          ? start.toLocaleDateString(undefined, { month: "short", day: "numeric" })
-          : start.toLocaleString(undefined, {
-              month: "short",
-              day: "numeric",
-              hour: "numeric",
-              minute: "2-digit",
-            });
-        return (
-          <li key={event.id} className="flex items-start gap-2 text-sm">
-            <span className="mt-0.5 shrink-0 text-xs text-muted-foreground">{label}</span>
-            <span className="font-medium leading-snug">{event.title}</span>
-          </li>
-        );
-      })}
-    </ul>
+    <div className="flex flex-col gap-3">
+      {[...groups.values()].slice(0, 4).map((group, gi) => (
+        <div key={gi}>
+          <div className="eyebrow mb-1.5 flex items-baseline gap-2">
+            <span>{dayLabel(group.day)}</span>
+            <span className="text-[var(--ink-faint)] font-medium tracking-normal">
+              {group.day.toLocaleDateString(undefined, { month: "short", day: "numeric" })}
+            </span>
+          </div>
+          <div className="flex flex-col gap-1">
+            {group.events.map((event) => {
+              const start = new Date(event.startAt);
+              return (
+                <div
+                  key={event.id}
+                  className="flex items-start gap-2.5 px-2 py-1.5 rounded-md hover:bg-[var(--shade)]"
+                >
+                  <span className="dot mt-2" style={{ background: "var(--c-household)" }} />
+                  <div className="min-w-[56px] tnum text-[var(--ink-mute)] text-[12px] mt-px">
+                    {event.allDay ? "all day" : formatTime(start)}
+                  </div>
+                  <div className="flex-1 min-w-0">
+                    <div className="text-[13.5px] font-medium text-[var(--ink)] truncate">
+                      {event.title}
+                    </div>
+                    {event.location && (
+                      <div className="text-[11.5px] text-[var(--ink-mute)]">{event.location}</div>
+                    )}
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      ))}
+    </div>
  );
 }

@@ -69,28 +111,29 @@ async function MonthWidget({ config }: { config: unknown; ctx: WidgetContext })
  const monthName = now.toLocaleDateString(undefined, { month: "long", year: "numeric" });

  return (
-    <div className="space-y-2">
-      <p className="text-xs font-medium text-muted-foreground">{monthName}</p>
+    <div className="flex flex-col gap-2">
+      <div className="eyebrow">{monthName}</div>
      {events.length === 0 ? (
-        <p className="text-sm text-muted-foreground">No events this month</p>
+        <p className="text-sm text-[var(--ink-mute)]">No events this month</p>
      ) : (
-        <ul className="space-y-1">
+        <div className="flex flex-col">
          {events.slice(0, 10).map((event) => {
            const eventStart = new Date(event.startAt);
            const day = eventStart.getDate();
            return (
-              <li key={event.id} className="flex items-center gap-2 text-sm">
-                <span className="w-5 shrink-0 text-center text-xs font-semibold text-muted-foreground">
+              <div key={event.id} className="flex items-center gap-3 py-1.5 text-sm">
+                <span className="w-6 shrink-0 text-center font-medium text-[var(--ink-mute)] tnum">
                  {day}
                </span>
-                <span className="truncate">{event.title}</span>
-              </li>
+                <span className="dot" style={{ background: "var(--c-household)" }} />
+                <span className="truncate text-[var(--ink-2)]">{event.title}</span>
+              </div>
            );
          })}
          {events.length > 10 && (
-            <li className="text-xs text-muted-foreground">+{events.length - 10} more</li>
+            <div className="text-xs text-[var(--ink-mute)] mt-1">+{events.length - 10} more</div>
          )}
-        </ul>
+        </div>
      )}
    </div>
  );