feat: tab improvements and bug fixes (#162)

feat: tab improvements and bug fixes

different ui for  draggable and non draggable tabs

use panelmessage

static tabs and tab badges

close, close others, close to the right functionality

bg change  
  
swap tabs with cmd 1 to 9, close with cmd w  


![image.png](https://app.graphite.com/user-attachments/assets/36d532f6-27c2-499f-b70e-caf17b3499d9.png)

![image.png](https://app.graphite.com/user-attachments/assets/ad75c4c3-c3b8-4eba-86a1-99d0e98e18a7.png)

Author: jonathanlab

apps/array/src/main/preload.ts

@@ -6,6 +6,8 @@ import type {
 } from "../shared/types/oauth";
 import type {
   FolderContextMenuResult,
+  SplitContextMenuResult,
+  TabContextMenuResult,
   TaskContextMenuResult,
 } from "./services/contextMenu.types.js";
 
@@ -220,6 +222,13 @@ contextBridge.exposeInMainWorld("electronAPI", {
     ipcRenderer.invoke("get-changed-files-head", repoPath),
   getFileAtHead: (repoPath: string, filePath: string): Promise<string | null> =>
     ipcRenderer.invoke("get-file-at-head", repoPath, filePath),
+  getDiffStats: (
+    repoPath: string,
+  ): Promise<{
+    filesChanged: number;
+    linesAdded: number;
+    linesRemoved: number;
+  }> => ipcRenderer.invoke("get-diff-stats", repoPath),
   listDirectory: (
     dirPath: string,
   ): Promise<
@@ -302,6 +311,8 @@ contextBridge.exposeInMainWorld("electronAPI", {
     ipcRenderer.invoke("shell:check", sessionId),
   shellDestroy: (sessionId: string): Promise<void> =>
     ipcRenderer.invoke("shell:destroy", sessionId),
+  shellGetProcess: (sessionId: string): Promise<string | null> =>
+    ipcRenderer.invoke("shell:get-process", sessionId),
   onShellData: (
     sessionId: string,
     listener: (data: string) => void,
@@ -328,6 +339,10 @@ 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),
+  showSplitContextMenu: (): Promise<SplitContextMenuResult> =>
+    ipcRenderer.invoke("show-split-context-menu"),
   folders: {
     getFolders: (): Promise<
       Array<{

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

@@ -2,12 +2,18 @@ import { Menu, type MenuItemConstructorOptions } from "electron";
 import { createIpcService } from "../ipc/createIpcService.js";
 import type {
   FolderContextMenuResult,
+  SplitContextMenuResult,
+  TabContextMenuResult,
   TaskContextMenuResult,
 } from "./contextMenu.types.js";
 
 export type {
   FolderContextMenuAction,
   FolderContextMenuResult,
+  SplitContextMenuResult,
+  SplitDirection,
+  TabContextMenuAction,
+  TabContextMenuResult,
   TaskContextMenuAction,
   TaskContextMenuResult,
 } from "./contextMenu.types.js";
@@ -66,3 +72,64 @@ 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",
+          accelerator: "CmdOrCtrl+W",
+          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 }),
+      });
+    });
+  },
+});
+
+export const showSplitContextMenuService = createIpcService({
+  channel: "show-split-context-menu",
+  handler: async (_event): Promise<SplitContextMenuResult> => {
+    return new Promise((resolve) => {
+      const template: MenuItemConstructorOptions[] = [
+        {
+          label: "Split right",
+          click: () => resolve({ direction: "right" }),
+        },
+        {
+          label: "Split left",
+          click: () => resolve({ direction: "left" }),
+        },
+        {
+          label: "Split down",
+          click: () => resolve({ direction: "down" }),
+        },
+        {
+          label: "Split up",
+          click: () => resolve({ direction: "up" }),
+        },
+      ];
+
+      const menu = Menu.buildFromTemplate(template);
+      menu.popup({
+        callback: () => resolve({ direction: null }),
+      });
+    });
+  },
+});

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

@@ -2,6 +2,14 @@ export type TaskContextMenuAction = "rename" | "duplicate" | "delete" | null;
 
 export type FolderContextMenuAction = "remove" | null;
 
+export type TabContextMenuAction =
+  | "close"
+  | "close-others"
+  | "close-right"
+  | null;
+
+export type SplitDirection = "left" | "right" | "up" | "down" | null;
+
 export interface TaskContextMenuResult {
   action: TaskContextMenuAction;
 }
@@ -10,6 +18,14 @@ export interface FolderContextMenuResult {
   action: FolderContextMenuAction;
 }
 
+export interface TabContextMenuResult {
+  action: TabContextMenuAction;
+}
+
+export interface SplitContextMenuResult {
+  direction: SplitDirection;
+}
+
 declare global {
   interface IElectronAPI {
     showTaskContextMenu: (

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

@@ -242,6 +242,64 @@ const getFileAtHead = async (
   }
 };
 
+export interface DiffStats {
+  filesChanged: number;
+  linesAdded: number;
+  linesRemoved: number;
+}
+
+const getDiffStats = async (directoryPath: string): Promise<DiffStats> => {
+  try {
+    // git diff --numstat HEAD shows: added\tremoved\tfilename
+    const { stdout } = await execAsync("git diff --numstat HEAD", {
+      cwd: directoryPath,
+    });
+
+    let linesAdded = 0;
+    let linesRemoved = 0;
+    let filesChanged = 0;
+
+    for (const line of stdout.trim().split("\n").filter(Boolean)) {
+      const parts = line.split("\t");
+      if (parts.length >= 2) {
+        // Binary files show "-" for added/removed
+        const added = parts[0] === "-" ? 0 : parseInt(parts[0], 10);
+        const removed = parts[1] === "-" ? 0 : parseInt(parts[1], 10);
+        linesAdded += added;
+        linesRemoved += removed;
+        filesChanged++;
+      }
+    }
+
+    // Also count untracked files
+    const { stdout: statusOutput } = await execAsync("git status --porcelain", {
+      cwd: directoryPath,
+    });
+
+    for (const line of statusOutput.trim().split("\n").filter(Boolean)) {
+      const statusCode = line.substring(0, 2);
+      if (statusCode === "??") {
+        filesChanged++;
+        // Count lines in untracked file
+        const filePath = line.substring(3);
+        try {
+          const { stdout: wcOutput } = await execAsync(
+            `wc -l < "${filePath}"`,
+            { cwd: directoryPath },
+          );
+          linesAdded += parseInt(wcOutput.trim(), 10) || 0;
+        } catch {
+          // File might be binary or inaccessible
+        }
+      }
+    }
+
+    return { filesChanged, linesAdded, linesRemoved };
+  } catch {
+    return { filesChanged: 0, linesAdded: 0, linesRemoved: 0 };
+  }
+};
+
 export const findReposDirectory = async (): Promise<string | null> => {
   const platform = os.platform();
 
@@ -548,4 +606,14 @@ export function registerGitIpc(
       return getFileAtHead(directoryPath, filePath);
     },
   );
+
+  ipcMain.handle(
+    "get-diff-stats",
+    async (
+      _event: IpcMainInvokeEvent,
+      directoryPath: string,
+    ): Promise<DiffStats> => {
+      return getDiffStats(directoryPath);
+    },
+  );
 }

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

@@ -163,4 +163,19 @@ export function registerShellIpc(): void {
       sessions.delete(sessionId);
     },
   );
+
+  // Get foreground process name
+  ipcMain.handle(
+    "shell:get-process",
+    async (
+      _event: IpcMainInvokeEvent,
+      sessionId: string,
+    ): Promise<string | null> => {
+      const session = sessions.get(sessionId);
+      if (!session) {
+        return null;
+      }
+      return session.pty.process;
+    },
+  );
 }

apps/array/src/renderer/components/MainLayout.tsx

@@ -1,7 +1,6 @@
 import { MainSidebar } from "@components/MainSidebar";
 import { StatusBar } from "@components/StatusBar";
 import { UpdatePrompt } from "@components/UpdatePrompt";
-import { TopBar } from "@components/ui/topnav/TopBar";
 import { CommandMenu } from "@features/command/components/CommandMenu";
 import { usePanelLayoutStore } from "@features/panels/store/panelLayoutStore";
 import { SettingsView } from "@features/settings/components/SettingsView";
@@ -82,7 +81,6 @@ export function MainLayout() {
 
   return (
     <Flex direction="column" height="100vh">
-      <TopBar onSearchClick={() => setCommandMenuOpen(true)} />
       <Flex flexGrow="1" overflow="hidden">
         <MainSidebar />
 

apps/array/src/renderer/components/ui/sidebar/Sidebar.tsx

@@ -1,4 +1,5 @@
 import { SIDEBAR_BORDER } from "@components/ui/sidebar/Context";
+import { SidebarTrigger } from "@components/ui/sidebar/SidebarTrigger";
 import { Box, Flex } from "@radix-ui/themes";
 import { useSidebarStore } from "@stores/sidebarStore";
 import React from "react";
@@ -65,6 +66,18 @@ export const Sidebar: React.FC<{ children: React.ReactNode }> = ({
           height: "100%",
         }}
       >
+        <Flex
+          align="center"
+          className="drag"
+          px="2"
+          style={{
+            height: "40px",
+            minHeight: "40px",
+            borderBottom: SIDEBAR_BORDER,
+          }}
+        >
+          <SidebarTrigger />
+        </Flex>
         {children}
       </Flex>
       {open && (

apps/array/src/renderer/components/ui/sidebar/SidebarTreeItem.tsx

@@ -71,14 +71,10 @@ export function SidebarTreeItem({
           )}
           {line.tooltip ? (
             <Tooltip content={line.tooltip}>
-              <span style={{ color: line.customColor, fontSize: "13px" }}>
-                {line.label}
-              </span>
+              <span style={{ color: line.customColor }}>{line.label}</span>
             </Tooltip>
           ) : (
-            <span style={{ color: line.customColor, fontSize: "13px" }}>
-              {line.label}
-            </span>
+            <span style={{ color: line.customColor }}>{line.label}</span>
           )}
           {line.hasChildren && (
             <span style={{ display: "flex", alignItems: "center" }}>

apps/array/src/renderer/components/ui/topnav/TopBar.tsx

@@ -21,7 +21,7 @@ export function DiffEditorPanel({
 
   const { data: changedFiles = [] } = useQuery({
     queryKey: ["changed-files-head", repoPath],
-    queryFn: () => window.electronAPI.getChangedFilesHead(repoPath!),
+    queryFn: () => window.electronAPI.getChangedFilesHead(repoPath as string),
     enabled: !!repoPath,
     staleTime: Infinity,
   });
@@ -34,14 +34,16 @@ export function DiffEditorPanel({
 
   const { data: modifiedContent, isLoading: loadingModified } = useQuery({
     queryKey: ["repo-file", repoPath, filePath],
-    queryFn: () => window.electronAPI.readRepoFile(repoPath!, filePath),
+    queryFn: () =>
+      window.electronAPI.readRepoFile(repoPath as string, filePath),
     enabled: !!repoPath && !isDeleted,
     staleTime: Infinity,
   });
 
   const { data: originalContent, isLoading: loadingOriginal } = useQuery({
     queryKey: ["file-at-head", repoPath, originalPath],
-    queryFn: () => window.electronAPI.getFileAtHead(repoPath!, originalPath),
+    queryFn: () =>
+      window.electronAPI.getFileAtHead(repoPath as string, originalPath),
     enabled: !!repoPath && !isNew,
     staleTime: Infinity,
   });