feat: enhance MainLayout and TabBar with sidebar integration

Author: jonathanlab

src/renderer/components/tasks/TaskList.tsx

@@ -215,15 +215,15 @@ export function TaskList({ onSelectTask }: TaskListProps) {
             const bar = e.currentTarget.querySelector(
               ".drag-bar",
             ) as HTMLElement;
-            if (bar) bar.style.backgroundColor = "var(--gray-a6)";
+            if (bar) bar.style.backgroundColor = "var(--gray-a8)";
           }
         }}
         onMouseLeave={(e) => {
           if (!isResizing) {
             const bar = e.currentTarget.querySelector(
               ".drag-bar",
             ) as HTMLElement;
-            if (bar) bar.style.backgroundColor = "transparent";
+            if (bar) bar.style.backgroundColor = "var(--gray-a4)";
           }
         }}
       >
@@ -233,7 +233,7 @@ export function TaskList({ onSelectTask }: TaskListProps) {
           style={{
             width: "1px",
             height: "100%",
-            backgroundColor: isResizing ? "var(--accent-9)" : "var(--gray-a6)",
+            backgroundColor: isResizing ? "var(--accent-9)" : "var(--gray-a4)",
             transition: "background-color 0.2s",
           }}
         />

src/renderer/components/ui/sidebar/SidebarContent.tsx

@@ -1,4 +1,5 @@
-import { Box } from "@radix-ui/themes";
+import { ArrowsInSimpleIcon, ArrowsOutSimpleIcon } from "@phosphor-icons/react";
+import { Box, Flex, IconButton, Tooltip } from "@radix-ui/themes";
 import type { Task } from "@shared/types";
 import type React from "react";
 import { useEffect, useMemo, useState } from "react";
@@ -10,12 +11,17 @@ import { useSidebarStore } from "../../../stores/sidebarStore";
 import { useTabStore } from "../../../stores/tabStore";
 import { SidebarTreeItem } from "./SidebarTreeItem";
 import { useSidebarMenuData } from "./UseSidebarMenuData";
-import { buildTreeLines } from "./Utils";
+import { buildTreeLines, getAllNodeIds } from "./Utils";
 
 export const SidebarContent: React.FC = () => {
   const { client } = useAuthStore();
   const { tabs, createTab, setActiveTab, activeTabId } = useTabStore();
-  const { expandedNodes: expandedNodesArray, toggleNode } = useSidebarStore();
+  const {
+    expandedNodes: expandedNodesArray,
+    toggleNode,
+    expandAll,
+    collapseAll,
+  } = useSidebarStore();
   const { setCliMode } = useLayoutStore();
   const { saveRecording } = useRecordings();
   const { startRecording, stopRecording } = useAudioRecorder(saveRecording);
@@ -101,6 +107,20 @@ export const SidebarContent: React.FC = () => {
   });
 
   const treeLines = buildTreeLines([menuData], "", "", expandedNodes, 0);
+  const allNodeIds = useMemo(
+    () => getAllNodeIds([menuData], "", 0),
+    [menuData],
+  );
+  const allExpanded =
+    allNodeIds.length > 0 && allNodeIds.every((id) => expandedNodes.has(id));
+
+  const handleToggleExpandAll = () => {
+    if (allExpanded) {
+      collapseAll();
+    } else {
+      expandAll(allNodeIds);
+    }
+  };
 
   return (
     <Box
@@ -111,18 +131,45 @@ export const SidebarContent: React.FC = () => {
     >
       <Box p="2">
         <div className="sidebar-tree">
-          {treeLines.map((line, index) => (
-            <SidebarTreeItem
-              key={line.nodeId}
-              line={line}
-              index={index}
-              isHovered={hoveredLineIndex === index}
-              expandedNodes={expandedNodes}
-              onMouseEnter={() => setHoveredLineIndex(index)}
-              onMouseLeave={() => setHoveredLineIndex(null)}
-              onToggle={toggleNode}
-            />
-          ))}
+          {treeLines.map((line, index) => {
+            const isRoot = index === 0;
+            if (isRoot) {
+              return (
+                <Flex key={line.nodeId} align="center" justify="between" mb="1">
+                  <span style={{ fontWeight: 500 }}>{line.label}</span>
+                  <Tooltip
+                    content={allExpanded ? "Collapse all" : "Expand all"}
+                  >
+                    <IconButton
+                      size="1"
+                      variant="ghost"
+                      color="gray"
+                      onClick={handleToggleExpandAll}
+                      style={{ cursor: "pointer" }}
+                    >
+                      {allExpanded ? (
+                        <ArrowsInSimpleIcon size={12} />
+                      ) : (
+                        <ArrowsOutSimpleIcon size={12} />
+                      )}
+                    </IconButton>
+                  </Tooltip>
+                </Flex>
+              );
+            }
+            return (
+              <SidebarTreeItem
+                key={line.nodeId}
+                line={line}
+                index={index}
+                isHovered={hoveredLineIndex === index}
+                expandedNodes={expandedNodes}
+                onMouseEnter={() => setHoveredLineIndex(index)}
+                onMouseLeave={() => setHoveredLineIndex(null)}
+                onToggle={toggleNode}
+              />
+            );
+          })}
         </div>
       </Box>
     </Box>

src/renderer/components/ui/sidebar/Utils.ts

@@ -62,3 +62,26 @@ export function buildTreeLines(
 
   return lines;
 }
+
+export function getAllNodeIds(
+  nodes: TreeNode[],
+  parentId = "",
+  depth = 0,
+): string[] {
+  const nodeIds: string[] = [];
+
+  nodes.forEach((node, index) => {
+    const nodeId = parentId ? `${parentId}.${index}` : `${index}`;
+    const hasChildren = !!(node.children && node.children.length > 0);
+
+    if (hasChildren && depth > 0) {
+      nodeIds.push(nodeId);
+    }
+
+    if (hasChildren && node.children) {
+      nodeIds.push(...getAllNodeIds(node.children, nodeId, depth + 1));
+    }
+  });
+
+  return nodeIds;
+}

src/renderer/stores/sidebarStore.ts

@@ -10,6 +10,8 @@ interface SidebarStore {
   setWidth: (width: number) => void;
   setIsResizing: (isResizing: boolean) => void;
   toggleNode: (nodeId: string) => void;
+  expandAll: (allNodeIds: string[]) => void;
+  collapseAll: () => void;
 }
 
 export const useSidebarStore = create<SidebarStore>()(
@@ -28,6 +30,8 @@ export const useSidebarStore = create<SidebarStore>()(
             ? state.expandedNodes.filter((id) => id !== nodeId)
             : [...state.expandedNodes, nodeId],
         })),
+      expandAll: (allNodeIds) => set({ expandedNodes: allNodeIds }),
+      collapseAll: () => set({ expandedNodes: [] }),
     }),
     {
       name: "sidebar-storage",