ags: sync

.config/ags/config.js

@@ -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);

.config/ags/data/weather.js

@@ -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",
+}

.config/ags/lib/animatedcircularprogress.js

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

.config/ags/lib/cursorhover.js

@@ -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;
-// });

.config/ags/lib/notification.js

@@ -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({
+                    notifTextSummary,
-                        xalign: 0,
+                    notifTextBody,
-                        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,
-                    }),
                 ]
             }),
             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 ({
                         `);
                     }
                 }
-
+                // Update dragging
-                wholeThing.attribute.dragging = Math.abs(offset_x) > 10;
+                wholeThing.attribute.dragging = Math.abs(offset_x) > MOVE_THRESHOLD;
-
+                if (Math.abs(offset_x) > MOVE_THRESHOLD ||
-                if (widget.window)
+                    Math.abs(offset_y) > MOVE_THRESHOLD) wholeThing.attribute.held = false;
-                    widget.window.set_cursor(Gdk.Cursor.new_from_name(display, 'grabbing'));
+                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;
 }

.config/ags/lib/statusicons.js

@@ -73,10 +73,10 @@ export const NotificationIndicator = (notifCenterName = 'sideright') => {
 
 export const BluetoothIndicator = () => Widget.Stack({
     transition: 'slide_up_down',
-    items: [
+    children: {
-        ['false', Widget.Label({ className: 'txt-norm icon-material', label: 'bluetooth_disabled' })],
+        'false': Widget.Label({ className: 'txt-norm icon-material', label: 'bluetooth_disabled' }),
-        ['true', Widget.Label({ className: 'txt-norm icon-material', label: 'bluetooth' })],
+        '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: [
+    children: {
-        ['fallback', SimpleNetworkIndicator()],
+        'fallback': SimpleNetworkIndicator(),
-        ['unknown', Widget.Label({ className: 'txt-norm icon-material', label: 'wifi_off' })],
+        'unknown': Widget.Label({ className: 'txt-norm icon-material', label: 'wifi_off' }),
-        ['disconnected', Widget.Label({ className: 'txt-norm icon-material', label: 'signal_wifi_off' })],
+        'disconnected': Widget.Label({ className: 'txt-norm icon-material', label: 'signal_wifi_off' }),
-        ['connected', Widget.Label({ className: 'txt-norm icon-material', label: 'lan' })],
+        'connected': Widget.Label({ className: 'txt-norm icon-material', label: 'lan' }),
-        ['connecting', Widget.Label({ className: 'txt-norm icon-material', label: 'settings_ethernet' })],
+        '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: [
+    children: {
-        ['disabled', Widget.Label({ className: 'txt-norm icon-material', label: 'wifi_off' })],
+        'disabled': Widget.Label({ className: 'txt-norm icon-material', label: 'wifi_off' }),
-        ['disconnected', Widget.Label({ className: 'txt-norm icon-material', label: 'signal_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' })],
+        'connecting': Widget.Label({ className: 'txt-norm icon-material', label: 'settings_ethernet' }),
-        ['0', Widget.Label({ className: 'txt-norm icon-material', label: 'signal_wifi_0_bar' })],
+        '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' })],
+        '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' })],
+        '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' })],
+        '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' })],
+        '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: [
+    children: {
-        ['fallback', SimpleNetworkIndicator()],
+        'fallback': SimpleNetworkIndicator(),
-        ['wifi', NetworkWifiIndicator()],
+        'wifi': NetworkWifiIndicator(),
-        ['wired', NetworkWiredIndicator()],
+        '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 [
+                // if (!lang) return [
-                    initLangs[i],
+                //     initLangs[i],
-                    Widget.Label({ label: initLangs[i] })
+                //     Widget.Label({ label: initLangs[i] })
-                ];
+                // ];
-                return [
+                // return [
-                    lang.layout,
+                //     lang.layout,
-                    Widget.Label({ label: (useFlag ? lang.flag : 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: [
+            children: widgetKids,
-                ...languageStackArray,
-                ['undef', Widget.Label({ label: '?' })]
-            ],
             setup: (self) => self.hook(Hyprland, (stack, kbName, layoutName) => {
                 if (!kbName) {
                     return;

.config/ags/scripts/color_generation/applycolor.sh

@@ -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
@@ -152,4 +175,4 @@ apply_hyprland &
 apply_gtk &
 apply_gtklock &
 apply_fuzzel &
-apply_foot
+apply_term &

.config/ags/scripts/color_generation/colorgen.sh

@@ -1,4 +1,4 @@
-#!/usr/bin/bash
+#!/usr/bin/env bash
 
 # check if no arguments
 if [ $# -eq 0 ]; then
@@ -23,38 +23,37 @@ 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 $lightdark -q
-    wal -i "$1" -n -t -s -e $lightdark -q 
     # copy scss
-    cp "$HOME/.cache/wal/colors.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
+    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
+        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/ { 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"
-        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

.config/ags/scripts/color_generation/generate_colors_material.py

@@ -1,4 +1,4 @@
-#!/bin/python3
+#!/usr/bin/env python3
 from material_color_utilities_python import *
 from pathlib import Path
 import sys

.config/ags/scripts/color_generation/switchcolor.sh

@@ -1,4 +1,4 @@
-#!/usr/bin/bash
+#!/usr/bin/env bash
 
 color=$(hyprpicker --no-fancy)
 

.config/ags/scripts/color_generation/switchwall.sh

@@ -1,4 +1,4 @@
-#!/usr/bin/bash
+#!/usr/bin/env bash
 
 if [ "$1" == "--noswitch" ]; then
     imgpath=$(swww query | awk -F 'image: ' '{print $2}')

.config/ags/scripts/hyprland/workspace_action.sh

@@ -0,0 +1,2 @@
+#!/usr/bin/env bash
+hyprctl dispatch "$1" $(((($(hyprctl activeworkspace -j | gojq -r .id) - 1)  / 10) * 10 + $2))

.config/ags/scripts/sway/swayToRelativeWs.sh

@@ -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')

.config/ags/scripts/templates/gradience/preset.json

@@ -87,9 +87,9 @@
         "BLACK_500": "#393634",
         "BLACK_700": "#33302F",
         "BLACK_900": "#2B2928",
-        "accent_bg_color": "#e4b5ff",
+        "accent_bg_color": "#ffb1c3",
-        "accent_fg_color": "#471868",
+        "accent_fg_color": "#66002a",
-        "accent_color": "#e4b5ff",
+        "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_bg_color": "#130F10",
-        "window_fg_color": "#e7e0e5",
+        "window_fg_color": "#ecdfe0",
-        "view_bg_color": "#1d1b1e",
+        "view_bg_color": "#201a1b",
-        "view_fg_color": "#e7e0e5",
+        "view_fg_color": "#ecdfe0",
         "headerbar_bg_color": "mix(@dialog_bg_color, @window_bg_color, 0.5)",
-        "headerbar_fg_color": "#eedcf5",
+        "headerbar_fg_color": "#ffd9df",
-        "headerbar_border_color": "#4f4256",
+        "headerbar_border_color": "#5c3f45",
         "headerbar_backdrop_color": "@headerbar_bg_color",
         "headerbar_shade_color": "rgba(0, 0, 0, 0.09)",
-        "card_bg_color": "#111012",
+        "card_bg_color": "#130F10",
-        "card_fg_color": "#eedcf5",
+        "card_fg_color": "#ffd9df",
         "card_shade_color": "rgba(0, 0, 0, 0.09)",
-        "dialog_bg_color": "#4f4256",
+        "dialog_bg_color": "#5c3f45",
-        "dialog_fg_color": "#eedcf5",
+        "dialog_fg_color": "#ffd9df",
-        "popover_bg_color": "#4f4256",
+        "popover_bg_color": "#5c3f45",
-        "popover_fg_color": "#eedcf5",
+        "popover_fg_color": "#ffd9df",
         "thumbnail_bg_color": "#1a1b26",
         "thumbnail_fg_color": "#AEE5FA",
         "shade_color": "rgba(0, 0, 0, 0.36)",

.config/ags/scripts/templates/hypr/colors.conf

@@ -5,23 +5,11 @@ general {
     col.inactive_border = rgba({{ $secondaryContainer }}CC)
 }
 
-plugin {
+misc {
-    droidbars { # This is my hyprbars mod that broke :(
+    background_color = rgba({{ $surface }}FF)
-        # 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
 
-        # example buttons (R -> L)
+plugin {
-        # 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
-    }
     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

.config/ags/scripts/templates/terminal/sequences.material

@@ -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 #\

.config/ags/scripts/templates/terminal/sequences.term

@@ -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\

.config/ags/scss/_bar.scss

@@ -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;

.config/ags/scss/_cheatsheet.scss

@@ -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;

.config/ags/scss/_colors.scss

@@ -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_surface_amount_subtract_surface: $transparentize_surface_amount - $transparentize_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_surface_amount_subtract_surface: $transparentize_surface_amount - $transparentize_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(
+$t_onPrimaryContainer: transparentize($onPrimaryContainer, $transparentize_amount);
-    $onPrimaryContainer,
-    $transparentize_amount
-);
 $t_secondary: transparentize($secondary, $transparentize_amount);
 $t_onSecondary: transparentize($onSecondary, $transparentize_amount);
-$t_secondaryContainer: transparentize(
+$t_secondaryContainer: transparentize($secondaryContainer, $transparentize_amount);
-    $secondaryContainer,
+$l_t_secondaryContainer: transparentize($secondaryContainer, $transparentize_surface_amount_less);
-    $transparentize_amount
+$t_onSecondaryContainer: transparentize($onSecondaryContainer, $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(
+$t_tertiaryContainer: transparentize($tertiaryContainer, $transparentize_amount);
-    $tertiaryContainer,
+$t_onTertiaryContainer: transparentize($onTertiaryContainer, $transparentize_amount);
-    $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(
+$t_t_background: transparentize($background, $transparentize_surface_amount_more);
-    $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(
+$t_surfaceVariant: transparentize($surfaceVariant, $transparentize_surface_amount);
-    $surfaceVariant,
+$t_onSurfaceVariant: transparentize($onSurfaceVariant, $transparentize_surface_amount);
-    $transparentize_surface_amount
+$t_t_surfaceVariant: transparentize($surfaceVariant, $transparentize_surface_amount_more);
-);
+$l_t_surfaceVariant: transparentize($surfaceVariant, $transparentize_surface_amount_less);
-$t_onSurfaceVariant: transparentize(
+$l_l_t_surfaceVariant: transparentize($surfaceVariant, $transparentize_surface_amount_less_less);
-    $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(
+$t_onSuccessContainer: transparentize($onErrorContainer,
-    $onErrorContainer,
+        $transparentize_amount);
-    $transparentize_amount
-);
 
 // Others
 $hovercolor: mix($t_surface, $t_onSurface, 50%);

.config/ags/scss/_common.scss

@@ -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;

.config/ags/scss/_lib_classes.scss

@@ -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;

.config/ags/scss/_lib_mixins.scss

@@ -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);
 }
 

.config/ags/scss/_material.scss

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

.config/ags/scss/_music.scss

@@ -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;

.config/ags/scss/_notifications.scss

@@ -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-color: transparentize($background,
-        $background,
+            $transparentize_surface_amount_subtract_surface );
-        $transparentize_surface_amount_subtract_surface
-    );
     min-width: 30.682rem;
 }
 

.config/ags/scss/_overview.scss

@@ -3,7 +3,7 @@
 }
 
 .overview-search-box {
-    @include menu_decel;
+    @include element_decel;
     @include large-rounding;
     @include elevation-border;
     @include elevation2;

.config/ags/scss/_sidebars.scss

@@ -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;
 }
 

.config/ags/services/chatgpt.js

@@ -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) {

.config/ags/services/gemini.js

@@ -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)));

.config/ags/services/messages.js

@@ -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)

.config/ags/services/waifus.js

@@ -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';

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

@@ -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({
+        child: Box({
-            className: 'bar-group-margin bar-sides',
+            className: 'spacing-h-5',
             children: [
-                Widget.Box({
+                BarGroup({ child: musicStuff }),
-                    className: 'bar-group bar-group-standalone bar-group-pad-music spacing-h-10',
+                systemResources,
-                    children: [
-                        playingState,
-                        trackTitle,
-                    ]
-                })
             ]
         })
     });

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

@@ -1,5 +1,4 @@
-// This is for the right pill of the bar. 
+// This is for the right pills of the bar. 
-// For the cool memory indicator on the sidebar, see sysinfo.js
 import Widget from 'resource:///com/github/Aylur/ags/widget.js';
 import * as Utils from 'resource:///com/github/Aylur/ags/utils.js';
 const { Box, Label, Button, Overlay, Revealer, Scrollable, Stack, EventBox } = Widget;
@@ -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({
+            BatteryModule(),
-                transition: 'slide_up_down',
-                transitionDuration: 150,
-                items: [
-                    ['laptop', Box({
-                        className: 'spacing-h-5', children: [
-                            BarGroup({ child: Utilities() }),
-                            BarGroup({ child: BarBattery() }),
-                        ]
-                    })],
-                    ['desktop', Box({
-                        className: 'spacing-h-5', children: [
-                            BarGroup({ child: BarResource('RAM usage', 'memory', `free | awk '/^Mem/ {printf("%.2f\\n", ($3/$2) * 100)}'`), }),
-                            BarGroup({ child: BarResource('Swap usage', 'swap_horiz', `free | awk '/^Swap/ {printf("%.2f\\n", ($3/$2) * 100)}'`), }),
-                        ]
-                    })],
-                ],
-                setup: (stack) => Utils.timeout(10, () => {
-                    if (!Battery.available) stack.shown = 'desktop';
-                    else stack.shown = 'laptop';
-                })
-            })
         ]
     })
 });

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

@@ -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 <= offset || ws.id > offset + count) continue; // Out of range, ignore
-                    if (ws.id > count) return; // Not rendered
+                    if (workspaces[i].windows > 0)
-                    if (workspaces[i].windows > 0) {
+                        workspaceMask |= (1 << (ws.id - offset));
-                        workspaceMask |= (1 << ws.id);
-                    }
                 }
+                // 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) =>
+            .hook(Hyprland.active.workspace, (self) => {
-                area.setCss(`font-size: ${Hyprland.active.workspace.id}px;`)
+                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: [
+            children: [WorkspaceContents(NUM_OF_WORKSPACES_SHOWN)],
-                WorkspaceContents(10),
-            ]
         })]
     }),
     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);
+            const wsId = Math.ceil(cursorX * NUM_OF_WORKSPACES_SHOWN / widgetWidth);
-            Hyprland.sendMessage(`dispatch workspace ${wsId}`)
+            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);
+            // 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}`);
+            // 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);
     }

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

@@ -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({

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

@@ -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);

.config/ags/widgets/desktopbackground/wallpaper.js

@@ -99,10 +99,10 @@ export default (monitor = 0) => {
     const stack = Stack({
         transition: 'crossfade',
         transitionDuration: 180,
-        items: [
+        children: {
-            ['image', wallpaperImage],
+            'image': wallpaperImage,
-            ['prompt', wallpaperPrompt],
+            'prompt': wallpaperPrompt,
-        ],
+        },
         setup: (self) => self
             .hook(Wallpaper, (self) => {
                 const wallPath = Wallpaper.get(monitor);

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

@@ -365,6 +365,7 @@ export default () => MarginRevealer({
                 for (let i = 0; i < children.length; i++) {
                     const child = children[i];
                     child.destroy();
+                    child = null;
                 }
                 return;
             }

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

@@ -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);
+            notifWidget.revealChild = false;
-            notif.revealChild = false;
+            notifWidget.attribute.destroyWithAnims();
-            notif.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

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

@@ -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'],

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

@@ -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);
     }
 }
 

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

@@ -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-width: ${SCREEN_WIDTH * OVERVIEW_SCALE}px;
-        min-height: ${SCREEN_HEIGHT * 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) => {
+    widget.clear = () => {
-        clients = clients.filter(({ workspace: { id } }) => id === index);
+        fixed.get_children().forEach(ch => ch.destroy());
-
+        const offset = Math.floor((Hyprland.active.workspace.id - 1) / NUM_OF_WORKSPACES_SHOWN) * NUM_OF_WORKSPACES_SHOWN;
-        // this is for my monitor layout
+        fixed.put(WorkspaceNumber(offset + index), 0, 0);
-        // shifts clients back by SCREEN_WIDTHpx if necessary
+    }
-        clients = clients.map(client => {
+    widget.set = (clientJson) => {
-            const [x, y] = client.at;
+        // if(clientMap.get(clientJson.address)) clientMap.get(clientJson.address).destroy();
-            if (x > SCREEN_WIDTH)
+        const newWindow = Window(clientJson);
-                client.at = [x - SCREEN_WIDTH, y];
+        if (newWindow === null) return;
-            return client;
+        // clientMap.set(clientJson.address, newWindow);
-        });
+        fixed.put(newWindow,
-
+            Math.max(0, newWindow.attribute.x * OVERVIEW_SCALE),
-        const children = fixed.get_children();
+            Math.max(0, newWindow.attribute.y * OVERVIEW_SCALE)
-        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.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 allClients = JSON.parse(clients);
-                const children = box.get_children();
+                const kids = box.get_children();
-                for (let i = 0; i < children.length; i++) {
+                kids.forEach(kid => kid.clear());
-                    const ch = children[i];
+                for (let i = 0; i < allClients.length; i++) {
-                    ch.update(json)
+                    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?
+        .hook(Hyprland, (box, clientAddress) => {
-        //     console.log(name)
+            box.attribute.update(box)
-        //     if (["changefloatingmode", "movewindow"].includes(name))
+        }, 'client-removed')
-        //         box.attribute.update(box);
+        .hook(Hyprland, (box, clientAddress) => {
-        // }, 'event')
+            box.attribute.update(box);
-        .hook(Hyprland, (box) => box.attribute.update(box), 'client-added')
+        }, 'client-added')
-        .hook(Hyprland, (box) => box.attribute.update(box), 'client-removed')
+        .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 () => {
+export default () => Widget.Revealer({
-    const overviewRevealer = Widget.Revealer({
+    revealChild: true,
-        revealChild: true,
+    transition: 'slide_down',
-        transition: 'slide_down',
+    transitionDuration: 200,
-        transitionDuration: 200,
+    child: Widget.Box({
-        child: Widget.Box({
+        vertical: true,
-            vertical: true,
+        className: 'overview-tasks',
-            className: 'overview-tasks',
+        children: Array.from({ length: NUM_OF_WORKSPACE_ROWS }, (_, index) =>
-            children: [
+            OverviewRow({
-                OverviewRow({ startWorkspace: 1, workspaces: 5 }),
+                startWorkspace: 1 + index * NUM_OF_WORKSPACE_COLS,
-                OverviewRow({ startWorkspace: 6, workspaces: 5 }),
+                workspaces: NUM_OF_WORKSPACE_COLS,
-            ]
+            })
-        }),
+        )
-    });
+    }),
-    return overviewRevealer;
+});
-}; 

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

@@ -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({

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

@@ -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",
                                 }),

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

@@ -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);

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

@@ -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'],

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

@@ -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') });

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

@@ -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 /////////////////////////
 

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

@@ -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,

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

@@ -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,

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

@@ -72,12 +72,12 @@ const WaifuImage = (taglist) => {
         homogeneous: false,
         transition: 'slide_up_down',
         transitionDuration: 150,
-        items: [
+        children: {
-            ['api', ImageState('api', 'Calling API')],
+            'api': ImageState('api', 'Calling API'),
-            ['download', ImageState('downloading', 'Downloading image')],
+            'download': ImageState('downloading', 'Downloading image'),
-            ['done', ImageState('done', 'Finished!')],
+            'done': ImageState('done', 'Finished!'),
-            ['error', ImageState('error', 'Error')],
+            'error': ImageState('error', 'Error'),
-        ]
+        },
     });
     const downloadIndicator = MarginRevealer({
         vpack: 'center',

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

@@ -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({
+function apiSendMessage(textView) {
-    className: 'sidebar-chat-entry',
+    // 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);
+
-    },
+chatEntry.get_buffer().connect("changed", (buffer) => {
-    onAccept: (entry) => {
+    const bufferText = buffer.get_text(buffer.get_start_iter(), buffer.get_end_iter(), true);
-        APIS[currentApiId].sendCommand(entry.text)
+    chatSendButton.toggleClassName('sidebar-chat-send-available', bufferText.length > 0);
-        entry.text = '';
+    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);
+        APIS[currentApiId].sendCommand(chatEntry.get_buffer().text);
-        chatEntry.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,
+    chatPlaceholder.label = APIS[id].placeholderText;
-        currentApiId = id;
+    currentApiId = id;
 }
 
 const apiSwitcher = CenterBox({

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

@@ -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',

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

@@ -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) => {
-    setup: (self) => self
+        setupCursorHover(self);
-        .hook(App, (self, currentName, visible) => {
+        self.hook(App, (self, currentName, visible) => {
-            if (currentName === 'sideleft' && visible)
+            if (currentName === 'sideleft' && visible) self.grab_focus();
-                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]));
+                    const buffer = chatEntry.get_buffer();
-                    chatEntry.set_position(-1);
+                    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) &&

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

@@ -146,11 +146,11 @@ const CalendarWidget = () => {
 const defaultShown = 'calendar';
 const contentStack = Widget.Stack({
     hexpand: true,
-    items: [
+    children: {
-        ['calendar', CalendarWidget()],
+        'calendar': CalendarWidget(),
-        ['todo', TodoWidget()],
+        'todo': TodoWidget(),
-        // ['stars', Widget.Label({ label: 'GitHub feed will be here' })],
+        // '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();

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

@@ -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',

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

@@ -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: [
+        children: {
-            ['empty', notifEmptyContent],
+            'empty': notifEmptyContent,
-            ['list', notifList]
+            'list': notifList,
-        ],
+        },
         setup: (self) => self
             .hook(Notifications, (self) => self.shown = (Notifications.notifications.length > 0 ? 'list' : 'empty'))
         ,

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

@@ -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 => {
+                    execAsync(['bash', '-c', `w | sed -n '1p' | cut -d, -f1 | cut -d' ' -f4-`])
-                        label.label = `Uptime: ${upTimeString}`;
+                        .then(upTimeString => {
-                    }).catch(print);
+                            label.label = `Uptime: ${upTimeString}`;
+                        }).catch(print);
                 })
             ,
         }),

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

@@ -202,10 +202,10 @@ const UndoneTodoList = () => {
 const todoItemsBox = Widget.Stack({
     vpack: 'fill',
     transition: 'slide_left_right',
-    items: [
+    children: {
-        ['undone', UndoneTodoList()],
+        'undone': UndoneTodoList(),
-        ['done', todoItems(true)],
+        'done': todoItems(true),
-    ],
+    },
 });
 
 export const TodoWidget = () => {