feat: context menus for opening external editor (#170)

Author: jonathanlab

apps/array/src/main/preload.ts

@@ -1,6 +1,7 @@
 import { contextBridge, type IpcRendererEvent, ipcRenderer } from "electron";
 import type { CloudRegion, OAuthTokenResponse } from "../shared/types/oauth";
 import type {
+  ExternalAppContextMenuResult,
   FolderContextMenuResult,
   SplitContextMenuResult,
   TabContextMenuResult,
@@ -319,17 +320,36 @@ contextBridge.exposeInMainWorld("electronAPI", {
   showTaskContextMenu: (
     taskId: string,
     taskTitle: string,
+    worktreePath?: string,
   ): Promise<TaskContextMenuResult> =>
-    ipcRenderer.invoke("show-task-context-menu", taskId, taskTitle),
+    ipcRenderer.invoke(
+      "show-task-context-menu",
+      taskId,
+      taskTitle,
+      worktreePath,
+    ),
   showFolderContextMenu: (
     folderId: string,
     folderName: string,
+    folderPath?: string,
   ): Promise<FolderContextMenuResult> =>
-    ipcRenderer.invoke("show-folder-context-menu", folderId, folderName),
-  showTabContextMenu: (canClose: boolean): Promise<TabContextMenuResult> =>
-    ipcRenderer.invoke("show-tab-context-menu", canClose),
+    ipcRenderer.invoke(
+      "show-folder-context-menu",
+      folderId,
+      folderName,
+      folderPath,
+    ),
+  showTabContextMenu: (
+    canClose: boolean,
+    filePath?: string,
+  ): Promise<TabContextMenuResult> =>
+    ipcRenderer.invoke("show-tab-context-menu", canClose, filePath),
   showSplitContextMenu: (): Promise<SplitContextMenuResult> =>
     ipcRenderer.invoke("show-split-context-menu"),
+  showFileContextMenu: (
+    filePath: string,
+  ): Promise<ExternalAppContextMenuResult> =>
+    ipcRenderer.invoke("show-file-context-menu", filePath),
   folders: {
     getFolders: (): Promise<
       Array<{

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

@@ -1,13 +1,16 @@
-import { Menu, type MenuItemConstructorOptions } from "electron";
+import { Menu, type MenuItemConstructorOptions, nativeImage } from "electron";
 import { createIpcService } from "../ipc/createIpcService.js";
 import type {
+  ExternalAppContextMenuResult,
   FolderContextMenuResult,
   SplitContextMenuResult,
   TabContextMenuResult,
   TaskContextMenuResult,
 } from "./contextMenu.types.js";
+import { externalAppsStore, getOrRefreshApps } from "./externalApps.js";
 
 export type {
+  ExternalAppContextMenuResult,
   FolderContextMenuAction,
   FolderContextMenuResult,
   SplitContextMenuResult,
@@ -18,12 +21,84 @@ export type {
   TaskContextMenuResult,
 } from "./contextMenu.types.js";
 
+const ICON_SIZE = 16;
+
+function showContextMenu<T>(
+  template: MenuItemConstructorOptions[],
+  defaultResult: T,
+): Promise<T> {
+  return new Promise((resolve) => {
+    const menu = Menu.buildFromTemplate(template);
+    menu.popup({
+      callback: () => resolve(defaultResult),
+    });
+  });
+}
+
+async function buildExternalAppsMenuItems(
+  _targetPath: string,
+  resolve: (result: ExternalAppContextMenuResult) => void,
+): Promise<MenuItemConstructorOptions[]> {
+  const apps = await getOrRefreshApps();
+  const prefs = externalAppsStore.get("externalAppsPrefs");
+  const lastUsedAppId = prefs.lastUsedApp;
+
+  // Handle no apps detected
+  if (apps.length === 0) {
+    return [
+      {
+        label: "No external apps detected",
+        enabled: false,
+      },
+    ];
+  }
+
+  // Find last used app or default to first
+  const lastUsedApp = apps.find((app) => app.id === lastUsedAppId) || apps[0];
+
+  const menuItems: MenuItemConstructorOptions[] = [
+    {
+      label: `Open in ${lastUsedApp.name}`,
+      click: () =>
+        resolve({
+          action: { type: "open-in-app", appId: lastUsedApp.id },
+        }),
+    },
+    {
+      label: "Open in",
+      submenu: apps.map((app) => ({
+        label: app.name,
+        icon: app.icon
+          ? nativeImage
+              .createFromDataURL(app.icon)
+              .resize({ width: ICON_SIZE, height: ICON_SIZE })
+          : undefined,
+        click: () =>
+          resolve({
+            action: { type: "open-in-app", appId: app.id },
+          }),
+      })),
+    },
+    {
+      label: "Copy Path",
+      accelerator: "CmdOrCtrl+Shift+C",
+      click: () =>
+        resolve({
+          action: { type: "copy-path" },
+        }),
+    },
+  ];
+
+  return menuItems;
+}
+
 export const showTaskContextMenuService = createIpcService({
   channel: "show-task-context-menu",
   handler: async (
     _event,
     _taskId: string,
     _taskTitle: string,
+    worktreePath?: string,
   ): Promise<TaskContextMenuResult> => {
     return new Promise((resolve) => {
       const template: MenuItemConstructorOptions[] = [
@@ -42,10 +117,20 @@ export const showTaskContextMenuService = createIpcService({
         },
       ];
 
-      const menu = Menu.buildFromTemplate(template);
-      menu.popup({
-        callback: () => resolve({ action: null }),
-      });
+      const setupMenu = async () => {
+        if (worktreePath) {
+          template.push({ type: "separator" });
+          const externalAppsItems = await buildExternalAppsMenuItems(
+            worktreePath,
+            resolve,
+          );
+          template.push(...externalAppsItems);
+        }
+
+        showContextMenu(template, { action: null }).then(resolve);
+      };
+
+      setupMenu();
     });
   },
 });
@@ -56,6 +141,7 @@ export const showFolderContextMenuService = createIpcService({
     _event,
     _folderId: string,
     _folderName: string,
+    folderPath?: string,
   ): Promise<FolderContextMenuResult> => {
     return new Promise((resolve) => {
       const template: MenuItemConstructorOptions[] = [
@@ -65,17 +151,31 @@ export const showFolderContextMenuService = createIpcService({
         },
       ];
 
-      const menu = Menu.buildFromTemplate(template);
-      menu.popup({
-        callback: () => resolve({ action: null }),
-      });
+      const setupMenu = async () => {
+        if (folderPath) {
+          template.push({ type: "separator" });
+          const externalAppsItems = await buildExternalAppsMenuItems(
+            folderPath,
+            resolve,
+          );
+          template.push(...externalAppsItems);
+        }
+
+        showContextMenu(template, { action: null }).then(resolve);
+      };
+
+      setupMenu();
     });
   },
 });
 
 export const showTabContextMenuService = createIpcService({
   channel: "show-tab-context-menu",
-  handler: async (_event, canClose: boolean): Promise<TabContextMenuResult> => {
+  handler: async (
+    _event,
+    canClose: boolean,
+    filePath?: string,
+  ): Promise<TabContextMenuResult> => {
     return new Promise((resolve) => {
       const template: MenuItemConstructorOptions[] = [
         {
@@ -84,7 +184,6 @@ export const showTabContextMenuService = createIpcService({
           enabled: canClose,
           click: () => resolve({ action: "close" }),
         },
-        { type: "separator" },
         {
           label: "Close other tabs",
           click: () => resolve({ action: "close-others" }),
@@ -95,10 +194,20 @@ export const showTabContextMenuService = createIpcService({
         },
       ];
 
-      const menu = Menu.buildFromTemplate(template);
-      menu.popup({
-        callback: () => resolve({ action: null }),
-      });
+      const setupMenu = async () => {
+        if (filePath) {
+          template.push({ type: "separator" });
+          const externalAppsItems = await buildExternalAppsMenuItems(
+            filePath,
+            resolve,
+          );
+          template.push(...externalAppsItems);
+        }
+
+        showContextMenu(template, { action: null }).then(resolve);
+      };
+
+      setupMenu();
     });
   },
 });
@@ -126,10 +235,28 @@ export const showSplitContextMenuService = createIpcService({
         },
       ];
 
-      const menu = Menu.buildFromTemplate(template);
-      menu.popup({
-        callback: () => resolve({ direction: null }),
-      });
+      showContextMenu(template, { direction: null }).then(resolve);
+    });
+  },
+});
+
+export const showFileContextMenuService = createIpcService({
+  channel: "show-file-context-menu",
+  handler: async (
+    _event,
+    filePath: string,
+  ): Promise<ExternalAppContextMenuResult> => {
+    return new Promise((resolve) => {
+      const setupMenu = async () => {
+        const externalAppsItems = await buildExternalAppsMenuItems(
+          filePath,
+          resolve,
+        );
+
+        showContextMenu(externalAppsItems, { action: null }).then(resolve);
+      };
+
+      setupMenu();
     });
   },
 });

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

@@ -1,12 +1,26 @@
-export type TaskContextMenuAction = "rename" | "duplicate" | "delete" | null;
+// External app actions (discriminated union for type safety)
+export type ExternalAppAction =
+  | { type: "open-in-app"; appId: string }
+  | { type: "copy-path" }
+  | null;
+
+export interface ExternalAppContextMenuResult {
+  action: ExternalAppAction;
+}
 
-export type FolderContextMenuAction = "remove" | null;
+export type TaskContextMenuAction =
+  | "rename"
+  | "duplicate"
+  | "delete"
+  | ExternalAppAction;
+
+export type FolderContextMenuAction = "remove" | ExternalAppAction;
 
 export type TabContextMenuAction =
   | "close"
   | "close-others"
   | "close-right"
-  | null;
+  | ExternalAppAction;
 
 export type SplitDirection = "left" | "right" | "up" | "down" | null;
 
@@ -31,6 +45,7 @@ declare global {
     showTaskContextMenu: (
       taskId: string,
       taskTitle: string,
+      worktreePath?: string,
     ) => Promise<TaskContextMenuResult>;
   }
 }

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

@@ -8,6 +8,7 @@ import type {
 } from "../../shared/types";
 import { logger } from "../lib/logger";
 import { clearAllStoreData, foldersStore } from "./store";
+import { deleteWorktreeIfExists } from "./worktreeUtils";
 
 const log = logger.scope("folders");
 
@@ -51,6 +52,19 @@ async function removeFolder(folderId: string): Promise<void> {
   const folders = foldersStore.get("folders", []);
   const associations = foldersStore.get("taskAssociations", []);
 
+  // Delete worktrees for all tasks associated with this folder
+  const associationsToRemove = associations.filter(
+    (a) => a.folderId === folderId,
+  );
+  for (const assoc of associationsToRemove) {
+    if (assoc.worktree) {
+      await deleteWorktreeIfExists(
+        assoc.folderPath,
+        assoc.worktree.worktreePath,
+      );
+    }
+  }
+
   const filtered = folders.filter((f) => f.id !== folderId);
   const filteredAssociations = associations.filter(
     (a) => a.folderId !== folderId,
@@ -130,6 +144,13 @@ async function updateTaskWorktree(
 
 async function removeTaskAssociation(taskId: string): Promise<void> {
   const associations = foldersStore.get("taskAssociations", []);
+
+  // Delete worktree if it exists
+  const assoc = associations.find((a) => a.taskId === taskId);
+  if (assoc?.worktree) {
+    await deleteWorktreeIfExists(assoc.folderPath, assoc.worktree.worktreePath);
+  }
+
   const filtered = associations.filter((a) => a.taskId !== taskId);
   foldersStore.set("taskAssociations", filtered);
 }
@@ -139,7 +160,17 @@ async function clearTaskWorktree(taskId: string): Promise<void> {
 
   const existingIndex = associations.findIndex((a) => a.taskId === taskId);
   if (existingIndex >= 0) {
-    const { worktree: _, ...rest } = associations[existingIndex];
+    const assoc = associations[existingIndex];
+
+    // Delete worktree if it exists
+    if (assoc.worktree) {
+      await deleteWorktreeIfExists(
+        assoc.folderPath,
+        assoc.worktree.worktreePath,
+      );
+    }
+
+    const { worktree: _, ...rest } = assoc;
     associations[existingIndex] = rest;
     foldersStore.set("taskAssociations", associations);
   }
@@ -220,7 +251,7 @@ export function registerFoldersIpc(): void {
     "clear-all-data",
     async (_event: IpcMainInvokeEvent): Promise<void> => {
       try {
-        clearAllStoreData();
+        await clearAllStoreData();
         log.info("Cleared all application data");
       } catch (error) {
         log.error("Failed to clear all data:", error);