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
@@ -18,6 +18,22 @@ const upcomingConfigSchema = z.object({
|
||||
|
||||
const monthConfigSchema = z.object({ calendarIds: calendarIdsSchema });
|
||||
|
||||
function dayLabel(d: Date): string {
|
||||
const today = new Date();
|
||||
today.setHours(0, 0, 0, 0);
|
||||
const tomorrow = new Date(today);
|
||||
tomorrow.setDate(tomorrow.getDate() + 1);
|
||||
const target = new Date(d);
|
||||
target.setHours(0, 0, 0, 0);
|
||||
if (target.getTime() === today.getTime()) return "Today";
|
||||
if (target.getTime() === tomorrow.getTime()) return "Tomorrow";
|
||||
return d.toLocaleDateString(undefined, { weekday: "long" });
|
||||
}
|
||||
|
||||
function formatTime(d: Date): string {
|
||||
return d.toLocaleTimeString(undefined, { hour: "numeric", minute: "2-digit" });
|
||||
}
|
||||
|
||||
async function UpcomingEventsWidget({ config }: { config: unknown; ctx: WidgetContext }) {
|
||||
const parsed = upcomingConfigSchema.parse(config);
|
||||
const now = new Date();
|
||||
@@ -32,26 +48,52 @@ async function UpcomingEventsWidget({ config }: { config: unknown; ctx: WidgetCo
|
||||
);
|
||||
}
|
||||
|
||||
// Group by day
|
||||
const groups = new Map<string, { day: Date; events: typeof events }>();
|
||||
for (const e of events) {
|
||||
const start = new Date(e.startAt);
|
||||
const key = start.toDateString();
|
||||
if (!groups.has(key)) groups.set(key, { day: start, events: [] });
|
||||
groups.get(key)!.events.push(e);
|
||||
}
|
||||
|
||||
return (
|
||||
<ul className="space-y-2">
|
||||
{events.slice(0, 8).map((event) => {
|
||||
const start = new Date(event.startAt);
|
||||
const label = event.allDay
|
||||
? start.toLocaleDateString(undefined, { month: "short", day: "numeric" })
|
||||
: start.toLocaleString(undefined, {
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
hour: "numeric",
|
||||
minute: "2-digit",
|
||||
});
|
||||
return (
|
||||
<li key={event.id} className="flex items-start gap-2 text-sm">
|
||||
<span className="mt-0.5 shrink-0 text-xs text-muted-foreground">{label}</span>
|
||||
<span className="font-medium leading-snug">{event.title}</span>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
<div className="flex flex-col gap-3">
|
||||
{[...groups.values()].slice(0, 4).map((group, gi) => (
|
||||
<div key={gi}>
|
||||
<div className="eyebrow mb-1.5 flex items-baseline gap-2">
|
||||
<span>{dayLabel(group.day)}</span>
|
||||
<span className="text-[var(--ink-faint)] font-medium tracking-normal">
|
||||
{group.day.toLocaleDateString(undefined, { month: "short", day: "numeric" })}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex flex-col gap-1">
|
||||
{group.events.map((event) => {
|
||||
const start = new Date(event.startAt);
|
||||
return (
|
||||
<div
|
||||
key={event.id}
|
||||
className="flex items-start gap-2.5 px-2 py-1.5 rounded-md hover:bg-[var(--shade)]"
|
||||
>
|
||||
<span className="dot mt-2" style={{ background: "var(--c-household)" }} />
|
||||
<div className="min-w-[56px] tnum text-[var(--ink-mute)] text-[12px] mt-px">
|
||||
{event.allDay ? "all day" : formatTime(start)}
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="text-[13.5px] font-medium text-[var(--ink)] truncate">
|
||||
{event.title}
|
||||
</div>
|
||||
{event.location && (
|
||||
<div className="text-[11.5px] text-[var(--ink-mute)]">{event.location}</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -69,28 +111,29 @@ async function MonthWidget({ config }: { config: unknown; ctx: WidgetContext })
|
||||
const monthName = now.toLocaleDateString(undefined, { month: "long", year: "numeric" });
|
||||
|
||||
return (
|
||||
<div className="space-y-2">
|
||||
<p className="text-xs font-medium text-muted-foreground">{monthName}</p>
|
||||
<div className="flex flex-col gap-2">
|
||||
<div className="eyebrow">{monthName}</div>
|
||||
{events.length === 0 ? (
|
||||
<p className="text-sm text-muted-foreground">No events this month</p>
|
||||
<p className="text-sm text-[var(--ink-mute)]">No events this month</p>
|
||||
) : (
|
||||
<ul className="space-y-1">
|
||||
<div className="flex flex-col">
|
||||
{events.slice(0, 10).map((event) => {
|
||||
const eventStart = new Date(event.startAt);
|
||||
const day = eventStart.getDate();
|
||||
return (
|
||||
<li key={event.id} className="flex items-center gap-2 text-sm">
|
||||
<span className="w-5 shrink-0 text-center text-xs font-semibold text-muted-foreground">
|
||||
<div key={event.id} className="flex items-center gap-3 py-1.5 text-sm">
|
||||
<span className="w-6 shrink-0 text-center font-medium text-[var(--ink-mute)] tnum">
|
||||
{day}
|
||||
</span>
|
||||
<span className="truncate">{event.title}</span>
|
||||
</li>
|
||||
<span className="dot" style={{ background: "var(--c-household)" }} />
|
||||
<span className="truncate text-[var(--ink-2)]">{event.title}</span>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
{events.length > 10 && (
|
||||
<li className="text-xs text-muted-foreground">+{events.length - 10} more</li>
|
||||
<div className="text-xs text-[var(--ink-mute)] mt-1">+{events.length - 10} more</div>
|
||||
)}
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user