From 6b506a9ca8f77ea34ae00f7d469481f8eff7a985 Mon Sep 17 00:00:00 2001 From: Jakob Wennberg <149234542+jakobwennberg@users.noreply.github.com> Date: Thu, 23 Jul 2026 21:19:12 +0200 Subject: [PATCH] feat(ui): frame-layout shell, pill buttons, 24px page titles (UI migration PR 1) (#1117) * feat(ui): frame-layout shell, pill buttons, 24px page titles (UI migration PR 1) The visual shell from the concept, zero behavior change: - New --frame token pair (40 18% 96% light / 0 0% 5% dark); the dashboard wrapper is bg-frame and
becomes a rounded 12px panel with its own inner scroll (md-gated; mobile keeps document flow + bottom nav) - Sidebar goes borderless/transparent on the frame - Buttons are pills app-wide (radius 99px, default 7px/16px padding, 13px text, icon buttons become circles), set once in components/ui/button.tsx - PageHeader locked at exactly 24px/32px Hedvig serif - MainContainer resets panel scroll on route change (Next's window scroll-to-top never fires for an inner scroll container) - chat layout + extension workspaces switch viewport-height formulas to h-full so they fill the panel instead of overflowing it by 20px - .claude/rules/design.md rewritten with the 14 locked UI-migration conventions from dev_docs/ui_migration_plan.md Co-Authored-By: Claude Fable 5 * fix(ui): clamp hand-rolled page titles to the locked 24px/32px Transaktioner (TransactionStatusBar) and 13 other pages hand-roll their h1 instead of using PageHeader, so they kept text-3xl/4xl after the shell change. Clamp them all to font-display text-2xl leading-8. Onboarding heroes and headline numbers are intentionally untouched. Co-Authored-By: Claude Fable 5 * fix(ui): keep the frame strip above the panel on banner-less accounts
's 10px top margin was the first in-flow margin inside the shell wrapper, so it collapsed through the wrapper and pushed the whole shell down, showing white body background above the panel instead of the warm frame strip (only visible on real accounts: the sandbox banner blocked the collapse). Flex containers never collapse child margins, so the shell wrappers become md:flex md:flex-col. Co-Authored-By: Claude Fable 5 --------- Co-authored-by: Claude Fable 5 --- .claude/rules/design.md | 35 +++++++++++++++---- DECISIONS.md | 6 ++++ app/(dashboard)/articles/[id]/page.tsx | 2 +- app/(dashboard)/bookkeeping/[id]/page.tsx | 2 +- app/(dashboard)/bookkeeping/year-end/page.tsx | 2 +- .../year-end/periodisering/page.tsx | 2 +- app/(dashboard)/chat/layout.tsx | 5 +-- app/(dashboard)/customers/[id]/page.tsx | 2 +- app/(dashboard)/e/[sector]/[slug]/loading.tsx | 2 +- app/(dashboard)/invoices/[id]/credit/page.tsx | 2 +- app/(dashboard)/invoices/[id]/page.tsx | 2 +- app/(dashboard)/layout.tsx | 25 +++++++++---- .../salary/employees/[id]/page.tsx | 2 +- .../supplier-invoices/[id]/page.tsx | 2 +- app/(dashboard)/suppliers/[id]/page.tsx | 2 +- app/globals.css | 6 ++++ components/dashboard/ConsultantEmptyState.tsx | 2 +- components/dashboard/DashboardNav.tsx | 3 +- components/dashboard/MainContainer.tsx | 10 ++++++ .../general/InvoiceInboxWorkspace.tsx | 4 +-- components/invoices/InvoiceEditor.tsx | 2 +- .../NewSupplierInvoiceForm.tsx | 2 +- .../transactions/TransactionStatusBar.tsx | 2 +- components/ui/button.tsx | 13 ++++--- components/ui/page-header.tsx | 3 +- 25 files changed, 102 insertions(+), 38 deletions(-) diff --git a/.claude/rules/design.md b/.claude/rules/design.md index a5916c1a..e98b808f 100644 --- a/.claude/rules/design.md +++ b/.claude/rules/design.md @@ -18,7 +18,7 @@ Swedish sole traders (enskild firma) and small business owners (aktiebolag) who - **Palette**: Achromatic foundation. Pure white background, warm beige (`40 11% 89%`) for chips / active sidebar / hover / secondary buttons. Achromatic primary (no cool tint). Semantic colors (`--success` sage, `--warning` ochre, `--destructive` terracotta) exist but are **data-only**: they appear in charts and financial numbers (positive/negative deltas), never as chrome backgrounds. In chrome, only `--destructive` survives. - **Typography**: Hedvig Letters Serif for display headings, Geist (sans) for body, forms, and tables. Hedvig is single-weight (400): do not apply `font-medium` to display text; its natural high-contrast strokes carry the weight. Tabular numbers everywhere financial data appears. -- **Surfaces**: Cards sit flat on the page: no shadow, full-opacity hairline border (`border-border`), `rounded-lg` (8px). Card background matches page background; the border carries hierarchy. Dark mode drops the warm tint from secondary for a pure-gray mood shift; light mode keeps the beige. +- **Surfaces**: The page itself is a rounded panel (12px) floating on a warm-toned frame (`--frame`); the sidebar sits borderless on the frame. Cards sit flat on the page: no shadow, full-opacity hairline border (`border-border`), `rounded-lg` (8px). Card background matches page background; the border carries hierarchy. Dark mode drops the warm tint from secondary for a pure-gray mood shift; light mode keeps the beige. - **Spacing**: Generous whitespace. Dense data (tables, ledgers) uses tighter spacing but never feels cramped. - **Motion**: Functional, not decorative. No press-scale, no hover-lift, no spring overshoot. Hover state is a flat background shift (`bg-secondary/60`). `transition-colors duration-150` is the default. Stagger animations on list entry are fine. Respect `prefers-reduced-motion` (already wired). - **Icons**: Lucide: 15px in navigation, slightly larger in empty states. @@ -35,6 +35,25 @@ Swedish sole traders (enskild firma) and small business owners (aktiebolag) who WCAG AA (4.5:1 text, 3:1 UI). Keyboard-navigable + visible focus rings. Respect `prefers-reduced-motion`. Color never sole state indicator. Touch targets ≥40px (44px for mobile-critical). Icon-only buttons need `aria-label`. +## Locked UI-migration conventions + +Decided during the 2026-07 concept work (dev_docs/ui_migration_plan.md); they apply system-wide and override anything below that conflicts. + +1. **Frame layout.** The page is a rounded panel (12px) on a warm-toned frame (`--frame`). The panel keeps `--background`; the sidebar is borderless on the frame. +2. **Page title is exactly 24px/32px** Hedvig Letters Serif (`text-2xl leading-8` via PageHeader). +3. **Buttons are pills.** Radius 99px, default padding 7px 16px, 13px text. Set once in `components/ui/button.tsx`, app-wide, never per page. +4. **Table rows are one line.** Secondary info (descriptions, OCR, roles) belongs in the detail view or a click-popup, never as sub-rows in lists. +5. **Chips mark exceptions.** Normal states render as muted text; Badge only when the row deviates. Same chip on every row means the chip is wrong. +6. **Attention is one ochre sentence**, not a banner: the `.attn` pattern (12.5px, `--warning` tone, single line, optionally with an embedded action link). Max one per page. +7. **Help text lives behind a "?"** right after the H1: a small (17px) circular button opening a popover anchored at the button. No instructional copy in the page flow. +8. **One context picker per page, far right in the toolbar**: fiscal year or account/source as a chip-dropdown with a check on the active choice. A chip that looks like a picker must be a picker. +9. **The primary action lives in the page header**, right side. Multiple create paths collapse into a split button whose caret menu remembers the last-used mode (persisted in `user_preferences`, not localStorage). +10. **Confirm up front, don't comment afterwards.** Actions that post or send open a small confirm dialog describing the outcome ("Bokförs som verifikat A-217 ...") instead of writing outcome text into the page afterwards. +11. **Content lands with stagger.** `.stagger-enter` is the standard entry for list/table content, on server render and on client-fetch completion alike. +12. **Status colors are data, not chrome**: sage/ochre/terracotta only in numbers, exception chips and `.attn`. +13. **Overlays**: centered modal for create/confirm (template, assistant, confirmations, settings); right slide-over for reviewing an object (Granskning detail). Both with veil, Esc, and click-outside. +14. **Manual base, AI as opt-in.** Base flows work without AI; AI entry points are clearly labeled discrete choices (e.g. "Skapa med assistenten") and no AI suggestion posts without Granskning. + ## Design System Tokens **Spacing scale.** Only use Tailwind values `1, 2, 3, 4, 6, 8, 10, 12`. **Forbidden:** `2.5`, `5`, hardcoded pixels in page logic. @@ -52,10 +71,13 @@ WCAG AA (4.5:1 text, 3:1 UI). Keyboard-navigable + visible focus rings. Respect Compact metric cards (e.g. dashboard tiles, salary KPI row) use `p-4`. Detail cards use `p-6`. Never mix `p-5`. -**Layout.** -- Sidebar width: `md:w-64` (256px). Main content offset: `md:pl-64`. +**Layout (frame layout).** +- The dashboard wrapper is `bg-frame` (`--frame: 40 18% 96%` light, `0 0% 5%` dark). `
` is the page panel: `bg-background rounded-xl border border-border`, 10px margin against the frame, own inner scroll (`md:h-[calc(100vh-20px)] md:overflow-y-auto`). Defined once as `MAIN_PANEL_CLASS` in `app/(dashboard)/layout.tsx`; never restyle per page. +- The panel is the desktop scroll container: `position: sticky` binds to it automatically; never assume `window` scroll on dashboard pages. Scroll reset on navigation lives in `MainContainer`. +- Sidebar width: `md:w-64` (256px), borderless and transparent on the frame. Panel offset: `md:ml-64`. - Main container: `max-w-5xl mx-auto px-5 py-8 md:px-8 md:py-10` (via `components/dashboard/MainContainer.tsx`). - Page root: `
`. +- Mobile keeps the pre-frame layout: full-width document flow, bottom nav; the panel styles are `md:`-gated. **Primitives: always use these, don't hand-roll.** @@ -63,7 +85,7 @@ Compact metric cards (e.g. dashboard tiles, salary KPI row) use `p-4`. Detail ca |---|---|---| | Page title + action | `components/ui/page-header.tsx` `PageHeader` | Use this, not bespoke `

` + `

` blocks. Drop the `description` prop when it just paraphrases the title. | | Data table | `components/ui/table.tsx` `Table / TableHeader / TableHead / TableRow / TableCell` | Header style is baked in: `text-[11px] font-medium uppercase tracking-wider text-muted-foreground`. Wrap in `` when the table is a card's primary content. Add `tabular-nums` to numeric cells. | -| Status indicator | `components/ui/badge.tsx` `` | Variants: `default / secondary / success / warning / destructive / outline`. **Never** use raw Tailwind colors (`bg-blue-100`, `bg-emerald-500/10`, etc.) for status. Map status → variant via a small `Record` per feature. | +| Status indicator | `components/ui/badge.tsx` `` | Chips mark exceptions only: normal states (Aktiv, Bokförd, Betald-i-tid) render as muted text (`text-muted-foreground text-xs`); Badge is reserved for rows that deviate (Utkast, Förfallen, Ej bokförd). A table where every row carries the same chip is wrong. Variants: `default / secondary / success / warning / destructive / outline`. **Never** use raw Tailwind colors (`bg-blue-100`, `bg-emerald-500/10`, etc.) for status. Map status → variant via a small `Record` per feature. | | No-data state | `components/ui/empty-state.tsx` `EmptyState` | Don't hand-roll `

…
`. Preset variants exist (`EmptyInvoices`, `EmptyCustomers`, `EmptyTransactions`, etc.). | | Loading placeholder | `components/ui/skeleton.tsx` `` | Don't hand-roll `bg-muted rounded animate-pulse` divs. | | Inline help / formulas | `components/ui/info-tooltip.tsx` `InfoTooltip` | Hover-revealed; don't use always-visible info buttons. | @@ -84,7 +106,7 @@ Never render raw `{x.invoice_date}` directly: always route through `formatDate() **Currency.** `formatCurrency(n, currency?)` from `lib/utils.ts`. Default SEK. **Typography.** -- Page title: use `PageHeader` (renders `font-display text-3xl md:text-4xl tracking-tight`). Do not hand-roll an `

`. +- Page title: use `PageHeader` (renders `font-display text-2xl leading-8 tracking-tight`, exactly 24px/32px, locked). Do not hand-roll an `

`. - Card title: `` for sections, default for primary cards. The primitive already drops `font-medium`: do not add it back. - Section divider header inside a page: `

`. - Headline number: `font-display text-xl tabular-nums`. No `font-medium`: Hedvig's natural weight carries the gravitas. @@ -100,5 +122,6 @@ Never render raw `{x.invoice_date}` directly: always route through `formatDate() - `active:scale-[...]` on buttons. Buttons do not bounce. - `bg-gradient-to-*` on page or card backgrounds. Flat surfaces only. - `font-medium` on display elements (`font-display`, h1/h2/h3, CardTitle, PageHeader title). Hedvig is single-weight by design. -- `rounded-xl` (12px) on cards. Cards are `rounded-lg` (8px). `rounded-xl` survives only on prominent hero-style surfaces if absolutely needed. +- `rounded-xl` (12px) on cards. Cards are `rounded-lg` (8px). `rounded-xl` survives on the page panel (frame layout) and prominent hero-style surfaces only. +- Overriding the Button pill radius per call site (`rounded-lg`, `rounded-md` on a `

-

{article.name}

+

{article.name}

{article.active ? t('status_active') : t('status_inactive')} diff --git a/app/(dashboard)/bookkeeping/[id]/page.tsx b/app/(dashboard)/bookkeeping/[id]/page.tsx index affdff14..54fb589c 100644 --- a/app/(dashboard)/bookkeeping/[id]/page.tsx +++ b/app/(dashboard)/bookkeeping/[id]/page.tsx @@ -339,7 +339,7 @@ export default function JournalEntryDetailPage({ params }: { params: Promise<{ i
-

+

{formatVoucher(entry)}

diff --git a/app/(dashboard)/bookkeeping/year-end/page.tsx b/app/(dashboard)/bookkeeping/year-end/page.tsx index f2005445..5df96122 100644 --- a/app/(dashboard)/bookkeeping/year-end/page.tsx +++ b/app/(dashboard)/bookkeeping/year-end/page.tsx @@ -225,7 +225,7 @@ export default function YearEndPage() { return (
-

Årsbokslut

+

Årsbokslut

-

+

{closingYear ? `Periodisering: Bokslut ${closingYear}` : 'Periodisering'}

diff --git a/app/(dashboard)/e/[sector]/[slug]/loading.tsx b/app/(dashboard)/e/[sector]/[slug]/loading.tsx index 60115268..929bde24 100644 --- a/app/(dashboard)/e/[sector]/[slug]/loading.tsx +++ b/app/(dashboard)/e/[sector]/[slug]/loading.tsx @@ -104,7 +104,7 @@ function TicSkeleton() { function FullScreenWorkspaceSkeleton() { return ( -
+
diff --git a/app/(dashboard)/invoices/[id]/credit/page.tsx b/app/(dashboard)/invoices/[id]/credit/page.tsx index 50424d9d..3c93a2a4 100644 --- a/app/(dashboard)/invoices/[id]/credit/page.tsx +++ b/app/(dashboard)/invoices/[id]/credit/page.tsx @@ -188,7 +188,7 @@ export default function CreateCreditNotePage({ params }: { params: Promise<{ id:
-

{t('title')}

+

{t('title')}

{t('subtitle', { number: invoice.invoice_number ?? '' })}

diff --git a/app/(dashboard)/invoices/[id]/page.tsx b/app/(dashboard)/invoices/[id]/page.tsx index d10b4b33..9ee2fed6 100644 --- a/app/(dashboard)/invoices/[id]/page.tsx +++ b/app/(dashboard)/invoices/[id]/page.tsx @@ -655,7 +655,7 @@ export default function InvoiceDetailPage({ params }: { params: Promise<{ id: st
-

{isSelfBilled ? invoiceDisplayNumber(invoice as Invoice) : (invoice.invoice_number ?? '-')}

+

{isSelfBilled ? invoiceDisplayNumber(invoice as Invoice) : (invoice.invoice_number ?? '-')}

{isProforma && ( {t('badge_proforma')} )} diff --git a/app/(dashboard)/layout.tsx b/app/(dashboard)/layout.tsx index 98817a67..b25e535b 100644 --- a/app/(dashboard)/layout.tsx +++ b/app/(dashboard)/layout.tsx @@ -28,6 +28,19 @@ import { */ const NO_COMPANY_ALLOWED_PATHS = ['/settings/account'] +/** + * Frame layout: on desktop the page is a rounded panel floating on the + * warm-toned frame (bg-frame on the wrapper div), with its own inner + * scroll. 10px margin against the frame; height is the remaining + * viewport. The sidebar (fixed, w-64) sits borderless on the frame, so + * the panel starts at ml-64. On mobile the panel dissolves: full-width + * document flow with the bottom nav, exactly as before. + */ +const MAIN_PANEL_CLASS = + 'safe-area-main-padding md:!pb-0 relative bg-background min-h-screen ' + + 'md:min-h-0 md:ml-64 md:mt-[10px] md:mr-[10px] md:h-[calc(100vh-20px)] ' + + 'md:overflow-y-auto md:rounded-xl md:border md:border-border' + export default async function DashboardLayout({ children, settingsModal, @@ -95,7 +108,7 @@ export default async function DashboardLayout({ > -
+
@@ -186,14 +199,14 @@ export default async function DashboardLayout({ -
+
-
+
{children}
@@ -265,7 +278,7 @@ export default async function DashboardLayout({ }} > -
+
{/* Skip to content link for keyboard/screen reader users */} -
+
{children}
diff --git a/app/(dashboard)/salary/employees/[id]/page.tsx b/app/(dashboard)/salary/employees/[id]/page.tsx index 2386ec77..585a68aa 100644 --- a/app/(dashboard)/salary/employees/[id]/page.tsx +++ b/app/(dashboard)/salary/employees/[id]/page.tsx @@ -237,7 +237,7 @@ export default function EmployeeDetailPage({ params }: { params: Promise<{ id: s
-

+

{employee.first_name} {employee.last_name}

diff --git a/app/(dashboard)/supplier-invoices/[id]/page.tsx b/app/(dashboard)/supplier-invoices/[id]/page.tsx index 64036be9..86e68332 100644 --- a/app/(dashboard)/supplier-invoices/[id]/page.tsx +++ b/app/(dashboard)/supplier-invoices/[id]/page.tsx @@ -456,7 +456,7 @@ export default function SupplierInvoiceDetailPage() {

-

+

{t('arrival_header', { number: invoice.arrival_number })}

diff --git a/app/(dashboard)/suppliers/[id]/page.tsx b/app/(dashboard)/suppliers/[id]/page.tsx index 5dd1b774..1bfa4496 100644 --- a/app/(dashboard)/suppliers/[id]/page.tsx +++ b/app/(dashboard)/suppliers/[id]/page.tsx @@ -154,7 +154,7 @@ export default function SupplierDetailPage() {
-

{supplier.name}

+

{supplier.name}

{supplierTypeLabels[supplier.supplier_type]} {supplier.org_number && t('org_number_inline', { number: supplier.org_number })} diff --git a/app/globals.css b/app/globals.css index 126fc4a6..b2cedc90 100644 --- a/app/globals.css +++ b/app/globals.css @@ -16,6 +16,9 @@ --background: 0 0% 100%; --foreground: 0 0% 9%; + /* Warm-toned frame behind the floating page panel (frame layout) */ + --frame: 40 18% 96%; + --card: 0 0% 100%; --card-foreground: 0 0% 9%; @@ -83,6 +86,8 @@ --background: 0 0% 7%; --foreground: 0 0% 87%; + --frame: 0 0% 5%; + --card: 0 0% 11%; --card-foreground: 0 0% 87%; @@ -129,6 +134,7 @@ @theme inline { --color-background: hsl(var(--background)); --color-foreground: hsl(var(--foreground)); + --color-frame: hsl(var(--frame)); --color-card: hsl(var(--card)); --color-card-foreground: hsl(var(--card-foreground)); --color-popover: hsl(var(--popover)); diff --git a/components/dashboard/ConsultantEmptyState.tsx b/components/dashboard/ConsultantEmptyState.tsx index 39b006b9..caeeb619 100644 --- a/components/dashboard/ConsultantEmptyState.tsx +++ b/components/dashboard/ConsultantEmptyState.tsx @@ -14,7 +14,7 @@ export default function ConsultantEmptyState({ firstName }: ConsultantEmptyState return (

-

+

{greeting}{firstName ? `, ${firstName}` : ''}

diff --git a/components/dashboard/DashboardNav.tsx b/components/dashboard/DashboardNav.tsx index dfc93475..f35b635d 100644 --- a/components/dashboard/DashboardNav.tsx +++ b/components/dashboard/DashboardNav.tsx @@ -510,7 +510,8 @@ export default function DashboardNav({ companyName: _companyName, entityType, pa <> {/* Desktop sidebar */}