Add the ability to collapse all folders from the context menu in the file tree panel

Author: charlesvien

apps/array/src/main/preload.ts

@@ -370,8 +370,9 @@ contextBridge.exposeInMainWorld("electronAPI", {
     ipcRenderer.invoke("show-split-context-menu"),
   showFileContextMenu: (
     filePath: string,
+    options?: { showCollapseAll?: boolean },
   ): Promise<ExternalAppContextMenuResult> =>
-    ipcRenderer.invoke("show-file-context-menu", filePath),
+    ipcRenderer.invoke("show-file-context-menu", filePath, options),
   folders: {
     getFolders: (): Promise<RegisteredFolder[]> =>
       ipcRenderer.invoke("get-folders"),

apps/array/src/main/services/contextMenu.ts

@@ -321,6 +321,7 @@ export const showFileContextMenuService = createIpcService({
   handler: async (
     _event,
     filePath: string,
+    options?: { showCollapseAll?: boolean },
   ): Promise<ExternalAppContextMenuResult> => {
     return new Promise((resolve) => {
       const setupMenu = async () => {
@@ -329,7 +330,21 @@ export const showFileContextMenuService = createIpcService({
           resolve,
         );
 
-        showContextMenu(externalAppsItems, { action: null }).then(resolve);
+        const template: MenuItemConstructorOptions[] = [];
+
+        if (options?.showCollapseAll) {
+          template.push(
+            {
+              label: "Collapse All",
+              click: () => resolve({ action: { type: "collapse-all" } }),
+            },
+            { type: "separator" },
+          );
+        }
+
+        template.push(...externalAppsItems);
+
+        showContextMenu(template, { action: null }).then(resolve);
       };
 
       setupMenu();

apps/array/src/main/services/contextMenu.types.ts

@@ -2,6 +2,7 @@
 export type ExternalAppAction =
   | { type: "open-in-app"; appId: string }
   | { type: "copy-path" }
+  | { type: "collapse-all" }
   | null;
 
 export interface ExternalAppContextMenuResult {

apps/array/src/renderer/features/right-sidebar/stores/fileTreeStore.ts

@@ -7,6 +7,7 @@ interface FileTreeStoreState {
 
 interface FileTreeStoreActions {
   togglePath: (taskId: string, path: string) => void;
+  collapseAll: (taskId: string) => void;
 }
 
 type FileTreeStore = FileTreeStoreState & FileTreeStoreActions;
@@ -29,4 +30,11 @@ export const useFileTreeStore = create<FileTreeStore>()((set) => ({
         },
       };
     }),
+  collapseAll: (taskId) =>
+    set((state) => ({
+      expandedPaths: {
+        ...state.expandedPaths,
+        [taskId]: new Set<string>(),
+      },
+    })),
 }));

apps/array/src/renderer/features/task-detail/components/FileTreePanel.tsx

@@ -48,6 +48,7 @@ function LazyTreeItem({
     (state) => state.expandedPaths[taskId]?.has(entry.path) ?? false,
   );
   const togglePath = useFileTreeStore((state) => state.togglePath);
+  const collapseAll = useFileTreeStore((state) => state.collapseAll);
   const openFile = usePanelLayoutStore((state) => state.openFile);
 
   const { data: children } = useQuery({
@@ -70,10 +71,17 @@ function LazyTreeItem({
 
   const handleContextMenu = async (e: React.MouseEvent) => {
     e.preventDefault();
-    const result = await window.electronAPI.showFileContextMenu(entry.path);
+    const result = await window.electronAPI.showFileContextMenu(entry.path, {
+      showCollapseAll: true,
+    });
 
     if (!result.action) return;
 
+    if (result.action.type === "collapse-all") {
+      collapseAll(taskId);
+      return;
+    }
+
     await handleExternalAppAction(result.action, entry.path, entry.name);
   };
 

apps/array/src/renderer/types/electron.d.ts

@@ -262,6 +262,7 @@ declare global {
     showSplitContextMenu: () => Promise<SplitContextMenuResult>;
     showFileContextMenu: (
       filePath: string,
+      options?: { showCollapseAll?: boolean },
     ) => Promise<ExternalAppContextMenuResult>;
     folders: {
       getFolders: () => Promise<RegisteredFolder[]>;