settings/SU-1: lift side-nav into top-level /settings layout

No labels

No milestone

No project

No assignees

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

claude-desktop commented

2026-05-04 20:02:44 +00:00

Collaborator

User story

As an operator navigating settings, I want a single persistent side-nav covering every settings sub-page, so that I always know where I am and can jump between sections in one click without going through the hub.

Context

Today three nav patterns coexist: side-nav (/settings/service), dropdown+tabs (/settings/agent-types), tab bar (/settings/labels, /settings/agent-config). The hub (apps/web/src/routes/settings.index.tsx, 1056 LOC) mixes 5 inline forms with 6 link-out cards. Operators can't scan it.

Mature tools (GitHub, Linear, Stripe, Tailscale) all use one persistent side-nav grouped by domain, single editing surface per route.

Acceptance criteria

Layout

apps/web/src/routes/settings.tsx owns <AppShell> + side-nav + <Outlet/>. Children stop rendering their own <AppShell>.
Side-nav lives left on ≥sm, collapses to top scroll-snap strip on <sm (reuse SettingsSideNav).
Side-nav grouped: General (General, Appearance, Voice), Agents (Types, Per-agent secrets, Config history, Admin), Forges (Service config, Repositories, Labels), Data (Secrets store).
Active group expanded by URL match; collapsed groups still navigable.
Breadcrumb stays via SettingsBreadcrumb but back-link target is implicit (hub = General now).

Hub becomes General

/settings/ renders only: Billing mode, Design pipeline toggle, Global caveman mode, plus a thin "Quick links" strip.
Voice input section removed from hub.
Watched-repos section removed from hub.
All 6 gateway cards removed from hub.

Tests

Side-nav renders on every /settings/* route.
Active item highlighted by URL.
Hub renders only the three remaining sections.

Out of scope

Voice input + Watched repos relocation — see SU-2.
agent-config restructure — see SU-3.
Save-bar primitive — see SU-5.
Search palette — see SU-6.

References

Spec discussion 2026-05-04 (this conversation).
apps/web/src/components/settings-side-nav.tsx — primitive to lift.
apps/web/src/routes/settings.service.tsx — current side-nav consumer.
apps/web/CLAUDE.md — mobile breakpoints + drawer pattern.

## User story As an operator navigating settings, I want a single persistent side-nav covering every settings sub-page, so that I always know where I am and can jump between sections in one click without going through the hub. ## Context Today three nav patterns coexist: side-nav (`/settings/service`), dropdown+tabs (`/settings/agent-types`), tab bar (`/settings/labels`, `/settings/agent-config`). The hub (`apps/web/src/routes/settings.index.tsx`, 1056 LOC) mixes 5 inline forms with 6 link-out cards. Operators can't scan it. Mature tools (GitHub, Linear, Stripe, Tailscale) all use one persistent side-nav grouped by domain, single editing surface per route. ## Acceptance criteria ### Layout - [ ] `apps/web/src/routes/settings.tsx` owns `<AppShell>` + side-nav + `<Outlet/>`. Children stop rendering their own `<AppShell>`. - [ ] Side-nav lives left on `≥sm`, collapses to top scroll-snap strip on `<sm` (reuse `SettingsSideNav`). - [ ] Side-nav grouped: **General** (General, Appearance, Voice), **Agents** (Types, Per-agent secrets, Config history, Admin), **Forges** (Service config, Repositories, Labels), **Data** (Secrets store). - [ ] Active group expanded by URL match; collapsed groups still navigable. - [ ] Breadcrumb stays via `SettingsBreadcrumb` but back-link target is implicit (hub = General now). ### Hub becomes General - [ ] `/settings/` renders only: Billing mode, Design pipeline toggle, Global caveman mode, plus a thin "Quick links" strip. - [ ] Voice input section removed from hub. - [ ] Watched-repos section removed from hub. - [ ] All 6 gateway cards removed from hub. ### Tests - [ ] Side-nav renders on every `/settings/*` route. - [ ] Active item highlighted by URL. - [ ] Hub renders only the three remaining sections. ## Out of scope - Voice input + Watched repos relocation — see SU-2. - agent-config restructure — see SU-3. - Save-bar primitive — see SU-5. - Search palette — see SU-6. ## References - Spec discussion 2026-05-04 (this conversation). - `apps/web/src/components/settings-side-nav.tsx` — primitive to lift. - `apps/web/src/routes/settings.service.tsx` — current side-nav consumer. - `apps/web/CLAUDE.md` — mobile breakpoints + drawer pattern.

claude-desktop added the

labels

2026-05-04 20:03:51 +00:00

dev was assigned by claude-desktop

2026-05-04 20:03:56 +00:00

claude-desktop added this to the Settings unification milestone

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

2026-05-04 20:29:21 +00:00

feat(settings): lift side-nav into top-level /settings layout (SU-1) #846

dev closed this issue

2026-05-04 21:08:15 +00:00