fix(ui): extract shared ErrorBanner and migrate inline banners #481

Merged
nrupard merged 2 commits from fix/MAPPS-418-error-banner into main 2026-08-05 20:05:30 +02:00
Owner

Implements MAPPS-418 (durable follow-up to MAPPS-412 F3): extracts a shared ErrorBanner component and routes every inline error-message banner through it, so the red recipe lives in one place and cannot re-drift.

Component

New src/components/error_banner.rs: a compact, icon-less banner (distinct from the heavier Alert) rendering the MAPPS-412 recipe (bg-red-50 dark:bg-red-950/30 + border-red-200 dark:border-red-900 + text-red-700 dark:text-red-300, rounded-md px-3 py-2 text-sm). The message is passed as children; an optional class prop carries caller spacing (mb-3/mb-4). It always sets role="alert" - a bonus a11y win, since none of the migrated bare divs announced.

Migration

57 inline error banners across 16 files now use ErrorBanner, collapsing both drifted recipes onto one: recipe A (the majority) and the divergent dark:bg-red-900/20 p-3 tint in time/projects/assets/profile (which MAPPS-412 did not reach). Net -148 lines. Each banner's message expression and margin are preserved; the divergent tint's inner p.text-red-600 wrapper is dropped in favor of the standardized styling.

Three red divs were deliberately left (not compact error-message banners): the app-wide server_status_banner outage bar (role=status/aria-live, border-b, static copy + Link), the persistent settings destructive-import warning (always rendered, not error-gated - role="alert" on it would be an a11y regression), and the existing Alert component's Error color tuple.

Verification

Diff-reviewed (no local cargo): the component renders the exact recipe, is re-exported via components/mod.rs, every file that imports ErrorBanner uses it (no orphaned imports), and no non-banner red usage (destructive buttons, required asterisks, inline label text) was touched. No em-dash. CI runs fmt/clippy(-D warnings)/wasm-build/tests; the use blocks that gained ErrorBanner may need a rustfmt repack (rustfmt is not runnable on this box), which I will apply from CI if it flags them.

#MAPPS-418

Implements MAPPS-418 (durable follow-up to MAPPS-412 F3): extracts a shared `ErrorBanner` component and routes every inline error-message banner through it, so the red recipe lives in one place and cannot re-drift. ## Component New `src/components/error_banner.rs`: a compact, icon-less banner (distinct from the heavier `Alert`) rendering the MAPPS-412 recipe (`bg-red-50 dark:bg-red-950/30` + `border-red-200 dark:border-red-900` + `text-red-700 dark:text-red-300`, `rounded-md px-3 py-2 text-sm`). The message is passed as `children`; an optional `class` prop carries caller spacing (`mb-3`/`mb-4`). It always sets `role="alert"` - a bonus a11y win, since none of the migrated bare divs announced. ## Migration 57 inline error banners across 16 files now use `ErrorBanner`, collapsing both drifted recipes onto one: recipe A (the majority) and the divergent `dark:bg-red-900/20 p-3` tint in time/projects/assets/profile (which MAPPS-412 did not reach). Net -148 lines. Each banner's message expression and margin are preserved; the divergent tint's inner `p.text-red-600` wrapper is dropped in favor of the standardized styling. Three red divs were deliberately left (not compact error-message banners): the app-wide `server_status_banner` outage bar (`role=status`/`aria-live`, `border-b`, static copy + Link), the persistent `settings` destructive-import warning (always rendered, not error-gated - `role="alert"` on it would be an a11y regression), and the existing `Alert` component's Error color tuple. ## Verification Diff-reviewed (no local cargo): the component renders the exact recipe, is re-exported via `components/mod.rs`, every file that imports `ErrorBanner` uses it (no orphaned imports), and no non-banner red usage (destructive buttons, required asterisks, inline label text) was touched. No em-dash. CI runs fmt/clippy(-D warnings)/wasm-build/tests; the `use` blocks that gained `ErrorBanner` may need a rustfmt repack (rustfmt is not runnable on this box), which I will apply from CI if it flags them. #MAPPS-418
fix(ui): extract shared ErrorBanner and migrate inline banners
Some checks failed
Check / fmt + clippy + tests (pull_request) Failing after 9s
5062ea8520
Implements MAPPS-418 (durable follow-up to MAPPS-412 F3). Adds src/components/error_banner.rs, a compact icon-less error banner rendering the MAPPS-412 red recipe with role="alert", and routes 57 hand-rolled inline error banners across 16 files through it, collapsing both the majority recipe and the divergent dark:bg-red-900/20 tint (time/projects/assets/profile) onto one component. The app-wide outage bar, the persistent destructive-import warning, and the existing Alert component are deliberately left as distinct.

#MAPPS-418
style(ui): rustfmt repack of components imports after ErrorBanner
All checks were successful
Check / fmt + clippy + tests (pull_request) Successful in 1m21s
Create release / Create release from merged PR (pull_request) Has been skipped
13c7bf9732
Adding ErrorBanner to 15 components import blocks pushed their first continuation line over 100 cols; reflow each to rustfmt's canonical wrap (applied verbatim from CI's cargo fmt --check output).

#MAPPS-418
nrupard deleted branch fix/MAPPS-418-error-banner 2026-08-05 20:05:31 +02:00
Sign in to join this conversation.
No reviewers
No labels
No milestone
No project
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set

Reference
psa-systems/mokosh-apps!481
No description provided.