ags: sync

2024-01-11 16:49:37 +07:00
parent cdd8f7e252
commit 22b5993f79
96 changed files with 3346 additions and 2598 deletions
@@ -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,
                            ]
                        })]
                    }),
@@ -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(),
    ],
 });

@@ -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';
-                            }]],
+                            }),
                        })
                    })
                ]
@@ -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,
                            ],
                        }),
@@ -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';
+                })
+            })
        ]
    })
 });
@@ -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({
@@ -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);
    }
 })
@@ -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')
+    }
+});