charles/claude-hooks

Fork

You've already forked claude-hooks

Code Issues 10 Pull requests Projects Releases Packages 1 Wiki Activity Actions

nav-v2: drop top header, move repo switcher + user card into side nav #1086

New issue

Closed

opened 2026-05-10 22:28:19 +00:00 by claude-desktop · 0 comments

claude-desktop commented

2026-05-10 22:28:19 +00:00

Collaborator

Copy link

User story

As an operator using the dashboard, I want the top header gone and its contents folded into the side nav (workspace switcher at top, user card + status + notifications at bottom), so that the side nav becomes the single chrome surface — like Cursor, Claude Code, Linear, Discord — and the content area reclaims ~56px of vertical space.

Background

Since nav-v2 shipped (milestone #39), the side nav already carries primary navigation. The top header in app-shell.tsx:189-226 now only hosts:

Logo + "claude-hooks" wordmark (duplicated — brand already in side nav top)
<RepoSelector />
<NotificationsBell />
<ConnPill /> (LIVE/reconnecting/down)
<AvatarMenu />

Mobile drawer (sidebar-nav.tsx) already renders user card + theme/density toggles + logout at the bottom. Desktop just needs to catch up.

Acceptance criteria

Layout

Top header (apps/web/src/components/app-shell.tsx lines 189-226) removed; content area renders flush to top of viewport.
Side nav grows to full viewport height; brand strip stays at top.
Repo switcher (<RepoSelector />) moves to a dedicated row directly below the brand strip in the side nav (workspace-pill pattern: Linear / Slack).
Side nav body keeps a flex spacer so WORK + AGENTS sections stay top-aligned and the new utility/user cluster sticks to the bottom.

Bottom cluster (above user card)

<NotificationsBell /> rendered above existing "Keyboard shortcuts" + "Collapse navigation" rows. Unread badge preserved.
Existing "Keyboard shortcuts" + "Collapse navigation" rows kept where they are.

User card

New user card at the very bottom of the side nav: avatar, login, "Operator" chip, settings gear.
LIVE/reconnect/down status surfaces as a coloured dot overlaid on the avatar (green / amber / red); <ConnPill /> removed as a standalone element. Tooltip on the dot shows the verbose state ("LIVE", "Reconnecting…", "Disconnected").
Clicking the user card opens the existing <AvatarMenu /> upward (theme switcher, settings link, Forgejo profile, docs, logout). Menu content untouched — only the anchor + open direction change.
Version footer (claude-hooks v0.0.0 · <sha>) sits below the user card; hidden in collapsed mode (existing behaviour).

Collapsed (56px) mode

Brand strip → logo glyph only.
Repo switcher → icon-only with hover tooltip showing the active repo name.
Notifications icon shows badge dot; tooltip shows unread count.
User card → avatar + status dot only; click still opens AvatarMenu (anchored to avatar).

Mobile drawer

Drawer (already bottom-aligned user card) inherits the same status-dot on the avatar; existing <ConnPill /> removed from the drawer if present.
No behavioural change to drawer toggles otherwise.

Tests

Vitest browser-mode test for the new bottom cluster: status dot reflects connection state, click on user card opens AvatarMenu, click on notifications opens panel.
Visual regression / screenshot updated in any existing app-shell test.

Out of scope

Repo switcher UX changes beyond moving it — selection behaviour, recents list, multi-repo filtering remain identical.
AvatarMenu content (theme switcher, density, etc.) — moved as-is, no copy or option changes.
Density toggle promotion — stays inside AvatarMenu.
Notifications panel internals — only the trigger moves.

References

Side-nav rework milestone: nav-v2 (#39)
Current header: apps/web/src/components/app-shell.tsx:189-226
Sidebar: apps/web/src/components/sidebar-nav.tsx, apps/web/src/components/nav-sections.tsx
Avatar menu: apps/web/src/components/avatar-menu.tsx
Existing mobile drawer pattern (user card + actions at bottom) → desktop convergence target
Inspiration: Cursor (account bottom), Claude Code (user card bottom), Linear (workspace top + user bottom), Discord (status dot on avatar)

## User story As an operator using the dashboard, I want the top header gone and its contents folded into the side nav (workspace switcher at top, user card + status + notifications at bottom), so that the side nav becomes the single chrome surface — like Cursor, Claude Code, Linear, Discord — and the content area reclaims ~56px of vertical space. ## Background Since nav-v2 shipped (milestone #39), the side nav already carries primary navigation. The top header in `app-shell.tsx:189-226` now only hosts: - Logo + "claude-hooks" wordmark (duplicated — brand already in side nav top) - `<RepoSelector />` - `<NotificationsBell />` - `<ConnPill />` (LIVE/reconnecting/down) - `<AvatarMenu />` Mobile drawer (`sidebar-nav.tsx`) already renders user card + theme/density toggles + logout at the bottom. Desktop just needs to catch up. ## Acceptance criteria ### Layout - [ ] Top header (`apps/web/src/components/app-shell.tsx` lines 189-226) removed; content area renders flush to top of viewport. - [ ] Side nav grows to full viewport height; brand strip stays at top. - [ ] Repo switcher (`<RepoSelector />`) moves to a dedicated row directly below the brand strip in the side nav (workspace-pill pattern: Linear / Slack). - [ ] Side nav body keeps a flex spacer so WORK + AGENTS sections stay top-aligned and the new utility/user cluster sticks to the bottom. ### Bottom cluster (above user card) - [ ] `<NotificationsBell />` rendered above existing "Keyboard shortcuts" + "Collapse navigation" rows. Unread badge preserved. - [ ] Existing "Keyboard shortcuts" + "Collapse navigation" rows kept where they are. ### User card - [ ] New user card at the very bottom of the side nav: avatar, login, "Operator" chip, settings gear. - [ ] LIVE/reconnect/down status surfaces as a coloured dot overlaid on the avatar (green / amber / red); `<ConnPill />` removed as a standalone element. Tooltip on the dot shows the verbose state ("LIVE", "Reconnecting…", "Disconnected"). - [ ] Clicking the user card opens the existing `<AvatarMenu />` upward (theme switcher, settings link, Forgejo profile, docs, logout). Menu content untouched — only the anchor + open direction change. - [ ] Version footer (`claude-hooks v0.0.0 · <sha>`) sits below the user card; hidden in collapsed mode (existing behaviour). ### Collapsed (56px) mode - [ ] Brand strip → logo glyph only. - [ ] Repo switcher → icon-only with hover tooltip showing the active repo name. - [ ] Notifications icon shows badge dot; tooltip shows unread count. - [ ] User card → avatar + status dot only; click still opens AvatarMenu (anchored to avatar). ### Mobile drawer - [ ] Drawer (already bottom-aligned user card) inherits the same status-dot on the avatar; existing `<ConnPill />` removed from the drawer if present. - [ ] No behavioural change to drawer toggles otherwise. ### Tests - [ ] Vitest browser-mode test for the new bottom cluster: status dot reflects connection state, click on user card opens AvatarMenu, click on notifications opens panel. - [ ] Visual regression / screenshot updated in any existing app-shell test. ## Out of scope - Repo switcher UX changes beyond moving it — selection behaviour, recents list, multi-repo filtering remain identical. - AvatarMenu content (theme switcher, density, etc.) — moved as-is, no copy or option changes. - Density toggle promotion — stays inside AvatarMenu. - Notifications panel internals — only the trigger moves. ## References - Side-nav rework milestone: nav-v2 (#39) - Current header: `apps/web/src/components/app-shell.tsx:189-226` - Sidebar: `apps/web/src/components/sidebar-nav.tsx`, `apps/web/src/components/nav-sections.tsx` - Avatar menu: `apps/web/src/components/avatar-menu.tsx` - Existing mobile drawer pattern (user card + actions at bottom) → desktop convergence target - Inspiration: Cursor (account bottom), Claude Code (user card bottom), Linear (workspace top + user bottom), Discord (status dot on avatar)

claude-desktop added the

area:dashboard

type:user-story

labels

2026-05-10 22:28:24 +00:00

claude-desktop added this to the nav-v2 milestone

2026-05-10 22:28:28 +00:00

dev was assigned by architect

2026-05-10 22:28:50 +00:00

dev was unassigned by claude-desktop

2026-05-10 22:33:29 +00:00

dev was assigned by claude-desktop

2026-05-10 22:33:32 +00:00

dev was unassigned by claude-desktop

2026-05-10 22:34:05 +00:00

dev was assigned by claude-desktop

2026-05-10 22:34:07 +00:00

claude-desktop referenced this issue

2026-05-10 22:36:31 +00:00

flows-yaml: runtime global-mode flip leaves dispatcher unconstructed until restart #1087

dev referenced this issue from a commit

2026-05-10 22:50:11 +00:00

feat(nav-v2): drop top header, fold repo switcher + user card into side nav (#1086)

dev referenced this issue from a pull request that will close it,

2026-05-10 22:50:24 +00:00

feat(nav-v2): drop top header, fold repo switcher + user card into side nav #1090

dev referenced this issue from a commit

2026-05-11 03:05:55 +00:00

feat(nav-v2): drop top header, fold repo switcher + user card into side nav (#1086)

dev was unassigned by claude-desktop

2026-05-11 08:30:37 +00:00

dev was assigned by claude-desktop

2026-05-11 08:30:44 +00:00

dev referenced this issue from a commit

2026-05-11 08:33:19 +00:00

feat(nav-v2): drop top header, fold repo switcher + user card into side nav (#1086)

dev was unassigned by claude-desktop

2026-05-11 09:52:12 +00:00

dev was assigned by claude-desktop

2026-05-11 09:52:17 +00:00

dev referenced this issue from a commit

2026-05-11 09:59:14 +00:00

fix(nav-v2): add notifications bell panel test + i18n aria-label

dev was unassigned by claude-desktop

2026-05-11 10:05:28 +00:00

dev was assigned by claude-desktop

2026-05-11 10:05:30 +00:00

charles referenced this issue from a commit

2026-05-11 10:08:31 +00:00

chore(image): bake Playwright Chromium + OS deps into agent image

charles referenced this issue from a commit

2026-05-11 10:15:06 +00:00

feat(nav-v2): drop top header, fold repo switcher + user card into side nav (#1086)

charles referenced this issue from a commit

2026-05-11 10:15:06 +00:00

fix(nav-v2): add notifications bell panel test + i18n aria-label

dev was unassigned by claude-desktop

2026-05-11 10:20:28 +00:00

dev was assigned by claude-desktop

2026-05-11 10:20:30 +00:00

charles closed this issue

2026-05-11 13:37:50 +00:00

charles referenced this issue from a commit

2026-05-11 13:37:50 +00:00

feat(nav-v2): drop top header, fold repo switcher + user card into side nav (#1090)

No Branch/Tag specified

main

chore/sync-pre-push-from-forge-base

fix/flows-yaml-dispatch-identity

feat/board-tap-to-assign

dev/1107

code-lead/1106

code-lead/1108

dev/1104

code-lead/1103

code-lead/1080

dev/1087

feat/flows-yaml-ci-events

chore/board-drop-stalled-and-density-controls

fix/flows-yaml-routes-always-register

flows-yaml/api-defaults

dev/1023

fix/event-log-history-bleed

fix/janitor-fix-ci-logs-and-cap

dev/1022

fix/board-card-provider

code-lead/1036

dev/1025

code-lead/1020

dev/1017

code-lead/1026

feat/web-shortcut-registry-1018

dev/1015

code-lead/1009

code-lead/1008

dev/975

dev/969

dev/973

dev/967

code-lead/968

code-lead/953

dev/970

dev/976

code-lead/966

code-lead/956

code-lead/951

dev/962

dev/963

dev/977

dev/955

dev/983

dev/961

dev/974

code-lead/950

code-lead/939

dev/941

dev/940

dev/937

dev/938

dev/936

dev/935

feat/web-i18n-fr-locale

feat/spec-editor-ui-polish

chore/drop-legacy-compat

fix/skills-drop-preview-pane

fix/882-skills-safety-rail

dev/911

dev/909

dev/923

dev/917

dev/915

feat/879-sr11-m2-drop-legacy-skill

code-lead/873

dev/881

code-lead/869

dev/867

code-lead/845

code-lead/843

code-lead/844

dev/837

dev/861

dev/849

code-lead/837

code-lead/842

fix/dedup-rebase-inflight

dev/838

code-lead/847

dev/833

code-lead/848

pr/838

code-lead/841

feat/settings-save-bar/836

code-lead/840

dev/846

code-lead/839

dev/832

fix/board-sse-stale-cache

dev/834

dev/835

feat/settings-breadcrumbs

feat/forge-oauth-credentials

refactor/service-config-consolidation

feat/agent-tokens-to-secrets

feat/gitlab-oauth-to-db

feat/authelia-rip-and-voice-fixes

fix/rebase-storm-and-dead-letter

code-lead/797

code-lead/796

dev/811

code-lead/798

dev/810

code-lead/795

dev/808

code-lead/794

dev/805

dev/802

dev/803

feat/avatar-menu-settings-entry

feat/per-agent-token-tracking

dev/793

dev/747

dev/752

code-lead/790

code-lead/759

dev/756

dev/760

dev/741

dev/767

dev/740

dev/709

dev/644

dev/637

boss/614

dev/600

dev/611

dev/585

fix/login-bonus-fixes

boss/544

dev/542

refactor/api-prefix-and-session-gate

dev/489

boss/531

boss/518

dev/499

boss/516

dev/530

dev/517

dev/519

dev/515

dev/522

dev/503

dev/471

boss/329

dev/417

dev/418

dev/402

boss/327

dev/334

dev/332

boss/326

boss/325

dev/331

boss/324

boss/323

boss/322

dev/294

test/s11-task-analytics

dev/262

boss/270

dev/268

foreman/ui-consolidation-spec

dev/234

boss/196

boss/176

boss/164

fix/124-session-persist-bind

boss/52

dev/87

boss/73

dev/77

dev/81

dev/82

boss/79

dev/42

dev/35

boss/7

No results found.

Labels

Clear labels

area:agents

Agent types, pool scheduling, per-instance config

area:dashboard

Dashboard UI and observability surfaces

area:database

DB layer — schema, migrations, ORM, raw SQL

area:design

UI/UX mockup work — routes to designer agent

area:design-review

Design review dispatch — routes to design-reviewer agent

area:flows

Flow runner — YAML loader, executor, op registry, expression eval

area:infra

Deployment, isolation, containers, systemd units

area:meta

Tracking, scaffolding, project setup

area:security

Security — routes to reviewer-security (opus)

area:sessions

Session-id store, Claude SDK resume logic

area:webhook

Forgejo webhook routing and handlers

area:workdir

Clone cache, worktrees, git identity

security

Security-sensitive issue

Tracking or decisions, not implementation work

No labels

Milestone

Clear milestone

No items

No milestone

nav-v2

Projects

Clear projects

No items

No project

Assignees

Clear assignees

No assignees

dev

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

charles/claude-hooks#1086

Reference in a new issue

Repository

charles/claude-hooks

Title

Body

No description provided.

Delete branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?

Rows
Columns