ags: sync

2024-02-05 13:20:00 +07:00
parent 14368314e5
commit 73c8454c1c
61 changed files with 1327 additions and 1220 deletions
@@ -1,4 +1,8 @@
 "use strict";
+const gi = imports.gi;
+const availableModules = Object.keys(gi);
+print("Available modules: " + availableModules.join(', '));
+
 // Import
 import Gdk from 'gi://Gdk';
 import App from 'resource:///com/github/Aylur/ags/app.js'
@@ -64,7 +68,7 @@ export default {
 };

 // Stuff that don't need to be toggled. And they're async so ugh...
-// Bar().catch(print);
+// Bar().catch(print); // Use this to debug the bar
 forMonitors(Bar);
 forMonitors(BarCornerTopleft);
 forMonitors(BarCornerTopright);
@@ -0,0 +1,94 @@
+export const WWO_CODE = {
+    "113": "Sunny",
+    "116": "PartlyCloudy",
+    "119": "Cloudy",
+    "122": "VeryCloudy",
+    "143": "Fog",
+    "176": "LightShowers",
+    "179": "LightSleetShowers",
+    "182": "LightSleet",
+    "185": "LightSleet",
+    "200": "ThunderyShowers",
+    "227": "LightSnow",
+    "230": "HeavySnow",
+    "248": "Fog",
+    "260": "Fog",
+    "263": "LightShowers",
+    "266": "LightRain",
+    "281": "LightSleet",
+    "284": "LightSleet",
+    "293": "LightRain",
+    "296": "LightRain",
+    "299": "HeavyShowers",
+    "302": "HeavyRain",
+    "305": "HeavyShowers",
+    "308": "HeavyRain",
+    "311": "LightSleet",
+    "314": "LightSleet",
+    "317": "LightSleet",
+    "320": "LightSnow",
+    "323": "LightSnowShowers",
+    "326": "LightSnowShowers",
+    "329": "HeavySnow",
+    "332": "HeavySnow",
+    "335": "HeavySnowShowers",
+    "338": "HeavySnow",
+    "350": "LightSleet",
+    "353": "LightShowers",
+    "356": "HeavyShowers",
+    "359": "HeavyRain",
+    "362": "LightSleetShowers",
+    "365": "LightSleetShowers",
+    "368": "LightSnowShowers",
+    "371": "HeavySnowShowers",
+    "374": "LightSleetShowers",
+    "377": "LightSleet",
+    "386": "ThunderyShowers",
+    "389": "ThunderyHeavyRain",
+    "392": "ThunderySnowShowers",
+    "395": "HeavySnowShowers",
+}
+
+export const WEATHER_SYMBOL = {
+    "Unknown": "air",
+    "Cloudy": "cloud",
+    "Fog": "foggy",
+    "HeavyRain": "rainy",
+    "HeavyShowers": "rainy",
+    "HeavySnow": "snowing",
+    "HeavySnowShowers": "snowing",
+    "LightRain": "rainy",
+    "LightShowers": "rainy",
+    "LightSleet": "rainy",
+    "LightSleetShowers": "rainy",
+    "LightSnow": "cloudy_snowing",
+    "LightSnowShowers": "cloudy_snowing",
+    "PartlyCloudy": "partly_cloudy_day",
+    "Sunny": "clear_day",
+    "ThunderyHeavyRain": "thunderstorm",
+    "ThunderyShowers": "thunderstorm",
+    "ThunderySnowShowers": "thunderstorm",
+    "VeryCloudy": "cloud",
+}
+
+export const NIGHT_WEATHER_SYMBOL = {
+    "Unknown": "air",
+    "Cloudy": "cloud",
+    "Fog": "foggy",
+    "HeavyRain": "rainy",
+    "HeavyShowers": "rainy",
+    "HeavySnow": "snowing",
+    "HeavySnowShowers": "snowing",
+    "LightRain": "rainy",
+    "LightShowers": "rainy",
+    "LightSleet": "rainy",
+    "LightSleetShowers": "rainy",
+    "LightSnow": "cloudy_snowing",
+    "LightSnowShowers": "cloudy_snowing",
+    "PartlyCloudy": "partly_cloudy_night",
+    "Sunny": "clear_night",
+    "ThunderyHeavyRain": "thunderstorm",
+    "ThunderyShowers": "thunderstorm",
+    "ThunderySnowShowers": "thunderstorm",
+    "VeryCloudy": "cloud",
+}
@@ -83,22 +83,22 @@ export const AnimatedCircProg = ({

        // Init animation
        if (initFrom != initTo) {
-            // area.css = `font-size: ${initFrom}px; transition: ${initAnimTime}ms linear;`;
+            area.css = `font-size: ${initFrom}px; transition: ${initAnimTime}ms linear;`;
            Utils.timeout(20, () => {
                area.css = `font-size: ${initTo}px;`;
            }, area)
-            // const transitionDistance = initTo - initFrom;
-            // const oneStep = initAnimTime / initAnimPoints;
-            // area.css = `
-            //     font-size: ${initFrom}px;
-            //     transition: ${oneStep}ms linear;
-            // `;
-            // for (let i = 0; i < initAnimPoints; i++) {
-            //     Utils.timeout(Math.max(10, i * oneStep), () => {
-            //         if(!area) return;
-            //         area.css = `${initFrom != initTo ? 'font-size: ' + (initFrom + (transitionDistance / initAnimPoints * (i + 1))) + 'px;' : ''}`;
-            //     });
-            // }
+            const transitionDistance = initTo - initFrom;
+            const oneStep = initAnimTime / initAnimPoints;
+            area.css = `
+                font-size: ${initFrom}px;
+                transition: ${oneStep}ms linear;
+            `;
+            for (let i = 0; i < initAnimPoints; i++) {
+                Utils.timeout(Math.max(10, i * oneStep), () => {
+                    if(!area) return;
+                    area.css = `${initFrom != initTo ? 'font-size: ' + (initFrom + (transitionDistance / initAnimPoints * (i + 1))) + 'px;' : ''}`;
+                });
+            }
        }
        else area.css = 'font-size: 0px;';
        extraSetup(area);
@@ -1,6 +1,6 @@
 const { Gdk } = imports.gi;

-export function setupCursorHover(button) {
+export function setupCursorHover(button) { // Hand pointing cursor on hover
    const display = Gdk.Display.get_default();
    button.connect('enter-notify-event', () => {
        const cursor = Gdk.Cursor.new_from_name(display, 'pointer');
@@ -14,7 +14,7 @@ export function setupCursorHover(button) {

 }

-export function setupCursorHoverAim(button) {
+export function setupCursorHoverAim(button) { // Crosshair cursor on hover
    button.connect('enter-notify-event', () => {
        const display = Gdk.Display.get_default();
        const cursor = Gdk.Cursor.new_from_name(display, 'crosshair');
@@ -28,7 +28,7 @@ export function setupCursorHoverAim(button) {
    });
 }

-export function setupCursorHoverGrab(button) {
+export function setupCursorHoverGrab(button) { // Hand ready to grab on hover
    button.connect('enter-notify-event', () => {
        const display = Gdk.Display.get_default();
        const cursor = Gdk.Cursor.new_from_name(display, 'grab');
@@ -42,7 +42,7 @@ export function setupCursorHoverGrab(button) {
    });
 }

-export function setupCursorHoverInfo(button) {
+export function setupCursorHoverInfo(button) { // "?" mark cursor on hover
    const display = Gdk.Display.get_default();
    button.connect('enter-notify-event', () => {
        const cursor = Gdk.Cursor.new_from_name(display, 'help');
@@ -55,43 +55,3 @@ export function setupCursorHoverInfo(button) {
    });
 }

-// failed radial ripple experiment
-//
-// var clicked = false;
-// var dummy = false;
-// var cursorX = 0;
-// var cursorY = 0;
-// const styleContext = button.get_style_context();
-// var clickColor = styleContext.get_property('background-color', Gtk.StateFlags.HOVER);
-// clickColor.green += CLICK_BRIGHTEN_AMOUNT;
-// clickColor.blue += CLICK_BRIGHTEN_AMOUNT;
-// clickColor.red += CLICK_BRIGHTEN_AMOUNT;
-// clickColor = clickColor.to_string();
-// button.add_events(Gdk.EventMask.POINTER_MOTION_MASK);
-// button.connect('motion-notify-event', (widget, event) => {
-//     [dummy, cursorX, cursorY] = event.get_coords(); // Get the mouse coordinates relative to the widget
-//     if(!clicked) widget.css = `
-//         background-image: radial-gradient(circle at ${cursorX}px ${cursorY}px, rgba(0,0,0,0), rgba(0,0,0,0) 0%, rgba(0,0,0,0) 0%, ${clickColor} 0%, ${clickColor} 0%, ${clickColor} 0%, ${clickColor} 0%, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 0%);
-//     `;
-// });
-
-// button.connect('button-press-event', (widget, event) => {
-//     clicked = true;
-//     [dummy, cursorX, cursorY] = event.get_coords(); // Get the mouse coordinates relative to the widget
-//     cursorX = Math.round(cursorX); cursorY = Math.round(cursorY);
-//     widget.css = `
-//         background-image: radial-gradient(circle at ${cursorX}px ${cursorY}px, rgba(0,0,0,0), rgba(0,0,0,0) 0%, rgba(0,0,0,0) 0%, ${clickColor} 0%, ${clickColor} 0%, ${clickColor} 0%, ${clickColor} 0%, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 0%);
-//     `;
-//     widget.toggleClassName('growingRadial', true);
-//     widget.css = `
-//         background-image: radial-gradient(circle at ${cursorX}px ${cursorY}px, rgba(0,0,0,0), rgba(0,0,0,0) 0%, rgba(0,0,0,0) 0%, ${clickColor} 0%, ${clickColor} 0%, ${clickColor} 70%, ${clickColor} 70%, rgba(0,0,0,0) 70%, rgba(0,0,0,0) 70%);
-//     `
-// });
-// button.connect('button-release-event', (widget, event) => {
-//     widget.toggleClassName('growingRadial', false);
-//     widget.toggleClassName('fadingRadial', false);
-//     widget.css = `
-//     background-image: radial-gradient(circle at ${cursorX}px ${cursorY}px, rgba(0,0,0,0), rgba(0,0,0,0) 0%, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 70%, rgba(0,0,0,0) 70%, rgba(0,0,0,0) 70%, rgba(0,0,0,0) 70%);
-//     `
-//     clicked = false;
-// });
@@ -20,6 +20,10 @@ function guessMessageType(summary) {
    return 'chat';
 }

+function exists(widget) {
+    return widget !== null;
+}
+
 const NotificationIcon = (notifObject) => {
    // { appEntry, appIcon, image }, urgency = 'normal'
    if (notifObject.image) {
@@ -71,9 +75,9 @@ const NotificationIcon = (notifObject) => {
 export default ({
    notifObject,
    isPopup = false,
-    popupTimeout = 3000,
    props = {},
 } = {}) => {
+    const popupTimeout = notifObject.timeout || (notifObject.urgency == 'critical' ? 8000 : 3000);
    const command = (isPopup ?
        () => notifObject.dismiss() :
        () => notifObject.close()
@@ -82,11 +86,14 @@ export default ({
        widget.sensitive = false;
        notificationBox.setCss(middleClickClose);
        Utils.timeout(200, () => {
-            wholeThing.revealChild = false;
+            if (wholeThing) wholeThing.revealChild = false;
        }, wholeThing);
        Utils.timeout(400, () => {
            command();
-            wholeThing.destroy();
+            if (wholeThing) {
+                wholeThing.destroy();
+                wholeThing = null;
+            }
        }, wholeThing);
    }
    const widget = EventBox({
@@ -105,22 +112,39 @@ export default ({
        },
        onMiddleClick: (self) => {
            destroyWithAnims();
+        },
+        setup: (self) => {
+            self.on("button-press-event", () => {
+                wholeThing.attribute.held = true;
+                notificationContent.toggleClassName(`${isPopup ? 'popup-' : ''}notif-clicked-${notifObject.urgency}`, true);
+                Utils.timeout(800, () => {
+                    if (wholeThing?.attribute.held) {
+                        Utils.execAsync(['wl-copy', `${notifObject.body}`])
+                        notifTextSummary.label = notifObject.summary + " (copied)";
+                        Utils.timeout(3000, () => notifTextSummary.label = notifObject.summary)
+                    }
+                })
+            }).on("button-release-event", () => {
+                wholeThing.attribute.held = false;
+                notificationContent.toggleClassName(`${isPopup ? 'popup-' : ''}notif-clicked-${notifObject.urgency}`, false);
+            })
        }
    });
-    const wholeThing = Revealer({
+    let wholeThing = Revealer({
        attribute: {
-            'id': notifObject.id,
            'close': undefined,
-            'hovered': false,
+            'destroyWithAnims': destroyWithAnims,
            'dragging': false,
-            'destroyWithAnims': () => destroyWithAnims,
+            'held': false,
+            'hovered': false,
+            'id': notifObject.id,
        },
        revealChild: false,
        transition: 'slide_down',
        transitionDuration: 200,
        child: Box({ // Box to make sure css-based spacing works
            homogeneous: true,
-        })
+        }),
    });

    const display = Gdk.Display.get_default();
@@ -205,6 +229,23 @@ export default ({
        notifTime = 'Yesterday';
    else
        notifTime = messageTime.format('%d/%m');
+    const notifTextSummary = Label({
+        xalign: 0,
+        className: 'txt-small txt-semibold titlefont',
+        justify: Gtk.Justification.LEFT,
+        hexpand: true,
+        maxWidthChars: 24,
+        truncate: 'end',
+        ellipsize: 3,
+        useMarkup: notifObject.summary.startsWith('<'),
+        label: notifObject.summary,
+    });
+    const notifTextBody = Label({
+        vpack: 'center',
+        justification: 'right',
+        className: 'txt-smaller txt-semibold',
+        label: notifTime,
+    });
    const notifText = Box({
        valign: Gtk.Align.CENTER,
        vertical: true,
@@ -212,23 +253,8 @@ export default ({
        children: [
            Box({
                children: [
-                    Label({
-                        xalign: 0,
-                        className: 'txt-small txt-semibold titlefont',
-                        justify: Gtk.Justification.LEFT,
-                        hexpand: true,
-                        maxWidthChars: 24,
-                        truncate: 'end',
-                        ellipsize: 3,
-                        useMarkup: notifObject.summary.startsWith('<'),
-                        label: notifObject.summary,
-                    }),
-                    Label({
-                        vpack: 'center',
-                        justification: 'right',
-                        className: 'txt-smaller txt-semibold',
-                        label: notifTime,
-                    }),
+                    notifTextSummary,
+                    notifTextBody,
                ]
            }),
            notifTextPreview,
@@ -313,6 +339,7 @@ export default ({
            .hook(gesture, self => {
                var offset_x = gesture.get_offset()[1];
                var offset_y = gesture.get_offset()[2];
+                // Which dir?
                if (initDirVertical == -1) {
                    if (Math.abs(offset_y) > MOVE_THRESHOLD)
                        initDirVertical = 1;
@@ -321,7 +348,7 @@ export default ({
                        initDirX = (offset_x > 0 ? 1 : -1);
                    }
                }
-
+                // Horizontal drag
                if (initDirVertical == 0 && offset_x > MOVE_THRESHOLD) {
                    if (initDirX < 0)
                        self.setCss(`margin-left: 0px; margin-right: 0px;`);
@@ -342,12 +369,12 @@ export default ({
                        `);
                    }
                }
-
-                wholeThing.attribute.dragging = Math.abs(offset_x) > 10;
-
-                if (widget.window)
-                    widget.window.set_cursor(Gdk.Cursor.new_from_name(display, 'grabbing'));
-
+                // Update dragging
+                wholeThing.attribute.dragging = Math.abs(offset_x) > MOVE_THRESHOLD;
+                if (Math.abs(offset_x) > MOVE_THRESHOLD ||
+                    Math.abs(offset_y) > MOVE_THRESHOLD) wholeThing.attribute.held = false;
+                widget.window?.set_cursor(Gdk.Cursor.new_from_name(display, 'grabbing'));
+                // Vertical drag
                if (initDirVertical == 1 && offset_y > MOVE_THRESHOLD && !expanded) {
                    notifTextPreview.revealChild = false;
                    notifTextExpanded.revealChild = true;
@@ -380,11 +407,14 @@ export default ({
                        widget.sensitive = false;
                    }
                    Utils.timeout(200, () => {
-                        wholeThing.revealChild = false
+                        if (wholeThing) wholeThing.revealChild = false;
                    }, wholeThing);
                    Utils.timeout(400, () => {
                        command();
-                        wholeThing.destroy();
+                        if (wholeThing) {
+                            wholeThing.destroy();
+                            wholeThing = null;
+                        }
                    }, wholeThing);
                }
                else {
@@ -405,6 +435,17 @@ export default ({
    })
    widget.add(notificationBox);
    wholeThing.child.children = [widget];
-
+    if (isPopup) Utils.timeout(popupTimeout, () => {
+        if (wholeThing) {
+            wholeThing.revealChild = false;
+            Utils.timeout(200, () => {
+                if (wholeThing) {
+                    wholeThing.destroy();
+                    wholeThing = null;
+                }
+                command();
+            }, wholeThing);
+        }
+    })
    return wholeThing;
 }
@@ -73,10 +73,10 @@ export const NotificationIndicator = (notifCenterName = 'sideright') => {

 export const BluetoothIndicator = () => Widget.Stack({
    transition: 'slide_up_down',
-    items: [
-        ['false', Widget.Label({ className: 'txt-norm icon-material', label: 'bluetooth_disabled' })],
-        ['true', Widget.Label({ className: 'txt-norm icon-material', label: 'bluetooth' })],
-    ],
+    children: {
+        'false': Widget.Label({ className: 'txt-norm icon-material', label: 'bluetooth_disabled' }),
+        'true': Widget.Label({ className: 'txt-norm icon-material', label: 'bluetooth' }),
+    },
    setup: (self) => self
        .hook(Bluetooth, stack => {
            stack.shown = String(Bluetooth.enabled);
@@ -87,13 +87,13 @@ export const BluetoothIndicator = () => Widget.Stack({

 const NetworkWiredIndicator = () => Widget.Stack({
    transition: 'slide_up_down',
-    items: [
-        ['fallback', SimpleNetworkIndicator()],
-        ['unknown', Widget.Label({ className: 'txt-norm icon-material', label: 'wifi_off' })],
-        ['disconnected', Widget.Label({ className: 'txt-norm icon-material', label: 'signal_wifi_off' })],
-        ['connected', Widget.Label({ className: 'txt-norm icon-material', label: 'lan' })],
-        ['connecting', Widget.Label({ className: 'txt-norm icon-material', label: 'settings_ethernet' })],
-    ],
+    children: {
+        'fallback': SimpleNetworkIndicator(),
+        'unknown': Widget.Label({ className: 'txt-norm icon-material', label: 'wifi_off' }),
+        'disconnected': Widget.Label({ className: 'txt-norm icon-material', label: 'signal_wifi_off' }),
+        'connected': Widget.Label({ className: 'txt-norm icon-material', label: 'lan' }),
+        'connecting': Widget.Label({ className: 'txt-norm icon-material', label: 'settings_ethernet' }),
+    },
    setup: (self) => self.hook(Network, stack => {
        if (!Network.wired)
            return;
@@ -118,16 +118,16 @@ const SimpleNetworkIndicator = () => Widget.Icon({

 const NetworkWifiIndicator = () => Widget.Stack({
    transition: 'slide_up_down',
-    items: [
-        ['disabled', Widget.Label({ className: 'txt-norm icon-material', label: 'wifi_off' })],
-        ['disconnected', Widget.Label({ className: 'txt-norm icon-material', label: 'signal_wifi_off' })],
-        ['connecting', Widget.Label({ className: 'txt-norm icon-material', label: 'settings_ethernet' })],
-        ['0', Widget.Label({ className: 'txt-norm icon-material', label: 'signal_wifi_0_bar' })],
-        ['1', Widget.Label({ className: 'txt-norm icon-material', label: 'network_wifi_1_bar' })],
-        ['2', Widget.Label({ className: 'txt-norm icon-material', label: 'network_wifi_2_bar' })],
-        ['3', Widget.Label({ className: 'txt-norm icon-material', label: 'network_wifi_3_bar' })],
-        ['4', Widget.Label({ className: 'txt-norm icon-material', label: 'signal_wifi_4_bar' })],
-    ],
+    children: {
+        'disabled': Widget.Label({ className: 'txt-norm icon-material', label: 'wifi_off' }),
+        'disconnected': Widget.Label({ className: 'txt-norm icon-material', label: 'signal_wifi_off' }),
+        'connecting': Widget.Label({ className: 'txt-norm icon-material', label: 'settings_ethernet' }),
+        '0': Widget.Label({ className: 'txt-norm icon-material', label: 'signal_wifi_0_bar' }),
+        '1': Widget.Label({ className: 'txt-norm icon-material', label: 'network_wifi_1_bar' }),
+        '2': Widget.Label({ className: 'txt-norm icon-material', label: 'network_wifi_2_bar' }),
+        '3': Widget.Label({ className: 'txt-norm icon-material', label: 'network_wifi_3_bar' }),
+        '4': Widget.Label({ className: 'txt-norm icon-material', label: 'signal_wifi_4_bar' }),
+    },
    setup: (self) => self.hook(Network, (stack) => {
        if (!Network.wifi) {
            return;
@@ -143,11 +143,11 @@ const NetworkWifiIndicator = () => Widget.Stack({

 export const NetworkIndicator = () => Widget.Stack({
    transition: 'slide_up_down',
-    items: [
-        ['fallback', SimpleNetworkIndicator()],
-        ['wifi', NetworkWifiIndicator()],
-        ['wired', NetworkWiredIndicator()],
-    ],
+    children: {
+        'fallback': SimpleNetworkIndicator(),
+        'wifi': NetworkWifiIndicator(),
+        'wired': NetworkWiredIndicator(),
+    },
    setup: (self) => self.hook(Network, stack => {
        if (!Network.primary) {
            stack.shown = 'wifi';
@@ -176,14 +176,21 @@ const HyprlandXkbKeyboardLayout = async ({ useFlag } = {}) => {
            }
            languageStackArray = Array.from({ length: initLangs.length }, (_, i) => {
                const lang = languages.find(lang => lang.layout == initLangs[i]);
-                if (!lang) return [
-                    initLangs[i],
-                    Widget.Label({ label: initLangs[i] })
-                ];
-                return [
-                    lang.layout,
-                    Widget.Label({ label: (useFlag ? lang.flag : lang.layout) })
-                ];
+                // if (!lang) return [
+                //     initLangs[i],
+                //     Widget.Label({ label: initLangs[i] })
+                // ];
+                // return [
+                //     lang.layout,
+                //     Widget.Label({ label: (useFlag ? lang.flag : lang.layout) })
+                // ];
+                // Object
+                if (!lang) return {
+                    [initLangs[i]]: Widget.Label({ label: initLangs[i] })
+                };
+                return {
+                    [lang.layout]: Widget.Label({ label: (useFlag ? lang.flag : lang.layout) })
+                };
            });
        };
        updateCurrentKeyboards();
@@ -192,12 +199,15 @@ const HyprlandXkbKeyboardLayout = async ({ useFlag } = {}) => {
            transition: 'slide_left',
            revealChild: languageStackArray.length > 1,
        });
+        const widgetKids = {
+            ...languageStackArray.reduce((obj, lang) => {
+                return { ...obj, ...lang };
+            }, {}),
+            'undef': Widget.Label({ label: '?' }),
+        }
        const widgetContent = Widget.Stack({
            transition: 'slide_up_down',
-            items: [
-                ...languageStackArray,
-                ['undef', Widget.Label({ label: '?' })]
-            ],
+            children: widgetKids,
            setup: (self) => self.hook(Hyprland, (stack, kbName, layoutName) => {
                if (!kbName) {
                    return;
@@ -41,7 +41,7 @@ get_light_dark() {
    lightdark=""
    if [ ! -f ~/.cache/ags/user/colormode.txt ]; then
        echo "" > ~/.cache/ags/user/colormode.txt
-    else 
+    else
        lightdark=$(cat ~/.cache/ags/user/colormode.txt) # either "" or "-l"
    fi
    echo "$lightdark"
@@ -55,7 +55,7 @@ apply_gtklock() {
        sassc ~/.config/ags/scripts/templates/gtklock/main.scss ~/.config/gtklock/style.css
        return
    fi
-    
+
    # Check if scripts/templates/gtklock/style.css exists
    if [ ! -f "scripts/templates/gtklock/style.css" ]; then
        echo "Template file not found for Gtklock. Skipping that."
@@ -99,6 +99,29 @@ apply_foot() {
    cp "$HOME/.config/foot/foot_new.ini" "$HOME/.config/foot/foot.ini"
 }

+apply_term() {
+    # Check if scripts/templates/foot/foot.ini exists
+    if [ ! -f "scripts/templates/terminal/sequences.material" ]; then
+        echo "Template file not found for Terminal. Skipping that."
+        return
+    fi
+    if [ ! -d "$HOME/.cache/ags/user/colorschemes" ]; then
+        mkdir -p "$HOME/.cache/ags/user/colorschemes"
+    fi
+    # Copy template
+    cp "scripts/templates/terminal/sequences.material" "$HOME/.cache/ags/user/colorschemes/sequences"
+    # Apply colors
+    for i in "${!colorlist[@]}"; do
+        sed -i "s/${colorlist[$i]} #/${colorvalues[$i]#\#}/g" "$HOME/.cache/ags/user/colorschemes/sequences"
+    done
+
+    for file in /dev/pts/*; do
+      if [[ $file =~ ^/dev/pts/[0-9]+$ ]]; then
+        cat "$HOME/.cache/ags/user/colorschemes/sequences" > "$file"
+      fi
+    done
+}
+
 apply_hyprland() {
    # Check if scripts/templates/hypr/colors.conf exists
    if [ ! -f "scripts/templates/hypr/colors.conf" ]; then
@@ -111,14 +134,14 @@ apply_hyprland() {
    for i in "${!colorlist[@]}"; do
        sed -i "s/{{ ${colorlist[$i]} }}/${colorvalues[$i]#\#}/g" "$HOME/.config/hypr/colors_new.conf"
    done
-    
+
    mv "$HOME/.config/hypr/colors_new.conf" "$HOME/.config/hypr/colors.conf"
 }

 apply_gtk() { # Using gradience-cli
    lightdark=$(get_light_dark)
-    
-    # Copy template 
+
+    # Copy template
    cp "scripts/templates/gradience/preset_template.json" "scripts/templates/gradience/preset.json"

    # Apply colors
@@ -129,8 +152,8 @@ apply_gtk() { # Using gradience-cli
    mkdir -p "$HOME/.config/presets" # create gradience presets folder
    gradience-cli apply -p scripts/templates/gradience/preset.json --gtk both

-    # Set light/dark preference 
-    # And set GTK theme manually as Gradience defaults to light adw-gtk3 
+    # Set light/dark preference
+    # And set GTK theme manually as Gradience defaults to light adw-gtk3
    # (which is unreadable when broken when you use dark mode)
    if [ "$lightdark" = "-l" ]; then
        gsettings set org.gnome.desktop.interface gtk-theme 'adw-gtk3'
@@ -152,4 +175,4 @@ apply_hyprland &
 apply_gtk &
 apply_gtklock &
 apply_fuzzel &
-apply_foot
+apply_term &
@@ -1,4 +1,4 @@
-#!/usr/bin/bash
+#!/usr/bin/env bash

 # check if no arguments
 if [ $# -eq 0 ]; then
@@ -10,51 +10,50 @@ fi
 lightdark=""
 if [ ! -f "$HOME/.cache/ags/user/colormode.txt" ]; then
    echo "" > "$HOME/.cache/ags/user/colormode.txt"
-else 
+else
    lightdark=$(cat "$HOME/.cache/ags/user/colormode.txt") # either "" or "-l"
 fi
 # check if the file ~/.cache/ags/user/colorbackend.txt exists. if not, create it. else, read it to $lightdark
 backend="material"
 if [ ! -f "$HOME/.cache/ags/user/colorbackend.txt" ]; then
    echo "material" > "$HOME/.cache/ags/user/colorbackend.txt"
-else 
+else
    backend=$(cat "$HOME/.cache/ags/user/colorbackend.txt") # either "" or "-l"
 fi

 cd "$HOME/.config/ags/scripts/" || exit
 if [[ "$1" = "#"* ]]; then # this is a color
-    color_generation/generate_colors_material.py --color "$1" "$lightdark" > $HOME/.cache/ags/user/generated_colors.txt
+    color_generation/generate_colors_material.py --color "$1" "$lightdark" > "$HOME/.cache/ags/user/generated_colors.txt"
    if [ "$2" = "--apply" ]; then
-        cp $HOME/.cache/ags/user/generated_colors.txt "$HOME/.config/ags/scss/_material.scss"
+        cp "$HOME/.cache/ags/user/generated_colors.txt" "$HOME/.config/ags/scss/_material.scss"
        color_generation/applycolor.sh
    fi
 elif [ "$backend" = "material" ]; then
-    color_generation/generate_colors_material.py --path "$1" "$lightdark" > $HOME/.cache/ags/user/generated_colors.txt
+    color_generation/generate_colors_material.py --path "$1" "$lightdark" > "$HOME/.cache/ags/user/generated_colors.txt"
    if [ "$2" = "--apply" ]; then
-        cp $HOME/.cache/ags/user/generated_colors.txt "$HOME/.config/ags/scss/_material.scss"
+        cp "$HOME/.cache/ags/user/generated_colors.txt" "$HOME/.config/ags/scss/_material.scss"
        color_generation/applycolor.sh
    fi
 elif [ "$backend" = "pywal" ]; then
    # clear and generate
    wal -c
-    echo wal -i "$1" -n -t -s -e "$lightdark" -q 
-    wal -i "$1" -n -t -s -e $lightdark -q 
+    wal -i "$1" -n $lightdark -q
    # copy scss
-    cp "$HOME/.cache/wal/colors.scss" $HOME/.cache/ags/user/generated_colors.txt
-    
-    cat color_generation/pywal_to_material.scss >> $HOME/.cache/ags/user/generated_colors.txt
+    cp "$HOME/.cache/wal/colors.scss" "$HOME/.cache/ags/user/generated_colors.txt"
+
+    cat color_generation/pywal_to_material.scss >> "$HOME/.cache/ags/user/generated_colors.txt"
    if [ "$2" = "--apply" ]; then
-        sassc $HOME/.cache/ags/user/generated_colors.txt $HOME/.cache/ags/user/generated_colors_classes.scss --style compact
-        sed -i "s/ { color//g" $HOME/.cache/ags/user/generated_colors_classes.scss
-        sed -i "s/\./$/g" $HOME/.cache/ags/user/generated_colors_classes.scss
-        sed -i "s/}//g" $HOME/.cache/ags/user/generated_colors_classes.scss
+        sassc "$HOME/.cache/ags/user/generated_colors.txt" "$HOME/.cache/ags/user/generated_colors_classes.scss" --style compact
+        sed -i "s/ { color//g" "$HOME/.cache/ags/user/generated_colors_classes.scss"
+        sed -i "s/\./$/g" "$HOME/.cache/ags/user/generated_colors_classes.scss"
+        sed -i "s/}//g" "$HOME/.cache/ags/user/generated_colors_classes.scss"
        if [ "$lightdark" = "-l" ]; then
-            printf "\n"'$darkmode: false;'"\n" >> $HOME/.cache/ags/user/generated_colors_classes.scss
+            printf "\n""\$darkmode: false;""\n" >> "$HOME/.cache/ags/user/generated_colors_classes.scss"
        else
-            printf "\n"'$darkmode: true;'"\n" >> $HOME/.cache/ags/user/generated_colors_classes.scss
+            printf "\n""\$darkmode: true;""\n" >> "$HOME/.cache/ags/user/generated_colors_classes.scss"
        fi

-        cp $HOME/.cache/ags/user/generated_colors_classes.scss "$HOME/.config/ags/scss/_material.scss"
+        cp "$HOME/.cache/ags/user/generated_colors_classes.scss" "$HOME/.config/ags/scss/_material.scss"

        color_generation/applycolor.sh
    fi
@@ -1,4 +1,4 @@
-#!/bin/python3
+#!/usr/bin/env python3
 from material_color_utilities_python import *
 from pathlib import Path
 import sys
@@ -1,4 +1,4 @@
-#!/usr/bin/bash
+#!/usr/bin/env bash

 color=$(hyprpicker --no-fancy)

@@ -1,4 +1,4 @@
-#!/usr/bin/bash
+#!/usr/bin/env bash

 if [ "$1" == "--noswitch" ]; then
    imgpath=$(swww query | awk -F 'image: ' '{print $2}')
@@ -0,0 +1,2 @@
+#!/usr/bin/env bash
+hyprctl dispatch "$1" $(((($(hyprctl activeworkspace -j | gojq -r .id) - 1)  / 10) * 10 + $2))
@@ -1,4 +1,11 @@
-#!/bin/bash
+#!/usr/bin/env bash
+
+# Check if sway is running
+if ! pgrep -x sway > /dev/null; then
+  echo "Sway is not running"
+  exit 1
+fi
+

 # Get the current workspace number
 current=$(swaymsg -t get_workspaces | gojq '.[] | select(.focused==true) | .num')
@@ -20,4 +27,4 @@ if [[ $2 == 'move' ]]; then
  swaymsg move container to workspace $new_workspace
 else 
  swaymsg workspace $new_workspace
-fi
+fi
@@ -87,9 +87,9 @@
        "BLACK_500": "#393634",
        "BLACK_700": "#33302F",
        "BLACK_900": "#2B2928",
-        "accent_bg_color": "#e4b5ff",
-        "accent_fg_color": "#471868",
-        "accent_color": "#e4b5ff",
+        "accent_bg_color": "#ffb1c3",
+        "accent_fg_color": "#66002a",
+        "accent_color": "#ffb1c3",
        "destructive_bg_color": "#ffb4a9",
        "destructive_fg_color": "#680003",
        "destructive_color": "#ffb4a9",
@@ -99,22 +99,22 @@
        "warning_fg_color": "rgba(0, 0, 0, 0.87)",
        "error_bg_color": "#ffb4a9",
        "error_fg_color": "#680003",
-        "window_bg_color": "#111012",
-        "window_fg_color": "#e7e0e5",
-        "view_bg_color": "#1d1b1e",
-        "view_fg_color": "#e7e0e5",
+        "window_bg_color": "#130F10",
+        "window_fg_color": "#ecdfe0",
+        "view_bg_color": "#201a1b",
+        "view_fg_color": "#ecdfe0",
        "headerbar_bg_color": "mix(@dialog_bg_color, @window_bg_color, 0.5)",
-        "headerbar_fg_color": "#eedcf5",
-        "headerbar_border_color": "#4f4256",
+        "headerbar_fg_color": "#ffd9df",
+        "headerbar_border_color": "#5c3f45",
        "headerbar_backdrop_color": "@headerbar_bg_color",
        "headerbar_shade_color": "rgba(0, 0, 0, 0.09)",
-        "card_bg_color": "#111012",
-        "card_fg_color": "#eedcf5",
+        "card_bg_color": "#130F10",
+        "card_fg_color": "#ffd9df",
        "card_shade_color": "rgba(0, 0, 0, 0.09)",
-        "dialog_bg_color": "#4f4256",
-        "dialog_fg_color": "#eedcf5",
-        "popover_bg_color": "#4f4256",
-        "popover_fg_color": "#eedcf5",
+        "dialog_bg_color": "#5c3f45",
+        "dialog_fg_color": "#ffd9df",
+        "popover_bg_color": "#5c3f45",
+        "popover_fg_color": "#ffd9df",
        "thumbnail_bg_color": "#1a1b26",
        "thumbnail_fg_color": "#AEE5FA",
        "shade_color": "rgba(0, 0, 0, 0.36)",
@@ -5,23 +5,11 @@ general {
    col.inactive_border = rgba({{ $secondaryContainer }}CC)
 }

-plugin {
-    droidbars { # This is my hyprbars mod that broke :(
-        # example config
-        bar_height = 30
-        background_color = rgba({{ $background }}FF)
-        # background_color_active = rgba({{ $surfaceVariant }}FF) # Not added yet
-        text_color = rgba({{ $onSecondaryContainer }}FF)
-        font_family = Rubik, Geist, AR One Sans, Reddit Sans, Inter, Roboto, Ubuntu, Noto Sans, sans-serif
-        button_font_fmily = JetBrainsMono NF
+misc {
+    background_color = rgba({{ $surface }}FF)
+}

-        # example buttons (R -> L)
-        # droidbars-button = [0]isLeft(0/1), [1]color, [2]color2, [3]width, [4]height, [5]icon, [6]buttonType, [7]on-click     
-        droidbars-button = 0, rgba({{ $onSecondaryContainer }}FF), rgba({{ $primary }}FF), 42, 16,‎    󰖭, normal, hyprctl dispatch killactive
-        droidbars-button = 0, rgba({{ $onSecondaryContainer }}FF), rgba({{ $primary }}FF), 42, 16,‎   , normal, hyprctl dispatch fullscreen 1
-        droidbars-button = 1, rgba({{ $onSecondaryContainer }}FF), rgba({{ $primary }}FF), 16, 16,‎󰐃, pin, hyprctl dispatch pin
-        droidbars-button = 1, rgba({{ $onSecondaryContainer }}FF), rgba({{ $primary }}FF), 16, 16,󰗘, float, hyprctl dispatch togglefloating
-    }
+plugin {
    hyprbars {
        # Honestly idk if it works like css, but well, why not
        bar_text_font = Rubik, Geist, AR One Sans, Reddit Sans, Inter, Roboto, Ubuntu, Noto Sans, sans-serif
@@ -0,0 +1 @@
+]4;0;#$background #\]4;1;#$error #\]4;2;#$inversePrimary #\]4;3;#$onPrimaryContainer #\]4;4;#$onPrimaryContainer #\]4;5;#$onSecondaryContainer #\]4;6;#$primary #\]4;7;#$onSurfaceVariant #\]4;8;#$background #\]4;9;#$error #\]4;10;#$inversePrimary #\]4;11;#$onPrimaryContainer #\]4;12;#$onPrimaryContainer #\]4;13;#$onSecondaryContainer #\]4;14;#$primary #\]4;15;#$onSurfaceVariant #\]10;#$onSurfaceVariant #\]11;#$background #\]12;#$onSurfaceVariant #\]13;#$onSurfaceVariant #\]17;#$onSurfaceVariant #\]19;#$background #\]4;232;#$background #\]4;256;#$onSurfaceVariant #\]708;#$background #\
@@ -0,0 +1 @@
+]4;0;#regular0\]4;1;#regular1\]4;2;#regular2\]4;3;#regular3\]4;4;#regular4\]4;5;#regular5\]4;6;#regular6\]4;7;#regular7\]4;8;#bright0\]4;9;#bright1\]4;10;#bright2\]4;11;#bright3\]4;12;#bright4\]4;13;#bright5\]4;14;#bright6\]4;15;#bright7\]10;#regular7\]11;#regular0\]12;#regular7\]13;#regular7\]17;#regular7\]19;#regular0\]4;232;#regular0\]4;256;#regular7\]708;#regular0\
@@ -48,24 +48,6 @@ $bar_subgroup_bg: $surfaceVariant;
    padding-left: 0.341rem;
 }

-.bar-group-pad-left {
-    padding-left: 1.364rem;
-    padding-right: 0.681rem;
-}
-
-.bar-group-pad-right {
-    padding-left: 0.681rem;
-    padding-right: 1.364rem;
-}
-
-.bar-group-pad-leftonly {
-    padding-left: 0.681rem;
-}
-
-.bar-group-pad-rightonly {
-    padding-right: 0.681rem;
-}
-
 .bar-group-standalone {
    @include bar-group-rounding;
    -gtk-outline-radius: 1.364rem;
@@ -142,6 +124,7 @@ $bar_subgroup_bg: $surfaceVariant;

 .bar-batt {
    @include full-rounding;
+    @include element_decel;
    min-height: 1.77rem;
    min-width: 1.77rem;
    border-radius: 10rem;
@@ -173,24 +156,17 @@ $bar_subgroup_bg: $surfaceVariant;
 }

 .bar-batt-circprog-low {
-    @include fluent_decel_long;
-    min-width: 0.068rem; // line width
-    min-height: 1.636rem;
-    padding: 0rem;
    background-color: $error;
    color: $errorContainer;
 }

 .bar-batt-circprog-full {
-    @include fluent_decel_long;
-    min-width: 0.068rem; // line width
-    min-height: 1.636rem;
-    padding: 0rem;
    background-color: $successContainer;
    color: $onSuccessContainer;
 }

 .bar-music-playstate {
+    @include element_decel;
    min-height: 1.77rem;
    min-width: 1.77rem;
    border-radius: 10rem;
@@ -237,24 +213,6 @@ $bar_subgroup_bg: $surfaceVariant;
    background-color: rgba(30, 30, 30, 0.6);
 }

-.bar-music-bottom-bg {
-    border-radius: 1.364rem;
-    min-width: 34.091rem;
-}
-
-.bar-music-bottom-ctl-bg {
-    border-radius: 1.364rem;
-    background-color: rgba(30, 30, 30, 0.6);
-}
-
-.bar-music-extended-textbox {
-    margin: 1.023rem;
-}
-
-.bar-music-bottom-cover {
-    border-radius: 10rem;
-}
-
 .bar-music-hide-false {
    @include menu_decel;
    transition-duration: 100ms;
@@ -267,70 +225,6 @@ $bar_subgroup_bg: $surfaceVariant;
    opacity: 0;
 }

-.bar-music-btn {
-    font-size: 1.364rem;
-    border-radius: 10rem;
-    min-height: 2.591rem;
-    min-width: 2.591rem;
-}
-
-.bar-music-btn:hover,
-.bar-music-btn:focus {
-    background-color: $hovercolor;
-}
-
-.bar-prog-batt {
-    min-height: 0.955rem;
-    min-width: 0.068rem;
-    padding: 0rem;
-    border-radius: 10rem;
-
-    trough {
-        min-height: 0.954rem;
-        min-width: 0.068rem;
-        border-radius: 10rem;
-    }
-
-    progress {
-        min-height: 0.68rem;
-        min-width: 0.68rem;
-        margin: 0rem 0.137rem;
-        border-radius: 10rem;
-        background-color: $t_onSecondaryContainer;
-    }
-}
-
-.bar-prog-batt-low {
-    progress {
-        background-color: $errorContainer;
-    }
-}
-
-.bar-prog-batt-full {
-    progress {
-        background-color: $onSuccessContainer;
-    }
-}
-
-.bar-batt-chargestate {
-    border-radius: 10rem;
-    background-color: transparent;
-}
-
-.bar-batt-chargestate-charging {
-    border-radius: 10rem;
-    min-width: 0.681rem;
-    min-height: 0.681rem;
-    background-color: $onSurfaceVariant;
-}
-
-.bar-batt-chargestate-charging-smaller {
-    border-radius: 10rem;
-    min-width: 0.409rem;
-    min-height: 0.409rem;
-    background-color: $onSurfaceVariant;
-}
-
 .bar-corner-spacing {
    min-width: $rounding_large;
    min-height: $rounding_large;
@@ -388,13 +282,14 @@ $bar_subgroup_bg: $surfaceVariant;

 .bar-systray-item {
    @include full-rounding;
+    @include element_decel;
    min-height: 1.032rem;
    min-width: 1.032rem;
 }

 .bar-statusicons {
    @include full-rounding;
-    @include menu_decel;
+    @include element_decel;
    margin: 0.273rem;
    padding: 0rem 0.614rem;
 }
@@ -409,6 +304,7 @@ $bar_subgroup_bg: $surfaceVariant;

 .bar-util-btn {
    @include full-rounding;
+    @include element_decel;
    min-height: 1.77rem;
    min-width: 1.77rem;
    background-color: $bar_subgroup_bg;
@@ -31,7 +31,7 @@
 // .cheatsheet-action {}

 .cheatsheet-closebtn {
-    @include menu_decel;
+    @include element_decel;
    @include full-rounding;
    min-width: 2.386rem;
    min-height: 2.386rem;
@@ -40,8 +40,7 @@ $transparentize_surface_amount_less: 0.6;
 $transparentize_surface_amount_less_less: 0.55;
 $transparentize_surface_amount: 0.7;
 $transparentize_surface_amount_more: 0.8;
-$transparentize_surface_amount_subtract_surface: $transparentize_surface_amount -
-    $transparentize_amount;
+$transparentize_surface_amount_subtract_surface: $transparentize_surface_amount - $transparentize_amount;

@if $darkmode ==true {
    // Less transparency
@@ -50,8 +49,7 @@ $transparentize_surface_amount_subtract_surface: $transparentize_surface_amount
    $transparentize_surface_amount_less_less: 0.55;
    $transparentize_surface_amount: 0.69;
    $transparentize_surface_amount_more: 0.9;
-    $transparentize_surface_amount_subtract_surface: $transparentize_surface_amount -
-        $transparentize_amount;
+    $transparentize_surface_amount_subtract_surface: $transparentize_surface_amount - $transparentize_amount;
 }

@if $transparency_enabled ==false {
@@ -76,69 +74,33 @@ $onSuccessContainer: #0c1f13;
 $t_primary: transparentize($primary, $transparentize_amount);
 $t_onPrimary: transparentize($onPrimary, $transparentize_amount);
 $t_primaryContainer: transparentize($primaryContainer, $transparentize_amount);
-$t_onPrimaryContainer: transparentize(
-    $onPrimaryContainer,
-    $transparentize_amount
-);
+$t_onPrimaryContainer: transparentize($onPrimaryContainer, $transparentize_amount);
 $t_secondary: transparentize($secondary, $transparentize_amount);
 $t_onSecondary: transparentize($onSecondary, $transparentize_amount);
-$t_secondaryContainer: transparentize(
-    $secondaryContainer,
-    $transparentize_amount
-);
-$l_t_secondaryContainer: transparentize(
-    $secondaryContainer,
-    $transparentize_surface_amount_less
-);
-$t_onSecondaryContainer: transparentize(
-    $onSecondaryContainer,
-    $transparentize_amount
-);
+$t_secondaryContainer: transparentize($secondaryContainer, $transparentize_amount);
+$l_t_secondaryContainer: transparentize($secondaryContainer, $transparentize_surface_amount_less);
+$t_onSecondaryContainer: transparentize($onSecondaryContainer, $transparentize_amount);
 $t_t_t_onSecondaryContainer: transparentize($onSecondaryContainer, 0.93);
 $t_tertiary: transparentize($tertiary, $transparentize_amount);
 $t_onTertiary: transparentize($onTertiary, $transparentize_amount);
-$t_tertiaryContainer: transparentize(
-    $tertiaryContainer,
-    $transparentize_amount
-);
-$t_onTertiaryContainer: transparentize(
-    $onTertiaryContainer,
-    $transparentize_amount
-);
+$t_tertiaryContainer: transparentize($tertiaryContainer, $transparentize_amount);
+$t_onTertiaryContainer: transparentize($onTertiaryContainer, $transparentize_amount);
 $t_error: transparentize($error, $transparentize_amount);
 $t_onError: transparentize($onError, $transparentize_amount);
 $t_errorContainer: transparentize($errorContainer, $transparentize_amount);
 $t_onErrorContainer: transparentize($onErrorContainer, $transparentize_amount);
 $t_colorbarbg: transparentize($colorbarbg, $transparentize_amount);
 $t_background: transparentize($background, $transparentize_amount);
-$t_t_background: transparentize(
-    $background,
-    $transparentize_surface_amount_more
-);
+$t_t_background: transparentize($background, $transparentize_surface_amount_more);
 $t_onBackground: transparentize($onBackground, $transparentize_amount);
 $t_surface: transparentize($surface, $transparentize_surface_amount);
 $t_t_surface: transparentize($surface, $transparentize_surface_amount_more);
 $t_onSurface: transparentize($onSurface, $transparentize_surface_amount);
-$t_surfaceVariant: transparentize(
-    $surfaceVariant,
-    $transparentize_surface_amount
-);
-$t_onSurfaceVariant: transparentize(
-    $onSurfaceVariant,
-    $transparentize_surface_amount
-);
-$t_t_surfaceVariant: transparentize(
-    $surfaceVariant,
-    $transparentize_surface_amount_more
-);
-$l_t_surfaceVariant: transparentize(
-    $surfaceVariant,
-    $transparentize_surface_amount_less
-);
-$l_l_t_surfaceVariant: transparentize(
-    $surfaceVariant,
-    $transparentize_surface_amount_less_less
-);
+$t_surfaceVariant: transparentize($surfaceVariant, $transparentize_surface_amount);
+$t_onSurfaceVariant: transparentize($onSurfaceVariant, $transparentize_surface_amount);
+$t_t_surfaceVariant: transparentize($surfaceVariant, $transparentize_surface_amount_more);
+$l_t_surfaceVariant: transparentize($surfaceVariant, $transparentize_surface_amount_less);
+$l_l_t_surfaceVariant: transparentize($surfaceVariant, $transparentize_surface_amount_less_less);
 $t_outline: transparentize($outline, $transparentize_amount);
 $t_shadow: transparentize($shadow, $transparentize_amount);
 $t_inverseSurface: transparentize($inverseSurface, $transparentize_amount);
@@ -148,10 +110,8 @@ $t_inversePrimary: transparentize($inversePrimary, $transparentize_amount);
 $t_success: transparentize($error, $transparentize_amount);
 $t_onSuccess: transparentize($onError, $transparentize_amount);
 $t_successContainer: transparentize($errorContainer, $transparentize_amount);
-$t_onSuccessContainer: transparentize(
-    $onErrorContainer,
-    $transparentize_amount
-);
+$t_onSuccessContainer: transparentize($onErrorContainer,
+        $transparentize_amount);

 // Others
 $hovercolor: mix($t_surface, $t_onSurface, 50%);
@@ -169,4 +129,4 @@ $term3: $onPrimaryContainer;
 $term4: $onPrimaryContainer;
 $term5: $onSecondaryContainer;
 $term6: $primary;
-$term7: $onSurfaceVariant;
+$term7: $onSurfaceVariant;
@@ -103,7 +103,7 @@ tooltip {
 }

 .switch-bg {
-    @include menu_decel;
+    @include element_decel;
    @include full-rounding;
    background-color: mix($surface, $background, 50%);
    border: 0.136rem solid $onSurface;
@@ -264,6 +264,14 @@
    margin-right: 0rem;
 }

+.spacing-h-4 > overlay > *:first-child {
+    margin-right: 0.273rem;
+}
+
+.spacing-h-4 > overlay:last-child > * {
+    margin-right: 0rem;
+}
+
 .spacing-h-5 > * {
    margin-right: 0.341rem;
 }
@@ -420,6 +428,14 @@
    margin-bottom: 1.023rem;
 }

+.width-10 {
+    min-width: 0.682rem;
+}
+
+.height-10 {
+    min-width: 0.682rem;
+}
+
 .invisible {
    opacity: 0;
    background-color: transparent;
@@ -42,7 +42,7 @@ $rounding_large: 1.705rem;

@mixin icon-material {
    // Material Design Icons
-    font-family: "Material Symbols Rounded", "Material Symbols Outlined",
+    font-family: "Material Symbols Rounded", "MaterialSymbolsRounded", "Material Symbols Outlined",
        "Material Symbols Sharp";
 }

@@ -139,12 +139,10 @@ $elevation_margin: 0.476rem;
 }

@mixin fluent_decel {
-    // Used for small transitions, as this looks clear
    transition: 200ms cubic-bezier(0.1, 1, 0, 1);
 }

@mixin fluent_decel_long {
-    // Used for small transitions, as this looks clear
    transition: 1000ms cubic-bezier(0.1, 1, 0, 1);
 }

@@ -1,29 +1,29 @@
 $darkmode: true;
-$primary: #e4b5ff;
-$onPrimary: #471868;
-$primaryContainer: #5f3280;
-$onPrimaryContainer: #f4d9ff;
-$secondary: #d2c1d9;
-$onSecondary: #372c3e;
-$secondaryContainer: #4f4256;
-$onSecondaryContainer: #eedcf5;
-$tertiary: #f4b7ba;
-$onTertiary: #4b2528;
-$tertiaryContainer: #663b3e;
-$onTertiaryContainer: #ffdadc;
+$primary: #ffb1c3;
+$onPrimary: #66002a;
+$primaryContainer: #861c40;
+$onPrimaryContainer: #ffd9e0;
+$secondary: #e4bcc3;
+$onSecondary: #42292e;
+$secondaryContainer: #5c3f45;
+$onSecondaryContainer: #ffd9df;
+$tertiary: #ecbe91;
+$onTertiary: #462a08;
+$tertiaryContainer: #60401d;
+$onTertiaryContainer: #ffdcb9;
 $error: #ffb4a9;
 $onError: #680003;
 $errorContainer: #930006;
 $onErrorContainer: #ffb4a9;
-$colorbarbg: #111012;
-$background: #111012;
-$onBackground: #e7e0e5;
-$surface: #1d1b1e;
-$onSurface: #e7e0e5;
-$surfaceVariant: #4b454d;
-$onSurfaceVariant: #cdc3ce;
-$outline: #968e98;
+$colorbarbg: #130F10;
+$background: #130F10;
+$onBackground: #ecdfe0;
+$surface: #201a1b;
+$onSurface: #ecdfe0;
+$surfaceVariant: #514345;
+$onSurfaceVariant: #d6c1c4;
+$outline: #9f8c8f;
 $shadow: #000000;
-$inverseSurface: #e7e0e5;
-$inverseOnSurface: #322f33;
-$inversePrimary: #784a9a;
+$inverseSurface: #ecdfe0;
+$inverseOnSurface: #362f30;
+$inversePrimary: #a53557;
@@ -41,7 +41,7 @@ $onSecondaryContainer: mix($color7, $color2, 90%);


 .osd-music-cover-fallback {
-    @include menu_decel;
+    @include element_decel;
    @include small-rounding;
    // margin: 1.023rem;
    min-width: 7.5rem;
@@ -73,21 +73,21 @@ $onSecondaryContainer: mix($color7, $color2, 90%);
 }

 .osd-music-title {
-    @include menu_decel;
+    @include element_decel;
    @include titlefont;
    font-size: 1.364rem;
    color: $onSecondaryContainer;
 }

 .osd-music-artists {
-    @include menu_decel;
+    @include element_decel;
    @include mainfont;
    font-size: 0.955rem;
    color: mix($onSecondaryContainer, $secondaryContainer, 80%);
 }

 .osd-music-pill {
-    @include menu_decel;
+    @include element_decel;
    @include full-rounding;
    @include titlefont;
    min-width: 1.833rem;
@@ -97,7 +97,7 @@ $onSecondaryContainer: mix($color7, $color2, 90%);
 }

 .osd-music-controls {
-    @include menu_decel;
+    @include element_decel;
    @include full-rounding;
    @include titlefont;
    min-width: 1.833rem;
@@ -123,7 +123,7 @@ $onSecondaryContainer: mix($color7, $color2, 90%);
 }

 .osd-music-controlbtn-txt {
-    @include menu_decel;
+    @include element_decel;
    transition: 100ms cubic-bezier(0.05, 0.7, 0.1, 1);
    @include icon-material;
    font-size: 1.364rem;
@@ -28,6 +28,18 @@ $notif_surface: $t_background;
    padding-right: $rounding_small + 0.545rem;
 }

+.notif-clicked-low {
+    background-color: mix($l_l_t_surfaceVariant, $t_onSurfaceVariant, 85%);
+}
+
+.notif-clicked-normal {
+    background-color: mix($l_l_t_surfaceVariant, $t_onSurfaceVariant, 85%);
+}
+
+.notif-clicked-critical {
+    background-color: mix($secondaryContainer, $onSecondaryContainer, 95%);
+}
+
 .popup-notif-low {
    @include notif-rounding;
    min-width: 30.682rem;
@@ -55,6 +67,18 @@ $notif_surface: $t_background;
    padding-right: $rounding_small + 0.545rem;
 }

+.popup-notif-clicked-low {
+    background-color: mix($notif_surface, $onBackground, 94%);
+}
+
+.popup-notif-clicked-normal {
+    background-color: mix($notif_surface, $onBackground, 94%);
+}
+
+.popup-notif-clicked-critical {
+    background-color: mix($secondaryContainer, $onSecondaryContainer, 96%);
+}
+
 .notif-body-low {
    color: mix($onSurfaceVariant, $surfaceVariant, 67%);
 }
@@ -138,10 +162,8 @@ $notif_surface: $t_background;

 .osd-notif {
    @include notif-rounding;
-    background-color: transparentize(
-        $background,
-        $transparentize_surface_amount_subtract_surface
-    );
+    background-color: transparentize($background,
+            $transparentize_surface_amount_subtract_surface );
    min-width: 30.682rem;
 }

@@ -217,4 +239,4 @@ $notif_surface: $t_background;

 .notif-action-critical:active {
    background-color: mix($t_onSecondaryContainer, $t_secondaryContainer, 23%);
-}
+}
@@ -3,7 +3,7 @@
 }

 .overview-search-box {
-    @include menu_decel;
+    @include element_decel;
    @include large-rounding;
    @include elevation-border;
    @include elevation2;
@@ -78,7 +78,7 @@ $onChatgpt: $onPrimary;

 .sidebar-iconbutton {
    @include full-rounding;
-    @include menu_decel;
+    @include element_decel;
    color: $onSurface;
    min-width: 2.727rem;
    min-height: 2.727rem;
@@ -94,18 +94,12 @@ $onChatgpt: $onPrimary;
 }

 .sidebar-button {
-    @include menu_decel;
+    @include element_decel;
    padding: 0rem $rounding_small;
    background-color: $t_secondaryContainer;
    color: $onSecondaryContainer;
 }

-.sidebar-button-nopad {
-    @include menu_decel;
-    background-color: $t_secondaryContainer;
-    color: $onSecondaryContainer;
-}
-
 .sidebar-button:hover,
 .sidebar-button:focus {
    background-color: $hovercolor;
@@ -115,33 +109,6 @@ $onChatgpt: $onPrimary;
    background-color: $activecolor;
 }

-.sidebar-button-nopad:hover,
-.sidebar-button-nopad:focus {
-    background-color: $hovercolor;
-}
-
-.sidebar-button-nopad:active {
-    background-color: $activecolor;
-}
-
-.sidebar-button-left {
-    border-top-left-radius: $rounding_small;
-    border-bottom-left-radius: $rounding_small;
-}
-
-.sidebar-button-right {
-    border-top-right-radius: $rounding_small;
-    border-bottom-right-radius: $rounding_mediumsmall;
-}
-
-.sidebar-button-alone {
-    @include small-rounding;
-}
-
-.sidebar-button-alone-normal {
-    @include small-rounding;
-}
-
 .sidebar-button-active {
    background-color: $primary;
    color: $onPrimary;
@@ -236,6 +203,7 @@ $onChatgpt: $onPrimary;

    slider {
        @include full-rounding;
+        @include element_decel;
        min-width: 0.273rem;
        min-height: 2.045rem;
        background-color: $t_onSurfaceVariant;
@@ -253,7 +221,7 @@ $onChatgpt: $onPrimary;

 .sidebar-calendar-btn {
    @include full-rounding;
-    @include menu_decel;
+    @include element_decel;
    min-height: 2.523rem;
    min-width: 2.523rem;
    color: $onSurface;
@@ -297,6 +265,7 @@ $onChatgpt: $onPrimary;

 .sidebar-calendar-monthyear-btn {
    @include full-rounding;
+    @include element_decel;
    padding: 0rem 0.682rem;
    background-color: $t_surfaceVariant;
    color: $onSurfaceVariant;
@@ -315,6 +284,7 @@ $onChatgpt: $onPrimary;

 .sidebar-calendar-monthshift-btn {
    @include full-rounding;
+    @include element_decel;
    min-width: 2.045rem;
    min-height: 2.045rem;
    background-color: $t_surfaceVariant;
@@ -333,7 +303,7 @@ $onChatgpt: $onPrimary;

 .sidebar-selector-tab {
    @include small-rounding;
-    @include menu_decel;
+    @include element_decel;
    min-height: 2.5rem;
    color: $onSurface;
 }
@@ -357,7 +327,7 @@ $onChatgpt: $onPrimary;
 }

 .sidebar-selector-highlight {
-    transition: 180ms ease-in-out; // Doesn't look that good, but it syncs with GtkStack animation of the actual todo widget content
+    transition: 180ms ease-in-out; // Doesn't look that good, but it syncs with the GtkStack
    color: $primary;
    // padding: 0rem 2.045rem;
    min-height: 0.205rem;
@@ -372,6 +342,7 @@ $onChatgpt: $onPrimary;
 }

 .sidebar-todo-item-action {
+    @include element_decel;
    border-radius: 9999px;
    min-width: 1.705rem;
    min-height: 1.705rem;
@@ -401,13 +372,14 @@ $onChatgpt: $onPrimary;

 .sidebar-todo-new {
    @include full-rounding;
+    @include element_decel;
    color: $onSecondaryContainer;
    margin: 0.341rem;
    padding: 0.205rem 0.545rem;
    border: 0.068rem solid $onSurface;
 }

-.sidebar-todo-newz,
+.sidebar-todo-new,
 .sidebar-todo-new:focus {
    background-color: mix($t_secondaryContainer, $t_onSecondaryContainer, 97%);
 }
@@ -417,7 +389,7 @@ $onChatgpt: $onPrimary;
 }

 .sidebar-todo-add {
-    @include menu_decel;
+    @include element_decel;
    @include small-rounding;
    min-width: 1.705rem;
    min-height: 1.705rem;
@@ -435,7 +407,7 @@ $onChatgpt: $onPrimary;
 }

 .sidebar-todo-add-available {
-    @include menu_decel;
+    @include element_decel;
    @include small-rounding;
    min-width: 1.705rem;
    min-height: 1.705rem;
@@ -454,7 +426,7 @@ $onChatgpt: $onPrimary;
 }

 .sidebar-todo-entry {
-    @include menu_decel;
+    @include element_decel;
    @include small-rounding;
    background-color: $surfaceVariant;
    color: $onSurfaceVariant;
@@ -491,7 +463,7 @@ $onChatgpt: $onPrimary;
 }

 .sidebar-chat-apiswitcher-icon {
-    @include menu_decel;
+    @include element_decel;
    @include full-rounding;
    min-width: 2.182rem;
    min-height: 2.182rem;
@@ -504,7 +476,7 @@ $onChatgpt: $onPrimary;
 }

 .sidebar-chat-viewport {
-    @include menu_decel;
+    @include element_decel;
    // margin: 0.682rem 0rem;
    padding: 0.682rem 0rem;
 }
@@ -523,8 +495,16 @@ $onChatgpt: $onPrimary;
    min-width: 0rem;
 }

+.sidebar-chat-wrapper {
+    transition: 400ms cubic-bezier(0.1, 1, 0, 1);
+}
+
+.sidebar-chat-wrapper-extended {
+    min-height: 7.500rem;
+}
+
 .sidebar-chat-send {
-    @include menu_decel;
+    @include element_decel;
    min-width: 1.705rem;
    min-height: 1.705rem;
    border-radius: $rounding_medium - 0.681rem;
@@ -558,7 +538,7 @@ $onChatgpt: $onPrimary;
 }

 .sidebar-chat-indicator {
-    @include menu_decel;
+    @include element_decel;
    @include full-rounding;
    min-width: 0.136rem;
    background-color: $onBackground;
@@ -622,6 +602,7 @@ $onChatgpt: $onPrimary;

 .sidebar-chat-codeblock-topbar-btn {
    @include full-rounding;
+    @include element_decel;
    padding: 0.273rem 0.477rem;
 }

@@ -660,7 +641,7 @@ $onChatgpt: $onPrimary;

 .sidebar-chat-welcome-logo {
    @include full-rounding;
-    @include menu_decel;
+    @include element_decel;
    min-height: 4.773rem;
    min-width: 4.773rem;
    @include icon-material;
@@ -670,12 +651,13 @@ $onChatgpt: $onPrimary;
 }

 .sidebar-chat-chip {
-    @include menu_decel;
+    @include element_decel;
    @include small-rounding;
    padding: 0.341rem 0.477rem;
 }

 .sidebar-chat-chip-action {
+    @include element_decel;
    background-color: $textboxColor;
    color: $onSurfaceVariant;
 }
@@ -695,7 +677,7 @@ $onChatgpt: $onPrimary;
 }

 .sidebar-chat-chip-toggle {
-    @include menu_decel;
+    @include element_decel;
    @include small-rounding;
    padding: 0.341rem 0.477rem;
    background-color: $textboxColor;
@@ -713,7 +695,7 @@ $onChatgpt: $onPrimary;

 .sidebar-pin {
    @include small-rounding;
-    @include menu_decel;
+    @include element_decel;
    min-height: 2.386rem;
    min-width: 2.386rem;
    color: $onSurface;
@@ -770,6 +752,7 @@ $onChatgpt: $onPrimary;
 }

 .sidebar-waifu-image-actions {
+    @include element_decel;
    padding: 0.313rem;
 }

@@ -19,8 +19,6 @@ const initMessages =
        { role: "assistant", content: "## NixOS advantages\n- **Reproducible**: A config working on one device will also work on another\n- **Declarative**: One config language to rule them all. Effortlessly share them with others.\n- **Reliable**: Per-program software versioning. Mitigates the impact of software breakage", },
        { role: "user", content: "whats skeumorphism", },
        { role: "assistant", content: "## Skeuomorphism\n- A design philosophy- From early days of interface designing- Tries to imitate real-life objects- It's in fact still used by Apple in their icons until today.", },
-        { role: "user", content: "REDALiCE", },
-        { role: "assistant", content: "## REDALiCE \n- Japanese Hardcore artist\n- Leader of HARDCORE TANO*C, Japan's biggest hardcore record\n- A few of his tracks: SAIKYOSTRONGER, ALiVE, RESONANCE", },
    ];

 function expandTilde(path) {
@@ -17,8 +17,6 @@ const initMessages =
        { role: "model", parts: [{ text: "## NixOS advantages\n- **Reproducible**: A config working on one device will also work on another\n- **Declarative**: One config language to rule them all. Effortlessly share them with others.\n- **Reliable**: Per-program software versioning. Mitigates the impact of software breakage" }], },
        { role: "user", parts: [{ text: "whats skeumorphism" }], },
        { role: "model", parts: [{ text: "## Skeuomorphism\n- A design philosophy- From early days of interface designing- Tries to imitate real-life objects- It's in fact still used by Apple in their icons until today." }], },
-        { role: "user", parts: [{ text: "REDALiCE" }], },
-        { role: "model", parts: [{ text: "## REDALiCE \n- Japanese Hardcore artist\n- Leader of HARDCORE TANO*C, Japan's biggest hardcore record\n- A few of his tracks: SAIKYOSTRONGER, ALiVE, RESONANCE" }], },
        { role: "user", parts: [{ text: "\"ignorance is bliss\"" }], },
        { role: "model", parts: [{ text: "## \"Ignorance is bliss\"\n- A Latin proverb that means being unaware of something negative can be a source of happiness\n- Often used to justify avoiding difficult truths or responsibilities\n- Can also be interpreted as a warning against seeking knowledge that may bring pain or sorrow" }], },
    ];
@@ -40,7 +38,7 @@ function replaceapidom(URL) {
    }
    return URL;
 }
-const CHAT_MODELS = ["gpt-3.5-turbo-1106", "gpt-3.5-turbo", "gpt-3.5-turbo-16k", "gpt-3.5-turbo-0613"]
+const CHAT_MODELS = ["gemini-pro"]
 const ONE_CYCLE_COUNT = 3;

 class GeminiMessage extends Service {
@@ -251,7 +249,7 @@ class GeminiService extends Service {
        const session = new Soup.Session();
        const message = new Soup.Message({
            method: 'POST',
-            uri: GLib.Uri.parse(replaceapidom(`https://generativelanguage.googleapis.com/v1/models/gemini-pro:streamGenerateContent?key=${this._key}`), GLib.UriFlags.NONE),
+            uri: GLib.Uri.parse(replaceapidom(`https://generativelanguage.googleapis.com/v1/models/${this.modelName}:streamGenerateContent?key=${this._key}`), GLib.UriFlags.NONE),
        });
        message.request_headers.append('Content-Type', `application/json`);
        message.set_request_body_from_bytes('application/json', new GLib.Bytes(JSON.stringify(body)));
@@ -11,15 +11,16 @@ export function fileExists(filePath) {
 const FIRST_RUN_FILE = "firstrun.txt";
 const FIRST_RUN_PATH = GLib.build_filenamev([GLib.get_user_cache_dir(), "ags", "user", FIRST_RUN_FILE]);
 const FIRST_RUN_FILE_CONTENT = "Just a file to confirm that you have been greeted ;)";
-const APP_NAME = "ags";
+const APP_NAME = "illogical-impulse";
 const FIRST_RUN_NOTIF_TITLE = "Welcome!";
-const FIRST_RUN_NOTIF_BODY = `Looks like this is your first run.\nHit <span foreground="#c06af1" font_weight="bold">Super + /</span> for a list of keybinds.`;
+const FIRST_RUN_NOTIF_BODY = `Looks like this is your first run. For a list of keybinds, hit <span foreground="#c06af1" font_weight="bold">Super + /</span>.`;
 
 export async function firstRunWelcome() {
    if (!fileExists(FIRST_RUN_PATH)) {
        Utils.writeFile(FIRST_RUN_FILE_CONTENT, FIRST_RUN_PATH)
            .then(() => {
                // Note that we add a little delay to make sure the cool circular progress works
+                Utils.execAsync(['hyprctl', 'keyword', 'bind', "Super,Slash,exec,ags -t cheatsheet"]);
                Utils.execAsync(['bash', '-c',
                    `sleep 0.5; notify-send "Millis since epoch" "$(date +%s%N | cut -b1-13)"; sleep 0.5; notify-send '${FIRST_RUN_NOTIF_TITLE}' '${FIRST_RUN_NOTIF_BODY}' -a '${APP_NAME}' &`
                ]).catch(print)
@@ -83,12 +83,14 @@ class WaifuService extends Service {

    async fetch(msg) {
        // Init
-        const userArgs = msg.split(' ');
+        const userArgs = msg.split(/\s+/);
+
        let taglist = [];
        this._nsfw = false;
        // Construct body/headers
        for (let i = 0; i < userArgs.length; i++) {
-            const thisArg = userArgs[i];
+            const thisArg = userArgs[i].trim();
+            if(thisArg.length == 0) continue;
            if (thisArg == '--im') this._mode = 'im';
            else if (thisArg == '--nekos') this._mode = 'nekos';
            else if (thisArg.includes('pics')) this._mode = 'pics';
@@ -1,12 +1,14 @@
 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 '';
+    if (!title) return '';
    const cleanRegexes = [
        /【[^】]*】/,         // Touhou n weeb stuff
        /\[FREE DOWNLOAD\]/, // F-777
@@ -15,6 +17,54 @@ function trimTrackTitle(title) {
    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('');
@@ -84,22 +134,48 @@ export default () => {
            }),
        })
    })
+    const musicStuff = Box({
+        className: 'spacing-h-10',
+        hexpand: true,
+        children: [
+            playingState,
+            trackTitle,
+        ]
+    })
+    const systemResources = BarGroup({
+        child: Box({
+            children: [
+                BarResource('RAM Usage', 'memory', `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', `free | awk '/^Swap/ {if ($2 > 0) printf("%.2f\\n", ($3/$2) * 100); else print "0";}'`),
+                            BarResource('CPU Usage', 'settings_motion_mode', `top -bn1 | grep Cpu | 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: Widget.Box({
-            className: 'bar-group-margin bar-sides',
+        child: Box({
+            className: 'spacing-h-5',
            children: [
-                Widget.Box({
-                    className: 'bar-group bar-group-standalone bar-group-pad-music spacing-h-10',
-                    children: [
-                        playingState,
-                        trackTitle,
-                    ]
-                })
+                BarGroup({ child: musicStuff }),
+                systemResources,
            ]
        })
    });
@@ -1,5 +1,4 @@
-// This is for the right pill of the bar. 
-// For the cool memory indicator on the sidebar, see sysinfo.js
+// 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;
@@ -8,8 +7,11 @@ 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}`);

 const BatBatteryProgress = () => {
    const _updateProgress = (circprog) => { // Set circular progress value
@@ -90,7 +92,7 @@ const BarBattery = () => Box({
            transitionDuration: 150,
            revealChild: false,
            transition: 'slide_right',
-            child: MaterialIcon('bolt', 'norm', {tooltipText: "Charging"}),
+            child: MaterialIcon('bolt', 'norm', { tooltipText: "Charging" }),
            setup: (self) => self.hook(Battery, revealer => {
                self.revealChild = Battery.charging;
            }),
@@ -121,42 +123,6 @@ const BarBattery = () => Box({
    ]
 });

-const BarResource = (name, icon, command) => {
-    const resourceLabel = Label({
-        className: 'txt-smallie txt-onSurfaceVariant',
-    });
-    const resourceCircProg = AnimatedCircProg({
-        className: 'bar-batt-circprog',
-        vpack: 'center', hpack: 'center',
-    });
-    const widget = Box({
-        className: 'spacing-h-4 txt-onSurfaceVariant',
-        children: [
-            resourceLabel,
-            Overlay({
-                child: Widget.Box({
-                    vpack: 'center',
-                    className: 'bar-batt',
-                    homogeneous: true,
-                    children: [
-                        MaterialIcon(icon, 'small'),
-                    ],
-                }),
-                overlays: [resourceCircProg]
-            }),
-        ],
-        setup: (self) => self
-            .poll(5000, () => execAsync(['bash', '-c', command])
-                .then((output) => {
-                    resourceCircProg.css = `font-size: ${Number(output)}px;`;
-                    resourceLabel.label = `${Math.round(Number(output))}%`;
-                    widget.tooltipText = `${name}: ${Math.round(Number(output))}%`;
-                }).catch(print))
-        ,
-    });
-    return widget;
-}
-
 const BarGroup = ({ child }) => Widget.Box({
    className: 'bar-group-margin bar-sides',
    children: [
@@ -166,6 +132,72 @@ const BarGroup = ({ child }) => Widget.Box({
        }),
    ]
 });
+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';
+                    Utils.execAsync('curl ipinfo.io')
+                        .then(output => {
+                            return JSON.parse(output)['city'].toLowerCase();
+                        })
+                        .then((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);
+                                }
+                            }));
+                }),
+            })
+        }),
+    },
+    setup: (stack) => Utils.timeout(10, () => {
+        if (!Battery.available) stack.shown = 'desktop';
+        else stack.shown = 'laptop';
+    })
+})

 const switchToRelativeWorkspace = async (self, num) => {
    try {
@@ -184,28 +216,7 @@ export default () => Widget.EventBox({
        className: 'spacing-h-5',
        children: [
            BarGroup({ child: BarClock() }),
-            Stack({
-                transition: 'slide_up_down',
-                transitionDuration: 150,
-                items: [
-                    ['laptop', Box({
-                        className: 'spacing-h-5', children: [
-                            BarGroup({ child: Utilities() }),
-                            BarGroup({ child: BarBattery() }),
-                        ]
-                    })],
-                    ['desktop', Box({
-                        className: 'spacing-h-5', children: [
-                            BarGroup({ child: BarResource('RAM usage', 'memory', `free | awk '/^Mem/ {printf("%.2f\\n", ($3/$2) * 100)}'`), }),
-                            BarGroup({ child: BarResource('Swap usage', 'swap_horiz', `free | awk '/^Swap/ {printf("%.2f\\n", ($3/$2) * 100)}'`), }),
-                        ]
-                    })],
-                ],
-                setup: (stack) => Utils.timeout(10, () => {
-                    if (!Battery.available) stack.shown = 'desktop';
-                    else stack.shown = 'laptop';
-                })
-            })
+            BatteryModule(),
        ]
    })
 });
@@ -4,11 +4,12 @@ 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 = 10;
+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
@@ -16,38 +17,40 @@ const dummyOccupiedWs = Box({ className: 'bar-ws bar-ws-occupied' }); // Not sho
 // Font size = workspace id
 const WorkspaceContents = (count = 10) => {
    return DrawingArea({
-        css: `transition: 90ms cubic-bezier(0.1, 1, 0, 1);`,
+        // 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 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 <= 0) continue; // Ignore scratchpads
-                    if (ws.id > count) return; // Not rendered
-                    if (workspaces[i].windows > 0) {
-                        workspaceMask |= (1 << ws.id);
-                    }
+                    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.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, (area) =>
-                area.setCss(`font-size: ${Hyprland.active.workspace.id}px;`)
-            )
+            .hook(Hyprland.active.workspace, (self) => {
+                self.setCss(`font-size: ${(Hyprland.active.workspace.id - 1) % count + 1}px;`);
+            })
            .hook(Hyprland, (self) => self.attribute.updateMask(self), 'notify::workspaces')
-            .hook(Hyprland, (self, name) => self.attribute.toggleMask(self, true, name), 'workspace-added')
-            .hook(Hyprland, (self, name) => self.attribute.toggleMask(self, false, name), 'workspace-removed')
            .on('draw', Lang.bind(area, (area, cr) => {
+                const offset = Math.floor((Hyprland.active.workspace.id - 1) / count) * NUM_OF_WORKSPACES_SHOWN;
+
                const allocation = area.get_allocation();
                const { width, height } = allocation;

@@ -113,12 +116,12 @@ const WorkspaceContents = (count = 10) => {
                    }
                    else
                        cr.setSourceRGBA(wsfg.red, wsfg.green, wsfg.blue, wsfg.alpha);
-                    layout.set_text(`${i}`, -1);
+
+                    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);
-                    // cr.showText(text);
                    PangoCairo.show_layout(cr, layout);
                    cr.stroke();
                }
@@ -142,16 +145,17 @@ export default () => EventBox({
    onScrollDown: () => Hyprland.sendMessage(`dispatch workspace +1`),
    onMiddleClickRelease: () => App.toggleWindow('overview'),
    onSecondaryClickRelease: () => App.toggleWindow('osk'),
-    attribute: { clicked: false },
+    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(10),
-            ]
+            children: [WorkspaceContents(NUM_OF_WORKSPACES_SHOWN)],
        })]
    }),
    setup: (self) => {
@@ -160,16 +164,18 @@ export default () => EventBox({
            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);
-            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-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);
-            Hyprland.sendMessage(`dispatch workspace ${wsId}`);
+            // 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);
    }
@@ -71,7 +71,7 @@ const clickOutsideToClose = Widget.EventBox({
 export default () => Widget.Window({
    name: 'cheatsheet',
    exclusivity: 'ignore',
-    focusable: true,
+    keymode: 'exclusive',
    popup: true,
    visible: false,
    child: Widget.Box({
@@ -63,9 +63,9 @@ const resources = Box({
                        label.label = `${output}`
                    }).catch(print);
            }, { hpack: 'end' }),
-        ResourceValue('Swap', 'swap_horiz', 10000, `free | awk '/^Swap/ {printf("%.2f\\n", ($3/$2) * 100)}'`,
+        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/ {print $3 " / " $2}' | sed 's/Gi/Gib/g'`])
+                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);
@@ -99,10 +99,10 @@ export default (monitor = 0) => {
    const stack = Stack({
        transition: 'crossfade',
        transitionDuration: 180,
-        items: [
-            ['image', wallpaperImage],
-            ['prompt', wallpaperPrompt],
-        ],
+        children: {
+            'image': wallpaperImage,
+            'prompt': wallpaperPrompt,
+        },
        setup: (self) => self
            .hook(Wallpaper, (self) => {
                const wallPath = Wallpaper.get(monitor);
@@ -365,6 +365,7 @@ export default () => MarginRevealer({
                for (let i = 0; i < children.length; i++) {
                    const child = children[i];
                    child.destroy();
+                    child = null;
                }
                return;
            }
@@ -10,12 +10,14 @@ export default () => Box({
    attribute: {
        'map': new Map(),
        'dismiss': (box, id, force = false) => {
-            if (!id || !box.attribute.map.has(id) || box.attribute.map.get(id).attribute.hovered && !force)
+            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

-            const notif = box.attribute.map.get(id);
-            notif.revealChild = false;
-            notif.attribute.destroyWithAnims();
+            notifWidget.revealChild = false;
+            notifWidget.attribute.destroyWithAnims();
            box.attribute.map.delete(id);
        },
        'notify': (box, id) => {
@@ -32,8 +34,6 @@ export default () => Box({
            box.attribute.map.set(id, newNotif);
            box.pack_end(box.attribute.map.get(id), false, false, 0);
            box.show_all();
-
-            // box.children = Array.from(box.attribute.map.values()).reverse();
        },
    },
    setup: (self) => self
@@ -4,7 +4,7 @@ import { SearchAndWindows } from "./windowcontent.js";
 export default () => Widget.Window({
    name: 'overview',
    exclusivity: 'ignore',
-    focusable: true,
+    keymode: 'exclusive',
    popup: true,
    visible: false,
    anchor: ['top'],
@@ -53,7 +53,7 @@ export function launchCustomCommand(command) {
        execAsync([`bash`, `-c`, `systemctl suspend`]).catch(print);
    }
    else if (args[0] == '>logout') { // Log out
-        execAsync([`bash`, `-c`, `loginctl terminate-user $USER`]).catch(print);
+        execAsync([`bash`, `-c`, `pkill Hyprland || pkill sway`]).catch(print);
    }
 }

@@ -1,3 +1,7 @@
+// 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;
 import { SCREEN_HEIGHT, SCREEN_WIDTH } from '../../imports.js';
 import App from 'resource:///com/github/Aylur/ags/app.js';
@@ -10,42 +14,16 @@ const { execAsync, exec } = Utils;
 import { setupCursorHoverGrab } from "../../lib/cursorhover.js";
 import { dumpToWorkspace, swapWorkspace } from "./actions.js";

-const OVERVIEW_SCALE = 0.18; // = overview workspace box / screen size
+const OVERVIEW_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 truncateTitle(str) {
-    let lastDash = -1;
-    let found = -1; // 0: em dash, 1: en dash, 2: minus, 3: vertical bar, 4: middle dot
-    for (let i = str.length - 1; i >= 0; i--) {
-        if (str[i] === '—') {
-            found = 0;
-            lastDash = i;
-        }
-        else if (str[i] === '–' && found < 1) {
-            found = 1;
-            lastDash = i;
-        }
-        else if (str[i] === '-' && found < 2) {
-            found = 2;
-            lastDash = i;
-        }
-        else if (str[i] === '|' && found < 3) {
-            found = 3;
-            lastDash = i;
-        }
-        else if (str[i] === '·' && found < 4) {
-            found = 4;
-            lastDash = i;
-        }
-    }
-    if (lastDash === -1) return str;
-    return str.substring(0, lastDash);
-}
-
 function iconExists(iconName) {
    let iconTheme = Gtk.IconTheme.get_default();
    return iconTheme.has_icon(iconName);
@@ -76,7 +54,11 @@ const ContextMenuWorkspaceArray = ({ label, actionFunc, thisWorkspace }) => Widg
    setup: (menuItem) => {
        let submenu = new Gtk.Menu();
        submenu.className = 'menu';
-        for (let i = 1; i <= 10; i++) {
+
+        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}`
            });
@@ -91,11 +73,22 @@ const ContextMenuWorkspaceArray = ({ label, actionFunc, thisWorkspace }) => Widg
    }
 })

-const client = ({ address, size: [w, h], workspace: { id, name }, class: c, title, xwayland }) => {
+const Window = ({ address, at: [x, y], size: [w, h], workspace: { id, name }, class: c, title, xwayland }) => {
    const revealInfoCondition = (Math.min(w, h) * OVERVIEW_SCALE > 70);
-    if (w <= 0 || h <= 0) return null;
+    if (w <= 0 || h <= 0 || (c === '' && title === '')) return null;
+    if (x + w <= 0) x += (Math.floor(x / SCREEN_WIDTH) * SCREEN_WIDTH);
+    else if (x < 0) { x = 0; w = x + w; }
+    if (y + h <= 0) x += (Math.floor(y / SCREEN_HEIGHT) * SCREEN_HEIGHT);
+    else if (y < 0) { y = 0; h = y + h; }
+
+    if (x >= SCREEN_WIDTH) x %= SCREEN_WIDTH;
+    else if (x + w > SCREEN_WIDTH) w = SCREEN_WIDTH - x;
+    if (y >= SCREEN_HEIGHT) y %= SCREEN_HEIGHT;
+    else if (y + h > SCREEN_HEIGHT) h = SCREEN_HEIGHT - y;
+
    // title = truncateTitle(title);
    return Widget.Button({
+        attribute: { x, y },
        className: 'overview-tasks-window',
        hpack: 'center',
        vpack: 'center',
@@ -188,8 +181,9 @@ const client = ({ address, size: [w, h], workspace: { id, name }, class: c, titl
    });
 }

-const workspace = index => {
+const Workspace = (index) => {
    const fixed = Gtk.Fixed.new();
+    // const clientMap = new Map();
    const WorkspaceNumber = (index) => Widget.Label({
        className: 'overview-tasks-workspace-number',
        label: `${index}`,
@@ -202,8 +196,8 @@ const workspace = index => {
        className: 'overview-tasks-workspace',
        vpack: 'center',
        css: `
-        min-width: ${SCREEN_WIDTH * OVERVIEW_SCALE}px;
-        min-height: ${SCREEN_HEIGHT * OVERVIEW_SCALE}px;
+            min-width: ${SCREEN_WIDTH * OVERVIEW_SCALE}px;
+            min-height: ${SCREEN_HEIGHT * OVERVIEW_SCALE}px;
        `,
        children: [Widget.EventBox({
            hexpand: true,
@@ -222,36 +216,30 @@ const workspace = index => {
            child: fixed,
        })],
    });
-    widget.update = (clients) => {
-        clients = clients.filter(({ workspace: { id } }) => id === index);
-
-        // this is for my monitor layout
-        // shifts clients back by SCREEN_WIDTHpx if necessary
-        clients = clients.map(client => {
-            const [x, y] = client.at;
-            if (x > SCREEN_WIDTH)
-                client.at = [x - SCREEN_WIDTH, y];
-            return client;
-        });
-
-        const children = fixed.get_children();
-        for (let i = 0; i < children.length; i++) {
-            const child = children[i];
-            child.destroy();
-        }
-        fixed.put(WorkspaceNumber(index), 0, 0);
-
-        for (let i = 0; i < clients.length; i++) {
-            const c = clients[i];
-            if (c.mapped) {
-                fixed.put(client(c), c.at[0] * OVERVIEW_SCALE, c.at[1] * OVERVIEW_SCALE);
-            }
-        }
-
-
-
-        fixed.show_all();
+    widget.clear = () => {
+        fixed.get_children().forEach(ch => ch.destroy());
+        const offset = Math.floor((Hyprland.active.workspace.id - 1) / NUM_OF_WORKSPACES_SHOWN) * NUM_OF_WORKSPACES_SHOWN;
+        fixed.put(WorkspaceNumber(offset + index), 0, 0);
+    }
+    widget.set = (clientJson) => {
+        // if(clientMap.get(clientJson.address)) clientMap.get(clientJson.address).destroy();
+        const newWindow = Window(clientJson);
+        if (newWindow === null) return;
+        // clientMap.set(clientJson.address, newWindow);
+        fixed.put(newWindow,
+            Math.max(0, newWindow.attribute.x * OVERVIEW_SCALE),
+            Math.max(0, newWindow.attribute.y * OVERVIEW_SCALE)
+        );
    };
+    // widget.unset = (clientAddress) => {
+    //     if(clientMap.get(clientAddress)) {
+    //         clientMap.get(clientAddress).destroy();
+    //         clientMap.delete(clientAddress);
+    //     }
+    // };
+    widget.show = () => {
+        fixed.show_all();
+    }
    return widget;
 };

@@ -264,30 +252,37 @@ const arr = (s, n) => {
 };

 const OverviewRow = ({ startWorkspace, workspaces, windowName = 'overview' }) => Widget.Box({
-    children: arr(startWorkspace, workspaces).map(workspace),
+    children: arr(startWorkspace, workspaces).map(Workspace),
    attribute: {
-        'update': box => {
+        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;
            execAsync('hyprctl -j clients').then(clients => {
-                const json = JSON.parse(clients);
-                const children = box.get_children();
-                for (let i = 0; i < children.length; i++) {
-                    const ch = children[i];
-                    ch.update(json)
+                const allClients = JSON.parse(clients);
+                const kids = box.get_children();
+                kids.forEach(kid => kid.clear());
+                for (let i = 0; i < allClients.length; i++) {
+                    const client = allClients[i];
+                    if (offset + startWorkspace <= client.workspace.id &&
+                        client.workspace.id <= offset + startWorkspace + workspaces) {
+                        kids[client.workspace.id - (offset + startWorkspace)]
+                            ?.set(client);
+                    }
                }
+                kids.forEach(kid => kid.show());

            }).catch(print);
        }
    },
    setup: (box) => box
        .hook(overviewTick, (box) => box.attribute.update(box))
-        // .hook(Hyprland, (box, name, data) => { // idk, does this make it lag occasionally?
-        //     console.log(name)
-        //     if (["changefloatingmode", "movewindow"].includes(name))
-        //         box.attribute.update(box);
-        // }, 'event')
-        .hook(Hyprland, (box) => box.attribute.update(box), 'client-added')
-        .hook(Hyprland, (box) => box.attribute.update(box), 'client-removed')
+        .hook(Hyprland, (box, clientAddress) => {
+            box.attribute.update(box)
+        }, 'client-removed')
+        .hook(Hyprland, (box, clientAddress) => {
+            box.attribute.update(box);
+        }, 'client-added')
+        .hook(Hyprland.active.workspace, (box) => box.attribute.update(box))
        .hook(App, (box, name, visible) => { // Update on open
            if (name == 'overview' && visible) box.attribute.update(box);
        })
@@ -295,19 +290,18 @@ const OverviewRow = ({ startWorkspace, workspaces, windowName = 'overview' }) =>
 });


-export default () => {
-    const overviewRevealer = Widget.Revealer({
-        revealChild: true,
-        transition: 'slide_down',
-        transitionDuration: 200,
-        child: Widget.Box({
-            vertical: true,
-            className: 'overview-tasks',
-            children: [
-                OverviewRow({ startWorkspace: 1, workspaces: 5 }),
-                OverviewRow({ startWorkspace: 6, workspaces: 5 }),
-            ]
-        }),
-    });
-    return overviewRevealer;
-}; 
+export default () => 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,
+            })
+        )
+    }),
+});
@@ -149,6 +149,7 @@ export const ExecuteCommandButton = ({ command, terminal = false }) => searchIte
    actionName: `Execute ${terminal ? 'in terminal' : ''}`,
    content: `${command}`,
    onActivate: () => execAndClose(command, terminal),
+    extraClassName: 'techfont',
 })

 export const CustomCommandButton = ({ text = '' }) => searchItem({
@@ -1,6 +1,6 @@
 import Widget from 'resource:///com/github/Aylur/ags/widget.js';

-export const searchItem = ({ materialIconName, name, actionName, content, onActivate }) => {
+export const searchItem = ({ materialIconName, name, actionName, content, onActivate, extraClassName = '', ...rest }) => {
    const actionText = Widget.Revealer({
        revealChild: false,
        transition: "crossfade",
@@ -17,7 +17,7 @@ export const searchItem = ({ materialIconName, name, actionName, content, onActi
        child: actionText,
    })
    return Widget.Button({
-        className: 'overview-search-result-btn',
+        className: `overview-search-result-btn txt ${extraClassName}`,
        onClicked: onActivate,
        child: Widget.Box({
            children: [
@@ -33,13 +33,13 @@ export const searchItem = ({ materialIconName, name, actionName, content, onActi
                            children: [
                                Widget.Label({
                                    hpack: 'start',
-                                    className: 'overview-search-results-txt txt txt-smallie txt-subtext',
+                                    className: 'overview-search-results-txt txt-smallie txt-subtext',
                                    label: `${name}`,
                                    truncate: "end",
                                }),
                                Widget.Label({
                                    hpack: 'start',
-                                    className: 'overview-search-results-txt txt txt-norm',
+                                    className: 'overview-search-results-txt txt-norm',
                                    label: `${content}`,
                                    truncate: "end",
                                }),
@@ -106,7 +106,7 @@ export const SearchAndWindows = () => {

            if (couldBeMath(text)) { // Eval on typing is dangerous, this is a workaround
                try {
-                    const fullResult = eval(text);
+                    const fullResult = eval(text.replace(/\^/g, "**"));
                    // copy
                    execAsync(['wl-copy', `${fullResult}`]).catch(print);
                    App.closeWindow('overview');
@@ -168,7 +168,7 @@ export const SearchAndWindows = () => {
            // Calculate
            if (couldBeMath(text)) { // Eval on typing is dangerous; this is a small workaround.
                try {
-                    const fullResult = eval(text);
+                    const fullResult = eval(text.replace(/\^/g, "**"));
                    resultsBox.add(CalculationResultButton({ result: fullResult, text: text }));
                } catch (e) {
                    // console.log(e);
@@ -5,7 +5,7 @@ export default () => Widget.Window({ // On-screen keyboard
    name: 'session',
    popup: true,
    visible: false,
-    focusable: true,
+    keymode: 'exclusive',
    layer: 'overlay',
    exclusivity: 'ignore',
    // anchor: ['top', 'bottom', 'left', 'right'],
@@ -63,7 +63,7 @@ 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', 'loginctl terminate-user $USER']) });
+    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') });
@@ -1,4 +1,5 @@
 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';
@@ -6,12 +7,12 @@ const { Box, Button, Label, Scrollable } = Widget;
 const { execAsync, exec } = Utils;
 import { MaterialIcon } from "../../../lib/materialicon.js";
 import md2pango from "../../../lib/md2pango.js";
-import GtkSource from "gi://GtkSource?version=3.0";
+

 const CUSTOM_SOURCEVIEW_SCHEME_PATH = `${App.configDir}/data/sourceviewtheme.xml`;
 const CUSTOM_SCHEME_ID = 'custom';
 const USERNAME = GLib.get_user_name();
-const CHATGPT_CURSOR = '  (o) ';
+const CHATGPT_CURSOR = '  ...';

 /////////////////////// Custom source view colorscheme /////////////////////////

@@ -122,7 +122,7 @@ export const ChatGPTSettings = () => MarginRevealer({
                        },
                    }),
                    ConfigToggle({
-                        icon: 'description',
+                        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,
@@ -110,7 +110,7 @@ export const GeminiSettings = () => MarginRevealer({
                className: 'sidebar-chat-settings-toggles',
                children: [
                    ConfigToggle({
-                        icon: 'description',
+                        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,
@@ -72,12 +72,12 @@ const WaifuImage = (taglist) => {
        homogeneous: false,
        transition: 'slide_up_down',
        transitionDuration: 150,
-        items: [
-            ['api', ImageState('api', 'Calling API')],
-            ['download', ImageState('downloading', 'Downloading image')],
-            ['done', ImageState('done', 'Finished!')],
-            ['error', ImageState('error', 'Error')],
-        ]
+        children: {
+            'api': ImageState('api', 'Calling API'),
+            'download': ImageState('downloading', 'Downloading image'),
+            'done': ImageState('done', 'Finished!'),
+            'error': ImageState('error', 'Error'),
+        },
    });
    const downloadIndicator = MarginRevealer({
        vpack: 'center',
@@ -1,16 +1,22 @@
+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, Revealer, Scrollable, Stack } = Widget;
+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';
+const TextView =  Widget.subclass(Gtk.TextView, "AgsTextView");

+
+const EXPAND_INPUT_THRESHOLD = 30;
 const APIS = [
    {
        name: 'Assistant (ChatGPT 3.5)',
@@ -40,9 +46,25 @@ const APIS = [
 let currentApiId = 0;
 APIS[currentApiId].tabIcon.toggleClassName('sidebar-chat-apiswitcher-icon-enabled', true);

-export const chatEntry = Entry({
-    className: 'sidebar-chat-entry',
+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;
@@ -52,31 +74,84 @@ export const chatEntry = Entry({
            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();
+            }
+        })
    ,
-    onChange: (entry) => {
-        chatSendButton.toggleClassName('sidebar-chat-send-available', entry.text.length > 0);
-    },
-    onAccept: (entry) => {
-        APIS[currentApiId].sendCommand(entry.text)
-        entry.text = '';
-    },
+});
+
+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: 'center',
+    vpack: 'end',
    label: 'arrow_upward',
    setup: setupCursorHover,
    onClicked: (self) => {
-        APIS[currentApiId].sendCommand(chatEntry.text);
-        chatEntry.text = '';
+        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,
+});
+
 const textboxArea = Box({ // Entry area
-    className: 'sidebar-chat-textarea spacing-h-10',
+    className: 'sidebar-chat-textarea',
    children: [
-        chatEntry,
+        Overlay({
+            passThrough: true,
+            child: chatEntryWrapper,
+            overlays: [chatPlaceholderRevealer],
+        }),
+        Box({ className: 'width-10' }),
        chatSendButton,
    ]
 });
@@ -97,8 +172,8 @@ function switchToTab(id) {
    APIS[id].tabIcon.toggleClassName('sidebar-chat-apiswitcher-icon-enabled', true);
    apiContentStack.shown = APIS[id].name;
    apiCommandStack.shown = APIS[id].name;
-    chatEntry.placeholderText = APIS[id].placeholderText,
-        currentApiId = id;
+    chatPlaceholder.label = APIS[id].placeholderText;
+    currentApiId = id;
 }

 const apiSwitcher = CenterBox({
@@ -2,7 +2,7 @@ import PopupWindow from '../../lib/popupwindow.js';
 import SidebarLeft from "./sideleft.js";

 export default () => PopupWindow({
-    focusable: true,
+    keymode: 'exclusive',
    anchor: ['left', 'top', 'bottom'],
    name: 'sideleft',
    layer: 'top',
@@ -27,7 +27,7 @@ const contents = [
 ]
 let currentTabId = 0;

-const contentStack = Stack({
+export const contentStack = Stack({
    vexpand: true,
    transition: 'slide_left_right',
    items: contents.map(item => [item.name, item.content]),
@@ -117,15 +117,14 @@ const pinButton = Button({
    vpack: 'start',
    className: 'sidebar-pin',
    child: MaterialIcon('push_pin', 'larger'),
-    tooltipText: 'Pin sidebar',
+    tooltipText: 'Pin sidebar (Ctrl+P)',
    onClicked: (self) => self.attribute.toggle(self),
-    // QoL: Focus Pin button on open. Hit keybind -> space/enter = toggle pin state
-    setup: (self) => self
-        .hook(App, (self, currentName, visible) => {
-            if (currentName === 'sideleft' && visible)
-                self.grab_focus();
+    setup: (self) => {
+        setupCursorHover(self);
+        self.hook(App, (self, currentName, visible) => {
+            if (currentName === 'sideleft' && visible) self.grab_focus();
        })
-    ,
+    },
 })

 export default () => Box({
@@ -163,7 +162,7 @@ export default () => Box({
    ],
    setup: (self) => self
        .on('key-press-event', (widget, event) => { // Handle keybinds
-            if (event.get_state()[1] & Gdk.ModifierType.CONTROL_MASK) {
+            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);
@@ -176,7 +175,7 @@ export default () => Box({
                    switchToTab(Math.min(currentTabId + 1, contents.length - 1));
            }
            if (contentStack.shown == 'apis') { // If api tab is focused
-                // Automatically focus entry when typing
+                // Focus entry when typing
                if ((
                    !(event.get_state()[1] & Gdk.ModifierType.CONTROL_MASK) &&
                    event.get_keyval()[1] >= 32 && event.get_keyval()[1] <= 126 &&
@@ -186,8 +185,9 @@ export default () => Box({
                        event.get_keyval()[1] === Gdk.KEY_v)
                ) {
                    chatEntry.grab_focus();
-                    chatEntry.set_text(chatEntry.text + String.fromCharCode(event.get_keyval()[1]));
-                    chatEntry.set_position(-1);
+                    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) &&
@@ -146,11 +146,11 @@ const CalendarWidget = () => {
 const defaultShown = 'calendar';
 const contentStack = Widget.Stack({
    hexpand: true,
-    items: [
-        ['calendar', CalendarWidget()],
-        ['todo', TodoWidget()],
-        // ['stars', Widget.Label({ label: 'GitHub feed will be here' })],
-    ],
+    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, () => {
@@ -159,7 +159,7 @@ const contentStack = Widget.Stack({
 })

 const StackButton = (stackItemName, icon, name) => Widget.Button({
-    className: 'button-minsize sidebar-navrail-btn sidebar-button-alone txt-small spacing-h-5',
+    className: 'button-minsize sidebar-navrail-btn txt-small spacing-h-5',
    onClicked: (button) => {
        contentStack.shown = stackItemName;
        const kids = button.get_parent().get_children();
@@ -2,7 +2,7 @@ import PopupWindow from '../../lib/popupwindow.js';
 import SidebarRight from "./sideright.js";

 export default () => PopupWindow({
-    focusable: true,
+    keymode: 'exclusive',
    anchor: ['right', 'top', 'bottom'],
    name: 'sideright',
    showClassName: 'sideright-show',
@@ -85,7 +85,8 @@ export default (props) => {
        self.toggleClassName('notif-listaction-btn-enabled', Notifications.dnd);
    });
    const clearButton = ListActionButton('clear_all', 'Clear', () => {
-        notificationList.get_children().forEach(ch => ch.destroy());
+        // Manual destruction is not necessary 
+        // since Notifications.clear() sends destroy signals to every notif
        Notifications.clear();
    });
    const listTitle = Box({
@@ -121,10 +122,10 @@ export default (props) => {
    const listContents = Stack({
        transition: 'crossfade',
        transitionDuration: 150,
-        items: [
-            ['empty', notifEmptyContent],
-            ['list', notifList]
-        ],
+        children: {
+            'empty': notifEmptyContent,
+            'list': notifList,
+        },
        setup: (self) => self
            .hook(Notifications, (self) => self.shown = (Notifications.notifications.length > 0 ? 'list' : 'empty'))
        ,
@@ -25,9 +25,10 @@ const timeRow = Box({
            className: 'txt-small txt',
            setup: (self) => self
                .poll(5000, label => {
-                    execAsync(['bash', '-c', `uptime -p | sed -e 's/up //;s/ hours,/h/;s/ minutes/m/'`]).then(upTimeString => {
-                        label.label = `Uptime: ${upTimeString}`;
-                    }).catch(print);
+                    execAsync(['bash', '-c', `w | sed -n '1p' | cut -d, -f1 | cut -d' ' -f4-`])
+                        .then(upTimeString => {
+                            label.label = `Uptime: ${upTimeString}`;
+                        }).catch(print);
                })
            ,
        }),
@@ -202,10 +202,10 @@ const UndoneTodoList = () => {
 const todoItemsBox = Widget.Stack({
    vpack: 'fill',
    transition: 'slide_left_right',
-    items: [
-        ['undone', UndoneTodoList()],
-        ['done', todoItems(true)],
-    ],
+    children: {
+        'undone': UndoneTodoList(),
+        'done': todoItems(true),
+    },
 });

 export const TodoWidget = () => {
				`@@ -0,0 +1 @@`
				]4;0;#$background #\]4;1;#$error #\]4;2;#$inversePrimary #\]4;3;#$onPrimaryContainer #\]4;4;#$onPrimaryContainer #\]4;5;#$onSecondaryContainer #\]4;6;#$primary #\]4;7;#$onSurfaceVariant #\]4;8;#$background #\]4;9;#$error #\]4;10;#$inversePrimary #\]4;11;#$onPrimaryContainer #\]4;12;#$onPrimaryContainer #\]4;13;#$onSecondaryContainer #\]4;14;#$primary #\]4;15;#$onSurfaceVariant #\]10;#$onSurfaceVariant #\]11;#$background #\]12;#$onSurfaceVariant #\]13;#$onSurfaceVariant #\]17;#$onSurfaceVariant #\]19;#$background #\]4;232;#$background #\]4;256;#$onSurfaceVariant #\]708;#$background #\
				`@@ -0,0 +1 @@`
				`]4;0;#regular0\]4;1;#regular1\]4;2;#regular2\]4;3;#regular3\]4;4;#regular4\]4;5;#regular5\]4;6;#regular6\]4;7;#regular7\]4;8;#bright0\]4;9;#bright1\]4;10;#bright2\]4;11;#bright3\]4;12;#bright4\]4;13;#bright5\]4;14;#bright6\]4;15;#bright7\]10;#regular7\]11;#regular0\]12;#regular7\]13;#regular7\]17;#regular7\]19;#regular0\]4;232;#regular0\]4;256;#regular7\]708;#regular0\`