refactor: move context-menu service to trpc (#271)

Author: jonathanlab

apps/array/src/main/di/container.ts

@@ -1,5 +1,6 @@
 import "reflect-metadata";
 import { Container } from "inversify";
+import { ContextMenuService } from "../services/context-menu/service.js";
 import { GitService } from "../services/git/service.js";
 import { MAIN_TOKENS } from "./tokens.js";
 
@@ -11,6 +12,9 @@ export const container = new Container({
 });
 
 // Bind services
+container
+  .bind<ContextMenuService>(MAIN_TOKENS.ContextMenuService)
+  .to(ContextMenuService);
 container.bind<GitService>(MAIN_TOKENS.GitService).to(GitService);
 
 export function get<T>(token: symbol): T {

apps/array/src/main/di/tokens.ts

@@ -6,5 +6,6 @@
  */
 export const MAIN_TOKENS = Object.freeze({
   // Services
+  ContextMenuService: Symbol.for("Main.ContextMenuService"),
   GitService: Symbol.for("Main.GitService"),
 });

apps/array/src/main/preload.ts

@@ -11,13 +11,6 @@ import type {
   WorktreeInfo,
 } from "../shared/types";
 import type { CloudRegion, OAuthTokenResponse } from "../shared/types/oauth";
-import type {
-  ExternalAppContextMenuResult,
-  FolderContextMenuResult,
-  SplitContextMenuResult,
-  TabContextMenuResult,
-  TaskContextMenuResult,
-} from "./services/contextMenu.types.js";
 import "electron-log/preload";
 
 process.once("loaded", () => {
@@ -262,41 +255,6 @@ contextBridge.exposeInMainWorld("electronAPI", {
   ): (() => void) => createIpcListener(`shell:data:${sessionId}`, listener),
   onShellExit: (sessionId: string, listener: () => void): (() => void) =>
     createVoidIpcListener(`shell:exit:${sessionId}`, listener),
-  // Context Menu API
-  showTaskContextMenu: (
-    taskId: string,
-    taskTitle: string,
-    worktreePath?: string,
-  ): Promise<TaskContextMenuResult> =>
-    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,
-      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,
-    options?: { showCollapseAll?: boolean },
-  ): Promise<ExternalAppContextMenuResult> =>
-    ipcRenderer.invoke("show-file-context-menu", filePath, options),
   folders: {
     getFolders: (): Promise<RegisteredFolder[]> =>
       ipcRenderer.invoke("get-folders"),

apps/array/src/main/services/context-menu/service.ts

@@ -0,0 +1,256 @@
+import {
+  dialog,
+  Menu,
+  type MenuItemConstructorOptions,
+  nativeImage,
+} from "electron";
+import { injectable } from "inversify";
+import type { DetectedApplication } from "../../../shared/types.js";
+import { getMainWindow } from "../../trpc/context.js";
+import { externalAppsStore, getOrRefreshApps } from "../externalApps.js";
+import type {
+  ActionItemDef,
+  ConfirmOptions,
+  FileAction,
+  FileContextMenuInput,
+  FileContextMenuResult,
+  FolderAction,
+  FolderContextMenuInput,
+  FolderContextMenuResult,
+  MenuItemDef,
+  SeparatorDef,
+  SplitContextMenuResult,
+  SplitDirection,
+  TabAction,
+  TabContextMenuInput,
+  TabContextMenuResult,
+  TaskAction,
+  TaskContextMenuInput,
+  TaskContextMenuResult,
+} from "./types.js";
+
+@injectable()
+export class ContextMenuService {
+  private readonly ICON_SIZE = 16;
+
+  async showTaskContextMenu(
+    input: TaskContextMenuInput,
+  ): Promise<TaskContextMenuResult> {
+    const { taskTitle, worktreePath } = input;
+    const apps = await getOrRefreshApps();
+
+    return this.showMenu<TaskAction>([
+      this.item("Rename", { type: "rename" }),
+      this.item("Duplicate", { type: "duplicate" }),
+      this.separator(),
+      this.item(
+        "Delete",
+        { type: "delete" },
+        {
+          confirm: {
+            title: "Delete Task",
+            message: `Delete "${taskTitle}"?`,
+            detail: worktreePath
+              ? "This will permanently delete the task and its associated worktree."
+              : "This will permanently delete the task.",
+            confirmLabel: "Delete",
+          },
+        },
+      ),
+      ...(worktreePath
+        ? [this.separator(), ...this.externalAppItems<TaskAction>(apps)]
+        : []),
+    ]);
+  }
+
+  async showFolderContextMenu(
+    input: FolderContextMenuInput,
+  ): Promise<FolderContextMenuResult> {
+    const { folderName, folderPath } = input;
+    const apps = await getOrRefreshApps();
+
+    return this.showMenu<FolderAction>([
+      this.item(
+        "Remove folder",
+        { type: "remove" },
+        {
+          confirm: {
+            title: "Remove Folder",
+            message: `Remove "${folderName}" from Array?`,
+            detail:
+              "This will clean up any worktrees but keep your folder and tasks intact.",
+            confirmLabel: "Remove",
+          },
+        },
+      ),
+      ...(folderPath
+        ? [this.separator(), ...this.externalAppItems<FolderAction>(apps)]
+        : []),
+    ]);
+  }
+
+  async showTabContextMenu(
+    input: TabContextMenuInput,
+  ): Promise<TabContextMenuResult> {
+    const { canClose, filePath } = input;
+    const apps = await getOrRefreshApps();
+
+    return this.showMenu<TabAction>([
+      this.item(
+        "Close tab",
+        { type: "close" },
+        {
+          accelerator: "CmdOrCtrl+W",
+          enabled: canClose,
+        },
+      ),
+      this.item("Close other tabs", { type: "close-others" }),
+      this.item("Close tabs to the right", { type: "close-right" }),
+      ...(filePath
+        ? [this.separator(), ...this.externalAppItems<TabAction>(apps)]
+        : []),
+    ]);
+  }
+
+  async showSplitContextMenu(): Promise<SplitContextMenuResult> {
+    const result = await this.showMenu<SplitDirection>([
+      this.item("Split right", "right"),
+      this.item("Split left", "left"),
+      this.item("Split down", "down"),
+      this.item("Split up", "up"),
+    ]);
+    return { direction: result.action };
+  }
+
+  async showFileContextMenu(
+    input: FileContextMenuInput,
+  ): Promise<FileContextMenuResult> {
+    const apps = await getOrRefreshApps();
+
+    return this.showMenu<FileAction>([
+      ...(input.showCollapseAll
+        ? [
+            this.item<FileAction>("Collapse All", { type: "collapse-all" }),
+            this.separator(),
+          ]
+        : []),
+      ...this.externalAppItems<FileAction>(apps),
+    ]);
+  }
+
+  private externalAppItems<T>(apps: DetectedApplication[]): MenuItemDef<T>[] {
+    if (apps.length === 0) {
+      return [this.disabled("No external apps detected")];
+    }
+
+    const lastUsedAppId =
+      externalAppsStore.get("externalAppsPrefs")?.lastUsedApp;
+    const lastUsedApp = apps.find((app) => app.id === lastUsedAppId) || apps[0];
+    const openIn = (appId: string): T =>
+      ({ type: "external-app", action: { type: "open-in-app", appId } }) as T;
+    const copyPath: T = {
+      type: "external-app",
+      action: { type: "copy-path" },
+    } as T;
+
+    return [
+      this.item(`Open in ${lastUsedApp.name}`, openIn(lastUsedApp.id)),
+      {
+        type: "submenu",
+        label: "Open in",
+        items: apps.map((app) => ({
+          label: app.name,
+          icon: app.icon
+            ? nativeImage
+                .createFromDataURL(app.icon)
+                .resize({ width: this.ICON_SIZE, height: this.ICON_SIZE })
+            : undefined,
+          action: openIn(app.id),
+        })),
+      },
+      this.item("Copy Path", copyPath, { accelerator: "CmdOrCtrl+Shift+C" }),
+    ];
+  }
+
+  private item<T>(
+    label: string,
+    action: T,
+    options?: Partial<Omit<ActionItemDef<T>, "type" | "label" | "action">>,
+  ): ActionItemDef<T> {
+    return { type: "item", label, action, ...options };
+  }
+
+  private separator(): SeparatorDef {
+    return { type: "separator" };
+  }
+
+  private disabled(label: string): MenuItemDef<never> {
+    return { type: "disabled", label };
+  }
+
+  private showMenu<T>(items: MenuItemDef<T>[]): Promise<{ action: T | null }> {
+    return new Promise((resolve) => {
+      let pendingConfirm = false;
+
+      const toMenuItem = (def: MenuItemDef<T>): MenuItemConstructorOptions => {
+        switch (def.type) {
+          case "separator":
+            return { type: "separator" };
+
+          case "disabled":
+            return { label: def.label, enabled: false };
+
+          case "submenu":
+            return {
+              label: def.label,
+              submenu: def.items.map((sub) => ({
+                label: sub.label,
+                icon: sub.icon,
+                click: () => resolve({ action: sub.action }),
+              })),
+            };
+
+          case "item": {
+            const confirmOptions = def.confirm;
+            const onClick = confirmOptions
+              ? async () => {
+                  pendingConfirm = true;
+                  const confirmed = await this.confirm(confirmOptions);
+                  resolve({ action: confirmed ? def.action : null });
+                }
+              : () => resolve({ action: def.action });
+
+            return {
+              label: def.label,
+              accelerator: def.accelerator,
+              enabled: def.enabled,
+              icon: def.icon,
+              click: onClick,
+            };
+          }
+        }
+      };
+
+      Menu.buildFromTemplate(items.map(toMenuItem)).popup({
+        callback: () => {
+          if (!pendingConfirm) resolve({ action: null });
+        },
+      });
+    });
+  }
+
+  private async confirm(options: ConfirmOptions): Promise<boolean> {
+    const win = getMainWindow();
+    const result = await dialog.showMessageBox({
+      ...(win ? { parent: win } : {}),
+      type: "question",
+      title: options.title,
+      message: options.message,
+      detail: options.detail,
+      buttons: ["Cancel", options.confirmLabel],
+      defaultId: 1,
+      cancelId: 0,
+    });
+    return result.response === 1;
+  }
+}