ags: sync

.config/ags/widgets/bar/leftspace.js

@@ -1,44 +1,42 @@
-import { App, Service, Utils, Widget } from '../../imports.js';
+import App from 'resource:///com/github/Aylur/ags/app.js';
+import Widget from 'resource:///com/github/Aylur/ags/widget.js';
 import Hyprland from 'resource:///com/github/Aylur/ags/service/hyprland.js';
-const { CONFIG_DIR, exec, execAsync } = Utils;
-import { setupCursorHover } from "../../lib/cursorhover.js";
 import { RoundedCorner } from "../../lib/roundedcorner.js";
 import Brightness from '../../services/brightness.js';
 import Indicator from '../../services/indicator.js';
 
-// Removes everything after the last 
-// em dash, en dash, minus, vertical bar, or middle dot    (note: maybe add open parenthesis?)
-// For example:
-// • Discord | #ricing-theming | r/unixporn — Mozilla Firefox    -->   • Discord | #ricing-theming 
-// GJS Error · Issue #112 · Aylur/ags — Mozilla Firefox          -->   GJS Error · Issue #112 
-function truncateTitle(str) {
-    let lastDash = -1;
-    let found = -1; // 0: em dash, 1: en dash, 2: minus, 3: vertical bar, 4: middle dot
-    for (let i = str.length - 1; i >= 0; i--) {
-        if (str[i] === '—') {
-            found = 0;
-            lastDash = i;
-        }
-        else if (str[i] === '–' && found < 1) {
-            found = 1;
-            lastDash = i;
-        }
-        else if (str[i] === '-' && found < 2) {
-            found = 2;
-            lastDash = i;
-        }
-        else if (str[i] === '|' && found < 3) {
-            found = 3;
-            lastDash = i;
-        }
-        else if (str[i] === '·' && found < 4) {
-            found = 4;
-            lastDash = i;
-        }
+const WindowTitle = async () => Widget.Scrollable({
+    hexpand: true, vexpand: true,
+    hscroll: 'automatic', vscroll: 'never',
+    child: Widget.Box({
+        vertical: true,
+        children: [
+            Widget.Label({
+                xalign: 0,
+                className: 'txt-smaller bar-topdesc txt',
+                setup: (self) => self.hook(Hyprland.active.client, label => { // Hyprland.active.client
+                    label.label = Hyprland.active.client.class.length === 0 ? 'Desktop' : Hyprland.active.client.class;
+                }),
+            }),
+            Widget.Label({
+                xalign: 0,
+                className: 'txt txt-smallie',
+                setup: (self) => self.hook(Hyprland.active.client, label => { // Hyprland.active.client
+                    label.label = Hyprland.active.client.title.length === 0 ? `Workspace ${Hyprland.active.workspace.id}` : Hyprland.active.client.title;
+                }),
+            })
+        ]
+    })
+})
+
+const OptionalWindowTitle = async () => {
+    try {
+        return await WindowTitle();
+    } catch {
+        return null;
     }
-    if (lastDash === -1) return str;
-    return str.substring(0, lastDash);
-}
+};
+const OptionalWindowTitleInstance = await OptionalWindowTitle();
 
 export const ModuleLeftSpace = () => Widget.EventBox({
     onScrollUp: () => {
@@ -65,29 +63,7 @@ export const ModuleLeftSpace = () => Widget.EventBox({
                             vertical: true,
                             className: 'bar-space-button',
                             children: [
-                                Widget.Scrollable({
-                                    hexpand: true, vexpand: true,
-                                    hscroll: 'automatic', vscroll: 'never',
-                                    child: Widget.Box({
-                                        vertical: true,
-                                        children: [
-                                            Widget.Label({
-                                                xalign: 0,
-                                                className: 'txt-smaller bar-topdesc txt',
-                                                setup: (self) => self.hook(Hyprland.active.client, label => { // Hyprland.active.client
-                                                    label.label = Hyprland.active.client._class.length === 0 ? 'Desktop' : Hyprland.active.client._class;
-                                                }),
-                                            }),
-                                            Widget.Label({
-                                                xalign: 0,
-                                                className: 'txt txt-smallie',
-                                                setup: (self) => self.hook(Hyprland.active.client, label => { // Hyprland.active.client
-                                                    label.label = Hyprland.active.client._title.length === 0 ? `Workspace ${Hyprland.active.workspace.id}` : truncateTitle(Hyprland.active.client._title);
-                                                }),
-                                            })
-                                        ]
-                                    })
-                                })
+                                OptionalWindowTitleInstance,
                             ]
                         })]
                     }),

.config/ags/widgets/bar/main.js

@@ -1,13 +1,18 @@
-const { Gdk, Gtk } = imports.gi;
-import { App, Service, Utils, Widget } from '../../imports.js';
-const { execAsync, exec } = Utils;
+const { Gtk } = imports.gi;
+import Widget from 'resource:///com/github/Aylur/ags/widget.js';
 
 import { ModuleLeftSpace } from "./leftspace.js";
 import { ModuleMusic } from "./music.js";
 import { ModuleRightSpace } from "./rightspace.js";
 import { ModuleSystem } from "./system.js";
-import ModuleWorkspaces from "./workspaces.js";
-import { RoundedCorner } from "../../lib/roundedcorner.js";
+const OptionalWorkspaces = async () => {
+    try {
+        return (await import('./workspaces_hyprland.js')).default();
+    } catch {
+        // return (await import('./workspaces_sway.js')).default();
+        return Box({});
+    }
+};
 
 const left = Widget.Box({
     className: 'bar-sidemodule',
@@ -18,7 +23,7 @@ const left = Widget.Box({
 
 const center = Widget.Box({
     children: [
-        ModuleWorkspaces(),
+        await OptionalWorkspaces(),
     ],
 });
 

.config/ags/widgets/bar/music.js

@@ -1,10 +1,18 @@
-import { Service, Utils, Widget } from '../../imports.js';
+import Widget from 'resource:///com/github/Aylur/ags/widget.js';
+import * as Utils from 'resource:///com/github/Aylur/ags/utils.js';
 import Mpris from 'resource:///com/github/Aylur/ags/service/mpris.js';
-import Audio from 'resource:///com/github/Aylur/ags/service/audio.js';
+import Hyprland from 'resource:///com/github/Aylur/ags/service/hyprland.js';
 const { execAsync, exec } = Utils;
 import { AnimatedCircProg } from "../../lib/animatedcircularprogress.js";
 import { showMusicControls } from '../../variables.js';
 
+function trimTrackTitle(title) {
+    var cleanedTitle = title;
+    cleanedTitle = cleanedTitle.replace(/【[^】]*】/, '');          // Remove stuff like【C93】 at beginning
+    cleanedTitle = cleanedTitle.replace(/\[FREE DOWNLOAD\]/g, ''); // Remove F-777's [FREE DOWNLOAD]
+    return cleanedTitle.trim();
+}
+
 const TrackProgress = () => {
     const _updateProgress = (circprog) => {
         const mpris = Mpris.getPlayer('');
@@ -15,19 +23,19 @@ const TrackProgress = () => {
     return AnimatedCircProg({
         className: 'bar-music-circprog',
         vpack: 'center', hpack: 'center',
-        connections: [ // Update on change/once every 3 seconds
-            [Mpris, _updateProgress],
-            [3000, _updateProgress]
-        ]
+        extraSetup: (self) => self
+            .hook(Mpris, _updateProgress)
+            .poll(3000, _updateProgress)
+        ,
     })
 }
 
-export const ModuleMusic = () => Widget.EventBox({
-    onScrollUp: () => execAsync('hyprctl dispatch workspace -1'),
-    onScrollDown: () => execAsync('hyprctl dispatch workspace +1'),
+export const ModuleMusic = () => Widget.EventBox({ // TODO: use cairo to make button bounce smaller on click
+    onScrollUp: () => Hyprland.sendMessage(`dispatch workspace -1`),
+    onScrollDown: () => Hyprland.sendMessage(`dispatch workspace +1`),
     onPrimaryClickRelease: () => showMusicControls.setValue(!showMusicControls.value),
     onSecondaryClickRelease: () => execAsync(['bash', '-c', 'playerctl next || playerctl position `bc <<< "100 * $(playerctl metadata mpris:length) / 1000000 / 100"` &']),
-    onMiddleClickRelease: () => Mpris.getPlayer('')?.playPause(),
+    onMiddleClickRelease: () => execAsync('playerctl play-pause').catch(print),
     child: Widget.Box({
         className: 'bar-group-margin bar-sides',
         children: [
@@ -45,17 +53,17 @@ export const ModuleMusic = () => Widget.EventBox({
                                     vpack: 'center',
                                     className: 'bar-music-playstate-txt',
                                     justification: 'center',
-                                    connections: [[Mpris, label => {
+                                    setup: (self) => self.hook(Mpris, label => {
                                         const mpris = Mpris.getPlayer('');
                                         label.label = `${mpris !== null && mpris.playBackStatus == 'Playing' ? 'pause' : 'play_arrow'}`;
-                                    }]],
+                                    }),
                                 })],
-                                connections: [[Mpris, label => {
+                                setup: (self) => self.hook(Mpris, label => {
                                     const mpris = Mpris.getPlayer('');
                                     if (!mpris) return;
                                     label.toggleClassName('bar-music-playstate-playing', mpris !== null && mpris.playBackStatus == 'Playing');
                                     label.toggleClassName('bar-music-playstate', mpris !== null || mpris.playBackStatus == 'Paused');
-                                }]],
+                                }),
                             }),
                             overlays: [
                                 TrackProgress(),
@@ -66,13 +74,13 @@ export const ModuleMusic = () => Widget.EventBox({
                         hexpand: true,
                         child: Widget.Label({
                             className: 'txt-smallie txt-onSurfaceVariant',
-                            connections: [[Mpris, label => {
+                            setup: (self) => self.hook(Mpris, label => {
                                 const mpris = Mpris.getPlayer('');
                                 if (mpris)
-                                    label.label = `${mpris.trackTitle} • ${mpris.trackArtists.join(', ')}`;
+                                    label.label = `${trimTrackTitle(mpris.trackTitle)} • ${mpris.trackArtists.join(', ')}`;
                                 else
                                     label.label = 'No media';
-                            }]],
+                            }),
                         })
                     })
                 ]

.config/ags/widgets/bar/rightspace.js

@@ -1,6 +1,9 @@
-import { App, Utils, Widget } from '../../imports.js';
+import App from 'resource:///com/github/Aylur/ags/app.js';
+import Widget from 'resource:///com/github/Aylur/ags/widget.js';
+import * as Utils from 'resource:///com/github/Aylur/ags/utils.js';
+
 import Audio from 'resource:///com/github/Aylur/ags/service/audio.js';
-import Mpris from 'resource:///com/github/Aylur/ags/service/mpris.js';
+import SystemTray from 'resource:///com/github/Aylur/ags/service/systemtray.js';
 const { execAsync } = Utils;
 import Indicator from '../../services/indicator.js';
 import { StatusIcons } from "../../lib/statusicons.js";
@@ -32,8 +35,8 @@ export const ModuleRightSpace = () => {
         // onHover: () => { barStatusIcons.toggleClassName('bar-statusicons-hover', true) },
         // onHoverLost: () => { barStatusIcons.toggleClassName('bar-statusicons-hover', false) },
         onPrimaryClick: () => App.toggleWindow('sideright'),
-        onSecondaryClickRelease: () => execAsync(['bash', '-c', 'playerctl next || playerctl position `bc <<< "100 * $(playerctl metadata mpris:length) / 1000000 / 100"` &']),
-        onMiddleClickRelease: () => Mpris.getPlayer('')?.playPause(),
+        onSecondaryClickRelease: () => execAsync(['bash', '-c', 'playerctl next || playerctl position `bc <<< "100 * $(playerctl metadata mpris:length) / 1000000 / 100"` &']).catch(print),
+        onMiddleClickRelease: () => execAsync('playerctl play-pause').catch(print),
         child: Widget.Box({
             homogeneous: false,
             children: [
@@ -43,10 +46,29 @@ export const ModuleRightSpace = () => {
                     children: [
                         Widget.Box({
                             hexpand: true,
-                            className: 'spacing-h-15 txt',
+                            className: 'spacing-h-5 txt',
                             children: [
                                 Widget.Box({ hexpand: true, }),
                                 barTray,
+                                Widget.Revealer({
+                                    transition: 'slide_left',
+                                    revealChild: false,
+                                    attribute: {
+                                        'count': 0,
+                                        'update': (self, diff) => {
+                                            self.attribute.count += diff;
+                                            self.revealChild = (self.attribute.count > 0);
+                                        }
+                                    },
+                                    child: Widget.Box({
+                                        vpack: 'center',
+                                        className: 'separator-circle',
+                                    }),
+                                    setup: (self) => self
+                                        .hook(SystemTray, (self) => self.attribute.update(self, 1), 'added')
+                                        .hook(SystemTray, (self) => self.attribute.update(self, -1), 'removed')
+                                    ,
+                                }),
                                 barStatusIcons,
                             ],
                         }),

.config/ags/widgets/bar/system.js

@@ -1,9 +1,11 @@
 // This is for the right pill of the bar. 
 // For the cool memory indicator on the sidebar, see sysinfo.js
-import { Service, Utils, Widget } from '../../imports.js';
+import Widget from 'resource:///com/github/Aylur/ags/widget.js';
+import * as Utils from 'resource:///com/github/Aylur/ags/utils.js';
 const { Box, Label, Button, Overlay, Revealer, Scrollable, Stack, EventBox } = Widget;
 const { exec, execAsync } = Utils;
 const { GLib } = imports.gi;
+import Hyprland from 'resource:///com/github/Aylur/ags/service/hyprland.js';
 import Battery from 'resource:///com/github/Aylur/ags/service/battery.js';
 import { MaterialIcon } from '../../lib/materialicon.js';
 import { AnimatedCircProg } from "../../lib/animatedcircularprogress.js";
@@ -20,15 +22,15 @@ const BatBatteryProgress = () => {
     return AnimatedCircProg({
         className: 'bar-batt-circprog',
         vpack: 'center', hpack: 'center',
-        connections: [
-            [Battery, _updateProgress],
-        ],
+        extraSetup: (self) => self
+            .hook(Battery, _updateProgress)
+        ,
     })
 }
 
 const BarClock = () => Widget.Box({
     vpack: 'center',
-    className: 'spacing-h-5 txt-onSurfaceVariant',
+    className: 'spacing-h-5 txt-onSurfaceVariant bar-clock-box',
     children: [
         Widget.Label({
             className: 'bar-clock',
@@ -59,75 +61,39 @@ const UtilButton = ({ name, icon, onClicked }) => Button({
     label: `${icon}`,
 })
 
-const Utilities = () => Scrollable({
-    hexpand: true,
-    child: Box({
-        hpack: 'center',
-        className: 'spacing-h-5',
-        children: [
-            UtilButton({
-                name: 'Screen snip', icon: 'screenshot_region', onClicked: () => {
-                    Utils.execAsync(['bash', '-c', `grim -g "$(slurp -d -c e2e2e2BB -b 31313122 -s 00000000)" - | wl-copy &`])
-                        .catch(print)
-                }
-            }),
-            UtilButton({
-                name: 'Color picker', icon: 'colorize', onClicked: () => {
-                    Utils.execAsync(['hyprpicker', '-a']).catch(print)
-                }
-            }),
-            UtilButton({
-                name: 'Toggle on-screen keyboard', icon: 'keyboard', onClicked: () => {
-                    App.toggleWindow('osk');
-                }
-            }),
-        ]
-    })
+const Utilities = () => Box({
+    hpack: 'center',
+    className: 'spacing-h-5 txt-onSurfaceVariant',
+    children: [
+        UtilButton({
+            name: 'Screen snip', icon: 'screenshot_region', onClicked: () => {
+                Utils.execAsync(['bash', '-c', `grim -g "$(slurp -d -c e2e2e2BB -b 31313122 -s 00000000)" - | wl-copy &`])
+                    .catch(print)
+            }
+        }),
+        UtilButton({
+            name: 'Color picker', icon: 'colorize', onClicked: () => {
+                Utils.execAsync(['hyprpicker', '-a']).catch(print)
+            }
+        }),
+        UtilButton({
+            name: 'Toggle on-screen keyboard', icon: 'keyboard', onClicked: () => {
+                App.toggleWindow('osk');
+            }
+        }),
+    ]
 })
 
 const BarBattery = () => Box({
     className: 'spacing-h-4 txt-onSurfaceVariant',
     children: [
-        // Revealer({ // A dot for charging state
-        //     transitionDuration: 150,
-        //     revealChild: false,
-        //     transition: 'crossfade',
-        //     child: Widget.Box({
-        //         className: 'spacing-h-3',
-        //         children: [
-        //             Widget.Box({
-        //                 vpack: 'center',
-        //                 className: 'bar-batt-chargestate-charging-smaller',
-        //                 setup: (self) => self.hook(Battery, box => {
-        //                     box.toggleClassName('bar-batt-chargestate-low', Battery.percent <= BATTERY_LOW);
-        //                     box.toggleClassName('bar-batt-chargestate-full', Battery.charged);
-        //                 }),
-        //             }),
-        //             Widget.Box({
-        //                 vpack: 'center',
-        //                 className: 'bar-batt-chargestate-charging',
-        //                 setup: (self) => self.hook(Battery, box => {
-        //                     box.toggleClassName('bar-batt-chargestate-low', Battery.percent <= BATTERY_LOW);
-        //                     box.toggleClassName('bar-batt-chargestate-full', Battery.charged);
-        //                 }),
-        //             }),
-        //         ]
-        //     }),
-        //     setup: (self) => self.hook(Battery, revealer => {
-        //         revealer.revealChild = Battery.charging;
-        //     }),
-        // }),
-        Stack({
-            transition: 'slide_up_down',
-            items: [
-                ['discharging', Widget.Label({
-                    className: 'txt-norm txt',
-                    label: '•',
-                }),],
-                ['charging', MaterialIcon('bolt', 'norm')],
-            ],
+        Revealer({
+            transitionDuration: 150,
+            revealChild: false,
+            transition: 'slide_right',
+            child: MaterialIcon('bolt', 'norm'),
             setup: (self) => self.hook(Battery, revealer => {
-                self.shown = Battery.charging ? 'charging' : 'discharging';
+                self.revealChild = Battery.charging;
             }),
         }),
         Label({
@@ -156,21 +122,101 @@ const BarBattery = () => Box({
     ]
 });
 
+const BarResourceValue = (name, icon, command) => Widget.Box({
+    vpack: 'center',
+    className: 'bar-batt spacing-h-5',
+    children: [
+        MaterialIcon(icon, 'small'),
+        Widget.ProgressBar({ // Progress
+            vpack: 'center', hexpand: true,
+            className: 'bar-prog-batt',
+            setup: (self) => self.poll(5000, (progress) => execAsync(['bash', '-c', command])
+                .then((output) => {
+                    progress.value = Number(output) / 100;
+                    progress.tooltipText = `${name}: ${Number(output)}%`
+                })
+                .catch(print)
+            ),
+        }),
+    ]
+});
+
+const BarResource = (name, icon, command) => {
+    const resourceLabel = Label({
+        className: 'txt-smallie txt-onSurfaceVariant',
+    });
+    const resourceCircProg = AnimatedCircProg({
+        className: 'bar-batt-circprog',
+        vpack: 'center', hpack: 'center',
+    });
+    const widget = Box({
+        className: 'spacing-h-4 txt-onSurfaceVariant',
+        children: [
+            resourceLabel,
+            Overlay({
+                child: Widget.Box({
+                    vpack: 'center',
+                    className: 'bar-batt',
+                    homogeneous: true,
+                    children: [
+                        MaterialIcon(icon, 'small'),
+                    ],
+                }),
+                overlays: [resourceCircProg]
+            }),
+        ],
+        setup: (self) => self
+            .poll(5000, () => execAsync(['bash', '-c', command])
+                .then((output) => {
+                    resourceCircProg.css = `font-size: ${Number(output)}px;`;
+                    resourceLabel.label = `${Math.round(Number(output))}%`;
+                    widget.tooltipText = `${name}: ${Math.round(Number(output))}%`;
+                }).catch(print))
+        ,
+    });
+    return widget;
+}
+
+const BarGroup = ({ child }) => Widget.Box({
+    className: 'bar-group-margin bar-sides',
+    children: [
+        Widget.Box({
+            className: 'bar-group bar-group-standalone bar-group-pad-system',
+            children: [child],
+        }),
+    ]
+});
+
 export const ModuleSystem = () => Widget.EventBox({
-    onScrollUp: () => execAsync('hyprctl dispatch workspace -1'),
-    onScrollDown: () => execAsync('hyprctl dispatch workspace +1'),
+    onScrollUp: () => Hyprland.sendMessage(`dispatch workspace -1`),
+    onScrollDown: () => Hyprland.sendMessage(`dispatch workspace +1`),
     onPrimaryClick: () => App.toggleWindow('sideright'),
     child: Widget.Box({
-        className: 'bar-group-margin bar-sides',
+        className: 'spacing-h-5',
         children: [
-            Widget.Box({
-                className: 'bar-group bar-group-standalone bar-group-pad-system spacing-h-5',
-                children: [
-                    BarClock(),
-                    Utilities(),
-                    BarBattery(),
+            BarGroup({ child: BarClock() }),
+            Stack({
+                transition: 'slide_up_down',
+                transitionDuration: 150,
+                items: [
+                    ['laptop', Box({
+                        className: 'spacing-h-5', children: [
+                            BarGroup({ child: Utilities() }),
+                            BarGroup({ child: BarBattery() }),
+                        ]
+                    })],
+                    ['desktop', Box({
+                        className: 'spacing-h-5', children: [
+                            BarGroup({ child: BarResource('RAM usage', 'memory', `free | awk '/^Mem/ {printf("%.2f\\n", ($3/$2) * 100)}'`), }),
+                            BarGroup({ child: BarResource('Swap usage', 'swap_horiz', `free | awk '/^Swap/ {printf("%.2f\\n", ($3/$2) * 100)}'`), }),
+                        ]
+                    })],
                 ],
-            }),
+                setup: (stack) => Utils.timeout(10, () => {
+                    if (!Battery.available) stack.shown = 'desktop';
+                    else stack.shown = 'laptop';
+                })
+            })
         ]
     })
 });

.config/ags/widgets/bar/tray.js

@@ -1,59 +1,63 @@
-const { GLib, Gdk, Gtk } = imports.gi;
-import { Service, Widget } from '../../imports.js';
+const { Gtk } = imports.gi;
+import Widget from 'resource:///com/github/Aylur/ags/widget.js';
 import SystemTray from 'resource:///com/github/Aylur/ags/service/systemtray.js';
 const { Box, Icon, Button, Revealer } = Widget;
 const { Gravity } = imports.gi.Gdk;
 
 const revealerDuration = 200;
 
-const SysTrayItem = item => Button({
+const SysTrayItem = (item) => Button({
     className: 'bar-systray-item',
     child: Icon({
         hpack: 'center',
-        binds: [['icon', item, 'icon']],
-        setup: (self) => Utils.timeout(1, () => {
-            const styleContext = self.get_parent().get_style_context();
-            const width = styleContext.get_property('min-width', Gtk.StateFlags.NORMAL);
-            const height = styleContext.get_property('min-height', Gtk.StateFlags.NORMAL);
-            self.size = Math.max(width, height, 1); // im too lazy to add another box lol
-        }),
+        setup: (self) => {
+            self.hook(item, (self) => self.icon = item.icon);
+            Utils.timeout(1, () => {
+                const styleContext = self.get_parent().get_style_context();
+                const width = styleContext.get_property('min-width', Gtk.StateFlags.NORMAL);
+                const height = styleContext.get_property('min-height', Gtk.StateFlags.NORMAL);
+                self.size = Math.max(width, height, 1); // im too lazy to add another box lol
+            })
+        },
     }),
-    binds: [['tooltipMarkup', item, 'tooltip-markup']],
+    setup: (self) => self
+        .hook(item, (self) => self.tooltipMarkup = item['tooltip-markup'])
+    ,
     onClicked: btn => item.menu.popup_at_widget(btn, Gravity.SOUTH, Gravity.NORTH, null),
     onSecondaryClick: btn => item.menu.popup_at_widget(btn, Gravity.SOUTH, Gravity.NORTH, null),
 });
 
 export const Tray = (props = {}) => {
     const trayContent = Box({
-        className: 'bar-systray spacing-h-10',
-        properties: [
-            ['items', new Map()],
-            ['onAdded', (box, id) => {
+        className: 'margin-right-5 spacing-h-15',
+        attribute: {
+            items: new Map(),
+            onAdded: (box, id) => {
                 const item = SystemTray.getItem(id);
                 if (!item) return;
                 item.menu.className = 'menu';
-                if (box._items.has(id) || !item)
+                if (box.attribute.items.has(id) || !item)
                     return;
                 const widget = SysTrayItem(item);
-                box._items.set(id, widget);
+                box.attribute.items.set(id, widget);
                 box.add(widget);
                 box.show_all();
-                if (box._items.size === 1)
+                if (box.attribute.items.size === 1)
                     trayRevealer.revealChild = true;
-            }],
-            ['onRemoved', (box, id) => {
-                if (!box._items.has(id))
+            },
+            onRemoved: (box, id) => {
+                if (!box.attribute.items.has(id))
                     return;
 
-                box._items.get(id).destroy();
-                box._items.delete(id);
-                if (box._items.size === 0)
+                box.attribute.items.get(id).destroy();
+                box.attribute.items.delete(id);
+                if (box.attribute.items.size === 0)
                     trayRevealer.revealChild = false;
-            }],
-        ],
+            },
+        },
         setup: (self) => self
-            .hook(SystemTray, (box, id) => box._onAdded(box, id), 'added')
-            .hook(SystemTray, (box, id) => box._onRemoved(box, id), 'removed')
+            .hook(SystemTray, (box, id) => box.attribute.onAdded(box, id), 'added')
+            .hook(SystemTray, (box, id) => box.attribute.onRemoved(box, id), 'removed')
         ,
     });
     const trayRevealer = Widget.Revealer({

.config/ags/widgets/bar/workspaces_hyprland.js

@@ -3,7 +3,8 @@ const Lang = imports.lang;
 const Cairo = imports.cairo;
 const Pango = imports.gi.Pango;
 const PangoCairo = imports.gi.PangoCairo;
-import { App, Service, Utils, Widget } from '../../imports.js';
+import App from 'resource:///com/github/Aylur/ags/app.js';
+import Widget from 'resource:///com/github/Aylur/ags/widget.js';
 const { Box, DrawingArea, EventBox } = Widget;
 import Hyprland from 'resource:///com/github/Aylur/ags/service/hyprland.js';
 
@@ -15,15 +16,12 @@ const dummyOccupiedWs = Box({ className: 'bar-ws bar-ws-occupied' }); // Not sho
 // Font size = workspace id
 const WorkspaceContents = (count = 10) => {
     return DrawingArea({
-        properties: [
-            ['workspaceMask', 0],
-        ],
-        css: `transition: 500ms cubic-bezier(0.1, 1, 0, 1);`,
-        setup: (area) => area
-            .hook(Hyprland.active.workspace, (area) =>
-                area.setCss(`font-size: ${Hyprland.active.workspace.id}px;`)
-            )
-            .hook(Hyprland, (area) => {
+        css: `transition: 90ms cubic-bezier(0.1, 1, 0, 1);`,
+        attribute: {
+            initialized: false,
+            workspaceMask: 0,
+            updateMask: (self) => {
+                if (self.attribute.initialized) return; // We only need this to run once
                 const workspaces = Hyprland.workspaces;
                 let workspaceMask = 0;
                 for (let i = 0; i < workspaces.length; i++) {
@@ -34,8 +32,21 @@ const WorkspaceContents = (count = 10) => {
                         workspaceMask |= (1 << ws.id);
                     }
                 }
-                area._workspaceMask = workspaceMask;
-            }, 'notify::workspaces')
+                self.attribute.workspaceMask = workspaceMask;
+                self.attribute.initialized = true;
+            },
+            toggleMask: (self, occupied, name) => {
+                if (occupied) self.attribute.workspaceMask |= (1 << parseInt(name));
+                else self.attribute.workspaceMask &= ~(1 << parseInt(name));
+            },
+        },
+        setup: (area) => area
+            .hook(Hyprland.active.workspace, (area) =>
+                area.setCss(`font-size: ${Hyprland.active.workspace.id}px;`)
+            )
+            .hook(Hyprland, (self) => self.attribute.updateMask(self), 'notify::workspaces')
+            .hook(Hyprland, (self, name) => self.attribute.toggleMask(self, true, name), 'workspace-added')
+            .hook(Hyprland, (self, name) => self.attribute.toggleMask(self, false, name), 'workspace-removed')
             .on('draw', Lang.bind(area, (area, cr) => {
                 const allocation = area.get_allocation();
                 const { width, height } = allocation;
@@ -75,12 +86,12 @@ const WorkspaceContents = (count = 10) => {
 
                 // Draw workspace numbers
                 for (let i = 1; i <= count; i++) {
-                    if (area._workspaceMask & (1 << i)) {
+                    if (area.attribute.workspaceMask & (1 << i)) {
                         // Draw bg highlight
                         cr.setSourceRGBA(occupiedbg.red, occupiedbg.green, occupiedbg.blue, occupiedbg.alpha);
                         const wsCenterX = -(workspaceRadius) + (workspaceDiameter * i);
                         const wsCenterY = height / 2;
-                        if (!(area._workspaceMask & (1 << (i - 1)))) { // Left
+                        if (!(area.attribute.workspaceMask & (1 << (i - 1)))) { // Left
                             cr.arc(wsCenterX, wsCenterY, workspaceRadius, 0.5 * Math.PI, 1.5 * Math.PI);
                             cr.fill();
                         }
@@ -88,7 +99,7 @@ const WorkspaceContents = (count = 10) => {
                             cr.rectangle(wsCenterX - workspaceRadius, wsCenterY - workspaceRadius, workspaceRadius, workspaceRadius * 2)
                             cr.fill();
                         }
-                        if (!(area._workspaceMask & (1 << (i + 1)))) { // Right
+                        if (!(area.attribute.workspaceMask & (1 << (i + 1)))) { // Right
                             cr.arc(wsCenterX, wsCenterY, workspaceRadius, -0.5 * Math.PI, 0.5 * Math.PI);
                             cr.fill();
                         }
@@ -131,9 +142,7 @@ export default () => EventBox({
     onScrollDown: () => Hyprland.sendMessage(`dispatch workspace +1`),
     onMiddleClickRelease: () => App.toggleWindow('overview'),
     onSecondaryClickRelease: () => App.toggleWindow('osk'),
-    properties: [
-        ['clicked', false],
-    ],
+    attribute: { clicked: false },
     child: Box({
         homogeneous: true,
         className: 'bar-group-margin',
@@ -148,8 +157,7 @@ export default () => EventBox({
     setup: (self) => {
         self.add_events(Gdk.EventMask.POINTER_MOTION_MASK);
         self.on('motion-notify-event', (self, event) => {
-            if (!self._clicked) return;
-            console.log('switching move');
+            if (!self.attribute.clicked) return;
             const [_, cursorX, cursorY] = event.get_coords();
             const widgetWidth = self.get_allocation().width;
             const wsId = Math.ceil(cursorX * NUM_OF_WORKSPACES / widgetWidth);
@@ -157,13 +165,12 @@ export default () => EventBox({
         })
         self.on('button-press-event', (self, event) => {
             if (!(event.get_button()[1] === 1)) return; // We're only interested in left-click here
-            console.log('switching');
-            self._clicked = true;
+            self.attribute.clicked = true;
             const [_, cursorX, cursorY] = event.get_coords();
             const widgetWidth = self.get_allocation().width;
             const wsId = Math.ceil(cursorX * NUM_OF_WORKSPACES / widgetWidth);
             Hyprland.sendMessage(`dispatch workspace ${wsId}`);
         })
-        self.on('button-release-event', (self) => self._clicked = false);
+        self.on('button-release-event', (self) => self.attribute.clicked = false);
     }
 })

.config/ags/widgets/bar/workspaces_sway.js

@@ -0,0 +1,58 @@
+import Widget from "resource:///com/github/Aylur/ags/widget.js";
+import Sway from "../../services/sway.js";
+import * as Utils from "resource:///com/github/Aylur/ags/utils.js";
+import options from "../../options.js";
+import { range } from "../../utils.js";
+
+
+const dispatch = (arg) => Utils.execAsync(`swaymsg workspace ${arg}`);
+
+const Workspaces = () => {
+    const ws = options.workspaces.value || 20;
+    return Widget.Box({
+        children: range(ws).map((i) =>
+            Widget.Button({
+                setup: (btn) => (btn.id = i),
+                on_clicked: () => dispatch(i),
+                child: Widget.Label({
+                    label: `${i}`,
+                    class_name: "indicator",
+                    vpack: "center",
+                }),
+                setup: (self) => self.hook(Sway, (btn) => {
+                    btn.toggleClassName("active", Sway.active.workspace.name == i);
+                    btn.toggleClassName(
+                        "occupied",
+                        Sway.getWorkspace(`${i}`)?.nodes.length > 0,
+                    );
+                }),
+            })
+        ),
+        setup: (self) => self.hook(Sway.active.workspace,
+            (box) => box.children.map((btn) => {
+                btn.visible = Sway.workspaces.some(
+                    (ws) => ws.name == btn.id,
+                );
+            })
+        ),
+    });
+};
+
+export default () => Widget.EventBox({
+    class_name: "workspaces panel-button",
+    child: Widget.Box({
+        // its nested like this to keep it consistent with other PanelButton widgets
+        child: Widget.EventBox({
+            on_scroll_up: () => dispatch("next"),
+            on_scroll_down: () => dispatch("prev"),
+            class_name: "eventbox",
+            // binds: [["child", options.workspaces, "value", Workspaces]],
+            setup: (self) => self
+                .hook(options.workspaces, (self) => Selection.child = Workspaces(), "value")
+            ,
+        }),
+    }),
+    setup: (self) => {
+        console.log('[LOG] Sway workspace module loaded')
+    }
+});

.config/ags/widgets/cheatsheet/keybinds.js

@@ -1,4 +1,4 @@
-import { Widget } from '../../imports.js';
+import Widget from 'resource:///com/github/Aylur/ags/widget.js';
 import { keybindList } from "../../data/keybinds.js";
 
 export const Keybinds = () => Widget.Box({
@@ -38,7 +38,7 @@ export const Keybinds = () => Widget.Box({
                             children: category.binds.map((keybinds, i) => Widget.Box({ // Binds
                                 vertical: false,
                                 children: keybinds.keys.map((key, i) => Widget.Label({ // Specific keys
-                                    className: `${key == 'OR' || key == '+' ? 'cheatsheet-key-notkey' : 'cheatsheet-key'} txt-small`,
+                                    className: `${['OR', '+'].includes(key) ? 'cheatsheet-key-notkey' : 'cheatsheet-key'} txt-small`,
                                     label: key,
                                 }))
                             }))

.config/ags/widgets/cheatsheet/main.js

@@ -1,5 +1,6 @@
 const { Gdk, Gtk } = imports.gi;
-import { Service, Widget } from '../../imports.js';
+import Widget from 'resource:///com/github/Aylur/ags/widget.js';
+import Service from 'resource:///com/github/Aylur/ags/service.js';
 import { Keybinds } from "./keybinds.js";
 import { setupCursorHover } from "../../lib/cursorhover.js";
 

.config/ags/widgets/desktopbackground/main.js

@@ -1,5 +1,6 @@
 const { Gdk, Gtk } = imports.gi;
-import { App, Service, Utils, Widget } from '../../imports.js';
+import Widget from 'resource:///com/github/Aylur/ags/widget.js';
+import * as Utils from 'resource:///com/github/Aylur/ags/utils.js';
 const { execAsync, exec } = Utils;
 
 import TimeAndLaunchesWidget from './timeandlaunches.js'

.config/ags/widgets/desktopbackground/system.js

@@ -1,4 +1,5 @@
-import { App, Service, Utils, Widget } from '../../imports.js';
+import Widget from 'resource:///com/github/Aylur/ags/widget.js';
+import * as Utils from 'resource:///com/github/Aylur/ags/utils.js';
 const { execAsync, exec } = Utils;
 const { Box, EventBox, Label, Revealer, Overlay } = Widget;
 import { AnimatedCircProg } from '../../lib/animatedcircularprogress.js'
@@ -24,7 +25,9 @@ const ResourceValue = (name, icon, interval, valueUpdateCmd, displayFunc, props
                     Label({
                         xalign: 1,
                         className: 'titlefont txt-norm txt-onSecondaryContainer',
-                        connections: [[interval, (label) => displayFunc(label)]]
+                        setup: (self) => self
+                            .poll(interval, (label) => displayFunc(label))
+                        ,
                     })
                 ]
             })
@@ -32,11 +35,13 @@ const ResourceValue = (name, icon, interval, valueUpdateCmd, displayFunc, props
         Overlay({
             child: AnimatedCircProg({
                 className: 'bg-system-circprog',
-                connections: [[interval, (self) => {
-                    execAsync(['bash', '-c', `${valueUpdateCmd}`]).then((newValue) => {
-                        self.css = `font-size: ${Math.round(newValue)}px;`
-                    }).catch(print);
-                }]]
+                extraSetup: (self) => self
+                    .poll(interval, (self) => {
+                        execAsync(['bash', '-c', `${valueUpdateCmd}`]).then((newValue) => {
+                            self.css = `font-size: ${Math.round(newValue)}px;`
+                        }).catch(print);
+                    })
+                ,
             }),
             overlays: [
                 MaterialIcon(`${icon}`, 'hugeass'),
@@ -143,7 +148,7 @@ export default () => Box({
                     const firstChild = child.get_children()[0];
                     firstChild.revealChild = !firstChild.revealChild;
                 }
-                
+
             },
         })
     ],

.config/ags/widgets/desktopbackground/timeandlaunches.js

@@ -1,5 +1,9 @@
-const { GLib, Gio } = imports.gi;
-import { App, Service, Utils, Widget } from '../../imports.js';
+const { GLib } = imports.gi;
+import App from 'resource:///com/github/Aylur/ags/app.js';
+import Widget from 'resource:///com/github/Aylur/ags/widget.js';
+import Service from 'resource:///com/github/Aylur/ags/service.js';
+import * as Utils from 'resource:///com/github/Aylur/ags/utils.js';
+
 import Variable from 'resource:///com/github/Aylur/ags/variable.js';
 const { execAsync, exec } = Utils;
 const { Box, Label, Button, Revealer, EventBox } = Widget;

.config/ags/widgets/dock/dock.js

@@ -1,12 +1,14 @@
-const { Gdk, Gtk } = imports.gi;
-import { App, Service, Utils, Widget, SCREEN_HEIGHT, SCREEN_WIDTH } from '../../imports.js';
+const { Gtk } = imports.gi;
+import { SCREEN_HEIGHT, SCREEN_WIDTH } from '../../imports.js';
+import Widget from 'resource:///com/github/Aylur/ags/widget.js';
+import * as Utils from 'resource:///com/github/Aylur/ags/utils.js';
+const { EventBox } = Widget;
+
 import Hyprland from 'resource:///com/github/Aylur/ags/service/hyprland.js';
 import Applications from 'resource:///com/github/Aylur/ags/service/applications.js';
 const { execAsync, exec } = Utils;
-const { Box, EventBox, Label, Revealer, Overlay } = Widget;
-import { AnimatedCircProg } from '../../lib/animatedcircularprogress.js'
-import { MaterialIcon } from '../../lib/materialicon.js';
-import { setupCursorHover, setupCursorHoverAim } from "../../lib/cursorhover.js";
+const { Box, Revealer } = Widget;
+import { setupCursorHover } from "../../lib/cursorhover.js";
 
 const ANIMATION_TIME = 150;
 const pinnedApps = [
@@ -41,9 +43,9 @@ const DockSeparator = (props = {}) => Box({
 })
 
 const AppButton = ({ icon, ...rest }) => Widget.Revealer({
-    properties: [
-        ['workspace', 0],
-    ],
+    attribute: {
+        'workspace': 0
+    },
     revealChild: false,
     transition: 'slide_right',
     transitionDuration: ANIMATION_TIME,
@@ -80,12 +82,12 @@ const AppButton = ({ icon, ...rest }) => Widget.Revealer({
 
 const Taskbar = () => Widget.Box({
     className: 'dock-apps',
-    properties: [
-        ['map', new Map()],
-        ['clientSortFunc', (a, b) => {
-            return a._workspace > b._workspace;
-        }],
-        ['update', (box) => {
+    attribute: {
+        'map': new Map(),
+        'clientSortFunc': (a, b) => {
+            return a.attribute.workspace > b.attribute.workspace;
+        },
+        'update': (box) => {
             for (let i = 0; i < Hyprland.clients.length; i++) {
                 const client = Hyprland.clients[i];
                 if (client["pid"] == -1) return;
@@ -99,15 +101,15 @@ const Taskbar = () => Widget.Box({
                     tooltipText: `${client.title} (${appClass})`,
                     onClicked: () => focus(client),
                 });
-                newButton._workspace = client.workspace.id;
+                newButton.attribute.workspace = client.workspace.id;
                 newButton.revealChild = true;
-                box._map.set(client.address, newButton);
+                box.attribute.map.set(client.address, newButton);
             }
-            box.children = Array.from(box._map.values());
-        }],
-        ['add', (box, address) => {
+            box.children = Array.from(box.attribute.map.values());
+        },
+        'add': (box, address) => {
             if (!address) { // First active emit is undefined
-                box._update(box);
+                box.attribute.update(box);
                 return;
             }
             const newClient = Hyprland.clients.find(client => {
@@ -120,28 +122,29 @@ const Taskbar = () => Widget.Box({
                 tooltipText: `${newClient.title} (${appClass})`,
                 onClicked: () => focus(newClient),
             })
-            newButton._workspace = newClient.workspace.id;
-            box._map.set(address, newButton);
-            box.children = Array.from(box._map.values());
+            newButton.attribute.workspace = newClient.workspace.id;
+            box.attribute.map.set(address, newButton);
+            box.children = Array.from(box.attribute.map.values());
             newButton.revealChild = true;
-        }],
-        ['remove', (box, address) => {
+        },
+        'remove': (box, address) => {
             if (!address) return;
 
-            const removedButton = box._map.get(address);
+            const removedButton = box.attribute.map.get(address);
+            if (!removedButton) return;
             removedButton.revealChild = false;
 
             Utils.timeout(ANIMATION_TIME, () => {
                 removedButton.destroy();
-                box._map.delete(address);
-                box.children = Array.from(box._map.values());
+                box.attribute.map.delete(address);
+                box.children = Array.from(box.attribute.map.values());
             })
-        }],
-    ],
+        },
+    },
     setup: (self) => {
-        self.hook(Hyprland, (box, address) => box._add(box, address), 'client-added')
-            .hook(Hyprland, (box, address) => box._remove(box, address), 'client-removed')
-        Utils.timeout(100, () => self._update(self));
+        self.hook(Hyprland, (box, address) => box.attribute.add(box, address), 'client-added')
+            .hook(Hyprland, (box, address) => box.attribute.remove(box, address), 'client-removed')
+        Utils.timeout(100, () => self.attribute.update(self));
     },
 });
 
@@ -191,8 +194,8 @@ export default () => {
         ]
     })
     const dockRevealer = Revealer({
-        properties: [
-            ['updateShow', self => { // I only use mouse to resize. I don't care about keyboard resize if that's a thing
+        attribute: {
+            'updateShow': self => { // I only use mouse to resize. I don't care about keyboard resize if that's a thing
                 const dockSize = [
                     dockContent.get_allocated_width(),
                     dockContent.get_allocated_height()
@@ -229,18 +232,18 @@ export default () => {
                     }
                 }
                 self.revealChild = true;
-            }]
-        ],
+            }
+        },
         revealChild: false,
         transition: 'slide_up',
         transitionDuration: 200,
         child: dockContent,
         // setup: (self) => self
-        //     .hook(Hyprland, (self) => self._updateShow(self))
-        //     .hook(Hyprland.active.workspace, (self) => self._updateShow(self))
-        //     .hook(Hyprland.active.client, (self) => self._updateShow(self))
-        //     .hook(Hyprland, (self) => self._updateShow(self), 'client-added')
-        //     .hook(Hyprland, (self) => self._updateShow(self), 'client-removed')
+        //     .hook(Hyprland, (self) => self.attribute.updateShow(self))
+        //     .hook(Hyprland.active.workspace, (self) => self.attribute.updateShow(self))
+        //     .hook(Hyprland.active.client, (self) => self.attribute.updateShow(self))
+        //     .hook(Hyprland, (self) => self.attribute.updateShow(self), 'client-added')
+        //     .hook(Hyprland, (self) => self.attribute.updateShow(self), 'client-removed')
         // ,
     })
     return EventBox({
@@ -248,7 +251,7 @@ export default () => {
             dockRevealer.revealChild = true;
         },
         onHoverLost: () => {
-            if (Hyprland.active.client._class.length === 0) return;
+            if (Hyprland.active.client.attribute.class.length === 0) return;
             dockRevealer.revealChild = false;
         },
         child: Box({

.config/ags/widgets/dock/main.js

@@ -1,4 +1,4 @@
-import { App, Widget } from '../../imports.js';
+import Widget from 'resource:///com/github/Aylur/ags/widget.js';
 import Dock from './dock.js';
 
 export default () => Widget.Window({

.config/ags/widgets/indicators/colorscheme.js

@@ -1,11 +1,6 @@
-const { Gio, GLib, Gtk } = imports.gi;
-import { App, Service, Utils, Widget } from '../../imports.js';
-const { exec, execAsync } = Utils;
-import Mpris from 'resource:///com/github/Aylur/ags/service/mpris.js';
+import Widget from 'resource:///com/github/Aylur/ags/widget.js';
 
 const { Box, EventBox, Icon, Scrollable, Label, Button, Revealer } = Widget;
-import { AnimatedCircProg } from "../../lib/animatedcircularprogress.js";
-import { MaterialIcon } from '../../lib/materialicon.js';
 import { showColorScheme } from '../../variables.js';
 
 const ColorBox = ({

.config/ags/widgets/indicators/indicatorvalues.js

@@ -1,13 +1,12 @@
 // This file is for brightness/volume indicators
-const { GLib, Gtk } = imports.gi;
-import { App, Service, Utils, Widget } from '../../imports.js';
+import Widget from 'resource:///com/github/Aylur/ags/widget.js';
 import Audio from 'resource:///com/github/Aylur/ags/service/audio.js';
 const { Box, Label, ProgressBar, Revealer } = Widget;
-import { MarginRevealer } from '../../lib/advancedrevealers.js';
+import { MarginRevealer } from '../../lib/advancedwidgets.js';
 import Brightness from '../../services/brightness.js';
 import Indicator from '../../services/indicator.js';
 
-const OsdValue = (name, labelConnections, progressConnections, props = {}) => Box({ // Volume
+const OsdValue = (name, labelSetup, progressSetup, props = {}) => Box({ // Volume
     ...props,
     vertical: true,
     className: 'osd-bg osd-value',
@@ -23,8 +22,7 @@ const OsdValue = (name, labelConnections, progressConnections, props = {}) => Bo
                 }),
                 Label({
                     hexpand: false, className: 'osd-value-txt',
-                    label: '100',
-                    connections: labelConnections,
+                    setup: labelSetup,
                 }),
             ]
         }),
@@ -32,41 +30,49 @@ const OsdValue = (name, labelConnections, progressConnections, props = {}) => Bo
             className: 'osd-progress',
             hexpand: true,
             vertical: false,
-            connections: progressConnections,
+            setup: progressSetup,
         })
     ],
 });
 
 const brightnessIndicator = OsdValue('Brightness',
-    [[Brightness, self => {
-        self.label = `${Math.round(Brightness.screen_value * 100)}`;
-    }, 'notify::screen-value']],
-    [[Brightness, (progress) => {
-        const updateValue = Brightness.screen_value;
-        progress.value = updateValue;
-    }, 'notify::screen-value']],
+    (self) => self
+        .hook(Brightness, self => {
+            self.label = `${Math.round(Brightness.screen_value * 100)}`;
+        }, 'notify::screen-value')
+    ,
+    (self) => self
+        .hook(Brightness, (progress) => {
+            const updateValue = Brightness.screen_value;
+            progress.value = updateValue;
+        }, 'notify::screen-value')
+    ,
 )
 
 const volumeIndicator = OsdValue('Volume',
-    [[Audio, (label) => {
-        label.label = `${Math.round(Audio.speaker?.volume * 100)}`;
-    }]],
-    [[Audio, (progress) => {
-        const updateValue = Audio.speaker?.volume;
-        if (!isNaN(updateValue)) progress.value = updateValue;
-    }]],
+    (self) => self
+        .hook(Audio, (label) => {
+            label.label = `${Math.round(Audio.speaker?.volume * 100)}`;
+        })
+    ,
+    (self) => self
+        .hook(Audio, (progress) => {
+            const updateValue = Audio.speaker?.volume;
+            if (!isNaN(updateValue)) progress.value = updateValue;
+        })
+    ,
 );
 
 export default () => MarginRevealer({
     transition: 'slide_down',
     showClass: 'osd-show',
     hideClass: 'osd-hide',
-    connections: [
-        [Indicator, (revealer, value) => {
-            if(value > -1) revealer._show(revealer);
-            else revealer._hide(revealer);
-        }, 'popup'],
-    ],
+    extraSetup: (self) => self
+        .hook(Indicator, (revealer, value) => {
+            if (value > -1) revealer.attribute.show();
+            else revealer.attribute.hide();
+        }, 'popup')
+    ,
     child: Box({
         hpack: 'center',
         vertical: false,

.config/ags/widgets/indicators/main.js

@@ -1,4 +1,4 @@
-import { Widget } from '../../imports.js';
+import Widget from 'resource:///com/github/Aylur/ags/widget.js';
 import Indicator from '../../services/indicator.js';
 import IndicatorValues from './indicatorvalues.js';
 import MusicControls from './musiccontrols.js';

.config/ags/widgets/indicators/musiccontrols.js

@@ -1,10 +1,12 @@
-const { Gio, GLib, Gtk } = imports.gi;
-import { App, Service, Utils, Widget } from '../../imports.js';
+const { Gio, GLib } = imports.gi;
+import App from 'resource:///com/github/Aylur/ags/app.js';
+import Widget from 'resource:///com/github/Aylur/ags/widget.js';
+import * as Utils from 'resource:///com/github/Aylur/ags/utils.js';
 const { exec, execAsync } = Utils;
 import Mpris from 'resource:///com/github/Aylur/ags/service/mpris.js';
 
 const { Box, EventBox, Icon, Scrollable, Label, Button, Revealer } = Widget;
-import { MarginRevealer } from '../../lib/advancedrevealers.js';
+import { MarginRevealer } from '../../lib/advancedwidgets.js';
 import { AnimatedCircProg } from "../../lib/animatedcircularprogress.js";
 import { MaterialIcon } from '../../lib/materialicon.js';
 import { showMusicControls } from '../../variables.js';
@@ -17,7 +19,7 @@ function expandTilde(path) {
     }
 }
 
-const LIGHTDARK_FILE_LOCATION = '~/.cache/ags/user/colormode.txt'
+const LIGHTDARK_FILE_LOCATION = `${GLib.get_user_cache_dir()}/ags/user/colormode.txt`;
 const lightDark = Utils.readFile(expandTilde(LIGHTDARK_FILE_LOCATION)).trim();
 const COVER_COLORSCHEME_SUFFIX = '_colorscheme.css';
 const PREFERRED_PLAYER = 'plasma-browser-integration';
@@ -74,6 +76,12 @@ function getTrackfont(player) {
     if (title.includes('東方')) return 'Crimson Text, serif'; // Serif for Touhou stuff
     return DEFAULT_MUSIC_FONT;
 }
+function trimTrackTitle(title) {
+    var cleanedTitle = title;
+    cleanedTitle = cleanedTitle.replace(/【[^】]*】/, '');          // Remove stuff like【C93】 at beginning
+    cleanedTitle = cleanedTitle.replace(/\[FREE DOWNLOAD\]/g, ''); // Remove F-777's [FREE DOWNLOAD]
+    return cleanedTitle.trim();
+}
 
 const TrackProgress = ({ player, ...rest }) => {
     const _updateProgress = (circprog) => {
@@ -86,10 +94,10 @@ const TrackProgress = ({ player, ...rest }) => {
         ...rest,
         className: 'osd-music-circprog',
         vpack: 'center',
-        connections: [ // Update on change/once every 3 seconds
-            [Mpris, _updateProgress],
-            [3000, _updateProgress]
-        ],
+        extraSetup: (self) => self
+            .hook(Mpris, _updateProgress)
+            .poll(3000, _updateProgress)
+        ,
     })
 }
 
@@ -100,13 +108,13 @@ const TrackTitle = ({ player, ...rest }) => Label({
     truncate: 'end',
     // wrap: true,
     className: 'osd-music-title',
-    connections: [[player, (self) => {
+    setup: (self) => self.hook(player, (self) => {
         // Player name
-        self.label = player.trackTitle.length > 0 ? player.trackTitle : 'No media';
+        self.label = player.trackTitle.length > 0 ? trimTrackTitle(player.trackTitle) : 'No media';
         // Font based on track/artist
         const fontForThisTrack = getTrackfont(player);
         self.css = `font-family: ${fontForThisTrack}, ${DEFAULT_MUSIC_FONT};`;
-    }, 'notify::track-title']]
+    }, 'notify::track-title'),
 });
 
 const TrackArtists = ({ player, ...rest }) => Label({
@@ -114,9 +122,9 @@ const TrackArtists = ({ player, ...rest }) => Label({
     xalign: 0,
     className: 'osd-music-artists',
     truncate: 'end',
-    connections: [[player, (self) => {
+    setup: (self) => self.hook(player, (self) => {
         self.label = player.trackArtists.length > 0 ? player.trackArtists.join(', ') : '';
-    }, 'notify::track-artists']]
+    }, 'notify::track-artists'),
 })
 
 const CoverArt = ({ player, ...rest }) => Box({
@@ -134,8 +142,8 @@ const CoverArt = ({ player, ...rest }) => Box({
             }),
             overlays: [ // Real
                 Box({
-                    properties: [
-                        ['updateCover', (self) => {
+                    attribute: {
+                        'updateCover': (self) => {
                             const player = Mpris.getPlayer();
 
                             // Player closed
@@ -165,17 +173,17 @@ const CoverArt = ({ player, ...rest }) => Box({
                                 `${App.configDir}/scripts/color_generation/generate_colors_material.py --path '${coverPath}' > ${App.configDir}/scss/_musicmaterial.scss ${lightDark}`])
                                 .then(() => {
                                     exec(`wal -i "${player.coverPath}" -n -t -s -e -q ${lightDark}`)
-                                    exec(`bash -c "cp ~/.cache/wal/colors.scss ${App.configDir}/scss/_musicwal.scss"`)
+                                    exec(`cp ${GLib.get_user_cache_dir()}/wal/colors.scss ${App.configDir}/scss/_musicwal.scss`);
                                     exec(`sassc ${App.configDir}/scss/_music.scss ${stylePath}`);
                                     self.css = `background-image: url('${coverPath}');`;
                                     App.applyCss(`${stylePath}`);
                                 })
                                 .catch(print);
-                        }],
-                    ],
+                        },
+                    },
                     className: 'osd-music-cover-art',
-                    connections: [
-                        [player, (self) => self._updateCover(self), 'notify::cover-path']
+                    $: [
+                        [player, (self) => self.attribute.updateCover(self), 'notify::cover-path']
                     ],
                 })
             ]
@@ -194,6 +202,7 @@ const TrackControls = ({ player, ...rest }) => Widget.Revealer({
         children: [
             Button({
                 className: 'osd-music-controlbtn',
+                onClicked: () => execAsync('playerctl previous').catch(print),
                 child: Label({
                     className: 'icon-material osd-music-controlbtn-txt',
                     label: 'skip_previous',
@@ -201,6 +210,9 @@ const TrackControls = ({ player, ...rest }) => Widget.Revealer({
             }),
             Button({
                 className: 'osd-music-controlbtn',
+                onClicked: () => execAsync(['bash', '-c', 'playerctl next || playerctl position `bc <<< "100 * $(playerctl metadata mpris:length) / 1000000 / 100"`'])
+                    .catch(print)
+                ,
                 child: Label({
                     className: 'icon-material osd-music-controlbtn-txt',
                     label: 'skip_next',
@@ -208,13 +220,13 @@ const TrackControls = ({ player, ...rest }) => Widget.Revealer({
             }),
         ],
     }),
-    connections: [[Mpris, (self) => {
+    setup: (self) => szelf.hook(Mpris, (self) => {
         const player = Mpris.getPlayer();
         if (!player)
             self.revealChild = false;
         else
             self.revealChild = true;
-    }, 'notify::play-back-status']]
+    }, 'notify::play-back-status'),
 });
 
 const TrackSource = ({ player, ...rest }) => Widget.Revealer({
@@ -230,19 +242,19 @@ const TrackSource = ({ player, ...rest }) => Widget.Revealer({
                 hpack: 'fill',
                 justification: 'center',
                 className: 'icon-nerd',
-                connections: [[player, (self) => {
+                setup: (self) => self.hook(player, (self) => {
                     self.label = detectMediaSource(player.trackCoverUrl);
-                }, 'notify::cover-path']]
+                }, 'notify::cover-path'),
             }),
         ],
     }),
-    connections: [[Mpris, (self) => {
+    setup: (self) => self.hook(Mpris, (self) => {
         const mpris = Mpris.getPlayer('');
         if (!mpris)
             self.revealChild = false;
         else
             self.revealChild = true;
-    }]]
+    }),
 });
 
 const TrackTime = ({ player, ...rest }) => {
@@ -256,28 +268,26 @@ const TrackTime = ({ player, ...rest }) => {
             className: 'osd-music-pill spacing-h-5',
             children: [
                 Label({
-                    connections: [[1000, (self) => {
+                    setup: (self) => self.poll(1000, (self) => {
                         const player = Mpris.getPlayer();
                         if (!player) return;
                         self.label = lengthStr(player.position);
-                    }]]
+                    }),
                 }),
                 Label({ label: '/' }),
                 Label({
-                    connections: [[Mpris, (self) => {
+                    setup: (self) => self.hook(Mpris, (self) => {
                         const player = Mpris.getPlayer();
                         if (!player) return;
                         self.label = lengthStr(player.length);
-                    }]]
+                    }),
                 }),
             ],
         }),
-        connections: [[Mpris, (self) => {
-            if (!player)
-                self.revealChild = false;
-            else
-                self.revealChild = true;
-        }]]
+        setup: (self) => self.hook(Mpris, (self) => {
+            if (!player) self.revealChild = false;
+            else self.revealChild = true;
+        }),
     })
 }
 
@@ -291,22 +301,17 @@ const PlayState = ({ player }) => {
             overlays: [
                 Widget.Button({
                     className: 'osd-music-playstate-btn',
-                    onClicked: () => {
-                        Mpris.getPlayer().playPause()
-                    },
+                    onClicked: () => execAsync('playerctl play-pause').catch(print),
                     child: Widget.Label({
                         justification: 'center',
                         hpack: 'fill',
                         vpack: 'center',
-                        connections: [[player, (label) => {
+                        setup: (self) => self.hook(player, (label) => {
                             label.label = `${player.playBackStatus == 'Playing' ? 'pause' : 'play_arrow'}`;
-                        }, 'notify::play-back-status']],
+                        }, 'notify::play-back-status'),
                     }),
                 }),
             ],
-            // setup: self => Utils.timeout(1, () => {
-            //     self.set_overlay_pass_through(self.get_children()[1], true);
-            // }),
             passThrough: true,
         })
     });
@@ -350,19 +355,17 @@ export default () => MarginRevealer({
     showClass: 'osd-show',
     hideClass: 'osd-hide',
     child: Box({
-        connections: [[Mpris, box => {
+        setup: (self) => self.hook(Mpris, box => {
             let foundPlayer = false;
 
             Mpris.players.forEach((player, i) => {
                 if (isRealPlayer(player)) {
                     foundPlayer = true;
-                    box._player = player;
                     box.children = [MusicControlsWidget(player)];
                 }
             });
 
             if (!foundPlayer) {
-                box._player = null;
                 const children = box.get_children();
                 for (let i = 0; i < children.length; i++) {
                     const child = children[i];
@@ -370,12 +373,10 @@ export default () => MarginRevealer({
                 }
                 return;
             }
-        }, 'notify::players']],
+        }, 'notify::players'),
+    }),
+    setup: (self) => self.hook(showMusicControls, (revealer) => {
+        if (showMusicControls.value) revealer.attribute.show();
+        else revealer.attribute.hide();
     }),
-    connections: [
-        [showMusicControls, (revealer) => {
-            if(showMusicControls.value) revealer._show(revealer);
-            else revealer._hide(revealer);
-        }],
-    ],
 })

.config/ags/widgets/indicators/notificationpopups.js

@@ -1,9 +1,7 @@
 // This file is for popup notifications
-const { GLib, Gtk } = imports.gi;
-import { App, Service, Utils, Widget } from '../../imports.js';
-import Audio from 'resource:///com/github/Aylur/ags/service/audio.js';
+import Widget from 'resource:///com/github/Aylur/ags/widget.js';
 import Notifications from 'resource:///com/github/Aylur/ags/service/notifications.js';
-const { Box, EventBox, Icon, Scrollable, Label, Button, Revealer } = Widget;
+const { Box } = Widget;
 import Notification from '../../lib/notification.js';
 
 const PopupNotification = (notifObject) => Widget.Box({
@@ -39,41 +37,39 @@ const naiveNotifPopupList = Widget.Box({
 const notifPopupList = Box({
     vertical: true,
     className: 'osd-notifs spacing-v-5-revealer',
-    properties: [
-        ['map', new Map()],
-
-        ['dismiss', (box, id, force = false) => {
-            if (!id || !box._map.has(id) || box._map.get(id)._hovered && !force)
+    attribute: {
+        'map': new Map(),
+        'dismiss': (box, id, force = false) => {
+            if (!id || !box.attribute.map.has(id) || box.attribute.map.get(id).attribute.hovered && !force)
                 return;
 
-            const notif = box._map.get(id);
+            const notif = box.attribute.map.get(id);
             notif.revealChild = false;
-            notif._destroyWithAnims();
-        }],
-
-        ['notify', (box, id) => {
-            // console.log('new notiffy', id, Notifications.getNotification(id))
+            notif.attribute.destroyWithAnims();
+            box.attribute.map.delete(id);
+        },
+        'notify': (box, id) => {
             if (!id || Notifications.dnd) return;
             if (!Notifications.getNotification(id)) return;
 
-            box._map.delete(id);
+            box.attribute.map.delete(id);
 
             const notif = Notifications.getNotification(id);
             const newNotif = Notification({
                 notifObject: notif,
                 isPopup: true,
             });
-            box._map.set(id, newNotif);
-            box.pack_end(box._map.get(id), false, false, 0);
+            box.attribute.map.set(id, newNotif);
+            box.pack_end(box.attribute.map.get(id), false, false, 0);
             box.show_all();
 
-            // box.children = Array.from(box._map.values()).reverse();
-        }],
-    ],
+            // box.children = Array.from(box.attribute.map.values()).reverse();
+        },
+    },
     setup: (self) => self
-        .hook(Notifications, (box, id) => box._notify(box, id), 'notified')
-        .hook(Notifications, (box, id) => box._dismiss(box, id), 'dismissed')
-        .hook(Notifications, (box, id) => box._dismiss(box, id, true), 'closed')
+        .hook(Notifications, (box, id) => box.attribute.notify(box, id), 'notified')
+        .hook(Notifications, (box, id) => box.attribute.dismiss(box, id), 'dismissed')
+        .hook(Notifications, (box, id) => box.attribute.dismiss(box, id, true), 'closed')
     ,
 });
 

.config/ags/widgets/onscreenkeyboard/onscreenkeyboard.js

@@ -1,5 +1,9 @@
-const { GLib, Gdk, Gtk } = imports.gi;
-import { App, Service, Utils, Widget } from '../../imports.js';
+const { Gtk } = imports.gi;
+import App from 'resource:///com/github/Aylur/ags/app.js';
+import Widget from 'resource:///com/github/Aylur/ags/widget.js';
+import Service from 'resource:///com/github/Aylur/ags/service.js';
+import * as Utils from 'resource:///com/github/Aylur/ags/utils.js';
+
 import Hyprland from 'resource:///com/github/Aylur/ags/service/hyprland.js';
 const { Box, EventBox, Button, Revealer } = Widget;
 const { execAsync, exec } = Utils;
@@ -83,7 +87,7 @@ const keyboardItself = (kbJson) => {
             children: row.map(key => {
                 return Button({
                     className: `osk-key osk-key-${key.shape}`,
-                    hexpand: (key.shape == "space" || key.shape == "expand"),
+                    hexpand: ["space", "expand"].includes(key.shape),
                     label: key.label,
                     setup: (button) => {
                         let pressed = false;

.config/ags/widgets/overview/actions.js

@@ -1,6 +1,4 @@
-const { Gio, GLib } = imports.gi;
-import { App, Service, Utils, Widget } from '../../imports.js';
-const { execAsync, exec } = Utils;
+import * as Utils from 'resource:///com/github/Aylur/ags/utils.js';
 import Hyprland from 'resource:///com/github/Aylur/ags/service/hyprland.js';
 
 function moveClientToWorkspace(address, workspace) {

.config/ags/widgets/overview/main.js

@@ -1,5 +1,5 @@
-import { Widget } from '../../imports.js';
-import { SearchAndWindows } from "./overview.js";
+import Widget from 'resource:///com/github/Aylur/ags/widget.js';
+import { SearchAndWindows } from "./windowcontent.js";
 
 export default () => Widget.Window({
     name: 'overview',

.config/ags/widgets/overview/miscfunctions.js

@@ -1,5 +1,6 @@
 const { Gio, GLib } = imports.gi;
-import { App, Service, Utils, Widget } from '../../imports.js';
+import App from 'resource:///com/github/Aylur/ags/app.js';
+import * as Utils from 'resource:///com/github/Aylur/ags/utils.js';
 const { execAsync, exec } = Utils;
 import Todo from "../../services/todo.js";
 
@@ -21,12 +22,12 @@ export function launchCustomCommand(command) {
         execAsync([`bash`, `-c`, `${App.configDir}/scripts/color_generation/switchcolor.sh`, `&`]).catch(print);
     }
     else if (args[0] == '>light') { // Light mode
-        execAsync([`bash`, `-c`, `mkdir -p ~/.cache/ags/user && echo "-l" > ~/.cache/ags/user/colormode.txt`])
+        execAsync([`bash`, `-c`, `mkdir -p ${GLib.get_user_cache_dir()}/ags/user && echo "-l" > ${GLib.get_user_cache_dir()}/ags/user/colormode.txt`])
             .then(execAsync(['bash', '-c', `${App.configDir}/scripts/color_generation/switchwall.sh --noswitch`]).catch(print))
             .catch(print);
     }
     else if (args[0] == '>dark') { // Dark mode
-        execAsync([`bash`, `-c`, `mkdir -p ~/.cache/ags/user && echo "" > ~/.cache/ags/user/colormode.txt`])
+        execAsync([`bash`, `-c`, `mkdir -p ${GLib.get_user_cache_dir()}/ags/user && echo "" > ${GLib.get_user_cache_dir()}/ags/user/colormode.txt`])
             .then(execAsync(['bash', '-c', `${App.configDir}/scripts/color_generation/switchwall.sh --noswitch`]).catch(print))
             .catch(print);
     }
@@ -34,10 +35,10 @@ export function launchCustomCommand(command) {
         execAsync([`bash`, `-c`, `${App.configDir}/scripts/color_generation/applycolor.sh --bad-apple`]).catch(print);
     }
     else if (args[0] == '>material') { // Light mode
-        execAsync([`bash`, `-c`, `mkdir -p ~/.cache/ags/user && echo "material" > ~/.cache/ags/user/colorbackend.txt`]).catch(print);
+        execAsync([`bash`, `-c`, `mkdir -p ${GLib.get_user_cache_dir()}/ags/user && echo "material" > ${GLib.get_user_cache_dir()}/ags/user/colorbackend.txt`]).catch(print);
     }
     else if (args[0] == '>pywal') { // Dark mode
-        execAsync([`bash`, `-c`, `mkdir -p ~/.cache/ags/user && echo "pywal" > ~/.cache/ags/user/colorbackend.txt`]).catch(print);
+        execAsync([`bash`, `-c`, `mkdir -p ${GLib.get_user_cache_dir()}/ags/user && echo "pywal" > ${GLib.get_user_cache_dir()}/ags/user/colorbackend.txt`]).catch(print);
     }
     else if (args[0] == '>todo') { // Todo
         Todo.add(args.slice(1).join(' '));

.config/ags/widgets/overview/overview.js

@@ -1,547 +0,0 @@
-const { Gdk, Gio, Gtk } = imports.gi;
-import { App, Service, Utils, Variable, Widget, SCREEN_HEIGHT, SCREEN_WIDTH } from '../../imports.js';
-import Applications from 'resource:///com/github/Aylur/ags/service/applications.js';
-import Hyprland from 'resource:///com/github/Aylur/ags/service/hyprland.js';
-const { execAsync, exec } = Utils;
-import { setupCursorHover, setupCursorHoverGrab } from "../../lib/cursorhover.js";
-import { DoubleRevealer } from "../../lib/advancedrevealers.js";
-import { execAndClose, expandTilde, hasUnterminatedBackslash, startsWithNumber, launchCustomCommand, ls } from './miscfunctions.js';
-import {
-    CalculationResultButton, CustomCommandButton, DirectoryButton,
-    DesktopEntryButton, ExecuteCommandButton, SearchButton
-} from './searchbuttons.js';
-import { dumpToWorkspace, swapWorkspace } from "./actions.js";
-
-// Add math funcs
-const { abs, sin, cos, tan, cot, asin, acos, atan, acot } = Math;
-const pi = Math.PI;
-// trigonometric funcs for deg
-const sind = x => sin(x * pi / 180);
-const cosd = x => cos(x * pi / 180);
-const tand = x => tan(x * pi / 180);
-const cotd = x => cot(x * pi / 180);
-const asind = x => asin(x) * 180 / pi;
-const acosd = x => acos(x) * 180 / pi;
-const atand = x => atan(x) * 180 / pi;
-const acotd = x => acot(x) * 180 / pi;
-
-const MAX_RESULTS = 10;
-const OVERVIEW_SCALE = 0.18; // = overview workspace box / screen size
-const OVERVIEW_WS_NUM_SCALE = 0.09;
-const OVERVIEW_WS_NUM_MARGIN_SCALE = 0.07;
-const TARGET = [Gtk.TargetEntry.new('text/plain', Gtk.TargetFlags.SAME_APP, 0)];
-const searchPromptTexts = [
-    'Try "~/.config"',
-    'Try "Files"',
-    'Try "6*cos(pi)"',
-    'Try "sudo pacman -Syu"',
-    'Try "How to basic"',
-    'Drag n\' drop to move windows',
-    'Type to search',
-]
-
-const overviewTick = Variable(false);
-
-function truncateTitle(str) {
-    let lastDash = -1;
-    let found = -1; // 0: em dash, 1: en dash, 2: minus, 3: vertical bar, 4: middle dot
-    for (let i = str.length - 1; i >= 0; i--) {
-        if (str[i] === '—') {
-            found = 0;
-            lastDash = i;
-        }
-        else if (str[i] === '–' && found < 1) {
-            found = 1;
-            lastDash = i;
-        }
-        else if (str[i] === '-' && found < 2) {
-            found = 2;
-            lastDash = i;
-        }
-        else if (str[i] === '|' && found < 3) {
-            found = 3;
-            lastDash = i;
-        }
-        else if (str[i] === '·' && found < 4) {
-            found = 4;
-            lastDash = i;
-        }
-    }
-    if (lastDash === -1) return str;
-    return str.substring(0, lastDash);
-}
-
-function iconExists(iconName) {
-    let iconTheme = Gtk.IconTheme.get_default();
-    return iconTheme.has_icon(iconName);
-}
-
-function substitute(str) {
-    const subs = [
-        { from: 'code-url-handler', to: 'visual-studio-code' },
-        { from: 'Code', to: 'visual-studio-code' },
-        { from: 'GitHub Desktop', to: 'github-desktop' },
-        { from: 'wpsoffice', to: 'wps-office2019-kprometheus' },
-        { from: 'gnome-tweaks', to: 'org.gnome.tweaks' },
-        { from: 'Minecraft* 1.20.1', to: 'minecraft' },
-        { from: '', to: 'image-missing' },
-    ];
-
-    for (const { from, to } of subs) {
-        if (from === str)
-            return to;
-    }
-
-    if (!iconExists(str)) str = str.toLowerCase().replace(/\s+/g, '-'); // Turn into kebab-case
-    return str;
-}
-
-const ContextWorkspaceArray = ({ label, actionFunc, thisWorkspace }) => Widget.MenuItem({
-    label: `${label}`,
-    setup: (menuItem) => {
-        let submenu = new Gtk.Menu();
-        submenu.className = 'menu';
-        for (let i = 1; i <= 10; i++) {
-            let button = new Gtk.MenuItem({
-                label: `Workspace ${i}`
-            });
-            button.connect("activate", () => {
-                // execAsync([`${onClickBinary}`, `${thisWorkspace}`, `${i}`]).catch(print);
-                actionFunc(thisWorkspace, i);
-                overviewTick.value = !overviewTick.value;
-            });
-            submenu.append(button);
-        }
-        menuItem.set_reserve_indicator(true);
-        menuItem.set_submenu(submenu);
-    }
-})
-
-const client = ({ address, size: [w, h], workspace: { id, name }, class: c, title, xwayland }) => {
-    const revealInfoCondition = (Math.min(w, h) * OVERVIEW_SCALE > 70);
-    if (w <= 0 || h <= 0) return null;
-    title = truncateTitle(title);
-    return Widget.Button({
-        className: 'overview-tasks-window',
-        hpack: 'center',
-        vpack: 'center',
-        onClicked: () => {
-            execAsync([`bash`, `-c`, `hyprctl dispatch focuswindow address:${address}`, `&`]).catch(print);
-            App.closeWindow('overview');
-        },
-        onMiddleClickRelease: () => execAsync([`bash`, `-c`, `hyprctl dispatch closewindow address:${address}`, `&`]).catch(print),
-        onSecondaryClick: (button) => {
-            button.toggleClassName('overview-tasks-window-selected', true);
-            const menu = Widget.Menu({
-                className: 'menu',
-                children: [
-                    Widget.MenuItem({
-                        child: Widget.Label({
-                            xalign: 0,
-                            label: "Close (Middle-click)",
-                        }),
-                        onActivate: () => {
-                            execAsync([`bash`, `-c`, `hyprctl dispatch closewindow address:${address}`, `&`])
-                                .catch(print);
-                        }
-                    }),
-                    ContextWorkspaceArray({
-                        label: "Dump windows to workspace",
-                        actionFunc: dumpToWorkspace,
-                        thisWorkspace: Number(id)
-                    }),
-                    ContextWorkspaceArray({
-                        label: "Swap windows with workspace",
-                        actionFunc: swapWorkspace,
-                        thisWorkspace: Number(id)
-                    }),
-                ],
-            });
-            menu.connect("deactivate", () => {
-                button.toggleClassName('overview-tasks-window-selected', false);
-            })
-            menu.connect("selection-done", () => {
-                button.toggleClassName('overview-tasks-window-selected', false);
-            })
-            menu.popup_at_pointer(null); // Show the menu at the pointer's position
-        },
-        child: Widget.Box({
-            css: `
-                min-width: ${Math.max(w * OVERVIEW_SCALE - 4, 1)}px;
-                min-height: ${Math.max(h * OVERVIEW_SCALE - 4, 1)}px;
-            `,
-            homogeneous: true,
-            child: Widget.Box({
-                vertical: true,
-                vpack: 'center',
-                className: 'spacing-v-5',
-                children: [
-                    Widget.Icon({
-                        icon: substitute(c),
-                        size: Math.min(w, h) * OVERVIEW_SCALE / 2.5,
-                    }),
-                    // TODO: Add xwayland tag instead of just having italics
-                    DoubleRevealer({
-                        transition1: 'slide_right',
-                        transition2: 'slide_down',
-                        revealChild: revealInfoCondition,
-                        child: Widget.Scrollable({
-                            hexpand: true,
-                            vscroll: 'never',
-                            hscroll: 'automatic',
-                            child: Widget.Label({
-                                truncate: 'end',
-                                className: `${xwayland ? 'txt txt-italic' : 'txt'}`,
-                                css: `
-                                    font-size: ${Math.min(SCREEN_WIDTH, SCREEN_HEIGHT) * OVERVIEW_SCALE / 14.6}px;
-                                    margin: 0px ${Math.min(SCREEN_WIDTH, SCREEN_HEIGHT) * OVERVIEW_SCALE / 10}px;
-                                `,
-                                // If the title is too short, include the class
-                                label: (title.length <= 1 ? `${c}: ${title}` : title),
-                            })
-                        })
-                    })
-                ]
-            })
-        }),
-        tooltipText: `${c}: ${title}`,
-        setup: (button) => {
-            setupCursorHoverGrab(button);
-
-            button.drag_source_set(Gdk.ModifierType.BUTTON1_MASK, TARGET, Gdk.DragAction.MOVE);
-            button.drag_source_set_icon_name(substitute(c));
-            // button.drag_source_set_icon_gicon(icon);
-
-            button.connect('drag-begin', (button) => {  // On drag start, add the dragging class
-                button.toggleClassName('overview-tasks-window-dragging', true);
-            });
-            button.connect('drag-data-get', (_w, _c, data) => { // On drag finish, give address
-                data.set_text(address, address.length);
-                button.toggleClassName('overview-tasks-window-dragging', false);
-            });
-        },
-    });
-}
-
-const workspace = index => {
-    const fixed = Gtk.Fixed.new();
-    const WorkspaceNumber = (index) => Widget.Label({
-        className: 'overview-tasks-workspace-number',
-        label: `${index}`,
-        css: `
-            margin: ${Math.min(SCREEN_WIDTH, SCREEN_HEIGHT) * OVERVIEW_SCALE * OVERVIEW_WS_NUM_MARGIN_SCALE}px;
-            font-size: ${SCREEN_HEIGHT * OVERVIEW_SCALE * OVERVIEW_WS_NUM_SCALE}px;
-        `,
-    })
-    const widget = Widget.Box({
-        className: 'overview-tasks-workspace',
-        vpack: 'center',
-        css: `
-        min-width: ${SCREEN_WIDTH * OVERVIEW_SCALE}px;
-        min-height: ${SCREEN_HEIGHT * OVERVIEW_SCALE}px;
-        `,
-        children: [Widget.EventBox({
-            hexpand: true,
-            vexpand: true,
-            onPrimaryClickRelease: () => {
-                execAsync([`bash`, `-c`, `hyprctl dispatch workspace ${index}`, `&`]).catch(print);
-                App.closeWindow('overview');
-            },
-            setup: eventbox => {
-                eventbox.drag_dest_set(Gtk.DestDefaults.ALL, TARGET, Gdk.DragAction.COPY);
-                eventbox.connect('drag-data-received', (_w, _c, _x, _y, data) => {
-                    overviewTick.value = !overviewTick.value;
-                    execAsync([`bash`, `-c`, `hyprctl dispatch movetoworkspacesilent ${index},address:${data.get_text()}`, `&`]).catch(print);
-                });
-            },
-            child: fixed,
-        })],
-    });
-    widget.update = (clients) => {
-        clients = clients.filter(({ workspace: { id } }) => id === index);
-
-        // this is for my monitor layout
-        // shifts clients back by SCREEN_WIDTHpx if necessary
-        clients = clients.map(client => {
-            const [x, y] = client.at;
-            if (x > SCREEN_WIDTH)
-                client.at = [x - SCREEN_WIDTH, y];
-            return client;
-        });
-
-        const children = fixed.get_children();
-        for (let i = 0; i < children.length; i++) {
-            const child = children[i];
-            child.destroy();
-        }
-        fixed.put(WorkspaceNumber(index), 0, 0);
-
-        for (let i = 0; i < clients.length; i++) {
-            const c = clients[i];
-            if (c.mapped) {
-                fixed.put(client(c), c.at[0] * OVERVIEW_SCALE, c.at[1] * OVERVIEW_SCALE);
-            }
-        }
-
-
-
-        fixed.show_all();
-    };
-    return widget;
-};
-
-const arr = (s, n) => {
-    const array = [];
-    for (let i = 0; i < n; i++)
-        array.push(s + i);
-
-    return array;
-};
-
-const OverviewRow = ({ startWorkspace, workspaces, windowName = 'overview' }) => Widget.Box({
-    children: arr(startWorkspace, workspaces).map(workspace),
-    properties: [['update', box => {
-        execAsync('hyprctl -j clients').then(clients => {
-            const json = JSON.parse(clients);
-            const children = box.get_children();
-            for (let i = 0; i < children.length; i++) {
-                const ch = children[i];
-                ch.update(json)
-            }
-
-        }).catch(print);
-    }]],
-    setup: (box) => box._update(box),
-    connections: [
-        // Update on change
-        [overviewTick, box => { if (!App.getWindow(windowName).visible) return; Utils.timeout(2, () => box._update(box)); }],
-        [Hyprland, box => { if (!App.getWindow(windowName).visible) return; box._update(box); }, 'client-added'],
-        [Hyprland, box => { if (!App.getWindow(windowName).visible) return; box._update(box); }, 'client-removed'],
-        // Update on show
-        [App, (box, name, visible) => { // Update on open
-            if (name == 'overview' && visible) {
-                box._update(box);
-            }
-        }],
-    ],
-});
-
-
-export const SearchAndWindows = () => {
-    var _appSearchResults = [];
-
-    const ClickToClose = ({ ...props }) => Widget.EventBox({
-        ...props,
-        onPrimaryClick: () => App.closeWindow('overview'),
-        onSecondaryClick: () => App.closeWindow('overview'),
-        onMiddleClick: () => App.closeWindow('overview'),
-    });
-    const resultsBox = Widget.Box({
-        className: 'overview-search-results',
-        vertical: true,
-        vexpand: true,
-    });
-    const resultsRevealer = Widget.Revealer({
-        transitionDuration: 200,
-        revealChild: false,
-        transition: 'slide_down',
-        // duration: 200,
-        hpack: 'center',
-        child: resultsBox,
-    });
-    const overviewRevealer = Widget.Revealer({
-        revealChild: true,
-        transition: 'slide_down',
-        transitionDuration: 200,
-        child: Widget.Box({
-            vertical: true,
-            className: 'overview-tasks',
-            children: [
-                OverviewRow({ startWorkspace: 1, workspaces: 5 }),
-                OverviewRow({ startWorkspace: 6, workspaces: 5 }),
-            ]
-        }),
-    });
-    const entryPromptRevealer = Widget.Revealer({
-        transition: 'crossfade',
-        transitionDuration: 150,
-        revealChild: true,
-        hpack: 'center',
-        child: Widget.Label({
-            className: 'overview-search-prompt txt-small txt',
-            label: searchPromptTexts[Math.floor(Math.random() * searchPromptTexts.length)],
-        })
-    });
-
-    const entryIconRevealer = Widget.Revealer({
-        transition: 'crossfade',
-        transitionDuration: 150,
-        revealChild: false,
-        hpack: 'end',
-        child: Widget.Label({
-            className: 'txt txt-large icon-material overview-search-icon',
-            label: 'search',
-        }),
-    });
-
-    const entryIcon = Widget.Box({
-        className: 'overview-search-prompt-box',
-        setup: box => box.pack_start(entryIconRevealer, true, true, 0),
-    });
-
-    const entry = Widget.Entry({
-        className: 'overview-search-box txt-small txt',
-        hpack: 'center',
-        onAccept: (self) => { // This is when you hit Enter
-            const text = self.text;
-            if (text.length == 0) return;
-            const isAction = text.startsWith('>');
-            const isDir = (entry.text[0] == '/' || entry.text[0] == '~');
-
-            if (startsWithNumber(text)) { // Eval on typing is dangerous, this is a workaround
-                try {
-                    const fullResult = eval(text);
-                    // copy
-                    execAsync(['wl-copy', `${fullResult}`]).catch(print);
-                    App.closeWindow('overview');
-                    return;
-                } catch (e) {
-                    // console.log(e);
-                }
-            }
-            if (isDir) {
-                App.closeWindow('overview');
-                execAsync(['bash', '-c', `xdg-open "${expandTilde(text)}"`, `&`]).catch(print);
-                return;
-            }
-            if (_appSearchResults.length > 0) {
-                App.closeWindow('overview');
-                _appSearchResults[0].launch();
-                return;
-            }
-            else if (text[0] == '>') { // Custom commands
-                App.closeWindow('overview');
-                launchCustomCommand(text);
-                return;
-            }
-            // Fallback: Execute command
-            if (!isAction && exec(`bash -c "command -v ${text.split(' ')[0]}"`) != '') {
-                if (text.startsWith('sudo'))
-                    execAndClose(text, true);
-                else
-                    execAndClose(text, false);
-            }
-
-            else {
-                App.closeWindow('overview');
-                execAsync(['bash', '-c', `xdg-open 'https://www.google.com/search?q=${text} -site:quora.com' &`]).catch(print); // fuck quora
-            }
-        },
-        // Actually onChange but this is ta workaround for a bug
-        connections: [
-            ['notify::text', (entry) => { // This is when you type
-                const isAction = entry.text[0] == '>';
-                const isDir = (entry.text[0] == '/' || entry.text[0] == '~');
-                const children = resultsBox.get_children();
-                for (let i = 0; i < children.length; i++) {
-                    const child = children[i];
-                    child.destroy();
-                }
-                // check empty if so then dont do stuff
-                if (entry.text == '') {
-                    resultsRevealer.set_reveal_child(false);
-                    overviewRevealer.set_reveal_child(true);
-                    entryPromptRevealer.set_reveal_child(true);
-                    entryIconRevealer.set_reveal_child(false);
-                    entry.toggleClassName('overview-search-box-extended', false);
-                }
-                else {
-                    const text = entry.text;
-                    resultsRevealer.set_reveal_child(true);
-                    overviewRevealer.set_reveal_child(false);
-                    entryPromptRevealer.set_reveal_child(false);
-                    entryIconRevealer.set_reveal_child(true);
-                    entry.toggleClassName('overview-search-box-extended', true);
-                    _appSearchResults = Applications.query(text);
-
-                    // Calculate
-                    if (startsWithNumber(text)) { // Eval on typing is dangerous, this is a small workaround.
-                        try {
-                            const fullResult = eval(text);
-                            resultsBox.add(CalculationResultButton({ result: fullResult, text: text }));
-                        } catch (e) {
-                            // console.log(e);
-                        }
-                    }
-                    if (isDir) {
-                        var contents = [];
-                        contents = ls({ path: text, silent: true });
-                        contents.forEach((item) => {
-                            resultsBox.add(DirectoryButton(item));
-                        })
-                    }
-                    if (isAction) { // Eval on typing is dangerous, this is a workaround.
-                        resultsBox.add(CustomCommandButton({ text: entry.text }));
-                    }
-                    // Add application entries
-                    let appsToAdd = MAX_RESULTS;
-                    _appSearchResults.forEach(app => {
-                        if (appsToAdd == 0) return;
-                        resultsBox.add(DesktopEntryButton(app));
-                        appsToAdd--;
-                    });
-
-                    // Fallbacks
-                    // if the first word is an actual command
-                    if (!isAction && !hasUnterminatedBackslash(text) && exec(`bash -c "command -v ${text.split(' ')[0]}"`) != '') {
-                        resultsBox.add(ExecuteCommandButton({ command: entry.text, terminal: entry.text.startsWith('sudo') }));
-                    }
-
-                    // Add fallback: search
-                    resultsBox.add(SearchButton({ text: entry.text }));
-                    resultsBox.show_all();
-                }
-            }]
-        ],
-    });
-
-    return Widget.Box({
-        vertical: true,
-        children: [
-            ClickToClose({ // Top margin. Also works as a click-outside-to-close thing
-                child: Widget.Box({
-                    className: 'bar-height',
-                })
-            }),
-            Widget.Box({
-                hpack: 'center',
-                children: [
-                    entry,
-                    Widget.Box({
-                        className: 'overview-search-icon-box',
-                        setup: box => box.pack_start(entryPromptRevealer, true, true, 0),
-                    }),
-                    entryIcon,
-                ]
-            }),
-            overviewRevealer,
-            resultsRevealer,
-        ],
-        connections: [
-            [App, (_b, name, visible) => {
-                if (name == 'overview' && !visible) {
-                    entryPromptRevealer.child.label = searchPromptTexts[Math.floor(Math.random() * searchPromptTexts.length)];
-                    resultsBox.children = [];
-                    entry.set_text('');
-                }
-            }],
-            ['key-press-event', (widget, event) => { // Typing
-                if (event.get_keyval()[1] >= 32 && event.get_keyval()[1] <= 126 && widget != entry) {
-                    Utils.timeout(1, () => entry.grab_focus());
-                    entry.set_text(entry.text + String.fromCharCode(event.get_keyval()[1]));
-                    entry.set_position(-1);
-                }
-            }],
-        ],
-    });
-}; 

.config/ags/widgets/overview/overview_hyprland.js

@@ -0,0 +1,308 @@
+const { Gdk, Gtk } = imports.gi;
+import { SCREEN_HEIGHT, SCREEN_WIDTH } from '../../imports.js';
+import App from 'resource:///com/github/Aylur/ags/app.js';
+import Widget from 'resource:///com/github/Aylur/ags/widget.js';
+import * as Utils from 'resource:///com/github/Aylur/ags/utils.js';
+
+import Hyprland from 'resource:///com/github/Aylur/ags/service/hyprland.js';
+const { execAsync, exec } = Utils;
+import { setupCursorHoverGrab } from "../../lib/cursorhover.js";
+import { dumpToWorkspace, swapWorkspace } from "./actions.js";
+
+const OVERVIEW_SCALE = 0.18; // = overview workspace box / screen size
+const OVERVIEW_WS_NUM_SCALE = 0.09;
+const OVERVIEW_WS_NUM_MARGIN_SCALE = 0.07;
+const TARGET = [Gtk.TargetEntry.new('text/plain', Gtk.TargetFlags.SAME_APP, 0)];
+
+function truncateTitle(str) {
+    let lastDash = -1;
+    let found = -1; // 0: em dash, 1: en dash, 2: minus, 3: vertical bar, 4: middle dot
+    for (let i = str.length - 1; i >= 0; i--) {
+        if (str[i] === '—') {
+            found = 0;
+            lastDash = i;
+        }
+        else if (str[i] === '–' && found < 1) {
+            found = 1;
+            lastDash = i;
+        }
+        else if (str[i] === '-' && found < 2) {
+            found = 2;
+            lastDash = i;
+        }
+        else if (str[i] === '|' && found < 3) {
+            found = 3;
+            lastDash = i;
+        }
+        else if (str[i] === '·' && found < 4) {
+            found = 4;
+            lastDash = i;
+        }
+    }
+    if (lastDash === -1) return str;
+    return str.substring(0, lastDash);
+}
+
+function iconExists(iconName) {
+    let iconTheme = Gtk.IconTheme.get_default();
+    return iconTheme.has_icon(iconName);
+}
+
+function substitute(str) {
+    const subs = [
+        { from: 'code-url-handler', to: 'visual-studio-code' },
+        { from: 'Code', to: 'visual-studio-code' },
+        { from: 'GitHub Desktop', to: 'github-desktop' },
+        { from: 'wpsoffice', to: 'wps-office2019-kprometheus' },
+        { from: 'gnome-tweaks', to: 'org.gnome.tweaks' },
+        { from: 'Minecraft* 1.20.1', to: 'minecraft' },
+        { from: '', to: 'image-missing' },
+    ];
+
+    for (const { from, to } of subs) {
+        if (from === str)
+            return to;
+    }
+
+    if (!iconExists(str)) str = str.toLowerCase().replace(/\s+/g, '-'); // Turn into kebab-case
+    return str;
+}
+
+const ContextMenuWorkspaceArray = ({ label, actionFunc, thisWorkspace }) => Widget.MenuItem({
+    label: `${label}`,
+    setup: (menuItem) => {
+        let submenu = new Gtk.Menu();
+        submenu.className = 'menu';
+        for (let i = 1; i <= 10; i++) {
+            let button = new Gtk.MenuItem({
+                label: `Workspace ${i}`
+            });
+            button.connect("activate", () => {
+                // execAsync([`${onClickBinary}`, `${thisWorkspace}`, `${i}`]).catch(print);
+                actionFunc(thisWorkspace, i);
+            });
+            submenu.append(button);
+        }
+        menuItem.set_reserve_indicator(true);
+        menuItem.set_submenu(submenu);
+    }
+})
+
+const client = ({ address, size: [w, h], workspace: { id, name }, class: c, title, xwayland }) => {
+    const revealInfoCondition = (Math.min(w, h) * OVERVIEW_SCALE > 70);
+    if (w <= 0 || h <= 0) return null;
+    // title = truncateTitle(title);
+    return Widget.Button({
+        className: 'overview-tasks-window',
+        hpack: 'center',
+        vpack: 'center',
+        onClicked: () => {
+            Hyprland.sendMessage(`dispatch focuswindow address:${address}`);
+            App.closeWindow('overview');
+        },
+        onMiddleClickRelease: () => Hyprland.sendMessage(`dispatch closewindow address:${address}`),
+        onSecondaryClick: (button) => {
+            button.toggleClassName('overview-tasks-window-selected', true);
+            const menu = Widget.Menu({
+                className: 'menu',
+                children: [
+                    Widget.MenuItem({
+                        child: Widget.Label({
+                            xalign: 0,
+                            label: "Close (Middle-click)",
+                        }),
+                        onActivate: () => Hyprland.sendMessage(`dispatch closewindow address:${address}`),
+                    }),
+                    ContextMenuWorkspaceArray({
+                        label: "Dump windows to workspace",
+                        actionFunc: dumpToWorkspace,
+                        thisWorkspace: Number(id)
+                    }),
+                    ContextMenuWorkspaceArray({
+                        label: "Swap windows with workspace",
+                        actionFunc: swapWorkspace,
+                        thisWorkspace: Number(id)
+                    }),
+                ],
+            });
+            menu.connect("deactivate", () => {
+                button.toggleClassName('overview-tasks-window-selected', false);
+            })
+            menu.connect("selection-done", () => {
+                button.toggleClassName('overview-tasks-window-selected', false);
+            })
+            menu.popup_at_pointer(null); // Show the menu at the pointer's position
+        },
+        child: Widget.Box({
+            css: `
+                min-width: ${Math.max(w * OVERVIEW_SCALE - 4, 1)}px;
+                min-height: ${Math.max(h * OVERVIEW_SCALE - 4, 1)}px;
+            `,
+            homogeneous: true,
+            child: Widget.Box({
+                vertical: true,
+                vpack: 'center',
+                className: 'spacing-v-5',
+                children: [
+                    Widget.Icon({
+                        icon: substitute(c),
+                        size: Math.min(w, h) * OVERVIEW_SCALE / 2.5,
+                    }),
+                    // TODO: Add xwayland tag instead of just having italics
+                    Widget.Revealer({
+                        transition: 'slide_down',
+                        revealChild: revealInfoCondition,
+                        child: Widget.Label({
+                            truncate: 'end',
+                            className: `${xwayland ? 'txt txt-italic' : 'txt'}`,
+                            css: `
+                                font-size: ${Math.min(SCREEN_WIDTH, SCREEN_HEIGHT) * OVERVIEW_SCALE / 14.6}px;
+                                margin: 0px ${Math.min(SCREEN_WIDTH, SCREEN_HEIGHT) * OVERVIEW_SCALE / 10}px;
+                            `,
+                            // If the title is too short, include the class
+                            label: (title.length <= 1 ? `${c}: ${title}` : title),
+                        })
+                    })
+                ]
+            })
+        }),
+        tooltipText: `${c}: ${title}`,
+        setup: (button) => {
+            setupCursorHoverGrab(button);
+
+            button.drag_source_set(Gdk.ModifierType.BUTTON1_MASK, TARGET, Gdk.DragAction.MOVE);
+            button.drag_source_set_icon_name(substitute(c));
+            // button.drag_source_set_icon_gicon(icon);
+
+            button.connect('drag-begin', (button) => {  // On drag start, add the dragging class
+                button.toggleClassName('overview-tasks-window-dragging', true);
+            });
+            button.connect('drag-data-get', (_w, _c, data) => { // On drag finish, give address
+                data.set_text(address, address.length);
+                button.toggleClassName('overview-tasks-window-dragging', false);
+            });
+        },
+    });
+}
+
+const workspace = index => {
+    const fixed = Gtk.Fixed.new();
+    const WorkspaceNumber = (index) => Widget.Label({
+        className: 'overview-tasks-workspace-number',
+        label: `${index}`,
+        css: `
+            margin: ${Math.min(SCREEN_WIDTH, SCREEN_HEIGHT) * OVERVIEW_SCALE * OVERVIEW_WS_NUM_MARGIN_SCALE}px;
+            font-size: ${SCREEN_HEIGHT * OVERVIEW_SCALE * OVERVIEW_WS_NUM_SCALE}px;
+        `,
+    })
+    const widget = Widget.Box({
+        className: 'overview-tasks-workspace',
+        vpack: 'center',
+        css: `
+        min-width: ${SCREEN_WIDTH * OVERVIEW_SCALE}px;
+        min-height: ${SCREEN_HEIGHT * OVERVIEW_SCALE}px;
+        `,
+        children: [Widget.EventBox({
+            hexpand: true,
+            vexpand: true,
+            onPrimaryClick: () => {
+                Hyprland.sendMessage(`dispatch workspace ${index}`)
+                App.closeWindow('overview');
+            },
+            setup: (eventbox) => {
+                eventbox.drag_dest_set(Gtk.DestDefaults.ALL, TARGET, Gdk.DragAction.COPY);
+                eventbox.connect('drag-data-received', (_w, _c, _x, _y, data) => {
+                    Hyprland.sendMessage(`dispatch movetoworkspacesilent ${index},address:${data.get_text()}`)
+                });
+            },
+            child: fixed,
+        })],
+    });
+    widget.update = (clients) => {
+        clients = clients.filter(({ workspace: { id } }) => id === index);
+
+        // this is for my monitor layout
+        // shifts clients back by SCREEN_WIDTHpx if necessary
+        clients = clients.map(client => {
+            const [x, y] = client.at;
+            if (x > SCREEN_WIDTH)
+                client.at = [x - SCREEN_WIDTH, y];
+            return client;
+        });
+
+        const children = fixed.get_children();
+        for (let i = 0; i < children.length; i++) {
+            const child = children[i];
+            child.destroy();
+        }
+        fixed.put(WorkspaceNumber(index), 0, 0);
+
+        for (let i = 0; i < clients.length; i++) {
+            const c = clients[i];
+            if (c.mapped) {
+                fixed.put(client(c), c.at[0] * OVERVIEW_SCALE, c.at[1] * OVERVIEW_SCALE);
+            }
+        }
+
+
+
+        fixed.show_all();
+    };
+    return widget;
+};
+
+const arr = (s, n) => {
+    const array = [];
+    for (let i = 0; i < n; i++)
+        array.push(s + i);
+
+    return array;
+};
+
+const OverviewRow = ({ startWorkspace, workspaces, windowName = 'overview' }) => Widget.Box({
+    children: arr(startWorkspace, workspaces).map(workspace),
+    attribute: {
+        'update': box => {
+            if (!App.getWindow(windowName).visible) return;
+            execAsync('hyprctl -j clients').then(clients => {
+                const json = JSON.parse(clients);
+                const children = box.get_children();
+                for (let i = 0; i < children.length; i++) {
+                    const ch = children[i];
+                    ch.update(json)
+                }
+
+            }).catch(print);
+        }
+    },
+    setup: (box) => {
+        box
+            // .hook(Hyprland, (box, name, data) => { // idk, does this make it lag occasionally?
+            //     if (["changefloatingmode", "movewindow"].includes(name))
+            //         box.attribute.update(box);
+            // }, 'event')
+            .hook(Hyprland, (box) => box.attribute.update(box), 'client-added')
+            .hook(Hyprland, (box) => box.attribute.update(box), 'client-removed')
+            .hook(App, (box, name, visible) => { // Update on open
+                if (name == 'overview' && visible) box.attribute.update(box);
+            })
+    },
+});
+
+
+export default () => {
+    const overviewRevealer = Widget.Revealer({
+        revealChild: true,
+        transition: 'slide_down',
+        transitionDuration: 200,
+        child: Widget.Box({
+            vertical: true,
+            className: 'overview-tasks',
+            children: [
+                OverviewRow({ startWorkspace: 1, workspaces: 5 }),
+                OverviewRow({ startWorkspace: 6, workspaces: 5 }),
+            ]
+        }),
+    });
+    return overviewRevealer;
+}; 

.config/ags/widgets/overview/searchbuttons.js

@@ -1,5 +1,7 @@
-const { Gdk, Gtk } = imports.gi;
-import { App, Service, Utils, Widget } from '../../imports.js';
+const { Gtk } = imports.gi;
+import App from 'resource:///com/github/Aylur/ags/app.js';
+import Widget from 'resource:///com/github/Aylur/ags/widget.js';
+import * as Utils from 'resource:///com/github/Aylur/ags/utils.js';
 const { execAsync, exec } = Utils;
 import { searchItem } from './searchitem.js';
 import { execAndClose, startsWithNumber, launchCustomCommand } from './miscfunctions.js';
@@ -54,16 +56,16 @@ export const DirectoryButton = ({ parentPath, name, type, icon }) => {
                 })
             ]
         }),
-        connections: [
-            ['focus-in-event', (button) => {
+        setup: (self) => self
+            .on('focus-in-event', (button) => {
                 actionText.revealChild = true;
                 actionTextRevealer.revealChild = true;
-            }],
-            ['focus-out-event', (button) => {
+            })
+            .on('focus-out-event', (button) => {
                 actionText.revealChild = false;
                 actionTextRevealer.revealChild = false;
-            }],
-        ]
+            })
+        ,
     })
 }
 
@@ -128,16 +130,16 @@ export const DesktopEntryButton = (app) => {
                 })
             ]
         }),
-        connections: [
-            ['focus-in-event', (button) => {
+        setup: (self) => self
+            .on('focus-in-event', (button) => {
                 actionText.revealChild = true;
                 actionTextRevealer.revealChild = true;
-            }],
-            ['focus-out-event', (button) => {
+            })
+            .on('focus-out-event', (button) => {
                 actionText.revealChild = false;
                 actionTextRevealer.revealChild = false;
-            }],
-        ]
+            })
+        ,
     })
 }
 
@@ -167,6 +169,6 @@ export const SearchButton = ({ text = '' }) => searchItem({
     content: `${text}`,
     onActivate: () => {
         App.closeWindow('overview');
-        execAsync(['bash', '-c', `xdg-open 'https://www.google.com/search?q=${text} -site:quora.com' &`]).catch(print); // fuck quora
+        execAsync(['bash', '-c', `xdg-open 'https://www.google.com/search?q=${text} -site:quora.com' &`]).catch(print); // quora is useless
     },
 });

.config/ags/widgets/overview/searchitem.js

@@ -1,8 +1,4 @@
-const { Gdk, Gtk } = imports.gi;
-import { App, Service, Utils, Widget } from '../../imports.js';
-const { execAsync, exec } = Utils;
-import { setupCursorHover, setupCursorHoverAim } from "../../lib/cursorhover.js";
-import { MaterialIcon } from '../../lib/materialicon.js';
+import Widget from 'resource:///com/github/Aylur/ags/widget.js';
 
 export const searchItem = ({ materialIconName, name, actionName, content, onActivate }) => {
     const actionText = Widget.Revealer({
@@ -55,15 +51,15 @@ export const searchItem = ({ materialIconName, name, actionName, content, onActi
                 })
             ]
         }),
-        connections: [
-            ['focus-in-event', (button) => {
+        setup: (self) => self
+            .on('focus-in-event', (button) => {
                 actionText.revealChild = true;
                 actionTextRevealer.revealChild = true;
-            }],
-            ['focus-out-event', (button) => {
+            })
+            .on('focus-out-event', (button) => {
                 actionText.revealChild = false;
                 actionTextRevealer.revealChild = false;
-            }],
-        ]
+            })
+        ,
     });
 }

.config/ags/widgets/overview/windowcontent.js

@@ -0,0 +1,244 @@
+const { Gtk } = imports.gi;
+import App from 'resource:///com/github/Aylur/ags/app.js';
+import Widget from 'resource:///com/github/Aylur/ags/widget.js';
+import * as Utils from 'resource:///com/github/Aylur/ags/utils.js';
+
+import Applications from 'resource:///com/github/Aylur/ags/service/applications.js';
+const { execAsync, exec } = Utils;
+import { execAndClose, expandTilde, hasUnterminatedBackslash, startsWithNumber, launchCustomCommand, ls } from './miscfunctions.js';
+import {
+    CalculationResultButton, CustomCommandButton, DirectoryButton,
+    DesktopEntryButton, ExecuteCommandButton, SearchButton
+} from './searchbuttons.js';
+
+// Add math funcs
+const { abs, sin, cos, tan, cot, asin, acos, atan, acot } = Math;
+const pi = Math.PI;
+// trigonometric funcs for deg
+const sind = x => sin(x * pi / 180);
+const cosd = x => cos(x * pi / 180);
+const tand = x => tan(x * pi / 180);
+const cotd = x => cot(x * pi / 180);
+const asind = x => asin(x) * 180 / pi;
+const acosd = x => acos(x) * 180 / pi;
+const atand = x => atan(x) * 180 / pi;
+const acotd = x => acot(x) * 180 / pi;
+
+const MAX_RESULTS = 10;
+const OVERVIEW_SCALE = 0.18; // = overview workspace box / screen size
+const OVERVIEW_WS_NUM_SCALE = 0.09;
+const OVERVIEW_WS_NUM_MARGIN_SCALE = 0.07;
+const TARGET = [Gtk.TargetEntry.new('text/plain', Gtk.TargetFlags.SAME_APP, 0)];
+
+function iconExists(iconName) {
+    let iconTheme = Gtk.IconTheme.get_default();
+    return iconTheme.has_icon(iconName);
+}
+
+const OptionalOverview = async () => {
+    try {
+        return (await import('./overview_hyprland.js')).default();
+    } catch {
+        return null;
+        // return (await import('./overview_hyprland.js')).default();
+    }
+};
+
+const overviewContent = await OptionalOverview();
+
+export const SearchAndWindows = () => {
+    var _appSearchResults = [];
+
+    const ClickToClose = ({ ...props }) => Widget.EventBox({
+        ...props,
+        onPrimaryClick: () => App.closeWindow('overview'),
+        onSecondaryClick: () => App.closeWindow('overview'),
+        onMiddleClick: () => App.closeWindow('overview'),
+    });
+    const resultsBox = Widget.Box({
+        className: 'overview-search-results',
+        vertical: true,
+        vexpand: true,
+    });
+    const resultsRevealer = Widget.Revealer({
+        transitionDuration: 200,
+        revealChild: false,
+        transition: 'slide_down',
+        // duration: 200,
+        hpack: 'center',
+        child: resultsBox,
+    });
+    const entryPromptRevealer = Widget.Revealer({
+        transition: 'crossfade',
+        transitionDuration: 150,
+        revealChild: true,
+        hpack: 'center',
+        child: Widget.Label({
+            className: 'overview-search-prompt txt-small txt',
+            label: 'Type to search'
+        })
+    });
+
+    const entryIconRevealer = Widget.Revealer({
+        transition: 'crossfade',
+        transitionDuration: 150,
+        revealChild: false,
+        hpack: 'end',
+        child: Widget.Label({
+            className: 'txt txt-large icon-material overview-search-icon',
+            label: 'search',
+        }),
+    });
+
+    const entryIcon = Widget.Box({
+        className: 'overview-search-prompt-box',
+        setup: box => box.pack_start(entryIconRevealer, true, true, 0),
+    });
+
+    const entry = Widget.Entry({
+        className: 'overview-search-box txt-small txt',
+        hpack: 'center',
+        onAccept: (self) => { // This is when you hit Enter
+            const text = self.text;
+            if (text.length == 0) return;
+            const isAction = text.startsWith('>');
+            const isDir = (['/', '~'].includes(entry.text[0]));
+
+            if (startsWithNumber(text)) { // Eval on typing is dangerous, this is a workaround
+                try {
+                    const fullResult = eval(text);
+                    // copy
+                    execAsync(['wl-copy', `${fullResult}`]).catch(print);
+                    App.closeWindow('overview');
+                    return;
+                } catch (e) {
+                    // console.log(e);
+                }
+            }
+            if (isDir) {
+                App.closeWindow('overview');
+                execAsync(['bash', '-c', `xdg-open "${expandTilde(text)}"`, `&`]).catch(print);
+                return;
+            }
+            if (_appSearchResults.length > 0) {
+                App.closeWindow('overview');
+                _appSearchResults[0].launch();
+                return;
+            }
+            else if (text[0] == '>') { // Custom commands
+                App.closeWindow('overview');
+                launchCustomCommand(text);
+                return;
+            }
+            // Fallback: Execute command
+            if (!isAction && exec(`bash -c "command -v ${text.split(' ')[0]}"`) != '') {
+                if (text.startsWith('sudo'))
+                    execAndClose(text, true);
+                else
+                    execAndClose(text, false);
+            }
+
+            else {
+                App.closeWindow('overview');
+                execAsync(['bash', '-c', `xdg-open 'https://www.google.com/search?q=${text} -site:quora.com' &`]).catch(print); // quora is useless
+            }
+        },
+        onChange: (entry) => { // this is when you type
+            const isAction = entry.text[0] == '>';
+            const isDir = (['/', '~'].includes(entry.text[0]));
+            resultsBox.get_children().forEach(ch => ch.destroy());
+
+            // check empty if so then dont do stuff
+            if (entry.text == '') {
+                resultsRevealer.revealChild = false;
+                overviewContent.revealChild = true;
+                entryPromptRevealer.revealChild = true;
+                entryIconRevealer.revealChild = false;
+                entry.toggleClassName('overview-search-box-extended', false);
+                return;
+            }
+            const text = entry.text;
+            resultsRevealer.revealChild = true;
+            overviewContent.revealChild = false;
+            entryPromptRevealer.revealChild = false;
+            entryIconRevealer.revealChild = true;
+            entry.toggleClassName('overview-search-box-extended', true);
+            _appSearchResults = Applications.query(text);
+
+            // Calculate
+            if (startsWithNumber(text)) { // Eval on typing is dangerous, this is a small workaround.
+                try {
+                    const fullResult = eval(text);
+                    resultsBox.add(CalculationResultButton({ result: fullResult, text: text }));
+                } catch (e) {
+                    // console.log(e);
+                }
+            }
+            if (isDir) {
+                var contents = [];
+                contents = ls({ path: text, silent: true });
+                contents.forEach((item) => {
+                    resultsBox.add(DirectoryButton(item));
+                })
+            }
+            if (isAction) { // Eval on typing is dangerous, this is a workaround.
+                resultsBox.add(CustomCommandButton({ text: entry.text }));
+            }
+            // Add application entries
+            let appsToAdd = MAX_RESULTS;
+            _appSearchResults.forEach(app => {
+                if (appsToAdd == 0) return;
+                resultsBox.add(DesktopEntryButton(app));
+                appsToAdd--;
+            });
+
+            // Fallbacks
+            // if the first word is an actual command
+            if (!isAction && !hasUnterminatedBackslash(text) && exec(`bash -c "command -v ${text.split(' ')[0]}"`) != '') {
+                resultsBox.add(ExecuteCommandButton({ command: entry.text, terminal: entry.text.startsWith('sudo') }));
+            }
+
+            // Add fallback: search
+            resultsBox.add(SearchButton({ text: entry.text }));
+            resultsBox.show_all();
+        },
+    });
+    return Widget.Box({
+        vertical: true,
+        children: [
+            ClickToClose({ // Top margin. Also works as a click-outside-to-close thing
+                child: Widget.Box({
+                    className: 'bar-height',
+                })
+            }),
+            Widget.Box({
+                hpack: 'center',
+                children: [
+                    entry,
+                    Widget.Box({
+                        className: 'overview-search-icon-box',
+                        setup: box => box.pack_start(entryPromptRevealer, true, true, 0),
+                    }),
+                    entryIcon,
+                ]
+            }),
+            overviewContent,
+            resultsRevealer,
+        ],
+        setup: (self) => self
+            .hook(App, (_b, name, visible) => {
+                if (name == 'overview' && !visible) {
+                    resultsBox.children = [];
+                    entry.set_text('');
+                }
+            })
+            .on('key-press-event', (widget, event) => { // Typing
+                if (event.get_keyval()[1] >= 32 && event.get_keyval()[1] <= 126 && widget != entry) {
+                    Utils.timeout(1, () => entry.grab_focus());
+                    entry.set_text(entry.text + String.fromCharCode(event.get_keyval()[1]));
+                    entry.set_position(-1);
+                }
+            })
+        ,
+    });
+}; 

.config/ags/widgets/screencorners/main.js

@@ -1,6 +1,10 @@
-import { Widget } from '../../imports.js';
+import Cairo from 'gi://cairo?version=1.0';
+import Widget from 'resource:///com/github/Aylur/ags/widget.js';
 import { RoundedCorner } from "../../lib/roundedcorner.js";
 
+const dummyRegion = new Cairo.Region();
+const enableClickthrough = (self) => self.input_shape_combine_region(dummyRegion);
+
 export const CornerTopleft = () => Widget.Window({
     name: 'cornertl',
     layer: 'top',
@@ -8,6 +12,7 @@ export const CornerTopleft = () => Widget.Window({
     exclusivity: 'normal',
     visible: true,
     child: RoundedCorner('topleft', { className: 'corner', }),
+    setup: enableClickthrough,
 });
 export const CornerTopright = () => Widget.Window({
     name: 'cornertr',
@@ -16,6 +21,7 @@ export const CornerTopright = () => Widget.Window({
     exclusivity: 'normal',
     visible: true,
     child: RoundedCorner('topright', { className: 'corner', }),
+    setup: enableClickthrough,
 });
 export const CornerBottomleft = () => Widget.Window({
     name: 'cornerbl',
@@ -24,6 +30,7 @@ export const CornerBottomleft = () => Widget.Window({
     exclusivity: 'ignore',
     visible: true,
     child: RoundedCorner('bottomleft', { className: 'corner-black', }),
+    setup: enableClickthrough,
 });
 export const CornerBottomright = () => Widget.Window({
     name: 'cornerbr',
@@ -32,5 +39,5 @@ export const CornerBottomright = () => Widget.Window({
     exclusivity: 'ignore',
     visible: true,
     child: RoundedCorner('bottomright', { className: 'corner-black', }),
+    setup: enableClickthrough,
 });
-

.config/ags/widgets/session/main.js

@@ -1,5 +1,4 @@
-const { Gdk, Gtk } = imports.gi;
-import { Widget } from '../../imports.js';
+import Widget from 'resource:///com/github/Aylur/ags/widget.js';
 import SessionScreen from "./sessionscreen.js";
 
 export default () => Widget.Window({ // On-screen keyboard

.config/ags/widgets/session/sessionscreen.js

@@ -1,7 +1,11 @@
 // This is for the cool memory indicator on the sidebar
 // For the right pill of the bar, see system.js
 const { Gdk, Gtk } = imports.gi;
-import { App, Service, Utils, Widget, SCREEN_HEIGHT, SCREEN_WIDTH } from '../../imports.js';
+import { SCREEN_HEIGHT, SCREEN_WIDTH } from '../../imports.js';
+import App from 'resource:///com/github/Aylur/ags/app.js';
+import Widget from 'resource:///com/github/Aylur/ags/widget.js';
+import * as Utils from 'resource:///com/github/Aylur/ags/utils.js';
+
 const { exec, execAsync } = Utils;
 
 const SessionButton = (name, icon, command, props = {}) => {
@@ -41,23 +45,24 @@ const SessionButton = (name, icon, command, props = {}) => {
             button.get_window().set_cursor(cursor);
             buttonDescription.revealChild = false;
         },
-        connections: [
-            ['focus-in-event', (self) => {
+        setup: (self) => self
+            .on('focus-in-event', (self) => {
                 buttonDescription.revealChild = true;
                 self.toggleClassName('session-button-focused', true);
-            }],
-            ['focus-out-event', (self) => {
+            })
+            .on('focus-out-event', (self) => {
                 buttonDescription.revealChild = false;
                 self.toggleClassName('session-button-focused', false);
-            }],
-        ],
+            })
+        ,
         ...props,
     });
 }
 
 export default () => {
     // lock, logout, sleep
-    const lockButton = SessionButton('Lock', 'lock', () => { App.closeWindow('session'); execAsync('gtklock') });
+    // const lockButton = SessionButton('Lock', 'lock', () => { App.closeWindow('session'); execAsync('gtklock') });
+    const lockButton = SessionButton('Lock', 'lock', () => { App.closeWindow('session'); execAsync('swaylock') });
     const logoutButton = SessionButton('Logout', 'logout', () => { App.closeWindow('session'); execAsync(['bash', '-c', 'loginctl terminate-user $USER']) });
     const sleepButton = SessionButton('Sleep', 'sleep', () => { App.closeWindow('session'); execAsync('systemctl suspend') });
     // hibernate, shutdown, reboot
@@ -133,10 +138,10 @@ export default () => {
                 ]
             })
         ],
-        connections: [
-            [App, (_b, name, visible) => {
+        setup: (self) => self
+            .hook(App, (_b, name, visible) => {
                 if (visible) lockButton.grab_focus(); // Lock is the default option
-            }],
-        ],
+            })
+        ,
     });
 }

.config/ags/widgets/sideleft/apis/chatgpt.js

@@ -1,5 +1,8 @@
-const { Gdk, GLib, Gtk, Pango } = imports.gi;
-import { App, Utils, Widget } from '../../../imports.js';
+const { Gtk } = imports.gi;
+import App from 'resource:///com/github/Aylur/ags/app.js';
+import Widget from 'resource:///com/github/Aylur/ags/widget.js';
+import * as Utils from 'resource:///com/github/Aylur/ags/utils.js';
+
 const { Box, Button, Entry, EventBox, Icon, Label, Revealer, Scrollable, Stack } = Widget;
 const { execAsync, exec } = Utils;
 import ChatGPT from '../../../services/chatgpt.js';
@@ -8,7 +11,7 @@ import { setupCursorHover, setupCursorHoverInfo } from "../../../lib/cursorhover
 import { SystemMessage, ChatMessage } from "./chatgpt_chatmessage.js";
 import { ConfigToggle, ConfigSegmentedSelection, ConfigGap } from '../../../lib/configwidgets.js';
 import { markdownTest } from '../../../lib/md2pango.js';
-import { MarginRevealer } from '../../../lib/advancedrevealers.js';
+import { MarginRevealer } from '../../../lib/advancedwidgets.js';
 
 export const chatGPTTabIcon = Box({
     hpack: 'center',
@@ -64,14 +67,14 @@ const chatGPTInfo = Box({
 export const chatGPTSettings = MarginRevealer({
     transition: 'slide_down',
     revealChild: true,
-    connections: [
-        [ChatGPT, (self) => Utils.timeout(200, () => {
-            self._hide(self);
-        }), 'newMsg'],
-        [ChatGPT, (self) => Utils.timeout(200, () => {
-            self._show(self);
-        }), 'clear'],
-    ],
+    extraSetup: (self) => self
+        .hook(ChatGPT, (self) => Utils.timeout(200, () => {
+            self.attribute.hide();
+        }), 'newMsg')
+        .hook(ChatGPT, (self) => Utils.timeout(200, () => {
+            self.attribute.show();
+        }), 'clear')
+    ,
     child: Box({
         vertical: true,
         className: 'sidebar-chat-settings',
@@ -126,9 +129,11 @@ export const openaiApiKeyInstructions = Box({
     children: [Revealer({
         transition: 'slide_down',
         transitionDuration: 150,
-        connections: [[ChatGPT, (self, hasKey) => {
-            self.revealChild = (ChatGPT.key.length == 0);
-        }, 'hasKey']],
+        setup: (self) => self
+            .hook(ChatGPT, (self, hasKey) => {
+                self.revealChild = (ChatGPT.key.length == 0);
+            }, 'hasKey')
+        ,
         child: Button({
             child: Label({
                 useMarkup: true,
@@ -163,13 +168,13 @@ export const chatGPTWelcome = Box({
 export const chatContent = Box({
     className: 'spacing-v-15',
     vertical: true,
-    connections: [
-        [ChatGPT, (box, id) => {
+    setup: (self) => self
+        .hook(ChatGPT, (box, id) => {
             const message = ChatGPT.messages[id];
             if (!message) return;
             box.add(ChatMessage(message, chatGPTView))
-        }, 'newMsg'],
-    ]
+        }, 'newMsg')
+    ,
 });
 
 const clearChat = () => {
@@ -197,46 +202,36 @@ export const chatGPTView = Scrollable({
         const vScrollbar = scrolledWindow.get_vscrollbar();
         vScrollbar.get_style_context().add_class('sidebar-scrollbar');
         // Avoid click-to-scroll-widget-to-view behavior
-        Utils.timeout(1, () => { 
+        Utils.timeout(1, () => {
             const viewport = scrolledWindow.child;
             viewport.set_focus_vadjustment(new Gtk.Adjustment(undefined));
         })
+        // Always scroll to bottom with new content
+        const adjustment = scrolledWindow.get_vadjustment();
+        adjustment.connect("changed", () => {
+            adjustment.set_value(adjustment.get_upper() - adjustment.get_page_size());
+        })
     }
 });
 
+const CommandButton = (command) => Button({
+    className: 'sidebar-chat-chip sidebar-chat-chip-action txt txt-small',
+    onClicked: () => sendMessage(command),
+    setup: setupCursorHover,
+    label: command,
+});
+
 export const chatGPTCommands = Box({
     className: 'spacing-h-5',
     children: [
         Box({ hexpand: true }),
-        Button({
-            className: 'sidebar-chat-chip sidebar-chat-chip-action txt txt-small',
-            onClicked: () => chatContent.add(SystemMessage(
-                `Key stored in:\n\`${ChatGPT.keyPath}\`\nTo update this key, type \`/key YOUR_API_KEY\``,
-                '/key',
-                chatGPTView)),
-            setup: setupCursorHover,
-            label: '/key',
-        }),
-        Button({
-            className: 'sidebar-chat-chip sidebar-chat-chip-action txt txt-small',
-            onClicked: () => chatContent.add(SystemMessage(
-                `Currently using \`${ChatGPT.modelName}\``,
-                '/model',
-                chatGPTView
-            )),
-            setup: setupCursorHover,
-            label: '/model',
-        }),
-        Button({
-            className: 'sidebar-chat-chip sidebar-chat-chip-action txt txt-small',
-            onClicked: () => clearChat(),
-            setup: setupCursorHover,
-            label: '/clear',
-        }),
+        CommandButton('/key'),
+        CommandButton('/model'),
+        CommandButton('/clear'),
     ]
 });
 
-export const chatGPTSendMessage = (text) => {
+export const sendMessage = (text) => {
     // Check if text or API key is empty
     if (text.length == 0) return;
     if (ChatGPT.key.length == 0) {

.config/ags/widgets/sideleft/apis/chatgpt_chatmessage.js

@@ -1,16 +1,17 @@
-const { Gdk, Gio, GLib, Gtk, Pango } = imports.gi;
-import { App, Utils, Widget } from '../../../imports.js';
-const { Box, Button, Entry, EventBox, Icon, Label, Revealer, Scrollable, Stack } = Widget;
+const { Gdk, Gio, GLib, Gtk } = imports.gi;
+import App from 'resource:///com/github/Aylur/ags/app.js';
+import Widget from 'resource:///com/github/Aylur/ags/widget.js';
+import * as Utils from 'resource:///com/github/Aylur/ags/utils.js';
+const { Box, Button, Label, Scrollable } = Widget;
 const { execAsync, exec } = Utils;
 import { MaterialIcon } from "../../../lib/materialicon.js";
-import { convert } from "../../../lib/md2pango.js";
+import md2pango from "../../../lib/md2pango.js";
 import GtkSource from "gi://GtkSource?version=3.0";
 
 const CUSTOM_SOURCEVIEW_SCHEME_PATH = `${App.configDir}/data/sourceviewtheme.xml`;
 const CUSTOM_SCHEME_ID = 'custom';
 const USERNAME = GLib.get_user_name();
 const CHATGPT_CURSOR = '  (o) ';
-const MESSAGE_SCROLL_DELAY = 13; // In milliseconds, the time before an updated message scrolls to bottom
 
 /////////////////////// Custom source view colorscheme /////////////////////////
 
@@ -102,8 +103,8 @@ const CodeBlock = (content = '', lang = 'txt') => {
                     ]
                 }),
                 onClicked: (self) => {
-                    const copyContent = sourceView.get_buffer().get_text(0, 0, 0); // TODO: fix this
-                    console.log(copyContent);
+                    const buffer = sourceView.get_buffer();
+                    const copyContent = buffer.get_text(buffer.get_start_iter(), buffer.get_end_iter(), false); // TODO: fix this
                     execAsync([`wl-copy`, `${copyContent}`]).catch(print);
                 },
             }),
@@ -113,11 +114,11 @@ const CodeBlock = (content = '', lang = 'txt') => {
     const sourceView = HighlightedCode(content, lang);
 
     const codeBlock = Box({
-        properties: [
-            ['updateText', (text) => {
+        attribute: {
+            'updateText': (text) => {
                 sourceView.get_buffer().set_text(text, -1);
-            }]
-        ],
+            }
+        },
         className: 'sidebar-chat-codeblock',
         vertical: true,
         children: [
@@ -125,7 +126,11 @@ const CodeBlock = (content = '', lang = 'txt') => {
             Box({
                 className: 'sidebar-chat-codeblock-code',
                 homogeneous: true,
-                children: [sourceView,],
+                children: [Scrollable({
+                    vscroll: 'never',
+                    hscroll: 'automatic',
+                    child: sourceView,
+                })],
             })
         ]
     })
@@ -146,8 +151,8 @@ const Divider = () => Box({
 const MessageContent = (content) => {
     const contentBox = Box({
         vertical: true,
-        properties: [
-            ['fullUpdate', (self, content, useCursor = false) => {
+        attribute: {
+            'fullUpdate': (self, content, useCursor = false) => {
                 // Clear and add first text widget
                 const children = contentBox.get_children();
                 for (let i = 0; i < children.length; i++) {
@@ -164,16 +169,15 @@ const MessageContent = (content) => {
                     // Code blocks
                     const codeBlockRegex = /^\s*```([a-zA-Z0-9]+)?\n?/;
                     if (codeBlockRegex.test(line)) {
-                        // console.log(`code at line ${index}`);
                         const kids = self.get_children();
                         const lastLabel = kids[kids.length - 1];
                         const blockContent = lines.slice(lastProcessed, index).join('\n');
                         if (!inCode) {
-                            lastLabel.label = convert(blockContent);
+                            lastLabel.label = md2pango(blockContent);
                             contentBox.add(CodeBlock('', codeBlockRegex.exec(line)[1]));
                         }
                         else {
-                            lastLabel._updateText(blockContent);
+                            lastLabel.attribute.updateText(blockContent);
                             contentBox.add(TextBlock());
                         }
 
@@ -186,7 +190,7 @@ const MessageContent = (content) => {
                         const kids = self.get_children();
                         const lastLabel = kids[kids.length - 1];
                         const blockContent = lines.slice(lastProcessed, index).join('\n');
-                        lastLabel.label = convert(blockContent);
+                        lastLabel.label = md2pango(blockContent);
                         contentBox.add(Divider());
                         contentBox.add(TextBlock());
                         lastProcessed = index + 1;
@@ -197,9 +201,9 @@ const MessageContent = (content) => {
                     const lastLabel = kids[kids.length - 1];
                     let blockContent = lines.slice(lastProcessed, lines.length).join('\n');
                     if (!inCode)
-                        lastLabel.label = `${convert(blockContent)}${useCursor ? CHATGPT_CURSOR : ''}`;
+                        lastLabel.label = `${md2pango(blockContent)}${useCursor ? CHATGPT_CURSOR : ''}`;
                     else
-                        lastLabel._updateText(blockContent);
+                        lastLabel.attribute.updateText(blockContent);
                 }
                 // Debug: plain text
                 // contentBox.add(Label({
@@ -209,13 +213,13 @@ const MessageContent = (content) => {
                 //     xalign: 0,
                 //     wrap: true,
                 //     selectable: true,
-                //     label: '------------------------------\n' + convert(content),
+                //     label: '------------------------------\n' + md2pango(content),
                 // }))
                 contentBox.show_all();
-            }]
-        ]
+            }
+        }
     });
-    contentBox._fullUpdate(contentBox, content, false);
+    contentBox.attribute.fullUpdate(contentBox, content, false);
     return contentBox;
 }
 
@@ -241,22 +245,17 @@ export const ChatMessage = (message, scrolledWindow) => {
                     }),
                     messageContentBox,
                 ],
-                connections: [
-                    [message, (self, isThinking) => {
+                setup: (self) => self
+                    .hook(message, (self, isThinking) => {
                         messageContentBox.toggleClassName('thinking', message.thinking);
-                    }, 'notify::thinking'],
-                    [message, (self) => { // Message update
-                        messageContentBox._fullUpdate(messageContentBox, message.content, message.role != 'user');
-                        Utils.timeout(MESSAGE_SCROLL_DELAY, () => {
-                            if (!scrolledWindow) return;
-                            var adjustment = scrolledWindow.get_vadjustment();
-                            adjustment.set_value(adjustment.get_upper() - adjustment.get_page_size());
-                        });
-                    }, 'notify::content'],
-                    [message, (label, isDone) => { // Remove the cursor
-                        messageContentBox._fullUpdate(messageContentBox, message.content, false);
-                    }, 'notify::done'],
-                ]
+                    }, 'notify::thinking')
+                    .hook(message, (self) => { // Message update
+                        messageContentBox.attribute.fullUpdate(messageContentBox, message.content, message.role != 'user');
+                    }, 'notify::content')
+                    .hook(message, (label, isDone) => { // Remove the cursor
+                        messageContentBox.attribute.fullUpdate(messageContentBox, message.content, false);
+                    }, 'notify::done')
+                ,
             })
         ]
     });
@@ -286,11 +285,6 @@ export const SystemMessage = (content, commandName, scrolledWindow) => {
                 ],
             })
         ],
-        setup: (self) => Utils.timeout(MESSAGE_SCROLL_DELAY, () => {
-            if (!scrolledWindow) return;
-            var adjustment = scrolledWindow.get_vadjustment();
-            adjustment.set_value(adjustment.get_upper() - adjustment.get_page_size());
-        })
     });
     return thisMessage;
 }

.config/ags/widgets/sideleft/apis/waifu.js

@@ -1,11 +1,41 @@
-const { Gdk, GLib, Gtk, Pango } = imports.gi;
-import { App, Utils, Widget } from '../../../imports.js';
-const { Box, Button, Entry, EventBox, Icon, Label, Revealer, Scrollable, Stack } = Widget;
+const { Gdk, GdkPixbuf, Gio, GLib, Gtk } = imports.gi;
+import Widget from 'resource:///com/github/Aylur/ags/widget.js';
+import * as Utils from 'resource:///com/github/Aylur/ags/utils.js';
+const { Box, Button, Label, Overlay, Revealer, Scrollable, Stack } = Widget;
 const { execAsync, exec } = Utils;
 import { MaterialIcon } from "../../../lib/materialicon.js";
-import { setupCursorHover, setupCursorHoverInfo } from "../../../lib/cursorhover.js";
+import { MarginRevealer } from '../../../lib/advancedwidgets.js';
+import { setupCursorHover } from "../../../lib/cursorhover.js";
 import WaifuService from '../../../services/waifus.js';
 
+async function getImageViewerApp(preferredApp) {
+    Utils.execAsync(['bash', '-c', `command -v ${preferredApp}`])
+        .then((output) => {
+            if (output != '') return preferredApp;
+            else return 'xdg-open';
+        });
+}
+
+const IMAGE_REVEAL_DELAY = 13; // Some wait for inits n other weird stuff
+const IMAGE_VIEWER_APP = getImageViewerApp('loupe'); // Gnome's image viewer cuz very comfortable zooming
+const USER_CACHE_DIR = GLib.get_user_cache_dir();
+
+// Create cache folder and clear pics from previous session
+Utils.exec(`bash -c 'mkdir -p ${USER_CACHE_DIR}/ags/media/waifus'`);
+Utils.exec(`bash -c 'rm ${USER_CACHE_DIR}/ags/media/waifus/*'`);
+
+export function fileExists(filePath) {
+    let file = Gio.File.new_for_path(filePath);
+    return file.query_exists(null);
+}
+
+const CommandButton = (command) => Button({
+    className: 'sidebar-chat-chip sidebar-chat-chip-action txt txt-small',
+    onClicked: () => sendMessage(command),
+    setup: setupCursorHover,
+    label: command,
+});
+
 export const waifuTabIcon = Box({
     hpack: 'center',
     className: 'sidebar-chat-apiswitcher-icon',
@@ -15,18 +45,204 @@ export const waifuTabIcon = Box({
     ]
 });
 
+const WaifuImage = (taglist) => {
+    const ImageState = (icon, name) => Box({
+        className: 'spacing-h-5 txt',
+        children: [
+            Box({ hexpand: true }),
+            Label({
+                className: 'sidebar-waifu-txt txt-smallie',
+                xalign: 0,
+                label: name,
+            }),
+            MaterialIcon(icon, 'norm'),
+        ]
+    })
+    const ImageAction = ({ name, icon, action }) => Button({
+        className: 'sidebar-waifu-image-action txt-norm icon-material',
+        tooltipText: name,
+        label: icon,
+        onClicked: action,
+        setup: setupCursorHover,
+    })
+    const colorIndicator = Box({
+        className: `sidebar-chat-indicator`,
+    });
+    const downloadState = Stack({
+        homogeneous: false,
+        transition: 'slide_up_down',
+        transitionDuration: 150,
+        items: [
+            ['api', ImageState('api', 'Calling API')],
+            ['download', ImageState('downloading', 'Downloading image')],
+            ['done', ImageState('done', 'Finished!')],
+            ['error', ImageState('error', 'Error')],
+        ]
+    });
+    const downloadIndicator = MarginRevealer({
+        vpack: 'center',
+        transition: 'slide_left',
+        revealChild: true,
+        child: downloadState,
+    });
+    const blockHeading = Box({
+        hpack: 'fill',
+        className: 'sidebar-waifu-content spacing-h-5',
+        children: [
+            ...taglist.map((tag) => CommandButton(tag)),
+            Box({ hexpand: true }),
+            downloadIndicator,
+        ]
+    });
+    const blockImageActions = Revealer({
+        transition: 'crossfade',
+        revealChild: false,
+        child: Box({
+            vertical: true,
+            children: [
+                Box({
+                    className: 'sidebar-waifu-image-actions spacing-h-3',
+                    children: [
+                        Box({ hexpand: true }),
+                        ImageAction({
+                            name: 'Go to source',
+                            icon: 'link',
+                            action: () => execAsync(['xdg-open', `${thisBlock.attribute.imageData.source}`]).catch(print),
+                        }),
+                        ImageAction({
+                            name: 'Hoard',
+                            icon: 'save',
+                            action: () => execAsync(['bash', '-c', `mkdir -p ~/Pictures/homework${thisBlock.attribute.isNsfw ? '/🌶️' : ''} && cp ${thisBlock.attribute.imagePath} ~/Pictures/homework${thisBlock.attribute.isNsfw ? '/🌶️/' : ''}`]).catch(print),
+                        }),
+                        ImageAction({
+                            name: 'Open externally',
+                            icon: 'open_in_new',
+                            action: () => execAsync([IMAGE_VIEWER_APP, `${thisBlock.attribute.imagePath}`]).catch(print),
+                        }),
+                    ]
+                })
+            ],
+        })
+    })
+    const blockImage = Widget.DrawingArea({
+        className: 'sidebar-waifu-image',
+    });
+    const blockImageRevealer = Revealer({
+        transition: 'slide_down',
+        transitionDuration: 150,
+        revealChild: false,
+        child: Overlay({
+            child: Box({
+                homogeneous: true,
+                className: 'sidebar-waifu-image',
+                children: [blockImage],
+            }),
+            overlays: [blockImageActions],
+        }),
+    });
+    const thisBlock = Box({
+        className: 'sidebar-chat-message',
+        attribute: {
+            'imagePath': '',
+            'isNsfw': false,
+            'imageData': '',
+            'update': (imageData, force = false) => {
+                thisBlock.attribute.imageData = imageData;
+                const { status, signature, url, extension, source, dominant_color, is_nsfw, width, height, tags } = thisBlock.attribute.imageData;
+                thisBlock.attribute.isNsfw = is_nsfw;
+                if (status != 200) {
+                    downloadState.shown = 'error';
+                    return;
+                }
+                thisBlock.attribute.imagePath = `${USER_CACHE_DIR}/ags/media/waifus/${signature}${extension}`;
+                downloadState.shown = 'download';
+                // Width/height
+                const widgetWidth = Math.min(Math.floor(waifuContent.get_allocated_width() * 0.85), width);
+                const widgetHeight = Math.ceil(widgetWidth * height / width);
+                blockImage.set_size_request(widgetWidth, widgetHeight);
+                const showImage = () => {
+                    downloadState.shown = 'done';
+                    const pixbuf = GdkPixbuf.Pixbuf.new_from_file_at_scale(thisBlock.attribute.imagePath, widgetWidth, widgetHeight, false);
+
+                    blockImage.set_size_request(widgetWidth, widgetHeight);
+                    blockImage.connect("draw", (widget, cr) => {
+                        const borderRadius = widget.get_style_context().get_property('border-radius', Gtk.StateFlags.NORMAL);
+
+                        // Draw a rounded rectangle
+                        cr.arc(borderRadius, borderRadius, borderRadius, Math.PI, 1.5 * Math.PI);
+                        cr.arc(widgetWidth - borderRadius, borderRadius, borderRadius, 1.5 * Math.PI, 2 * Math.PI);
+                        cr.arc(widgetWidth - borderRadius, widgetHeight - borderRadius, borderRadius, 0, 0.5 * Math.PI);
+                        cr.arc(borderRadius, widgetHeight - borderRadius, borderRadius, 0.5 * Math.PI, Math.PI);
+                        cr.closePath();
+                        cr.clip();
+
+                        // Paint image as bg
+                        Gdk.cairo_set_source_pixbuf(cr, pixbuf, 0, 0);
+                        cr.paint();
+                    });
+
+                    // Reveal stuff
+                    Utils.timeout(IMAGE_REVEAL_DELAY, () => {
+                        blockImageRevealer.revealChild = true;
+                    })
+                    Utils.timeout(IMAGE_REVEAL_DELAY + blockImageRevealer.transitionDuration,
+                        () => blockImageActions.revealChild = true
+                    );
+                    downloadIndicator.attribute.hide();
+                }
+                // Show
+                if (!force && fileExists(thisBlock.attribute.imagePath)) showImage();
+                else Utils.execAsync(['bash', '-c', `wget -O '${thisBlock.attribute.imagePath}' '${url}'`])
+                    .then(showImage)
+                    .catch(print);
+                blockHeading.get_children().forEach((child) => {
+                    child.setCss(`border-color: ${dominant_color};`);
+                })
+                colorIndicator.css = `background-color: ${dominant_color};`;
+            },
+        },
+        children: [
+            colorIndicator,
+            Box({
+                vertical: true,
+                className: 'spacing-v-5',
+                children: [
+                    blockHeading,
+                    Box({
+                        vertical: true,
+                        hpack: 'start',
+                        children: [blockImageRevealer],
+                    })
+                ]
+            })
+        ],
+    });
+    return thisBlock;
+}
+
 const waifuContent = Box({
     className: 'spacing-v-15',
     vertical: true,
-    connections: [
-        [WaifuService, (box, id) => {
-            const message = WaifuService.responses[id];
-            if (!message) return;
-            box.add(Label({
-                label: message,
-            }))
-        }, 'newResponse'],
-    ]
+    vexpand: true,
+    attribute: {
+        'map': new Map(),
+    },
+    setup: (self) => self
+        .hook(WaifuService, (box, id) => {
+            if (id === undefined) return;
+            const newImageBlock = WaifuImage(WaifuService.queries[id]);
+            box.add(newImageBlock);
+            box.show_all();
+            box.attribute.map.set(id, newImageBlock);
+        }, 'newResponse')
+        .hook(WaifuService, (box, id) => {
+            if (id === undefined) return;
+            const data = WaifuService.responses[id];
+            if (!data) return;
+            const imageBlock = box.attribute.map.get(id);
+            imageBlock.attribute.update(data);
+        }, 'updateResponse')
+    ,
 });
 
 export const waifuView = Scrollable({
@@ -48,25 +264,91 @@ export const waifuView = Scrollable({
             const viewport = scrolledWindow.child;
             viewport.set_focus_vadjustment(new Gtk.Adjustment(undefined));
         })
+        // Always scroll to bottom with new content
+        const adjustment = scrolledWindow.get_vadjustment();
+        adjustment.connect("changed", () => {
+            adjustment.set_value(adjustment.get_upper() - adjustment.get_page_size());
+        })
     }
 });
 
+const waifuTags = Revealer({
+    revealChild: false,
+    transition: 'crossfade',
+    transitionDuration: 150,
+    child: Box({
+        className: 'spacing-h-5',
+        children: [
+            Scrollable({
+                vscroll: 'never',
+                hscroll: 'automatic',
+                hexpand: true,
+                child: Box({
+                    className: 'spacing-h-5',
+                    children: [
+                        CommandButton('waifu'),
+                        CommandButton('maid'),
+                        CommandButton('uniform'),
+                        CommandButton('oppai'),
+                        CommandButton('selfies'),
+                        CommandButton('marin-kitagawa'),
+                        CommandButton('raiden-shogun'),
+                        CommandButton('mori-calliope'),
+                    ]
+                })
+            }),
+            Box({ className: 'separator-line' }),
+        ]
+    })
+});
+
 export const waifuCommands = Box({
     className: 'spacing-h-5',
-    children: [
-        Box({ hexpand: true }),
-        Button({
-            className: 'sidebar-chat-chip sidebar-chat-chip-action txt txt-small',
-            onClicked: () => {
-                // command do something
-            },
+    setup: (self) => {
+        self.pack_end(CommandButton('/clear'), false, false, 0);
+        self.pack_start(Button({
+            className: 'sidebar-chat-chip-toggle',
             setup: setupCursorHover,
-            label: '/call',
-        }),
-    ]
+            label: 'Tags →',
+            onClicked: () => {
+                waifuTags.revealChild = !waifuTags.revealChild;
+            }
+        }), false, false, 0);
+        self.pack_start(waifuTags, true, true, 0);
+    }
 });
 
-export const waifuCallAPI = (text) => {
+const clearChat = () => {
+    waifuContent.attribute.map.clear();
+    const kids = waifuContent.get_children();
+    for (let i = 0; i < kids.length; i++) {
+        const child = kids[i];
+        if (child) child.destroy();
+    }
+}
+
+export const sendMessage = (text) => {
     // Do something on send
-    WaifuService.fetch(text);
+    // Commands
+    if (text.startsWith('/')) {
+        if (text.startsWith('/clear')) clearChat();
+        else if (text.startsWith('/test')) {
+            const newImage = WaifuImage(['/test']);
+            waifuContent.add(newImage);
+            Utils.timeout(IMAGE_REVEAL_DELAY, () => newImage.attribute.update({ // Needs timeout or inits won't make it
+                // This is an image uploaded to my github repo
+                status: 200,
+                url: 'https://picsum.photos/400/600',
+                extension: '',
+                signature: 0,
+                source: 'https://picsum.photos/400/600',
+                dominant_color: '#9392A6',
+                is_nsfw: false,
+                width: 300,
+                height: 200,
+                tags: ['/test'],
+            }, true));
+        }
+    }
+    else WaifuService.fetch(text);
 }

.config/ags/widgets/sideleft/apiwidgets.js

@@ -1,12 +1,13 @@
-const { Gtk, Gdk } = imports.gi;
-import { App, Utils, Widget } from '../../imports.js';
+import App from 'resource:///com/github/Aylur/ags/app.js';
+import Widget from 'resource:///com/github/Aylur/ags/widget.js';
+import * as Utils from 'resource:///com/github/Aylur/ags/utils.js';
 const { Box, Button, Entry, EventBox, Icon, Label, Revealer, Scrollable, Stack } = Widget;
 const { execAsync, exec } = Utils;
 import { setupCursorHover, setupCursorHoverInfo } from "../../lib/cursorhover.js";
 // APIs
 import ChatGPT from '../../services/chatgpt.js';
-import { chatGPTView, chatGPTCommands, chatGPTSendMessage, chatGPTTabIcon } from './apis/chatgpt.js';
-import { waifuView, waifuCommands, waifuCallAPI, waifuTabIcon } from './apis/waifu.js';
+import { chatGPTView, chatGPTCommands, sendMessage as chatGPTSendMessage, chatGPTTabIcon } from './apis/chatgpt.js';
+import { waifuView, waifuCommands, sendMessage as waifuSendMessage, waifuTabIcon } from './apis/waifu.js';
 
 const APIS = [
     {
@@ -19,7 +20,7 @@ const APIS = [
     },
     {
         name: 'Waifus',
-        sendCommand: waifuCallAPI,
+        sendCommand: waifuSendMessage,
         contentWidget: waifuView,
         commandBar: waifuCommands,
         tabIcon: waifuTabIcon,
@@ -32,12 +33,12 @@ APIS[currentApiId].tabIcon.toggleClassName('sidebar-chat-apiswitcher-icon-enable
 export const chatEntry = Entry({
     className: 'sidebar-chat-entry',
     hexpand: true,
-    connections: [
-        [ChatGPT, (self) => {
+    setup: (self) => self
+        .hook(ChatGPT, (self) => {
             if (APIS[currentApiId].name != 'ChatGPT') return;
             self.placeholderText = (ChatGPT.key.length > 0 ? 'Ask a question...' : 'Enter OpenAI API Key...');
-        }, 'hasKey']
-    ],
+        }, 'hasKey')
+    ,
     onChange: (entry) => {
         chatSendButton.toggleClassName('sidebar-chat-send-available', entry.text.length > 0);
     },
@@ -83,7 +84,7 @@ function switchToTab(id) {
     apiContentStack.shown = APIS[id].name;
     apiCommandStack.shown = APIS[id].name;
     chatEntry.placeholderText = APIS[id].placeholderText,
-    currentApiId = id;
+        currentApiId = id;
 }
 const apiSwitcher = Box({
     homogeneous: true,
@@ -104,10 +105,10 @@ const apiSwitcher = Box({
 })
 
 export default Widget.Box({
-    properties: [
-        ['nextTab', () => switchToTab(Math.min(currentApiId + 1, APIS.length - 1))],
-        ['prevTab', () => switchToTab(Math.max(0, currentApiId-1))],
-    ],
+    attribute: {
+        'nextTab': () => switchToTab(Math.min(currentApiId + 1, APIS.length - 1)),
+        'prevTab': () => switchToTab(Math.max(0, currentApiId - 1)),
+    },
     vertical: true,
     className: 'spacing-v-10',
     homogeneous: false,

.config/ags/widgets/sideleft/module.js

@@ -1,7 +1,5 @@
-const { Gdk, Gtk } = imports.gi;
-import { Utils, Widget } from '../../imports.js';
-const { execAsync, exec } = Utils;
-const { Box, Button, EventBox, Label, Scrollable } = Widget;
+import Widget from 'resource:///com/github/Aylur/ags/widget.js';
+const { Box, Button, Label } = Widget;
 
 export const SidebarModule = ({
     name,

.config/ags/widgets/sideleft/quickscripts.js

@@ -1,5 +1,5 @@
-const { Gdk, Gtk } = imports.gi;
-import { Utils, Widget } from '../../imports.js';
+import Widget from 'resource:///com/github/Aylur/ags/widget.js';
+import * as Utils from 'resource:///com/github/Aylur/ags/utils.js';
 const { execAsync, exec } = Utils;
 const { Box, Button, EventBox, Label, Scrollable } = Widget;
 import { SidebarModule } from './module.js';

.config/ags/widgets/sideleft/sideleft.js

@@ -1,5 +1,7 @@
-const { Gdk, Gtk } = imports.gi;
-import { Utils, Widget } from '../../imports.js';
+const { Gdk } = imports.gi;
+import App from 'resource:///com/github/Aylur/ags/app.js';
+import Widget from 'resource:///com/github/Aylur/ags/widget.js';
+import * as Utils from 'resource:///com/github/Aylur/ags/utils.js';
 const { Box, Button, EventBox, Label, Revealer, Scrollable, Stack } = Widget;
 const { execAsync, exec } = Utils;
 import { MaterialIcon } from "../../lib/materialicon.js";
@@ -93,20 +95,20 @@ const navBar = Box({
 });
 
 const pinButton = Button({
-    properties: [
-        ['enabled', false],
-        ['toggle', (self) => {
-            self._enabled = !self._enabled;
-            self.toggleClassName('sidebar-pin-enabled', self._enabled);
+    attribute: {
+        'enabled': false,
+        'toggle': (self) => {
+            self.attribute.enabled = !self.attribute.enabled;
+            self.toggleClassName('sidebar-pin-enabled', self.attribute.enabled);
 
             const sideleftWindow = App.getWindow('sideleft');
             const barWindow = App.getWindow('bar');
             const cornerTopLeftWindow = App.getWindow('cornertl');
             const sideleftContent = sideleftWindow.get_children()[0].get_children()[0].get_children()[1];
 
-            sideleftContent.toggleClassName('sidebar-pinned', self._enabled);
+            sideleftContent.toggleClassName('sidebar-pinned', self.attribute.enabled);
 
-            if (self._enabled) {
+            if (self.attribute.enabled) {
                 sideleftWindow.layer = 'bottom';
                 barWindow.layer = 'bottom';
                 cornerTopLeftWindow.layer = 'bottom';
@@ -118,19 +120,20 @@ const pinButton = Button({
                 cornerTopLeftWindow.layer = 'top';
                 sideleftWindow.exclusivity = 'normal';
             }
-        }],
-    ],
+        },
+    },
     vpack: 'start',
     className: 'sidebar-pin',
     child: MaterialIcon('push_pin', 'larger'),
     tooltipText: 'Pin sidebar',
-    onClicked: (self) => self._toggle(self),
+    onClicked: (self) => self.attribute.toggle(self),
     // QoL: Focus Pin button on open. Hit keybind -> space/enter = toggle pin state
-    connections: [[App, (self, currentName, visible) => {
-        if (currentName === 'sideleft' && visible) {
-            self.grab_focus();
-        }
-    }]]
+    setup: (self) => self
+        .hook(App, (self, currentName, visible) => {
+            if (currentName === 'sideleft' && visible)
+                self.grab_focus();
+        })
+    ,
 })
 
 export default () => Box({
@@ -158,26 +161,27 @@ export default () => Box({
                 }),
                 contentStack,
             ],
-            connections: [[App, (self, currentName, visible) => {
-                if (currentName === 'sideleft') {
-                    self.toggleClassName('sidebar-pinned', pinButton._enabled && visible);
-                }
-            }]]
+            setup: (self) => self
+                .hook(App, (self, currentName, visible) => {
+                    if (currentName === 'sideleft')
+                        self.toggleClassName('sidebar-pinned', pinButton.attribute.enabled && visible);
+                })
+            ,
         }),
     ],
-    connections: [
-        ['key-press-event', (widget, event) => { // Handle keybinds
+    setup: (self) => self
+        .on('key-press-event', (widget, event) => { // Handle keybinds
             if (event.get_state()[1] & Gdk.ModifierType.CONTROL_MASK) {
                 // Pin sidebar
                 if (event.get_keyval()[1] == Gdk.KEY_p)
-                    pinButton._toggle(pinButton);
+                    pinButton.attribute.toggle(pinButton);
                 // Switch sidebar tab
                 else if (event.get_keyval()[1] === Gdk.KEY_Tab)
                     switchToTab((currentTabId + 1) % contents.length);
                 else if (event.get_keyval()[1] === Gdk.KEY_Page_Up)
-                    switchToTab(Math.max(currentTabId - 1), 0);
+                    switchToTab(Math.max(currentTabId - 1, 0));
                 else if (event.get_keyval()[1] === Gdk.KEY_Page_Down)
-                    switchToTab(Math.min(currentTabId + 1), contents.length);
+                    switchToTab(Math.min(currentTabId + 1, contents.length - 1));
             }
             if (contentStack.shown == 'apis') { // If api tab is focused
                 // Automatically focus entry when typing
@@ -186,8 +190,8 @@ export default () => Box({
                     event.get_keyval()[1] >= 32 && event.get_keyval()[1] <= 126 &&
                     widget != chatEntry && event.get_keyval()[1] != Gdk.KEY_space)
                     ||
-                    ((event.get_state()[1] & Gdk.ModifierType.CONTROL_MASK) && 
-                    event.get_keyval()[1] === Gdk.KEY_v)
+                    ((event.get_state()[1] & Gdk.ModifierType.CONTROL_MASK) &&
+                        event.get_keyval()[1] === Gdk.KEY_v)
                 ) {
                     chatEntry.grab_focus();
                     chatEntry.set_text(chatEntry.text + String.fromCharCode(event.get_keyval()[1]));
@@ -197,15 +201,15 @@ export default () => Box({
                 else if (!(event.get_state()[1] & Gdk.ModifierType.CONTROL_MASK) &&
                     event.get_keyval()[1] === Gdk.KEY_Page_Down) {
                     const toSwitchTab = contentStack.get_visible_child();
-                    toSwitchTab._nextTab();
+                    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();
-                    toSwitchTab._prevTab();
+                    toSwitchTab.attribute.prevTab();
                 }
             }
 
-        }],
-    ],
+        })
+    ,
 });

.config/ags/widgets/sideleft/toolbox.js

@@ -1,5 +1,5 @@
-const { Gdk, Gtk } = imports.gi;
-import { Utils, Widget } from '../../imports.js';
+import Widget from 'resource:///com/github/Aylur/ags/widget.js';
+import * as Utils from 'resource:///com/github/Aylur/ags/utils.js';
 const { Box, Button, EventBox, Label, Revealer, Scrollable, Stack } = Widget;
 const { execAsync, exec } = Utils;
 import { QuickScripts } from './quickscripts.js';

.config/ags/widgets/sideright/calendar.js

@@ -1,6 +1,7 @@
-const { Gio, Gdk, GLib, Gtk } = imports.gi;
-import { App, Widget, Utils } from '../../imports.js';
-const { Box, Button, CenterBox, Label, Revealer } = Widget;
+const { Gio } = imports.gi;
+import Widget from 'resource:///com/github/Aylur/ags/widget.js';
+import * as Utils from 'resource:///com/github/Aylur/ags/utils.js';
+const { Box, Button, Label } = Widget;
 import { MaterialIcon } from "../../lib/materialicon.js";
 import { getCalendarLayout } from "../../lib/calendarlayout.js";
 import { setupCursorHover } from "../../lib/cursorhover.js";

.config/ags/widgets/sideright/notificationlist.js

@@ -1,113 +1,137 @@
-// This file is for the notification widget on the sidebar
+// This file is for the notification list on the sidebar
 // For the popup notifications, see onscreendisplay.js
 // The actual widget for each single notification is in lib/notification.js
-
-const { GLib, Gtk } = imports.gi;
-import { Service, Utils, Widget } from '../../imports.js';
+import Widget from 'resource:///com/github/Aylur/ags/widget.js';
 import Notifications from 'resource:///com/github/Aylur/ags/service/notifications.js';
-const { lookUpIcon, timeout } = Utils;
-const { Box, Icon, Scrollable, Label, Button, Revealer } = Widget;
+const { Box, Button, Label, Scrollable, Stack } = Widget;
 import { MaterialIcon } from "../../lib/materialicon.js";
 import { setupCursorHover } from "../../lib/cursorhover.js";
 import Notification from "../../lib/notification.js";
 
-const NotificationList = Box({
-    vertical: true,
-    vpack: 'start',
-    className: 'spacing-v-5-revealer',
-    connections: [
-        [Notifications, (box, id) => {
-            if (box.children.length == 0) {
-                Notifications.notifications
-                    .forEach(n => {
-                        box.pack_end(Notification({
-                            notifObject: n,
-                            isPopup: false,
-                        }), false, false, 0)
-                    });
-                box.show_all();
-            }
-            else if (id) {
+export default (props) => {
+    const notifEmptyContent = Box({
+        homogeneous: true,
+        children: [Box({
+            vertical: true,
+            vpack: 'center',
+            className: 'txt spacing-v-10',
+            children: [
+                Box({
+                    vertical: true,
+                    className: 'spacing-v-5',
+                    children: [
+                        MaterialIcon('notifications_active', 'badonkers'),
+                        Label({ label: 'No notifications', className: 'txt-small' }),
+                    ]
+                }),
+            ]
+        })]
+    });
+    const notificationList = Box({
+        vertical: true,
+        vpack: 'start',
+        className: 'spacing-v-5-revealer',
+        setup: (self) => self
+            .hook(Notifications, (box, id) => {
+                if (box.get_children().length == 0) { // On init there's no notif, or 1st notif
+                    Notifications.notifications
+                        .forEach(n => {
+                            box.pack_end(Notification({
+                                notifObject: n,
+                                isPopup: false,
+                            }), false, false, 0)
+                        });
+                    box.show_all();
+                    return;
+                }
+                // 2nd or later notif
                 const notif = Notifications.getNotification(id);
-
                 const NewNotif = Notification({
                     notifObject: notif,
                     isPopup: false,
                 });
-
                 if (NewNotif) {
                     box.pack_end(NewNotif, false, false, 0);
                     box.show_all();
                 }
-            }
-        }, 'notified'],
-
-        [Notifications, (box, id) => {
-            if (!id) return;
-            for (const ch of box.children) {
-                if (ch._id === id) {
-                    ch._destroyWithAnims();
+            }, 'notified')
+            .hook(Notifications, (box, id) => {
+                if (!id) return;
+                for (const ch of box.children) {
+                    if (ch._id === id) {
+                        ch.attribute.destroyWithAnims();
+                    }
                 }
-            }
-        }, 'closed'],
-
-        [Notifications, box => box.visible = Notifications.notifications.length > 0],
-    ],
-});
-
-export default (props) => {
-    const listTitle = Revealer({
-        revealChild: false,
-        connections: [[Notifications, (revealer) => {
-            revealer.revealChild = (Notifications.notifications.length > 0);
-        }]],
+            }, 'closed')
+        ,
+    });
+    const ListActionButton = (icon, name, action) => Button({
+        className: 'notif-listaction-btn',
+        onClicked: action,
         child: Box({
-            vpack: 'start',
-            className: 'sidebar-group-invisible txt',
+            className: 'spacing-h-5',
             children: [
+                MaterialIcon(icon, 'norm'),
                 Label({
-                    hexpand: true,
-                    xalign: 0,
-                    className: 'txt-title-small',
-                    label: 'Notifications',
-                }),
-                Button({
-                    className: 'notif-closeall-btn',
-                    onClicked: () => {
-                        Notifications.clear();
-                    },
-                    child: Box({
-                        className: 'spacing-h-5',
-                        children: [
-                            MaterialIcon('clear_all', 'norm'),
-                            Label({
-                                className: 'txt-small',
-                                label: 'Clear',
-                            })
-                        ]
-                    }),
-                    setup: button => {
-                        setupCursorHover(button);
-                    },
+                    className: 'txt-small',
+                    label: name,
                 })
             ]
-        })
+        }),
+        setup: setupCursorHover,
     });
-    const listContents = Scrollable({
+    const silenceButton = ListActionButton('notifications_paused', 'Silence', (self) => {
+        Notifications.dnd = !Notifications.dnd;
+        self.toggleClassName('notif-listaction-btn-enabled', Notifications.dnd);
+    });
+    const clearButton = ListActionButton('clear_all', 'Clear', () => {
+        notificationList.get_children().forEach(ch => ch.destroy());
+        Notifications.clear();
+    });
+    const listTitle = Box({
+        vpack: 'start',
+        className: 'sidebar-group-invisible txt spacing-h-5',
+        children: [
+            Label({
+                hexpand: true,
+                xalign: 0,
+                className: 'txt-title-small margin-left-10',
+                // ^ (extra margin on the left so that it looks similarly spaced
+                // when compared to borderless "Clear" button on the right)
+                label: 'Notifications',
+            }),
+            silenceButton,
+            clearButton,
+        ]
+    });
+    const notifList = Scrollable({
         hexpand: true,
         hscroll: 'never',
         vscroll: 'automatic',
         child: Box({
             vexpand: true,
-            children: [NotificationList],
-        })
+            // homogeneous: true,
+            children: [notificationList],
+        }),
+        setup: (self) => {
+            const vScrollbar = self.get_vscrollbar();
+            vScrollbar.get_style_context().add_class('sidebar-scrollbar');
+        }
+    });
+    const listContents = Stack({
+        transition: 'crossfade',
+        transitionDuration: 150,
+        items: [
+            ['empty', notifEmptyContent],
+            ['list', notifList]
+        ],
+        setup: (self) => self
+            .hook(Notifications, (self) => self.shown = (Notifications.notifications.length > 0 ? 'list' : 'empty'))
+        ,
     });
-    listContents.set_policy(Gtk.PolicyType.NEVER, Gtk.PolicyType.AUTOMATIC);
-    const vScrollbar = listContents.get_vscrollbar();
-    vScrollbar.get_style_context().add_class('sidebar-scrollbar');
     return Box({
         ...props,
-        className: 'sidebar-group-invisible spacing-v-5',
+        className: 'sidebar-group spacing-v-5',
         vertical: true,
         children: [
             listTitle,

.config/ags/widgets/sideright/quicktoggles.js

@@ -1,28 +1,40 @@
-import { Widget, Utils, Service } from '../../imports.js';
+const { GLib } = imports.gi;
+import Widget from 'resource:///com/github/Aylur/ags/widget.js';
+import * as Utils from 'resource:///com/github/Aylur/ags/utils.js';
+
 import Bluetooth from 'resource:///com/github/Aylur/ags/service/bluetooth.js';
 import Network from 'resource:///com/github/Aylur/ags/service/network.js';
+import Hyprland from 'resource:///com/github/Aylur/ags/service/hyprland.js';
 const { execAsync, exec } = Utils;
 import { BluetoothIndicator, NetworkIndicator } from "../../lib/statusicons.js";
 import { setupCursorHover } from "../../lib/cursorhover.js";
 import { MaterialIcon } from '../../lib/materialicon.js';
 
+function expandTilde(path) {
+    if (path.startsWith('~')) {
+        console.log(GLib.get_home_dir() + path.slice(1));
+        return GLib.get_home_dir() + path.slice(1);
+    } else {
+        return path;
+    }
+}
+
 export const ToggleIconWifi = (props = {}) => Widget.Button({
     className: 'txt-small sidebar-iconbutton',
     tooltipText: 'Wifi | Right-click to configure',
-    onClicked: Network.toggleWifi,
+    onClicked: () => Network.toggleWifi(),
     onSecondaryClickRelease: () => {
         execAsync(['bash', '-c', 'XDG_CURRENT_DESKTOP="gnome" gnome-control-center wifi', '&']);
+        App.closeWindow('sideright');
     },
     child: NetworkIndicator(),
-    connections: [
-        [Network, button => {
-            button.toggleClassName('sidebar-button-active', Network.wifi?.internet == 'connected' || Network.wired?.internet == 'connected')
-        }],
-        [Network, button => {
+    setup: (self) => {
+        setupCursorHover(self);
+        self.hook(Network, button => {
+            button.toggleClassName('sidebar-button-active', [Network.wifi?.internet, Network.wired?.internet].includes('connected'))
             button.tooltipText = (`${Network.wifi?.ssid} | Right-click to configure` || 'Unknown');
-        }],
-    ],
-    setup: setupCursorHover,
+        });
+    },
     ...props,
 });
 
@@ -31,21 +43,22 @@ export const ToggleIconBluetooth = (props = {}) => Widget.Button({
     tooltipText: 'Bluetooth | Right-click to configure',
     onClicked: () => {
         const status = Bluetooth?.enabled;
-        if (status) 
+        if (status)
             exec('rfkill block bluetooth');
-        else 
+        else
             exec('rfkill unblock bluetooth');
     },
     onSecondaryClickRelease: () => {
         execAsync(['bash', '-c', 'blueberry &']);
+        App.closeWindow('sideright');
     },
     child: BluetoothIndicator(),
-    connections: [
-        [Bluetooth, button => {
+    setup: (self) => {
+        setupCursorHover(self);
+        self.hook(Bluetooth, button => {
             button.toggleClassName('sidebar-button-active', Bluetooth?.enabled)
-        }],
-    ],
-    setup: setupCursorHover,
+        });
+    },
     ...props,
 });
 
@@ -69,24 +82,24 @@ export const HyprToggleIcon = (icon, name, hyprlandConfigValue, props = {}) => W
 })
 
 export const ModuleNightLight = (props = {}) => Widget.Button({ // TODO: Make this work
-    properties: [
-        ['enabled', false],
-        ['yellowlight', undefined],
-    ],
+    attribute: {
+        enabled: false,
+        yellowlight: undefined,
+    },
     className: 'txt-small sidebar-iconbutton',
     tooltipText: 'Night Light',
     onClicked: (self) => {
-        self._enabled = !self._enabled;
-        self.toggleClassName('sidebar-button-active', self._enabled);
-        // if (self._enabled) Utils.execAsync(['bash', '-c', 'wlsunset & disown'])
-        if (self._enabled) Utils.execAsync('wlsunset')
+        self.attribute.enabled = !self.attribute.enabled;
+        self.toggleClassName('sidebar-button-active', self.attribute.enabled);
+        // if (self.attribute.enabled) Utils.execAsync(['bash', '-c', 'wlsunset & disown'])
+        if (self.attribute.enabled) Utils.execAsync('wlsunset')
         else Utils.execAsync('pkill wlsunset');
     },
     child: MaterialIcon('nightlight', 'norm'),
     setup: (self) => {
         setupCursorHover(self);
-        self._enabled = !!exec('pidof wlsunset');
-        self.toggleClassName('sidebar-button-active', self._enabled);
+        self.attribute.enabled = !!exec('pidof wlsunset');
+        self.toggleClassName('sidebar-button-active', self.attribute.enabled);
     },
     ...props,
 });
@@ -95,15 +108,22 @@ export const ModuleInvertColors = (props = {}) => Widget.Button({
     className: 'txt-small sidebar-iconbutton',
     tooltipText: 'Color inversion',
     onClicked: (button) => {
-        const shaderPath = JSON.parse(exec('hyprctl -j getoption decoration:screen_shader')).str;
-        if (shaderPath != "[[EMPTY]]" && shaderPath != "") {
-            execAsync(['bash', '-c', `hyprctl keyword decoration:screen_shader ''`]).catch(print);
-            button.toggleClassName('sidebar-button-active', false);
-        }
-        else {
-            execAsync(['bash', '-c', `hyprctl keyword decoration:screen_shader ~/.config/hypr/shaders/invert.frag`]).catch(print);
-            button.toggleClassName('sidebar-button-active', true);
-        }
+        // const shaderPath = JSON.parse(exec('hyprctl -j getoption decoration:screen_shader')).str;
+        Hyprland.sendMessage('j/getoption decoration:screen_shader')
+            .then((output) => {
+                const shaderPath = JSON.parse(output)["str"].trim();
+                console.log(output)
+                console.log(shaderPath)
+                if (shaderPath != "[[EMPTY]]" && shaderPath != "") {
+                    execAsync(['bash', '-c', `hyprctl keyword decoration:screen_shader '[[EMPTY]]'`]).catch(print);
+                    button.toggleClassName('sidebar-button-active', false);
+                }
+                else {
+                    Hyprland.sendMessage(`j/keyword decoration:screen_shader ${expandTilde('~/.config/hypr/shaders/invert.frag')}`)
+                        .catch(print);
+                    button.toggleClassName('sidebar-button-active', true);
+                }
+            })
     },
     child: MaterialIcon('invert_colors', 'norm'),
     setup: setupCursorHover,
@@ -111,17 +131,17 @@ export const ModuleInvertColors = (props = {}) => Widget.Button({
 })
 
 export const ModuleIdleInhibitor = (props = {}) => Widget.Button({ // TODO: Make this work
-    properties: [
-        ['enabled', false],
-        ['inhibitor', undefined],
-    ],
+    attribute: {
+        enabled: false,
+        inhibitor: undefined,
+    },
     className: 'txt-small sidebar-iconbutton',
     tooltipText: 'Keep system awake',
     onClicked: (self) => {
-        self._enabled = !self._enabled;
-        self.toggleClassName('sidebar-button-active', self._enabled);
-        if (self._enabled) {
-            self._inhibitor = Utils.subprocess(
+        self.attribute.enabled = !self.attribute.enabled;
+        self.toggleClassName('sidebar-button-active', self.attribute.enabled);
+        if (self.attribute.enabled) {
+            self.attribute.inhibitor = Utils.subprocess(
                 ['wayland-idle-inhibitor.py'],
                 (output) => print(output),
                 (err) => logError(err),
@@ -129,7 +149,7 @@ export const ModuleIdleInhibitor = (props = {}) => Widget.Button({ // TODO: Make
             );
         }
         else {
-            self._inhibitor.force_exit();
+            self.attribute.inhibitor.force_exit();
         }
     },
     child: MaterialIcon('coffee', 'norm'),

.config/ags/widgets/sideright/sideright.js

@@ -1,5 +1,5 @@
-const { GLib, Gdk, Gtk } = imports.gi;
-import { Utils, Widget } from '../../imports.js';
+import Widget from 'resource:///com/github/Aylur/ags/widget.js';
+import * as Utils from 'resource:///com/github/Aylur/ags/utils.js';
 const { execAsync, exec } = Utils;
 const { Box, EventBox } = Widget;
 import {
@@ -17,44 +17,19 @@ import {
 import ModuleNotificationList from "./notificationlist.js";
 import { ModuleCalendar } from "./calendar.js";
 
-// const NUM_OF_TOGGLES_PER_LINE = 5;
-// const togglesFlowBox = Widget.FlowBox({
-//     className: 'sidebar-group spacing-h-10',
-//     setup: (self) => {
-//         self.set_max_children_per_line(NUM_OF_TOGGLES_PER_LINE);
-//         self.add(ToggleIconWifi({ hexpand: true }));
-//         self.add(ToggleIconBluetooth({ hexpand: true }));
-//         self.add(HyprToggleIcon('mouse', 'Raw input', 'input:force_no_accel', { hexpand: true }));
-//         self.add(HyprToggleIcon('front_hand', 'No touchpad while typing', 'input:touchpad:disable_while_typing', { hexpand: true }));
-//         self.add(ModuleNightLight({ hexpand: true }));
-//         // Setup flowbox rearrange
-//         self.connect('child-activated', (self, child) => {
-//             if (child.get_index() === 0) {
-//                 self.reorder_child(child, self.get_children().length - 1);
-//             } else {
-//                 self.reorder_child(child, 0);
-//             }
-//         });
-//     }
-// })
-
 const timeRow = Box({
     className: 'spacing-h-5 sidebar-group-invisible-morehorizpad',
     children: [
-        // Widget.Label({
-        //     className: 'txt-title txt',
-        //     connections: [[5000, label => {
-        //         label.label = GLib.DateTime.new_now_local().format("%H:%M");
-        //     }]],
-        // }),
         Widget.Label({
             hpack: 'center',
             className: 'txt-small txt',
-            connections: [[5000, label => {
-                execAsync(['bash', '-c', `uptime -p | sed -e 's/up //;s/ hours,/h/;s/ minutes/m/'`]).then(upTimeString => {
-                    label.label = `System uptime: ${upTimeString}`;
-                }).catch(print);
-            }]],
+            setup: (self) => self
+                .poll(5000, label => {
+                    execAsync(['bash', '-c', `uptime -p | sed -e 's/up //;s/ hours,/h/;s/ minutes/m/'`]).then(upTimeString => {
+                        label.label = `Uptime: ${upTimeString}`;
+                    }).catch(print);
+                })
+            ,
         }),
         Widget.Box({ hexpand: true }),
         // ModuleEditIcon({ hpack: 'end' }), // TODO: Make this work

.config/ags/widgets/sideright/todolist.js

@@ -1,6 +1,6 @@
-const { Gio, Gdk, GLib, Gtk } = imports.gi;
-import { App, Widget, Utils } from '../../imports.js';
-const { Box, Button, CenterBox, Label, Revealer } = Widget;
+import Widget from 'resource:///com/github/Aylur/ags/widget.js';
+import * as Utils from 'resource:///com/github/Aylur/ags/utils.js';
+const { Box, Button, Label, Revealer } = Widget;
 import { MaterialIcon } from "../../lib/materialicon.js";
 import Todo from "../../services/todo.js";
 import { setupCursorHover } from "../../lib/cursorhover.js";
@@ -73,33 +73,36 @@ const todoListItem = (task, id, isDone, isEven = false) => {
 }
 
 const todoItems = (isDone) => Widget.Scrollable({
+    hscroll: 'never',
+    vscroll: 'automatic',
     child: Widget.Box({
         vertical: true,
-        connections: [[Todo, (self) => {
-            self.children = Todo.todo_json.map((task, i) => {
-                if (task.done != isDone) return null;
-                return todoListItem(task, i, isDone);
-            })
-            if (self.children.length == 0) {
-                self.homogeneous = true;
-                self.children = [
-                    Widget.Box({
-                        hexpand: true,
-                        vertical: true,
-                        vpack: 'center',
-                        className: 'txt',
-                        children: [
-                            MaterialIcon(`${isDone ? 'checklist' : 'check_circle'}`, 'badonkers'),
-                            Label({ label: `${isDone ? 'Finished tasks will go here' : 'Nothing here!'}` })
-                        ]
-                    })
-                ]
-            }
-            else self.homogeneous = false;
-        }, 'updated']]
+        setup: (self) => self
+            .hook(Todo, (self) => {
+                self.children = Todo.todo_json.map((task, i) => {
+                    if (task.done != isDone) return null;
+                    return todoListItem(task, i, isDone);
+                })
+                if (self.children.length == 0) {
+                    self.homogeneous = true;
+                    self.children = [
+                        Widget.Box({
+                            hexpand: true,
+                            vertical: true,
+                            vpack: 'center',
+                            className: 'txt',
+                            children: [
+                                MaterialIcon(`${isDone ? 'checklist' : 'check_circle'}`, 'badonkers'),
+                                Label({ label: `${isDone ? 'Finished tasks will go here' : 'Nothing here!'}` })
+                            ]
+                        })
+                    ]
+                }
+                else self.homogeneous = false;
+            }, 'updated')
+        ,
     }),
     setup: (listContents) => {
-        listContents.set_policy(Gtk.PolicyType.NEVER, Gtk.PolicyType.AUTOMATIC);
         const vScrollbar = listContents.get_vscrollbar();
         vScrollbar.get_style_context().add_class('sidebar-scrollbar');
     }