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
@@ -7,8 +7,9 @@ import { useEffect, useState, useTransition } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { GridLayout } from "react-grid-layout";
|
||||
import type { Layout } from "react-grid-layout";
|
||||
import { GripVertical, Settings2, Trash2, RotateCcw, Plus } from "lucide-react";
|
||||
import type { DashboardLayout, WidgetPlacement } from "@/lib/dashboard";
|
||||
import { GripVertical, Settings2, Trash2, RotateCcw, Plus, LayoutGrid } from "lucide-react";
|
||||
import type { DashboardLayout, WidgetPlacement, PresetId } from "@/lib/dashboard";
|
||||
import { computePresetLayoutFromMetas } from "@/lib/dashboard";
|
||||
import type { SerializedWidgetMeta } from "@/modules/_core/registry";
|
||||
import { saveDashboardLayout, resetDashboardLayout } from "@/app/d/actions";
|
||||
import { Button } from "@/components/ui/button";
|
||||
@@ -34,6 +35,7 @@ export function DashboardEditor({
|
||||
const [pickerOpen, setPickerOpen] = useState(false);
|
||||
const [configuringIndex, setConfiguringIndex] = useState<number | null>(null);
|
||||
const [containerWidth, setContainerWidth] = useState(1200);
|
||||
const [presetMenuOpen, setPresetMenuOpen] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
function measure() {
|
||||
@@ -107,6 +109,13 @@ export function DashboardEditor({
|
||||
setConfiguringIndex(null);
|
||||
}
|
||||
|
||||
function applyPreset(preset: PresetId) {
|
||||
const next = computePresetLayoutFromMetas(preset, widgetMetas);
|
||||
setPlacements(next.widgets);
|
||||
setIsDirty(true);
|
||||
setPresetMenuOpen(false);
|
||||
}
|
||||
|
||||
const gridItems: Layout = placements.map((p, i) => ({
|
||||
i: placementKey(p, i),
|
||||
x: p.x,
|
||||
@@ -119,10 +128,50 @@ export function DashboardEditor({
|
||||
}));
|
||||
|
||||
return (
|
||||
<div className="p-4 sm:p-6">
|
||||
<div>
|
||||
<div className="mb-6 flex items-center justify-between gap-4 flex-wrap">
|
||||
<h1 className="text-2xl font-bold">{dashboard.name}</h1>
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
<h1 className="serif text-[26px] tracking-tight">{dashboard.name}</h1>
|
||||
<div className="flex items-center gap-2 flex-wrap relative">
|
||||
<div className="relative">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => setPresetMenuOpen((o) => !o)}
|
||||
disabled={isPending}
|
||||
>
|
||||
<LayoutGrid className="size-4 mr-1" />
|
||||
Preset
|
||||
</Button>
|
||||
{presetMenuOpen && (
|
||||
<div
|
||||
className="absolute right-0 top-9 z-50 min-w-[180px] rounded-md border-[0.5px] bg-card shadow-[var(--shadow-pop)]"
|
||||
style={{ borderColor: "var(--hair-2)" }}
|
||||
onMouseLeave={() => setPresetMenuOpen(false)}
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => applyPreset("classic")}
|
||||
className="block w-full text-left px-3 py-2 text-sm hover:bg-[var(--shade)]"
|
||||
>
|
||||
Classic — main + side rail
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => applyPreset("split")}
|
||||
className="block w-full text-left px-3 py-2 text-sm hover:bg-[var(--shade)]"
|
||||
>
|
||||
Split — two even columns
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => applyPreset("glance")}
|
||||
className="block w-full text-left px-3 py-2 text-sm hover:bg-[var(--shade)]"
|
||||
>
|
||||
Glance — single column
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<Button variant="outline" size="sm" onClick={handleReset} disabled={isPending}>
|
||||
<RotateCcw className="size-4 mr-1" />
|
||||
Reset
|
||||
|
||||
Reference in New Issue
Block a user