ags: add tab scrolling

.config/ags/modules/.commonwidgets/tabcontainer.js

@@ -1,11 +1,11 @@
 import Variable from 'resource:///com/github/Aylur/ags/variable.js';
 import Widget from 'resource:///com/github/Aylur/ags/widget.js';
-const { Box, Button, Label, Overlay, Stack } = Widget;
+const { Box, Button, EventBox, Label, Overlay, Stack } = Widget;
 import { MaterialIcon } from './materialicon.js';
 import { NavigationIndicator } from './cairo_navigationindicator.js';
 import { setupCursorHover } from '../.widgetutils/cursorhover.js';
 
-export const TabContainer = ({ icons, names, children, className = '', setup = () => {}, ...rest }) => {
+export const TabContainer = ({ icons, names, children, className = '', setup = () => { }, ...rest }) => {
     const shownIndex = Variable(0);
     let previousShownIndex = 0;
     const count = Math.min(icons.length, names.length, children.length);
@@ -47,12 +47,19 @@ export const TabContainer = ({ icons, names, children, className = '', setup = (
         })],
     });
     const tabSection = Box({
-        vertical: true,
-        hexpand: true,
-        children: [
-            tabs,
-            tabIndicatorLine
-        ]
+        homogeneous: true,
+        children: [EventBox({
+            onScrollUp: () => mainBox.prevTab(),
+            onScrollDown: () => mainBox.nextTab(),
+            child: Box({
+                vertical: true,
+                hexpand: true,
+                children: [
+                    tabs,
+                    tabIndicatorLine
+                ]
+            })
+        })]
     });
     const contentStack = Stack({
         transition: 'slide_left_right',

.config/ags/modules/sideleft/apiwidgets.js

@@ -198,27 +198,31 @@ function switchToTab(id) {
     currentApiId = id;
 }
 
-const apiSwitcher = CenterBox({
-    centerWidget: Box({
-        className: 'sidebar-chat-apiswitcher spacing-h-5',
-        hpack: 'center',
-        children: APIS.map((api, id) => Button({
-            child: api.tabIcon,
-            tooltipText: api.name,
-            setup: setupCursorHover,
-            onClicked: () => {
-                switchToTab(id);
-            }
-        })),
-    }),
-    endWidget: Button({
-        hpack: 'end',
-        className: 'txt-subtext txt-norm icon-material',
-        label: 'lightbulb',
-        tooltipText: 'Use PageUp/PageDown to switch between API pages',
-        setup: setupCursorHoverInfo,
-    }),
-})
+const apiSwitcher = EventBox({
+    onScrollUp: () => apiWidgets.attribute.prevTab(),
+    onScrollDown: () => apiWidgets.attribute.nextTab(),
+    child: CenterBox({
+        centerWidget: Box({
+            className: 'sidebar-chat-apiswitcher spacing-h-5',
+            hpack: 'center',
+            children: APIS.map((api, id) => Button({
+                child: api.tabIcon,
+                tooltipText: api.name,
+                setup: setupCursorHover,
+                onClicked: () => {
+                    switchToTab(id);
+                }
+            })),
+        }),
+        endWidget: Button({
+            hpack: 'end',
+            className: 'txt-subtext txt-norm icon-material',
+            label: 'lightbulb',
+            tooltipText: 'Use PageUp/PageDown to switch between API pages',
+            setup: setupCursorHoverInfo,
+        }),
+    })
+});
 
 const apiWidgets = Widget.Box({
     attribute: {