Skip to content

feat(shell): console shell from the October 2026 redesign (#900) - #925

Merged
alex-dembele merged 8 commits into
masterfrom
feat/900-console-shell
Oct 9, 2026
Merged

alex-dembele merged 8 commits into
masterfrom
feat/900-console-shell

Conversation

@alex-dembele

Copy link
Copy Markdown
Member

First screen of the redesign epic (#899): the shell every other page sits in.

What changed

  • Sidebar rebuilt on the design's measurements (surface-1, 34px entries, accent keyline on the active one, divider under the pinned dashboard, bordered org card, 36px new-risk button). Copy follows the design: Recommandations, Rôles et accès, Administration. Recommendations and Emerging risks get the lightbulb and radar icons.
  • Sidebar badges are the design's four, each from a tenant-scoped endpoint and only fetched when the member can open the screen: action items, KEV flaws still open, open incidents, pending invitations.
  • Backend: GET /vulnerabilities/stats gains kev_open (KEV and still open, triaged or in remediation). kev_count keeps its meaning. Repository tests cover success, empty tenant and cross-tenant isolation.
  • Header blends both designs: the redesign's bar (breadcrumb, 300px search, theme, notifications, help) plus our connection dot, language switch and density. The keyboard button became the design's help button and opens the same shortcuts sheet. The breadcrumb starts at the intention group as in the design.
  • Notifications panel at the design's size and surfaces, red unread count, footer link to the activity feed.
  • Command palette in the design's order (actions, "Aller à", results) with real arrow-key navigation; results show severity and status as words.
  • Page frame and title block on the design metrics (1320px column, 24/32/64 padding, 28px display title with eyebrow and subtitle). Avatars become the design's neutral disc. Canvas is surface-0.

Bugs found on the way, fixed here

  • Cmd/Ctrl+K did nothing until the palette had been opened once, because the palette registered the shortcut itself and is mounted lazily.
  • On mobile, the navigation drawer slid under the sticky header.

Verified

  • npx tsc -b --noEmit: clean.
  • npx vitest run: 112 files, 1034 tests passed.
  • node scripts/check-lint-ceiling.mjs: 97 errors against a ceiling of 99, ceiling lowered to 97.
  • go test ./internal/infrastructure/repository/ ./internal/application/dashboard/ ./internal/application/vulnerability/ ./internal/handler/: ok.
  • Live, Vite on a throwaway backend, side by side with the design at 1440×900 in dark and light: sidebar, header, notifications panel, palette (empty, filtered, Cmd+K open and toggle). 414px: no horizontal overflow, drawer above the header. 1440×600 checked.
  • axe-core on header and sidebar, dark and light: 0 serious or critical.

Not done here

Closes #900

kev_count includes remediated and accepted findings, so it cannot back a
badge that says how many exploited flaws are still exposed. kev_open counts
the open, triaged and in-remediation ones; the sidebar and the dashboard
read it.

Signed-off-by: alex-dembele <alexandredembele16@gmail.com>
… use (#900)

The palette is mounted only once opened, and it was the palette's own
listener that handled the shortcut, so Cmd/Ctrl+K did nothing until the
search field had been clicked once. The shell now listens for it and the
palette keeps handling the toggle while open.

Signed-off-by: alex-dembele <alexandredembele16@gmail.com>
Sidebar on surface-1 with the redesign's measurements: 34px entries with
an accent keyline on the active one, a divider under the pinned
dashboard, plain group labels, a bordered org switcher card and a 36px
new-risk button. Labels follow the design copy (Recommandations, Rôles
et accès, Administration) and Recommendations and Emerging risks get the
lightbulb and radar icons.

The badges are the design's four, each read from a tenant-scoped
endpoint and only fetched when the member may open the screen: action
items, KEV flaws still open, open incidents and pending invitations.
The drawer now sits above the sticky header on mobile; it used to slide
under it.

Signed-off-by: alex-dembele <alexandredembele16@gmail.com>
The header keeps the redesign's layout, a 56px solid bar with the
breadcrumb, a 300px search field, theme, notifications and help, and adds
what the product relies on and the design does not draw: the live
connection dot, the language switch and density. The keyboard button
becomes the help button the design shows, opening the same shortcuts
sheet.

The breadcrumb starts at the intention group (Piloter, Identifier...) as
in the design and names the executive view on /?view=executive. The
notification badge is the design's red count, and the panel is 400px on
surface-2 with a footer link to the activity feed, a real destination
this time.

Signed-off-by: alex-dembele <alexandredembele16@gmail.com>
Actions first, then a short "Aller à" list, then the live search
results, as in the redesign. Up and down move a highlighted row with an
accent keyline and Enter runs it; the footer used to advertise arrow keys
the palette did not handle. Search results show severity and risk status
as words instead of raw API keys.

Signed-off-by: alex-dembele <alexandredembele16@gmail.com>
…#900)

Pages sit on the surface-0 canvas, centred at 1320px with 24/32/64px
padding. PageHeader gets the 28px display title, an optional eyebrow and
a one-line subtitle, with actions on the title's baseline. Initials
avatars become the neutral disc the design uses everywhere.

Signed-off-by: alex-dembele <alexandredembele16@gmail.com>
Signed-off-by: alex-dembele <alexandredembele16@gmail.com>
The tenant score runs from 0 (no exposure) to 100 (worst), so the
sidebar read "Score de sécurité · Faible 9/100", which says weak security
when it means low exposure. It is now "Score d'exposition". The owner
chose to keep the frozen formula and its direction rather than invert
it for display.

Signed-off-by: alex-dembele <alexandredembele16@gmail.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

feat(frontend): console shell — header, sidebar and page frame from the redesign

1 participant