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

SAM-2: Add Settings entry to the avatar dropdown #801

New issue
Closed
opened 2026-05-03 19:44:56 +00:00 by code-lead · 0 comments
code-lead commented 2026-05-03 19:44:56 +00:00
Collaborator
Copy link

As an operator, I want a Settings entry in the avatar dropdown, so that the primary entry point to repos, labels, secrets, appearance, and agent-types lives next to my identity card and theme controls — the same place every other modern product puts it.

Acceptance criteria

Menu placement

  • In apps/web/src/components/avatar-menu.tsx, between the <ThemeSection /> block and the existing <Menu.Separator /> that precedes the external links, insert a new section separator and a Settings menu item.
  • The item is a <Menu.Item render={<Link to="/settings">…}/> using @tanstack/react-router's Link (matching the existing to="/settings/appearance" link inside ThemeSection) — not an <a href>, so client-side routing and the active-route machinery keep working.
  • The row uses the lucide Settings icon with size={14} and aria-hidden="true", matching MenuLink's visual rhythm (icon · label · trailing space).
  • Row className mirrors MenuLink: flex items-center gap-2 px-3 py-2 text-small text-text-primary transition-colors hover:bg-surface-high focus-visible:bg-surface-high focus-visible:outline-none.
  • data-testid="avatar-menu-settings".
  • Clicking the row navigates to /settings and closes the popup (Base UI's Menu.Item handles popup-close on activation by default — verify the wrapped <Link> doesn't preventDefault).

Ordering

  • Final popup section order, top → bottom:
    1. User card
    2. Theme section
    3. Settings (new)
    4. External links — Forgejo profile, Open docs
    5. Logout (when authEnabled)
  • A <Menu.Separator /> lives both above and below the new row so it visually anchors as its own group rather than dangling under the theme picker.

Tests

  • Vitest covers avatar-menu.tsx: opening the menu surfaces a getByTestId('avatar-menu-settings') element with role menuitem and an accessible name "Settings".
  • Activating the row via Enter (keyboard) and via click both navigate to /settings; assert through a memory-router test.
  • Playwright happy-path: from the desktop shell, click the avatar, click Settings, land on /settings/ (the index route).

Out of scope

  • Re-ordering the existing theme / profile / docs / logout entries.
  • Adding sub-items for /settings/repos, /settings/secrets, etc. — the dropdown links to the index, the existing in-page tab strip handles further navigation.
  • Replacing the Customize… link inside ThemeSection (it points to /settings/appearance and stays as-is).

References

  • Spec: specs/settings-into-avatar-menu.md § "Story SAM-2"
  • apps/web/src/components/avatar-menu.tsx — popup composition (lines 161–242)
  • apps/web/CLAUDE.md — foundation primitives, token discipline, a11y baseline

Dependencies

None. Per the spec's suggested implementation order, SAM-2 lands first so the entry point exists before SAM-1 drops it from the desktop nav.

As an operator, I want a Settings entry in the avatar dropdown, so that the primary entry point to repos, labels, secrets, appearance, and agent-types lives next to my identity card and theme controls — the same place every other modern product puts it. ## Acceptance criteria ### Menu placement - [ ] In `apps/web/src/components/avatar-menu.tsx`, between the `<ThemeSection />` block and the existing `<Menu.Separator />` that precedes the external links, insert a new section separator and a **Settings** menu item. - [ ] The item is a `<Menu.Item render={<Link to="/settings">…}/>` using `@tanstack/react-router`'s `Link` (matching the existing `to="/settings/appearance"` link inside `ThemeSection`) — **not** an `<a href>`, so client-side routing and the active-route machinery keep working. - [ ] The row uses the lucide `Settings` icon with `size={14}` and `aria-hidden="true"`, matching `MenuLink`'s visual rhythm (icon · label · trailing space). - [ ] Row className mirrors `MenuLink`: `flex items-center gap-2 px-3 py-2 text-small text-text-primary transition-colors hover:bg-surface-high focus-visible:bg-surface-high focus-visible:outline-none`. - [ ] `data-testid="avatar-menu-settings"`. - [ ] Clicking the row navigates to `/settings` and closes the popup (Base UI's `Menu.Item` handles popup-close on activation by default — verify the wrapped `<Link>` doesn't preventDefault). ### Ordering - [ ] Final popup section order, top → bottom: 1. User card 2. Theme section 3. **Settings** (new) 4. External links — Forgejo profile, Open docs 5. Logout (when `authEnabled`) - [ ] A `<Menu.Separator />` lives both above and below the new row so it visually anchors as its own group rather than dangling under the theme picker. ### Tests - [ ] Vitest covers `avatar-menu.tsx`: opening the menu surfaces a `getByTestId('avatar-menu-settings')` element with role `menuitem` and an accessible name "Settings". - [ ] Activating the row via Enter (keyboard) and via click both navigate to `/settings`; assert through a memory-router test. - [ ] Playwright happy-path: from the desktop shell, click the avatar, click Settings, land on `/settings/` (the index route). ## Out of scope - Re-ordering the existing theme / profile / docs / logout entries. - Adding sub-items for `/settings/repos`, `/settings/secrets`, etc. — the dropdown links to the index, the existing in-page tab strip handles further navigation. - Replacing the `Customize…` link inside `ThemeSection` (it points to `/settings/appearance` and stays as-is). ## References - Spec: `specs/settings-into-avatar-menu.md` § "Story SAM-2" - `apps/web/src/components/avatar-menu.tsx` — popup composition (lines 161–242) - `apps/web/CLAUDE.md` — foundation primitives, token discipline, a11y baseline ## Dependencies None. Per the spec's suggested implementation order, SAM-2 lands **first** so the entry point exists before SAM-1 drops it from the desktop nav.
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
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.

Blocks
#802 SAM-1: Drop Settings from the desktop primary nav
charles/claude-hooks
Reference
charles/claude-hooks#801
No description provided.