From 76c5de5c3247b04f1ecd681972a1dd71b1cd3187 Mon Sep 17 00:00:00 2001
From: Chris Kruining <c.kruining@4dotnet.nl>
Date: Thu, 21 Nov 2024 20:43:42 +0100
Subject: [PATCH] close tab on middle mouse button

---
 src/components/tabs.tsx | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/components/tabs.tsx b/src/components/tabs.tsx
index 0b62146..a86cdf5 100644
--- a/src/components/tabs.tsx
+++ b/src/components/tabs.tsx
@@ -50,7 +50,7 @@ const _Tabs: ParentComponent<{ active: string | undefined, onClose?: CommandType
     const tabsContext = useTabs();
 
     const resolved = children(() => props.children);
-    const tabs = createMemo(() => resolved.toArray().filter(c => c instanceof HTMLElement).map(({ id, dataset }, i) => ({ id, label: dataset.tabLabel, options: { closable: dataset.tabClosable } })));
+    const tabs = createMemo(() => resolved.toArray().filter(c => c instanceof HTMLElement).map(({ id, dataset }, i) => ({ id, label: dataset.tabLabel ?? '', options: { closable: Boolean(dataset.tabClosable ?? 'false') } })));
 
     createEffect(() => {
         tabsContext.activate(tabs().at(-1)?.id);
@@ -67,9 +67,17 @@ const _Tabs: ParentComponent<{ active: string | undefined, onClose?: CommandType
     return <div class={css.tabs}>
         <header>
             <For each={tabs()}>{
-                ({ id, label, options: { closable = false } }) => <Command.Context for={props.onClose} with={[id]}>
+                ({ id, label, options: { closable } }) => <Command.Context for={props.onClose} with={[id]}>
                     <span class={css.handle} classList={{ [css.active]: props.active === id }}>
-                        <button onpointerdown={() => tabsContext.activate(id)}>{label}</button>
+                        <button onpointerdown={(e) => {
+                            if (closable && e.pointerType === 'mouse' && e.button === 1) {
+                                onClose(e);
+
+                                return;
+                            }
+
+                            tabsContext.activate(id)
+                        }}>{label}</button>
                         <Show when={closable}>
                             <button onPointerDown={onClose}> <AiOutlineClose /></button>
                         </Show>