Collapse all button for projects sidebar

apps/web/src/components/Sidebar.tsx

@@ -2,6 +2,7 @@ import {
   ArchiveIcon,
   ArrowUpDownIcon,
   ChevronRightIcon,
+  ChevronsDownUpIcon,
   CloudIcon,
   FolderPlusIcon,
   Globe2Icon,
@@ -128,6 +129,7 @@ import { Input } from "./ui/input";
 import {
   Menu,
   MenuGroup,
+  MenuItem,
   MenuPopup,
   MenuRadioGroup,
   MenuRadioItem,
@@ -957,6 +959,7 @@ interface SidebarProjectItemProps {
   attachThreadListAutoAnimateRef: (node: HTMLElement | null) => void;
   expandThreadListForProject: (projectKey: string) => void;
   collapseThreadListForProject: (projectKey: string) => void;
+  collapseAllProjects: () => void;
   dragInProgressRef: React.RefObject<boolean>;
   suppressProjectClickAfterDragRef: React.RefObject<boolean>;
   suppressProjectClickForContextMenuRef: React.RefObject<boolean>;
@@ -977,6 +980,7 @@ const SidebarProjectItem = memo(function SidebarProjectItem(props: SidebarProjec
     attachThreadListAutoAnimateRef,
     expandThreadListForProject,
     collapseThreadListForProject,
+    collapseAllProjects,
     dragInProgressRef,
     suppressProjectClickAfterDragRef,
     suppressProjectClickForContextMenuRef,
@@ -1282,10 +1286,15 @@ const SidebarProjectItem = memo(function SidebarProjectItem(props: SidebarProjec
       if (useThreadSelectionStore.getState().hasSelection()) {
         clearSelection();
       }
+      if (event.altKey) {
+        collapseAllProjects();
+        return;
+      }
       toggleProject(project.projectKey);
     },
     [
       clearSelection,
+      collapseAllProjects,
       dragInProgressRef,
       project.projectKey,
       suppressProjectClickAfterDragRef,
@@ -2614,6 +2623,10 @@ interface SidebarProjectsContentProps {
   suppressProjectClickForContextMenuRef: React.RefObject<boolean>;
   attachProjectListAutoAnimateRef: (node: HTMLElement | null) => void;
   projectsLength: number;
+  allProjectsCollapsed: boolean;
+  allThreadListsMinimized: boolean;
+  collapseAllProjects: () => void;
+  minimizeAllThreadLists: () => void;
 }
 
 const SidebarProjectsContent = memo(function SidebarProjectsContent(
@@ -2655,6 +2668,10 @@ const SidebarProjectsContent = memo(function SidebarProjectsContent(
     suppressProjectClickForContextMenuRef,
     attachProjectListAutoAnimateRef,
     projectsLength,
+    allProjectsCollapsed,
+    allThreadListsMinimized,
+    collapseAllProjects,
+    minimizeAllThreadLists,
   } = props;
 
   const handleProjectSortOrderChange = useCallback(
@@ -2746,6 +2763,45 @@ const SidebarProjectsContent = memo(function SidebarProjectsContent(
               onProjectGroupingModeChange={handleProjectGroupingModeChange}
               onThreadPreviewCountChange={handleThreadPreviewCountChange}
             />
+            {projectsLength > 0 && (
+              <Menu>
+                <Tooltip>
+                  <TooltipTrigger
+                    render={
+                      <MenuTrigger
+                        aria-label="Bulk collapse actions"
+                        data-testid="sidebar-bulk-collapse-menu"
+                        disabled={allProjectsCollapsed && allThreadListsMinimized}
+                        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 disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:bg-transparent disabled:hover:text-muted-foreground/60"
+                      />
+                    }
+                  >
+                    <ChevronsDownUpIcon className="size-3.5" />
+                  </TooltipTrigger>
+                  <TooltipPopup side="right">Collapse options</TooltipPopup>
+                </Tooltip>
+                <MenuPopup align="end" side="bottom" className="min-w-44">
+                  <MenuGroup>
+                    <MenuItem
+                      disabled={allProjectsCollapsed}
+                      onClick={collapseAllProjects}
+                      data-testid="sidebar-collapse-all-projects"
+                      className="min-h-7 py-1 sm:text-xs"
+                    >
+                      Collapse all projects
+                    </MenuItem>
+                    <MenuItem
+                      disabled={allThreadListsMinimized}
+                      onClick={minimizeAllThreadLists}
+                      data-testid="sidebar-minimize-all-threads"
+                      className="min-h-7 py-1 sm:text-xs"
+                    >
+                      Minimize all thread lists
+                    </MenuItem>
+                  </MenuGroup>
+                </MenuPopup>
+              </Menu>
+            )}
             <Tooltip>
               <TooltipTrigger
                 render={
@@ -2796,6 +2852,7 @@ const SidebarProjectsContent = memo(function SidebarProjectsContent(
                         attachThreadListAutoAnimateRef={attachThreadListAutoAnimateRef}
                         expandThreadListForProject={expandThreadListForProject}
                         collapseThreadListForProject={collapseThreadListForProject}
+                        collapseAllProjects={collapseAllProjects}
                         dragInProgressRef={dragInProgressRef}
                         suppressProjectClickAfterDragRef={suppressProjectClickAfterDragRef}
                         suppressProjectClickForContextMenuRef={
@@ -2828,6 +2885,7 @@ const SidebarProjectsContent = memo(function SidebarProjectsContent(
                 attachThreadListAutoAnimateRef={attachThreadListAutoAnimateRef}
                 expandThreadListForProject={expandThreadListForProject}
                 collapseThreadListForProject={collapseThreadListForProject}
+                collapseAllProjects={collapseAllProjects}
                 dragInProgressRef={dragInProgressRef}
                 suppressProjectClickAfterDragRef={suppressProjectClickAfterDragRef}
                 suppressProjectClickForContextMenuRef={suppressProjectClickForContextMenuRef}
@@ -2854,6 +2912,7 @@ export default function Sidebar() {
   const projectExpandedById = useUiStateStore((store) => store.projectExpandedById);
   const projectOrder = useUiStateStore((store) => store.projectOrder);
   const reorderProjects = useUiStateStore((store) => store.reorderProjects);
+  const collapseAllProjectsAction = useUiStateStore((store) => store.collapseAllProjects);
   const navigate = useNavigate();
   const pathname = useLocation({ select: (loc) => loc.pathname });
   const isOnSettings = pathname.startsWith("/settings");
@@ -3132,6 +3191,17 @@ export default function Sidebar() {
     visibleThreads,
   ]);
   const isManualProjectSorting = sidebarProjectSortOrder === "manual";
+  const handleCollapseAllProjects = useCallback(() => {
+    collapseAllProjectsAction(sortedProjects.map((p) => p.projectKey));
+  }, [collapseAllProjectsAction, sortedProjects]);
+  const handleMinimizeAllThreadLists = useCallback(() => {
+    setExpandedThreadListsByProject((current) => (current.size === 0 ? current : new Set()));
+  }, []);
+  const allProjectsCollapsed = useMemo(
+    () => sortedProjects.every((p) => (projectExpandedById[p.projectKey] ?? true) === false),
+    [sortedProjects, projectExpandedById],
+  );
+  const allThreadListsMinimized = expandedThreadListsByProject.size === 0;
   const visibleSidebarThreadKeys = useMemo(
     () =>
       sortedProjects.flatMap((project) => {
@@ -3518,6 +3588,10 @@ export default function Sidebar() {
             suppressProjectClickForContextMenuRef={suppressProjectClickForContextMenuRef}
             attachProjectListAutoAnimateRef={attachProjectListAutoAnimateRef}
             projectsLength={projects.length}
+            allProjectsCollapsed={allProjectsCollapsed}
+            allThreadListsMinimized={allThreadListsMinimized}
+            collapseAllProjects={handleCollapseAllProjects}
+            minimizeAllThreadLists={handleMinimizeAllThreadLists}
           />
 
           <SidebarSeparator />

apps/web/src/uiStateStore.test.ts

@@ -3,6 +3,7 @@ import { afterEach, beforeEach, describe, expect, it, vi } from "vite-plus/test"
 
 import {
   clearThreadUi,
+  collapseAllProjects,
   hydratePersistedProjectState,
   markThreadVisited,
   markThreadUnread,
@@ -397,6 +398,53 @@ describe("uiStateStore pure functions", () => {
     expect(next.projectOrder).toEqual([project1]);
   });
 
+  it("collapseAllProjects sets all given project IDs to collapsed", () => {
+    const project1 = ProjectId.make("project-1");
+    const project2 = ProjectId.make("project-2");
+    const initialState = makeUiState({
+      projectExpandedById: {
+        [project1]: true,
+        [project2]: true,
+      },
+    });
+
+    const next = collapseAllProjects(initialState, [project1, project2]);
+
+    expect(next.projectExpandedById[project1]).toBe(false);
+    expect(next.projectExpandedById[project2]).toBe(false);
+  });
+
+  it("collapseAllProjects does not affect projects not in the list", () => {
+    const project1 = ProjectId.make("project-1");
+    const project2 = ProjectId.make("project-2");
+    const initialState = makeUiState({
+      projectExpandedById: {
+        [project1]: true,
+        [project2]: true,
+      },
+    });
+
+    const next = collapseAllProjects(initialState, [project1]);
+
+    expect(next.projectExpandedById[project1]).toBe(false);
+    expect(next.projectExpandedById[project2]).toBe(true);
+  });
+
+  it("collapseAllProjects is a no-op when all given projects already collapsed", () => {
+    const project1 = ProjectId.make("project-1");
+    const project2 = ProjectId.make("project-2");
+    const initialState = makeUiState({
+      projectExpandedById: {
+        [project1]: false,
+        [project2]: false,
+      },
+    });
+
+    const next = collapseAllProjects(initialState, [project1, project2]);
+
+    expect(next).toBe(initialState);
+  });
+
   it("clearThreadUi removes visit state for deleted threads", () => {
     const thread1 = ThreadId.make("thread-1");
     const initialState = makeUiState({

apps/web/src/uiStateStore.ts

@@ -590,6 +590,17 @@ export function setProjectExpanded(state: UiState, projectId: string, expanded:
   };
 }
 
+export function collapseAllProjects(state: UiState, projectIds: string[]): UiState {
+  const nextExpanded = { ...state.projectExpandedById };
+  for (const id of projectIds) {
+    nextExpanded[id] = false;
+  }
+  if (recordsEqual(state.projectExpandedById, nextExpanded)) {
+    return state;
+  }
+  return { ...state, projectExpandedById: nextExpanded };
+}
+
 export function reorderProjects(
   state: UiState,
   draggedProjectIds: readonly string[],
@@ -643,6 +654,7 @@ interface UiStateStore extends UiState {
   setDefaultAdvertisedEndpointKey: (key: string | null) => void;
   toggleProject: (projectId: string) => void;
   setProjectExpanded: (projectId: string, expanded: boolean) => void;
+  collapseAllProjects: (projectIds: string[]) => void;
   reorderProjects: (
     draggedProjectIds: readonly string[],
     targetProjectIds: readonly string[],
@@ -665,6 +677,7 @@ export const useUiStateStore = create<UiStateStore>((set) => ({
   toggleProject: (projectId) => set((state) => toggleProject(state, projectId)),
   setProjectExpanded: (projectId, expanded) =>
     set((state) => setProjectExpanded(state, projectId, expanded)),
+  collapseAllProjects: (projectIds) => set((state) => collapseAllProjects(state, projectIds)),
   reorderProjects: (draggedProjectIds, targetProjectIds) =>
     set((state) => reorderProjects(state, draggedProjectIds, targetProjectIds)),
 }));