Apply paper-and-ink design system across all surfaces
Release / build-and-push (push) Has been cancelled
Release / build-and-push (push) Has been cancelled
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>
This commit is contained in:
ginnoir
co-authored by
Claude Opus 4.7
Claude Opus 4.7
parent
e130cda6c5
commit
9612a54e52
@@ -2,7 +2,9 @@
|
||||
|
||||
import { useEffect, useRef } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { Sparkles, X } from "lucide-react";
|
||||
import { useQuickAdd } from "./quick-add-provider";
|
||||
import { NavIcon } from "./nav-icon";
|
||||
import type { SerializedQuickAddItem } from "@/modules/_core";
|
||||
|
||||
function groupByModule(
|
||||
@@ -18,6 +20,15 @@ function groupByModule(
|
||||
return map;
|
||||
}
|
||||
|
||||
const QUICK_ADD_ICON: Record<string, string> = {
|
||||
"calendar-plus": "calendar",
|
||||
"calendar-days": "calendar",
|
||||
"shopping-cart": "cart",
|
||||
"list-checks": "check-square",
|
||||
"list-plus": "list",
|
||||
"file-plus": "note",
|
||||
};
|
||||
|
||||
export function QuickAddSheet() {
|
||||
const { sheetOpen, closeSheet, actions } = useQuickAdd();
|
||||
const router = useRouter();
|
||||
@@ -43,64 +54,107 @@ export function QuickAddSheet() {
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Backdrop */}
|
||||
<div
|
||||
ref={backdropRef}
|
||||
className="fixed inset-0 z-40 bg-black/40"
|
||||
className="fixed inset-0 z-40"
|
||||
style={{ background: "rgba(31,27,22,.32)", backdropFilter: "blur(2px)" }}
|
||||
onClick={closeSheet}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
|
||||
{/* Sheet panel — bottom on mobile, right-anchored popover on sm+ */}
|
||||
<div
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-label="Quick add"
|
||||
className="fixed bottom-0 left-0 right-0 z-50 rounded-t-2xl bg-background shadow-xl sm:bottom-auto sm:left-auto sm:right-6 sm:top-16 sm:w-72 sm:rounded-xl"
|
||||
className="fixed bottom-0 left-0 right-0 z-50 sm:bottom-auto sm:left-1/2 sm:top-24 sm:-translate-x-1/2 sm:w-[480px] sm:max-w-[calc(100vw-32px)]"
|
||||
style={{
|
||||
background: "var(--paper)",
|
||||
borderRadius: "18px 18px 0 0",
|
||||
boxShadow: "0 -8px 32px rgba(31,27,22,.16)",
|
||||
overflow: "hidden",
|
||||
}}
|
||||
>
|
||||
<div className="flex items-center justify-between border-b px-4 py-3">
|
||||
<span className="text-sm font-semibold">Quick add</span>
|
||||
<div
|
||||
style={{
|
||||
padding: "16px 18px 12px",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
borderBottom: "0.5px solid var(--hair)",
|
||||
}}
|
||||
>
|
||||
<h2
|
||||
className="serif"
|
||||
style={{ fontSize: 18, fontWeight: 500, margin: 0, color: "var(--ink)" }}
|
||||
>
|
||||
Quick add
|
||||
</h2>
|
||||
<button
|
||||
onClick={closeSheet}
|
||||
aria-label="Close quick add"
|
||||
className="rounded p-1 text-muted-foreground hover:bg-muted"
|
||||
className="btn btn-icon btn-ghost btn-sm"
|
||||
>
|
||||
✕
|
||||
<X className="size-3.5" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="max-h-[60vh] overflow-y-auto p-2 sm:max-h-96">
|
||||
{[...groups.entries()].map(([moduleId, group]) => (
|
||||
<div key={moduleId} className="mb-2">
|
||||
<p className="px-2 py-1 text-xs font-medium uppercase tracking-wide text-muted-foreground">
|
||||
{group.name}
|
||||
</p>
|
||||
{group.items.map((action) => (
|
||||
<button
|
||||
key={action.id}
|
||||
onClick={() => handleAction(action.url)}
|
||||
className="flex w-full items-center gap-3 rounded-lg px-3 py-2 text-sm hover:bg-accent hover:text-accent-foreground"
|
||||
>
|
||||
<span className="text-base leading-none">{iconEmoji(action.icon)}</span>
|
||||
{action.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
<div style={{ padding: "14px 18px" }}>
|
||||
<div
|
||||
className="muted"
|
||||
style={{
|
||||
fontSize: 12,
|
||||
marginBottom: 14,
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: 6,
|
||||
}}
|
||||
>
|
||||
<Sparkles className="size-3" />
|
||||
<span>Pick what to add — or use ⌘K to search.</span>
|
||||
</div>
|
||||
|
||||
<div className="max-h-[60vh] overflow-y-auto">
|
||||
{[...groups.entries()].map(([moduleId, group], i) => (
|
||||
<div key={moduleId} className="mb-2.5">
|
||||
<div className="eyebrow mb-2" style={{ marginTop: i === 0 ? 0 : 8 }}>
|
||||
{group.name}
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-1.5">
|
||||
{group.items.map((action) => (
|
||||
<button
|
||||
key={action.id}
|
||||
onClick={() => handleAction(action.url)}
|
||||
className="btn btn-sm justify-start"
|
||||
>
|
||||
<NavIcon
|
||||
name={QUICK_ADD_ICON[action.icon ?? ""] ?? "plus"}
|
||||
className="size-3.5"
|
||||
/>
|
||||
<span className="truncate">{action.label}</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className="dialog-foot"
|
||||
style={{
|
||||
padding: "12px 18px",
|
||||
display: "flex",
|
||||
gap: 8,
|
||||
justifyContent: "flex-end",
|
||||
borderTop: "0.5px solid var(--hair)",
|
||||
background: "var(--paper-2)",
|
||||
}}
|
||||
>
|
||||
<button className="btn btn-sm btn-ghost" onClick={closeSheet}>
|
||||
Close
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function iconEmoji(icon?: string): string {
|
||||
const map: Record<string, string> = {
|
||||
"calendar-plus": "📅",
|
||||
"calendar-days": "🗓️",
|
||||
"shopping-cart": "🛒",
|
||||
"list-checks": "✅",
|
||||
"list-plus": "📋",
|
||||
"file-plus": "📝",
|
||||
};
|
||||
return icon ? (map[icon] ?? "➕") : "➕";
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user