feat(web): switch AppShell to sidebar 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#1020

claude-desktop commented

2026-05-09 18:18:25 +00:00

Collaborator

As an operator,
I want a left sidebar with the grouped nav replacing the top-bar tabs,
so that related routes are visually grouped (Work vs Agents) and the screen has more vertical room for content.

This is the visual cutover. Blocks on dev/977 and dev/974 (both touch app-shell.tsx) landing or being rebased.

Acceptance criteria

Shell layout

apps/web/src/components/app-shell.tsx switches from header-with-nav to a flex layout: <aside> left rail + <main> content.
Header keeps brand, repo selector, conn pill, notifications bell, avatar menu, settings search.
Header drops the horizontal nav NAV_ITEMS row.

Sidebar

<SidebarNav> component renders <NavSections variant="rail" collapsed={false} /> (#nav-v2-4).
Width 240 px fixed. Bordered right edge. bg-surface. No shadow.
Footer area inside sidebar: keyboard-shortcuts trigger button (placeholder for #nav-v2-8), settings link, version footer.
Sidebar hidden below md breakpoint; mobile drawer takes over (#nav-v2-6).

Routing handlers

g b g w g f g a chords (registered in #nav-v2-3) navigate to Board / Workspace / Flows / Agents-Live.

Skip-link <a href="#main"> preserved.
<main id="main"> wrapper added so the skip-link target exists.
Focus visible on all sidebar items.

Tests

Shell renders sidebar on desktop viewport, drawer trigger on mobile.
Sidebar item clicks navigate; aria-current flips.
Existing app-shell test suite migrated.

Out of scope

Collapse / icon-only mode (#nav-v2-7).
Shortcut overlay implementation (#nav-v2-8).
Mobile drawer rework (#nav-v2-6).
Removing <Tabs> from agents.tsx (#nav-v2-9).

References

Spec: docs/specs/nav-consolidation.md § Target, § Sidebar component.
⚠ Coordinate with active branches: dev/977, dev/974 (both touch app-shell.tsx).

**As an** operator, **I want** a left sidebar with the grouped nav replacing the top-bar tabs, **so that** related routes are visually grouped (Work vs Agents) and the screen has more vertical room for content. This is the **visual cutover**. Blocks on `dev/977` and `dev/974` (both touch `app-shell.tsx`) landing or being rebased. ## Acceptance criteria ### Shell layout - [ ] `apps/web/src/components/app-shell.tsx` switches from header-with-nav to a flex layout: `<aside>` left rail + `<main>` content. - [ ] Header keeps brand, repo selector, conn pill, notifications bell, avatar menu, settings search. - [ ] Header drops the horizontal nav `NAV_ITEMS` row. ### Sidebar - [ ] `<SidebarNav>` component renders `<NavSections variant="rail" collapsed={false} />` (#nav-v2-4). - [ ] Width 240 px fixed. Bordered right edge. `bg-surface`. No shadow. - [ ] Footer area inside sidebar: keyboard-shortcuts trigger button (placeholder for #nav-v2-8), settings link, version footer. - [ ] Sidebar hidden below `md` breakpoint; mobile drawer takes over (#nav-v2-6). ### Routing handlers - [ ] `g b` `g w` `g f` `g a` chords (registered in #nav-v2-3) navigate to Board / Workspace / Flows / Agents-Live. ### A11y - [ ] Skip-link `<a href="#main">` preserved. - [ ] `<main id="main">` wrapper added so the skip-link target exists. - [ ] Focus visible on all sidebar items. ### Tests - [ ] Shell renders sidebar on desktop viewport, drawer trigger on mobile. - [ ] Sidebar item clicks navigate; `aria-current` flips. - [ ] Existing app-shell test suite migrated. ## Out of scope - Collapse / icon-only mode (#nav-v2-7). - Shortcut overlay implementation (#nav-v2-8). - Mobile drawer rework (#nav-v2-6). - Removing `<Tabs>` from `agents.tsx` (#nav-v2-9). ## References - Spec: `docs/specs/nav-consolidation.md` § Target, § Sidebar component. - ⚠ Coordinate with active branches: `dev/977`, `dev/974` (both touch `app-shell.tsx`).

claude-desktop added this to the nav-v2 milestone

claude-desktop added the

labels

code-lead was assigned by claude-desktop

2026-05-10 11:09:34 +00:00

code-lead referenced this issue from a commit

2026-05-10 11:19:27 +00:00

feat(web): switch AppShell to sidebar layout

code-lead referenced this issue from a pull request that will close it,

2026-05-10 11:19:38 +00:00

feat(web): switch AppShell to sidebar layout #1034

reviewer closed this issue