Skip to content

UI: implement the accessible application shell, theme, and settings #5488

Description

@siavashs

Parent: #5451

Summary

Build the shared Mantine application shell, responsive navigation, theme, persistent settings, and accessibility foundations used by every v3alpha-backed page.

Application shell

  • Centralize page and route metadata so the Router and Header do not maintain duplicate definitions.
  • Build a responsive Mantine AppShell with desktop navigation and a keyboard-accessible mobile burger/drawer.
  • Include current-route state, Alertmanager branding and favicon, Documentation, and a route-prefix-safe Classic UI link.
  • Add a real not-found page and reusable loading, empty, unavailable, and error states.
  • Reset page error boundaries on route changes and lazy-load substantive routes where useful.
  • Hide routes whose v3alpha services have not landed rather than exposing non-functional placeholder pages.

Theme and settings

  • Define Alertmanager theme tokens, spacing, radius, typography, contrast, and focus behavior centrally.
  • Support automatic, light, and dark color schemes and persist explicit selection.
  • Integrate/rebase ui: Add theme toggle #5106 where suitable and include its requested interaction and accessibility tests.
  • Add persistent settings for first day of week, default silence creator, expand-all alert groups, local/UTC time display, and page sizes.
  • Preserve compatible Elm localStorage keys (firstDayOfWeek, defaultCreator, and groupExpandAll) and tolerate malformed or missing values.

Accessibility and responsiveness

  • Restore browser zoom; do not use user-scalable=no.
  • Use semantic page headings, landmarks, table structures, labels, and status/error announcements.
  • Ensure all navigation and interactive controls work with keyboard and visible focus.
  • Correct the current mobile navigation gap and title visibility breakpoints.
  • Prevent fixed-width skeletons, tables, code blocks, labels, and menus from overflowing narrow viewports.
  • Do not globally suppress keyboard-equivalent click lint rules.

Acceptance criteria

  • One route registry drives navigation and route rendering.
  • Every available page is usable by keyboard at mobile and desktop widths.
  • Mobile navigation exposes all routes and actions available on desktop.
  • Auto/light/dark theme selection is clear, accessible, and persistent.
  • Existing Elm preferences migrate without throwing and malformed storage values fall back safely.
  • Documentation and Classic UI links work at root and non-root route prefixes.
  • Not-found, loading, empty, unavailable, and error states are consistent and announced appropriately.
  • Browser zoom, semantic headings/tables, focus visibility, labels, and responsive overflow pass automated and manual checks.
  • Interaction tests cover navigation, theme cycling, settings persistence, error resets, and mobile controls.

Dependencies and related work

Likely code areas

  • ui/mantine-ui/src/{App,main,theme}.tsx
  • ui/mantine-ui/src/components/Header*, ErrorBoundary.tsx, and new shell components
  • new route and settings modules/tests
  • ui/mantine-ui/index.html, biome.json
  • shared test utilities

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Type

No type

Projects

Relationships

None yet

Development

No branches or pull requests

Issue actions