Add setting to hide sidebar worktrees and collapse them by default

Settings → Worktrees gains a "Show worktrees in sidebar" toggle (on by
default) that hides the per-repo worktrees dropdown and skips its
queries entirely. The dropdown also starts collapsed: expansion is
tracked as the exception in a new expandedWorktreeSections set, since
collapsedSections defaults sections to expanded.

Generated-By: PostHog Code
Task-Id: 24032eac-82cc-4c5f-a7e9-30ed9278a6e1

Author: haacked

packages/ui/src/features/settings/sections/worktrees/WorktreesSettings.tsx

@@ -16,6 +16,7 @@ import { useDeleteTask } from "../../../tasks/useTaskCrudMutations";
 import { useTasks } from "../../../tasks/useTasks";
 import { WORKSPACE_QUERY_KEY } from "../../../workspace/identifiers";
 import { SettingRow } from "../../SettingRow";
+import { useSettingsStore } from "../../settingsStore";
 import { WorktreeGroupSection } from "./WorktreeGroupSection";
 
 const log = logger.scope("worktrees-settings");
@@ -25,6 +26,12 @@ export function WorktreesSettings() {
   const trpc = useHostTRPC();
   const hostClient = useHostTRPCClient();
   const { settings, updateSettings } = useSuspensionSettings();
+  const showSidebarWorktrees = useSettingsStore(
+    (state) => state.showSidebarWorktrees,
+  );
+  const setShowSidebarWorktrees = useSettingsStore(
+    (state) => state.setShowSidebarWorktrees,
+  );
   const { mutateAsync: deleteTask } = useDeleteTask();
   const [deletingWorktrees, setDeletingWorktrees] = useState<Set<string>>(
     new Set(),
@@ -133,6 +140,16 @@ export function WorktreesSettings() {
   return (
     <Flex direction="column" gap="5">
       <Flex direction="column">
+        <SettingRow
+          label="Show worktrees in sidebar"
+          description="List worktrees that have no task under each repo in the sidebar, so you can start a task in one with a click"
+        >
+          <Switch
+            checked={showSidebarWorktrees}
+            onCheckedChange={setShowSidebarWorktrees}
+            size="1"
+          />
+        </SettingRow>
         <SettingRow
           label="Automatically suspend stale worktrees"
           description="Suspend stale worktrees to save disk space. Suspended worktrees can be restored at any time. Only disable if you prefer to manage worktrees manually."

packages/ui/src/features/settings/settingsStore.ts

@@ -230,6 +230,12 @@ interface SettingsStore {
   conversationCollapseMode: CollapseMode;
   setConversationCollapseMode: (mode: CollapseMode) => void;
 
+  // Sidebar
+  // Shows a per-repo "Worktrees" dropdown of task-less worktrees a click can
+  // start a task in.
+  showSidebarWorktrees: boolean;
+  setShowSidebarWorktrees: (enabled: boolean) => void;
+
   // Experimental / misc
   hedgehogMode: boolean;
   slotMachineMode: boolean;
@@ -447,6 +453,11 @@ export const useSettingsStore = create<SettingsStore>()(
       setConversationCollapseMode: (mode) =>
         set({ conversationCollapseMode: mode }),
 
+      // Sidebar
+      showSidebarWorktrees: true,
+      setShowSidebarWorktrees: (enabled) =>
+        set({ showSidebarWorktrees: enabled }),
+
       // Experimental / misc
       hedgehogMode: false,
       slotMachineMode: false,
@@ -564,6 +575,9 @@ export const useSettingsStore = create<SettingsStore>()(
         // Conversation thread (new-thread)
         conversationCollapseMode: state.conversationCollapseMode,
 
+        // Sidebar
+        showSidebarWorktrees: state.showSidebarWorktrees,
+
         // Experimental / misc
         hedgehogMode: state.hedgehogMode,
         slotMachineMode: state.slotMachineMode,

packages/ui/src/features/sidebar/components/GroupWorktreesSection.tsx

@@ -13,15 +13,20 @@ interface GroupWorktreesSectionProps {
 /**
  * Nested "Worktrees" dropdown at the bottom of a repo group listing the repo's
  * task-less worktrees. Clicking one starts a task in that worktree and opens
- * its chat + shell. Renders nothing when the repo has no adoptable worktrees.
+ * its chat + shell. Collapsed by default; renders nothing when the repo has no
+ * adoptable worktrees.
  */
 export function GroupWorktreesSection({
   groupId,
   mainRepoPath,
 }: GroupWorktreesSectionProps) {
   const worktrees = useAdoptableWorktrees(mainRepoPath);
-  const collapsedSections = useSidebarStore((state) => state.collapsedSections);
-  const toggleSection = useSidebarStore((state) => state.toggleSection);
+  const expandedWorktreeSections = useSidebarStore(
+    (state) => state.expandedWorktreeSections,
+  );
+  const toggleWorktreeSection = useSidebarStore(
+    (state) => state.toggleWorktreeSection,
+  );
   const { startTask, startingBranches } =
     useStartTaskFromWorktree(mainRepoPath);
 
@@ -34,8 +39,8 @@ export function GroupWorktreesSection({
       label={`Worktrees (${worktrees.length})`}
       icon={<TreeStructure size={14} className="text-gray-10" />}
       depth={1}
-      isExpanded={!collapsedSections.has(sectionId)}
-      onToggle={() => toggleSection(sectionId)}
+      isExpanded={expandedWorktreeSections.has(sectionId)}
+      onToggle={() => toggleWorktreeSection(sectionId)}
       tooltipContent="Worktrees without a task — click one to start a task there"
     >
       {worktrees.map((worktree) => {

packages/ui/src/features/sidebar/components/TaskListView.tsx

@@ -15,6 +15,7 @@ import { MenuLabel } from "@posthog/quill";
 import { getFileName } from "@posthog/shared";
 import { builderHog } from "@posthog/ui/assets/hedgehogs";
 import { useFolders } from "@posthog/ui/features/folders/useFolders";
+import { useSettingsStore } from "@posthog/ui/features/settings/settingsStore";
 import { useArchivingTasksStore } from "@posthog/ui/features/sidebar/archivingTasksStore";
 import { DraggableFolder } from "@posthog/ui/features/sidebar/components/DraggableFolder";
 import { GroupWorktreesSection } from "@posthog/ui/features/sidebar/components/GroupWorktreesSection";
@@ -189,6 +190,9 @@ export function TaskListView({
     (state) => state.resetHistoryVisibleCount,
   );
   const { folders } = useFolders();
+  const showSidebarWorktrees = useSettingsStore(
+    (state) => state.showSidebarWorktrees,
+  );
   const view = useAppView();
   const isOnTaskInput =
     view.type === "task-input" || view.type === "task-pending";
@@ -370,7 +374,7 @@ export function TaskListView({
                         />
                       ))
                     )}
-                    {folder && (
+                    {folder && showSidebarWorktrees && (
                       <GroupWorktreesSection
                         groupId={group.id}
                         mainRepoPath={folder.mainRepoPath ?? folder.path}

packages/ui/src/features/sidebar/sidebarStore.ts

@@ -10,6 +10,9 @@ interface SidebarStoreState {
   width: number;
   isResizing: boolean;
   collapsedSections: Set<string>;
+  // Per-repo "Worktrees" subsections start collapsed, so unlike
+  // collapsedSections this tracks the expanded exceptions.
+  expandedWorktreeSections: Set<string>;
   folderOrder: string[];
   historyVisibleCount: number;
   organizeMode: "by-project" | "chronological";
@@ -30,6 +33,7 @@ interface SidebarStoreActions {
   setWidth: (width: number) => void;
   setIsResizing: (isResizing: boolean) => void;
   toggleSection: (sectionId: string) => void;
+  toggleWorktreeSection: (sectionId: string) => void;
   reorderFolders: (fromIndex: number, toIndex: number) => void;
   setFolderOrder: (order: string[]) => void;
   syncFolderOrder: (folderIds: string[]) => void;
@@ -53,6 +57,7 @@ export const useSidebarStore = create<SidebarStore>()(
       width: 256,
       isResizing: false,
       collapsedSections: new Set<string>(),
+      expandedWorktreeSections: new Set<string>(),
       folderOrder: [],
       historyVisibleCount: 25,
       organizeMode: "by-project",
@@ -78,6 +83,16 @@ export const useSidebarStore = create<SidebarStore>()(
           }
           return { collapsedSections: newCollapsedSections };
         }),
+      toggleWorktreeSection: (sectionId) =>
+        set((state) => {
+          const next = new Set(state.expandedWorktreeSections);
+          if (next.has(sectionId)) {
+            next.delete(sectionId);
+          } else {
+            next.add(sectionId);
+          }
+          return { expandedWorktreeSections: next };
+        }),
       reorderFolders: (fromIndex, toIndex) =>
         set((state) => {
           const newOrder = [...state.folderOrder];
@@ -126,6 +141,7 @@ export const useSidebarStore = create<SidebarStore>()(
         hasUserSetOpen: state.hasUserSetOpen,
         width: state.width,
         collapsedSections: Array.from(state.collapsedSections),
+        expandedWorktreeSections: Array.from(state.expandedWorktreeSections),
         folderOrder: state.folderOrder,
         historyVisibleCount: state.historyVisibleCount,
         organizeMode: state.organizeMode,
@@ -141,6 +157,7 @@ export const useSidebarStore = create<SidebarStore>()(
           hasUserSetOpen?: boolean;
           width?: number;
           collapsedSections?: string[];
+          expandedWorktreeSections?: string[];
           folderOrder?: string[];
           historyVisibleCount?: number;
           organizeMode?: SidebarStoreState["organizeMode"];
@@ -160,6 +177,9 @@ export const useSidebarStore = create<SidebarStore>()(
             persistedState.width ?? current.width,
           ),
           collapsedSections: new Set(persistedState.collapsedSections ?? []),
+          expandedWorktreeSections: new Set(
+            persistedState.expandedWorktreeSections ?? [],
+          ),
           folderOrder: persistedState.folderOrder ?? [],
           historyVisibleCount:
             persistedState.historyVisibleCount ?? current.historyVisibleCount,