diff --git a/apps/web/src/components/RightPanelTabs.logic.test.ts b/apps/web/src/components/RightPanelTabs.logic.test.ts new file mode 100644 index 00000000000..177fcc20e39 --- /dev/null +++ b/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); + }); +}); diff --git a/apps/web/src/components/RightPanelTabs.logic.ts b/apps/web/src/components/RightPanelTabs.logic.ts new file mode 100644 index 00000000000..296d5ffee53 --- /dev/null +++ b/apps/web/src/components/RightPanelTabs.logic.ts @@ -0,0 +1,3 @@ +export function shouldCloseRightPanelTabOnAuxClick(button: number): boolean { + return button === 1; +} diff --git a/apps/web/src/components/RightPanelTabs.tsx b/apps/web/src/components/RightPanelTabs.tsx index ead306f7c90..88d5b00a0e3 100644 --- a/apps/web/src/components/RightPanelTabs.tsx +++ b/apps/web/src/components/RightPanelTabs.tsx @@ -23,6 +23,7 @@ import { useTheme } from "~/hooks/useTheme"; import { PreviewPanelShell, type PreviewPanelMode } from "./preview/PreviewPanelShell"; import { PierreEntryIcon } from "./chat/PierreEntryIcon"; +import { shouldCloseRightPanelTabOnAuxClick } from "./RightPanelTabs.logic"; interface RightPanelTabsProps { mode: PreviewPanelMode; @@ -330,6 +331,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("[data-active-tab='true']"); @@ -365,6 +379,8 @@ export function RightPanelTabs(props: RightPanelTabsProps) {
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",