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,7 +1,7 @@
 "use client";

 import { useRouter } from "next/navigation";
-import { Archive, GripVertical, Plus, Trash2 } from "lucide-react";
+import { Archive, Plus, Trash2 } from "lucide-react";
 import { useEffect, useRef, useState, useTransition } from "react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
@@ -23,7 +23,6 @@ export function ListDetail({ initialList }: { initialList: ListDetailDto }) {
  const [draft, setDraft] = useState("");
  const [isPending, startTransition] = useTransition();
  const inputRef = useRef<HTMLInputElement>(null);
-  const swipeStart = useRef<Record<string, number>>({});

  useEffect(() => {
    const events = new EventSource(`/api/lists/${initialList.id}/events`);
@@ -95,97 +94,157 @@ export function ListDetail({ initialList }: { initialList: ListDetailDto }) {
    });
  }

+  const openItems = list.items.filter((i) => !i.done);
+  const doneItems = list.items.filter((i) => i.done);
+
  return (
-    <div className="mx-auto grid w-full max-w-3xl gap-5 p-4">
+    <div className="mx-auto grid w-full max-w-3xl gap-4">
      <header className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
-        <div className="min-w-0">
+        <div className="min-w-0 flex items-center gap-3 flex-1">
          <Input
            aria-label="List name"
-            className="h-auto border-transparent px-0 text-2xl font-semibold shadow-none focus-visible:border-transparent focus-visible:ring-0"
+            className="serif h-auto border-transparent !bg-transparent px-0 text-[22px] font-medium tracking-tight shadow-none focus-visible:border-transparent focus-visible:ring-0"
            value={list.name}
            onChange={(event) => setList({ ...list, name: event.target.value })}
            onBlur={commitListName}
          />
-          <div className="text-sm text-muted-foreground">
-            {list.type} / {list.openCount} open / {list.doneCount} done
-          </div>
+          <span className="badge">
+            {list.type} · {list.openCount} open
+          </span>
+        </div>
+        <div className="flex items-center gap-2">
+          <ShareButton entityType="lists.list" entityId={list.id} canWrite={true} />
+          <Button variant="outline" size="sm" onClick={archiveCurrentList} disabled={isPending}>
+            <Archive className="size-3.5" />
+            Archive
+          </Button>
        </div>
-        <ShareButton entityType="lists.list" entityId={list.id} canWrite={true} />
-        <Button variant="outline" onClick={archiveCurrentList} disabled={isPending}>
-          <Archive />
-          Archive list
-        </Button>
      </header>

-      <form
-        className="flex gap-2"
-        onSubmit={(event) => {
-          event.preventDefault();
-          submitItem();
-        }}
+      <div
+        className="rounded-[var(--r-lg)] border-[0.5px] bg-[var(--card)] shadow-[var(--shadow-1)] overflow-hidden"
+        style={{ borderColor: "var(--hair)" }}
      >
-        <Input
-          ref={inputRef}
-          aria-label="Add item"
-          autoFocus
-          placeholder={list.type === "shopping" ? "Add milk, eggs, coffee..." : "Add a task..."}
-          value={draft}
-          onChange={(event) => setDraft(event.target.value)}
-        />
-        <Button type="submit" disabled={!draft.trim() || isPending}>
-          <Plus />
-          Add
-        </Button>
-      </form>
+        <form
+          className="flex items-center gap-2 px-[14px] py-3 border-b-[0.5px]"
+          style={{ borderColor: "var(--hair)" }}
+          onSubmit={(event) => {
+            event.preventDefault();
+            submitItem();
+          }}
+        >
+          <Plus className="size-4 text-[var(--ink-mute)]" />
+          <Input
+            ref={inputRef}
+            aria-label="Add item"
+            autoFocus
+            placeholder={list.type === "shopping" ? "Add to list…" : "Add a task…"}
+            className="!border-0 !bg-transparent !shadow-none focus-visible:!ring-0 px-0 h-7"
+            value={draft}
+            onChange={(event) => setDraft(event.target.value)}
+          />
+          <span className="kbd">↵</span>
+        </form>

-      <div className="overflow-hidden rounded-lg border bg-background">
-        {list.items.length === 0 ? (
-          <div className="p-8 text-center text-sm text-muted-foreground">Nothing here yet.</div>
-        ) : (
-          <ul className="divide-y">
-            {list.items.map((item) => (
-              <li
+        {openItems.length === 0 && doneItems.length === 0 && (
+          <div className="muted px-[14px] py-8 text-center text-[13px]">Nothing here yet.</div>
+        )}
+
+        {openItems.map((item) => (
+          <ListItemRow
+            key={item.id}
+            item={item}
+            onToggle={(done) => setItemDone(item, done)}
+            onEdit={(text) => editItemText(item, text)}
+            onCommit={() => commitItemText(item)}
+            onRemove={() => removeItem(item)}
+          />
+        ))}
+
+        {doneItems.length > 0 && (
+          <>
+            <div className="eyebrow px-[14px] pt-3 pb-[6px]">Done · {doneItems.length}</div>
+            {doneItems.map((item) => (
+              <ListItemRow
                key={item.id}
-                className="grid grid-cols-[auto_1fr_auto] items-center gap-3 p-3"
-                onPointerDown={(event) => {
-                  swipeStart.current[item.id] = event.clientX;
-                }}
-                onPointerUp={(event) => {
-                  const start = swipeStart.current[item.id];
-                  if (start !== undefined && event.clientX - start < -60) removeItem(item);
-                  delete swipeStart.current[item.id];
-                }}
-              >
-                <input
-                  aria-label={`Complete ${item.text}`}
-                  type="checkbox"
-                  className="size-5 accent-primary"
-                  checked={item.done}
-                  onChange={(event) => setItemDone(item, event.target.checked)}
-                />
-                <Input
-                  aria-label={`${item.text} text`}
-                  className={item.done ? "text-muted-foreground line-through" : ""}
-                  value={item.text}
-                  onChange={(event) => editItemText(item, event.target.value)}
-                  onBlur={() => commitItemText(item)}
-                />
-                <div className="flex items-center gap-1">
-                  <GripVertical className="size-4 text-muted-foreground" />
-                  <Button
-                    size="icon-sm"
-                    variant="ghost"
-                    aria-label={`Delete ${item.text}`}
-                    onClick={() => removeItem(item)}
-                  >
-                    <Trash2 />
-                  </Button>
-                </div>
-              </li>
+                item={item}
+                onToggle={(done) => setItemDone(item, done)}
+                onEdit={(text) => editItemText(item, text)}
+                onCommit={() => commitItemText(item)}
+                onRemove={() => removeItem(item)}
+              />
            ))}
-          </ul>
+          </>
        )}
      </div>
    </div>
  );
 }
+
+function ListItemRow({
+  item,
+  onToggle,
+  onEdit,
+  onCommit,
+  onRemove,
+}: {
+  item: ListItemDto;
+  onToggle: (done: boolean) => void;
+  onEdit: (text: string) => void;
+  onCommit: () => void;
+  onRemove: () => void;
+}) {
+  const swipeStart = useRef<number | null>(null);
+  return (
+    <div
+      className={`list-row ${item.done ? "checked" : ""} group/row`}
+      onPointerDown={(event) => {
+        swipeStart.current = event.clientX;
+      }}
+      onPointerUp={(event) => {
+        const start = swipeStart.current;
+        if (start !== null && event.clientX - start < -60) onRemove();
+        swipeStart.current = null;
+      }}
+    >
+      <button
+        type="button"
+        aria-label={`Complete ${item.text}`}
+        aria-pressed={item.done}
+        className={`checkbox ${item.done ? "on" : ""}`}
+        onClick={() => onToggle(!item.done)}
+      >
+        {item.done && (
+          <svg
+            width="12"
+            height="12"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="white"
+            strokeWidth="2.4"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          >
+            <path d="M5 12l5 5L20 7" />
+          </svg>
+        )}
+      </button>
+      <Input
+        aria-label={`${item.text} text`}
+        className="!border-0 !bg-transparent !shadow-none focus-visible:!ring-0 row-text flex-1 px-0 h-7 text-[13.5px]"
+        value={item.text}
+        onChange={(event) => onEdit(event.target.value)}
+        onBlur={onCommit}
+      />
+      <Button
+        size="icon-sm"
+        variant="ghost"
+        aria-label={`Delete ${item.text}`}
+        onClick={onRemove}
+        className="opacity-0 group-hover/row:opacity-100 transition-opacity"
+      >
+        <Trash2 className="size-3.5" />
+      </Button>
+    </div>
+  );
+}
@@ -24,31 +24,50 @@ export function ListWidget({ initialItems }: { initialItems: WidgetItem[] }) {
  }

  if (items.length === 0) {
-    return <p className="text-sm text-muted-foreground">No open items</p>;
+    return <p className="text-sm text-[var(--ink-mute)]">No open items</p>;
  }

  return (
-    <ul className="space-y-1">
+    <div className="-mx-[14px] -my-[12px]">
      {items.map((item) => (
-        <li key={item.id} className="flex items-center gap-2 text-sm">
-          <input
-            type="checkbox"
+        <div
+          key={item.id}
+          className={`list-row ${item.done ? "checked" : ""}`}
+          style={{ padding: "8px 14px" }}
+        >
+          <button
+            type="button"
            aria-label={`Complete ${item.text}`}
-            className="size-4 shrink-0 accent-primary"
-            checked={item.done}
-            onChange={(e) => toggle(item, e.target.checked)}
-          />
+            aria-pressed={item.done}
+            className={`checkbox ${item.done ? "on" : ""}`}
+            onClick={() => toggle(item, !item.done)}
+          >
+            {item.done && (
+              <svg
+                width="12"
+                height="12"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="white"
+                strokeWidth="2.4"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              >
+                <path d="M5 12l5 5L20 7" />
+              </svg>
+            )}
+          </button>
          <Link
            href={`/lists/${item.listId}`}
-            className={`truncate hover:underline transition-colors ${
-              item.done ? "text-muted-foreground line-through" : ""
-            }`}
+            className="row-text flex-1 text-[13.5px] truncate hover:text-[var(--ink)]"
          >
            {item.text}
          </Link>
-          <span className="ml-auto shrink-0 text-xs text-muted-foreground">{item.listName}</span>
-        </li>
+          <span className="ml-auto shrink-0 text-[11.5px] text-[var(--ink-mute)]">
+            {item.listName}
+          </span>
+        </div>
      ))}
-    </ul>
+    </div>
  );
 }
@@ -62,13 +62,16 @@ export function ListsIndex({ lists }: { lists: ListWithItemsDto[] }) {
  }

  return (
-    <div className="mx-auto grid w-full max-w-5xl gap-6 p-4">
+    <div className="mx-auto grid w-full max-w-5xl gap-6">
      <div className="flex flex-col gap-2 sm:flex-row sm:items-end sm:justify-between">
        <div>
-          <h1 className="text-2xl font-semibold">Lists</h1>
-          <p className="text-sm text-muted-foreground">Shopping, tasks, and whatever comes next.</p>
+          <h2 className="serif text-[22px] tracking-tight">Lists</h2>
+          <p className="muted text-[13px] mt-1">Shopping, tasks, and whatever comes next.</p>
        </div>
-        <div className="grid gap-2 rounded-lg border bg-background p-3 sm:grid-cols-[140px_220px_auto]">
+        <div
+          className="grid gap-2 rounded-[var(--r-md)] border-[0.5px] bg-[var(--card)] p-3 sm:grid-cols-[140px_220px_auto]"
+          style={{ borderColor: "var(--hair)" }}
+        >
          <div className="space-y-1">
            <Label htmlFor="new-list-type">Type</Label>
            <Input
@@ -86,7 +89,7 @@ export function ListsIndex({ lists }: { lists: ListWithItemsDto[] }) {
            />
          </div>
          <Button className="self-end" onClick={addList} disabled={!type || !name}>
-            <Plus />
+            <Plus className="size-3.5" />
            New list
          </Button>
        </div>
@@ -95,9 +98,7 @@ export function ListsIndex({ lists }: { lists: ListWithItemsDto[] }) {
      <div className="grid gap-6">
        {grouped.map(([groupType, groupLists]) => (
          <section key={groupType} className="grid gap-3">
-            <h2 className="text-sm font-medium uppercase tracking-normal text-muted-foreground">
-              {groupType}
-            </h2>
+            <div className="eyebrow">{groupType}</div>
            <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
              {groupLists.map((list) => (
                <ListCard key={list.id} list={list} onToggle={handleToggle} />
@@ -120,25 +121,32 @@ function ListCard({
  const [expanded, setExpanded] = useState(true);

  return (
-    <div className="rounded-lg border bg-card text-card-foreground">
-      <div className="flex items-center gap-2 p-4">
-        <button
-          type="button"
-          onClick={() => setExpanded((v) => !v)}
-          className="text-muted-foreground hover:text-foreground transition-colors"
-          aria-label={expanded ? "Collapse" : "Expand"}
-        >
-          {expanded ? <ChevronDown className="size-4" /> : <ChevronRight className="size-4" />}
-        </button>
-        <div className="min-w-0 flex-1">
-          <div className="font-medium truncate">{list.name}</div>
-          <div className="text-xs text-muted-foreground">
-            {list.openCount} open · {list.doneCount} done
+    <div
+      className="rounded-[var(--r-lg)] border-[0.5px] bg-[var(--card)] text-[var(--ink)] shadow-[var(--shadow-1)]"
+      style={{ borderColor: "var(--hair)" }}
+    >
+      <div className="card-h">
+        <div className="flex items-center gap-2 min-w-0">
+          <button
+            type="button"
+            onClick={() => setExpanded((v) => !v)}
+            className="text-[var(--ink-mute)] hover:text-[var(--ink)] transition-colors"
+            aria-label={expanded ? "Collapse" : "Expand"}
+          >
+            {expanded ? <ChevronDown className="size-4" /> : <ChevronRight className="size-4" />}
+          </button>
+          <div className="min-w-0">
+            <h3 className="serif text-[15px] truncate text-[var(--ink)] m-0 font-medium">
+              {list.name}
+            </h3>
+            <div className="meta">
+              {list.openCount} open · {list.doneCount} done
+            </div>
          </div>
        </div>
        <Link
          href={`/lists/${list.id}`}
-          className="shrink-0 text-muted-foreground hover:text-foreground transition-colors"
+          className="shrink-0 text-[var(--ink-mute)] hover:text-[var(--ink)] transition-colors"
          aria-label={`Open ${list.name}`}
        >
          <ExternalLink className="size-4" />
@@ -146,42 +154,55 @@ function ListCard({
      </div>

      {expanded && (
-        <div className="border-t">
+        <div>
          {list.items.length === 0 ? (
-            <p className="px-4 py-3 text-sm text-muted-foreground">
+            <p className="muted px-[14px] py-3 text-[13px]">
              {list.openCount === 0 ? "All done!" : "No items to show."}
            </p>
          ) : (
-            <ul className="divide-y">
+            <div>
              {list.items.map((item) => (
-                <li key={item.id} className="flex items-center gap-3 px-4 py-2">
-                  <input
-                    type="checkbox"
+                <div
+                  key={item.id}
+                  className={`list-row ${item.done ? "checked" : ""}`}
+                  style={{ padding: "8px 14px" }}
+                >
+                  <button
+                    type="button"
                    aria-label={`Complete ${item.text}`}
-                    className="size-4 accent-primary shrink-0"
-                    checked={item.done}
-                    onChange={(e) => onToggle(list.id, item, e.target.checked)}
-                  />
-                  <span
-                    className={`text-sm truncate transition-colors ${
-                      item.done ? "text-muted-foreground line-through" : ""
-                    }`}
+                    aria-pressed={item.done}
+                    className={`checkbox ${item.done ? "on" : ""}`}
+                    onClick={() => onToggle(list.id, item, !item.done)}
                  >
-                    {item.text}
-                  </span>
-                </li>
+                    {item.done && (
+                      <svg
+                        width="12"
+                        height="12"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="white"
+                        strokeWidth="2.4"
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                      >
+                        <path d="M5 12l5 5L20 7" />
+                      </svg>
+                    )}
+                  </button>
+                  <span className="row-text flex-1 text-[13.5px] truncate">{item.text}</span>
+                </div>
              ))}
              {list.openCount > list.items.filter((i) => !i.done).length && (
-                <li className="px-4 py-2">
+                <div className="px-[14px] py-2">
                  <Link
                    href={`/lists/${list.id}`}
-                    className="text-xs text-muted-foreground hover:text-foreground transition-colors"
+                    className="text-[12px] text-[var(--ink-mute)] hover:text-[var(--ink)] transition-colors"
                  >
                    +{list.openCount - list.items.filter((i) => !i.done).length} more — open list
                  </Link>
-                </li>
+                </div>
              )}
-            </ul>
+            </div>
          )}
        </div>
      )}
@@ -1,8 +1,10 @@
 "use client";

+import { ListChecks } from "lucide-react";
 import { useOptimistic, useTransition } from "react";
 import type { ListShareData, ListShareItem } from "../server/share-queries";
 import { toggleShareListItem } from "../server/share-actions";
+import { ShareEyebrow } from "@/components/share/share-eyebrow";

 export function ListSharedView({
  data,
@@ -33,38 +35,59 @@ export function ListSharedView({
  const done = optimisticItems.filter((i) => i.done);

  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 capitalize">{data.type}</p>
-      </header>
+    <>
+      <ShareEyebrow>
+        <ListChecks className="size-3" />
+        List
+      </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="muted text-[13px] capitalize mb-6">{data.type}</p>

      {optimisticItems.length === 0 ? (
-        <p className="text-sm text-muted-foreground">This list is empty.</p>
+        <p className="muted text-[13.5px]">This list is empty.</p>
      ) : (
-        <div className="space-y-4">
+        <div
+          className="rounded-[var(--r-md)] overflow-hidden"
+          style={{
+            background: "var(--card)",
+            border: "0.5px solid var(--hair)",
+          }}
+        >
          {open.length > 0 && (
-            <ul className="divide-y rounded-lg border bg-background">
+            <>
              {open.map((item) => (
                <ItemRow key={item.id} item={item} canWrite={canWrite} onToggle={toggle} />
              ))}
-            </ul>
+            </>
          )}
          {done.length > 0 && (
            <details className="group">
-              <summary className="cursor-pointer select-none text-sm text-muted-foreground">
-                {done.length} completed
+              <summary
+                className="cursor-pointer select-none eyebrow"
+                style={{ padding: "12px 14px 8px", borderTop: "0.5px solid var(--hair)" }}
+              >
+                Done · {done.length}
              </summary>
-              <ul className="mt-2 divide-y rounded-lg border bg-background">
-                {done.map((item) => (
-                  <ItemRow key={item.id} item={item} canWrite={canWrite} onToggle={toggle} />
-                ))}
-              </ul>
+              {done.map((item) => (
+                <ItemRow key={item.id} item={item} canWrite={canWrite} onToggle={toggle} />
+              ))}
            </details>
          )}
        </div>
      )}
-    </div>
+    </>
  );
 }

@@ -78,25 +101,34 @@ function ItemRow({
  onToggle: (item: ListShareItem) => void;
 }) {
  return (
-    <li className="flex items-center gap-3 px-4 py-3">
-      {canWrite ? (
-        <input
-          type="checkbox"
-          aria-label={`Complete ${item.text}`}
-          className="size-5 accent-primary"
-          checked={item.done}
-          onChange={() => onToggle(item)}
-        />
-      ) : (
-        <span
-          aria-hidden
-          className={`size-5 shrink-0 rounded-sm border border-border ${item.done ? "bg-muted" : ""}`}
-        />
-      )}
-      <span className={`text-sm ${item.done ? "text-muted-foreground line-through" : ""}`}>
+    <div className={`list-row ${item.done ? "checked" : ""}`}>
+      <button
+        type="button"
+        aria-label={`Complete ${item.text}`}
+        aria-pressed={item.done}
+        className={`checkbox ${item.done ? "on" : ""}`}
+        disabled={!canWrite}
+        onClick={() => onToggle(item)}
+      >
+        {item.done && (
+          <svg
+            width="12"
+            height="12"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="white"
+            strokeWidth="2.4"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          >
+            <path d="M5 12l5 5L20 7" />
+          </svg>
+        )}
+      </button>
+      <span className="row-text flex-1 text-[13.5px]">
        {item.text}
-        {item.qty && <span className="ml-1 text-xs text-muted-foreground">×{item.qty}</span>}
+        {item.qty && <span className="ml-1 text-[11.5px] muted">×{item.qty}</span>}
      </span>
-    </li>
+    </div>
  );
 }