feat: scroll on tabs

Author: hanashiro

src/dockable/Window.tsx

@@ -220,6 +220,18 @@ function TabBar({
     };
   }
 
+  function onWheel(event: React.WheelEvent<HTMLDivElement>) {
+      if(!event.shiftKey){
+          event.currentTarget.scrollLeft += event.deltaY;
+      }else{
+        const nextTabId = selected + (event.deltaY > 0 ? 1 : -1);
+        if (nextTabId < 0 || nextTabId >= widgets.length) return;
+        const widgetId = (widgets[nextTabId] as any)?.props?.id;
+        if(widgetId === undefined) return;
+        onTabClick(nextTabId, widgetId);
+      }
+  }
+
   return (
     <Droppable droppableId={windowId} type="dockable-tab" direction="horizontal">
       {(provided, snapshot) => (
@@ -236,6 +248,7 @@ function TabBar({
           <div
             ref={provided.innerRef}
             className={css.tabSpacer}
+            onWheel={onWheel}
             {...provided.droppableProps}
           >
             {widgets.map((child: any, i) => {

src/dockable/css/Window.module.css

@@ -171,10 +171,17 @@
 }
 
 .tabSpacer {
-  display: flex;
-  flex-grow: 1;
-  flex-shrink: 1;
-  width: 0;
+    display: flex;
+    flex-grow: 1;
+    flex-shrink: 1;
+    width: 0;
+    overflow-x: scroll;
+    overflow-y: hidden;
+    scrollbar-width: none;
+}
+
+.tabSpacer::-webkit-scrollbar {
+    height: 0px;
 }
 
 .dropBorder {