Summary
Replace the current flat project list in the sidebar with a three-level navigation tree: Client > Project > Thread. This replaces the client-side-only project-group UI with a server-backed hierarchy.
Scope
- Refactor
Sidebar.tsx to render Clients as top-level collapsible sections
- Each Client section contains its assigned Projects (existing
SortableProjectItem adapted)
- Each Project contains its Threads (existing behavior preserved)
- Add "Unassigned" section at the bottom for projects with no
clientId (hidden when empty)
- Client sections show: name, project count badge, collapse/expand toggle, context menu (rename, archive, delete)
- Collapse/expand state for Client sections stored in localStorage (UI-only, via
uiStateStore)
- Read
clients[] from Zustand store (synced via snapshot)
- Sort clients by
sortOrder, projects by user-selected sort mode, threads unchanged
Design details
- Empty Client section: show subtle empty state + "New Project" affordance
- Zero Clients: show prompt to create first Client + any unassigned Projects
- Search/filter active: hierarchy flattens to matching results
- Keyboard navigation: support traversal across all three levels (Client → Project → Thread)
- Preserve existing status indicators (terminal running, PR open, unread) on Thread items
Key files to modify
apps/web/src/components/Sidebar.tsx — major refactor, nested rendering
apps/web/src/components/Sidebar.logic.ts — update sort/group logic to work with Client hierarchy
apps/web/src/uiStateStore.ts — add Client expand/collapse state
apps/web/src/store.ts — ensure clients[] from snapshot is accessible
apps/web/src/types.ts — add Client frontend type if needed
Dependencies
- F1 (Client entity), F2 (Client-Project binding)
Acceptance criteria
Summary
Replace the current flat project list in the sidebar with a three-level navigation tree: Client > Project > Thread. This replaces the client-side-only project-group UI with a server-backed hierarchy.
Scope
Sidebar.tsxto render Clients as top-level collapsible sectionsSortableProjectItemadapted)clientId(hidden when empty)uiStateStore)clients[]from Zustand store (synced via snapshot)sortOrder, projects by user-selected sort mode, threads unchangedDesign details
Key files to modify
apps/web/src/components/Sidebar.tsx— major refactor, nested renderingapps/web/src/components/Sidebar.logic.ts— update sort/group logic to work with Client hierarchyapps/web/src/uiStateStore.ts— add Client expand/collapse stateapps/web/src/store.ts— ensureclients[]from snapshot is accessibleapps/web/src/types.ts— add Client frontend type if neededDependencies
Acceptance criteria