charles/claude-hooks
1
0
Fork 0
Code Issues 10 Pull requests Projects Releases Packages 1 Wiki Activity Actions

feat(nav): topbar utility cluster — avatar menu, notifications bell, ⌘K stub, repo + conn polish #581

New issue
Closed
opened 2026-04-30 18:51:00 +00:00 by claude-desktop · 1 comment
claude-desktop commented 2026-04-30 18:51:00 +00:00
Collaborator
Copy link

User story

As an operator, I want a tidy right-hand topbar cluster: a search button to foreshadow ⌘K, a notifications bell that surfaces stalled tasks and dead-letters, a recognisable repo picker, a compact connection pill, and an avatar dropdown that owns the "user, theme, logout" trio.

Acceptance criteria

⌘K trigger button

  • New button in the topbar utility cluster. Renders the kbd shortcut hint (⌘K on Mac, Ctrl K elsewhere) inside a rounded-compact border border-border chip.
  • Click is a no-op for now (placeholder until #570 ships the palette). Toast "Command palette coming soon (#570)" so operators don't think it's broken.

Notifications bell

  • New Bell icon button next to the ⌘K chip. Subscribes to the existing /events feed and counts envelopes whose type matches flow:dead-letter, pipeline_stage{state:"failure"}, or any error-shaped payload over the last 24 h.
  • When count > 0, render an absolute-positioned red badge with the count (max 99+).
  • Click opens a right-side <Drawer title="Notifications"> with a chronological list. Each row: source, timestamp, summary, link to the offending repo / issue / PR.
  • Dismiss-all button at the top clears the badge counter (client-side localStorage-stamped seen-at).

RepoSelector cosmetic refresh

  • Replace the ⊕ glyph with a lucide FolderGit2 icon.
  • When a single repo is active, render the repo name (e.g. claude-hooks) instead of All. When multiple repos are selected, render <icon> N repos.

Connection pill compact mode

  • When connState === "live" and the viewport is < lg, render the pill as a 6 px green dot only (no text). On lg+, keep the current label.
  • connecting / disconnected states keep their current label-bearing pill (operator needs the context).

Avatar dropdown

  • Replace the inline charles | Logout | ThemeToggle cluster with a single avatar button.
  • Avatar uses the operator's Forgejo avatar URL when available (resolve via whoami + Forgejo /users/<login> lookup; fallback to a deterministic initials chip — CH for charles).
  • Click opens a Base UI <DropdownMenu> anchored bottom-right of the avatar:
    • User card: avatar + login + a small "Operator" chip.
    • Theme switcher (radio: Auto / Dark / Light).
    • External links: Open Forgejo profile, Open docs.
    • Footer: red Logout action (POSTs to /logout).
  • Drop the existing inline ThemeToggle, the <form action="/logout">, and the username <span>.

Out of scope

  • Persisting "seen" state across browsers.
  • Notification grouping / filtering (raw chronological list is fine).
  • Avatar uploads.

References

  • Source: apps/web/src/components/app-shell.tsx, repo-selector.tsx, conn-pill.tsx, theme-toggle.tsx.
  • Spec: specs/topbar-nav-overhaul.md § P2.
## User story As an operator, I want a tidy right-hand topbar cluster: a search button to foreshadow `⌘K`, a notifications bell that surfaces stalled tasks and dead-letters, a recognisable repo picker, a compact connection pill, and an avatar dropdown that owns the "user, theme, logout" trio. ## Acceptance criteria ### `⌘K` trigger button - [ ] New button in the topbar utility cluster. Renders the kbd shortcut hint (`⌘K` on Mac, `Ctrl K` elsewhere) inside a `rounded-compact border border-border` chip. - [ ] Click is a no-op for now (placeholder until #570 ships the palette). Toast `"Command palette coming soon (#570)"` so operators don't think it's broken. ### Notifications bell - [ ] New `Bell` icon button next to the `⌘K` chip. Subscribes to the existing `/events` feed and counts envelopes whose `type` matches `flow:dead-letter`, `pipeline_stage{state:"failure"}`, or any `error`-shaped payload over the last 24 h. - [ ] When count > 0, render an absolute-positioned red badge with the count (max `99+`). - [ ] Click opens a right-side `<Drawer title="Notifications">` with a chronological list. Each row: source, timestamp, summary, link to the offending repo / issue / PR. - [ ] Dismiss-all button at the top clears the badge counter (client-side `localStorage`-stamped seen-at). ### RepoSelector cosmetic refresh - [ ] Replace the `⊕` glyph with a lucide `FolderGit2` icon. - [ ] When a single repo is active, render the repo name (e.g. `claude-hooks`) instead of `All`. When multiple repos are selected, render `<icon> N repos`. ### Connection pill compact mode - [ ] When `connState === "live"` and the viewport is < `lg`, render the pill as a 6 px green dot only (no text). On `lg`+, keep the current label. - [ ] `connecting` / `disconnected` states keep their current label-bearing pill (operator needs the context). ### Avatar dropdown - [ ] Replace the inline `charles | Logout | ThemeToggle` cluster with a single avatar button. - [ ] Avatar uses the operator's Forgejo avatar URL when available (resolve via `whoami` + Forgejo `/users/<login>` lookup; fallback to a deterministic initials chip — `CH` for `charles`). - [ ] Click opens a Base UI `<DropdownMenu>` anchored bottom-right of the avatar: - User card: avatar + login + a small "Operator" chip. - Theme switcher (radio: Auto / Dark / Light). - External links: `Open Forgejo profile`, `Open docs`. - Footer: red `Logout` action (POSTs to `/logout`). - [ ] Drop the existing inline `ThemeToggle`, the `<form action="/logout">`, and the username `<span>`. ## Out of scope - Persisting "seen" state across browsers. - Notification grouping / filtering (raw chronological list is fine). - Avatar uploads. ## References - Source: `apps/web/src/components/app-shell.tsx`, `repo-selector.tsx`, `conn-pill.tsx`, `theme-toggle.tsx`. - Spec: `specs/topbar-nav-overhaul.md` § P2.
code-lead commented 2026-04-30 20:40:18 +00:00
Collaborator
Copy link

🤖 Auto-assigned to boss (heuristic: area:dashboard + body 2877 bytes (> 2 KB) — boss (heavy)). Reply /unassign to reroute.

🤖 Auto-assigned to **boss** (heuristic: area:dashboard + body 2877 bytes (> 2 KB) — boss (heavy)). Reply `/unassign` to reroute.
Sign in to join this conversation.
No Branch/Tag specified
Branches Tags
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

  
type:bug
Bug

  
type:chore
Chore

  
type:meta
Tracking or decisions, not implementation work

  
type:user-story
User story

No labels
area:agents
area:dashboard
area:database
area:design
area:design-review
area:flows
area:infra
area:meta
area:security
area:sessions
area:webhook
area:workdir
security
type:bug
type:chore
type:meta
type:user-story
Milestone
Clear milestone
No items
No milestone
Projects
Clear projects
No items
No project
Assignees
Clear assignees
No assignees
code-lead
2 participants
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Blocks
#582 feat(nav): drawer content polish — user card, icon parity, secondary group, version footer
charles/claude-hooks
Depends on
#570 feat(workspace): ⌘K command palette + ? keyboard help overlay
charles/claude-hooks
#580 feat(nav): primary nav visual rework — icons, sentence-case, bottom-border active state
charles/claude-hooks
Reference
charles/claude-hooks#581
No description provided.