Fix side terminal tab resizing

src/features/terminal/components/terminal-tab-bar.tsx

@@ -51,6 +51,10 @@ import {
   useTerminalStore,
 } from "@/features/terminal/stores/terminal-store";
 import type { Terminal } from "@/features/terminal/types/terminal";
+import {
+  getTerminalTabSidebarResizeSide,
+  getTerminalTabSidebarResizeWidth,
+} from "@/features/terminal/utils/terminal-tab-sidebar-resize";
 import { getAllTerminalProfiles } from "@/features/terminal/utils/terminal-profiles";
 import { Dropdown, MenuItemsList, type MenuItem } from "@/ui/dropdown";
 import { Button } from "@/ui/button";
@@ -449,6 +453,7 @@ const TerminalTabBar = ({
     orientation === "vertical" ? verticalListSortingStrategy : horizontalListSortingStrategy;
   const pinnedTerminals = sortedTerminals.filter((terminal) => terminal.isPinned);
   const regularTerminals = sortedTerminals.filter((terminal) => !terminal.isPinned);
+  const resizeHandleSide = getTerminalTabSidebarResizeSide(tabSidebarPosition);
   const getDirectoryLabel = (directory?: string) => {
     if (!directory) return "";
     const normalized = directory.replace(/[\\/]+$/, "");
@@ -916,14 +921,24 @@ const TerminalTabBar = ({
           {/* Resize handle for vertical sidebar */}
           {orientation === "vertical" && (
             <div
-              className="absolute top-0 right-0 z-10 h-full w-1 cursor-col-resize hover:bg-accent/40 active:bg-accent/60"
+              className={cn(
+                "absolute top-0 z-10 h-full w-1 cursor-col-resize hover:bg-accent/40 active:bg-accent/60",
+                resizeHandleSide === "left" ? "left-0" : "right-0",
+              )}
               onMouseDown={(e) => {
                 e.preventDefault();
                 const startX = e.clientX;
                 const startWidth = tabSidebarWidth;
 
                 const onMouseMove = (ev: MouseEvent) => {
-                  setTabSidebarWidth(startWidth + (ev.clientX - startX));
+                  setTabSidebarWidth(
+                    getTerminalTabSidebarResizeWidth({
+                      position: tabSidebarPosition,
+                      startWidth,
+                      startX,
+                      currentX: ev.clientX,
+                    }),
+                  );
                 };
                 const onMouseUp = () => {
                   document.removeEventListener("mousemove", onMouseMove);

src/features/terminal/tests/terminal-tab-sidebar-resize.test.ts

@@ -0,0 +1,47 @@
+import { describe, expect, it } from "vite-plus/test";
+import {
+  getTerminalTabSidebarResizeSide,
+  getTerminalTabSidebarResizeWidth,
+} from "@/features/terminal/utils/terminal-tab-sidebar-resize";
+
+describe("terminal tab sidebar resize", () => {
+  it("resizes from the right edge when tabs are on the left", () => {
+    expect(getTerminalTabSidebarResizeSide("left")).toBe("right");
+    expect(
+      getTerminalTabSidebarResizeWidth({
+        position: "left",
+        startWidth: 180,
+        startX: 500,
+        currentX: 560,
+      }),
+    ).toBe(240);
+    expect(
+      getTerminalTabSidebarResizeWidth({
+        position: "left",
+        startWidth: 180,
+        startX: 500,
+        currentX: 440,
+      }),
+    ).toBe(120);
+  });
+
+  it("resizes from the left edge when tabs are on the right", () => {
+    expect(getTerminalTabSidebarResizeSide("right")).toBe("left");
+    expect(
+      getTerminalTabSidebarResizeWidth({
+        position: "right",
+        startWidth: 180,
+        startX: 500,
+        currentX: 440,
+      }),
+    ).toBe(240);
+    expect(
+      getTerminalTabSidebarResizeWidth({
+        position: "right",
+        startWidth: 180,
+        startX: 500,
+        currentX: 560,
+      }),
+    ).toBe(120);
+  });
+});

src/features/terminal/utils/terminal-tab-sidebar-resize.ts

@@ -0,0 +1,22 @@
+import type { TerminalTabSidebarPosition } from "@/features/terminal/stores/terminal-store";
+
+export function getTerminalTabSidebarResizeSide(position: TerminalTabSidebarPosition) {
+  return position === "right" ? "left" : "right";
+}
+
+interface TerminalTabSidebarResizeWidthParams {
+  position: TerminalTabSidebarPosition;
+  startWidth: number;
+  startX: number;
+  currentX: number;
+}
+
+export function getTerminalTabSidebarResizeWidth({
+  position,
+  startWidth,
+  startX,
+  currentX,
+}: TerminalTabSidebarResizeWidthParams) {
+  const deltaX = position === "right" ? startX - currentX : currentX - startX;
+  return startWidth + deltaX;
+}