Repository navigation
v0.327.0 — UI review release B: one segmented control, one money colour
Container
ghcr.io/budgets-au/budgets:0.327.0
ghcr.io/budgets-au/budgets:latest
Second of four UI-consistency releases — the "one source of truth" pass.
Added
ui/segmented-control.tsxreplaces four hand-rolled variants across 17 call sites in 15 files. The variants had drifted into: two that shared markup but disagreed on the active fill (indigo vs near-black), one "inset tray" look, and the realui/tabs.tsxused in two places. Padding came in three sizes and exactly one site had any ARIA at all.- Look: the majority treatment — joined hairline border with a
bg-indigo-600active fill, matching the sidebar's active nav item and the project's indigo accent. - Two scales, one language.
size="compact"for controls that sit inside aCardHeaderbeside aCardTitle, where the default scale crowds the heading. Only type size and padding differ, so the two read as one control rather than two components. - Accessibility:
role="radiogroup"/role="radio"/aria-checkedwith a roving tabindex and full arrow-key / Home / End navigation. That's the correct ARIA for "pick exactly one of N" — the calendar's range chips already had it, and the other 16 sites are brought up to match. Deliberately notrole="tablist"(promises atabpanel, and these reshape data in place) and not barearia-pressed(describes independent toggles).ui/tabs.tsxremains for genuine page-level tab bars.
- Look: the majority treatment — joined hairline border with a
Changed
amountClassis the only money colour in the app now. Gained exported companions —MONEY_POSITIVE_CLASS,MONEY_NEGATIVE_CLASS,MONEY_NEUTRAL_CLASS— for callers that colour by semantic rather than by sign. The motivating case: accounts-cashflow's "debit" column is always a positive number but reads as an outflow.- Migrated every hand-rolled equivalent. Negatives had been appearing as
text-rose-600,text-rose-400,text-rose-700ortext-red-500depending on the file. Files touched:accounts-cashflow-report(6 sites),envelope-report,accounts-list,cashflow-calendar,transaction-row,reports-view, andstocks-summary-card— which had a wrapper colour duplicating theamountClasscall on its own child. - Left alone deliberately: transfer-in / transfer-out columns (sky / amber are a genuinely different semantic to income and expense), and the envelope report's Income / Expenses section headings (they tint by section type, not by amount).
- Migrated every hand-rolled equivalent. Negatives had been appearing as
Fixed
- The e2e suite had been hanging on
networkidlesince the Next 16.3 bump in 0.315.0. Next's RSC route-prefetch loop keeps the network permanently non-idle, sowaitForLoadState("networkidle")never resolves. 0.315.0 fixed this inpages-smoke.spec.tsonly — the other 12 specs kept the old wait and were quietly failing or burning their full timeout. All 24 call sites now wait onload.- The monkey crawl went from 9 of 9 route tests failing at 19.1 minutes to 25/25 passing in 2.0 minutes.
- Charts-drawn / RGL-settled detection in
screenshots.spec.tsanddashboard-visual.spec.tsis unaffected — those key off real completion signals, which is why they were already the right pattern.
Verify
- tsc clean,
pnpm buildclean, 732/742 unit. - pages-smoke 12/12, monkey-goals 15/15, monkey crawl 25/25.
Upgrade
Pull ghcr.io/budgets-au/budgets:0.327.0 and roll. No migrations. Visible changes: the Category-report and Forward-balance-widget toggles now use the indigo active fill like every other toggle; the report toolbars that used the grey inset-tray look now match too; negatives are one consistent red everywhere; and all segmented controls are keyboard-navigable with arrow keys.