charles/claude-hooks

Fork

You've already forked claude-hooks

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

feat(settings): inline settings tree in sidenav + flyout on collapsed rail; drop settings submenu column #1104

New issue

Closed

opened 2026-05-11 14:34:49 +00:00 by claude-desktop · 0 comments

claude-desktop commented

2026-05-11 14:34:49 +00:00

Collaborator

Copy link

User story

As an operator, I want the Settings section to surface its inner tree inside the main sidenav — auto-expanded inline on /settings/* when the sidenav is expanded, and as a flyout when the sidenav is collapsed — so that the dashboard uses one nav column instead of two stacked ones, and section nav is discoverable in both rail modes.

Background

After nav-v2 (#1090) shipped, visiting /settings still renders a dedicated left column (SettingsGroupedNav) for section nav. Result: two stacked left columns (main sidenav + settings submenu), narrow content area, redundant hierarchy. Decision (operator review 2026-05-11): drop the settings page submenu, move section nav into the main sidenav with two behaviours — inline tree when expanded, flyout when collapsed.

Behaviour summary

Expanded sidenav + route matches /settings/*:

Settings footer item expands inline showing the full grouped tree.
Tree mirrors current NAV_GROUPS: GENERAL → General / Appearance / Voice input; AGENTS → Agent types / Agent config; FORGES → Service config / Repos / Labels; DATA → Secrets.
Active leaf gets highlighted state.
Group accordions default to expanded; toggle on click; not persisted in v1.

Expanded sidenav + non-settings route:

Settings footer item renders as plain link with ⚙ icon (no tree).

Collapsed sidenav (rail mode, any route):

Settings icon opens a Base UI Menu flyout anchored to the icon.
Flyout contains the same grouped tree.
Leaf click → navigate + close flyout.

Settings page (/settings, /settings/*):

Drop SettingsGroupedNav left column.
Content becomes full-width within the existing AppShell slot.
Add thin breadcrumb header: Settings › <Group> › <Leaf>.
Existing in-page anchors (Quick Links, etc.) remain.

Acceptance criteria

Shared data

NAV_GROUPS extracted from apps/web/src/routes/settings.tsx (lines 45–73) into a new module apps/web/src/lib/settings-nav.ts.
NavGroup + NavItem types co-located in the shared module.
All current consumers (SettingsGroupedNav, SettingsSideNav in apps/web/src/components/settings-side-nav.tsx, any sub-route side nav) import from the shared module — no duplicated lists.

Sidenav inline tree (expanded mode)

apps/web/src/components/sidebar-nav.tsx renders Settings as an expandable section when route matches /settings* and sidenav is not collapsed.
Tree renders all groups + leaves from shared NAV_GROUPS.
Active leaf highlighted with the same active styles as other nav items.
Non-settings routes render Settings as a plain link (no tree).
Group accordions toggle on click; default = all expanded; chevron indicates state.

Sidenav flyout (collapsed mode)

When data-nav="collapsed" is set on <html>, clicking the Settings rail icon opens a Base UI Menu flyout.
Flyout uses existing primitives from @base-ui-components/react/menu — no new dependency.
Flyout positioned to the right of the rail icon, dismisses on outside click + Escape.
Tree content identical to expanded mode.
Leaf click invokes navigate(to) then closes the flyout.
Tooltip on the rail Settings icon follows the existing rail-icon tooltip pattern; does not double-fire when flyout is open.

Settings page

apps/web/src/routes/settings.tsx no longer renders SettingsGroupedNav.
Content laid out full-width within AppShell content slot.
Breadcrumb header added: Settings › <Group> › <Leaf> (active group + leaf derived from current sub-route; /settings root shows Settings › General).
Breadcrumb segments are links (group label → first leaf of group; root → /settings).
SettingsGroupedNav component deleted if no remaining consumers.
Sub-routes (e.g. /settings/service.tsx) updated: drop any in-page SettingsSideNav that now duplicates the sidenav tree, OR keep it only where the sub-route has its own deeper sub-tree not covered by NAV_GROUPS — document the decision in the PR description.

Mobile / small viewport

Existing mobile drawer behaviour preserved.
When the mobile drawer is open on /settings/*, tree renders inline (same as expanded mode).

Tests

Vitest browser-mode test for sidebar-nav: route /settings/appearance + expanded → tree renders + Appearance leaf is active.
Vitest browser-mode test for sidebar-nav: route /board + expanded → no settings tree visible.
Vitest browser-mode test for sidebar-nav: collapsed + click Settings icon → flyout appears with leaves; leaf click navigates + closes flyout.
Vitest browser-mode test for routes/settings: SettingsGroupedNav not present in DOM; breadcrumb shows correct trail for sub-routes.

Manual QA

Toggle collapse/expand at runtime — no flicker, no layout shift.
Active highlight stays in sync when navigating via leaf click vs direct URL change.
Resize across the md breakpoint while on /settings/* — drawer/inline tree handover is clean.
just qa passes (typecheck + lint + format).

Out of scope

Search palette over settings sections — planned in milestone #36 "Settings unification".
Persisting per-group accordion expand state — default-expanded is fine for v1.
Reusing the flyout primitive for Agents/Forges trees — deferred; can follow if the pattern proves useful.
Sticky save bar / dirty-state handling — milestone #36 scope.
Renaming or reorganising existing NAV_GROUPS content — keep the current groups; structural changes belong to #36.

References

Nav-v2 spec: docs/specs/nav-consolidation.md
Settings unification milestone: #36
Nav-v2 shipping PR: #1090
Current sidebar component: apps/web/src/components/sidebar-nav.tsx (lines 30–304; collapsed state via useNavCollapsed() at line 39; data-nav attribute on <html>)
Current settings root: apps/web/src/routes/settings.tsx (NAV_GROUPS lines 45–73, SettingsGroupedNav lines 93–187)
Settings side-nav helper: apps/web/src/components/settings-side-nav.tsx
Base UI Menu reference: apps/web/src/components/avatar-menu.tsx
Tooltip wrapper: apps/web/src/components/tooltip.tsx
Decision notes (2026-05-11): operator picked B1 (flyout when collapsed) + Option 1 (inline auto-expand on /settings/* when expanded) + breadcrumb-only header on the settings page.

## User story As an operator, I want the Settings section to surface its inner tree inside the main sidenav — auto-expanded inline on `/settings/*` when the sidenav is expanded, and as a flyout when the sidenav is collapsed — so that the dashboard uses one nav column instead of two stacked ones, and section nav is discoverable in both rail modes. ## Background After nav-v2 (#1090) shipped, visiting `/settings` still renders a dedicated left column (`SettingsGroupedNav`) for section nav. Result: two stacked left columns (main sidenav + settings submenu), narrow content area, redundant hierarchy. Decision (operator review 2026-05-11): drop the settings page submenu, move section nav into the main sidenav with two behaviours — inline tree when expanded, flyout when collapsed. ## Behaviour summary **Expanded sidenav + route matches `/settings/*`:** - Settings footer item expands inline showing the full grouped tree. - Tree mirrors current `NAV_GROUPS`: GENERAL → General / Appearance / Voice input; AGENTS → Agent types / Agent config; FORGES → Service config / Repos / Labels; DATA → Secrets. - Active leaf gets highlighted state. - Group accordions default to expanded; toggle on click; not persisted in v1. **Expanded sidenav + non-settings route:** - Settings footer item renders as plain link with `⚙` icon (no tree). **Collapsed sidenav (rail mode, any route):** - Settings icon opens a Base UI Menu flyout anchored to the icon. - Flyout contains the same grouped tree. - Leaf click → navigate + close flyout. **Settings page (`/settings`, `/settings/*`):** - Drop `SettingsGroupedNav` left column. - Content becomes full-width within the existing AppShell slot. - Add thin breadcrumb header: `Settings › <Group> › <Leaf>`. - Existing in-page anchors (Quick Links, etc.) remain. ## Acceptance criteria ### Shared data - [ ] `NAV_GROUPS` extracted from `apps/web/src/routes/settings.tsx` (lines 45–73) into a new module `apps/web/src/lib/settings-nav.ts`. - [ ] `NavGroup` + `NavItem` types co-located in the shared module. - [ ] All current consumers (`SettingsGroupedNav`, `SettingsSideNav` in `apps/web/src/components/settings-side-nav.tsx`, any sub-route side nav) import from the shared module — no duplicated lists. ### Sidenav inline tree (expanded mode) - [ ] `apps/web/src/components/sidebar-nav.tsx` renders Settings as an expandable section when route matches `/settings*` and sidenav is not collapsed. - [ ] Tree renders all groups + leaves from shared `NAV_GROUPS`. - [ ] Active leaf highlighted with the same active styles as other nav items. - [ ] Non-settings routes render Settings as a plain link (no tree). - [ ] Group accordions toggle on click; default = all expanded; chevron indicates state. ### Sidenav flyout (collapsed mode) - [ ] When `data-nav="collapsed"` is set on `<html>`, clicking the Settings rail icon opens a Base UI Menu flyout. - [ ] Flyout uses existing primitives from `@base-ui-components/react/menu` — no new dependency. - [ ] Flyout positioned to the right of the rail icon, dismisses on outside click + Escape. - [ ] Tree content identical to expanded mode. - [ ] Leaf click invokes `navigate(to)` then closes the flyout. - [ ] Tooltip on the rail Settings icon follows the existing rail-icon tooltip pattern; does not double-fire when flyout is open. ### Settings page - [ ] `apps/web/src/routes/settings.tsx` no longer renders `SettingsGroupedNav`. - [ ] Content laid out full-width within AppShell content slot. - [ ] Breadcrumb header added: `Settings › <Group> › <Leaf>` (active group + leaf derived from current sub-route; `/settings` root shows `Settings › General`). - [ ] Breadcrumb segments are links (group label → first leaf of group; root → `/settings`). - [ ] `SettingsGroupedNav` component deleted if no remaining consumers. - [ ] Sub-routes (e.g. `/settings/service.tsx`) updated: drop any in-page `SettingsSideNav` that now duplicates the sidenav tree, OR keep it only where the sub-route has its own deeper sub-tree not covered by `NAV_GROUPS` — document the decision in the PR description. ### Mobile / small viewport - [ ] Existing mobile drawer behaviour preserved. - [ ] When the mobile drawer is open on `/settings/*`, tree renders inline (same as expanded mode). ### Tests - [ ] Vitest browser-mode test for `sidebar-nav`: route `/settings/appearance` + expanded → tree renders + Appearance leaf is active. - [ ] Vitest browser-mode test for `sidebar-nav`: route `/board` + expanded → no settings tree visible. - [ ] Vitest browser-mode test for `sidebar-nav`: collapsed + click Settings icon → flyout appears with leaves; leaf click navigates + closes flyout. - [ ] Vitest browser-mode test for `routes/settings`: `SettingsGroupedNav` not present in DOM; breadcrumb shows correct trail for sub-routes. ### Manual QA - [ ] Toggle collapse/expand at runtime — no flicker, no layout shift. - [ ] Active highlight stays in sync when navigating via leaf click vs direct URL change. - [ ] Resize across the `md` breakpoint while on `/settings/*` — drawer/inline tree handover is clean. - [ ] `just qa` passes (typecheck + lint + format). ## Out of scope - Search palette over settings sections — planned in milestone #36 "Settings unification". - Persisting per-group accordion expand state — default-expanded is fine for v1. - Reusing the flyout primitive for Agents/Forges trees — deferred; can follow if the pattern proves useful. - Sticky save bar / dirty-state handling — milestone #36 scope. - Renaming or reorganising existing `NAV_GROUPS` content — keep the current groups; structural changes belong to #36. ## References - Nav-v2 spec: `docs/specs/nav-consolidation.md` - Settings unification milestone: #36 - Nav-v2 shipping PR: #1090 - Current sidebar component: `apps/web/src/components/sidebar-nav.tsx` (lines 30–304; collapsed state via `useNavCollapsed()` at line 39; `data-nav` attribute on `<html>`) - Current settings root: `apps/web/src/routes/settings.tsx` (`NAV_GROUPS` lines 45–73, `SettingsGroupedNav` lines 93–187) - Settings side-nav helper: `apps/web/src/components/settings-side-nav.tsx` - Base UI Menu reference: `apps/web/src/components/avatar-menu.tsx` - Tooltip wrapper: `apps/web/src/components/tooltip.tsx` - Decision notes (2026-05-11): operator picked **B1** (flyout when collapsed) + **Option 1** (inline auto-expand on `/settings/*` when expanded) + breadcrumb-only header on the settings page.

claude-desktop added the

area:dashboard

type:user-story

labels

2026-05-11 14:34:56 +00:00

claude-desktop added this to the nav-v2 milestone

2026-05-11 14:35:01 +00:00

dev was assigned by architect

2026-05-11 14:37:20 +00:00

dev was unassigned by claude-desktop

2026-05-11 15:34:32 +00:00

dev was assigned by claude-desktop

2026-05-11 15:34:47 +00:00

dev was unassigned by claude-desktop

2026-05-11 16:33:00 +00:00

dev was assigned by claude-desktop

2026-05-11 16:33:04 +00:00

claude-desktop referenced this issue

2026-05-11 16:33:46 +00:00

fix(agents): unsafe cursor session resume after task SIGKILL — poisons next dispatch with stale state #1106

claude-desktop referenced this issue

2026-05-11 16:34:00 +00:00

fix(tasks): persist task_history row at task START, not only at finish — restart-kills leave no audit trail #1107

dev referenced this issue from a commit

2026-05-11 16:35:40 +00:00

feat(settings): inline settings tree in sidenav + flyout on collapsed rail (#1104)

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

2026-05-11 16:35:53 +00:00

feat(settings): inline settings tree in sidenav + flyout on collapsed rail #1109

dev referenced this issue from a commit

2026-05-11 16:57:19 +00:00

fix(settings): address reviewer feedback on #1104

dev referenced this issue from a commit

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

fix(ci): exempt new sidenav/breadcrumb testids from settings-manifest drift lint

charles referenced this issue from a commit

2026-05-11 18:08:51 +00:00

feat(settings): inline settings tree in sidenav + flyout on collapsed rail (#1104)

charles referenced this issue from a commit

2026-05-11 18:08:51 +00:00

fix(settings): address reviewer feedback on #1104

charles referenced this issue from a commit

2026-05-11 18:08:51 +00:00

fix(ci): exempt new sidenav/breadcrumb testids from settings-manifest drift lint

charles referenced this issue from a commit

2026-05-11 18:08:51 +00:00

fix(settings): address review feedback on #1104 — second pass

reviewer referenced this issue from a commit

2026-05-11 18:19:44 +00:00

feat(settings): inline settings tree in sidenav + flyout on collapsed rail (#1109)

reviewer closed this issue

2026-05-11 18:19:44 +00:00

code-lead referenced this issue from a commit

2026-05-11 19:14:16 +00:00

fix(agents): invalidate stale session rows on non-success terminal status

code-lead referenced this issue

2026-05-11 19:14:48 +00:00

fix(agents): invalidate stale session rows on non-success terminal status #1111

reviewer referenced this issue from a commit

2026-05-11 19:26:31 +00:00

fix(agents): invalidate stale session rows on non-success terminal status

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#1104

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