Skip to content

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

Closed

Description

@alex-dembele

Problem

The header, sidebar and page frame are the first thing every user sees and every other screen of the redesign sits inside them. The owner asked for a blend of the old and new headers.

Design: https://claude.ai/artifact/HLqrbeYqvv4a6RVnBz9Vei (screen "shell"). Parent: #899. The rules in the epic apply.

Acceptance criteria

  1. The sidebar matches the design: org switcher card, full-width "Nouveau risque" button, pinned "Tableau de bord", grouped sections with uppercase labels, live counters, security score footer with bar, user card with collapse toggle.
  2. The header keeps the design's breadcrumb (group › page), the search field with ⌘K hint, theme toggle, notifications with unread count and help, and adds our language switch and realtime status in the same spacing.
  3. Page frame: title block (eyebrow, H1 in the display font, one-line subtitle) and right-aligned actions sit on the design's grid and paddings.
  4. The notifications panel and the ⌘K palette follow the design's layout.
  5. Typography uses the design's three families (Inter, DM Sans for display, JetBrains Mono for figures and IDs) through the existing tokens.
  6. Default theme follows the OS; an explicit choice is remembered.

Definition of done

  • The screen matches the design at 1440×900 in dark and light, checked side by side in a real browser; the comparison and any deliberate difference are written on this issue.
  • Loading skeleton, error with retry, and empty state exist for every block.
  • FR and EN strings, no hard-coded copy.
  • npx tsc -b --noEmit, npx vitest run on the touched features, and npx eslint on the touched files pass.
  • Backend changes, if any, come with TestXxx_Success, TestXxx_NotFound, TestXxx_Unauthorized, filter by tenant_id, and go test ./... passes.
  • PR opened with Closes #<this issue>; parent epic epic(frontend): rebuild every console screen on the October 2026 redesign #899.

Activity

  1. added
    type:featureNew user-facing capability
    status:readyMeets the ready definition
    tier:4-uxUX: polish on top of a working engine
    and removed
    status:readyMeets the ready definition
    on Oct 8, 2026
  2. alex-dembele commented on Oct 8, 2026

    @alex-dembele
    MemberAuthor

    shell redesign — 2026-10-08

    Done — PR #925 on feat/900-console-shell. Sidebar (components/layout/Sidebar.tsx, useNavCounts.ts, OrgSwitcher.tsx, shared/navModel.ts), header and notifications (AppHeader.tsx), breadcrumb (shared/Breadcrumbs.tsx), palette (CommandPalette.tsx), page frame (shared/ui.tsx PageFrame/PageHeader), neutral avatars (shared/UserAvatar.tsx), canvas on surface-0 (App.tsx). Backend kev_open in /vulnerabilities/stats (domain/vulnerability.go, gorm_vulnerability_repository.go, test gorm_vulnerability_stats_test.go). Fixed: Cmd+K dead until first open; mobile drawer under the header.
    Verified — npx tsc -b --noEmit clean · npx vitest run 1034/1034 · lint ceiling 97/99 · go test repository, dashboard, vulnerability, handler: ok · live side-by-side with the design at 1440×900 dark and light, 414px, 1440×600 · axe on header and sidebar: 0 serious/critical.
    Criteria — 1 ✅ · 2 ✅ · 3 ✅ (PageHeader/PageFrame; each page adopts it in its own issue) · 4 ✅ · 5 ✅ · 6 ✅ (default theme already followed the OS; unchanged)
    Next — review and merge #925, then #901 dashboard builds on PageHeader's eyebrow/subtitle.
    Blocked on — nothing. Density moves to Settings in #924.

  3. added 2 commits that reference this issue on Oct 8, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions