ginnoir/famapp
1
0
Fork 0
Code Issues 7 Pull Requests Actions Packages Projects Releases Wiki Activity

Apply paper-and-ink design system across all surfaces
Release / build-and-push (push) Has been cancelled
Details

Browse Source 
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
2026-05-07 01:03:21 -05:00
co-authored by Claude Opus 4.7
parent e130cda6c5
commit 9612a54e52
61 changed files with 4173 additions and 894 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/modules/notes/components/shared-view.tsx
+43 -11
View File
@@ -1,26 +1,58 @@
import { Pin } from "lucide-react";
import { FileText, Pin } from "lucide-react";
import type { NoteShareData } from "../server/share-queries";
import { ShareEyebrow } from "@/components/share/share-eyebrow";
export function NoteSharedView({ data }: { data: NoteShareData }) {
const updatedAt = new Date(data.updatedAt).toLocaleDateString(undefined, {
const updated = new Date(data.updatedAt).toLocaleDateString(undefined, {
year: "numeric",
month: "long",
day: "numeric",
});
return (
<div className="mx-auto max-w-xl space-y-4 p-4">
<header className="space-y-1">
<>
<ShareEyebrow>
<FileText className="size-3" />
Note
</ShareEyebrow>
<h1
className="serif"
style={{
fontSize: "clamp(28px, 6vw, 38px)",
lineHeight: 1.15,
letterSpacing: "-0.02em",
color: "var(--ink)",
margin: "0 0 8px",
textWrap: "pretty",
}}
>
{data.title}
</h1>
<p className="muted text-[13px] mb-6 inline-flex items-center gap-2">
{data.pinned && (
<span className="flex items-center gap-1 text-xs text-muted-foreground">
<Pin className="size-3" />
<span className="inline-flex items-center gap-1">
<Pin className="size-3 text-[var(--accent)]" />
Pinned
</span>
)}
<h1 className="text-2xl font-semibold">{data.title}</h1>
<p className="text-xs text-muted-foreground">Updated {updatedAt}</p>
</header>
{data.body && <p className="whitespace-pre-wrap text-sm leading-relaxed">{data.body}</p>}
</div>
{data.pinned && <span>·</span>}
<span>Updated {updated}</span>
</p>
{data.body && (
<div
className="serif"
style={{
fontSize: 16,
lineHeight: 1.7,
color: "var(--ink-2)",
whiteSpace: "pre-wrap",
textWrap: "pretty",
}}
>
{data.body}
</div>
)}
</>
);
}