ags: add tab scrolling

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

@@ -1,6 +1,6 @@
 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';
@@ -47,12 +47,19 @@ export const TabContainer = ({ icons, names, children, className = '', setup = (
         })],
     });
     const tabSection = Box({
+        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,7 +198,10 @@ function switchToTab(id) {
     currentApiId = id;
 }
 
-const apiSwitcher = CenterBox({
+const apiSwitcher = EventBox({
+    onScrollUp: () => apiWidgets.attribute.prevTab(),
+    onScrollDown: () => apiWidgets.attribute.nextTab(),
+    child: CenterBox({
         centerWidget: Box({
             className: 'sidebar-chat-apiswitcher spacing-h-5',
             hpack: 'center',
@@ -219,6 +222,7 @@ const apiSwitcher = CenterBox({
             setup: setupCursorHoverInfo,
         }),
     })
+});
 
 const apiWidgets = Widget.Box({
     attribute: {