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
@@ -22,25 +22,27 @@ async function ActivityWidget({ config }: { config: unknown }) {
|
||||
.limit(parsed.limit ?? 20);
|
||||
|
||||
if (entries.length === 0) {
|
||||
return <p className="text-sm text-muted-foreground">No recent activity</p>;
|
||||
return <p className="text-sm text-[var(--ink-mute)]">No recent activity</p>;
|
||||
}
|
||||
|
||||
return (
|
||||
<ul className="space-y-2">
|
||||
<div className="flex flex-col">
|
||||
{entries.map((entry) => {
|
||||
const reg = getEntityType(entry.entityType);
|
||||
const description =
|
||||
reg?.renderActivity?.(entry as ActivityLogEntry) ?? `${entry.action} ${entry.entityType}`;
|
||||
return (
|
||||
<li key={entry.id} className="flex items-start gap-2 text-sm">
|
||||
<span className="mt-0.5 shrink-0 text-xs text-muted-foreground">
|
||||
<div key={entry.id} className="activity-row">
|
||||
<div className="flex-1 leading-[1.4]">
|
||||
<span className="obj">{description}</span>
|
||||
</div>
|
||||
<time>
|
||||
{entry.createdAt.toLocaleDateString(undefined, { month: "short", day: "numeric" })}
|
||||
</span>
|
||||
<span className="leading-snug">{description}</span>
|
||||
</li>
|
||||
</time>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@@ -23,8 +23,13 @@ export const users = pgTable("users", {
|
||||
email: varchar("email", { length: 255 }).notNull().unique(),
|
||||
emailVerified: timestamp("email_verified", { withTimezone: true }),
|
||||
image: text("image"),
|
||||
theme: text("theme").notNull().default("default"),
|
||||
themePalette: text("theme_palette").notNull().default("clay"),
|
||||
themeMode: text("theme_mode").notNull().default("system"),
|
||||
themeFontPair: text("theme_font_pair").notNull().default("serif-sans"),
|
||||
themeDensity: text("theme_density").notNull().default("regular"),
|
||||
themeDashLayout: text("theme_dash_layout").notNull().default("classic"),
|
||||
themeCalView: text("theme_cal_view").notNull().default("month"),
|
||||
themeNavStyle: text("theme_nav_style").notNull().default("rail-desktop"),
|
||||
completionVisibilityHours: integer("completion_visibility_hours").notNull().default(24),
|
||||
notifPush: boolean("notif_push").notNull().default(true),
|
||||
notifInApp: boolean("notif_inapp").notNull().default(true),
|
||||
|
||||
@@ -64,6 +64,8 @@ export async function resolveShareToken(rawToken: string): Promise<{
|
||||
entityId: string;
|
||||
capabilities: ShareLinkCapabilities;
|
||||
householdId: string;
|
||||
expiresAt: Date | null;
|
||||
createdBy: string;
|
||||
} | null> {
|
||||
const tokenHash = hashToken(rawToken);
|
||||
|
||||
@@ -82,6 +84,8 @@ export async function resolveShareToken(rawToken: string): Promise<{
|
||||
entityId: link.entityId,
|
||||
capabilities: link.capabilities,
|
||||
householdId: link.householdId,
|
||||
expiresAt: link.expiresAt,
|
||||
createdBy: link.createdBy,
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
@@ -1,9 +1,50 @@
|
||||
export type ThemeMode = "light" | "dark" | "system";
|
||||
export type ThemeId = "default" | "warm" | (string & {});
|
||||
|
||||
export const THEMES: ReadonlyArray<{ id: ThemeId; label: string }> = [
|
||||
{ id: "default", label: "Default" },
|
||||
{ id: "warm", label: "Warm" },
|
||||
export type Palette = "clay" | "indigo" | "sage" | "plum" | "ink";
|
||||
export type FontPair = "serif-sans" | "newsreader" | "fraunces" | "sans-only";
|
||||
export type Density = "compact" | "regular" | "comfy";
|
||||
export type DashLayout = "classic" | "split" | "glance";
|
||||
export type CalView = "month" | "week" | "day";
|
||||
export type NavStyle = "rail-desktop" | "compact-rail" | "top-nav" | "fab-only";
|
||||
|
||||
export const PALETTES: ReadonlyArray<{ id: Palette; label: string; hex: string }> = [
|
||||
{ id: "clay", label: "Clay", hex: "#B85C3C" },
|
||||
{ id: "indigo", label: "Indigo ink", hex: "#3E5B8A" },
|
||||
{ id: "sage", label: "Sage", hex: "#6F8B5E" },
|
||||
{ id: "plum", label: "Plum", hex: "#7B4F6E" },
|
||||
{ id: "ink", label: "Ink (mono)", hex: "#1F1B16" },
|
||||
];
|
||||
|
||||
export const FONT_PAIRS: ReadonlyArray<{ id: FontPair; label: string }> = [
|
||||
{ id: "serif-sans", label: "Source Serif + Inter" },
|
||||
{ id: "newsreader", label: "Newsreader + Inter" },
|
||||
{ id: "fraunces", label: "Fraunces + Inter" },
|
||||
{ id: "sans-only", label: "Inter only" },
|
||||
];
|
||||
|
||||
export const DENSITIES: ReadonlyArray<{ id: Density; label: string }> = [
|
||||
{ id: "compact", label: "Compact" },
|
||||
{ id: "regular", label: "Regular" },
|
||||
{ id: "comfy", label: "Comfy" },
|
||||
];
|
||||
|
||||
export const DASH_LAYOUTS: ReadonlyArray<{ id: DashLayout; label: string }> = [
|
||||
{ id: "classic", label: "Classic" },
|
||||
{ id: "split", label: "Split" },
|
||||
{ id: "glance", label: "Glance" },
|
||||
];
|
||||
|
||||
export const CAL_VIEWS: ReadonlyArray<{ id: CalView; label: string }> = [
|
||||
{ id: "month", label: "Month" },
|
||||
{ id: "week", label: "Week" },
|
||||
{ id: "day", label: "Day" },
|
||||
];
|
||||
|
||||
export const NAV_STYLES: ReadonlyArray<{ id: NavStyle; label: string }> = [
|
||||
{ id: "rail-desktop", label: "Sidebar" },
|
||||
{ id: "compact-rail", label: "Compact rail" },
|
||||
{ id: "top-nav", label: "Top nav" },
|
||||
{ id: "fab-only", label: "FAB only" },
|
||||
];
|
||||
|
||||
export const THEME_MODES: ReadonlyArray<{ id: ThemeMode; label: string }> = [
|
||||
@@ -12,5 +53,45 @@ export const THEME_MODES: ReadonlyArray<{ id: ThemeMode; label: string }> = [
|
||||
{ id: "system", label: "System" },
|
||||
];
|
||||
|
||||
export const VALID_THEME_IDS = new Set(THEMES.map((t) => t.id));
|
||||
export const VALID_THEME_MODES = new Set<string>(["light", "dark", "system"]);
|
||||
export const VALID_PALETTES = new Set<string>(PALETTES.map((p) => p.id));
|
||||
export const VALID_FONT_PAIRS = new Set<string>(FONT_PAIRS.map((p) => p.id));
|
||||
export const VALID_DENSITIES = new Set<string>(DENSITIES.map((p) => p.id));
|
||||
export const VALID_DASH_LAYOUTS = new Set<string>(DASH_LAYOUTS.map((p) => p.id));
|
||||
export const VALID_CAL_VIEWS = new Set<string>(CAL_VIEWS.map((p) => p.id));
|
||||
export const VALID_NAV_STYLES = new Set<string>(NAV_STYLES.map((p) => p.id));
|
||||
export const VALID_THEME_MODES = new Set<string>(THEME_MODES.map((p) => p.id));
|
||||
|
||||
export type ThemeState = {
|
||||
palette: Palette;
|
||||
mode: ThemeMode;
|
||||
fontPair: FontPair;
|
||||
density: Density;
|
||||
dashLayout: DashLayout;
|
||||
calView: CalView;
|
||||
navStyle: NavStyle;
|
||||
};
|
||||
|
||||
export const DEFAULT_THEME: ThemeState = {
|
||||
palette: "clay",
|
||||
mode: "system",
|
||||
fontPair: "serif-sans",
|
||||
density: "regular",
|
||||
dashLayout: "classic",
|
||||
calView: "month",
|
||||
navStyle: "rail-desktop",
|
||||
};
|
||||
|
||||
// Map our nav style preference to the data-nav attribute we set on <html>.
|
||||
// On mobile (handled by NavModeProvider) we override to "bottom" or "fab".
|
||||
export function navStyleToDataNav(style: NavStyle): "sidebar" | "rail" | "top" | "fab" {
|
||||
switch (style) {
|
||||
case "compact-rail":
|
||||
return "rail";
|
||||
case "top-nav":
|
||||
return "top";
|
||||
case "fab-only":
|
||||
return "fab";
|
||||
default:
|
||||
return "sidebar";
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user