Add project sidebar expand-all toggle

- Add a sidebar control to expand or collapse every project at once
- Default unseen projects to collapsed when loading legacy persisted state
- Update store coverage for the new all-projects expansion behavior

Author: BunsDev

apps/web/src/components/Sidebar.tsx

@@ -29,6 +29,8 @@ import {
   ArrowLeftIcon,
   ArrowUpDownIcon,
   CheckCircleIcon,
+  ChevronsDownUpIcon,
+  ChevronsUpDownIcon,
   CircleDotIcon,
   CloudUploadIcon,
   ExternalLinkIcon,
@@ -462,6 +464,7 @@ export default function Sidebar() {
   const threads = useStore((store) => store.threads);
   const markThreadUnread = useStore((store) => store.markThreadUnread);
   const toggleProject = useStore((store) => store.toggleProject);
+  const setAllProjectsExpanded = useStore((store) => store.setAllProjectsExpanded);
   const reorderProjects = useStore((store) => store.reorderProjects);
   const clearComposerDraftForThread = useComposerDraftStore((store) => store.clearDraftThread);
   const getDraftThreadByProjectId = useComposerDraftStore(
@@ -1250,6 +1253,7 @@ export default function Sidebar() {
       });
   }, [projectById, threads]);
   const isManualProjectSorting = appSettings.sidebarProjectSortOrder === "manual";
+  const allProjectsExpanded = projects.length > 0 && projects.every((p) => p.expanded);
 
   function renderProjectItem(
     project: (typeof sortedProjects)[number],
@@ -1849,6 +1853,31 @@ export default function Sidebar() {
               Projects
             </span>
             <div className="flex items-center gap-1">
+              <Tooltip>
+                <TooltipTrigger
+                  render={
+                    <button
+                      type="button"
+                      aria-label={
+                        allProjectsExpanded ? "Collapse all projects" : "Expand all projects"
+                      }
+                      className="inline-flex size-5 cursor-pointer items-center justify-center rounded-md text-muted-foreground/60 transition-colors hover:bg-accent hover:text-foreground"
+                      onClick={() => {
+                        setAllProjectsExpanded(!allProjectsExpanded);
+                      }}
+                    />
+                  }
+                >
+                  {allProjectsExpanded ? (
+                    <ChevronsDownUpIcon className="size-3.5" />
+                  ) : (
+                    <ChevronsUpDownIcon className="size-3.5" />
+                  )}
+                </TooltipTrigger>
+                <TooltipPopup side="top">
+                  {allProjectsExpanded ? "Collapse all projects" : "Expand all projects"}
+                </TooltipPopup>
+              </Tooltip>
               <Tooltip>
                 <TooltipTrigger
                   render={

apps/web/src/store.test.ts

@@ -133,7 +133,7 @@ describe("store pure functions", () => {
     expect(parsed.projectOrderCwds).toEqual(["/tmp/b", "/tmp/a"]);
   });
 
-  it("treats legacy expanded project data as hints without collapsing unseen projects", () => {
+  it("treats legacy expanded project data as hints and defaults unseen projects to collapsed", () => {
     const parsed = parsePersistedProjectUiState(
       JSON.stringify({
         expandedProjectCwds: ["/tmp/a"],
@@ -151,7 +151,7 @@ describe("store pure functions", () => {
         existingExpanded: undefined,
         persistedExpanded: parsed.projectExpansionByCwd.get("/tmp/missing"),
       }),
-    ).toBe(true);
+    ).toBe(false);
   });
 
   it("markThreadUnread moves lastVisitedAt before completion for a completed thread", () => {

apps/web/src/store.ts

@@ -92,7 +92,7 @@ export function resolveProjectExpandedState(input: {
   existingExpanded: boolean | undefined;
   persistedExpanded: boolean | undefined;
 }): boolean {
-  return input.existingExpanded ?? input.persistedExpanded ?? true;
+  return input.existingExpanded ?? input.persistedExpanded ?? false;
 }
 
 function readPersistedState(): AppState {
@@ -431,6 +431,16 @@ export function setProjectExpanded(
   return changed ? { ...state, projects } : state;
 }
 
+export function setAllProjectsExpanded(state: AppState, expanded: boolean): AppState {
+  let changed = false;
+  const projects = state.projects.map((p) => {
+    if (p.expanded === expanded) return p;
+    changed = true;
+    return { ...p, expanded };
+  });
+  return changed ? { ...state, projects } : state;
+}
+
 export function reorderProjects(
   state: AppState,
   draggedProjectId: Project["id"],
@@ -495,6 +505,7 @@ interface AppStore extends AppState {
   markThreadUnread: (threadId: ThreadId) => void;
   toggleProject: (projectId: Project["id"]) => void;
   setProjectExpanded: (projectId: Project["id"], expanded: boolean) => void;
+  setAllProjectsExpanded: (expanded: boolean) => void;
   reorderProjects: (draggedProjectId: Project["id"], targetProjectId: Project["id"]) => void;
   setError: (threadId: ThreadId, error: string | null) => void;
   setThreadBranch: (threadId: ThreadId, branch: string | null, worktreePath: string | null) => void;
@@ -510,6 +521,7 @@ export const useStore = create<AppStore>((set) => ({
   toggleProject: (projectId) => set((state) => toggleProject(state, projectId)),
   setProjectExpanded: (projectId, expanded) =>
     set((state) => setProjectExpanded(state, projectId, expanded)),
+  setAllProjectsExpanded: (expanded) => set((state) => setAllProjectsExpanded(state, expanded)),
   reorderProjects: (draggedProjectId, targetProjectId) =>
     set((state) => reorderProjects(state, draggedProjectId, targetProjectId)),
   setError: (threadId, error) => set((state) => setError(state, threadId, error)),