Add middle-click close for right panel tabs

apps/web/src/components/RightPanelTabs.logic.test.ts

@@ -0,0 +1,11 @@
+import { describe, expect, it } from "vite-plus/test";
+
+import { shouldCloseRightPanelTabOnAuxClick } from "./RightPanelTabs.logic";
+
+describe("shouldCloseRightPanelTabOnAuxClick", () => {
+  it("closes right panel tabs only for middle mouse clicks", () => {
+    expect(shouldCloseRightPanelTabOnAuxClick(0)).toBe(false);
+    expect(shouldCloseRightPanelTabOnAuxClick(1)).toBe(true);
+    expect(shouldCloseRightPanelTabOnAuxClick(2)).toBe(false);
+  });
+});

apps/web/src/components/RightPanelTabs.logic.ts

@@ -0,0 +1,3 @@
+export function shouldCloseRightPanelTabOnAuxClick(button: number): boolean {
+  return button === 1;
+}

apps/web/src/components/RightPanelTabs.tsx

@@ -24,6 +24,7 @@ import { COLLAPSED_SIDEBAR_TITLEBAR_INSET_CLASS } from "~/workspaceTitlebar";
 
 import { PreviewPanelShell, type PreviewPanelMode } from "./preview/PreviewPanelShell";
 import { PierreEntryIcon } from "./chat/PierreEntryIcon";
+import { shouldCloseRightPanelTabOnAuxClick } from "./RightPanelTabs.logic";
 
 interface RightPanelTabsProps {
   mode: PreviewPanelMode;
@@ -331,6 +332,19 @@ export function RightPanelTabs(props: RightPanelTabsProps) {
     },
     [props],
   );
+  const handleTabMouseDown = useCallback((event: ReactMouseEvent) => {
+    if (!shouldCloseRightPanelTabOnAuxClick(event.button)) return;
+    event.preventDefault();
+  }, []);
+  const handleTabAuxClick = useCallback(
+    (event: ReactMouseEvent, surface: RightPanelSurface) => {
+      if (!shouldCloseRightPanelTabOnAuxClick(event.button)) return;
+      event.preventDefault();
+      event.stopPropagation();
+      props.onCloseSurface(surface);
+    },
+    [props],
+  );
 
   useEffect(() => {
     const activeTab = tabListRef.current?.querySelector<HTMLElement>("[data-active-tab='true']");
@@ -367,6 +381,8 @@ export function RightPanelTabs(props: RightPanelTabsProps) {
                 <div
                   key={surface.id}
                   data-active-tab={active}
+                  onMouseDown={handleTabMouseDown}
+                  onAuxClick={(event) => handleTabAuxClick(event, surface)}
                   onContextMenu={(event) => void handleTabContextMenu(event, surface)}
                   className={cn(
                     "group flex h-7 min-w-25 max-w-44 shrink-0 items-center gap-1.5 rounded-md px-2 text-sm",