ginnoirandClaude Opus 4.7
9612a54e52
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>
60 lines
1.7 KiB
TypeScript
60 lines
1.7 KiB
TypeScript
interface Props {
|
|
expiresAt: Date | null;
|
|
capabilities: { read: boolean; write: boolean };
|
|
token: string;
|
|
}
|
|
|
|
function relativeExpiry(d: Date): string {
|
|
const ms = d.getTime() - Date.now();
|
|
if (ms <= 0) return "expired";
|
|
const days = Math.round(ms / 86400000);
|
|
if (days >= 1) return `in ${days} day${days === 1 ? "" : "s"}`;
|
|
const hours = Math.round(ms / 3600000);
|
|
if (hours >= 1) return `in ${hours} hour${hours === 1 ? "" : "s"}`;
|
|
const mins = Math.round(ms / 60000);
|
|
return `in ${mins} min`;
|
|
}
|
|
|
|
export function ShareBanner({ expiresAt, capabilities, token }: Props) {
|
|
const mode = capabilities.write ? "edit" : "view-only";
|
|
return (
|
|
<div
|
|
className="flex items-center gap-3 px-6 py-2.5 text-[12.5px] flex-wrap"
|
|
style={{
|
|
background: "var(--paper-2)",
|
|
borderBottom: "0.5px solid var(--hair)",
|
|
color: "var(--ink-soft)",
|
|
}}
|
|
>
|
|
<span className="dot" style={{ background: "var(--c-bills)", width: 6, height: 6 }} />
|
|
<span>
|
|
Public share link · <span style={{ textTransform: "lowercase" }}>{mode}</span>
|
|
</span>
|
|
{expiresAt ? (
|
|
<>
|
|
<span style={{ color: "var(--ink-2)", fontWeight: 600 }}>
|
|
· expires {relativeExpiry(expiresAt)}
|
|
</span>
|
|
<span>· revoke anytime</span>
|
|
</>
|
|
) : (
|
|
<span>· no expiration</span>
|
|
)}
|
|
<code
|
|
className="ml-auto"
|
|
style={{
|
|
fontFamily: "var(--mono)",
|
|
fontSize: 11,
|
|
color: "var(--ink-mute)",
|
|
background: "var(--card)",
|
|
padding: "3px 8px",
|
|
borderRadius: 4,
|
|
border: "0.5px solid var(--hair)",
|
|
}}
|
|
>
|
|
/s/{token.slice(0, 12)}
|
|
</code>
|
|
</div>
|
|
);
|
|
}
|