authorgravatar for 6117705+huxcrux@users.noreply.github.comHugo Blom <6117705+huxcrux@users.noreply.github.com> 2026-06-30 19:13:38+02:00
committergravatar for noreply@github.comGitHub <noreply@github.com> 2026-06-30 17:13:38+00:00
log0615fd7df1ec04303dd13e86d9276aac3057096a
tree01c6e4f8f5eaf39daa86073e8a1cb194bdb127e3
parent2448212367b4348f39eaf5c2635eea6896218cba
signature Signed by PGP key B5690EEEBB952194

Add middle-click close for right panel tabs (#3161)

Co-authored-by: Julius Marminge <jmarminge@gmail.com>

1 files changed, 15 insertions(+), 0 deletions(-)

apps/web/src/components/RightPanelTabs.tsx+15
......@@ -331,6 +331,19 @@ export function RightPanelTabs(props: RightPanelTabsProps) {
331331 },
332332 [props],
333333 );
334 const handleTabMouseDown = useCallback((event: ReactMouseEvent) => {
335 if (event.button !== 1) return;
336 event.preventDefault();
337 }, []);
338 const handleTabAuxClick = useCallback(
339 (event: ReactMouseEvent, surface: RightPanelSurface) => {
340 if (event.button !== 1) return;
341 event.preventDefault();
342 event.stopPropagation();
343 props.onCloseSurface(surface);
344 },
345 [props],
346 );
334347
335348 useEffect(() => {
336349 const activeTab = tabListRef.current?.querySelector<HTMLElement>("[data-active-tab='true']");
......@@ -367,6 +380,8 @@ export function RightPanelTabs(props: RightPanelTabsProps) {
367380 <div
368381 key={surface.id}
369382 data-active-tab={active}
383 onMouseDown={handleTabMouseDown}
384 onAuxClick={(event) => handleTabAuxClick(event, surface)}
370385 onContextMenu={(event) => void handleTabContextMenu(event, surface)}
371386 className={cn(
372387 "group flex h-7 min-w-25 max-w-44 shrink-0 items-center gap-1.5 rounded-md px-2 text-sm",