Skip to content

v0.327.0 — UI review release B: one segmented control, one money colour

Choose a tag to compare

@budgets-au budgets-au released this 13 Aug 08:35
· 44 commits to main since this release

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.tsx replaces 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 real ui/tabs.tsx used 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-600 active 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 a CardHeader beside a CardTitle, 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-checked with 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 not role="tablist" (promises a tabpanel, and these reshape data in place) and not bare aria-pressed (describes independent toggles). ui/tabs.tsx remains for genuine page-level tab bars.

Changed

  • amountClass is 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-700 or text-red-500 depending on the file. Files touched: accounts-cashflow-report (6 sites), envelope-report, accounts-list, cashflow-calendar, transaction-row, reports-view, and stocks-summary-card — which had a wrapper colour duplicating the amountClass call 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).

Fixed

  • The e2e suite had been hanging on networkidle since the Next 16.3 bump in 0.315.0. Next's RSC route-prefetch loop keeps the network permanently non-idle, so waitForLoadState("networkidle") never resolves. 0.315.0 fixed this in pages-smoke.spec.ts only — the other 12 specs kept the old wait and were quietly failing or burning their full timeout. All 24 call sites now wait on load.
    • 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.ts and dashboard-visual.spec.ts is unaffected — those key off real completion signals, which is why they were already the right pattern.

Verify

  • tsc clean, pnpm build clean, 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.