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>
139 lines
3.1 KiB
TypeScript
139 lines
3.1 KiB
TypeScript
import { z } from "zod";
|
|
import type { SerializedWidgetMeta } from "@/modules/_core/registry";
|
|
|
|
export type WidgetPlacement = {
|
|
widgetId: string;
|
|
config: unknown;
|
|
x: number;
|
|
y: number;
|
|
w: number;
|
|
h: number;
|
|
};
|
|
|
|
export type DashboardLayout = {
|
|
version: 1;
|
|
widgets: WidgetPlacement[];
|
|
};
|
|
|
|
const placementSchema = z.object({
|
|
widgetId: z.string(),
|
|
config: z.unknown(),
|
|
x: z.number().int().min(0),
|
|
y: z.number().int().min(0),
|
|
w: z.number().int().min(1).max(12),
|
|
h: z.number().int().min(1),
|
|
});
|
|
|
|
const layoutSchema = z.object({
|
|
version: z.literal(1),
|
|
widgets: z.array(placementSchema),
|
|
});
|
|
|
|
export function parseDashboardLayout(raw: unknown): DashboardLayout | null {
|
|
const result = layoutSchema.safeParse(raw);
|
|
if (!result.success) return null;
|
|
return result.data;
|
|
}
|
|
|
|
export type PresetId = "classic" | "split" | "glance";
|
|
|
|
/** Client-safe layout builder: pass the metas explicitly. The server-only
|
|
* variants (`computePresetLayout`, `computeDefaultLayout`) live in
|
|
* `dashboard.server.ts` because they reach into the module registry. */
|
|
export function computePresetLayoutFromMetas(
|
|
preset: PresetId,
|
|
metas: SerializedWidgetMeta[],
|
|
): DashboardLayout {
|
|
switch (preset) {
|
|
case "classic":
|
|
return classicLayout(metas);
|
|
case "split":
|
|
return splitLayout(metas);
|
|
case "glance":
|
|
return glanceLayout(metas);
|
|
}
|
|
}
|
|
|
|
function classicLayout(metas: SerializedWidgetMeta[]): DashboardLayout {
|
|
const placements: WidgetPlacement[] = [];
|
|
let mainY = 0;
|
|
let railY = 0;
|
|
|
|
metas.forEach((m, i) => {
|
|
const inRail = i % 3 === 0 && i > 0;
|
|
if (inRail) {
|
|
placements.push({
|
|
widgetId: m.id,
|
|
config: m.defaultConfig,
|
|
x: 8,
|
|
y: railY,
|
|
w: 4,
|
|
h: m.defaultSize.h,
|
|
});
|
|
railY += m.defaultSize.h;
|
|
} else {
|
|
placements.push({
|
|
widgetId: m.id,
|
|
config: m.defaultConfig,
|
|
x: 0,
|
|
y: mainY,
|
|
w: 8,
|
|
h: m.defaultSize.h,
|
|
});
|
|
mainY += m.defaultSize.h;
|
|
}
|
|
});
|
|
|
|
return { version: 1, widgets: placements };
|
|
}
|
|
|
|
function splitLayout(metas: SerializedWidgetMeta[]): DashboardLayout {
|
|
const placements: WidgetPlacement[] = [];
|
|
let leftY = 0;
|
|
let rightY = 0;
|
|
|
|
metas.forEach((m, i) => {
|
|
const left = i % 2 === 0;
|
|
if (left) {
|
|
placements.push({
|
|
widgetId: m.id,
|
|
config: m.defaultConfig,
|
|
x: 0,
|
|
y: leftY,
|
|
w: 6,
|
|
h: m.defaultSize.h,
|
|
});
|
|
leftY += m.defaultSize.h;
|
|
} else {
|
|
placements.push({
|
|
widgetId: m.id,
|
|
config: m.defaultConfig,
|
|
x: 6,
|
|
y: rightY,
|
|
w: 6,
|
|
h: m.defaultSize.h,
|
|
});
|
|
rightY += m.defaultSize.h;
|
|
}
|
|
});
|
|
|
|
return { version: 1, widgets: placements };
|
|
}
|
|
|
|
function glanceLayout(metas: SerializedWidgetMeta[]): DashboardLayout {
|
|
const placements: WidgetPlacement[] = [];
|
|
let y = 0;
|
|
metas.forEach((m) => {
|
|
placements.push({
|
|
widgetId: m.id,
|
|
config: m.defaultConfig,
|
|
x: 0,
|
|
y,
|
|
w: 12,
|
|
h: m.defaultSize.h,
|
|
});
|
|
y += m.defaultSize.h;
|
|
});
|
|
return { version: 1, widgets: placements };
|
|
}
|