many changed, added nixos-hardware

modules/styling/config/widgets/bar/main.js

@@ -0,0 +1,75 @@
+const { Gtk } = imports.gi;
+import Widget from 'resource:///com/github/Aylur/ags/widget.js';
+
+import WindowTitle from "./spaceleft.js";
+import Indicators from "./spaceright.js";
+import Music from "./music.js";
+import System from "./system.js";
+import { RoundedCorner, enableClickthrough } from "../../lib/roundedcorner.js";
+
+const OptionalWorkspaces = async () => {
+    try {
+        return (await import('./workspaces_hyprland.js')).default();
+    } catch {
+        try {
+            return (await import('./workspaces_sway.js')).default();
+        } catch {
+            return null;
+        }
+    }
+};
+
+export const Bar = async (monitor = 0) => {
+    const SideModule = (children) => Widget.Box({
+        className: 'bar-sidemodule',
+        children: children,
+    });
+    const barContent = Widget.CenterBox({
+        className: 'bar-bg',
+        setup: (self) => {
+            const styleContext = self.get_style_context();
+            const minHeight = styleContext.get_property('min-height', Gtk.StateFlags.NORMAL);
+            // execAsync(['bash', '-c', `hyprctl keyword monitor ,addreserved,${minHeight},0,0,0`]).catch(print);
+        },
+        startWidget: WindowTitle(),
+        centerWidget: Widget.Box({
+            className: 'spacing-h-4',
+            children: [
+                SideModule([Music()]),
+                Widget.Box({
+                    homogeneous: true,
+                    children: [await OptionalWorkspaces()],
+                }),
+                SideModule([System()]),
+            ]
+        }),
+        endWidget: Indicators(),
+    });
+    return Widget.Window({
+        monitor,
+        name: `bar${monitor}`,
+        anchor: ['top', 'left', 'right'],
+        exclusivity: 'exclusive',
+        visible: true,
+        child: barContent,
+    });
+}
+
+export const BarCornerTopleft = (id = '') => Widget.Window({
+    name: `barcornertl${id}`,
+    layer: 'top',
+    anchor: ['top', 'left'],
+    exclusivity: 'normal',
+    visible: true,
+    child: RoundedCorner('topleft', { className: 'corner', }),
+    setup: enableClickthrough,
+});
+export const BarCornerTopright = (id = '') => Widget.Window({
+    name: `barcornertr${id}`,
+    layer: 'top',
+    anchor: ['top', 'right'],
+    exclusivity: 'normal',
+    visible: true,
+    child: RoundedCorner('topright', { className: 'corner', }),
+    setup: enableClickthrough,
+});

modules/styling/config/widgets/bar/music.js

@@ -0,0 +1,182 @@
+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, Label, Overlay, Revealer } = Widget;
+const { execAsync, exec } = Utils;
+import { AnimatedCircProg } from "../../lib/animatedcircularprogress.js";
+import { MaterialIcon } from '../../lib/materialicon.js';
+import { showMusicControls } from '../../variables.js';
+
+function trimTrackTitle(title) {
+    if (!title) return '';
+    const cleanRegexes = [
+        /【[^】]*】/,         // Touhou n weeb stuff
+        /\[FREE DOWNLOAD\]/, // F-777
+    ];
+    cleanRegexes.forEach((expr) => title.replace(expr, ''));
+    return title;
+}
+
+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 BarResource = (name, icon, command) => {
+    const resourceCircProg = AnimatedCircProg({
+        className: 'bar-batt-circprog',
+        vpack: 'center',
+        hpack: 'center',
+    });
+    const resourceProgress = Overlay({
+        child: Widget.Box({
+            vpack: 'center',
+            className: 'bar-batt',
+            homogeneous: true,
+            children: [
+                MaterialIcon(icon, 'small'),
+            ],
+        }),
+        overlays: [resourceCircProg]
+    });
+    const resourceLabel = Label({
+        className: 'txt-smallie txt-onSurfaceVariant',
+    });
+    const widget = Box({
+        className: 'spacing-h-4 txt-onSurfaceVariant',
+        children: [
+            resourceLabel,
+            resourceProgress,
+        ],
+        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.sendMessage(`dispatch workspace ${num > 0 ? '+' : ''}${num}`);
+    } 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 = Widget.Box({ // Wrap a box cuz overlay can't have margins itself
+        homogeneous: true,
+        children: [Widget.Overlay({
+            child: Widget.Box({
+                vpack: 'center',
+                className: 'bar-music-playstate',
+                homogeneous: true,
+                children: [Widget.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 = Widget.Scrollable({
+        hexpand: true,
+        child: Widget.Label({
+            className: 'txt-smallie txt-onSurfaceVariant',
+            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 systemResources = BarGroup({
+        child: Box({
+            children: [
+                BarResource('RAM Usage', 'memory', `LANG=C free | awk '/^Mem/ {printf("%.2f\\n", ($3/$2) * 100)}'`),
+                Revealer({
+                    revealChild: true,
+                    transition: 'slide_left',
+                    transitionDuration: 200,
+                    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";}'`),
+                            BarResource('CPU Usage', 'settings_motion_mode', `LANG=C top -bn1 | grep Cpu | sed 's/\\,/\\./g' | awk '{print $2}'`),
+                        ]
+                    }),
+                    setup: (self) => self.hook(Mpris, label => {
+                        const mpris = Mpris.getPlayer('');
+                        self.revealChild = (!mpris);
+                    }),
+                })
+            ],
+        })
+    });
+    return Widget.EventBox({
+        onScrollUp: (self) => switchToRelativeWorkspace(self, -1),
+        onScrollDown: (self) => switchToRelativeWorkspace(self, +1),
+        onPrimaryClickRelease: () => showMusicControls.setValue(!showMusicControls.value),
+        onSecondaryClickRelease: () => execAsync(['bash', '-c', 'playerctl next || playerctl position `bc <<< "100 * $(playerctl metadata mpris:length) / 1000000 / 100"` &']),
+        onMiddleClickRelease: () => execAsync('playerctl play-pause').catch(print),
+        child: Box({
+            className: 'spacing-h-5',
+            children: [
+                BarGroup({ child: musicStuff }),
+                systemResources,
+            ]
+        })
+    });
+}

modules/styling/config/widgets/bar/spaceleft.js

@@ -0,0 +1,72 @@
+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,
+                        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;
+                        }),
+                    })
+                ]
+            })
+        });
+    } 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,
+                            ]
+                        })]
+                    }),
+                ]
+            })
+        ]
+    })
+});

modules/styling/config/widgets/bar/spaceright.js

@@ -0,0 +1,82 @@
+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 "../../lib/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 actualContent = Widget.Box({
+        hexpand: true,
+        className: 'spacing-h-5 txt',
+        children: [
+            Widget.Box({
+                hexpand: true,
+                className: 'spacing-h-5 txt',
+                children: [
+                    Widget.Box({ hexpand: true, }),
+                    barTray,
+                    separatorDot,
+                    barStatusIcons,
+                ],
+            }),
+        ]
+    });
+
+    return Widget.EventBox({
+        onScrollUp: () => {
+            if (!Audio.speaker) return;
+            Audio.speaker.volume += 0.03;
+            Indicator.popup(1);
+        },
+        onScrollDown: () => {
+            if (!Audio.speaker) return;
+            Audio.speaker.volume -= 0.03;
+            Indicator.popup(1);
+        },
+        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"` &']).catch(print),
+        onMiddleClickRelease: () => execAsync('playerctl play-pause').catch(print),
+        child: Widget.Box({
+            homogeneous: false,
+            children: [
+                actualContent,
+                Widget.Box({ className: 'bar-corner-spacing' }),
+            ]
+        })
+    });
+}

modules/styling/config/widgets/bar/system.js

@@ -0,0 +1,235 @@
+// 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 '../../lib/materialicon.js';
+import { AnimatedCircProg } from "../../lib/animatedcircularprogress.js";
+import { WWO_CODE, WEATHER_SYMBOL, NIGHT_WEATHER_SYMBOL } from '../../data/weather.js';
+
+const BATTERY_LOW = 20;
+const WEATHER_CACHE_FOLDER = `${GLib.get_user_cache_dir()}/ags/weather`;
+Utils.exec(`mkdir -p ${WEATHER_CACHE_FOLDER}`);
+
+let WEATHER_CITY = '';
+try {
+    WEATHER_CITY = GLib.getenv('AGS_WEATHER_CITY');
+} catch (e) {
+    print(e);
+}
+
+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 <= 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-5 txt-onSurfaceVariant bar-clock-box',
+    children: [
+        Widget.Label({
+            className: 'bar-clock',
+            label: GLib.DateTime.new_now_local().format("%H:%M"),
+            setup: (self) => self.poll(5000, label => {
+                label.label = GLib.DateTime.new_now_local().format("%H:%M");
+            }),
+        }),
+        Widget.Label({
+            className: 'txt-norm',
+            label: '•',
+        }),
+        Widget.Label({
+            className: 'txt-smallie',
+            label: GLib.DateTime.new_now_local().format("%A, %d/%m"),
+            setup: (self) => self.poll(5000, label => {
+                label.label = GLib.DateTime.new_now_local().format("%A, %d/%m");
+            }),
+        }),
+    ],
+});
+
+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-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({
+            transitionDuration: 150,
+            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 txt-onSurfaceVariant',
+            setup: (self) => self.hook(Battery, label => {
+                label.label = `${Battery.percent}%`;
+            }),
+        }),
+        Overlay({
+            child: Widget.Box({
+                vpack: 'center',
+                className: 'bar-batt',
+                homogeneous: true,
+                children: [
+                    MaterialIcon('settings_heart', 'small'),
+                ],
+                setup: (self) => self.hook(Battery, box => {
+                    box.toggleClassName('bar-batt-low', Battery.percent <= 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: 150,
+    children: {
+        'laptop': Box({
+            className: 'spacing-h-5', children: [
+                BarGroup({ child: Utilities() }),
+                BarGroup({ child: BarBattery() }),
+            ]
+        }),
+        'desktop': BarGroup({
+            child: Box({
+                hexpand: true,
+                hpack: 'center',
+                className: 'spacing-h-5',
+                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}?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 (WEATHER_CITY != '' && WEATHER_CITY != null) {
+                        updateWeatherForCity(WEATHER_CITY);
+                    }
+                    else {
+                        Utils.execAsync('curl ipinfo.io')
+                            .then(output => {
+                                return JSON.parse(output)['city'].toLowerCase();
+                            })
+                            .then(updateWeatherForCity);
+                    }
+                }),
+            })
+        }),
+    },
+    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.sendMessage(`dispatch workspace ${num > 0 ? '+' : ''}${num}`);
+    } 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-5',
+        children: [
+            BarGroup({ child: BarClock() }),
+            BatteryModule(),
+        ]
+    })
+});

modules/styling/config/widgets/bar/tray.js

@@ -0,0 +1,89 @@
+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({
+    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'])
+    ,
+    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: 'margin-right-5 spacing-h-15',
+        // attribute: {
+        //     items: new Map(),
+        //     addItem: (box, item) => {
+        //         if (!item) return;
+        //         console.log('init item:', item)
+
+        //         item.menu.className = 'menu';
+        //         if (box.attribute.items.has(item.id) || !item)
+        //             return;
+        //         const widget = SysTrayItem(item);
+        //         box.attribute.items.set(item.id, widget);
+        //         box.add(widget);
+        //         box.show_all();
+        //     },
+        //     onAdded: (box, id) => {
+        //         console.log('supposed to add', id)
+        //         const item = SystemTray.getItem(id);
+        //         if (!item) return;
+        //         console.log('which is', box.attribute.items.get(id))
+
+        //         item.menu.className = 'menu';
+        //         if (box.attribute.items.has(id) || !item)
+        //             return;
+        //         const widget = SysTrayItem(item);
+        //         box.attribute.items.set(id, widget);
+        //         box.add(widget);
+        //         box.show_all();
+        //     },
+        //     onRemoved: (box, id) => {
+        //         console.log('supposed to remove', id)
+        //         if (!box.attribute.items.has(id)) return;
+        //         console.log('which is', box.attribute.items.get(id))
+        //         box.attribute.items.get(id).destroy();
+        //         box.attribute.items.delete(id);
+        //     },
+        // },
+        // setup: (self) => {
+        //     // self.hook(SystemTray, (box, id) => box.attribute.onAdded(box, id), 'added')
+        //     //     .hook(SystemTray, (box, id) => box.attribute.onRemoved(box, id), 'removed');
+        //     // SystemTray.items.forEach(item => self.attribute.addItem(self, item));
+        //     // self.chidren = SystemTray.items.map(item => SysTrayItem(item));
+        //     console.log(SystemTray.items.map(item => SysTrayItem(item)))
+        //     self.chidren = SystemTray.items.map(item => SysTrayItem(item));
+
+        //     self.show_all();
+        // },
+        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: revealerDuration,
+        child: trayContent,
+    });
+    return Box({
+        ...props,
+        children: [trayRevealer],
+    });
+}

modules/styling/config/widgets/bar/workspaces_hyprland.js

@@ -0,0 +1,189 @@
+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 NUM_OF_WORKSPACES_SHOWN = 10; // Limit = 53 I think
+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: 90ms 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) * NUM_OF_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) * NUM_OF_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.sendMessage(`dispatch workspace -1`),
+    onScrollDown: () => Hyprland.sendMessage(`dispatch workspace +1`),
+    onMiddleClickRelease: () => App.toggleWindow('overview'),
+    onSecondaryClickRelease: () => App.toggleWindow('osk'),
+    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(NUM_OF_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 * NUM_OF_WORKSPACES_SHOWN / widgetWidth);
+            Utils.execAsync([`${App.configDir}/scripts/hyprland/workspace_action.sh`, 'workspace', `${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 * NUM_OF_WORKSPACES_PER_GROUP / widgetWidth) + self.attribute.ws_group * NUM_OF_WORKSPACES_PER_GROUP;
+            // Hyprland.sendMessage(`dispatch workspace ${wsId}`);
+            const wsId = Math.ceil(cursorX * NUM_OF_WORKSPACES_SHOWN / widgetWidth);
+            Utils.execAsync([`${App.configDir}/scripts/hyprland/workspace_action.sh`, 'workspace', `${wsId}`]);
+        })
+        self.on('button-release-event', (self) => self.attribute.clicked = false);
+    }
+})

modules/styling/config/widgets/bar/workspaces_sway.js

@@ -0,0 +1,184 @@
+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 NUM_OF_WORKSPACES = 10;
+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 * NUM_OF_WORKSPACES / 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 * NUM_OF_WORKSPACES / widgetWidth);
+            switchToWorkspace(wsId);
+        })
+        self.on('button-release-event', (self) => self.attribute.clicked = false);
+    }
+});

modules/styling/config/widgets/cheatsheet/keybinds.js

@@ -0,0 +1,60 @@
+import Widget from 'resource:///com/github/Aylur/ags/widget.js';
+import { keybindList } from "../../data/keybinds.js";
+
+export const Keybinds = () => Widget.Box({
+    vertical: false,
+    className: "spacing-h-15",
+    homogeneous: true,
+    children: keybindList.map((group, i) => Widget.Box({ // Columns
+        vertical: true,
+        className: "spacing-v-15",
+        children: group.map((category, i) => Widget.Box({ // Categories
+            vertical: true,
+            className: "spacing-v-15",
+            children: [
+                Widget.Box({ // Category header
+                    vertical: false,
+                    className: "spacing-h-10",
+                    children: [
+                        Widget.Label({
+                            xalign: 0,
+                            className: "icon-material txt txt-larger",
+                            label: category.icon,
+                        }),
+                        Widget.Label({
+                            xalign: 0,
+                            className: "cheatsheet-category-title txt",
+                            label: category.name,
+                        }),
+                    ]
+                }),
+                Widget.Box({
+                    vertical: false,
+                    className: "spacing-h-10",
+                    children: [
+                        Widget.Box({ // Keys
+                            vertical: true,
+                            homogeneous: true,
+                            children: category.binds.map((keybinds, i) => Widget.Box({ // Binds
+                                vertical: false,
+                                children: keybinds.keys.map((key, i) => Widget.Label({ // Specific keys
+                                    className: `${['OR', '+'].includes(key) ? 'cheatsheet-key-notkey' : 'cheatsheet-key'} txt-small`,
+                                    label: key,
+                                }))
+                            }))
+                        }),
+                        Widget.Box({ // Actions
+                            vertical: true,
+                            homogeneous: true,
+                            children: category.binds.map((keybinds, i) => Widget.Label({ // Binds
+                                xalign: 0,
+                                label: keybinds.action,
+                                className: "txt chearsheet-action txt-small",
+                            }))
+                        })
+                    ]
+                })
+            ]
+        }))
+    })),
+});

modules/styling/config/widgets/cheatsheet/main.js

@@ -0,0 +1,91 @@
+const { Gdk, Gtk } = imports.gi;
+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";
+
+const cheatsheetHeader = () => Widget.CenterBox({
+    vertical: false,
+    startWidget: Widget.Box({}),
+    centerWidget: Widget.Box({
+        vertical: true,
+        className: "spacing-h-15",
+        children: [
+            Widget.Box({
+                hpack: 'center',
+                className: 'spacing-h-5',
+                children: [
+                    Widget.Label({
+                        hpack: 'center',
+                        css: 'margin-right: 0.682rem;',
+                        className: 'txt-title txt',
+                        label: 'Cheat sheet',
+                    }),
+                    Widget.Label({
+                        vpack: 'center',
+                        className: "cheatsheet-key txt-small",
+                        label: "",
+                    }),
+                    Widget.Label({
+                        vpack: 'center',
+                        className: "cheatsheet-key-notkey txt-small",
+                        label: "+",
+                    }),
+                    Widget.Label({
+                        vpack: 'center',
+                        className: "cheatsheet-key txt-small",
+                        label: "/",
+                    })
+                ]
+            }),
+            Widget.Label({
+                useMarkup: true,
+                selectable: true,
+                justify: Gtk.Justification.CENTER,
+                className: 'txt-small txt',
+                label: 'Sheet data stored in <tt>~/.config/ags/data/keybinds.js</tt>\nChange keybinds in <tt>~/.config/hypr/keybinds.conf</tt>'
+            }),
+        ]
+    }),
+    endWidget: Widget.Button({
+        vpack: 'start',
+        hpack: 'end',
+        className: "cheatsheet-closebtn icon-material txt txt-hugeass",
+        onClicked: () => {
+            App.toggleWindow('cheatsheet');
+        },
+        child: Widget.Label({
+            className: 'icon-material txt txt-hugeass',
+            label: 'close'
+        }),
+        setup: setupCursorHover,
+    }),
+});
+
+const clickOutsideToClose = Widget.EventBox({
+    onPrimaryClick: () => App.closeWindow('cheatsheet'),
+    onSecondaryClick: () => App.closeWindow('cheatsheet'),
+    onMiddleClick: () => App.closeWindow('cheatsheet'),
+});
+
+export default () => Widget.Window({
+    name: 'cheatsheet',
+    exclusivity: 'ignore',
+    keymode: 'exclusive',
+    popup: true,
+    visible: false,
+    child: Widget.Box({
+        vertical: true,
+        children: [
+            clickOutsideToClose,
+            Widget.Box({
+                vertical: true,
+                className: "cheatsheet-bg spacing-v-15",
+                children: [
+                    cheatsheetHeader(),
+                    Keybinds(),
+                ]
+            }),
+        ],
+    })
+});

modules/styling/config/widgets/desktopbackground/main.js

@@ -0,0 +1,24 @@
+import Widget from 'resource:///com/github/Aylur/ags/widget.js';
+
+import WallpaperImage from './wallpaper.js';
+import TimeAndLaunchesWidget from './timeandlaunches.js'
+import SystemWidget from './system.js'
+
+export default (monitor) => Widget.Window({
+    name: `desktopbackground${monitor}`,
+    // anchor: ['top', 'bottom', 'left', 'right'],
+    layer: 'background',
+    exclusivity: 'ignore',
+    visible: true,
+    // child: WallpaperImage(monitor),
+    child: Widget.Overlay({
+        child: WallpaperImage(monitor),
+        overlays: [
+            TimeAndLaunchesWidget(),
+            SystemWidget(),
+        ],
+        setup: (self) => {
+            self.set_overlay_pass_through(self.get_children()[1], true);
+        },
+    }),
+});

modules/styling/config/widgets/desktopbackground/system.js

@@ -0,0 +1,161 @@
+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'
+import { MaterialIcon } from '../../lib/materialicon.js';
+
+const ResourceValue = (name, icon, interval, valueUpdateCmd, displayFunc, props = {}) => Box({
+    ...props,
+    className: 'bg-system-bg txt',
+    children: [
+        Revealer({
+            transition: 'slide_left',
+            transitionDuration: 200,
+            child: Box({
+                vpack: 'center',
+                vertical: true,
+                className: 'margin-right-15',
+                children: [
+                    Label({
+                        xalign: 1,
+                        className: 'txt-small txt',
+                        label: `${name}`,
+                    }),
+                    Label({
+                        xalign: 1,
+                        className: 'titlefont txt-norm txt-onSecondaryContainer',
+                        setup: (self) => self
+                            .poll(interval, (label) => displayFunc(label))
+                        ,
+                    })
+                ]
+            })
+        }),
+        Overlay({
+            child: AnimatedCircProg({
+                className: 'bg-system-circprog',
+                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'),
+            ],
+            setup: self => self.set_overlay_pass_through(self.get_children()[1], true),
+        }),
+    ]
+})
+
+const resources = Box({
+    vpack: 'fill',
+    vertical: true,
+    className: 'spacing-v-15',
+    children: [
+        ResourceValue('Memory', 'memory', 10000, `free | awk '/^Mem/ {printf("%.2f\\n", ($3/$2) * 100)}'`,
+            (label) => {
+                execAsync(['bash', '-c', `free -h | awk '/^Mem/ {print $3 " / " $2}' | sed 's/Gi/Gib/g'`])
+                    .then((output) => {
+                        label.label = `${output}`
+                    }).catch(print);
+            }, { hpack: 'end' }),
+        ResourceValue('Swap', 'swap_horiz', 10000, `free | awk '/^Swap/ {if ($2 > 0) printf("%.2f\\n", ($3/$2) * 100); else print "0";}'`,
+            (label) => {
+                execAsync(['bash', '-c', `free -h | awk '/^Swap/ {if ($2 != "0") print $3 " / " $2; else print "No swap"}' | sed 's/Gi/Gib/g'`])
+                    .then((output) => {
+                        label.label = `${output}`
+                    }).catch(print);
+            }, { hpack: 'end' }),
+        ResourceValue('Disk space', 'hard_drive_2', 3600000, `echo $(df --output=pcent / | tr -dc '0-9')`,
+            (label) => {
+                execAsync(['bash', '-c', `df -h --output=avail / | awk 'NR==2{print $1}'`])
+                    .then((output) => {
+                        label.label = `${output} available`
+                    }).catch(print);
+            }, { hpack: 'end' }),
+    ]
+});
+
+const distroAndVersion = Box({
+    vertical: true,
+    children: [
+        Box({
+            hpack: 'end',
+            children: [
+                Label({
+                    className: 'bg-distro-txt',
+                    xalign: 0,
+                    label: 'Hyping on ',
+                }),
+                Label({
+                    className: 'bg-distro-name',
+                    xalign: 0,
+                    label: '<distro>',
+                    setup: (label) => {
+                        execAsync([`grep`, `-oP`, `PRETTY_NAME="\\K[^"]+`, `/etc/os-release`]).then(distro => {
+                            label.label = distro;
+                        }).catch(print);
+                    },
+                }),
+            ]
+        }),
+        Box({
+            hpack: 'end',
+            children: [
+                Label({
+                    className: 'bg-distro-txt',
+                    xalign: 0,
+                    label: 'with ',
+                }),
+                Label({
+                    className: 'bg-distro-name',
+                    xalign: 0,
+                    label: 'An environment idk',
+                    setup: (label) => {
+                        // hyprctl will return unsuccessfully if Hyprland isn't running
+                        execAsync([`bash`, `-c`, `hyprctl version | grep -oP "Tag: v\\K\\d+\\.\\d+\\.\\d+"`]).then(version => {
+                            label.label = `Hyprland ${version}`;
+                        }).catch(() => execAsync([`bash`, `-c`, `sway -v | cut -d'-' -f1 | sed 's/sway version /v/'`]).then(version => {
+                            label.label = `Sway ${version}`;
+                        }).catch(print));
+                    },
+                }),
+            ]
+        })
+    ]
+})
+
+export default () => Box({
+    hpack: 'end',
+    vpack: 'end',
+    children: [
+        EventBox({
+            child: Box({
+                hpack: 'end',
+                vpack: 'end',
+                className: 'bg-distro-box spacing-v-20',
+                vertical: true,
+                children: [
+                    resources,
+                    distroAndVersion,
+                ]
+            }),
+            onPrimaryClickRelease: () => {
+                const kids = resources.get_children();
+                for (let i = 0; i < kids.length; i++) {
+                    const child = kids[i];
+                    const firstChild = child.get_children()[0];
+                    firstChild.revealChild = !firstChild.revealChild;
+                }
+
+            },
+        })
+    ],
+})
+
+
+

modules/styling/config/widgets/desktopbackground/timeandlaunches.js

@@ -0,0 +1,75 @@
+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;
+import { setupCursorHover } from '../../lib/cursorhover.js';
+
+import { quickLaunchItems } from '../../data/quicklaunches.js'
+
+const TimeAndDate = () => Box({
+    vertical: true,
+    className: 'spacing-v--5',
+    children: [
+        Label({
+            className: 'bg-time-clock',
+            xalign: 0,
+            label: GLib.DateTime.new_now_local().format("%H:%M"),
+            setup: (self) => self.poll(5000, label => {
+                label.label = GLib.DateTime.new_now_local().format("%H:%M");
+            }),
+        }),
+        Label({
+            className: 'bg-time-date',
+            xalign: 0,
+            label: GLib.DateTime.new_now_local().format("%A, %d/%m/%Y"),
+            setup: (self) => self.poll(5000, label => {
+                label.label = GLib.DateTime.new_now_local().format("%A, %d/%m/%Y");
+            }),
+        }),
+    ]
+})
+
+const QuickLaunches = () => Box({
+    vertical: true,
+    className: 'spacing-v-10',
+    children: [
+        Label({
+            xalign: 0,
+            className: 'bg-quicklaunch-title',
+            label: 'Quick Launches',
+        }),
+        Box({
+            hpack: 'start',
+            className: 'spacing-h-5',
+            children: quickLaunchItems.map((item, i) => Button({
+                onClicked: () => {
+                    execAsync(['bash', '-c', `${item["command"]}`]).catch(print);
+                },
+                className: 'bg-quicklaunch-btn',
+                child: Label({
+                    label: `${item["name"]}`,
+                }),
+                setup: (self) => {
+                    setupCursorHover(self);
+                }
+            })),
+        })
+    ]
+})
+
+export default () => Box({
+    hpack: 'start',
+    vpack: 'end',
+    vertical: true,
+    className: 'bg-time-box spacing-h--10',
+    children: [
+        TimeAndDate(),
+        // QuickLaunches(),
+    ],
+})
+

modules/styling/config/widgets/desktopbackground/wallpaper.js

@@ -0,0 +1,115 @@
+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';
+import { SCREEN_HEIGHT, SCREEN_WIDTH } from '../../imports.js';
+const { exec, execAsync } = Utils;
+const { Box, Button, Label, Stack } = Widget;
+import Hyprland from 'resource:///com/github/Aylur/ags/service/hyprland.js';
+
+import Wallpaper from '../../services/wallpaper.js';
+import { setupCursorHover } from '../../lib/cursorhover.js';
+
+const SWITCHWALL_SCRIPT_PATH = `${App.configDir}/scripts/color_generation/switchwall.sh`;
+const WALLPAPER_ZOOM_SCALE = 1.25; // For scrolling when we switch workspace
+const MAX_WORKSPACES = 10;
+
+const WALLPAPER_OFFSCREEN_X = (WALLPAPER_ZOOM_SCALE - 1) * SCREEN_WIDTH;
+const WALLPAPER_OFFSCREEN_Y = (WALLPAPER_ZOOM_SCALE - 1) * SCREEN_HEIGHT;
+
+function clamp(x, min, max) {
+    return Math.min(Math.max(x, min), max);
+}
+
+export default (monitor = 0) => {
+    const wallpaperImage = Widget.DrawingArea({
+        attribute: {
+            pixbuf: undefined,
+            workspace: 1,
+            sideleft: 0,
+            sideright: 0,
+            updatePos: (self) => {
+                self.setCss(`font-size: ${self.attribute.workspace - self.attribute.sideleft + self.attribute.sideright}px;`)
+            },
+        },
+        className: 'bg-wallpaper-transition',
+        setup: (self) => {
+            self.set_size_request(SCREEN_WIDTH, SCREEN_HEIGHT);
+            self
+                // TODO: reduced updates using timeouts to reduce lag
+                // .hook(Hyprland.active.workspace, (self) => {
+                //     self.attribute.workspace = Hyprland.active.workspace.id
+                //     self.attribute.updatePos(self);
+                // })
+                // .hook(App, (box, name, visible) => { // Update on open
+                //     if (self.attribute[name] === undefined) return;
+                //     self.attribute[name] = (visible ? 1 : 0);
+                //     self.attribute.updatePos(self);
+                // })
+                .on('draw', (self, cr) => {
+                    if (!self.attribute.pixbuf) return;
+                    const styleContext = self.get_style_context();
+                    const workspace = styleContext.get_property('font-size', Gtk.StateFlags.NORMAL);
+                    // Draw
+                    Gdk.cairo_set_source_pixbuf(cr, self.attribute.pixbuf,
+                        -(WALLPAPER_OFFSCREEN_X / (MAX_WORKSPACES + 1) * (clamp(workspace, 0, MAX_WORKSPACES + 1))),
+                        -WALLPAPER_OFFSCREEN_Y / 2);
+                    cr.paint();
+                })
+                .hook(Wallpaper, (self) => {
+                    const wallPath = Wallpaper.get(monitor);
+                    if (!wallPath || wallPath === "") return;
+                    self.attribute.pixbuf = GdkPixbuf.Pixbuf.new_from_file(wallPath);
+
+                    const scale_x = SCREEN_WIDTH * WALLPAPER_ZOOM_SCALE / self.attribute.pixbuf.get_width();
+                    const scale_y = SCREEN_HEIGHT * WALLPAPER_ZOOM_SCALE / self.attribute.pixbuf.get_height();
+                    const scale_factor = Math.max(scale_x, scale_y);
+
+                    self.attribute.pixbuf = self.attribute.pixbuf.scale_simple(
+                        Math.round(self.attribute.pixbuf.get_width() * scale_factor),
+                        Math.round(self.attribute.pixbuf.get_height() * scale_factor),
+                        GdkPixbuf.InterpType.BILINEAR
+                    );
+                    self.queue_draw();
+                }, 'updated');
+            ;
+        }
+        ,
+    });
+    const wallpaperPrompt = Box({
+        hpack: 'center',
+        vpack: 'center',
+        vertical: true,
+        className: 'spacing-v-10',
+        children: [
+            Label({
+                hpack: 'center',
+                justification: 'center',
+                className: 'txt-large',
+                label: `No wallpaper loaded.\nAn image ≥ ${SCREEN_WIDTH * WALLPAPER_ZOOM_SCALE} × ${SCREEN_HEIGHT * WALLPAPER_ZOOM_SCALE} is recommended.`,
+            }),
+            Button({
+                hpack: 'center',
+                className: 'btn-primary',
+                label: `Select one`,
+                setup: setupCursorHover,
+                onClicked: (self) => Utils.execAsync([SWITCHWALL_SCRIPT_PATH]),
+            }),
+        ]
+    });
+    const stack = Stack({
+        transition: 'crossfade',
+        transitionDuration: 180,
+        children: {
+            'image': wallpaperImage,
+            'prompt': wallpaperPrompt,
+        },
+        setup: (self) => self
+            .hook(Wallpaper, (self) => {
+                const wallPath = Wallpaper.get(monitor);
+                self.shown = ((wallPath && wallPath != "") ? 'image' : 'prompt');
+            }, 'updated')
+        ,
+    })
+    return stack;
+    // return wallpaperImage;
+}

modules/styling/config/widgets/dock/dock.js

@@ -0,0 +1,259 @@
+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, Revealer } = Widget;
+import { setupCursorHover } from "../../lib/cursorhover.js";
+
+const ANIMATION_TIME = 150;
+const pinnedApps = [
+    'firefox',
+    'org.gnome.Nautilus',
+];
+
+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;
+    }
+
+    return str;
+}
+
+const focus = ({ address }) => Utils.execAsync(`hyprctl dispatch focuswindow address:${address}`);
+
+const DockSeparator = (props = {}) => Box({
+    ...props,
+    className: 'dock-separator',
+})
+
+const AppButton = ({ icon, ...rest }) => Widget.Revealer({
+    attribute: {
+        'workspace': 0
+    },
+    revealChild: false,
+    transition: 'slide_right',
+    transitionDuration: ANIMATION_TIME,
+    child: Widget.Button({
+        ...rest,
+        className: 'dock-app-btn',
+        child: Widget.Box({
+            child: Widget.Overlay({
+                child: Widget.Box({
+                    homogeneous: true,
+                    className: 'dock-app-icon',
+                    child: Widget.Icon({
+                        icon: icon,
+                    }),
+                }),
+                overlays: [Widget.Box({
+                    class_name: 'indicator',
+                    vpack: 'end',
+                    hpack: 'center',
+                })],
+            }),
+        }),
+        setup: (button) => {
+            setupCursorHover(button);
+        }
+    })
+});
+
+const Taskbar = () => Widget.Box({
+    className: 'dock-apps',
+    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;
+                const appClass = substitute(client.class);
+                for (const appName of pinnedApps) {
+                    if (appClass.includes(appName.toLowerCase()))
+                        return null;
+                }
+                const newButton = AppButton({
+                    icon: appClass,
+                    tooltipText: `${client.title} (${appClass})`,
+                    onClicked: () => focus(client),
+                });
+                newButton.attribute.workspace = client.workspace.id;
+                newButton.revealChild = true;
+                box.attribute.map.set(client.address, newButton);
+            }
+            box.children = Array.from(box.attribute.map.values());
+        },
+        'add': (box, address) => {
+            if (!address) { // First active emit is undefined
+                box.attribute.update(box);
+                return;
+            }
+            const newClient = Hyprland.clients.find(client => {
+                return client.address == address;
+            });
+            const appClass = substitute(newClient.class);
+
+            const newButton = AppButton({
+                icon: appClass,
+                tooltipText: `${newClient.title} (${appClass})`,
+                onClicked: () => focus(newClient),
+            })
+            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) => {
+            if (!address) return;
+
+            const removedButton = box.attribute.map.get(address);
+            if (!removedButton) return;
+            removedButton.revealChild = false;
+
+            Utils.timeout(ANIMATION_TIME, () => {
+                removedButton.destroy();
+                box.attribute.map.delete(address);
+                box.children = Array.from(box.attribute.map.values());
+            })
+        },
+    },
+    setup: (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));
+    },
+});
+
+const PinnedApps = () => Widget.Box({
+    class_name: 'dock-apps',
+    homogeneous: true,
+    children: pinnedApps
+        .map(term => ({ app: Applications.query(term)?.[0], term }))
+        .filter(({ app }) => app)
+        .map(({ app, term = true }) => {
+            const newButton = AppButton({
+                icon: app.icon_name,
+                onClicked: () => {
+                    for (const client of Hyprland.clients) {
+                        if (client.class.toLowerCase().includes(term))
+                            return focus(client);
+                    }
+
+                    app.launch();
+                },
+                onMiddleClick: () => app.launch(),
+                tooltipText: app.name,
+                setup: (self) => {
+                    self.revealChild = true;
+                    self.hook(Hyprland, button => {
+                        const running = Hyprland.clients
+                            .find(client => client.class.toLowerCase().includes(term)) || false;
+
+                        button.toggleClassName('notrunning', !running);
+                        button.toggleClassName('focused', Hyprland.active.client.address == running.address);
+                        button.set_tooltip_text(running ? running.title : app.name);
+                    }, 'notify::clients')
+                },
+            })
+            newButton.revealChild = true;
+            return newButton;
+        }),
+});
+
+export default () => {
+    const dockContent = Box({
+        className: 'dock-bg spacing-h-5',
+        children: [
+            PinnedApps(),
+            DockSeparator(),
+            Taskbar(),
+        ]
+    })
+    const dockRevealer = Revealer({
+        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()
+                ]
+                const dockAt = [
+                    SCREEN_WIDTH / 2 - dockSize[0] / 2,
+                    SCREEN_HEIGHT - dockSize[1],
+                ];
+                const dockLeft = dockAt[0];
+                const dockRight = dockAt[0] + dockSize[0];
+                const dockTop = dockAt[1];
+                const dockBottom = dockAt[1] + dockSize[1];
+
+                const currentWorkspace = Hyprland.active.workspace.id;
+                var toReveal = true;
+                const hyprlandClients = JSON.parse(exec('hyprctl clients -j'));
+                for (const index in hyprlandClients) {
+                    const client = hyprlandClients[index];
+                    const clientLeft = client.at[0];
+                    const clientRight = client.at[0] + client.size[0];
+                    const clientTop = client.at[1];
+                    const clientBottom = client.at[1] + client.size[1];
+
+                    if (client.workspace.id == currentWorkspace) {
+                        if (
+                            clientLeft < dockRight &&
+                            clientRight > dockLeft &&
+                            clientTop < dockBottom &&
+                            clientBottom > dockTop
+                        ) {
+                            self.revealChild = false;
+                            return;
+                        }
+                    }
+                }
+                self.revealChild = true;
+            }
+        },
+        revealChild: false,
+        transition: 'slide_up',
+        transitionDuration: 200,
+        child: dockContent,
+        // setup: (self) => self
+        //     .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({
+        onHover: () => {
+            dockRevealer.revealChild = true;
+        },
+        onHoverLost: () => {
+            if (Hyprland.active.client.attribute.class.length === 0) return;
+            dockRevealer.revealChild = false;
+        },
+        child: Box({
+            homogeneous: true,
+            css: 'min-height: 2px;',
+            children: [
+                dockRevealer,
+            ]
+        }),
+    })
+}

modules/styling/config/widgets/dock/main.js

@@ -0,0 +1,11 @@
+import Widget from 'resource:///com/github/Aylur/ags/widget.js';
+import Dock from './dock.js';
+
+export default () => Widget.Window({
+    name: 'dock',
+    layer: 'bottom',
+    anchor: ['bottom'],
+    exclusivity: 'normal',
+    visible: true,
+    child: Dock(),
+});

modules/styling/config/widgets/indicators/colorscheme.js

@@ -0,0 +1,51 @@
+import Widget from 'resource:///com/github/Aylur/ags/widget.js';
+
+const { Box, EventBox, Icon, Scrollable, Label, Button, Revealer } = Widget;
+import { showColorScheme } from '../../variables.js';
+
+const ColorBox = ({
+    name = 'Color',
+    ...rest
+}) => Box({
+    ...rest,
+    homogeneous: true,
+    children: [
+        Label({
+            label: `${name}`,
+        })
+    ]
+})
+
+const ColorschemeContent = () => Box({
+    className: 'osd-colorscheme spacing-v-5',
+    vertical: true,
+    hpack: 'center',
+    children: [
+        Label({
+            xalign: 0,
+            className: 'txt-norm titlefont txt',
+            label: 'Colorscheme',
+        }),
+        Box({
+            className: 'spacing-h-5',
+            children: [
+                ColorBox({ name: 'P', className: 'osd-color osd-color-primary' }),
+                ColorBox({ name: 'P-c', className: 'osd-color osd-color-primaryContainer' }),
+                ColorBox({ name: 'S', className: 'osd-color osd-color-secondary' }),
+                ColorBox({ name: 'S-c', className: 'osd-color osd-color-secondaryContainer' }),
+                ColorBox({ name: 'Sf-v', className: 'osd-color osd-color-surfaceVariant' }),
+                ColorBox({ name: 'Sf', className: 'osd-color osd-color-surface' }),
+                ColorBox({ name: 'Bg', className: 'osd-color osd-color-background' }),
+            ]
+        })
+    ]
+});
+
+export default () => Widget.Revealer({
+    transition: 'slide_down',
+    transitionDuration: 200,
+    child: ColorschemeContent(),
+    setup: (self) => self.hook(showColorScheme, (revealer) => {
+        revealer.revealChild = showColorScheme.value;
+    }),
+})

modules/styling/config/widgets/indicators/indicatorvalues.js

@@ -0,0 +1,87 @@
+// This file is for brightness/volume indicators
+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 } = Widget;
+import { MarginRevealer } from '../../lib/advancedwidgets.js';
+import Brightness from '../../services/brightness.js';
+import Indicator from '../../services/indicator.js';
+
+const OsdValue = (name, labelSetup, progressSetup, props = {}) => {
+    const valueName = Label({
+        xalign: 0, yalign: 0, hexpand: true,
+        className: 'osd-label',
+        label: `${name}`,
+    });
+    const valueNumber = Label({
+        hexpand: false, className: 'osd-value-txt',
+        setup: labelSetup,
+    });
+    return Box({ // Volume
+        ...props,
+        vertical: true,
+        hexpand: true,
+        className: 'osd-bg osd-value',
+        attribute: {
+            'disable': () => {
+                valueNumber.label = '󰖭';
+            }
+        },
+        children: [
+            Box({
+                vexpand: true,
+                children: [
+                    valueName,
+                    valueNumber,
+                ]
+            }),
+            ProgressBar({
+                className: 'osd-progress',
+                hexpand: true,
+                vertical: false,
+                setup: progressSetup,
+            })
+        ],
+    });
+}
+
+export default () => {
+    const brightnessIndicator = OsdValue('Brightness',
+        (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',
+        (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;
+        }),
+    );
+    return MarginRevealer({
+        transition: 'slide_down',
+        showClass: 'osd-show',
+        hideClass: 'osd-hide',
+        extraSetup: (self) => self
+            .hook(Indicator, (revealer, value) => {
+                if (value > -1) revealer.attribute.show();
+                else revealer.attribute.hide();
+            }, 'popup')
+        ,
+        child: Box({
+            hpack: 'center',
+            vertical: false,
+            className: 'spacing-h--10',
+            children: [
+                brightnessIndicator,
+                volumeIndicator,
+            ]
+        })
+    });
+}

modules/styling/config/widgets/indicators/main.js

@@ -0,0 +1,33 @@
+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';
+import ColorScheme from './colorscheme.js';
+import NotificationPopups from './notificationpopups.js';
+
+export default (monitor = 0) => Widget.Window({
+    name: `indicator${monitor}`,
+    monitor,
+    className: 'indicator',
+    layer: 'overlay',
+    // exclusivity: 'ignore',
+    visible: true,
+    anchor: ['top'],
+    child: Widget.EventBox({
+        onHover: () => { //make the widget hide when hovering
+            Indicator.popup(-1);
+        },
+        child: Widget.Box({
+            vertical: true,
+            className: 'osd-window',
+            css: 'min-height: 2px;',
+            children: [
+                IndicatorValues(),
+                MusicControls(),
+                NotificationPopups(),
+                ColorScheme(),
+            ]
+        })
+    }),
+});
+

modules/styling/config/widgets/indicators/musiccontrols.js

@@ -0,0 +1,458 @@
+const { Gdk, GdkPixbuf, 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 { 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/advancedwidgets.js';
+import { AnimatedCircProg } from "../../lib/animatedcircularprogress.js";
+import { MaterialIcon } from '../../lib/materialicon.js';
+import { showMusicControls } from '../../variables.js';
+
+function expandTilde(path) {
+    if (path.startsWith('~')) {
+        return GLib.get_home_dir() + path.slice(1);
+    } else {
+        return path;
+    }
+}
+
+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';
+var lastCoverPath = '';
+
+function isRealPlayer(player) {
+    return (
+        !player.busName.startsWith('org.mpris.MediaPlayer2.firefox') && // Firefox mpris dbus is useless
+        !player.busName.startsWith('org.mpris.MediaPlayer2.playerctld') && // Doesn't have cover art
+        !player.busName.endsWith('.mpd') // Non-instance mpd bus
+    );
+}
+
+export const getPlayer = (name = PREFERRED_PLAYER) => Mpris.getPlayer(name) || Mpris.players[0] || null;
+function lengthStr(length) {
+    const min = Math.floor(length / 60);
+    const sec = Math.floor(length % 60);
+    const sec0 = sec < 10 ? '0' : '';
+    return `${min}:${sec0}${sec}`;
+}
+function fileExists(filePath) {
+    let file = Gio.File.new_for_path(filePath);
+    return file.query_exists(null);
+}
+
+function detectMediaSource(link) {
+    if (link.startsWith("file://")) {
+        if (link.includes('firefox-mpris'))
+            return '󰈹 Firefox'
+        return "󰈣 File";
+    }
+    let url = link.replace(/(^\w+:|^)\/\//, '');
+    let domain = url.match(/(?:[a-z]+\.)?([a-z]+\.[a-z]+)/i)[1];
+    if (domain == 'ytimg.com') return '󰗃 Youtube';
+    if (domain == 'discordapp.net') return '󰙯 Discord';
+    if (domain == 'sndcdn.com') return '󰓀 SoundCloud';
+    return domain;
+}
+
+const DEFAULT_MUSIC_FONT = 'Gabarito, sans-serif';
+function getTrackfont(player) {
+    const title = player.trackTitle;
+    const artists = player.trackArtists.join(' ');
+    if (artists.includes('TANO*C') || artists.includes('USAO') || artists.includes('Kobaryo'))
+        return 'Chakra Petch'; // Rigid square replacement
+    if (title.includes('東方'))
+        return 'Crimson Text, serif'; // Serif for Touhou stuff
+    return DEFAULT_MUSIC_FONT;
+}
+function trimTrackTitle(title) {
+    if (!title) return '';
+    const cleanRegexes = [
+        /【[^】]*】/,         // Touhou n weeb stuff
+        /\[FREE DOWNLOAD\]/, // F-777
+    ];
+    cleanRegexes.forEach((expr) => title.replace(expr, ''));
+    return title;
+}
+
+const TrackProgress = ({ player, ...rest }) => {
+    const _updateProgress = (circprog) => {
+        // const player = Mpris.getPlayer();
+        if (!player) return;
+        // Set circular progress (see definition of AnimatedCircProg for explanation)
+        circprog.css = `font-size: ${Math.max(player.position / player.length * 100, 0)}px;`
+    }
+    return AnimatedCircProg({
+        ...rest,
+        className: 'osd-music-circprog',
+        vpack: 'center',
+        extraSetup: (self) => self
+            .hook(Mpris, _updateProgress)
+            .poll(3000, _updateProgress)
+        ,
+    })
+}
+
+const TrackTitle = ({ player, ...rest }) => Label({
+    ...rest,
+    label: 'No music playing',
+    xalign: 0,
+    truncate: 'end',
+    // wrap: true,
+    className: 'osd-music-title',
+    setup: (self) => self.hook(player, (self) => {
+        // Player name
+        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'),
+});
+
+const TrackArtists = ({ player, ...rest }) => Label({
+    ...rest,
+    xalign: 0,
+    className: 'osd-music-artists',
+    truncate: 'end',
+    setup: (self) => self.hook(player, (self) => {
+        self.label = player.trackArtists.length > 0 ? player.trackArtists.join(', ') : '';
+    }, 'notify::track-artists'),
+})
+
+const CoverArt = ({ player, ...rest }) => {
+    const fallbackCoverArt = Box({ // Fallback
+        className: 'osd-music-cover-fallback',
+        homogeneous: true,
+        children: [Label({
+            className: 'icon-material txt-gigantic txt-thin',
+            label: 'music_note',
+        })]
+    });
+    const coverArtDrawingArea = Widget.DrawingArea({ className: 'osd-music-cover-art' });
+    const coverArtDrawingAreaStyleContext = coverArtDrawingArea.get_style_context();
+    const realCoverArt = Box({
+        className: 'osd-music-cover-art',
+        homogeneous: true,
+        children: [coverArtDrawingArea],
+        attribute: {
+            'pixbuf': null,
+            'showImage': (self, imagePath) => {
+                const borderRadius = coverArtDrawingAreaStyleContext.get_property('border-radius', Gtk.StateFlags.NORMAL);
+                const frameHeight = coverArtDrawingAreaStyleContext.get_property('min-height', Gtk.StateFlags.NORMAL);
+                const frameWidth = coverArtDrawingAreaStyleContext.get_property('min-width', Gtk.StateFlags.NORMAL);
+                let imageHeight = frameHeight;
+                let imageWidth = frameWidth;
+                // Get image dimensions
+                execAsync(['identify', '-format', '{"w":%w,"h":%h}', imagePath])
+                    .then((output) => {
+                        const imageDimensions = JSON.parse(output);
+                        const imageAspectRatio = imageDimensions.w / imageDimensions.h;
+                        const displayedAspectRatio = imageWidth / imageHeight;
+                        if (imageAspectRatio >= displayedAspectRatio) {
+                            imageWidth = imageHeight * imageAspectRatio;
+                        } else {
+                            imageHeight = imageWidth / imageAspectRatio;
+                        }
+                        // Real stuff
+                        // TODO: fix memory leak(?)
+                        // if (self.attribute.pixbuf) {
+                        //     self.attribute.pixbuf.unref();
+                        //     self.attribute.pixbuf = null;
+                        // }
+                        self.attribute.pixbuf = GdkPixbuf.Pixbuf.new_from_file_at_size(imagePath, imageWidth, imageHeight);
+
+                        coverArtDrawingArea.set_size_request(frameWidth, frameHeight);
+                        coverArtDrawingArea.connect("draw", (widget, cr) => {
+                            // Clip a rounded rectangle area
+                            cr.arc(borderRadius, borderRadius, borderRadius, Math.PI, 1.5 * Math.PI);
+                            cr.arc(frameWidth - borderRadius, borderRadius, borderRadius, 1.5 * Math.PI, 2 * Math.PI);
+                            cr.arc(frameWidth - borderRadius, frameHeight - borderRadius, borderRadius, 0, 0.5 * Math.PI);
+                            cr.arc(borderRadius, frameHeight - borderRadius, borderRadius, 0.5 * Math.PI, Math.PI);
+                            cr.closePath();
+                            cr.clip();
+                            // Paint image as bg, centered
+                            Gdk.cairo_set_source_pixbuf(cr, self.attribute.pixbuf,
+                                frameWidth / 2 - imageWidth / 2,
+                                frameHeight / 2 - imageHeight / 2
+                            );
+                            cr.paint();
+                        });
+                    }).catch(print)
+            },
+            'updateCover': (self) => {
+                // const player = Mpris.getPlayer(); // Maybe no need to re-get player.. can't remember why I had this
+                // Player closed
+                // Note that cover path still remains, so we're checking title
+                if (!player || player.trackTitle == "") {
+                    self.css = `background-image: none;`;
+                    App.applyCss(`${App.configDir}/style.css`);
+                    return;
+                }
+
+                const coverPath = player.coverPath;
+                const stylePath = `${player.coverPath}${lightDark}${COVER_COLORSCHEME_SUFFIX}`;
+                if (player.coverPath == lastCoverPath) { // Since 'notify::cover-path' emits on cover download complete
+                    // Utils.timeout(200, () => { self.css = `background-image: url('${coverPath}');`; });
+                    Utils.timeout(200, () => self.attribute.showImage(self, coverPath));
+                }
+                lastCoverPath = player.coverPath;
+
+                // If a colorscheme has already been generated, skip generation
+                if (fileExists(stylePath)) {
+                    // Utils.timeout(200, () => { self.css = `background-image: url('${coverPath}');`; });
+                    self.attribute.showImage(self, coverPath)
+                    App.applyCss(stylePath);
+                    return;
+                }
+
+                // Generate colors
+                execAsync(['bash', '-c',
+                    `${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(`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}');`;
+                        Utils.timeout(200, () => self.attribute.showImage(self, coverPath));
+                        App.applyCss(`${stylePath}`);
+                    })
+                    .catch(print);
+            },
+        },
+        setup: (self) => self
+            .hook(player, (self) => {
+                self.attribute.updateCover(self);
+            }, 'notify::cover-path')
+        ,
+    });
+    return Box({
+        ...rest,
+        className: 'osd-music-cover',
+        children: [
+            Widget.Overlay({
+                child: fallbackCoverArt,
+                overlays: [realCoverArt],
+            })
+        ],
+    })
+}
+
+const TrackControls = ({ player, ...rest }) => Widget.Revealer({
+    revealChild: false,
+    transition: 'slide_right',
+    transitionDuration: 200,
+    child: Widget.Box({
+        ...rest,
+        vpack: 'center',
+        className: 'osd-music-controls spacing-h-3',
+        children: [
+            Button({
+                className: 'osd-music-controlbtn',
+                onClicked: () => player.previous(),
+                child: Label({
+                    className: 'icon-material osd-music-controlbtn-txt',
+                    label: 'skip_previous',
+                })
+            }),
+            Button({
+                className: 'osd-music-controlbtn',
+                onClicked: () => player.next(),
+                child: Label({
+                    className: 'icon-material osd-music-controlbtn-txt',
+                    label: 'skip_next',
+                })
+            }),
+        ],
+    }),
+    setup: (self) => self.hook(Mpris, (self) => {
+        // const player = Mpris.getPlayer();
+        if (!player)
+            self.revealChild = false;
+        else
+            self.revealChild = true;
+    }, 'notify::play-back-status'),
+});
+
+const TrackSource = ({ player, ...rest }) => Widget.Revealer({
+    revealChild: false,
+    transition: 'slide_left',
+    transitionDuration: 200,
+    child: Widget.Box({
+        ...rest,
+        className: 'osd-music-pill spacing-h-5',
+        homogeneous: true,
+        children: [
+            Label({
+                hpack: 'fill',
+                justification: 'center',
+                className: 'icon-nerd',
+                setup: (self) => self.hook(player, (self) => {
+                    self.label = detectMediaSource(player.trackCoverUrl);
+                }, 'notify::cover-path'),
+            }),
+        ],
+    }),
+    setup: (self) => self.hook(Mpris, (self) => {
+        const mpris = Mpris.getPlayer('');
+        if (!mpris)
+            self.revealChild = false;
+        else
+            self.revealChild = true;
+    }),
+});
+
+const TrackTime = ({ player, ...rest }) => {
+    return Widget.Revealer({
+        revealChild: false,
+        transition: 'slide_left',
+        transitionDuration: 200,
+        child: Widget.Box({
+            ...rest,
+            vpack: 'center',
+            className: 'osd-music-pill spacing-h-5',
+            children: [
+                Label({
+                    setup: (self) => self.poll(1000, (self) => {
+                        // const player = Mpris.getPlayer();
+                        if (!player) return;
+                        self.label = lengthStr(player.position);
+                    }),
+                }),
+                Label({ label: '/' }),
+                Label({
+                    setup: (self) => self.hook(Mpris, (self) => {
+                        // const player = Mpris.getPlayer();
+                        if (!player) return;
+                        self.label = lengthStr(player.length);
+                    }),
+                }),
+            ],
+        }),
+        setup: (self) => self.hook(Mpris, (self) => {
+            if (!player) self.revealChild = false;
+            else self.revealChild = true;
+        }),
+    })
+}
+
+const PlayState = ({ player }) => {
+    var position = 0;
+    const trackCircProg = TrackProgress({ player: player });
+    return Widget.Button({
+        className: 'osd-music-playstate',
+        child: Widget.Overlay({
+            child: trackCircProg,
+            overlays: [
+                Widget.Button({
+                    className: 'osd-music-playstate-btn',
+                    onClicked: () => player.playPause(),
+                    child: Widget.Label({
+                        justification: 'center',
+                        hpack: 'fill',
+                        vpack: 'center',
+                        setup: (self) => self.hook(player, (label) => {
+                            label.label = `${player.playBackStatus == 'Playing' ? 'pause' : 'play_arrow'}`;
+                        }, 'notify::play-back-status'),
+                    }),
+                }),
+            ],
+            passThrough: true,
+        })
+    });
+}
+
+const MusicControlsWidget = (player) => Box({
+    className: 'osd-music spacing-h-20 test',
+    children: [
+        CoverArt({ player: player, vpack: 'center' }),
+        Box({
+            vertical: true,
+            className: 'spacing-v-5 osd-music-info',
+            children: [
+                Box({
+                    vertical: true,
+                    vpack: 'center',
+                    hexpand: true,
+                    children: [
+                        TrackTitle({ player: player }),
+                        TrackArtists({ player: player }),
+                    ]
+                }),
+                Box({ vexpand: true }),
+                Box({
+                    className: 'spacing-h-10',
+                    setup: (box) => {
+                        box.pack_start(TrackControls({ player: player }), false, false, 0);
+                        box.pack_end(PlayState({ player: player }), false, false, 0);
+                        box.pack_end(TrackTime({ player: player }), false, false, 0)
+                        // box.pack_end(TrackSource({ vpack: 'center', player: player }), false, false, 0);
+                    }
+                })
+            ]
+        })
+    ]
+})
+
+export default () => Revealer({
+    transition: 'slide_down',
+    transitionDuration: 150,
+    revealChild: false,
+    child: Box({
+        setup: (self) => self.hook(Mpris, box => {
+            box.children.forEach(child => {
+                child.destroy();
+                child = null;
+            });
+            Mpris.players.forEach((player, i) => {
+                if (isRealPlayer(player)) {
+                    const newInstance = MusicControlsWidget(player);
+                    box.add(newInstance);
+                }
+            });
+        }, 'notify::players'),
+    }),
+    setup: (self) => self.hook(showMusicControls, (revealer) => {
+        revealer.revealChild = showMusicControls.value;
+    }),
+})
+
+// export default () => MarginRevealer({
+//     transition: 'slide_down',
+//     revealChild: false,
+//     showClass: 'osd-show',
+//     hideClass: 'osd-hide',
+//     child: Box({
+//         setup: (self) => self.hook(Mpris, box => {
+//             let foundPlayer = false;
+//             Mpris.players.forEach((player, i) => {
+//                 if (isRealPlayer(player)) {
+//                     foundPlayer = true;
+//                     box.children.forEach(child => {
+//                         child.destroy();
+//                         child = null;
+//                     });
+//                     const newInstance = MusicControlsWidget(player);
+//                     box.children = [newInstance];
+//                 }
+//             });
+
+//             if (!foundPlayer) {
+//                 const children = box.get_children();
+//                 for (let i = 0; i < children.length; i++) {
+//                     const child = children[i];
+//                     child.destroy();
+//                     child = null;
+//                 }
+//                 return;
+//             }
+//         }, 'notify::players'),
+//     }),
+//     setup: (self) => self.hook(showMusicControls, (revealer) => {
+//         if (showMusicControls.value) revealer.attribute.show();
+//         else revealer.attribute.hide();
+//     }),
+// })

modules/styling/config/widgets/indicators/notificationpopups.js

@@ -0,0 +1,45 @@
+// This file is for popup notifications
+import Widget from 'resource:///com/github/Aylur/ags/widget.js';
+import Notifications from 'resource:///com/github/Aylur/ags/service/notifications.js';
+const { Box } = Widget;
+import Notification from '../../lib/notification.js';
+
+export default () => Box({
+    vertical: true,
+    hpack: 'center',
+    className: 'osd-notifs spacing-v-5-revealer',
+    attribute: {
+        'map': new Map(),
+        'dismiss': (box, id, force = false) => {
+            if (!id || !box.attribute.map.has(id))
+                return;
+            const notifWidget = box.attribute.map.get(id);
+            if (notifWidget == null || notifWidget.attribute.hovered && !force)
+                return; // cuz already destroyed
+
+            notifWidget.revealChild = false;
+            notifWidget.attribute.destroyWithAnims();
+            box.attribute.map.delete(id);
+        },
+        'notify': (box, id) => {
+            if (!id || Notifications.dnd) return;
+            if (!Notifications.getNotification(id)) return;
+
+            box.attribute.map.delete(id);
+
+            const notif = Notifications.getNotification(id);
+            const newNotif = Notification({
+                notifObject: notif,
+                isPopup: true,
+            });
+            box.attribute.map.set(id, newNotif);
+            box.pack_end(box.attribute.map.get(id), false, false, 0);
+            box.show_all();
+        },
+    },
+    setup: (self) => self
+        .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')
+    ,
+});

modules/styling/config/widgets/onscreenkeyboard/main.js

@@ -0,0 +1,10 @@
+import PopupWindow from '../../lib/popupwindow.js';
+import OnScreenKeyboard from "./onscreenkeyboard.js";
+
+export default () => PopupWindow({
+    anchor: ['bottom'],
+    name: 'osk',
+    showClassName: 'osk-show',
+    hideClassName: 'osk-hide',
+    child: OnScreenKeyboard(),
+});

modules/styling/config/widgets/onscreenkeyboard/onscreenkeyboard.js

@@ -0,0 +1,260 @@
+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, EventBox, Button, Revealer } = Widget;
+const { execAsync } = Utils;
+import { MaterialIcon } from '../../lib/materialicon.js';
+import { separatorLine } from '../../lib/separator.js';
+import { defaultOskLayout, oskLayouts } from '../../data/keyboardlayouts.js';
+import { setupCursorHoverGrab } from '../../lib/cursorhover.js';
+
+const keyboardLayout = defaultOskLayout;
+const keyboardJson = oskLayouts[keyboardLayout];
+execAsync(`ydotoold`).catch(print); // Start ydotool daemon
+
+function releaseAllKeys() {
+    const keycodes = Array.from(Array(249).keys());
+    execAsync([`ydotool`, `key`, ...keycodes.map(keycode => `${keycode}:0`)])
+        .then(console.log('[OSK] Released all keys'))
+        .catch(print);
+}
+class ShiftMode {
+    static Off = new ShiftMode('Off');
+    static Normal = new ShiftMode('Normal');
+    static Locked = new ShiftMode('Locked');
+  
+    constructor(name) {
+      this.name = name;
+    }
+    toString() {
+      return `ShiftMode.${this.name}`;
+    }
+}
+var modsPressed = false;
+
+const topDecor = Box({
+    vertical: true,
+    children: [
+        Box({
+            hpack: 'center',
+            className: 'osk-dragline',
+            homogeneous: true,
+            children: [EventBox({
+                setup: setupCursorHoverGrab,
+            })]
+        })
+    ]
+});
+
+const keyboardControlButton = (icon, text, runFunction) => Button({
+    className: 'osk-control-button spacing-h-10',
+    onClicked: () => runFunction(),
+    child: Widget.Box({
+        children: [
+            MaterialIcon(icon, 'norm'),
+            Widget.Label({
+                label: `${text}`,
+            }),
+        ]
+    })
+})
+
+const keyboardControls = Box({
+    vertical: true,
+    className: 'spacing-v-5',
+    children: [
+        Button({
+            className: 'osk-control-button txt-norm icon-material',
+            onClicked: () => {
+                releaseAllKeys();
+                App.toggleWindow('osk');
+            },
+            label: 'keyboard_hide',
+        }),
+        Button({
+            className: 'osk-control-button txt-norm',
+            label: `${keyboardJson['name_short']}`,
+        }),
+        Button({
+            className: 'osk-control-button txt-norm icon-material',
+            onClicked: () => { // TODO: Proper clipboard widget, since fuzzel doesn't receive mouse inputs
+                execAsync([`bash`, `-c`, "pkill fuzzel || cliphist list | fuzzel --no-fuzzy --dmenu | cliphist decode | wl-copy"]).catch(print);
+            },
+            label: 'assignment',
+        }),
+    ]
+})
+
+var shiftMode = ShiftMode.Off;
+var shiftButton;
+var rightShiftButton;
+var allButtons = [];
+const keyboardItself = (kbJson) => {
+    return Box({
+        vertical: true,
+        className: 'spacing-v-5',
+        children: kbJson.keys.map(row => Box({
+            vertical: false,
+            className: 'spacing-h-5',
+            children: row.map(key => {
+                return Button({
+                    className: `osk-key osk-key-${key.shape}`,
+                    hexpand: ["space", "expand"].includes(key.shape),
+                    label: key.label,
+                    attribute: 
+                        {key: key},
+                    setup: (button) => {
+                        let pressed = false;
+                        allButtons = allButtons.concat(button);
+                        if (key.keytype == "normal") {
+                            button.connect('pressed', () => { // mouse down
+                                execAsync(`ydotool key ${key.keycode}:1`);
+                            });
+                            button.connect('clicked', () => { // release
+                                execAsync(`ydotool key ${key.keycode}:0`);
+
+                                if (shiftMode == ShiftMode.Normal) {
+                                    shiftMode = ShiftMode.Off;
+                                    if (typeof shiftButton !== 'undefined') {
+                                        execAsync(`ydotool key 42:0`);
+                                        shiftButton.toggleClassName('osk-key-active', false);
+                                    }
+                                    if (typeof rightShiftButton !== 'undefined') {
+                                        execAsync(`ydotool key 54:0`);
+                                        rightShiftButton.toggleClassName('osk-key-active', false);
+                                    }
+                                    allButtons.forEach(button => {
+                                        if (typeof button.attribute.key.labelShift !== 'undefined') button.label = button.attribute.key.label;
+                                    })
+                                }
+                            });
+                        }
+                        else if (key.keytype == "modkey") {
+                            button.connect('pressed', () => { // release
+                                if (pressed) {
+                                    execAsync(`ydotool key ${key.keycode}:0`);
+                                    button.toggleClassName('osk-key-active', false);
+                                    pressed = false;
+                                    if (key.keycode == 100) { // Alt Gr button
+                                        allButtons.forEach(button => { if (typeof button.attribute.key.labelAlt !== 'undefined') button.label = button.attribute.key.label; });
+                                    }
+                                }
+                                else {
+                                    execAsync(`ydotool key ${key.keycode}:1`);
+                                    button.toggleClassName('osk-key-active', true);
+                                    if (!(key.keycode == 42 || key.keycode == 54)) pressed = true;
+                                    else switch (shiftMode.name) { // This toggles the shift button state
+                                        case "Off": {
+                                            shiftMode = ShiftMode.Normal;
+                                            allButtons.forEach(button => { if (typeof button.attribute.key.labelShift !== 'undefined') button.label = button.attribute.key.labelShift; })
+                                            if (typeof shiftButton !== 'undefined') {
+                                                shiftButton.toggleClassName('osk-key-active', true);
+                                            }
+                                            if (typeof rightShiftButton !== 'undefined') {
+                                                rightShiftButton.toggleClassName('osk-key-active', true);
+                                            }
+                                        } break;
+                                        case "Normal": {
+                                            shiftMode = ShiftMode.Locked;
+                                            if (typeof shiftButton !== 'undefined') shiftButton.label = key.labelCaps;
+                                            if (typeof rightShiftButton !== 'undefined') rightShiftButton.label = key.labelCaps;
+                                        } break;
+                                        case "Locked": {
+                                            shiftMode = ShiftMode.Off;
+                                            if (typeof shiftButton !== 'undefined') {
+                                                shiftButton.label = key.label;
+                                                shiftButton.toggleClassName('osk-key-active', false);
+                                            }
+                                            if (typeof rightShiftButton !== 'undefined') {
+                                                rightShiftButton.label = key.label;
+                                                rightShiftButton.toggleClassName('osk-key-active', false);
+                                            }
+                                            execAsync(`ydotool key ${key.keycode}:0`);
+                                            
+                                            allButtons.forEach(button => { if (typeof button.attribute.key.labelShift !== 'undefined') button.label = button.attribute.key.label; }
+                                        )};
+                                    }
+                                    if (key.keycode == 100) { // Alt Gr button
+                                        allButtons.forEach(button => { if (typeof button.attribute.key.labelAlt !== 'undefined') button.label = button.attribute.key.labelAlt; });
+                                    }
+                                    modsPressed = true;
+                                }
+                            });
+                            if (key.keycode == 42) shiftButton = button;
+                            else if (key.keycode == 54) rightShiftButton = button;
+                        }
+                    }
+                })
+            })
+        }))
+    })
+}
+
+const keyboardWindow = Box({
+    vexpand: true,
+    hexpand: true,
+    vertical: true,
+    className: 'osk-window spacing-v-5',
+    children: [
+        topDecor,
+        Box({
+            className: 'osk-body spacing-h-10',
+            children: [
+                keyboardControls,
+                separatorLine,
+                keyboardItself(keyboardJson),
+            ],
+        })
+    ],
+    setup: (self) => self.hook(App, (box, name, visible) => { // Update on open
+        if (name == 'osk' && visible) {
+            keyboardWindow.setCss(`margin-bottom: -0px;`);
+        }
+    }),
+});
+
+const gestureEvBox = EventBox({ child: keyboardWindow })
+const gesture = Gtk.GestureDrag.new(gestureEvBox);
+gesture.connect('drag-begin', async () => {
+    try {
+        const Hyprland = (await import('resource:///com/github/Aylur/ags/service/hyprland.js')).default;
+        Hyprland.sendMessage('j/cursorpos').then((out) => {
+            gesture.startY = JSON.parse(out).y;
+        }).catch(print);
+    } catch {
+        return;
+    }
+});
+gesture.connect('drag-update', async () => {
+    try {
+        const Hyprland = (await import('resource:///com/github/Aylur/ags/service/hyprland.js')).default;
+        Hyprland.sendMessage('j/cursorpos').then((out) => {
+            const currentY = JSON.parse(out).y;
+            const offset = gesture.startY - currentY;
+
+            if (offset > 0) return;
+
+            keyboardWindow.setCss(`
+            margin-bottom: ${offset}px;
+        `);
+        }).catch(print);
+    } catch {
+        return;
+    }
+});
+gesture.connect('drag-end', () => {
+    var offset = gesture.get_offset()[2];
+    if (offset > 50) {
+        App.closeWindow('osk');
+    }
+    else {
+        keyboardWindow.setCss(`
+            transition: margin-bottom 170ms cubic-bezier(0.05, 0.7, 0.1, 1);
+            margin-bottom: 0px;
+        `);
+    }
+})
+
+export default () => gestureEvBox;

modules/styling/config/widgets/overview/actions.js

@@ -0,0 +1,28 @@
+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) {
+    Utils.execAsync(['bash', '-c', `hyprctl dispatch movetoworkspacesilent ${workspace},address:${address} &`]);
+}
+
+export function dumpToWorkspace(from, to) {
+    if (from == to) return;
+    Hyprland.clients.forEach(client => {
+        if (client.workspace.id == from) {
+            moveClientToWorkspace(client.address, to);
+        }
+    });
+}
+
+export function swapWorkspace(workspaceA, workspaceB) {
+    if (workspaceA == workspaceB) return;
+    const clientsA = [];
+    const clientsB = [];
+    Hyprland.clients.forEach(client => {
+        if (client.workspace.id == workspaceA) clientsA.push(client.address);
+        if (client.workspace.id == workspaceB) clientsB.push(client.address);
+    });
+
+    clientsA.forEach((address) => moveClientToWorkspace(address, workspaceB));
+    clientsB.forEach((address) => moveClientToWorkspace(address, workspaceA));
+}

modules/styling/config/widgets/overview/main.js

@@ -0,0 +1,18 @@
+import Widget from 'resource:///com/github/Aylur/ags/widget.js';
+import { SearchAndWindows } from "./windowcontent.js";
+
+export default () => Widget.Window({
+    name: 'overview',
+    exclusivity: 'ignore',
+    keymode: 'exclusive',
+    popup: true,
+    visible: false,
+    anchor: ['top'],
+    layer: 'overlay',
+    child: Widget.Box({
+        vertical: true,
+        children: [
+            SearchAndWindows(),
+        ]
+    }),
+})

modules/styling/config/widgets/overview/miscfunctions.js

@@ -0,0 +1,143 @@
+const { Gio, GLib } = imports.gi;
+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";
+
+export function hasUnterminatedBackslash(inputString) {
+    // Use a regular expression to match a trailing odd number of backslashes
+    const regex = /\\+$/;
+    return regex.test(inputString);
+}
+
+export function launchCustomCommand(command) {
+    const args = command.split(' ');
+    if (args[0] == '>raw') { // Mouse raw input
+        execAsync([`bash`, `-c`, `hyprctl keyword input:force_no_accel $(( 1 - $(hyprctl getoption input:force_no_accel -j | gojq ".int") ))`, `&`]).catch(print);
+    }
+    else if (args[0] == '>img') { // Change wallpaper
+        execAsync([`bash`, `-c`, `${App.configDir}/scripts/color_generation/switchwall.sh`, `&`]).catch(print);
+    }
+    else if (args[0] == '>color') { // Generate colorscheme from color picker
+        execAsync([`bash`, `-c`, `${App.configDir}/scripts/color_generation/switchcolor.sh`, `&`]).catch(print);
+    }
+    else if (args[0] == '>light') { // Light mode
+        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 ${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);
+    }
+    else if (args[0] == '>badapple') { // Light mode
+        execAsync([`bash`, `-c`, `${App.configDir}/scripts/color_generation/applycolor.sh --bad-apple`]).catch(print)
+            .then(execAsync(['bash', '-c', `${App.configDir}/scripts/color_generation/switchwall.sh --noswitch`]).catch(print))
+            .catch(print);
+    }
+    else if (args[0] == '>material') { // Light mode
+        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)
+            .then(execAsync(['bash', '-c', `${App.configDir}/scripts/color_generation/switchwall.sh --noswitch`]).catch(print))
+            .catch(print);
+    }
+    else if (args[0] == '>pywal') { // Dark mode
+        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)
+            .then(execAsync(['bash', '-c', `${App.configDir}/scripts/color_generation/switchwall.sh --noswitch`]).catch(print))
+            .catch(print);
+    }
+    else if (args[0] == '>todo') { // Todo
+        Todo.add(args.slice(1).join(' '));
+    }
+    else if (args[0] == '>shutdown') { // Shut down
+        execAsync([`bash`, `-c`, `systemctl poweroff`]).catch(print);
+    }
+    else if (args[0] == '>reboot') { // Reboot
+        execAsync([`bash`, `-c`, `systemctl reboot`]).catch(print);
+    }
+    else if (args[0] == '>sleep') { // Sleep
+        execAsync([`bash`, `-c`, `systemctl suspend`]).catch(print);
+    }
+    else if (args[0] == '>logout') { // Log out
+        execAsync([`bash`, `-c`, `pkill Hyprland || pkill sway`]).catch(print);
+    }
+}
+
+export function execAndClose(command, terminal) {
+    App.closeWindow('overview');
+    if (terminal) {
+        execAsync([`bash`, `-c`, `foot fish -C "${command}"`, `&`]).catch(print);
+    }
+    else
+        execAsync(command).catch(print);
+}
+
+export function couldBeMath(str) {
+    const regex = /^[0-9.+*/-]/;
+    return regex.test(str);
+}
+
+export function expandTilde(path) {
+    if (path.startsWith('~')) {
+        return GLib.get_home_dir() + path.slice(1);
+    } else {
+        return path;
+    }
+}
+
+function getFileIcon(fileInfo) {
+    let icon = fileInfo.get_icon();
+    if (icon) {
+        // Get the icon's name
+        return icon.get_names()[0];
+    } else {
+        // Default icon for files
+        return 'text-x-generic';
+    }
+}
+
+export function ls({ path = '~', silent = false }) {
+    let contents = [];
+    try {
+        let expandedPath = expandTilde(path);
+        if (expandedPath.endsWith('/'))
+            expandedPath = expandedPath.slice(0, -1);
+        let folder = Gio.File.new_for_path(expandedPath);
+
+        let enumerator = folder.enumerate_children('standard::*', Gio.FileQueryInfoFlags.NONE, null);
+        let fileInfo;
+        while ((fileInfo = enumerator.next_file(null)) !== null) {
+            let fileName = fileInfo.get_display_name();
+            let fileType = fileInfo.get_file_type();
+
+            let item = {
+                parentPath: expandedPath,
+                name: fileName,
+                type: fileType === Gio.FileType.DIRECTORY ? 'folder' : 'file',
+                icon: getFileIcon(fileInfo),
+            };
+
+            // Add file extension for files
+            if (fileType === Gio.FileType.REGULAR) {
+                let fileExtension = fileName.split('.').pop();
+                item.type = `${fileExtension}`;
+            }
+
+            contents.push(item);
+            contents.sort((a, b) => {
+                const aIsFolder = a.type.startsWith('folder');
+                const bIsFolder = b.type.startsWith('folder');
+                if (aIsFolder && !bIsFolder) {
+                    return -1;
+                } else if (!aIsFolder && bIsFolder) {
+                    return 1;
+                } else {
+                    return a.name.localeCompare(b.name); // Sort alphabetically within folders and files
+                }
+            });
+        }
+    } catch (e) {
+        if (!silent) console.log(e);
+    }
+    return contents;
+}

modules/styling/config/widgets/overview/overview_hyprland.js

@@ -0,0 +1,446 @@
+// TODO
+// - Make client destroy/create not destroy and recreate the whole thing
+// - Active ws hook optimization: only update when moving to next group
+//
+const { Gdk, Gtk } = imports.gi;
+const { Gravity } = imports.gi.Gdk;
+import { SCREEN_HEIGHT, SCREEN_WIDTH } from '../../imports.js';
+import App from 'resource:///com/github/Aylur/ags/app.js';
+import Variable from 'resource:///com/github/Aylur/ags/variable.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;
+const NUM_OF_WORKSPACE_ROWS = 2;
+const NUM_OF_WORKSPACE_COLS = 5;
+const OVERVIEW_WS_NUM_SCALE = 0.09;
+const NUM_OF_WORKSPACES_SHOWN = NUM_OF_WORKSPACE_COLS * NUM_OF_WORKSPACE_ROWS;
+const OVERVIEW_WS_NUM_MARGIN_SCALE = 0.07;
+const TARGET = [Gtk.TargetEntry.new('text/plain', Gtk.TargetFlags.SAME_APP, 0)];
+
+const overviewTick = Variable(false);
+
+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;
+}
+export default () => {
+    const clientMap = new Map();
+    let workspaceGroup = 0;
+    const ContextMenuWorkspaceArray = ({ label, actionFunc, thisWorkspace }) => Widget.MenuItem({
+        label: `${label}`,
+        setup: (menuItem) => {
+            let submenu = new Gtk.Menu();
+            submenu.className = 'menu';
+
+            const offset = Math.floor((Hyprland.active.workspace.id - 1) / NUM_OF_WORKSPACES_SHOWN) * NUM_OF_WORKSPACES_SHOWN;
+            const startWorkspace = offset + 1;
+            const endWorkspace = startWorkspace + NUM_OF_WORKSPACES_SHOWN - 1;
+            for (let i = startWorkspace; i <= endWorkspace; i++) {
+                let button = new Gtk.MenuItem({
+                    label: `Workspace ${i}`
+                });
+                button.connect("activate", () => {
+                    // execAsync([`${onClickBinary}`, `${thisWorkspace}`, `${i}`]).catch(print);
+                    actionFunc(thisWorkspace, i);
+                    overviewTick.setValue(!overviewTick.value);
+                });
+                submenu.append(button);
+            }
+            menuItem.set_reserve_indicator(true);
+            menuItem.set_submenu(submenu);
+        }
+    })
+
+    const Window = ({ address, at: [x, y], size: [w, h], workspace: { id, name }, class: c, title, xwayland }, screenCoords) => {
+        const revealInfoCondition = (Math.min(w, h) * OVERVIEW_SCALE > 70);
+        if (w <= 0 || h <= 0 || (c === '' && title === '')) return null;
+        // Non-primary monitors
+        if (screenCoords.x != 0) x -= screenCoords.x;
+        if (screenCoords.y != 0) y -= screenCoords.y;
+        // Other offscreen adjustments
+        if (x + w <= 0) x += (Math.floor(x / SCREEN_WIDTH) * SCREEN_WIDTH);
+        else if (x < 0) { w = x + w; x = 0; }
+        if (y + h <= 0) x += (Math.floor(y / SCREEN_HEIGHT) * SCREEN_HEIGHT);
+        else if (y < 0) { h = y + h; y = 0; }
+        // Truncate if offscreen
+        if (x + w > SCREEN_WIDTH) w = SCREEN_WIDTH - x;
+        if (y + h > SCREEN_HEIGHT) h = SCREEN_HEIGHT - y;
+
+        const appIcon = Widget.Icon({
+            icon: substitute(c),
+            size: Math.min(w, h) * OVERVIEW_SCALE / 2.5,
+        });
+        return Widget.Button({
+            attribute: {
+                address, x, y, w, h, ws: id,
+                updateIconSize: (self) => {
+                    appIcon.size = Math.min(self.attribute.w, self.attribute.h) * OVERVIEW_SCALE / 2.5;
+                },
+            },
+            className: 'overview-tasks-window',
+            hpack: 'start',
+            vpack: 'start',
+            css: `
+                margin-left: ${Math.round(x * OVERVIEW_SCALE)}px;
+                margin-top: ${Math.round(y * OVERVIEW_SCALE)}px;
+                margin-right: -${Math.round((x + w) * OVERVIEW_SCALE)}px;
+                margin-bottom: -${Math.round((y + h) * OVERVIEW_SCALE)}px;
+            `,
+            onClicked: (self) => {
+                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_widget(button.get_parent(), Gravity.SOUTH, Gravity.NORTH, null); // Show menu below the button
+                button.connect("destroy", () => menu.destroy());
+            },
+            child: Widget.Box({
+                homogeneous: true,
+                child: Widget.Box({
+                    vertical: true,
+                    vpack: 'center',
+                    className: 'spacing-v-5',
+                    children: [
+                        appIcon,
+                        // 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 = Widget.Fixed({
+        //     attribute: {
+        //         put: (widget, x, y) => {
+        //             fixed.put(widget, x, y);
+        //         },
+        //         move: (widget, x, y) => {
+        //             fixed.move(widget, x, y);
+        //         },
+        //     }
+        // });
+        const fixed = Widget.Box({
+            attribute: {
+                put: (widget, x, y) => {
+                    if (!widget.attribute) return;
+                    // Note: x and y are already multiplied by OVERVIEW_SCALE
+                    const newCss = `
+                        margin-left: ${Math.round(x)}px;
+                        margin-top: ${Math.round(y)}px;
+                        margin-right: -${Math.round(x + (widget.attribute.w * OVERVIEW_SCALE))}px;
+                        margin-bottom: -${Math.round(y + (widget.attribute.h * OVERVIEW_SCALE))}px;
+                    `;
+                    widget.css = newCss;
+                    fixed.pack_start(widget, false, false, 0);
+                },
+                move: (widget, x, y) => {
+                    if (!widget) return;
+                    if (!widget.attribute) return;
+                    // Note: x and y are already multiplied by OVERVIEW_SCALE
+                    const newCss = `
+                        margin-left: ${Math.round(x)}px;
+                        margin-top: ${Math.round(y)}px;
+                        margin-right: -${Math.round(x + (widget.attribute.w * OVERVIEW_SCALE))}px;
+                        margin-bottom: -${Math.round(y + (widget.attribute.h * OVERVIEW_SCALE))}px;
+                    `;
+                    widget.css = newCss;
+                },
+            }
+        })
+        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()}`)
+                        overviewTick.setValue(!overviewTick.value);
+                    });
+                },
+                child: fixed,
+            })],
+        });
+        const offset = Math.floor((Hyprland.active.workspace.id - 1) / NUM_OF_WORKSPACES_SHOWN) * NUM_OF_WORKSPACES_SHOWN;
+        fixed.attribute.put(WorkspaceNumber(offset + index), 0, 0);
+        widget.clear = () => {
+            const offset = Math.floor((Hyprland.active.workspace.id - 1) / NUM_OF_WORKSPACES_SHOWN) * NUM_OF_WORKSPACES_SHOWN;
+            clientMap.forEach((client, address) => {
+                if (!client || client.ws !== offset + index) return;
+                client.destroy();
+                client = null;
+                clientMap.delete(address);
+            });
+        }
+        widget.set = (clientJson, screenCoords) => {
+            let c = clientMap.get(clientJson.address);
+            if (c) {
+                if (c.attribute?.ws !== clientJson.workspace.id) {
+                    c.destroy();
+                    c = null;
+                    clientMap.delete(clientJson.address);
+                }
+                else if (c) {
+                    c.attribute.w = clientJson.size[0];
+                    c.attribute.h = clientJson.size[1];
+                    c.attribute.updateIconSize(c);
+                    fixed.attribute.move(c,
+                        Math.max(0, clientJson.at[0] * OVERVIEW_SCALE),
+                        Math.max(0, clientJson.at[1] * OVERVIEW_SCALE)
+                    );
+                    return;
+                }
+            }
+            const newWindow = Window(clientJson, screenCoords);
+            if (newWindow === null) return;
+            // clientMap.set(clientJson.address, newWindow);
+            fixed.attribute.put(newWindow,
+                Math.max(0, newWindow.attribute.x * OVERVIEW_SCALE),
+                Math.max(0, newWindow.attribute.y * OVERVIEW_SCALE)
+            );
+            clientMap.set(clientJson.address, newWindow);
+        };
+        widget.unset = (clientAddress) => {
+            const offset = Math.floor((Hyprland.active.workspace.id - 1) / NUM_OF_WORKSPACES_SHOWN) * NUM_OF_WORKSPACES_SHOWN;
+            let c = clientMap.get(clientAddress);
+            if (!c) return;
+            c.destroy();
+            c = null;
+            clientMap.delete(clientAddress);
+        };
+        widget.show = () => {
+            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: {
+            monitorMap: [],
+            getMonitorMap: (box) => {
+                execAsync('hyprctl -j monitors').then(monitors => {
+                    box.attribute.monitorMap = JSON.parse(monitors).reduce((acc, item) => {
+                        acc[item.id] = { x: item.x, y: item.y };
+                        return acc;
+                    }, {});
+                });
+            },
+            update: (box) => {
+                const offset = Math.floor((Hyprland.active.workspace.id - 1) / NUM_OF_WORKSPACES_SHOWN) * NUM_OF_WORKSPACES_SHOWN;
+                if (!App.getWindow(windowName).visible) return;
+                Hyprland.sendMessage('j/clients').then(clients => {
+                    const allClients = JSON.parse(clients);
+                    const kids = box.get_children();
+                    kids.forEach(kid => kid.clear());
+                    // console.log('----------------------------');
+                    for (let i = 0; i < allClients.length; i++) {
+                        const client = allClients[i];
+                        const childID = client.workspace.id - (offset + startWorkspace);
+                        if (offset + startWorkspace <= client.workspace.id &&
+                            client.workspace.id <= offset + startWorkspace + workspaces) {
+                            const screenCoords = box.attribute.monitorMap[client.monitor];
+                            if (kids[childID]) {
+                                kids[childID].set(client, screenCoords);
+                            }
+                            continue;
+                        }
+                        // const modID = client.workspace.id % NUM_OF_WORKSPACES_SHOWN;
+                        // console.log(`[${startWorkspace} -> ${startWorkspace + workspaces - 1}] ? (${client.workspace.id} == ${modID})`);
+                        // // console.log(`[${startWorkspace} -> ${startWorkspace + workspaces}] ? (${modID})`);
+                        // if (startWorkspace <= modID && modID < startWorkspace + workspaces) {
+                        //     console.log('i care');
+                        //     const clientWidget = clientMap.get(client.address);
+                        //     console.log(childID, kids[childID], clientWidget);
+                        //     if (kids[childID] && clientWidget) {
+                        //         console.log('hmm remove', clientWidget.attribute)
+                        //         kids[childID].remove(clientWidget);
+                        //     }
+                        // }
+                    }
+                    kids.forEach(kid => kid.show());
+                }).catch(print);
+            },
+            updateWorkspace: (box, id) => {
+                const offset = Math.floor((Hyprland.active.workspace.id - 1) / NUM_OF_WORKSPACES_SHOWN) * NUM_OF_WORKSPACES_SHOWN;
+                if (!( // Not in range, ignore
+                    offset + startWorkspace <= id &&
+                    id <= offset + startWorkspace + workspaces
+                )) return;
+                // if (!App.getWindow(windowName).visible) return;
+                Hyprland.sendMessage('j/clients').then(clients => {
+                    const allClients = JSON.parse(clients);
+                    const kids = box.get_children();
+                    for (let i = 0; i < allClients.length; i++) {
+                        const client = allClients[i];
+                        if (client.workspace.id != id) continue;
+                        const screenCoords = box.attribute.monitorMap[client.monitor];
+                        kids[id - (offset + startWorkspace)]?.set(client, screenCoords);
+                    }
+                    kids[id - (offset + startWorkspace)]?.show();
+                }).catch(print);
+            },
+        },
+        setup: (box) => {
+            box.attribute.getMonitorMap(box);
+            box
+                .hook(overviewTick, (box) => box.attribute.update(box))
+                .hook(Hyprland, (box, clientAddress) => {
+                    const offset = Math.floor((Hyprland.active.workspace.id - 1) / NUM_OF_WORKSPACES_SHOWN) * NUM_OF_WORKSPACES_SHOWN;
+                    const kids = box.get_children();
+                    const client = Hyprland.getClient(clientAddress);
+                    if (!client) return;
+                    const id = client.workspace.id;
+
+                    box.attribute.updateWorkspace(box, id);
+                    kids[id - (offset + startWorkspace)]?.unset(clientAddress);
+                }, 'client-removed')
+                .hook(Hyprland, (box, clientAddress) => {
+                    const client = Hyprland.getClient(clientAddress);
+                    if (!client) return;
+                    box.attribute.updateWorkspace(box, client.workspace.id);
+                }, 'client-added')
+                .hook(Hyprland.active.workspace, (box) => {
+                    const previousGroup = box.attribute.workspaceGroup;
+                    const currentGroup = Math.floor((Hyprland.active.workspace.id - 1) / NUM_OF_WORKSPACES_SHOWN);
+                    if (currentGroup !== previousGroup) {
+                        box.attribute.update(box);
+                        workspaceGroup = currentGroup;
+                    }
+                    // box.attribute.update(box);
+                })
+                .hook(App, (box, name, visible) => { // Update on open
+                    if (name == 'overview' && visible) box.attribute.update(box);
+                })
+        },
+    });
+
+    return Widget.Revealer({
+        revealChild: true,
+        transition: 'slide_down',
+        transitionDuration: 200,
+        child: Widget.Box({
+            vertical: true,
+            className: 'overview-tasks',
+            children: Array.from({ length: NUM_OF_WORKSPACE_ROWS }, (_, index) =>
+                OverviewRow({
+                    startWorkspace: 1 + index * NUM_OF_WORKSPACE_COLS,
+                    workspaces: NUM_OF_WORKSPACE_COLS,
+                })
+            )
+        }),
+    });
+}

modules/styling/config/widgets/overview/searchbuttons.js

@@ -0,0 +1,163 @@
+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, couldBeMath, launchCustomCommand } from './miscfunctions.js';
+
+export const DirectoryButton = ({ parentPath, name, type, icon }) => {
+    const actionText = Widget.Revealer({
+        revealChild: false,
+        transition: "crossfade",
+        transitionDuration: 200,
+        child: Widget.Label({
+            className: 'overview-search-results-txt txt txt-small txt-action',
+            label: 'Open',
+        })
+    });
+    const actionTextRevealer = Widget.Revealer({
+        revealChild: false,
+        transition: "slide_left",
+        transitionDuration: 300,
+        child: actionText,
+    });
+    return Widget.Button({
+        className: 'overview-search-result-btn',
+        onClicked: () => {
+            App.closeWindow('overview');
+            execAsync(['bash', '-c', `xdg-open '${parentPath}/${name}'`, `&`]).catch(print);
+        },
+        child: Widget.Box({
+            children: [
+                Widget.Box({
+                    vertical: false,
+                    children: [
+                        Widget.Box({
+                            className: 'overview-search-results-icon',
+                            homogeneous: true,
+                            child: Widget.Icon({
+                                icon: icon,
+                            }),
+                        }),
+                        Widget.Label({
+                            className: 'overview-search-results-txt txt txt-norm',
+                            label: name,
+                        }),
+                        Widget.Box({ hexpand: true }),
+                        actionTextRevealer,
+                    ]
+                })
+            ]
+        }),
+        setup: (self) => self
+            .on('focus-in-event', (button) => {
+                actionText.revealChild = true;
+                actionTextRevealer.revealChild = true;
+            })
+            .on('focus-out-event', (button) => {
+                actionText.revealChild = false;
+                actionTextRevealer.revealChild = false;
+            })
+        ,
+    })
+}
+
+export const CalculationResultButton = ({ result, text }) => searchItem({
+    materialIconName: 'calculate',
+    name: `Math result`,
+    actionName: "Copy",
+    content: `${result}`,
+    onActivate: () => {
+        App.closeWindow('overview');
+        execAsync(['wl-copy', `${result}`]).catch(print);
+    },
+});
+
+export const DesktopEntryButton = (app) => {
+    const actionText = Widget.Revealer({
+        revealChild: false,
+        transition: "crossfade",
+        transitionDuration: 200,
+        child: Widget.Label({
+            className: 'overview-search-results-txt txt txt-small txt-action',
+            label: 'Launch',
+        })
+    });
+    const actionTextRevealer = Widget.Revealer({
+        revealChild: false,
+        transition: "slide_left",
+        transitionDuration: 300,
+        child: actionText,
+    });
+    return Widget.Button({
+        className: 'overview-search-result-btn',
+        onClicked: () => {
+            App.closeWindow('overview');
+            app.launch();
+        },
+        child: Widget.Box({
+            children: [
+                Widget.Box({
+                    vertical: false,
+                    children: [
+                        Widget.Box({
+                            className: 'overview-search-results-icon',
+                            homogeneous: true,
+                            child: Widget.Icon({
+                                icon: app.iconName,
+                            }),
+                        }),
+                        Widget.Label({
+                            className: 'overview-search-results-txt txt txt-norm',
+                            label: app.name,
+                        }),
+                        Widget.Box({ hexpand: true }),
+                        actionTextRevealer,
+                    ]
+                })
+            ]
+        }),
+        setup: (self) => self
+            .on('focus-in-event', (button) => {
+                actionText.revealChild = true;
+                actionTextRevealer.revealChild = true;
+            })
+            .on('focus-out-event', (button) => {
+                actionText.revealChild = false;
+                actionTextRevealer.revealChild = false;
+            })
+        ,
+    })
+}
+
+export const ExecuteCommandButton = ({ command, terminal = false }) => searchItem({
+    materialIconName: `${terminal ? 'terminal' : 'settings_b_roll'}`,
+    name: `Run command`,
+    actionName: `Execute ${terminal ? 'in terminal' : ''}`,
+    content: `${command}`,
+    onActivate: () => execAndClose(command, terminal),
+    extraClassName: 'techfont',
+})
+
+export const CustomCommandButton = ({ text = '' }) => searchItem({
+    materialIconName: 'settings_suggest',
+    name: 'Action',
+    actionName: 'Run',
+    content: `${text}`,
+    onActivate: () => {
+        App.closeWindow('overview');
+        launchCustomCommand(text);
+    },
+});
+
+export const SearchButton = ({ text = '' }) => searchItem({
+    materialIconName: 'travel_explore',
+    name: 'Search Google',
+    actionName: 'Go',
+    content: `${text}`,
+    onActivate: () => {
+        App.closeWindow('overview');
+        execAsync(['bash', '-c', `xdg-open 'https://www.google.com/search?q=${text} -site:quora.com' &`]).catch(print); // quora is useless
+    },
+});

modules/styling/config/widgets/overview/searchitem.js

@@ -0,0 +1,65 @@
+import Widget from 'resource:///com/github/Aylur/ags/widget.js';
+
+export const searchItem = ({ materialIconName, name, actionName, content, onActivate, extraClassName = '', ...rest }) => {
+    const actionText = Widget.Revealer({
+        revealChild: false,
+        transition: "crossfade",
+        transitionDuration: 200,
+        child: Widget.Label({
+            className: 'overview-search-results-txt txt txt-small txt-action',
+            label: `${actionName}`,
+        })
+    });
+    const actionTextRevealer = Widget.Revealer({
+        revealChild: false,
+        transition: "slide_left",
+        transitionDuration: 300,
+        child: actionText,
+    })
+    return Widget.Button({
+        className: `overview-search-result-btn txt ${extraClassName}`,
+        onClicked: onActivate,
+        child: Widget.Box({
+            children: [
+                Widget.Box({
+                    vertical: false,
+                    children: [
+                        Widget.Label({
+                            className: `icon-material overview-search-results-icon`,
+                            label: `${materialIconName}`,
+                        }),
+                        Widget.Box({
+                            vertical: true,
+                            children: [
+                                Widget.Label({
+                                    hpack: 'start',
+                                    className: 'overview-search-results-txt txt-smallie txt-subtext',
+                                    label: `${name}`,
+                                    truncate: "end",
+                                }),
+                                Widget.Label({
+                                    hpack: 'start',
+                                    className: 'overview-search-results-txt txt-norm',
+                                    label: `${content}`,
+                                    truncate: "end",
+                                }),
+                            ]
+                        }),
+                        Widget.Box({ hexpand: true }),
+                        actionTextRevealer,
+                    ],
+                })
+            ]
+        }),
+        setup: (self) => self
+            .on('focus-in-event', (button) => {
+                actionText.revealChild = true;
+                actionTextRevealer.revealChild = true;
+            })
+            .on('focus-out-event', (button) => {
+                actionText.revealChild = false;
+                actionTextRevealer.revealChild = false;
+            })
+        ,
+    });
+}

modules/styling/config/widgets/overview/windowcontent.js

@@ -0,0 +1,268 @@
+const { Gdk, 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, couldBeMath, 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 Widget.Box({});
+        // 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 (couldBeMath(text)) { // Eval on typing is dangerous, this is a workaround
+                try {
+                    const fullResult = eval(text.replace(/\^/g, "**"));
+                    // 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 (couldBeMath(text)) { // Eval on typing is dangerous; this is a small workaround.
+                try {
+                    const fullResult = eval(text.replace(/\^/g, "**"));
+                    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)
+                            // enableClickthrough(box);
+                        },
+                    }),
+                    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
+                const keyval = event.get_keyval()[1];
+                const modstate = event.get_state()[1];
+                if (modstate & Gdk.ModifierType.CONTROL_MASK) { // Ctrl held
+                    if (keyval == Gdk.KEY_b) 
+                        entry.set_position(Math.max(entry.get_position() - 1, 0));
+                    else if (keyval == Gdk.KEY_f)
+                        entry.set_position(Math.min(entry.get_position() + 1, entry.get_text().length));
+                    else if (keyval == Gdk.KEY_n) { // simulate Down arrow
+                        entry.get_root_window().simulate_key_press(Gdk.KEY_Down, Gdk.ModifierType.NONE);
+                        // entry.get_root_window().simulate_key_release(Gdk.KEY_Down, Gdk.ModifierType.NONE);
+                    }
+                    else if (keyval == Gdk.KEY_k) { // Delete to end
+                        const text = entry.get_text();
+                        const pos = entry.get_position();
+                        const newText = text.slice(0, pos);
+                        entry.set_text(newText);
+                        entry.set_position(newText.length);
+                    }
+                }
+                else { // Ctrl not held
+                    if (keyval >= 32 && keyval <= 126 && widget != entry) {
+                        Utils.timeout(1, () => entry.grab_focus());
+                        entry.set_text(entry.text + String.fromCharCode(keyval));
+                        entry.set_position(-1);
+                    }
+                }
+            })
+        ,
+    });
+}; 

modules/styling/config/widgets/screencorners/main.js

@@ -0,0 +1,16 @@
+import Widget from 'resource:///com/github/Aylur/ags/widget.js';
+import { RoundedCorner, dummyRegion, enableClickthrough } from "../../lib/roundedcorner.js";
+
+export default (monitor = 0, where = 'bottom left') => {
+    const positionString = where.replace(/\s/, ""); // remove space
+    return Widget.Window({
+        monitor,
+        name: `corner${positionString}${monitor}`,
+        layer: 'overlay',
+        anchor: where.split(' '),
+        exclusivity: 'ignore',
+        visible: true,
+        child: RoundedCorner(positionString, { className: 'corner-black', }),
+        setup: enableClickthrough,
+    });
+}

modules/styling/config/widgets/session/main.js

@@ -0,0 +1,13 @@
+import Widget from 'resource:///com/github/Aylur/ags/widget.js';
+import SessionScreen from "./sessionscreen.js";
+
+export default () => Widget.Window({ // On-screen keyboard
+    name: 'session',
+    popup: true,
+    visible: false,
+    keymode: 'exclusive',
+    layer: 'overlay',
+    exclusivity: 'ignore',
+    // anchor: ['top', 'bottom', 'left', 'right'],
+    child: SessionScreen(),
+})

modules/styling/config/widgets/session/sessionscreen.js

@@ -0,0 +1,147 @@
+// 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 { 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 = {}) => {
+    const buttonDescription = Widget.Revealer({
+        vpack: 'end',
+        transitionDuration: 200,
+        transition: 'slide_down',
+        revealChild: false,
+        child: Widget.Label({
+            className: 'txt-smaller session-button-desc',
+            label: name,
+        }),
+    });
+    return Widget.Button({
+        onClicked: command,
+        className: 'session-button',
+        child: Widget.Overlay({
+            className: 'session-button-box',
+            child: Widget.Label({
+                vexpand: true,
+                className: 'icon-material',
+                label: icon,
+            }),
+            overlays: [
+                buttonDescription,
+            ]
+        }),
+        onHover: (button) => {
+            const display = Gdk.Display.get_default();
+            const cursor = Gdk.Cursor.new_from_name(display, 'pointer');
+            button.get_window().set_cursor(cursor);
+            buttonDescription.revealChild = true;
+        },
+        onHoverLost: (button) => {
+            const display = Gdk.Display.get_default();
+            const cursor = Gdk.Cursor.new_from_name(display, 'default');
+            button.get_window().set_cursor(cursor);
+            buttonDescription.revealChild = false;
+        },
+        setup: (self) => self
+            .on('focus-in-event', (self) => {
+                buttonDescription.revealChild = true;
+                self.toggleClassName('session-button-focused', true);
+            })
+            .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('swaylock') });
+    const logoutButton = SessionButton('Logout', 'logout', () => { App.closeWindow('session'); execAsync(['bash', '-c', 'pkill Hyprland || pkill sway']) });
+    const sleepButton = SessionButton('Sleep', 'sleep', () => { App.closeWindow('session'); execAsync('systemctl suspend') });
+    // hibernate, shutdown, reboot
+    const hibernateButton = SessionButton('Hibernate', 'downloading', () => { App.closeWindow('session'); execAsync('systemctl hibernate') });
+    const shutdownButton = SessionButton('Shutdown', 'power_settings_new', () => { App.closeWindow('session'); execAsync('systemctl poweroff') });
+    const rebootButton = SessionButton('Reboot', 'restart_alt', () => { App.closeWindow('session'); execAsync('systemctl reboot') });
+    const cancelButton = SessionButton('Cancel', 'close', () => App.closeWindow('session'), { className: 'session-button-cancel' });
+    return Widget.Box({
+        className: 'session-bg',
+        css: `
+        min-width: ${SCREEN_WIDTH * 1.5}px; 
+        min-height: ${SCREEN_HEIGHT * 1.5}px;
+        `, // idk why but height = screen height doesn't fill
+        vertical: true,
+        children: [
+            Widget.EventBox({
+                onPrimaryClick: () => App.closeWindow('session'),
+                onSecondaryClick: () => App.closeWindow('session'),
+                onMiddleClick: () => App.closeWindow('session'),
+            }),
+            Widget.Box({
+                hpack: 'center',
+                vexpand: true,
+                vertical: true,
+                children: [
+                    Widget.Box({
+                        vpack: 'center',
+                        vertical: true,
+                        className: 'spacing-v-15',
+                        children: [
+                            Widget.Box({
+                                vertical: true,
+                                css: 'margin-bottom: 0.682rem;',
+                                children: [
+                                    Widget.Label({
+                                        className: 'txt-title txt',
+                                        label: 'Session',
+                                    }),
+                                    Widget.Label({
+                                        justify: Gtk.Justification.CENTER,
+                                        className: 'txt-small txt',
+                                        label: 'Use arrow keys to navigate.\nEnter to select, Esc to cancel.'
+                                    }),
+                                ]
+                            }),
+                            Widget.Box({
+                                hpack: 'center',
+                                className: 'spacing-h-15',
+                                children: [ // lock, logout, sleep
+                                    lockButton,
+                                    logoutButton,
+                                    sleepButton,
+                                ]
+                            }),
+                            Widget.Box({
+                                hpack: 'center',
+                                className: 'spacing-h-15',
+                                children: [ // hibernate, shutdown, reboot
+                                    hibernateButton,
+                                    shutdownButton,
+                                    rebootButton,
+                                ]
+                            }),
+                            Widget.Box({
+                                hpack: 'center',
+                                className: 'spacing-h-15',
+                                children: [ // hibernate, shutdown, reboot
+                                    cancelButton,
+                                ]
+                            }),
+                        ]
+                    })
+                ]
+            })
+        ],
+        setup: (self) => self
+            .hook(App, (_b, name, visible) => {
+                if (visible) lockButton.grab_focus(); // Lock is the default option
+            })
+        ,
+    });
+}

modules/styling/config/widgets/sideleft/apis/ai_chatmessage.js

@@ -0,0 +1,293 @@
+const { Gdk, Gio, GLib, Gtk } = imports.gi;
+import GtkSource from "gi://GtkSource?version=3.0";
+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 md2pango from "../../../lib/md2pango.js";
+
+
+const CUSTOM_SOURCEVIEW_SCHEME_PATH = `${App.configDir}/data/sourceviewtheme.xml`;
+const CUSTOM_SCHEME_ID = 'custom';
+const USERNAME = GLib.get_user_name();
+const CHATGPT_CURSOR = '  ...';
+
+/////////////////////// Custom source view colorscheme /////////////////////////
+
+function loadCustomColorScheme(filePath) {
+    // Read the XML file content
+    const file = Gio.File.new_for_path(filePath);
+    const [success, contents] = file.load_contents(null);
+
+    if (!success) {
+        logError('Failed to load the XML file.');
+        return;
+    }
+
+    // Parse the XML content and set the Style Scheme
+    const schemeManager = GtkSource.StyleSchemeManager.get_default();
+    schemeManager.append_search_path(file.get_parent().get_path());
+}
+loadCustomColorScheme(CUSTOM_SOURCEVIEW_SCHEME_PATH);
+
+//////////////////////////////////////////////////////////////////////////////
+
+function copyToClipboard(text) {
+    const clipboard = Gtk.Clipboard.get(Gdk.SELECTION_CLIPBOARD);
+    const textVariant = new GLib.Variant('s', text);
+    clipboard.set_text(textVariant, -1);
+    clipboard.store();
+}
+
+function substituteLang(str) {
+    const subs = [
+        { from: 'javascript', to: 'js' },
+        { from: 'bash', to: 'sh' },
+    ];
+
+    for (const { from, to } of subs) {
+        if (from === str)
+            return to;
+    }
+
+    return str;
+}
+
+const HighlightedCode = (content, lang) => {
+    const buffer = new GtkSource.Buffer();
+    const sourceView = new GtkSource.View({
+        buffer: buffer,
+        wrap_mode: Gtk.WrapMode.NONE
+    });
+    const langManager = GtkSource.LanguageManager.get_default();
+    let displayLang = langManager.get_language(substituteLang(lang)); // Set your preferred language
+    if (displayLang) {
+        buffer.set_language(displayLang);
+    }
+    const schemeManager = GtkSource.StyleSchemeManager.get_default();
+    buffer.set_style_scheme(schemeManager.get_scheme(CUSTOM_SCHEME_ID));
+    buffer.set_text(content, -1);
+    return sourceView;
+}
+
+const TextBlock = (content = '') => Label({
+    hpack: 'fill',
+    className: 'txt sidebar-chat-txtblock sidebar-chat-txt',
+    useMarkup: true,
+    xalign: 0,
+    wrap: true,
+    selectable: true,
+    label: content,
+});
+
+const CodeBlock = (content = '', lang = 'txt') => {
+    const topBar = Box({
+        className: 'sidebar-chat-codeblock-topbar',
+        children: [
+            Label({
+                label: lang,
+                className: 'sidebar-chat-codeblock-topbar-txt',
+            }),
+            Box({
+                hexpand: true,
+            }),
+            Button({
+                className: 'sidebar-chat-codeblock-topbar-btn',
+                child: Box({
+                    className: 'spacing-h-5',
+                    children: [
+                        MaterialIcon('content_copy', 'small'),
+                        Label({
+                            label: 'Copy',
+                        })
+                    ]
+                }),
+                onClicked: (self) => {
+                    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);
+                },
+            }),
+        ]
+    })
+    // Source view
+    const sourceView = HighlightedCode(content, lang);
+
+    const codeBlock = Box({
+        attribute: {
+            'updateText': (text) => {
+                sourceView.get_buffer().set_text(text, -1);
+            }
+        },
+        className: 'sidebar-chat-codeblock',
+        vertical: true,
+        children: [
+            topBar,
+            Box({
+                className: 'sidebar-chat-codeblock-code',
+                homogeneous: true,
+                children: [Scrollable({
+                    vscroll: 'never',
+                    hscroll: 'automatic',
+                    child: sourceView,
+                })],
+            })
+        ]
+    })
+
+    // const schemeIds = styleManager.get_scheme_ids();
+
+    // print("Available Style Schemes:");
+    // for (let i = 0; i < schemeIds.length; i++) {
+    //     print(schemeIds[i]);
+    // }
+    return codeBlock;
+}
+
+const Divider = () => Box({
+    className: 'sidebar-chat-divider',
+})
+
+const MessageContent = (content) => {
+    const contentBox = Box({
+        vertical: true,
+        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++) {
+                    const child = children[i];
+                    child.destroy();
+                }
+                contentBox.add(TextBlock())
+                // Loop lines. Put normal text in markdown parser 
+                // and put code into code highlighter (TODO)
+                let lines = content.split('\n');
+                let lastProcessed = 0;
+                let inCode = false;
+                for (const [index, line] of lines.entries()) {
+                    // Code blocks
+                    const codeBlockRegex = /^\s*```([a-zA-Z0-9]+)?\n?/;
+                    if (codeBlockRegex.test(line)) {
+                        const kids = self.get_children();
+                        const lastLabel = kids[kids.length - 1];
+                        const blockContent = lines.slice(lastProcessed, index).join('\n');
+                        if (!inCode) {
+                            lastLabel.label = md2pango(blockContent);
+                            contentBox.add(CodeBlock('', codeBlockRegex.exec(line)[1]));
+                        }
+                        else {
+                            lastLabel.attribute.updateText(blockContent);
+                            contentBox.add(TextBlock());
+                        }
+
+                        lastProcessed = index + 1;
+                        inCode = !inCode;
+                    }
+                    // Breaks
+                    const dividerRegex = /^\s*---/;
+                    if (!inCode && dividerRegex.test(line)) {
+                        const kids = self.get_children();
+                        const lastLabel = kids[kids.length - 1];
+                        const blockContent = lines.slice(lastProcessed, index).join('\n');
+                        lastLabel.label = md2pango(blockContent);
+                        contentBox.add(Divider());
+                        contentBox.add(TextBlock());
+                        lastProcessed = index + 1;
+                    }
+                }
+                if (lastProcessed < lines.length) {
+                    const kids = self.get_children();
+                    const lastLabel = kids[kids.length - 1];
+                    let blockContent = lines.slice(lastProcessed, lines.length).join('\n');
+                    if (!inCode)
+                        lastLabel.label = `${md2pango(blockContent)}${useCursor ? CHATGPT_CURSOR : ''}`;
+                    else
+                        lastLabel.attribute.updateText(blockContent);
+                }
+                // Debug: plain text
+                // contentBox.add(Label({
+                //     hpack: 'fill',
+                //     className: 'txt sidebar-chat-txtblock sidebar-chat-txt',
+                //     useMarkup: false,
+                //     xalign: 0,
+                //     wrap: true,
+                //     selectable: true,
+                //     label: '------------------------------\n' + md2pango(content),
+                // }))
+                contentBox.show_all();
+            }
+        }
+    });
+    contentBox.attribute.fullUpdate(contentBox, content, false);
+    return contentBox;
+}
+
+export const ChatMessage = (message, modelName = 'Model') => {
+    const messageContentBox = MessageContent(message.content);
+    const thisMessage = Box({
+        className: 'sidebar-chat-message',
+        children: [
+            Box({
+                className: `sidebar-chat-indicator ${message.role == 'user' ? 'sidebar-chat-indicator-user' : 'sidebar-chat-indicator-bot'}`,
+            }),
+            Box({
+                vertical: true,
+                hpack: 'fill',
+                hexpand: true,
+                children: [
+                    Label({
+                        hpack: 'fill',
+                        xalign: 0,
+                        className: 'txt txt-bold sidebar-chat-name',
+                        wrap: true,
+                        useMarkup: true,
+                        label: (message.role == 'user' ? USERNAME : modelName),
+                    }),
+                    messageContentBox,
+                ],
+                setup: (self) => self
+                    .hook(message, (self, isThinking) => {
+                        messageContentBox.toggleClassName('thinking', message.thinking);
+                    }, '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')
+                ,
+            })
+        ]
+    });
+    return thisMessage;
+}
+
+export const SystemMessage = (content, commandName, scrolledWindow) => {
+    const messageContentBox = MessageContent(content);
+    const thisMessage = Box({
+        className: 'sidebar-chat-message',
+        children: [
+            Box({
+                className: `sidebar-chat-indicator sidebar-chat-indicator-System`,
+            }),
+            Box({
+                vertical: true,
+                hpack: 'fill',
+                hexpand: true,
+                children: [
+                    Label({
+                        xalign: 0,
+                        className: 'txt txt-bold sidebar-chat-name',
+                        wrap: true,
+                        label: `System  •  ${commandName}`,
+                    }),
+                    messageContentBox,
+                ],
+            })
+        ],
+    });
+    return thisMessage;
+}

modules/styling/config/widgets/sideleft/apis/chatgpt.js

@@ -0,0 +1,272 @@
+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';
+import { MaterialIcon } from "../../../lib/materialicon.js";
+import { setupCursorHover, setupCursorHoverInfo } from "../../../lib/cursorhover.js";
+import { SystemMessage, ChatMessage } from "./ai_chatmessage.js";
+import { ConfigToggle, ConfigSegmentedSelection, ConfigGap } from '../../../lib/configwidgets.js';
+import { markdownTest } from '../../../lib/md2pango.js';
+import { MarginRevealer } from '../../../lib/advancedwidgets.js';
+
+Gtk.IconTheme.get_default().append_search_path(`${App.configDir}/assets`);
+
+export const chatGPTTabIcon = Icon({
+    hpack: 'center',
+    className: 'sidebar-chat-apiswitcher-icon',
+    icon: `openai-symbolic`,
+});
+
+const ChatGPTInfo = () => {
+    const openAiLogo = Icon({
+        hpack: 'center',
+        className: 'sidebar-chat-welcome-logo',
+        icon: `openai-symbolic`,
+    });
+    return Box({
+        vertical: true,
+        className: 'spacing-v-15',
+        children: [
+            openAiLogo,
+            Label({
+                className: 'txt txt-title-small sidebar-chat-welcome-txt',
+                wrap: true,
+                justify: Gtk.Justification.CENTER,
+                label: 'Assistant (ChatGPT 3.5)',
+            }),
+            Box({
+                className: 'spacing-h-5',
+                hpack: 'center',
+                children: [
+                    Label({
+                        className: 'txt-smallie txt-subtext',
+                        wrap: true,
+                        justify: Gtk.Justification.CENTER,
+                        label: 'Powered by OpenAI',
+                    }),
+                    Button({
+                        className: 'txt-subtext txt-norm icon-material',
+                        label: 'info',
+                        tooltipText: 'Uses gpt-3.5-turbo.\nNot affiliated, endorsed, or sponsored by OpenAI.',
+                        setup: setupCursorHoverInfo,
+                    }),
+                ]
+            }),
+        ]
+    });
+}
+
+export const ChatGPTSettings = () => MarginRevealer({
+    transition: 'slide_down',
+    revealChild: true,
+    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',
+        children: [
+            ConfigSegmentedSelection({
+                hpack: 'center',
+                icon: 'casino',
+                name: 'Randomness',
+                desc: 'ChatGPT\'s temperature value.\n  Precise = 0\n  Balanced = 0.5\n  Creative = 1',
+                options: [
+                    { value: 0.00, name: 'Precise', },
+                    { value: 0.50, name: 'Balanced', },
+                    { value: 1.00, name: 'Creative', },
+                ],
+                initIndex: 2,
+                onChange: (value, name) => {
+                    ChatGPT.temperature = value;
+                },
+            }),
+            ConfigGap({ vertical: true, size: 10 }), // Note: size can only be 5, 10, or 15 
+            Box({
+                vertical: true,
+                hpack: 'fill',
+                className: 'sidebar-chat-settings-toggles',
+                children: [
+                    ConfigToggle({
+                        icon: 'cycle',
+                        name: 'Cycle models',
+                        desc: 'Helps avoid exceeding the API rate of 3 messages per minute.\nTurn this on if you message rapidly.',
+                        initValue: ChatGPT.cycleModels,
+                        onChange: (self, newValue) => {
+                            ChatGPT.cycleModels = newValue;
+                        },
+                    }),
+                    ConfigToggle({
+                        icon: 'model_training',
+                        name: 'Enhancements',
+                        desc: 'Tells ChatGPT:\n- It\'s a Linux sidebar assistant\n- Be brief and use bullet points',
+                        initValue: ChatGPT.assistantPrompt,
+                        onChange: (self, newValue) => {
+                            ChatGPT.assistantPrompt = newValue;
+                        },
+                    }),
+                ]
+            })
+        ]
+    })
+});
+
+export const OpenaiApiKeyInstructions = () => Box({
+    homogeneous: true,
+    children: [Revealer({
+        transition: 'slide_down',
+        transitionDuration: 150,
+        setup: (self) => self
+            .hook(ChatGPT, (self, hasKey) => {
+                self.revealChild = (ChatGPT.key.length == 0);
+            }, 'hasKey')
+        ,
+        child: Button({
+            child: Label({
+                useMarkup: true,
+                wrap: true,
+                className: 'txt sidebar-chat-welcome-txt',
+                justify: Gtk.Justification.CENTER,
+                label: 'An OpenAI API key is required\nYou can grab one <u>here</u>, then enter it below'
+            }),
+            setup: setupCursorHover,
+            onClicked: () => {
+                Utils.execAsync(['bash', '-c', `xdg-open https://platform.openai.com/api-keys &`]);
+            }
+        })
+    })]
+});
+
+const chatGPTWelcome = Box({
+    vexpand: true,
+    homogeneous: true,
+    child: Box({
+        className: 'spacing-v-15',
+        vpack: 'center',
+        vertical: true,
+        children: [
+            ChatGPTInfo(),
+            OpenaiApiKeyInstructions(),
+            ChatGPTSettings(),
+        ]
+    })
+});
+
+export const chatContent = Box({
+    className: 'spacing-v-15',
+    vertical: true,
+    setup: (self) => self
+        .hook(ChatGPT, (box, id) => {
+            const message = ChatGPT.messages[id];
+            if (!message) return;
+            box.add(ChatMessage(message, 'ChatGPT'))
+        }, 'newMsg')
+    ,
+});
+
+const clearChat = () => {
+    ChatGPT.clear();
+    const children = chatContent.get_children();
+    for (let i = 0; i < children.length; i++) {
+        const child = children[i];
+        child.destroy();
+    }
+}
+
+export const chatGPTView = Scrollable({
+    className: 'sidebar-chat-viewport',
+    vexpand: true,
+    child: Box({
+        vertical: true,
+        children: [
+            chatGPTWelcome,
+            chatContent,
+        ]
+    }),
+    setup: (scrolledWindow) => {
+        // Show scrollbar
+        scrolledWindow.set_policy(Gtk.PolicyType.NEVER, Gtk.PolicyType.AUTOMATIC);
+        const vScrollbar = scrolledWindow.get_vscrollbar();
+        vScrollbar.get_style_context().add_class('sidebar-scrollbar');
+        // Avoid click-to-scroll-widget-to-view behavior
+        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 }),
+        CommandButton('/key'),
+        CommandButton('/model'),
+        CommandButton('/clear'),
+    ]
+});
+
+export const sendMessage = (text) => {
+    // Check if text or API key is empty
+    if (text.length == 0) return;
+    if (ChatGPT.key.length == 0) {
+        ChatGPT.key = text;
+        chatContent.add(SystemMessage(`Key saved to\n\`${ChatGPT.keyPath}\``, 'API Key', chatGPTView));
+        text = '';
+        return;
+    }
+    // Commands
+    if (text.startsWith('/')) {
+        if (text.startsWith('/clear')) clearChat();
+        else if (text.startsWith('/model')) chatContent.add(SystemMessage(`Currently using \`${ChatGPT.modelName}\``, '/model', chatGPTView))
+        else if (text.startsWith('/prompt')) {
+            const firstSpaceIndex = text.indexOf(' ');
+            const prompt = text.slice(firstSpaceIndex + 1);
+            if (firstSpaceIndex == -1 || prompt.length < 1) {
+                chatContent.add(SystemMessage(`Usage: \`/prompt MESSAGE\``, '/prompt', chatGPTView))
+            }
+            else {
+                ChatGPT.addMessage('user', prompt)
+            }
+        }
+        else if (text.startsWith('/key')) {
+            const parts = text.split(' ');
+            if (parts.length == 1) chatContent.add(SystemMessage(
+                `Key stored in:\n\`${ChatGPT.keyPath}\`\nTo update this key, type \`/key YOUR_API_KEY\``,
+                '/key',
+                chatGPTView));
+            else {
+                ChatGPT.key = parts[1];
+                chatContent.add(SystemMessage(`Updated API Key at\n\`${ChatGPT.keyPath}\``, '/key', chatGPTView));
+            }
+        }
+        else if (text.startsWith('/test'))
+            chatContent.add(SystemMessage(markdownTest, `Markdown test`, chatGPTView));
+        else
+            chatContent.add(SystemMessage(`Invalid command.`, 'Error', chatGPTView))
+    }
+    else {
+        ChatGPT.send(text);
+    }
+}

modules/styling/config/widgets/sideleft/apis/gemini.js

@@ -0,0 +1,264 @@
+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 Gemini from '../../../services/gemini.js';
+import { MaterialIcon } from "../../../lib/materialicon.js";
+import { setupCursorHover, setupCursorHoverInfo } from "../../../lib/cursorhover.js";
+import { SystemMessage, ChatMessage } from "./ai_chatmessage.js";
+import { ConfigToggle, ConfigSegmentedSelection, ConfigGap } from '../../../lib/configwidgets.js';
+import { markdownTest } from '../../../lib/md2pango.js';
+import { MarginRevealer } from '../../../lib/advancedwidgets.js';
+
+Gtk.IconTheme.get_default().append_search_path(`${App.configDir}/assets`);
+const MODEL_NAME = `Gemini`;
+
+export const geminiTabIcon = Icon({
+    hpack: 'center',
+    className: 'sidebar-chat-apiswitcher-icon',
+    icon: `google-gemini-symbolic`,
+})
+
+const GeminiInfo = () => {
+    const geminiLogo = Icon({
+        hpack: 'center',
+        className: 'sidebar-chat-welcome-logo',
+        icon: `google-gemini-symbolic`,
+    });
+    return Box({
+        vertical: true,
+        className: 'spacing-v-15',
+        children: [
+            geminiLogo,
+            Label({
+                className: 'txt txt-title-small sidebar-chat-welcome-txt',
+                wrap: true,
+                justify: Gtk.Justification.CENTER,
+                label: 'Assistant (Gemini Pro)',
+            }),
+            Box({
+                className: 'spacing-h-5',
+                hpack: 'center',
+                children: [
+                    Label({
+                        className: 'txt-smallie txt-subtext',
+                        wrap: true,
+                        justify: Gtk.Justification.CENTER,
+                        label: 'Powered by Google',
+                    }),
+                    Button({
+                        className: 'txt-subtext txt-norm icon-material',
+                        label: 'info',
+                        tooltipText: 'Uses gemini-pro.\nNot affiliated, endorsed, or sponsored by Google.',
+                        setup: setupCursorHoverInfo,
+                    }),
+                ]
+            }),
+        ]
+    });
+}
+
+export const GeminiSettings = () => MarginRevealer({
+    transition: 'slide_down',
+    revealChild: true,
+    extraSetup: (self) => self
+        .hook(Gemini, (self) => Utils.timeout(200, () => {
+            self.attribute.hide();
+        }), 'newMsg')
+        .hook(Gemini, (self) => Utils.timeout(200, () => {
+            self.attribute.show();
+        }), 'clear')
+    ,
+    child: Box({
+        vertical: true,
+        className: 'sidebar-chat-settings',
+        children: [
+            ConfigSegmentedSelection({
+                hpack: 'center',
+                icon: 'casino',
+                name: 'Randomness',
+                desc: 'Gemini\'s temperature value.\n  Precise = 0\n  Balanced = 0.5\n  Creative = 1',
+                options: [
+                    { value: 0.00, name: 'Precise', },
+                    { value: 0.50, name: 'Balanced', },
+                    { value: 1.00, name: 'Creative', },
+                ],
+                initIndex: 2,
+                onChange: (value, name) => {
+                    Gemini.temperature = value;
+                },
+            }),
+            ConfigGap({ vertical: true, size: 10 }), // Note: size can only be 5, 10, or 15 
+            Box({
+                vertical: true,
+                hpack: 'fill',
+                className: 'sidebar-chat-settings-toggles',
+                children: [
+                    ConfigToggle({
+                        icon: 'model_training',
+                        name: 'Enhancements',
+                        desc: 'Tells Gemini:\n- It\'s a Linux sidebar assistant\n- Be brief and use bullet points',
+                        initValue: Gemini.assistantPrompt,
+                        onChange: (self, newValue) => {
+                            Gemini.assistantPrompt = newValue;
+                        },
+                    }),
+                ]
+            })
+        ]
+    })
+});
+
+export const GoogleAiInstructions = () => Box({
+    homogeneous: true,
+    children: [Revealer({
+        transition: 'slide_down',
+        transitionDuration: 150,
+        setup: (self) => self
+            .hook(Gemini, (self, hasKey) => {
+                self.revealChild = (Gemini.key.length == 0);
+            }, 'hasKey')
+        ,
+        child: Button({
+            child: Label({
+                useMarkup: true,
+                wrap: true,
+                className: 'txt sidebar-chat-welcome-txt',
+                justify: Gtk.Justification.CENTER,
+                label: 'A Google AI API key is required\nYou can grab one <u>here</u>, then enter it below'
+            }),
+            setup: setupCursorHover,
+            onClicked: () => {
+                Utils.execAsync(['bash', '-c', `xdg-open https://makersuite.google.com/app/apikey &`]);
+            }
+        })
+    })]
+});
+
+const geminiWelcome = Box({
+    vexpand: true,
+    homogeneous: true,
+    child: Box({
+        className: 'spacing-v-15',
+        vpack: 'center',
+        vertical: true,
+        children: [
+            GeminiInfo(),
+            GoogleAiInstructions(),
+            GeminiSettings(),
+        ]
+    })
+});
+
+export const chatContent = Box({
+    className: 'spacing-v-15',
+    vertical: true,
+    setup: (self) => self
+        .hook(Gemini, (box, id) => {
+            const message = Gemini.messages[id];
+            if (!message) return;
+            box.add(ChatMessage(message, MODEL_NAME))
+        }, 'newMsg')
+    ,
+});
+
+const clearChat = () => {
+    Gemini.clear();
+    const children = chatContent.get_children();
+    for (let i = 0; i < children.length; i++) {
+        const child = children[i];
+        child.destroy();
+    }
+}
+
+export const geminiView = Scrollable({
+    className: 'sidebar-chat-viewport',
+    vexpand: true,
+    child: Box({
+        vertical: true,
+        children: [
+            geminiWelcome,
+            chatContent,
+        ]
+    }),
+    setup: (scrolledWindow) => {
+        // Show scrollbar
+        scrolledWindow.set_policy(Gtk.PolicyType.NEVER, Gtk.PolicyType.AUTOMATIC);
+        const vScrollbar = scrolledWindow.get_vscrollbar();
+        vScrollbar.get_style_context().add_class('sidebar-scrollbar');
+        // Avoid click-to-scroll-widget-to-view behavior
+        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 geminiCommands = Box({
+    className: 'spacing-h-5',
+    children: [
+        Box({ hexpand: true }),
+        CommandButton('/key'),
+        CommandButton('/model'),
+        CommandButton('/clear'),
+    ]
+});
+
+export const sendMessage = (text) => {
+    // Check if text or API key is empty
+    if (text.length == 0) return;
+    if (Gemini.key.length == 0) {
+        Gemini.key = text;
+        chatContent.add(SystemMessage(`Key saved to\n\`${Gemini.keyPath}\``, 'API Key', geminiView));
+        text = '';
+        return;
+    }
+    // Commands
+    if (text.startsWith('/')) {
+        if (text.startsWith('/clear')) clearChat();
+        else if (text.startsWith('/model')) chatContent.add(SystemMessage(`Currently using \`${Gemini.modelName}\``, '/model', geminiView))
+        else if (text.startsWith('/prompt')) {
+            const firstSpaceIndex = text.indexOf(' ');
+            const prompt = text.slice(firstSpaceIndex + 1);
+            if (firstSpaceIndex == -1 || prompt.length < 1) {
+                chatContent.add(SystemMessage(`Usage: \`/prompt MESSAGE\``, '/prompt', geminiView))
+            }
+            else {
+                Gemini.addMessage('user', prompt)
+            }
+        }
+        else if (text.startsWith('/key')) {
+            const parts = text.split(' ');
+            if (parts.length == 1) chatContent.add(SystemMessage(
+                `Key stored in:\n\`${Gemini.keyPath}\`\nTo update this key, type \`/key YOUR_API_KEY\``,
+                '/key',
+                geminiView));
+            else {
+                Gemini.key = parts[1];
+                chatContent.add(SystemMessage(`Updated API Key at\n\`${Gemini.keyPath}\``, '/key', geminiView));
+            }
+        }
+        else if (text.startsWith('/test'))
+            chatContent.add(SystemMessage(markdownTest, `Markdown test`, geminiView));
+        else
+            chatContent.add(SystemMessage(`Invalid command.`, 'Error', geminiView))
+    }
+    else {
+        Gemini.send(text);
+    }
+}

modules/styling/config/widgets/sideleft/apis/waifu.js

@@ -0,0 +1,431 @@
+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 { MarginRevealer } from '../../../lib/advancedwidgets.js';
+import { setupCursorHover, setupCursorHoverInfo } 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',
+    homogeneous: true,
+    children: [
+        MaterialIcon('photo_library', 'norm'),
+    ]
+});
+
+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,
+        children: {
+            '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_size(thisBlock.attribute.imagePath, widgetWidth, widgetHeight);
+                    // 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 WaifuInfo = () => {
+    const waifuLogo = Label({
+        hpack: 'center',
+        className: 'sidebar-chat-welcome-logo',
+        label: 'photo_library',
+    })
+    return Box({
+        vertical: true,
+        vexpand: true,
+        className: 'spacing-v-15',
+        children: [
+            waifuLogo,
+            Label({
+                className: 'txt txt-title-small sidebar-chat-welcome-txt',
+                wrap: true,
+                justify: Gtk.Justification.CENTER,
+                label: 'Waifus',
+            }),
+            Box({
+                className: 'spacing-h-5',
+                hpack: 'center',
+                children: [
+                    Label({
+                        className: 'txt-smallie txt-subtext',
+                        wrap: true,
+                        justify: Gtk.Justification.CENTER,
+                        label: 'Powered by waifu.im',
+                    }),
+                    Button({
+                        className: 'txt-subtext txt-norm icon-material',
+                        label: 'info',
+                        tooltipText: 'A free Waifu API. An alternative to waifu.pics.',
+                        setup: setupCursorHoverInfo,
+                    }),
+                ]
+            }),
+        ]
+    });
+}
+
+const waifuWelcome = Box({
+    vexpand: true,
+    homogeneous: true,
+    child: Box({
+        className: 'spacing-v-15',
+        vpack: 'center',
+        vertical: true,
+        children: [
+            WaifuInfo(),
+        ]
+    })
+});
+
+const waifuContent = Box({
+    className: 'spacing-v-15',
+    vertical: 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({
+    className: 'sidebar-chat-viewport',
+    vexpand: true,
+    child: Box({
+        vertical: true,
+        children: [
+            waifuWelcome,
+            waifuContent,
+        ]
+    }),
+    setup: (scrolledWindow) => {
+        // Show scrollbar
+        scrolledWindow.set_policy(Gtk.PolicyType.NEVER, Gtk.PolicyType.AUTOMATIC);
+        const vScrollbar = scrolledWindow.get_vscrollbar();
+        vScrollbar.get_style_context().add_class('sidebar-scrollbar');
+        // Avoid click-to-scroll-widget-to-view behavior
+        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 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',
+    setup: (self) => {
+        self.pack_end(CommandButton('/clear'), false, false, 0);
+        self.pack_start(Button({
+            className: 'sidebar-chat-chip-toggle',
+            setup: setupCursorHover,
+            label: 'Tags →',
+            onClicked: () => {
+                waifuTags.revealChild = !waifuTags.revealChild;
+            }
+        }), false, false, 0);
+        self.pack_start(waifuTags, true, true, 0);
+    }
+});
+
+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();
+    }
+}
+
+const DummyTag = (width, height, url, color = '#9392A6') => {
+    return { // Needs timeout or inits won't make it
+        status: 200,
+        url: url,
+        extension: '',
+        signature: 0,
+        source: url,
+        dominant_color: color,
+        is_nsfw: false,
+        width: width,
+        height: height,
+        tags: ['/test'],
+    };
+}
+
+export const sendMessage = (text) => {
+    // Do something on send
+    // 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(
+                DummyTag(300, 200, 'https://picsum.photos/600/400'),
+                true
+            ));
+        }
+        else if (text.startsWith('/chino')) {
+            const newImage = WaifuImage(['/chino']);
+            waifuContent.add(newImage);
+            Utils.timeout(IMAGE_REVEAL_DELAY, () => newImage.attribute.update(
+                DummyTag(300, 400, 'https://chino.pages.dev/chino', '#B2AEF3'),
+                true
+            ));
+        }
+        else if (text.startsWith('/place')) {
+            const newImage = WaifuImage(['/place']);
+            waifuContent.add(newImage);
+            Utils.timeout(IMAGE_REVEAL_DELAY, () => newImage.attribute.update(
+                DummyTag(400, 600, 'https://placewaifu.com/image/400/600', '#F0A235'),
+                true
+            ));
+        }
+
+    }
+    else WaifuService.fetch(text);
+}

modules/styling/config/widgets/sideleft/apiwidgets.js

@@ -0,0 +1,225 @@
+const { Gtk, Gdk } = imports.gi;
+import App from 'resource:///com/github/Aylur/ags/app.js';
+import Widget from 'resource:///com/github/Aylur/ags/widget.js';
+import AgsWidget from "resource:///com/github/Aylur/ags/widgets/widget.js";
+import * as Utils from 'resource:///com/github/Aylur/ags/utils.js';
+const { Box, Button, CenterBox, Entry, EventBox, Icon, Label, Overlay, Revealer, Scrollable, Stack } = Widget;
+const { execAsync, exec } = Utils;
+import { setupCursorHover, setupCursorHoverInfo } from "../../lib/cursorhover.js";
+import { contentStack } from './sideleft.js';
+// APIs
+import ChatGPT from '../../services/chatgpt.js';
+import Gemini from '../../services/gemini.js';
+import { geminiView, geminiCommands, sendMessage as geminiSendMessage, geminiTabIcon } from './apis/gemini.js';
+import { chatGPTView, chatGPTCommands, sendMessage as chatGPTSendMessage, chatGPTTabIcon } from './apis/chatgpt.js';
+import { waifuView, waifuCommands, sendMessage as waifuSendMessage, waifuTabIcon } from './apis/waifu.js';
+import { enableClickthrough } from '../../lib/roundedcorner.js';
+const TextView = Widget.subclass(Gtk.TextView, "AgsTextView");
+
+
+const EXPAND_INPUT_THRESHOLD = 30;
+const APIS = [
+    {
+        name: 'Assistant (Gemini Pro)',
+        sendCommand: geminiSendMessage,
+        contentWidget: geminiView,
+        commandBar: geminiCommands,
+        tabIcon: geminiTabIcon,
+        placeholderText: 'Message Gemini...',
+    },
+    {
+        name: 'Assistant (ChatGPT 3.5)',
+        sendCommand: chatGPTSendMessage,
+        contentWidget: chatGPTView,
+        commandBar: chatGPTCommands,
+        tabIcon: chatGPTTabIcon,
+        placeholderText: 'Message ChatGPT...',
+    },
+    {
+        name: 'Waifus',
+        sendCommand: waifuSendMessage,
+        contentWidget: waifuView,
+        commandBar: waifuCommands,
+        tabIcon: waifuTabIcon,
+        placeholderText: 'Enter tags',
+    },
+];
+let currentApiId = 0;
+APIS[currentApiId].tabIcon.toggleClassName('sidebar-chat-apiswitcher-icon-enabled', true);
+
+function apiSendMessage(textView) {
+    // Get text
+    const buffer = textView.get_buffer();
+    const [start, end] = buffer.get_bounds();
+    const text = buffer.get_text(start, end, true).trimStart();
+    if (!text || text.length == 0) return;
+    // Send
+    APIS[currentApiId].sendCommand(text)
+    // Reset
+    buffer.set_text("", -1);
+    chatEntryWrapper.toggleClassName('sidebar-chat-wrapper-extended', false);
+    chatEntry.set_valign(Gtk.Align.CENTER);
+}
+
+export const chatEntry = TextView({
+    hexpand: true,
+    wrapMode: Gtk.WrapMode.WORD_CHAR,
+    acceptsTab: false,
+    className: 'sidebar-chat-entry txt txt-smallie',
+    setup: (self) => self
+        .hook(ChatGPT, (self) => {
+            if (APIS[currentApiId].name != 'Assistant (ChatGPT 3.5)') return;
+            self.placeholderText = (ChatGPT.key.length > 0 ? 'Message ChatGPT...' : 'Enter OpenAI API Key...');
+        }, 'hasKey')
+        .hook(Gemini, (self) => {
+            if (APIS[currentApiId].name != 'Assistant (Gemini Pro)') return;
+            self.placeholderText = (Gemini.key.length > 0 ? 'Message Gemini...' : 'Enter Google AI API Key...');
+        }, 'hasKey')
+        .on("key-press-event", (widget, event) => {
+            const keyval = event.get_keyval()[1];
+            if (event.get_keyval()[1] === Gdk.KEY_Return && event.get_state()[1] == Gdk.ModifierType.MOD2_MASK) {
+                apiSendMessage(widget);
+                return true;
+            }
+            // Global keybinds
+            if (!(event.get_state()[1] & Gdk.ModifierType.CONTROL_MASK) &&
+                event.get_keyval()[1] === Gdk.KEY_Page_Down) {
+                const toSwitchTab = contentStack.get_visible_child();
+                toSwitchTab.attribute.nextTab();
+            }
+            else if (!(event.get_state()[1] & Gdk.ModifierType.CONTROL_MASK) &&
+                event.get_keyval()[1] === Gdk.KEY_Page_Up) {
+                const toSwitchTab = contentStack.get_visible_child();
+                toSwitchTab.attribute.prevTab();
+            }
+        })
+    ,
+});
+
+chatEntry.get_buffer().connect("changed", (buffer) => {
+    const bufferText = buffer.get_text(buffer.get_start_iter(), buffer.get_end_iter(), true);
+    chatSendButton.toggleClassName('sidebar-chat-send-available', bufferText.length > 0);
+    chatPlaceholderRevealer.revealChild = (bufferText.length == 0);
+    if (buffer.get_line_count() > 1 || bufferText.length > EXPAND_INPUT_THRESHOLD) {
+        chatEntryWrapper.toggleClassName('sidebar-chat-wrapper-extended', true);
+        chatEntry.set_valign(Gtk.Align.FILL);
+        chatPlaceholder.set_valign(Gtk.Align.FILL);
+    }
+    else {
+        chatEntryWrapper.toggleClassName('sidebar-chat-wrapper-extended', false);
+        chatEntry.set_valign(Gtk.Align.CENTER);
+        chatPlaceholder.set_valign(Gtk.Align.CENTER);
+    }
+});
+
+const chatEntryWrapper = Scrollable({
+    className: 'sidebar-chat-wrapper',
+    hscroll: 'never',
+    vscroll: 'always',
+    child: chatEntry,
+});
+
+const chatSendButton = Button({
+    className: 'txt-norm icon-material sidebar-chat-send',
+    vpack: 'end',
+    label: 'arrow_upward',
+    setup: setupCursorHover,
+    onClicked: (self) => {
+        APIS[currentApiId].sendCommand(chatEntry.get_buffer().text);
+        chatEntry.get_buffer().set_text("", -1);
+    },
+});
+
+const chatPlaceholder = Label({
+    className: 'txt-subtext txt-smallie margin-left-5',
+    hpack: 'start',
+    vpack: 'center',
+    label: APIS[currentApiId].placeholderText,
+});
+
+const chatPlaceholderRevealer = Revealer({
+    revealChild: true,
+    transition: 'crossfade',
+    transitionDuration: 200,
+    child: chatPlaceholder,
+    setup: enableClickthrough,
+});
+
+const textboxArea = Box({ // Entry area
+    className: 'sidebar-chat-textarea',
+    children: [
+        Overlay({
+            passThrough: true,
+            child: chatEntryWrapper,
+            overlays: [chatPlaceholderRevealer],
+        }),
+        Box({ className: 'width-10' }),
+        chatSendButton,
+    ]
+});
+
+const apiContentStack = Stack({
+    vexpand: true,
+    transition: 'slide_left_right',
+    transitionDuration: 160,
+    children: APIS.reduce((acc, api) => {
+        acc[api.name] = api.contentWidget;
+        return acc;
+    }, {}),
+})
+
+const apiCommandStack = Stack({
+    transition: 'slide_up_down',
+    transitionDuration: 160,
+    children: APIS.reduce((acc, api) => {
+        acc[api.name] = api.commandBar;
+        return acc;
+    }, {}),
+})
+
+function switchToTab(id) {
+    APIS[currentApiId].tabIcon.toggleClassName('sidebar-chat-apiswitcher-icon-enabled', false);
+    APIS[id].tabIcon.toggleClassName('sidebar-chat-apiswitcher-icon-enabled', true);
+    apiContentStack.shown = APIS[id].name;
+    apiCommandStack.shown = APIS[id].name;
+    chatPlaceholder.label = APIS[id].placeholderText;
+    currentApiId = id;
+}
+
+const apiSwitcher = CenterBox({
+    centerWidget: Box({
+        className: 'sidebar-chat-apiswitcher spacing-h-5',
+        hpack: 'center',
+        children: APIS.map((api, id) => Button({
+            child: api.tabIcon,
+            tooltipText: api.name,
+            setup: setupCursorHover,
+            onClicked: () => {
+                switchToTab(id);
+            }
+        })),
+    }),
+    endWidget: Button({
+        hpack: 'end',
+        className: 'txt-subtext txt-norm icon-material',
+        label: 'lightbulb',
+        tooltipText: 'Use PageUp/PageDown to switch between API pages',
+        setup: setupCursorHoverInfo,
+    }),
+})
+
+export default Widget.Box({
+    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,
+    children: [
+        apiSwitcher,
+        apiContentStack,
+        apiCommandStack,
+        textboxArea,
+    ],
+});

modules/styling/config/widgets/sideleft/main.js

@@ -0,0 +1,12 @@
+import PopupWindow from '../../lib/popupwindow.js';
+import SidebarLeft from "./sideleft.js";
+
+export default () => PopupWindow({
+    keymode: 'exclusive',
+    anchor: ['left', 'top', 'bottom'],
+    name: 'sideleft',
+    layer: 'top',
+    showClassName: 'sideleft-show',
+    hideClassName: 'sideleft-hide',
+    child: SidebarLeft(),
+});

modules/styling/config/widgets/sideleft/sideleft.js

@@ -0,0 +1,211 @@
+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";
+import { setupCursorHover } from "../../lib/cursorhover.js";
+import { NavigationIndicator } from "../../lib/navigationindicator.js";
+import toolBox from './toolbox.js';
+import apiWidgets from './apiwidgets.js';
+import apiwidgets, { chatEntry } from './apiwidgets.js';
+
+const contents = [
+    {
+        name: 'apis',
+        content: apiWidgets,
+        materialIcon: 'api',
+        friendlyName: 'APIs',
+    },
+    {
+        name: 'tools',
+        content: toolBox,
+        materialIcon: 'home_repair_service',
+        friendlyName: 'Tools',
+    },
+]
+let currentTabId = 0;
+
+export const contentStack = Stack({
+    vexpand: true,
+    transition: 'slide_left_right',
+    transitionDuration: 160,
+    children: contents.reduce((acc, item) => {
+        acc[item.name] = item.content;
+        return acc;
+    }, {}),
+})
+
+function switchToTab(id) {
+    const allTabs = navTabs.get_children();
+    const tabButton = allTabs[id];
+    allTabs[currentTabId].toggleClassName('sidebar-selector-tab-active', false);
+    allTabs[id].toggleClassName('sidebar-selector-tab-active', true);
+    contentStack.shown = contents[id].name;
+    if (tabButton) {
+        // Fancy highlighter line width
+        const buttonWidth = tabButton.get_allocated_width();
+        const highlightWidth = tabButton.get_children()[0].get_allocated_width();
+        navIndicator.css = `
+            font-size: ${id}px; 
+            padding: 0px ${(buttonWidth - highlightWidth) / 2}px;
+        `;
+    }
+    currentTabId = id;
+}
+const SidebarTabButton = (navIndex) => Widget.Button({
+    // hexpand: true,
+    className: 'sidebar-selector-tab',
+    onClicked: (self) => {
+        switchToTab(navIndex);
+    },
+    child: Box({
+        hpack: 'center',
+        className: 'spacing-h-5',
+        children: [
+            MaterialIcon(contents[navIndex].materialIcon, 'larger'),
+            Label({
+                className: 'txt txt-smallie',
+                label: `${contents[navIndex].friendlyName}`,
+            })
+        ]
+    }),
+    setup: (button) => Utils.timeout(1, () => {
+        setupCursorHover(button);
+        button.toggleClassName('sidebar-selector-tab-active', currentTabId == navIndex);
+    }),
+});
+
+const navTabs = Box({
+    homogeneous: true,
+    children: contents.map((item, id) =>
+        SidebarTabButton(id, item.materialIcon, item.friendlyName)
+    ),
+});
+
+const navIndicator = NavigationIndicator(2, false, { // The line thing
+    className: 'sidebar-selector-highlight',
+    css: 'font-size: 0px; padding: 0rem 4.160rem;', // Shushhhh
+});
+
+const navBar = Box({
+    vertical: true,
+    hexpand: true,
+    children: [
+        navTabs,
+        navIndicator,
+    ]
+});
+
+const pinButton = Button({
+    attribute: {
+        'enabled': false,
+        'toggle': (self) => {
+            self.attribute.enabled = !self.attribute.enabled;
+            self.toggleClassName('sidebar-pin-enabled', self.attribute.enabled);
+
+            const sideleftWindow = App.getWindow('sideleft');
+            const sideleftContent = sideleftWindow.get_children()[0].get_children()[0].get_children()[1];
+
+            sideleftContent.toggleClassName('sidebar-pinned', self.attribute.enabled);
+
+            if (self.attribute.enabled) {
+                sideleftWindow.exclusivity = 'exclusive';
+            }
+            else {
+                sideleftWindow.exclusivity = 'normal';
+            }
+        },
+    },
+    vpack: 'start',
+    className: 'sidebar-pin',
+    child: MaterialIcon('push_pin', 'larger'),
+    tooltipText: 'Pin sidebar (Ctrl+P)',
+    onClicked: (self) => self.attribute.toggle(self),
+    setup: (self) => {
+        setupCursorHover(self);
+        self.hook(App, (self, currentName, visible) => {
+            if (currentName === 'sideleft' && visible) self.grab_focus();
+        })
+    },
+})
+
+export default () => Box({
+    // vertical: true,
+    vexpand: true,
+    hexpand: true,
+    css: 'min-width: 2px;',
+    children: [
+        EventBox({
+            onPrimaryClick: () => App.closeWindow('sideleft'),
+            onSecondaryClick: () => App.closeWindow('sideleft'),
+            onMiddleClick: () => App.closeWindow('sideleft'),
+        }),
+        Box({
+            vertical: true,
+            vexpand: true,
+            className: 'sidebar-left spacing-v-10',
+            children: [
+                Box({
+                    className: 'spacing-h-10',
+                    children: [
+                        navBar,
+                        pinButton,
+                    ]
+                }),
+                contentStack,
+            ],
+            setup: (self) => self
+                .hook(App, (self, currentName, visible) => {
+                    if (currentName === 'sideleft')
+                        self.toggleClassName('sidebar-pinned', pinButton.attribute.enabled && visible);
+                })
+            ,
+        }),
+    ],
+    setup: (self) => self
+        .on('key-press-event', (widget, event) => { // Handle keybinds
+            if (event.get_state()[1] & Gdk.ModifierType.CONTROL_MASK) { // Ctrl held
+                // Pin sidebar
+                if (event.get_keyval()[1] == Gdk.KEY_p)
+                    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));
+                else if (event.get_keyval()[1] === Gdk.KEY_Page_Down)
+                    switchToTab(Math.min(currentTabId + 1, contents.length - 1));
+            }
+            if (contentStack.shown == 'apis') { // If api tab is focused
+                // Focus entry when typing
+                if ((
+                    !(event.get_state()[1] & Gdk.ModifierType.CONTROL_MASK) &&
+                    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)
+                ) {
+                    chatEntry.grab_focus();
+                    const buffer = chatEntry.get_buffer();
+                    buffer.set_text(buffer.text + String.fromCharCode(event.get_keyval()[1]), -1);
+                    buffer.place_cursor(buffer.get_iter_at_offset(-1));
+                }
+                // Switch API type
+                else if (!(event.get_state()[1] & Gdk.ModifierType.CONTROL_MASK) &&
+                    event.get_keyval()[1] === Gdk.KEY_Page_Down) {
+                    const toSwitchTab = contentStack.get_visible_child();
+                    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.attribute.prevTab();
+                }
+            }
+
+        })
+    ,
+});

modules/styling/config/widgets/sideleft/toolbox.js

@@ -0,0 +1,19 @@
+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 './tools/quickscripts.js';
+import ColorPicker from './tools/colorpicker.js';
+
+export default Scrollable({
+    hscroll: "never",
+    vscroll: "automatic",
+    child: Box({
+        vertical: true,
+        className: 'spacing-v-10',
+        children: [
+            QuickScripts(),
+            ColorPicker(),
+        ]
+    })
+});

modules/styling/config/widgets/sideleft/tools/color.js

@@ -0,0 +1,199 @@
+// It's weird, I know
+const { Gio, GLib } = imports.gi;
+import Service from 'resource:///com/github/Aylur/ags/service.js';
+import * as Utils from 'resource:///com/github/Aylur/ags/utils.js';
+const { exec, execAsync } = Utils;
+
+const clamp = (num, min, max) => Math.min(Math.max(num, min), max);
+
+export class ColorPickerSelection extends Service {
+    static {
+        Service.register(this, {
+            'picked': [],
+            'assigned': ['int'],
+            'hue': [],
+            'sl': [],
+        });
+    }
+
+    _hue = 198;
+    _xAxis = 94;
+    _yAxis = 80;
+
+    get hue() { return this._hue; }
+    set hue(value) {
+        this._hue = clamp(value, 0, 360);
+        this.emit('hue');
+        this.emit('picked');
+        this.emit('changed');
+    }
+    get xAxis() { return this._xAxis; }
+    set xAxis(value) {
+        this._xAxis = clamp(value, 0, 100);
+        this.emit('sl');
+        this.emit('picked');
+        this.emit('changed');
+    }
+    get yAxis() { return this._yAxis; }
+    set yAxis(value) {
+        this._yAxis = clamp(value, 0, 100);
+        this.emit('sl');
+        this.emit('picked');
+        this.emit('changed');
+    }
+    setColorFromHex(hexString, id) {
+        const hsl = hexToHSL(hexString);
+        this._hue = hsl.hue;
+        this._xAxis = hsl.saturation;
+        // this._yAxis = hsl.lightness;
+        this._yAxis = (100 - hsl.saturation / 2) / 100 * hsl.lightness;
+        // console.log(this._hue, this._xAxis, this._yAxis)
+        this.emit('assigned', id);
+        this.emit('changed');
+    }
+
+    constructor() {
+        super();
+        this.emit('changed');
+    }
+}
+
+
+export function hslToRgbValues(h, s, l) {
+    h /= 360;
+    s /= 100;
+    l /= 100;
+    let r, g, b;
+    if (s === 0) {
+        r = g = b = l; // achromatic
+    } else {
+        const hue2rgb = (p, q, t) => {
+            if (t < 0) t += 1;
+            if (t > 1) t -= 1;
+            if (t < 1 / 6) return p + (q - p) * 6 * t;
+            if (t < 1 / 2) return q;
+            if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
+            return p;
+        };
+        const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+        const p = 2 * l - q;
+        r = hue2rgb(p, q, h + 1 / 3);
+        g = hue2rgb(p, q, h);
+        b = hue2rgb(p, q, h - 1 / 3);
+    }
+    const to255 = x => Math.round(x * 255);
+    r = to255(r);
+    g = to255(g);
+    b = to255(b);
+    return `${Math.round(r)},${Math.round(g)},${Math.round(b)}`;
+    // return `rgb(${r},${g},${b})`;
+}
+export function hslToHex(h, s, l) {
+    h /= 360;
+    s /= 100;
+    l /= 100;
+    let r, g, b;
+    if (s === 0) {
+        r = g = b = l; // achromatic
+    } else {
+        const hue2rgb = (p, q, t) => {
+            if (t < 0) t += 1;
+            if (t > 1) t -= 1;
+            if (t < 1 / 6) return p + (q - p) * 6 * t;
+            if (t < 1 / 2) return q;
+            if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
+            return p;
+        };
+        const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+        const p = 2 * l - q;
+        r = hue2rgb(p, q, h + 1 / 3);
+        g = hue2rgb(p, q, h);
+        b = hue2rgb(p, q, h - 1 / 3);
+    }
+    const toHex = x => {
+        const hex = Math.round(x * 255).toString(16);
+        return hex.length === 1 ? "0" + hex : hex;
+    };
+    return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
+}
+
+// export function hexToHSL(hex) {
+//     // Remove the '#' if present
+//     hex = hex.replace(/^#/, '');
+//     // Parse the hex value into RGB components
+//     const bigint = parseInt(hex, 16);
+//     const r = (bigint >> 16) & 255;
+//     const g = (bigint >> 8) & 255;
+//     const b = bigint & 255;
+//     // Normalize RGB values to range [0, 1]
+//     const normalizedR = r / 255;
+//     const normalizedG = g / 255;
+//     const normalizedB = b / 255;
+//     // Find the maximum and minimum values
+//     const max = Math.max(normalizedR, normalizedG, normalizedB);
+//     const min = Math.min(normalizedR, normalizedG, normalizedB);
+//     // Calculate the lightness
+//     const lightness = (max + min) / 2;
+//     // If the color is grayscale, set saturation to 0
+//     if (max === min) {
+//         return {
+//             hue: 0,
+//             saturation: 0,
+//             lightness: lightness * 100 // Convert to percentage
+//         };
+//     }
+//     // Calculate the saturation
+//     const d = max - min;
+//     const saturation = lightness > 0.5 ? d / (2 - max - min) : d / (max + min);
+//     // Calculate the hue
+//     let hue;
+//     if (max === normalizedR) {
+//         hue = ((normalizedG - normalizedB) / d + (normalizedG < normalizedB ? 6 : 0)) * 60;
+//     } else if (max === normalizedG) {
+//         hue = ((normalizedB - normalizedR) / d + 2) * 60;
+//     } else {
+//         hue = ((normalizedR - normalizedG) / d + 4) * 60;
+//     }
+//     return {
+//         hue: Math.round(hue),
+//         saturation: Math.round(saturation * 100), // Convert to percentage
+//         lightness: Math.round(lightness * 100) // Convert to percentage
+//     };
+// }
+
+export function hexToHSL(hex) {
+    var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+
+    var r = parseInt(result[1], 16);
+    var g = parseInt(result[2], 16);
+    var b = parseInt(result[3], 16);
+
+    r /= 255, g /= 255, b /= 255;
+    var max = Math.max(r, g, b), min = Math.min(r, g, b);
+    var h, s, l = (max + min) / 2;
+
+    if (max == min) {
+        h = s = 0; // achromatic
+    } else {
+        var d = max - min;
+        s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+        switch (max) {
+            case r: h = (g - b) / d + (g < b ? 6 : 0); break;
+            case g: h = (b - r) / d + 2; break;
+            case b: h = (r - g) / d + 4; break;
+        }
+        h /= 6;
+    }
+
+    s = s * 100;
+    s = Math.round(s);
+    l = l * 100;
+    l = Math.round(l);
+    h = Math.round(360 * h);
+
+    return {
+        hue: h,
+        saturation: s,
+        lightness: l
+    };
+}

modules/styling/config/widgets/sideleft/tools/colorpicker.js

@@ -0,0 +1,284 @@
+// TODO: Make selection update when entry changes
+const { Gtk } = imports.gi;
+import App from 'resource:///com/github/Aylur/ags/app.js';
+import Variable from 'resource:///com/github/Aylur/ags/variable.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, Entry, EventBox, Icon, Label, Overlay, Scrollable } = Widget;
+import SidebarModule from './module.js';
+import { MaterialIcon } from '../../../lib/materialicon.js';
+import { setupCursorHover } from '../../../lib/cursorhover.js';
+
+import { ColorPickerSelection, hslToHex, hslToRgbValues, hexToHSL } from './color.js';
+
+const clamp = (num, min, max) => Math.min(Math.max(num, min), max);
+
+export default () => {
+    const selectedColor = new ColorPickerSelection();
+    function shouldUseBlackColor() {
+        return ((selectedColor.xAxis < 40 || (45 <= selectedColor.hue && selectedColor.hue <= 195)) &&
+            selectedColor.yAxis > 60);
+    }
+    const colorBlack = 'rgba(0,0,0,0.9)';
+    const colorWhite = 'rgba(255,255,255,0.9)';
+    const hueRange = Box({
+        homogeneous: true,
+        className: 'sidebar-module-colorpicker-wrapper',
+        children: [Box({
+            className: 'sidebar-module-colorpicker-hue',
+            css: `background: linear-gradient(to bottom, #ff6666, #ffff66, #66dd66, #66ffff, #6666ff, #ff66ff, #ff6666);`,
+        })],
+    });
+    const hueSlider = Box({
+        vpack: 'start',
+        className: 'sidebar-module-colorpicker-cursorwrapper',
+        css: `margin-top: ${13.636 * selectedColor.hue / 360}rem;`,
+        homogeneous: true,
+        children: [Box({
+            className: 'sidebar-module-colorpicker-hue-cursor',
+        })],
+        setup: (self) => self.hook(selectedColor, () => {
+            const widgetHeight = hueRange.children[0].get_allocated_height();
+            self.setCss(`margin-top: ${13.636 * selectedColor.hue / 360}rem;`)
+        }),
+    });
+    const hueSelector = Box({
+        children: [EventBox({
+            child: Overlay({
+                child: hueRange,
+                overlays: [hueSlider],
+            }),
+            attribute: {
+                clicked: false,
+                setHue: (self, event) => {
+                    const widgetHeight = hueRange.children[0].get_allocated_height();
+                    const [_, cursorX, cursorY] = event.get_coords();
+                    const cursorYPercent = clamp(cursorY / widgetHeight, 0, 1);
+                    selectedColor.hue = Math.round(cursorYPercent * 360);
+                }
+            },
+            setup: (self) => self
+                .on('motion-notify-event', (self, event) => {
+                    if (!self.attribute.clicked) return;
+                    self.attribute.setHue(self, event);
+                })
+                .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;
+                    self.attribute.setHue(self, event);
+                })
+                .on('button-release-event', (self) => self.attribute.clicked = false)
+            ,
+        })]
+    });
+    const saturationAndLightnessRange = Box({
+        homogeneous: true,
+        children: [Box({
+            className: 'sidebar-module-colorpicker-saturationandlightness',
+            attribute: {
+                update: (self) => {
+                    // css: `background: linear-gradient(to right, #ffffff, color);`,
+                    self.setCss(`background: 
+                    linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,1)),
+                    linear-gradient(to right, #ffffff, ${hslToHex(selectedColor.hue, 100, 50)});
+                    `);
+                },
+            },
+            setup: (self) => self
+                .hook(selectedColor, self.attribute.update, 'hue')
+                .hook(selectedColor, self.attribute.update, 'assigned')
+            ,
+        })],
+    });
+    const saturationAndLightnessCursor = Box({
+        className: 'sidebar-module-colorpicker-saturationandlightness-cursorwrapper',
+        children: [Box({
+            vpack: 'start',
+            hpack: 'start',
+            homogeneous: true,
+            css: `
+                margin-left: ${13.636 * selectedColor.xAxis / 100}rem;
+                margin-top: ${13.636 * (100 - selectedColor.yAxis) / 100}rem;
+            `, // Why 13.636rem? see class name in stylesheet
+            attribute: {
+                update: (self) => {
+                    const allocation = saturationAndLightnessRange.children[0].get_allocation();
+                    self.setCss(`
+                        margin-left: ${13.636 * selectedColor.xAxis / 100}rem;
+                        margin-top: ${13.636 * (100 - selectedColor.yAxis) / 100}rem;
+                    `); // Why 13.636rem? see class name in stylesheet
+                }
+            },
+            setup: (self) => self
+                .hook(selectedColor, self.attribute.update, 'sl')
+                .hook(selectedColor, self.attribute.update, 'assigned')
+            ,
+            children: [Box({
+                className: 'sidebar-module-colorpicker-saturationandlightness-cursor',
+                css: `
+                    background-color: ${hslToHex(selectedColor.hue, selectedColor.xAxis, selectedColor.yAxis / (1 + selectedColor.xAxis / 100))};
+                    border-color: ${shouldUseBlackColor() ? colorBlack : colorWhite};
+                `,
+                attribute: {
+                    update: (self) => {
+                        self.setCss(`
+                            background-color: ${hslToHex(selectedColor.hue, selectedColor.xAxis, selectedColor.yAxis / (1 + selectedColor.xAxis / 100))};
+                            border-color: ${shouldUseBlackColor() ? colorBlack : colorWhite};
+                        `);
+                    }
+                },
+                setup: (self) => self
+                    .hook(selectedColor, self.attribute.update, 'sl')
+                    .hook(selectedColor, self.attribute.update, 'hue')
+                    .hook(selectedColor, self.attribute.update, 'assigned')
+                ,
+            })],
+        })]
+    });
+    const saturationAndLightnessSelector = Box({
+        homogeneous: true,
+        className: 'sidebar-module-colorpicker-saturationandlightness-wrapper',
+        children: [EventBox({
+            child: Overlay({
+                child: saturationAndLightnessRange,
+                overlays: [saturationAndLightnessCursor],
+            }),
+            attribute: {
+                clicked: false,
+                setSaturationAndLightness: (self, event) => {
+                    const allocation = saturationAndLightnessRange.children[0].get_allocation();
+                    const [_, cursorX, cursorY] = event.get_coords();
+                    const cursorXPercent = clamp(cursorX / allocation.width, 0, 1);
+                    const cursorYPercent = clamp(cursorY / allocation.height, 0, 1);
+                    selectedColor.xAxis = Math.round(cursorXPercent * 100);
+                    selectedColor.yAxis = Math.round(100 - cursorYPercent * 100);
+                }
+            },
+            setup: (self) => self
+                .on('motion-notify-event', (self, event) => {
+                    if (!self.attribute.clicked) return;
+                    self.attribute.setSaturationAndLightness(self, event);
+                })
+                .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;
+                    self.attribute.setSaturationAndLightness(self, event);
+                })
+                .on('button-release-event', (self) => self.attribute.clicked = false)
+            ,
+        })]
+    });
+    const resultColorBox = Box({
+        className: 'sidebar-module-colorpicker-result-box',
+        homogeneous: true,
+        css: `background-color: ${hslToHex(selectedColor.hue, selectedColor.xAxis, selectedColor.yAxis / (1 + selectedColor.xAxis / 100))};`,
+        children: [Label({
+            className: 'txt txt-small',
+            label: 'Result',
+        }),],
+        attribute: {
+            update: (self) => {
+                self.setCss(`background-color: ${hslToHex(selectedColor.hue, selectedColor.xAxis, selectedColor.yAxis / (1 + selectedColor.xAxis / 100))};`);
+                self.children[0].setCss(`color: ${shouldUseBlackColor() ? colorBlack : colorWhite};`)
+            }
+        },
+        setup: (self) => self
+            .hook(selectedColor, self.attribute.update, 'sl')
+            .hook(selectedColor, self.attribute.update, 'hue')
+            .hook(selectedColor, self.attribute.update, 'assigned')
+        ,
+    });
+    const ResultBox = ({ colorSystemName, updateCallback, copyCallback }) => Box({
+        children: [
+            Box({
+                vertical: true,
+                hexpand: true,
+                children: [
+                    Label({
+                        xalign: 0,
+                        className: 'txt-tiny',
+                        label: colorSystemName,
+                    }),
+                    Overlay({
+                        child: Entry({
+                            widthChars: 10,
+                            className: 'txt-small techfont',
+                            attribute: {
+                                id: 0,
+                                update: updateCallback,
+                            },
+                            setup: (self) => self
+                                .hook(selectedColor, self.attribute.update, 'sl')
+                                .hook(selectedColor, self.attribute.update, 'hue')
+                                .hook(selectedColor, self.attribute.update, 'assigned')
+                            // .on('activate', (self) => {
+                            //     const newColor = self.text;
+                            //     if (newColor.length != 7) return;
+                            //     selectedColor.setColorFromHex(self.text, self.attribute.id);
+                            // })
+                            ,
+                        }),
+                    })
+                ]
+            }),
+            Button({
+                child: MaterialIcon('content_copy', 'norm'),
+                onClicked: (self) => {
+                    copyCallback(self);
+                    self.child.label = 'done';
+                    Utils.timeout(1000, () => self.child.label = 'content_copy');
+                },
+                setup: setupCursorHover,
+            })
+        ]
+    });
+    const resultHex = ResultBox({
+        colorSystemName: 'Hex',
+        updateCallback: (self, id) => {
+            if (id && self.attribute.id === id) return;
+            self.text = hslToHex(selectedColor.hue, selectedColor.xAxis, selectedColor.yAxis / (1 + selectedColor.xAxis / 100));
+        },
+        copyCallback: () => Utils.execAsync(['wl-copy', `${hslToHex(selectedColor.hue, selectedColor.xAxis, selectedColor.yAxis / (1 + selectedColor.xAxis / 100))}`]),
+    })
+    const resultRgb = ResultBox({
+        colorSystemName: 'RGB',
+        updateCallback: (self, id) => {
+            if (id && self.attribute.id === id) return;
+            self.text = hslToRgbValues(selectedColor.hue, selectedColor.xAxis, selectedColor.yAxis / (1 + selectedColor.xAxis / 100));
+        },
+        copyCallback: () => Utils.execAsync(['wl-copy', `rgb(${hslToRgbValues(selectedColor.hue, selectedColor.xAxis, selectedColor.yAxis / (1 + selectedColor.xAxis / 100))})`]),
+    })
+    const resultHsl = ResultBox({
+        colorSystemName: 'HSL',
+        updateCallback: (self, id) => {
+            if (id && self.attribute.id === id) return;
+            self.text = `${selectedColor.hue},${selectedColor.xAxis}%,${Math.round(selectedColor.yAxis / (1 + selectedColor.xAxis / 100))}%`;
+        },
+        copyCallback: () => Utils.execAsync(['wl-copy', `hsl(${selectedColor.hue},${selectedColor.xAxis}%,${Math.round(selectedColor.yAxis / (1 + selectedColor.xAxis / 100))}%)`]),
+    })
+    const result = Box({
+        className: 'sidebar-module-colorpicker-result-area spacing-v-5 txt',
+        hexpand: true,
+        vertical: true,
+        children: [
+            resultColorBox,
+            resultHex,
+            resultRgb,
+            resultHsl,
+        ]
+    })
+    return SidebarModule({
+        icon: MaterialIcon('colorize', 'norm'),
+        name: 'Color picker',
+        revealChild: false,
+        child: Box({
+            className: 'spacing-h-5',
+            children: [
+                hueSelector,
+                saturationAndLightnessSelector,
+                result,
+            ]
+        })
+    });
+}

modules/styling/config/widgets/sideleft/tools/module.js

@@ -0,0 +1,56 @@
+import Widget from 'resource:///com/github/Aylur/ags/widget.js';
+import { setupCursorHover } from '../../../lib/cursorhover.js';
+import { MaterialIcon } from '../../../lib/materialicon.js';
+const { Box, Button, Icon, Label, Revealer } = Widget;
+
+export default ({
+    icon,
+    name,
+    child,
+    revealChild = true,
+}) => {
+    const headerButtonIcon = MaterialIcon(revealChild ? 'expand_less' : 'expand_more', 'norm');
+    const header = Button({
+        onClicked: () => {
+            content.revealChild = !content.revealChild;
+            headerButtonIcon.label = content.revealChild ? 'expand_less' : 'expand_more';
+        },
+        setup: setupCursorHover,
+        child: Box({
+            className: 'txt spacing-h-10',
+            children: [
+                icon,
+                Label({
+                    className: 'txt-norm',
+                    label: `${name}`,
+                }),
+                Box({
+                    hexpand: true,
+                }),
+                Box({
+                    className: 'sidebar-module-btn-arrow',
+                    homogeneous: true,
+                    children: [headerButtonIcon],
+                })
+            ]
+        })
+    });
+    const content = Revealer({
+        revealChild: revealChild,
+        transition: 'slide_down',
+        transitionDuration: 200,
+        child: Box({
+            className: 'margin-top-5',
+            homogeneous: true,
+            children: [child],
+        }),
+    });
+    return Box({
+        className: 'sidebar-module',
+        vertical: true,
+        children: [
+            header,
+            content,
+        ]
+    });
+}

modules/styling/config/widgets/sideleft/tools/quickscripts.js

@@ -0,0 +1,95 @@
+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;
+const { Box, Button, EventBox, Icon, Label, Scrollable } = Widget;
+import SidebarModule from './module.js';
+import { MaterialIcon } from '../../../lib/materialicon.js';
+import { setupCursorHover } from '../../../lib/cursorhover.js';
+
+Gtk.IconTheme.get_default().append_search_path(`${App.configDir}/assets`);
+const distroID = exec(`bash -c 'cat /etc/os-release | grep "^ID=" | cut -d "=" -f 2'`).trim();
+const isDebianDistro = (distroID == 'linuxmint' || distroID == 'ubuntu' || distroID == 'debian' || distroID == 'zorin' || distroID == 'pop' || distroID == 'raspbian' || distroID == 'kali' || distroID == 'elementary');
+const isArchDistro = (distroID == 'arch' || distroID == 'endeavouros');
+const hasFlatpak = !!exec(`bash -c 'command -v flatpak'`);
+
+const scripts = [
+    {
+        icon: 'nixos-symbolic',
+        name: 'Trim system generations to 5',
+        command: `sudo ${App.configDir}/scripts/quickscripts/nixos-trim-generations.sh 5 0 system`,
+        enabled: distroID == 'nixos',
+    },
+    {
+        icon: 'nixos-symbolic',
+        name: 'Trim home manager generations to 5',
+        command: `${App.configDir}/scripts/quickscripts/nixos-trim-generations.sh 5 0 home-manager`,
+        enabled: distroID == 'nixos',
+    },
+    {
+        icon: 'ubuntu-symbolic',
+        name: 'Update packages',
+        command: `sudo apt update && sudo apt upgrade -y`,
+        enabled: isDebianDistro,
+    },
+    {
+        icon: 'fedora-symbolic',
+        name: 'Update packages',
+        command: `sudo dnf upgrade -y`,
+        enabled: distroID == 'fedora',
+    },
+    {
+        icon: 'arch-symbolic',
+        name: 'Update packages',
+        command: `sudo pacman -Syyu`,
+        enabled: isArchDistro,
+    },
+    {
+        icon: 'flatpak-symbolic',
+        name: 'Uninstall unused flatpak packages',
+        command: `flatpak uninstall --unused`,
+        enabled: hasFlatpak,
+    },
+];
+
+export default () => SidebarModule({
+    icon: MaterialIcon('code', 'norm'),
+    name: 'Quick scripts',
+    child: Box({
+        vertical: true,
+        className: 'spacing-v-5',
+        children: scripts.map((script) => {
+            if (!script.enabled) return null;
+            const scriptStateIcon = MaterialIcon('not_started', 'norm');
+            return Box({
+                className: 'spacing-h-5 txt',
+                children: [
+                    Icon({
+                        className: 'sidebar-module-btn-icon txt-large',
+                        icon: script.icon,
+                    }),
+                    Label({
+                        className: 'txt-small',
+                        hpack: 'start',
+                        hexpand: true,
+                        label: script.name,
+                        tooltipText: script.command,
+                    }),
+                    Button({
+                        className: 'sidebar-module-scripts-button',
+                        child: scriptStateIcon,
+                        onClicked: () => {
+                            App.closeWindow('sideleft');
+                            execAsync([`bash`, `-c`, `foot fish -C "${script.command}"`]).catch(print)
+                                .then(() => {
+                                    scriptStateIcon.label = 'done';
+                                })
+                        },
+                        setup: setupCursorHover,
+                    }),
+                ],
+            })
+        }),
+    })
+});

modules/styling/config/widgets/sideright/calendar.js

@@ -0,0 +1,207 @@
+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";
+
+import { TodoWidget } from "./todolist.js";
+
+let calendarJson = getCalendarLayout(undefined, true);
+let monthshift = 0;
+
+function fileExists(filePath) {
+    let file = Gio.File.new_for_path(filePath);
+    return file.query_exists(null);
+}
+
+function getDateInXMonthsTime(x) {
+    var currentDate = new Date(); // Get the current date
+    var targetMonth = currentDate.getMonth() + x; // Calculate the target month
+    var targetYear = currentDate.getFullYear(); // Get the current year
+
+    // Adjust the year and month if necessary
+    targetYear += Math.floor(targetMonth / 12);
+    targetMonth = (targetMonth % 12 + 12) % 12;
+
+    // Create a new date object with the target year and month
+    var targetDate = new Date(targetYear, targetMonth, 1);
+
+    // Set the day to the last day of the month to get the desired date
+    // targetDate.setDate(0);
+
+    return targetDate;
+}
+
+const weekDays = [ // MONDAY IS THE FIRST DAY OF THE WEEK :HESRIGHTYOUKNOW:
+    { day: 'Mo', today: 0 },
+    { day: 'Tu', today: 0 },
+    { day: 'We', today: 0 },
+    { day: 'Th', today: 0 },
+    { day: 'Fr', today: 0 },
+    { day: 'Sa', today: 0 },
+    { day: 'Su', today: 0 },
+]
+
+const CalendarDay = (day, today) => Widget.Button({
+    className: `sidebar-calendar-btn ${today == 1 ? 'sidebar-calendar-btn-today' : (today == -1 ? 'sidebar-calendar-btn-othermonth' : '')}`,
+    child: Widget.Overlay({
+        child: Box({}),
+        overlays: [Label({
+            hpack: 'center',
+            className: 'txt-smallie txt-semibold sidebar-calendar-btn-txt',
+            label: String(day),
+        })],
+    })
+})
+
+const CalendarWidget = () => {
+    const calendarMonthYear = Widget.Button({
+        className: 'txt txt-large sidebar-calendar-monthyear-btn',
+        onClicked: () => shiftCalendarXMonths(0),
+        setup: (button) => {
+            button.label = `${new Date().toLocaleString('default', { month: 'long' })} ${new Date().getFullYear()}`;
+            setupCursorHover(button);
+        }
+    });
+    const addCalendarChildren = (box, calendarJson) => {
+        const children = box.get_children();
+        for (let i = 0; i < children.length; i++) {
+            const child = children[i];
+            child.destroy();
+        }
+        box.children = calendarJson.map((row, i) => Widget.Box({
+            className: 'spacing-h-5',
+            children: row.map((day, i) => CalendarDay(day.day, day.today)),
+        }))
+    }
+    function shiftCalendarXMonths(x) {
+        if (x == 0) monthshift = 0;
+        else monthshift += x;
+        var newDate;
+        if (monthshift == 0) newDate = new Date();
+        else newDate = getDateInXMonthsTime(monthshift);
+
+        calendarJson = getCalendarLayout(newDate, (monthshift == 0));
+        calendarMonthYear.label = `${monthshift == 0 ? '' : '• '}${newDate.toLocaleString('default', { month: 'long' })} ${newDate.getFullYear()}`;
+        addCalendarChildren(calendarDays, calendarJson);
+    }
+    const calendarHeader = Widget.Box({
+        className: 'spacing-h-5 sidebar-calendar-header',
+        setup: (box) => {
+            box.pack_start(calendarMonthYear, false, false, 0);
+            box.pack_end(Widget.Box({
+                className: 'spacing-h-5',
+                children: [
+                    Button({
+                        className: 'sidebar-calendar-monthshift-btn',
+                        onClicked: () => shiftCalendarXMonths(-1),
+                        child: MaterialIcon('chevron_left', 'norm'),
+                        setup: setupCursorHover,
+                    }),
+                    Button({
+                        className: 'sidebar-calendar-monthshift-btn',
+                        onClicked: () => shiftCalendarXMonths(1),
+                        child: MaterialIcon('chevron_right', 'norm'),
+                        setup: setupCursorHover,
+                    })
+                ]
+            }), false, false, 0);
+        }
+    })
+    const calendarDays = Widget.Box({
+        hexpand: true,
+        vertical: true,
+        className: 'spacing-v-5',
+        setup: (box) => {
+            addCalendarChildren(box, calendarJson);
+        }
+    });
+    return Widget.EventBox({
+        onScrollUp: () => shiftCalendarXMonths(-1),
+        onScrollDown: () => shiftCalendarXMonths(1),
+        child: Widget.Box({
+            hpack: 'center',
+            children: [
+                Widget.Box({
+                    hexpand: true,
+                    vertical: true,
+                    className: 'spacing-v-5',
+                    children: [
+                        calendarHeader,
+                        Widget.Box({
+                            homogeneous: true,
+                            className: 'spacing-h-5',
+                            children: weekDays.map((day, i) => CalendarDay(day.day, day.today))
+                        }),
+                        calendarDays,
+                    ]
+                })
+            ]
+        })
+    });
+};
+
+const defaultShown = 'calendar';
+const contentStack = Widget.Stack({
+    hexpand: true,
+    children: {
+        'calendar': CalendarWidget(),
+        'todo': TodoWidget(),
+        // 'stars': Widget.Label({ label: 'GitHub feed will be here' }),
+    },
+    transition: 'slide_up_down',
+    transitionDuration: 180,
+    setup: (stack) => Utils.timeout(1, () => {
+        stack.shown = defaultShown;
+    })
+})
+
+const StackButton = (stackItemName, icon, name) => Widget.Button({
+    className: 'button-minsize sidebar-navrail-btn txt-small spacing-h-5',
+    onClicked: (button) => {
+        contentStack.shown = stackItemName;
+        const kids = button.get_parent().get_children();
+        for (let i = 0; i < kids.length; i++) {
+            if (kids[i] != button) kids[i].toggleClassName('sidebar-navrail-btn-active', false);
+            else button.toggleClassName('sidebar-navrail-btn-active', true);
+        }
+    },
+    child: Box({
+        className: 'spacing-v-5',
+        vertical: true,
+        children: [
+            Label({
+                className: `txt icon-material txt-hugeass`,
+                label: icon,
+            }),
+            Label({
+                label: name,
+                className: 'txt txt-smallie',
+            }),
+        ]
+    }),
+    setup: (button) => Utils.timeout(1, () => {
+        setupCursorHover(button);
+        button.toggleClassName('sidebar-navrail-btn-active', defaultShown === stackItemName);
+    })
+});
+
+export const ModuleCalendar = () => Box({
+    className: 'sidebar-group spacing-h-5',
+    setup: (box) => {
+        box.pack_start(Box({
+            vpack: 'center',
+            homogeneous: true,
+            vertical: true,
+            className: 'sidebar-navrail spacing-v-10',
+            children: [
+                StackButton('calendar', 'calendar_month', 'Calendar'),
+                StackButton('todo', 'lists', 'To Do'),
+                // StackButton(box, 'stars', 'star', 'GitHub'),
+            ]
+        }), false, false, 0);
+        box.pack_end(contentStack, false, false, 0);
+    }
+})

modules/styling/config/widgets/sideright/main.js

@@ -0,0 +1,11 @@
+import PopupWindow from '../../lib/popupwindow.js';
+import SidebarRight from "./sideright.js";
+
+export default () => PopupWindow({
+    keymode: 'exclusive',
+    anchor: ['right', 'top', 'bottom'],
+    name: 'sideright',
+    showClassName: 'sideright-show',
+    hideClassName: 'sideright-hide',
+    child: SidebarRight(),
+});

modules/styling/config/widgets/sideright/notificationlist.js

@@ -0,0 +1,142 @@
+// 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
+import Widget from 'resource:///com/github/Aylur/ags/widget.js';
+import Notifications from 'resource:///com/github/Aylur/ags/service/notifications.js';
+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";
+
+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', 'gigantic'),
+                        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')
+            .hook(Notifications, (box, id) => {
+                if (!id) return;
+                for (const ch of box.children) {
+                    if (ch._id === id) {
+                        ch.attribute.destroyWithAnims();
+                    }
+                }
+            }, 'closed')
+        ,
+    });
+    const ListActionButton = (icon, name, action) => Button({
+        className: 'notif-listaction-btn',
+        onClicked: action,
+        child: Box({
+            className: 'spacing-h-5',
+            children: [
+                MaterialIcon(icon, 'norm'),
+                Label({
+                    className: 'txt-small',
+                    label: name,
+                })
+            ]
+        }),
+        setup: setupCursorHover,
+    });
+    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', () => {
+        // Manual destruction is not necessary 
+        // since Notifications.clear() sends destroy signals to every notif
+        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,
+            // 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,
+        children: {
+            'empty': notifEmptyContent,
+            'list': notifList,
+        },
+        setup: (self) => self
+            .hook(Notifications, (self) => self.shown = (Notifications.notifications.length > 0 ? 'list' : 'empty'))
+        ,
+    });
+    return Box({
+        ...props,
+        className: 'sidebar-group spacing-v-5',
+        vertical: true,
+        children: [
+            listTitle,
+            listContents,
+        ]
+    });
+}

modules/styling/config/widgets/sideright/quicktoggles.js

@@ -0,0 +1,226 @@
+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 * 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';
+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('~')) {
+        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(),
+    onSecondaryClickRelease: () => {
+        execAsync(['bash', '-c', 'XDG_CURRENT_DESKTOP="gnome" gnome-control-center wifi', '&']);
+        App.closeWindow('sideright');
+    },
+    child: NetworkIndicator(),
+    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');
+        });
+    },
+    ...props,
+});
+
+export const ToggleIconBluetooth = (props = {}) => Widget.Button({
+    className: 'txt-small sidebar-iconbutton',
+    tooltipText: 'Bluetooth | Right-click to configure',
+    onClicked: () => {
+        const status = Bluetooth?.enabled;
+        if (status)
+            exec('rfkill block bluetooth');
+        else
+            exec('rfkill unblock bluetooth');
+    },
+    onSecondaryClickRelease: () => {
+        execAsync(['bash', '-c', 'blueberry &']);
+        App.closeWindow('sideright');
+    },
+    child: BluetoothIndicator(),
+    setup: (self) => {
+        setupCursorHover(self);
+        self.hook(Bluetooth, button => {
+            button.toggleClassName('sidebar-button-active', Bluetooth?.enabled)
+        });
+    },
+    ...props,
+});
+
+export const HyprToggleIcon = async (icon, name, hyprlandConfigValue, props = {}) => {
+    try {
+        return Widget.Button({
+            className: 'txt-small sidebar-iconbutton',
+            tooltipText: `${name}`,
+            onClicked: (button) => {
+                // Set the value to 1 - value
+                Utils.execAsync(`hyprctl -j getoption ${hyprlandConfigValue}`).then((result) => {
+                    const currentOption = JSON.parse(result).int;
+                    execAsync(['bash', '-c', `hyprctl keyword ${hyprlandConfigValue} ${1 - currentOption} &`]).catch(print);
+                    button.toggleClassName('sidebar-button-active', currentOption == 0);
+                }).catch(print);
+            },
+            child: MaterialIcon(icon, 'norm', { hpack: 'center' }),
+            setup: button => {
+                button.toggleClassName('sidebar-button-active', JSON.parse(Utils.exec(`hyprctl -j getoption ${hyprlandConfigValue}`)).int == 1);
+                setupCursorHover(button);
+            },
+            ...props,
+        })
+    } catch {
+        return null;
+    }
+}
+
+export const ModuleNightLight = (props = {}) => Widget.Button({ // TODO: Make this work
+    attribute: {
+        enabled: false,
+        yellowlight: undefined,
+    },
+    className: 'txt-small sidebar-iconbutton',
+    tooltipText: 'Night Light',
+    onClicked: (self) => {
+        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.attribute.enabled = !!exec('pidof wlsunset');
+        self.toggleClassName('sidebar-button-active', self.attribute.enabled);
+    },
+    ...props,
+});
+
+export const ModuleInvertColors = async (props = {}) => {
+    try {
+        const Hyprland = (await import('resource:///com/github/Aylur/ags/service/hyprland.js')).default;
+        return Widget.Button({
+            className: 'txt-small sidebar-iconbutton',
+            tooltipText: 'Color inversion',
+            onClicked: (button) => {
+                // 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();
+                        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,
+            ...props,
+        })
+    } catch {
+        return null;
+    };
+}
+
+export const ModuleIdleInhibitor = (props = {}) => Widget.Button({ // TODO: Make this work
+    attribute: {
+        enabled: false,
+        inhibitor: undefined,
+    },
+    className: 'txt-small sidebar-iconbutton',
+    tooltipText: 'Keep system awake',
+    onClicked: (self) => {
+        self.attribute.enabled = !self.attribute.enabled;
+        self.toggleClassName('sidebar-button-active', self.attribute.enabled);
+        if (self.attribute.enabled) {
+            self.attribute.inhibitor = Utils.subprocess(
+                [`${App.configDir}/scripts/wayland-idle-inhibitor.py`],
+                (output) => print(output),
+                (err) => logError(err),
+                self,
+            );
+        }
+        else {
+            self.attribute.inhibitor.force_exit();
+        }
+    },
+    child: MaterialIcon('coffee', 'norm'),
+    setup: setupCursorHover,
+    ...props,
+});
+
+export const ModuleEditIcon = (props = {}) => Widget.Button({ // TODO: Make this work
+    ...props,
+    className: 'txt-small sidebar-iconbutton',
+    onClicked: () => {
+        execAsync(['bash', '-c', 'XDG_CURRENT_DESKTOP="gnome" gnome-control-center', '&']);
+        App.toggleWindow('sideright');
+    },
+    child: MaterialIcon('edit', 'norm'),
+    setup: button => {
+        setupCursorHover(button);
+    }
+})
+
+export const ModuleReloadIcon = (props = {}) => Widget.Button({
+    ...props,
+    className: 'txt-small sidebar-iconbutton',
+    tooltipText: 'Reload Environment config',
+    onClicked: () => {
+        execAsync(['bash', '-c', 'hyprctl reload || swaymsg reload &']);
+        App.toggleWindow('sideright');
+    },
+    child: MaterialIcon('refresh', 'norm'),
+    setup: button => {
+        setupCursorHover(button);
+    }
+})
+
+export const ModuleSettingsIcon = (props = {}) => Widget.Button({
+    ...props,
+    className: 'txt-small sidebar-iconbutton',
+    tooltipText: 'Open Settings',
+    onClicked: () => {
+        execAsync(['bash', '-c', 'XDG_CURRENT_DESKTOP="gnome" gnome-control-center', '&']);
+        App.toggleWindow('sideright');
+    },
+    child: MaterialIcon('settings', 'norm'),
+    setup: button => {
+        setupCursorHover(button);
+    }
+})
+
+export const ModulePowerIcon = (props = {}) => Widget.Button({
+    ...props,
+    className: 'txt-small sidebar-iconbutton',
+    tooltipText: 'Session',
+    onClicked: () => {
+        App.toggleWindow('session');
+        App.closeWindow('sideright');
+    },
+    child: MaterialIcon('power_settings_new', 'norm'),
+    setup: button => {
+        setupCursorHover(button);
+    }
+})
+
+
+

modules/styling/config/widgets/sideright/sideright.js

@@ -0,0 +1,86 @@
+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 {
+    ToggleIconBluetooth,
+    ToggleIconWifi,
+    HyprToggleIcon,
+    ModuleNightLight,
+    ModuleInvertColors,
+    ModuleIdleInhibitor,
+    ModuleEditIcon,
+    ModuleReloadIcon,
+    ModuleSettingsIcon,
+    ModulePowerIcon
+} from "./quicktoggles.js";
+import ModuleNotificationList from "./notificationlist.js";
+import { ModuleCalendar } from "./calendar.js";
+
+const timeRow = Box({
+    className: 'spacing-h-5 sidebar-group-invisible-morehorizpad',
+    children: [
+        Widget.Label({
+            hpack: 'center',
+            className: 'txt-small txt',
+            setup: (self) => self
+                .poll(5000, label => {
+                    execAsync(['bash', '-c', `w | sed -n '1p' | cut -d, -f1 | cut -d' ' -f4-`])
+                        .then(upTimeString => {
+                            label.label = `Uptime: ${upTimeString}`;
+                        }).catch(print);
+                })
+            ,
+        }),
+        Widget.Box({ hexpand: true }),
+        // ModuleEditIcon({ hpack: 'end' }), // TODO: Make this work
+        ModuleReloadIcon({ hpack: 'end' }),
+        ModuleSettingsIcon({ hpack: 'end' }),
+        ModulePowerIcon({ hpack: 'end' }),
+    ]
+});
+
+const togglesBox = Widget.Box({
+    hpack: 'center',
+    className: 'sidebar-togglesbox spacing-h-10',
+    children: [
+        ToggleIconWifi(),
+        ToggleIconBluetooth(),
+        await HyprToggleIcon('mouse', 'Raw input', 'input:force_no_accel', {}),
+        await HyprToggleIcon('front_hand', 'No touchpad while typing', 'input:touchpad:disable_while_typing', {}),
+        ModuleNightLight(),
+        await ModuleInvertColors(),
+        ModuleIdleInhibitor(),
+    ]
+})
+
+export default () => Box({
+    vexpand: true,
+    hexpand: true,
+    css: 'min-width: 2px;',
+    children: [
+        EventBox({
+            onPrimaryClick: () => App.closeWindow('sideright'),
+            onSecondaryClick: () => App.closeWindow('sideright'),
+            onMiddleClick: () => App.closeWindow('sideright'),
+        }),
+        Box({
+            vertical: true,
+            vexpand: true,
+            className: 'sidebar-right spacing-v-15',
+            children: [
+                Box({
+                    vertical: true,
+                    className: 'spacing-v-5',
+                    children: [
+                        timeRow,
+                        // togglesFlowBox,
+                        togglesBox,
+                    ]
+                }),
+                ModuleNotificationList({ vexpand: true, }),
+                ModuleCalendar(),
+            ]
+        }),
+    ]
+});

modules/styling/config/widgets/sideright/todolist.js

@@ -0,0 +1,279 @@
+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";
+import { NavigationIndicator } from "../../lib/navigationindicator.js";
+
+const defaultTodoSelected = 'undone';
+
+const todoListItem = (task, id, isDone, isEven = false) => {
+    const crosser = Widget.Box({
+        className: 'sidebar-todo-crosser',
+    });
+    const todoContent = Widget.Box({
+        className: 'sidebar-todo-item spacing-h-5',
+        children: [
+            Widget.Label({
+                hexpand: true,
+                xalign: 0,
+                wrap: true,
+                className: 'txt txt-small sidebar-todo-txt',
+                label: task.content,
+                selectable: true,
+            }),
+            Widget.Button({ // Check/Uncheck
+                vpack: 'center',
+                className: 'txt sidebar-todo-item-action',
+                child: MaterialIcon(`${isDone ? 'remove_done' : 'check'}`, 'norm', { vpack: 'center' }),
+                onClicked: (self) => {
+                    const contentWidth = todoContent.get_allocated_width();
+                    crosser.toggleClassName('sidebar-todo-crosser-crossed', true);
+                    crosser.css = `margin-left: -${contentWidth}px;`;
+                    Utils.timeout(200, () => {
+                        widgetRevealer.revealChild = false;
+                    })
+                    Utils.timeout(350, () => {
+                        if (isDone)
+                            Todo.uncheck(id);
+                        else
+                            Todo.check(id);
+                    })
+                },
+                setup: setupCursorHover,
+            }),
+            Widget.Button({ // Remove
+                vpack: 'center',
+                className: 'txt sidebar-todo-item-action',
+                child: MaterialIcon('delete_forever', 'norm', { vpack: 'center' }),
+                onClicked: () => {
+                    const contentWidth = todoContent.get_allocated_width();
+                    crosser.toggleClassName('sidebar-todo-crosser-removed', true);
+                    crosser.css = `margin-left: -${contentWidth}px;`;
+                    Utils.timeout(200, () => {
+                        widgetRevealer.revealChild = false;
+                    })
+                    Utils.timeout(350, () => {
+                        Todo.remove(id);
+                    })
+                },
+                setup: setupCursorHover,
+            }),
+            crosser,
+        ]
+    });
+    const widgetRevealer = Widget.Revealer({
+        revealChild: true,
+        transition: 'slide_down',
+        transitionDuration: 150,
+        child: todoContent,
+    })
+    return widgetRevealer;
+}
+
+const todoItems = (isDone) => Widget.Scrollable({
+    hscroll: 'never',
+    vscroll: 'automatic',
+    child: Widget.Box({
+        vertical: true,
+        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'}`, 'gigantic'),
+                                Label({ label: `${isDone ? 'Finished tasks will go here' : 'Nothing here!'}` })
+                            ]
+                        })
+                    ]
+                }
+                else self.homogeneous = false;
+            }, 'updated')
+        ,
+    }),
+    setup: (listContents) => {
+        const vScrollbar = listContents.get_vscrollbar();
+        vScrollbar.get_style_context().add_class('sidebar-scrollbar');
+    }
+});
+
+const UndoneTodoList = () => {
+    const newTaskButton = Revealer({
+        transition: 'slide_left',
+        transitionDuration: 200,
+        revealChild: true,
+        child: Button({
+            className: 'txt-small sidebar-todo-new',
+            halign: 'end',
+            vpack: 'center',
+            label: '+ New task',
+            setup: setupCursorHover,
+            onClicked: (self) => {
+                newTaskButton.revealChild = false;
+                newTaskEntryRevealer.revealChild = true;
+                confirmAddTask.revealChild = true;
+                cancelAddTask.revealChild = true;
+                newTaskEntry.grab_focus();
+            }
+        })
+    });
+    const cancelAddTask = Revealer({
+        transition: 'slide_right',
+        transitionDuration: 200,
+        revealChild: false,
+        child: Button({
+            className: 'txt-norm icon-material sidebar-todo-add',
+            halign: 'end',
+            vpack: 'center',
+            label: 'close',
+            setup: setupCursorHover,
+            onClicked: (self) => {
+                newTaskEntryRevealer.revealChild = false;
+                confirmAddTask.revealChild = false;
+                cancelAddTask.revealChild = false;
+                newTaskButton.revealChild = true;
+                newTaskEntry.text = '';
+            }
+        })
+    });
+    const newTaskEntry = Widget.Entry({
+        // hexpand: true,
+        vpack: 'center',
+        className: 'txt-small sidebar-todo-entry',
+        placeholderText: 'Add a task...',
+        onAccept: ({ text }) => {
+            if (text == '') return;
+            Todo.add(text)
+            newTaskEntry.text = '';
+        },
+        onChange: ({ text }) => confirmAddTask.child.toggleClassName('sidebar-todo-add-available', text != ''),
+    });
+    const newTaskEntryRevealer = Revealer({
+        transition: 'slide_right',
+        transitionDuration: 200,
+        revealChild: false,
+        child: newTaskEntry,
+    });
+    const confirmAddTask = Revealer({
+        transition: 'slide_right',
+        transitionDuration: 200,
+        revealChild: false,
+        child: Button({
+            className: 'txt-norm icon-material sidebar-todo-add',
+            halign: 'end',
+            vpack: 'center',
+            label: 'arrow_upward',
+            setup: setupCursorHover,
+            onClicked: (self) => {
+                if (newTaskEntry.text == '') return;
+                Todo.add(newTaskEntry.text);
+                newTaskEntry.text = '';
+            }
+        })
+    });
+    return Box({ // The list, with a New button
+        vertical: true,
+        className: 'spacing-v-5',
+        setup: (box) => {
+            box.pack_start(todoItems(false), true, true, 0);
+            box.pack_start(Box({
+                setup: (self) => {
+                    self.pack_start(cancelAddTask, false, false, 0);
+                    self.pack_start(newTaskEntryRevealer, true, true, 0);
+                    self.pack_start(confirmAddTask, false, false, 0);
+                    self.pack_start(newTaskButton, false, false, 0);
+                }
+            }), false, false, 0);
+        },
+    });
+}
+
+const todoItemsBox = Widget.Stack({
+    vpack: 'fill',
+    transition: 'slide_left_right',
+    children: {
+        'undone': UndoneTodoList(),
+        'done': todoItems(true),
+    },
+});
+
+export const TodoWidget = () => {
+    const TodoTabButton = (isDone, navIndex) => Widget.Button({
+        hexpand: true,
+        className: 'sidebar-selector-tab',
+        onClicked: (button) => {
+            todoItemsBox.shown = `${isDone ? 'done' : 'undone'}`;
+            const kids = button.get_parent().get_children();
+            for (let i = 0; i < kids.length; i++) {
+                if (kids[i] != button) kids[i].toggleClassName('sidebar-selector-tab-active', false);
+                else button.toggleClassName('sidebar-selector-tab-active', true);
+            }
+            // Fancy highlighter line width
+            const buttonWidth = button.get_allocated_width();
+            const highlightWidth = button.get_children()[0].get_allocated_width();
+            navIndicator.css = `
+                font-size: ${navIndex}px; 
+                padding: 0px ${(buttonWidth - highlightWidth) / 2}px;
+            `;
+        },
+        child: Box({
+            hpack: 'center',
+            className: 'spacing-h-5',
+            children: [
+                MaterialIcon(`${isDone ? 'task_alt' : 'format_list_bulleted'}`, 'larger'),
+                Label({
+                    className: 'txt txt-smallie',
+                    label: `${isDone ? 'Done' : 'Unfinished'}`,
+                })
+            ]
+        }),
+        setup: (button) => Utils.timeout(1, () => {
+            setupCursorHover(button);
+            button.toggleClassName('sidebar-selector-tab-active', defaultTodoSelected === `${isDone ? 'done' : 'undone'}`);
+        }),
+    });
+    const undoneButton = TodoTabButton(false, 0);
+    const doneButton = TodoTabButton(true, 1);
+    const navIndicator = NavigationIndicator(2, false, { // The line thing
+        className: 'sidebar-selector-highlight',
+        css: 'font-size: 0px; padding: 0rem 1.636rem;', // Shush
+    })
+    return Widget.Box({
+        hexpand: true,
+        vertical: true,
+        className: 'spacing-v-10',
+        setup: (box) => {     // undone/done selector rail
+            box.pack_start(Widget.Box({
+                vertical: true,
+                children: [
+                    Widget.Box({
+                        className: 'sidebar-selectors spacing-h-5',
+                        homogeneous: true,
+                        setup: (box) => {
+                            box.pack_start(undoneButton, false, true, 0);
+                            box.pack_start(doneButton, false, true, 0);
+                        }
+                    }),
+                    Widget.Box({
+                        className: 'sidebar-selector-highlight-offset',
+                        homogeneous: true,
+                        children: [navIndicator]
+                    })
+                ]
+            }), false, false, 0);
+            box.pack_end(todoItemsBox, true, true, 0);
+        },
+    });
+};
+