ags: reimplement tabs

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

@@ -4,7 +4,7 @@ import * as Utils from 'resource:///com/github/Aylur/ags/utils.js';
 const { Box, Button, CenterBox, Entry, EventBox, Icon, Label, Overlay, Revealer, Scrollable, Stack } = Widget;
 const { execAsync, exec } = Utils;
 import { setupCursorHover, setupCursorHoverInfo } from '../.widgetutils/cursorhover.js';
-import { contentStack } from './sideleft.js';
+import { widgetContent } from './sideleft.js';
 // APIs
 import GPTService from '../../services/gpt.js';
 import Gemini from '../../services/gemini.js';
@@ -81,13 +81,11 @@ export const chatEntry = TextView({
             // Global keybinds
             if (!(event.get_state()[1] & Gdk.ModifierType.CONTROL_MASK) &&
                 event.get_keyval()[1] === Gdk.KEY_Page_Down) {
-                const toSwitchTab = contentStack.get_visible_child();
-                toSwitchTab.attribute.nextTab();
+                widgetContent.nextTab();
             }
             else if (!(event.get_state()[1] & Gdk.ModifierType.CONTROL_MASK) &&
                 event.get_keyval()[1] === Gdk.KEY_Page_Up) {
-                const toSwitchTab = contentStack.get_visible_child();
-                toSwitchTab.attribute.prevTab();
+                    widgetContent.prevTab();
             }
         })
     ,

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

@@ -6,10 +6,10 @@ const { Box, Button, EventBox, Label, Revealer, Scrollable, Stack } = Widget;
 const { execAsync, exec } = Utils;
 import { MaterialIcon } from '../.commonwidgets/materialicon.js';
 import { setupCursorHover } from '../.widgetutils/cursorhover.js';
-import { NavigationIndicator } from '../.commonwidgets/cairo_navigationindicator.js';
 import toolBox from './toolbox.js';
 import apiWidgets from './apiwidgets.js';
 import { chatEntry } from './apiwidgets.js';
+import { TabContainer } from '../.commonwidgets/tabcontainer.js';
 
 const contents = [
     {
@@ -25,78 +25,6 @@ const contents = [
         friendlyName: 'Tools',
     },
 ]
-let currentTabId = 0;
-
-export const contentStack = Stack({
-    vexpand: true,
-    transition: 'slide_left_right',
-    transitionDuration: 160,
-    children: contents.reduce((acc, item) => {
-        acc[item.name] = item.content;
-        return acc;
-    }, {}),
-})
-
-function switchToTab(id) {
-    const allTabs = navTabs.get_children();
-    const tabButton = allTabs[id];
-    allTabs[currentTabId].toggleClassName('sidebar-selector-tab-active', false);
-    allTabs[id].toggleClassName('sidebar-selector-tab-active', true);
-    contentStack.shown = contents[id].name;
-    if (tabButton) {
-        // Fancy highlighter line width
-        const buttonWidth = tabButton.get_allocated_width();
-        const highlightWidth = tabButton.get_children()[0].get_allocated_width();
-        navIndicator.css = `
-            font-size: ${id}px; 
-            padding: 0px ${(buttonWidth - highlightWidth) / 2}px;
-        `;
-    }
-    currentTabId = id;
-}
-const SidebarTabButton = (navIndex) => Widget.Button({
-    // hexpand: true,
-    className: 'sidebar-selector-tab',
-    onClicked: (self) => {
-        switchToTab(navIndex);
-    },
-    child: Box({
-        hpack: 'center',
-        className: 'spacing-h-5',
-        children: [
-            MaterialIcon(contents[navIndex].materialIcon, 'larger'),
-            Label({
-                className: 'txt txt-smallie',
-                label: `${contents[navIndex].friendlyName}`,
-            })
-        ]
-    }),
-    setup: (button) => Utils.timeout(1, () => {
-        setupCursorHover(button);
-        button.toggleClassName('sidebar-selector-tab-active', currentTabId == navIndex);
-    }),
-});
-
-const navTabs = Box({
-    homogeneous: true,
-    children: contents.map((item, id) =>
-        SidebarTabButton(id, item.materialIcon, item.friendlyName)
-    ),
-});
-
-const navIndicator = NavigationIndicator(2, false, { // The line thing
-    className: 'sidebar-selector-highlight',
-    css: 'font-size: 0px; padding: 0rem 4.160rem;', // Shushhhh
-});
-
-const navBar = Box({
-    vertical: true,
-    hexpand: true,
-    children: [
-        navTabs,
-        navIndicator,
-    ]
-});
 
 const pinButton = Button({
     attribute: {
@@ -131,6 +59,17 @@ const pinButton = Button({
     },
 })
 
+export const widgetContent = TabContainer({
+    icons: contents.map((item) => item.materialIcon),
+    names: contents.map((item) => item.friendlyName),
+    children: contents.map((item) => item.content),
+    className: 'sidebar-left spacing-v-10',
+    setup: (self) => self.hook(App, (self, currentName, visible) => {
+        if (currentName === 'sideleft')
+            self.toggleClassName('sidebar-pinned', pinButton.attribute.enabled && visible);
+    }),
+});
+
 export default () => Box({
     // vertical: true,
     vexpand: true,
@@ -142,27 +81,7 @@ export default () => Box({
             onSecondaryClick: () => App.closeWindow('sideleft'),
             onMiddleClick: () => App.closeWindow('sideleft'),
         }),
-        Box({
-            vertical: true,
-            vexpand: true,
-            className: 'sidebar-left spacing-v-10',
-            children: [
-                Box({
-                    className: 'spacing-h-10',
-                    children: [
-                        navBar,
-                        pinButton,
-                    ]
-                }),
-                contentStack,
-            ],
-            setup: (self) => self
-                .hook(App, (self, currentName, visible) => {
-                    if (currentName === 'sideleft')
-                        self.toggleClassName('sidebar-pinned', pinButton.attribute.enabled && visible);
-                })
-            ,
-        }),
+        widgetContent,
     ],
     setup: (self) => self
         .on('key-press-event', (widget, event) => { // Handle keybinds
@@ -172,13 +91,13 @@ export default () => Box({
                     pinButton.attribute.toggle(pinButton);
                 // Switch sidebar tab
                 else if (event.get_keyval()[1] === Gdk.KEY_Tab)
-                    switchToTab((currentTabId + 1) % contents.length);
+                    widgetContent.cycleTab();
                 else if (event.get_keyval()[1] === Gdk.KEY_Page_Up)
-                    switchToTab(Math.max(currentTabId - 1, 0));
+                    widgetContent.prevTab();
                 else if (event.get_keyval()[1] === Gdk.KEY_Page_Down)
-                    switchToTab(Math.min(currentTabId + 1, contents.length - 1));
+                    widgetContent.nextTab();
             }
-            if (contentStack.shown == 'apis') { // If api tab is focused
+            if (widgetContent.attribute.names[widgetContent.attribute.shown.value] == 'APIs') { // If api tab is focused
                 // Focus entry when typing
                 if ((
                     !(event.get_state()[1] & Gdk.ModifierType.CONTROL_MASK) &&
@@ -196,12 +115,12 @@ export default () => Box({
                 // Switch API type
                 else if (!(event.get_state()[1] & Gdk.ModifierType.CONTROL_MASK) &&
                     event.get_keyval()[1] === Gdk.KEY_Page_Down) {
-                    const toSwitchTab = contentStack.get_visible_child();
+                    const toSwitchTab = widgetContent.attribute.children[widgetContent.attribute.shown.value];
                     toSwitchTab.attribute.nextTab();
                 }
                 else if (!(event.get_state()[1] & Gdk.ModifierType.CONTROL_MASK) &&
                     event.get_keyval()[1] === Gdk.KEY_Page_Up) {
-                    const toSwitchTab = contentStack.get_visible_child();
+                    const toSwitchTab = widgetContent.attribute.children[widgetContent.attribute.shown.value];
                     toSwitchTab.attribute.prevTab();
                 }
             }