close, close others, close to the right functionality

jonathanlab · jonathanlab · commit 3cd63c933687 · 2025-11-25T17:11:06.000+01:00
diff --git a/apps/array/src/main/preload.ts b/apps/array/src/main/preload.ts
@@ -6,6 +6,7 @@ import type {
 } from "../shared/types/oauth";
 import type {
   FolderContextMenuResult,
+  TabContextMenuResult,
   TaskContextMenuResult,
 } from "./services/contextMenu.types.js";
 
@@ -328,6 +329,8 @@ contextBridge.exposeInMainWorld("electronAPI", {
     folderName: string,
   ): Promise<FolderContextMenuResult> =>
     ipcRenderer.invoke("show-folder-context-menu", folderId, folderName),
+  showTabContextMenu: (canClose: boolean): Promise<TabContextMenuResult> =>
+    ipcRenderer.invoke("show-tab-context-menu", canClose),
   folders: {
     getFolders: (): Promise<
       Array<{
diff --git a/apps/array/src/main/services/contextMenu.ts b/apps/array/src/main/services/contextMenu.ts
@@ -2,12 +2,15 @@ import { Menu, type MenuItemConstructorOptions } from "electron";
 import { createIpcService } from "../ipc/createIpcService.js";
 import type {
   FolderContextMenuResult,
+  TabContextMenuResult,
   TaskContextMenuResult,
 } from "./contextMenu.types.js";
 
 export type {
   FolderContextMenuAction,
   FolderContextMenuResult,
+  TabContextMenuAction,
+  TabContextMenuResult,
   TaskContextMenuAction,
   TaskContextMenuResult,
 } from "./contextMenu.types.js";
@@ -66,3 +69,32 @@ export const showFolderContextMenuService = createIpcService({
     });
   },
 });
+
+export const showTabContextMenuService = createIpcService({
+  channel: "show-tab-context-menu",
+  handler: async (_event, canClose: boolean): Promise<TabContextMenuResult> => {
+    return new Promise((resolve) => {
+      const template: MenuItemConstructorOptions[] = [
+        {
+          label: "Close tab",
+          enabled: canClose,
+          click: () => resolve({ action: "close" }),
+        },
+        { type: "separator" },
+        {
+          label: "Close other tabs",
+          click: () => resolve({ action: "close-others" }),
+        },
+        {
+          label: "Close tabs to the right",
+          click: () => resolve({ action: "close-right" }),
+        },
+      ];
+
+      const menu = Menu.buildFromTemplate(template);
+      menu.popup({
+        callback: () => resolve({ action: null }),
+      });
+    });
+  },
+});
diff --git a/apps/array/src/main/services/contextMenu.types.ts b/apps/array/src/main/services/contextMenu.types.ts
@@ -2,6 +2,12 @@ export type TaskContextMenuAction = "rename" | "duplicate" | "delete" | null;
 
 export type FolderContextMenuAction = "remove" | null;
 
+export type TabContextMenuAction =
+  | "close"
+  | "close-others"
+  | "close-right"
+  | null;
+
 export interface TaskContextMenuResult {
   action: TaskContextMenuAction;
 }
@@ -10,6 +16,10 @@ export interface FolderContextMenuResult {
   action: FolderContextMenuAction;
 }
 
+export interface TabContextMenuResult {
+  action: TabContextMenuAction;
+}
+
 declare global {
   interface IElectronAPI {
     showTaskContextMenu: (
diff --git a/apps/array/src/renderer/features/panels/components/DraggableTab.tsx b/apps/array/src/renderer/features/panels/components/DraggableTab.tsx
@@ -2,15 +2,19 @@ import { useSortable } from "@dnd-kit/react/sortable";
 import { Cross2Icon } from "@radix-ui/react-icons";
 import { Box, Flex, IconButton, Text } from "@radix-ui/themes";
 import type React from "react";
+import { useCallback } from "react";
 
 interface DraggableTabProps {
   tabId: string;
   panelId: string;
   label: string;
   isActive: boolean;
   index: number;
+  closeable?: boolean;
   onSelect: () => void;
   onClose?: () => void;
+  onCloseOthers?: () => void;
+  onCloseToRight?: () => void;
   icon?: React.ReactNode;
   badge?: React.ReactNode;
   hasUnsavedChanges?: boolean;
@@ -22,8 +26,11 @@ export const DraggableTab: React.FC<DraggableTabProps> = ({
   label,
   isActive,
   index,
+  closeable = true,
   onSelect,
   onClose,
+  onCloseOthers,
+  onCloseToRight,
   icon,
   badge,
   hasUnsavedChanges,
@@ -39,6 +46,25 @@ export const DraggableTab: React.FC<DraggableTabProps> = ({
     data: { tabId, panelId, type: "tab" },
   });
 
+  const handleContextMenu = useCallback(
+    async (e: React.MouseEvent) => {
+      e.preventDefault();
+      const result = await window.electronAPI.showTabContextMenu(closeable);
+      switch (result.action) {
+        case "close":
+          onClose?.();
+          break;
+        case "close-others":
+          onCloseOthers?.();
+          break;
+        case "close-right":
+          onCloseToRight?.();
+          break;
+      }
+    },
+    [closeable, onClose, onCloseOthers, onCloseToRight],
+  );
+
   return (
     <Flex
       ref={ref}
@@ -50,14 +76,15 @@ export const DraggableTab: React.FC<DraggableTabProps> = ({
       px="4"
       className="group relative cursor-grab select-none border-r border-b-2 transition-colors"
       style={{
-        backgroundColor: isActive ? "var(--accent-3)" : "transparent",
+        backgroundColor: "transparent",
         borderRightColor: "var(--gray-6)",
-        borderBottomColor: isActive ? "var(--accent-8)" : "transparent",
+        borderBottomColor: isActive ? "var(--accent-10)" : "transparent",
         color: isActive ? "var(--accent-12)" : "var(--gray-11)",
         opacity: isDragging ? 0.5 : 1,
-        minHeight: "40px",
+        minHeight: "32px",
       }}
       onClick={onSelect}
+      onContextMenu={handleContextMenu}
       onMouseEnter={(e) => {
         if (!isActive) {
           e.currentTarget.style.backgroundColor = "var(--gray-3)";
diff --git a/apps/array/src/renderer/features/panels/components/LeafNodeRenderer.tsx b/apps/array/src/renderer/features/panels/components/LeafNodeRenderer.tsx
@@ -9,6 +9,8 @@ interface LeafNodeRendererProps {
   taskId: string;
   task: Task;
   closeTab: (taskId: string, panelId: string, tabId: string) => void;
+  closeOtherTabs: (panelId: string, tabId: string) => void;
+  closeTabsToRight: (panelId: string, tabId: string) => void;
   draggingTabId: string | null;
   draggingTabPanelId: string | null;
   onActiveTabChange: (panelId: string, tabId: string) => void;
@@ -19,6 +21,8 @@ export const LeafNodeRenderer: React.FC<LeafNodeRendererProps> = ({
   taskId,
   task,
   closeTab,
+  closeOtherTabs,
+  closeTabsToRight,
   draggingTabId,
   draggingTabPanelId,
   onActiveTabChange,
@@ -41,6 +45,8 @@ export const LeafNodeRenderer: React.FC<LeafNodeRendererProps> = ({
       panelId={node.id}
       content={contentWithComponents}
       onActiveTabChange={onActiveTabChange}
+      onCloseOtherTabs={closeOtherTabs}
+      onCloseTabsToRight={closeTabsToRight}
       draggingTabId={draggingTabId}
       draggingTabPanelId={draggingTabPanelId}
     />
diff --git a/apps/array/src/renderer/features/panels/components/PanelLayout.tsx b/apps/array/src/renderer/features/panels/components/PanelLayout.tsx
@@ -35,6 +35,20 @@ const PanelLayoutRenderer: React.FC<{
     [layoutState, taskId],
   );
 
+  const handleCloseOtherTabs = useCallback(
+    (panelId: string, tabId: string) => {
+      layoutState.closeOtherTabs(taskId, panelId, tabId);
+    },
+    [layoutState, taskId],
+  );
+
+  const handleCloseTabsToRight = useCallback(
+    (panelId: string, tabId: string) => {
+      layoutState.closeTabsToRight(taskId, panelId, tabId);
+    },
+    [layoutState, taskId],
+  );
+
   const handleLayout = useCallback(
     (groupId: string, sizes: number[]) => {
       layoutState.updateSizes(taskId, groupId, sizes);
@@ -51,6 +65,8 @@ const PanelLayoutRenderer: React.FC<{
             taskId={taskId}
             task={task}
             closeTab={layoutState.closeTab}
+            closeOtherTabs={handleCloseOtherTabs}
+            closeTabsToRight={handleCloseTabsToRight}
             draggingTabId={layoutState.draggingTabId}
             draggingTabPanelId={layoutState.draggingTabPanelId}
             onActiveTabChange={handleSetActiveTab}
@@ -71,7 +87,16 @@ const PanelLayoutRenderer: React.FC<{
 
       return null;
     },
-    [taskId, task, layoutState, handleSetActiveTab, setGroupRef, handleLayout],
+    [
+      taskId,
+      task,
+      layoutState,
+      handleSetActiveTab,
+      handleCloseOtherTabs,
+      handleCloseTabsToRight,
+      setGroupRef,
+      handleLayout,
+    ],
   );
 
   return <>{renderNode(node)}</>;
diff --git a/apps/array/src/renderer/features/panels/components/PanelTab.tsx b/apps/array/src/renderer/features/panels/components/PanelTab.tsx
@@ -9,8 +9,11 @@ interface PanelTabProps {
   isActive: boolean;
   index: number;
   draggable?: boolean;
+  closeable?: boolean;
   onSelect: () => void;
   onClose?: () => void;
+  onCloseOthers?: () => void;
+  onCloseToRight?: () => void;
   icon?: React.ReactNode;
   badge?: React.ReactNode;
   hasUnsavedChanges?: boolean;
@@ -23,8 +26,11 @@ export const PanelTab: React.FC<PanelTabProps> = ({
   isActive,
   index,
   draggable = true,
+  closeable = true,
   onSelect,
   onClose,
+  onCloseOthers,
+  onCloseToRight,
   icon,
   badge,
   hasUnsavedChanges,
@@ -49,8 +55,11 @@ export const PanelTab: React.FC<PanelTabProps> = ({
       label={label}
       isActive={isActive}
       index={index}
+      closeable={closeable}
       onSelect={onSelect}
       onClose={onClose}
+      onCloseOthers={onCloseOthers}
+      onCloseToRight={onCloseToRight}
       icon={icon}
       badge={badge}
       hasUnsavedChanges={hasUnsavedChanges}
diff --git a/apps/array/src/renderer/features/panels/components/TabbedPanel.tsx b/apps/array/src/renderer/features/panels/components/TabbedPanel.tsx
@@ -9,6 +9,8 @@ interface TabbedPanelProps {
   panelId: string;
   content: PanelContent;
   onActiveTabChange?: (panelId: string, tabId: string) => void;
+  onCloseOtherTabs?: (panelId: string, tabId: string) => void;
+  onCloseTabsToRight?: (panelId: string, tabId: string) => void;
   draggingTabId?: string | null;
   draggingTabPanelId?: string | null;
 }
@@ -17,6 +19,8 @@ export const TabbedPanel: React.FC<TabbedPanelProps> = ({
   panelId,
   content,
   onActiveTabChange,
+  onCloseOtherTabs,
+  onCloseTabsToRight,
   draggingTabId = null,
   draggingTabPanelId = null,
 }) => {
@@ -43,8 +47,8 @@ export const TabbedPanel: React.FC<TabbedPanelProps> = ({
           className="flex-shrink-0 overflow-hidden border-b"
           style={{
             borderColor: "var(--gray-6)",
-            minHeight: "40px",
-            height: "40px",
+            minHeight: "32px",
+            height: "32px",
           }}
         >
           {content.tabs.map((tab, index) => (
@@ -56,6 +60,7 @@ export const TabbedPanel: React.FC<TabbedPanelProps> = ({
               isActive={tab.id === content.activeTabId}
               index={index}
               draggable={tab.draggable}
+              closeable={tab.closeable !== false}
               onSelect={() => {
                 onActiveTabChange?.(panelId, tab.id);
                 tab.onSelect?.();
@@ -65,6 +70,8 @@ export const TabbedPanel: React.FC<TabbedPanelProps> = ({
                   ? () => handleCloseTab(tab.id)
                   : undefined
               }
+              onCloseOthers={() => onCloseOtherTabs?.(panelId, tab.id)}
+              onCloseToRight={() => onCloseTabsToRight?.(panelId, tab.id)}
               icon={tab.icon}
               hasUnsavedChanges={tab.hasUnsavedChanges}
               badge={tab.badge}
diff --git a/apps/array/src/renderer/features/panels/hooks/usePanelLayoutHooks.tsx b/apps/array/src/renderer/features/panels/hooks/usePanelLayoutHooks.tsx
@@ -11,6 +11,8 @@ export interface PanelLayoutState {
   updateSizes: (taskId: string, groupId: string, sizes: number[]) => void;
   setActiveTab: (taskId: string, panelId: string, tabId: string) => void;
   closeTab: (taskId: string, panelId: string, tabId: string) => void;
+  closeOtherTabs: (taskId: string, panelId: string, tabId: string) => void;
+  closeTabsToRight: (taskId: string, panelId: string, tabId: string) => void;
   draggingTabId: string | null;
   draggingTabPanelId: string | null;
 }
@@ -22,6 +24,8 @@ export function usePanelLayoutState(taskId: string): PanelLayoutState {
         updateSizes: state.updateSizes,
         setActiveTab: state.setActiveTab,
         closeTab: state.closeTab,
+        closeOtherTabs: state.closeOtherTabs,
+        closeTabsToRight: state.closeTabsToRight,
         draggingTabId: state.getLayout(taskId)?.draggingTabId ?? null,
         draggingTabPanelId: state.getLayout(taskId)?.draggingTabPanelId ?? null,
       }),
diff --git a/apps/array/src/renderer/features/panels/store/panelLayoutStore.ts b/apps/array/src/renderer/features/panels/store/panelLayoutStore.ts
diff --git a/apps/array/src/renderer/types/electron.d.ts b/apps/array/src/renderer/types/electron.d.ts
