updates

.config/ags/modules/bar/normal/music.js

@@ -0,0 +1,228 @@
+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 Mpris from 'resource:///com/github/Aylur/ags/service/mpris.js';
+const { Box, Button, EventBox, Label, Overlay, Revealer, Scrollable } = Widget;
+const { execAsync, exec } = Utils;
+import { AnimatedCircProg } from "../../.commonwidgets/cairo_circularprogress.js";
+import { MaterialIcon } from '../../.commonwidgets/materialicon.js';
+import { showMusicControls } from '../../../variables.js';
+
+const CUSTOM_MODULE_CONTENT_INTERVAL_FILE = `${GLib.get_home_dir()}/.cache/ags/user/scripts/custom-module-interval.txt`;
+const CUSTOM_MODULE_CONTENT_SCRIPT = `${GLib.get_home_dir()}/.cache/ags/user/scripts/custom-module-poll.sh`;
+const CUSTOM_MODULE_LEFTCLICK_SCRIPT = `${GLib.get_home_dir()}/.cache/ags/user/scripts/custom-module-leftclick.sh`;
+const CUSTOM_MODULE_RIGHTCLICK_SCRIPT = `${GLib.get_home_dir()}/.cache/ags/user/scripts/custom-module-rightclick.sh`;
+const CUSTOM_MODULE_MIDDLECLICK_SCRIPT = `${GLib.get_home_dir()}/.cache/ags/user/scripts/custom-module-middleclick.sh`;
+const CUSTOM_MODULE_SCROLLUP_SCRIPT = `${GLib.get_home_dir()}/.cache/ags/user/scripts/custom-module-scrollup.sh`;
+const CUSTOM_MODULE_SCROLLDOWN_SCRIPT = `${GLib.get_home_dir()}/.cache/ags/user/scripts/custom-module-scrolldown.sh`;
+
+function trimTrackTitle(title) {
+    if (!title) return '';
+    const cleanPatterns = [
+        /【[^】]*】/,         // Touhou n weeb stuff
+        " [FREE DOWNLOAD]", // F-777
+    ];
+    cleanPatterns.forEach((expr) => title = title.replace(expr, ''));
+    return title;
+}
+
+const BarGroup = ({ child }) => Box({
+    className: 'bar-group-margin bar-sides',
+    children: [
+        Box({
+            className: 'bar-group bar-group-standalone bar-group-pad-system',
+            children: [child],
+        }),
+    ]
+});
+
+const BarResource = (name, icon, command, circprogClassName = 'bar-batt-circprog', textClassName = 'txt-onSurfaceVariant', iconClassName = 'bar-batt') => {
+    const resourceCircProg = AnimatedCircProg({
+        className: `${circprogClassName}`,
+        vpack: 'center',
+        hpack: 'center',
+    });
+    const resourceProgress = Box({
+        homogeneous: true,
+        children: [Overlay({
+            child: Box({
+                vpack: 'center',
+                className: `${iconClassName}`,
+                homogeneous: true,
+                children: [
+                    MaterialIcon(icon, 'small'),
+                ],
+            }),
+            overlays: [resourceCircProg]
+        })]
+    });
+    const resourceLabel = Label({
+        className: `txt-smallie ${textClassName}`,
+    });
+    const widget = Box({
+        className: `spacing-h-4 ${textClassName}`,
+        children: [
+            resourceProgress,
+            resourceLabel,
+        ],
+        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 TrackProgress = () => {
+    const _updateProgress = (circprog) => {
+        const mpris = Mpris.getPlayer('');
+        if (!mpris) return;
+        // Set circular progress value
+        circprog.css = `font-size: ${Math.max(mpris.position / mpris.length * 100, 0)}px;`
+    }
+    return AnimatedCircProg({
+        className: 'bar-music-circprog',
+        vpack: 'center', hpack: 'center',
+        extraSetup: (self) => self
+            .hook(Mpris, _updateProgress)
+            .poll(3000, _updateProgress)
+        ,
+    })
+}
+
+const switchToRelativeWorkspace = async (self, num) => {
+    try {
+        const Hyprland = (await import('resource:///com/github/Aylur/ags/service/hyprland.js')).default;
+        Hyprland.messageAsync(`dispatch workspace ${num > 0 ? '+' : ''}${num}`).catch(print);
+    } catch {
+        execAsync([`${App.configDir}/scripts/sway/swayToRelativeWs.sh`, `${num}`]).catch(print);
+    }
+}
+
+export default () => {
+    // TODO: use cairo to make button bounce smaller on click, if that's possible
+    const playingState = Box({ // Wrap a box cuz overlay can't have margins itself
+        homogeneous: true,
+        children: [Overlay({
+            child: Box({
+                vpack: 'center',
+                className: 'bar-music-playstate',
+                homogeneous: true,
+                children: [Label({
+                    vpack: 'center',
+                    className: 'bar-music-playstate-txt',
+                    justification: 'center',
+                    setup: (self) => self.hook(Mpris, label => {
+                        const mpris = Mpris.getPlayer('');
+                        label.label = `${mpris !== null && mpris.playBackStatus == 'Playing' ? 'pause' : 'play_arrow'}`;
+                    }),
+                })],
+                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(),
+            ]
+        })]
+    });
+    const trackTitle = Label({
+        hexpand: true,
+        className: 'txt-smallie bar-music-txt',
+        truncate: 'end',
+        maxWidthChars: 10, // Doesn't matter, just needs to be non negative
+        setup: (self) => self.hook(Mpris, label => {
+            const mpris = Mpris.getPlayer('');
+            if (mpris)
+                label.label = `${trimTrackTitle(mpris.trackTitle)} • ${mpris.trackArtists.join(', ')}`;
+            else
+                label.label = 'No media';
+        }),
+    })
+    const musicStuff = Box({
+        className: 'spacing-h-10',
+        hexpand: true,
+        children: [
+            playingState,
+            trackTitle,
+        ]
+    })
+    const SystemResourcesOrCustomModule = () => {
+        // Check if ~/.cache/ags/user/scripts/custom-module-poll.sh exists
+        if (GLib.file_test(CUSTOM_MODULE_CONTENT_SCRIPT, GLib.FileTest.EXISTS)) {
+            const interval = Number(Utils.readFile(CUSTOM_MODULE_CONTENT_INTERVAL_FILE)) || 5000;
+            return BarGroup({
+                child: Button({
+                    child: Label({
+                        className: 'txt-smallie txt-onSurfaceVariant',
+                        useMarkup: true,
+                        setup: (self) => Utils.timeout(1, () => {
+                            self.label = exec(CUSTOM_MODULE_CONTENT_SCRIPT);
+                            self.poll(interval, (self) => {
+                                const content = exec(CUSTOM_MODULE_CONTENT_SCRIPT);
+                                self.label = content;
+                            })
+                        })
+                    }),
+                    onPrimaryClickRelease: () => execAsync(CUSTOM_MODULE_LEFTCLICK_SCRIPT).catch(print),
+                    onSecondaryClickRelease: () => execAsync(CUSTOM_MODULE_RIGHTCLICK_SCRIPT).catch(print),
+                    onMiddleClickRelease: () => execAsync(CUSTOM_MODULE_MIDDLECLICK_SCRIPT).catch(print),
+                    onScrollUp: () => execAsync(CUSTOM_MODULE_SCROLLUP_SCRIPT).catch(print),
+                    onScrollDown: () => execAsync(CUSTOM_MODULE_SCROLLDOWN_SCRIPT).catch(print),
+                })
+            });
+        } else return BarGroup({
+            child: Box({
+                children: [
+                    BarResource('RAM Usage', 'memory', `LANG=C free | awk '/^Mem/ {printf("%.2f\\n", ($3/$2) * 100)}'`,
+                        'bar-ram-circprog', 'bar-ram-txt', 'bar-ram-icon'),
+                    Revealer({
+                        revealChild: true,
+                        transition: 'slide_left',
+                        transitionDuration: userOptions.animations.durationLarge,
+                        child: Box({
+                            className: 'spacing-h-10 margin-left-10',
+                            children: [
+                                BarResource('Swap Usage', 'swap_horiz', `LANG=C free | awk '/^Swap/ {if ($2 > 0) printf("%.2f\\n", ($3/$2) * 100); else print "0";}'`,
+                                    'bar-swap-circprog', 'bar-swap-txt', 'bar-swap-icon'),
+                                BarResource('CPU Usage', 'settings_motion_mode', `LANG=C top -bn1 | grep Cpu | sed 's/\\,/\\./g' | awk '{print $2}'`,
+                                    'bar-cpu-circprog', 'bar-cpu-txt', 'bar-cpu-icon'),
+                            ]
+                        }),
+                        setup: (self) => self.hook(Mpris, label => {
+                            const mpris = Mpris.getPlayer('');
+                            self.revealChild = (!mpris);
+                        }),
+                    })
+                ],
+            })
+        });
+    }
+    return EventBox({
+        onScrollUp: (self) => switchToRelativeWorkspace(self, -1),
+        onScrollDown: (self) => switchToRelativeWorkspace(self, +1),
+        child: Box({
+            className: 'spacing-h-4',
+            children: [
+                SystemResourcesOrCustomModule(),
+                EventBox({
+                    child: BarGroup({ child: musicStuff }),
+                    onPrimaryClick: () => showMusicControls.setValue(!showMusicControls.value),
+                    onSecondaryClick: () => execAsync(['bash', '-c', 'playerctl next || playerctl position `bc <<< "100 * $(playerctl metadata mpris:length) / 1000000 / 100"` &']).catch(print),
+                    onMiddleClick: () => execAsync('playerctl play-pause').catch(print),
+                    setup: (self) => self.on('button-press-event', (self, event) => {
+                        if (event.get_button()[1] === 8) // Side button
+                            execAsync('playerctl previous').catch(print)
+                    }),
+                })
+            ]
+        })
+    });
+}

.config/ags/modules/bar/normal/spaceleft.js

@@ -0,0 +1,76 @@
+import App from 'resource:///com/github/Aylur/ags/app.js';
+import Widget from 'resource:///com/github/Aylur/ags/widget.js';
+import Brightness from '../../../services/brightness.js';
+import Indicator from '../../../services/indicator.js';
+
+const WindowTitle = async () => {
+    try {
+        const Hyprland = (await import('resource:///com/github/Aylur/ags/service/hyprland.js')).default;
+        return Widget.Scrollable({
+            hexpand: true, vexpand: true,
+            hscroll: 'automatic', vscroll: 'never',
+            child: Widget.Box({
+                vertical: true,
+                children: [
+                    Widget.Label({
+                        xalign: 0,
+                        truncate: 'end',
+                        maxWidthChars: 10, // Doesn't matter, just needs to be non negative
+                        className: 'txt-smaller bar-wintitle-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,
+                        truncate: 'end',
+                        maxWidthChars: 10, // Doesn't matter, just needs to be non negative
+                        className: 'txt-smallie bar-wintitle-txt',
+                        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;
+                        }),
+                    })
+                ]
+            })
+        });
+    } catch {
+        return null;
+    }
+}
+
+const OptionalWindowTitleInstance = await WindowTitle();
+
+export default () => Widget.EventBox({
+    onScrollUp: () => {
+        Indicator.popup(1); // Since the brightness and speaker are both on the same window
+        Brightness.screen_value += 0.05;
+    },
+    onScrollDown: () => {
+        Indicator.popup(1); // Since the brightness and speaker are both on the same window
+        Brightness.screen_value -= 0.05;
+    },
+    onPrimaryClick: () => {
+        App.toggleWindow('sideleft');
+    },
+    child: Widget.Box({
+        homogeneous: false,
+        children: [
+            Widget.Box({ className: 'bar-corner-spacing' }),
+            Widget.Overlay({
+                overlays: [
+                    Widget.Box({ hexpand: true }),
+                    Widget.Box({
+                        className: 'bar-sidemodule', hexpand: true,
+                        children: [Widget.Box({
+                            vertical: true,
+                            className: 'bar-space-button',
+                            children: [
+                                OptionalWindowTitleInstance,
+                            ]
+                        })]
+                    }),
+                ]
+            })
+        ]
+    })
+});

.config/ags/modules/bar/normal/spaceright.js

@@ -0,0 +1,90 @@
+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 SystemTray from 'resource:///com/github/Aylur/ags/service/systemtray.js';
+const { execAsync } = Utils;
+import Indicator from '../../../services/indicator.js';
+import { StatusIcons } from '../../.commonwidgets/statusicons.js';
+import { Tray } from "./tray.js";
+
+export default () => {
+    const barTray = Tray();
+    const separatorDot = Widget.Revealer({
+        transition: 'slide_left',
+        revealChild: false,
+        attribute: {
+            'count': SystemTray.items.length,
+            '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')
+        ,
+    });
+    const barStatusIcons = StatusIcons({
+        className: 'bar-statusicons',
+        setup: (self) => self.hook(App, (self, currentName, visible) => {
+            if (currentName === 'sideright') {
+                self.toggleClassName('bar-statusicons-active', visible);
+            }
+        }),
+    });
+    const SpaceRightDefaultClicks = (child) => Widget.EventBox({
+        onHover: () => { barStatusIcons.toggleClassName('bar-statusicons-hover', true) },
+        onHoverLost: () => { barStatusIcons.toggleClassName('bar-statusicons-hover', false) },
+        onPrimaryClick: () => App.toggleWindow('sideright'),
+        onSecondaryClick: () => execAsync(['bash', '-c', 'playerctl next || playerctl position `bc <<< "100 * $(playerctl metadata mpris:length) / 1000000 / 100"` &']).catch(print),
+        onMiddleClick: () => execAsync('playerctl play-pause').catch(print),
+        setup: (self) => self.on('button-press-event', (self, event) => {
+            if (event.get_button()[1] === 8)
+                execAsync('playerctl previous').catch(print)
+        }),
+        child: child,
+    });
+    const emptyArea = SpaceRightDefaultClicks(Widget.Box({ hexpand: true, }));
+    const indicatorArea = SpaceRightDefaultClicks(Widget.Box({
+        children: [
+            separatorDot,
+            barStatusIcons
+        ],
+    }));
+    const actualContent = Widget.Box({
+        hexpand: true,
+        className: 'spacing-h-5 bar-spaceright',
+        children: [
+            emptyArea,
+            barTray,
+            indicatorArea
+        ],
+    });
+
+    return Widget.EventBox({
+        onScrollUp: () => {
+            if (!Audio.speaker) return;
+            if (Audio.speaker.volume <= 0.09) Audio.speaker.volume += 0.01;
+            else Audio.speaker.volume += 0.03;
+            Indicator.popup(1);
+        },
+        onScrollDown: () => {
+            if (!Audio.speaker) return;
+            if (Audio.speaker.volume <= 0.09) Audio.speaker.volume -= 0.01;
+            else Audio.speaker.volume -= 0.03;
+            Indicator.popup(1);
+        },
+        child: Widget.Box({
+            children: [
+                actualContent,
+                SpaceRightDefaultClicks(Widget.Box({ className: 'bar-corner-spacing' })),
+            ]
+        })
+    });
+}

.config/ags/modules/bar/normal/system.js

@@ -0,0 +1,228 @@
+// This is for the right pills of the bar. 
+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 Battery from 'resource:///com/github/Aylur/ags/service/battery.js';
+import { MaterialIcon } from '../../.commonwidgets/materialicon.js';
+import { AnimatedCircProg } from "../../.commonwidgets/cairo_circularprogress.js";
+import { WWO_CODE, WEATHER_SYMBOL, NIGHT_WEATHER_SYMBOL } from '../../.commondata/weather.js';
+
+const WEATHER_CACHE_FOLDER = `${GLib.get_user_cache_dir()}/ags/weather`;
+Utils.exec(`mkdir -p ${WEATHER_CACHE_FOLDER}`);
+
+const BatBatteryProgress = () => {
+    const _updateProgress = (circprog) => { // Set circular progress value
+        circprog.css = `font-size: ${Math.abs(Battery.percent)}px;`
+
+        circprog.toggleClassName('bar-batt-circprog-low', Battery.percent <= userOptions.battery.low);
+        circprog.toggleClassName('bar-batt-circprog-full', Battery.charged);
+    }
+    return AnimatedCircProg({
+        className: 'bar-batt-circprog',
+        vpack: 'center', hpack: 'center',
+        extraSetup: (self) => self
+            .hook(Battery, _updateProgress)
+        ,
+    })
+}
+
+const BarClock = () => Widget.Box({
+    vpack: 'center',
+    className: 'spacing-h-4 bar-clock-box',
+    children: [
+        Widget.Label({
+            className: 'bar-time',
+            label: GLib.DateTime.new_now_local().format(userOptions.time.format),
+            setup: (self) => self.poll(userOptions.time.interval, label => {
+                label.label = GLib.DateTime.new_now_local().format(userOptions.time.format);
+            }),
+        }),
+        Widget.Label({
+            className: 'txt-norm txt-onLayer1',
+            label: '•',
+        }),
+        Widget.Label({
+            className: 'txt-smallie bar-date',
+            label: GLib.DateTime.new_now_local().format(userOptions.time.dateFormatLong),
+            setup: (self) => self.poll(userOptions.time.dateInterval, (label) => {
+                label.label = GLib.DateTime.new_now_local().format(userOptions.time.dateFormatLong);
+            }),
+        }),
+    ],
+});
+
+const UtilButton = ({ name, icon, onClicked }) => Button({
+    vpack: 'center',
+    tooltipText: name,
+    onClicked: onClicked,
+    className: 'bar-util-btn icon-material txt-norm',
+    label: `${icon}`,
+})
+
+const Utilities = () => Box({
+    hpack: 'center',
+    className: 'spacing-h-4',
+    children: [
+        UtilButton({
+            name: 'Screen snip', icon: 'screenshot_region', onClicked: () => {
+                Utils.execAsync(`${App.configDir}/scripts/grimblast.sh copy area`)
+                    .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 bar-batt-txt',
+    children: [
+        Revealer({
+            transitionDuration: userOptions.animations.durationSmall,
+            revealChild: false,
+            transition: 'slide_right',
+            child: MaterialIcon('bolt', 'norm', { tooltipText: "Charging" }),
+            setup: (self) => self.hook(Battery, revealer => {
+                self.revealChild = Battery.charging;
+            }),
+        }),
+        Label({
+            className: 'txt-smallie',
+            setup: (self) => self.hook(Battery, label => {
+                label.label = `${Battery.percent}%`;
+            }),
+        }),
+        Overlay({
+            child: Widget.Box({
+                vpack: 'center',
+                className: 'bar-batt',
+                homogeneous: true,
+                children: [
+                    MaterialIcon('battery_full', 'small'),
+                ],
+                setup: (self) => self.hook(Battery, box => {
+                    box.toggleClassName('bar-batt-low', Battery.percent <= userOptions.battery.low);
+                    box.toggleClassName('bar-batt-full', Battery.charged);
+                }),
+            }),
+            overlays: [
+                BatBatteryProgress(),
+            ]
+        }),
+    ]
+});
+
+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],
+        }),
+    ]
+});
+const BatteryModule = () => Stack({
+    transition: 'slide_up_down',
+    transitionDuration: userOptions.animations.durationLarge,
+    children: {
+        'laptop': Box({
+            className: 'spacing-h-4', children: [
+                BarGroup({ child: Utilities() }),
+                BarGroup({ child: BarBattery() }),
+            ]
+        }),
+        'desktop': BarGroup({
+            child: Box({
+                hexpand: true,
+                hpack: 'center',
+                className: 'spacing-h-4 txt-onSurfaceVariant',
+                children: [
+                    MaterialIcon('device_thermostat', 'small'),
+                    Label({
+                        label: 'Weather',
+                    })
+                ],
+                setup: (self) => self.poll(900000, async (self) => {
+                    const WEATHER_CACHE_PATH = WEATHER_CACHE_FOLDER + '/wttr.in.txt';
+                    const updateWeatherForCity = (city) => execAsync(`curl https://wttr.in/${city.replace(/ /g, '%20')}?format=j1`)
+                        .then(output => {
+                            const weather = JSON.parse(output);
+                            Utils.writeFile(JSON.stringify(weather), WEATHER_CACHE_PATH)
+                                .catch(print);
+                            const weatherCode = weather.current_condition[0].weatherCode;
+                            const weatherDesc = weather.current_condition[0].weatherDesc[0].value;
+                            const temperature = weather.current_condition[0].temp_C;
+                            const feelsLike = weather.current_condition[0].FeelsLikeC;
+                            const weatherSymbol = WEATHER_SYMBOL[WWO_CODE[weatherCode]];
+                            self.children[0].label = weatherSymbol;
+                            self.children[1].label = `${temperature}℃ • Feels like ${feelsLike}℃`;
+                            self.tooltipText = weatherDesc;
+                        }).catch((err) => {
+                            try { // Read from cache
+                                const weather = JSON.parse(
+                                    Utils.readFile(WEATHER_CACHE_PATH)
+                                );
+                                const weatherCode = weather.current_condition[0].weatherCode;
+                                const weatherDesc = weather.current_condition[0].weatherDesc[0].value;
+                                const temperature = weather.current_condition[0].temp_C;
+                                const feelsLike = weather.current_condition[0].FeelsLikeC;
+                                const weatherSymbol = WEATHER_SYMBOL[WWO_CODE[weatherCode]];
+                                self.children[0].label = weatherSymbol;
+                                self.children[1].label = `${temperature}℃ • Feels like ${feelsLike}℃`;
+                                self.tooltipText = weatherDesc;
+                            } catch (err) {
+                                print(err);
+                            }
+                        });
+                    if (userOptions.weather.city != '' && userOptions.weather.city != null) {
+                        updateWeatherForCity(userOptions.weather.city.replace(/ /g, '%20'));
+                    }
+                    else {
+                        Utils.execAsync('curl ipinfo.io')
+                            .then(output => {
+                                return JSON.parse(output)['city'].toLowerCase();
+                            })
+                            .then(updateWeatherForCity)
+                            .catch(print)
+                    }
+                }),
+            })
+        }),
+    },
+    setup: (stack) => Utils.timeout(10, () => {
+        if (!Battery.available) stack.shown = 'desktop';
+        else stack.shown = 'laptop';
+    })
+})
+
+const switchToRelativeWorkspace = async (self, num) => {
+    try {
+        const Hyprland = (await import('resource:///com/github/Aylur/ags/service/hyprland.js')).default;
+        Hyprland.messageAsync(`dispatch workspace ${num > 0 ? '+' : ''}${num}`).catch(print);
+    } catch {
+        execAsync([`${App.configDir}/scripts/sway/swayToRelativeWs.sh`, `${num}`]).catch(print);
+    }
+}
+
+export default () => Widget.EventBox({
+    onScrollUp: (self) => switchToRelativeWorkspace(self, -1),
+    onScrollDown: (self) => switchToRelativeWorkspace(self, +1),
+    onPrimaryClick: () => App.toggleWindow('sideright'),
+    child: Widget.Box({
+        className: 'spacing-h-4',
+        children: [
+            BarGroup({ child: BarClock() }),
+            BatteryModule(),
+        ]
+    })
+});

.config/ags/modules/bar/normal/tray.js

@@ -0,0 +1,40 @@
+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 SysTrayItem = (item) => Button({
+    className: 'bar-systray-item',
+    child: Icon({
+        hpack: 'center',
+        icon: item.icon,
+        setup: (self) => self.hook(item, (self) => self.icon = item.icon),
+    }),
+    setup: (self) => self
+        .hook(item, (self) => self.tooltipMarkup = item['tooltip-markup'])
+    ,
+    onPrimaryClick: (_, event) => item.activate(event),
+    onSecondaryClick: (btn, event) => item.menu.popup_at_widget(btn, Gravity.SOUTH, Gravity.NORTH, null),
+});
+
+export const Tray = (props = {}) => {
+    const trayContent = Box({
+        className: 'margin-right-5 spacing-h-15',
+        setup: (self) => self
+            .hook(SystemTray, (self) => {
+                self.children = SystemTray.items.map(SysTrayItem);
+                self.show_all();
+            })
+        ,
+    });
+    const trayRevealer = Widget.Revealer({
+        revealChild: true,
+        transition: 'slide_left',
+        transitionDuration: userOptions.animations.durationLarge,
+        child: trayContent,
+    });
+    return Box({
+        ...props,
+        children: [trayRevealer],
+    });
+}

.config/ags/modules/bar/normal/workspaces_hyprland.js

@@ -0,0 +1,192 @@
+const { GLib, Gdk, Gtk } = imports.gi;
+const Lang = imports.lang;
+const Cairo = imports.cairo;
+const Pango = imports.gi.Pango;
+const PangoCairo = imports.gi.PangoCairo;
+import App from 'resource:///com/github/Aylur/ags/app.js';
+import * as Utils from 'resource:///com/github/Aylur/ags/utils.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';
+
+const dummyWs = Box({ className: 'bar-ws' }); // Not shown. Only for getting size props
+const dummyActiveWs = Box({ className: 'bar-ws bar-ws-active' }); // Not shown. Only for getting size props
+const dummyOccupiedWs = Box({ className: 'bar-ws bar-ws-occupied' }); // Not shown. Only for getting size props
+
+// Font size = workspace id
+const WorkspaceContents = (count = 10) => {
+    return DrawingArea({
+        // css: `transition: 300ms cubic-bezier(0.1, 1, 0, 1);`,
+        attribute: {
+            initialized: false,
+            workspaceMask: 0,
+            workspaceGroup: 0,
+            updateMask: (self) => {
+                const offset = Math.floor((Hyprland.active.workspace.id - 1) / count) * userOptions.workspaces.shown;
+                // 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++) {
+                    const ws = workspaces[i];
+                    if (ws.id <= offset || ws.id > offset + count) continue; // Out of range, ignore
+                    if (workspaces[i].windows > 0)
+                        workspaceMask |= (1 << (ws.id - offset));
+                }
+                // console.log('Mask:', workspaceMask.toString(2));
+                self.attribute.workspaceMask = workspaceMask;
+                // self.attribute.initialized = true;
+                self.queue_draw();
+            },
+            toggleMask: (self, occupied, name) => {
+                if (occupied) self.attribute.workspaceMask |= (1 << parseInt(name));
+                else self.attribute.workspaceMask &= ~(1 << parseInt(name));
+                self.queue_draw();
+            },
+        },
+        setup: (area) => area
+            .hook(Hyprland.active.workspace, (self) => {
+                self.setCss(`font-size: ${(Hyprland.active.workspace.id - 1) % count + 1}px;`);
+                const previousGroup = self.attribute.workspaceGroup;
+                const currentGroup = Math.floor((Hyprland.active.workspace.id - 1) / count);
+                if (currentGroup !== previousGroup) {
+                    self.attribute.updateMask(self);
+                    self.attribute.workspaceGroup = currentGroup;
+                }
+            })
+            .hook(Hyprland, (self) => self.attribute.updateMask(self), 'notify::workspaces')
+            .on('draw', Lang.bind(area, (area, cr) => {
+                const offset = Math.floor((Hyprland.active.workspace.id - 1) / count) * userOptions.workspaces.shown;
+
+                const allocation = area.get_allocation();
+                const { width, height } = allocation;
+
+                const workspaceStyleContext = dummyWs.get_style_context();
+                const workspaceDiameter = workspaceStyleContext.get_property('min-width', Gtk.StateFlags.NORMAL);
+                const workspaceRadius = workspaceDiameter / 2;
+                const workspaceFontSize = workspaceStyleContext.get_property('font-size', Gtk.StateFlags.NORMAL) / 4 * 3;
+                const workspaceFontFamily = workspaceStyleContext.get_property('font-family', Gtk.StateFlags.NORMAL);
+                const wsbg = workspaceStyleContext.get_property('background-color', Gtk.StateFlags.NORMAL);
+                const wsfg = workspaceStyleContext.get_property('color', Gtk.StateFlags.NORMAL);
+
+                const occupiedWorkspaceStyleContext = dummyOccupiedWs.get_style_context();
+                const occupiedbg = occupiedWorkspaceStyleContext.get_property('background-color', Gtk.StateFlags.NORMAL);
+                const occupiedfg = occupiedWorkspaceStyleContext.get_property('color', Gtk.StateFlags.NORMAL);
+
+                const activeWorkspaceStyleContext = dummyActiveWs.get_style_context();
+                const activebg = activeWorkspaceStyleContext.get_property('background-color', Gtk.StateFlags.NORMAL);
+                const activefg = activeWorkspaceStyleContext.get_property('color', Gtk.StateFlags.NORMAL);
+                area.set_size_request(workspaceDiameter * count, -1);
+                const widgetStyleContext = area.get_style_context();
+                const activeWs = widgetStyleContext.get_property('font-size', Gtk.StateFlags.NORMAL);
+
+                const activeWsCenterX = -(workspaceDiameter / 2) + (workspaceDiameter * activeWs);
+                const activeWsCenterY = height / 2;
+
+                // Font
+                const layout = PangoCairo.create_layout(cr);
+                const fontDesc = Pango.font_description_from_string(`${workspaceFontFamily[0]} ${workspaceFontSize}`);
+                layout.set_font_description(fontDesc);
+                cr.setAntialias(Cairo.Antialias.BEST);
+                // Get kinda min radius for number indicators
+                layout.set_text("0".repeat(count.toString().length), -1);
+                const [layoutWidth, layoutHeight] = layout.get_pixel_size();
+                const indicatorRadius = Math.max(layoutWidth, layoutHeight) / 2 * 1.2; // a bit smaller than sqrt(2)*radius
+                const indicatorGap = workspaceRadius - indicatorRadius;
+
+                // Draw workspace numbers
+                for (let i = 1; i <= count; 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.attribute.workspaceMask & (1 << (i - 1)))) { // Left
+                            cr.arc(wsCenterX, wsCenterY, workspaceRadius, 0.5 * Math.PI, 1.5 * Math.PI);
+                            cr.fill();
+                        }
+                        else {
+                            cr.rectangle(wsCenterX - workspaceRadius, wsCenterY - workspaceRadius, workspaceRadius, workspaceRadius * 2)
+                            cr.fill();
+                        }
+                        if (!(area.attribute.workspaceMask & (1 << (i + 1)))) { // Right
+                            cr.arc(wsCenterX, wsCenterY, workspaceRadius, -0.5 * Math.PI, 0.5 * Math.PI);
+                            cr.fill();
+                        }
+                        else {
+                            cr.rectangle(wsCenterX, wsCenterY - workspaceRadius, workspaceRadius, workspaceRadius * 2)
+                            cr.fill();
+                        }
+
+                        // Set color for text
+                        cr.setSourceRGBA(occupiedfg.red, occupiedfg.green, occupiedfg.blue, occupiedfg.alpha);
+                    }
+                    else
+                        cr.setSourceRGBA(wsfg.red, wsfg.green, wsfg.blue, wsfg.alpha);
+
+                    layout.set_text(`${i + offset}`, -1);
+                    const [layoutWidth, layoutHeight] = layout.get_pixel_size();
+                    const x = -workspaceRadius + (workspaceDiameter * i) - (layoutWidth / 2);
+                    const y = (height - layoutHeight) / 2;
+                    cr.moveTo(x, y);
+                    PangoCairo.show_layout(cr, layout);
+                    cr.stroke();
+                }
+
+                // Draw active ws
+                // base
+                cr.setSourceRGBA(activebg.red, activebg.green, activebg.blue, activebg.alpha);
+                cr.arc(activeWsCenterX, activeWsCenterY, indicatorRadius, 0, 2 * Math.PI);
+                cr.fill();
+                // inner decor
+                cr.setSourceRGBA(activefg.red, activefg.green, activefg.blue, activefg.alpha);
+                cr.arc(activeWsCenterX, activeWsCenterY, indicatorRadius * 0.2, 0, 2 * Math.PI);
+                cr.fill();
+            }))
+        ,
+    })
+}
+
+export default () => EventBox({
+    onScrollUp: () => Hyprland.messageAsync(`dispatch workspace -1`).catch(print),
+    onScrollDown: () => Hyprland.messageAsync(`dispatch workspace +1`).catch(print),
+    onMiddleClick: () => App.toggleWindow('osk'),
+    onSecondaryClick: () => App.toggleWindow('overview'),
+    attribute: {
+        clicked: false,
+        ws_group: 0,
+    },
+    child: Box({
+        homogeneous: true,
+        className: 'bar-group-margin',
+        children: [Box({
+            className: 'bar-group bar-group-standalone bar-group-pad',
+            css: 'min-width: 2px;',
+            children: [WorkspaceContents(userOptions.workspaces.shown)],
+        })]
+    }),
+    setup: (self) => {
+        self.add_events(Gdk.EventMask.POINTER_MOTION_MASK);
+        self.on('motion-notify-event', (self, event) => {
+            if (!self.attribute.clicked) return;
+            const [_, cursorX, cursorY] = event.get_coords();
+            const widgetWidth = self.get_allocation().width;
+            const wsId = Math.ceil(cursorX * userOptions.workspaces.shown / widgetWidth);
+            Utils.execAsync([`${App.configDir}/scripts/hyprland/workspace_action.sh`, 'workspace', `${wsId}`])
+                .catch(print);
+        })
+        self.on('button-press-event', (self, event) => {
+            if (event.get_button()[1] === 1) {
+                self.attribute.clicked = true;
+                const [_, cursorX, cursorY] = event.get_coords();
+                const widgetWidth = self.get_allocation().width;
+                const wsId = Math.ceil(cursorX * userOptions.workspaces.shown / widgetWidth);
+                Utils.execAsync([`${App.configDir}/scripts/hyprland/workspace_action.sh`, 'workspace', `${wsId}`])
+                    .catch(print);
+            }
+            else if (event.get_button()[1] === 8) {
+                Hyprland.messageAsync(`dispatch togglespecialworkspace`).catch(print);
+            }
+        })
+        self.on('button-release-event', (self) => self.attribute.clicked = false);
+    }
+})

.config/ags/modules/bar/normal/workspaces_sway.js

@@ -0,0 +1,183 @@
+const { GLib, Gdk, Gtk } = imports.gi;
+const Lang = imports.lang;
+const Cairo = imports.cairo;
+const Pango = imports.gi.Pango;
+const PangoCairo = imports.gi.PangoCairo;
+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";
+const { execAsync, exec } = Utils;
+const { Box, DrawingArea, EventBox } = Widget;
+
+const dummyWs = Box({ className: 'bar-ws' }); // Not shown. Only for getting size props
+const dummyActiveWs = Box({ className: 'bar-ws bar-ws-active' }); // Not shown. Only for getting size props
+const dummyOccupiedWs = Box({ className: 'bar-ws bar-ws-occupied' }); // Not shown. Only for getting size props
+
+const switchToWorkspace = (arg) => Utils.execAsync(`swaymsg workspace ${arg}`).catch(print);
+const switchToRelativeWorkspace = (self, num) =>
+    execAsync([`${App.configDir}/scripts/sway/swayToRelativeWs.sh`, `${num}`]).catch(print);
+
+const WorkspaceContents = (count = 10) => {
+    return DrawingArea({
+        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 = Sway.workspaces;
+                let workspaceMask = 0;
+                // console.log('----------------')
+                for (let i = 0; i < workspaces.length; i++) {
+                    const ws = workspaces[i];
+                    // console.log(ws.name, ',', ws.num);
+                    if (!Number(ws.name)) return;
+                    const id = Number(ws.name);
+                    if (id <= 0) continue; // Ignore scratchpads
+                    if (id > count) return; // Not rendered
+                    if (workspaces[i].windows > 0) {
+                        workspaceMask |= (1 << id);
+                    }
+                }
+                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(Sway.active.workspace, (area) => {
+                area.setCss(`font-size: ${Sway.active.workspace.name}px;`)
+            })
+            .hook(Sway, (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;
+
+                const workspaceStyleContext = dummyWs.get_style_context();
+                const workspaceDiameter = workspaceStyleContext.get_property('min-width', Gtk.StateFlags.NORMAL);
+                const workspaceRadius = workspaceDiameter / 2;
+                const workspaceFontSize = workspaceStyleContext.get_property('font-size', Gtk.StateFlags.NORMAL) / 4 * 3;
+                const workspaceFontFamily = workspaceStyleContext.get_property('font-family', Gtk.StateFlags.NORMAL);
+                const wsbg = workspaceStyleContext.get_property('background-color', Gtk.StateFlags.NORMAL);
+                const wsfg = workspaceStyleContext.get_property('color', Gtk.StateFlags.NORMAL);
+
+                const occupiedWorkspaceStyleContext = dummyOccupiedWs.get_style_context();
+                const occupiedbg = occupiedWorkspaceStyleContext.get_property('background-color', Gtk.StateFlags.NORMAL);
+                const occupiedfg = occupiedWorkspaceStyleContext.get_property('color', Gtk.StateFlags.NORMAL);
+
+                const activeWorkspaceStyleContext = dummyActiveWs.get_style_context();
+                const activebg = activeWorkspaceStyleContext.get_property('background-color', Gtk.StateFlags.NORMAL);
+                const activefg = activeWorkspaceStyleContext.get_property('color', Gtk.StateFlags.NORMAL);
+                area.set_size_request(workspaceDiameter * count, -1);
+                const widgetStyleContext = area.get_style_context();
+                const activeWs = widgetStyleContext.get_property('font-size', Gtk.StateFlags.NORMAL);
+
+                const activeWsCenterX = -(workspaceDiameter / 2) + (workspaceDiameter * activeWs);
+                const activeWsCenterY = height / 2;
+
+                // Font
+                const layout = PangoCairo.create_layout(cr);
+                const fontDesc = Pango.font_description_from_string(`${workspaceFontFamily[0]} ${workspaceFontSize}`);
+                layout.set_font_description(fontDesc);
+                cr.setAntialias(Cairo.Antialias.BEST);
+                // Get kinda min radius for number indicators
+                layout.set_text("0".repeat(count.toString().length), -1);
+                const [layoutWidth, layoutHeight] = layout.get_pixel_size();
+                const indicatorRadius = Math.max(layoutWidth, layoutHeight) / 2 * 1.2; // a bit smaller than sqrt(2)*radius
+                const indicatorGap = workspaceRadius - indicatorRadius;
+
+                // Draw workspace numbers
+                for (let i = 1; i <= count; 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.attribute.workspaceMask & (1 << (i - 1)))) { // Left
+                            cr.arc(wsCenterX, wsCenterY, workspaceRadius, 0.5 * Math.PI, 1.5 * Math.PI);
+                            cr.fill();
+                        }
+                        else {
+                            cr.rectangle(wsCenterX - workspaceRadius, wsCenterY - workspaceRadius, workspaceRadius, workspaceRadius * 2)
+                            cr.fill();
+                        }
+                        if (!(area.attribute.workspaceMask & (1 << (i + 1)))) { // Right
+                            cr.arc(wsCenterX, wsCenterY, workspaceRadius, -0.5 * Math.PI, 0.5 * Math.PI);
+                            cr.fill();
+                        }
+                        else {
+                            cr.rectangle(wsCenterX, wsCenterY - workspaceRadius, workspaceRadius, workspaceRadius * 2)
+                            cr.fill();
+                        }
+
+                        // Set color for text
+                        cr.setSourceRGBA(occupiedfg.red, occupiedfg.green, occupiedfg.blue, occupiedfg.alpha);
+                    }
+                    else
+                        cr.setSourceRGBA(wsfg.red, wsfg.green, wsfg.blue, wsfg.alpha);
+                    layout.set_text(`${i}`, -1);
+                    const [layoutWidth, layoutHeight] = layout.get_pixel_size();
+                    const x = -workspaceRadius + (workspaceDiameter * i) - (layoutWidth / 2);
+                    const y = (height - layoutHeight) / 2;
+                    cr.moveTo(x, y);
+                    // cr.showText(text);
+                    PangoCairo.show_layout(cr, layout);
+                    cr.stroke();
+                }
+
+                // Draw active ws
+                // base
+                cr.setSourceRGBA(activebg.red, activebg.green, activebg.blue, activebg.alpha);
+                cr.arc(activeWsCenterX, activeWsCenterY, indicatorRadius, 0, 2 * Math.PI);
+                cr.fill();
+                // inner decor
+                cr.setSourceRGBA(activefg.red, activefg.green, activefg.blue, activefg.alpha);
+                cr.arc(activeWsCenterX, activeWsCenterY, indicatorRadius * 0.2, 0, 2 * Math.PI);
+                cr.fill();
+            }))
+        ,
+    })
+}
+
+export default () => EventBox({
+    onScrollUp: (self) => switchToRelativeWorkspace(self, -1),
+    onScrollDown: (self) => switchToRelativeWorkspace(self, +1),
+    onMiddleClickRelease: () => App.toggleWindow('overview'),
+    onSecondaryClickRelease: () => App.toggleWindow('osk'),
+    attribute: { clicked: false },
+    child: Box({
+        homogeneous: true,
+        className: 'bar-group-margin',
+        children: [Box({
+            className: 'bar-group bar-group-standalone bar-group-pad',
+            css: 'min-width: 2px;',
+            children: [
+                WorkspaceContents(10),
+            ]
+        })]
+    }),
+    setup: (self) => {
+        self.add_events(Gdk.EventMask.POINTER_MOTION_MASK);
+        self.on('motion-notify-event', (self, event) => {
+            if (!self.attribute.clicked) return;
+            const [_, cursorX, cursorY] = event.get_coords();
+            const widgetWidth = self.get_allocation().width;
+            const wsId = Math.ceil(cursorX * userOptions.workspaces.shown / widgetWidth);
+            switchToWorkspace(wsId);
+        })
+        self.on('button-press-event', (self, event) => {
+            if (!(event.get_button()[1] === 1)) return; // We're only interested in left-click here
+            self.attribute.clicked = true;
+            const [_, cursorX, cursorY] = event.get_coords();
+            const widgetWidth = self.get_allocation().width;
+            const wsId = Math.ceil(cursorX * userOptions.workspaces.shown / widgetWidth);
+            switchToWorkspace(wsId);
+        })
+        self.on('button-release-event', (self) => self.attribute.clicked = false);
+    }
+});