ags: make not crash in sway

.config/ags/config.js

@@ -1,6 +1,5 @@
 "use strict";
 // Import
-const { GLib } = imports.gi;
 import App from 'resource:///com/github/Aylur/ags/app.js'
 import * as Utils from 'resource:///com/github/Aylur/ags/utils.js'
 // Widgets

.config/ags/imports.js

@@ -12,7 +12,7 @@ export const Applications = await service('applications');
 export const Audio = await service('audio');
 export const Battery = await service('battery');
 export const Bluetooth = await service('bluetooth');
-export const Hyprland = await service('hyprland');
+// export const Hyprland = await service('hyprland');
 export const Mpris = await service('mpris');
 export const Network = await service('network');
 export const Notifications = await service('notifications');

.config/ags/lib/statusicons.js

@@ -6,7 +6,6 @@ import { MaterialIcon } from './materialicon.js';
 import Bluetooth from 'resource:///com/github/Aylur/ags/service/bluetooth.js';
 import Network from 'resource:///com/github/Aylur/ags/service/network.js';
 import Notifications from 'resource:///com/github/Aylur/ags/service/notifications.js';
-import Hyprland from 'resource:///com/github/Aylur/ags/service/hyprland.js';
 import { languages } from '../data/languages.js';
 
 // A guessing func to try to support langs not listed in data/languages.js
@@ -163,57 +162,62 @@ export const NetworkIndicator = () => Widget.Stack({
 });
 
 const HyprlandXkbKeyboardLayout = async ({ useFlag } = {}) => {
-    var initLangs = [];
+    try {
-    var languageStackArray = [];
+        const Hyprland = (await import('resource:///com/github/Aylur/ags/service/hyprland.js')).default;
-    var currentKeyboard;
+        var initLangs = [];
+        var languageStackArray = [];
+        var currentKeyboard;
 
-    const updateCurrentKeyboards = () => {
+        const updateCurrentKeyboards = () => {
-        currentKeyboard = JSON.parse(Utils.exec('hyprctl -j devices')).keyboards
+            currentKeyboard = JSON.parse(Utils.exec('hyprctl -j devices')).keyboards
-            .find(device => device.name === 'at-translated-set-2-keyboard');
+                .find(device => device.name === 'at-translated-set-2-keyboard');
-        if (currentKeyboard) {
+            if (currentKeyboard) {
-            initLangs = currentKeyboard.layout.split(',').map(lang => lang.trim());
+                initLangs = currentKeyboard.layout.split(',').map(lang => lang.trim());
-        }
+            }
-        languageStackArray = Array.from({ length: initLangs.length }, (_, i) => {
+            languageStackArray = Array.from({ length: initLangs.length }, (_, i) => {
-            const lang = languages.find(lang => lang.layout == initLangs[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) })
-            ];
+                ];
+            });
+        };
+        updateCurrentKeyboards();
+        const widgetRevealer = Widget.Revealer({
+            transition: 150,
+            transition: 'slide_left',
+            revealChild: languageStackArray.length > 1,
         });
-    };
+        const widgetContent = Widget.Stack({
-    updateCurrentKeyboards();
+            transition: 'slide_up_down',
-    const widgetRevealer = Widget.Revealer({
+            items: [
-        transition: 150,
+                ...languageStackArray,
-        transition: 'slide_left',
+                ['undef', Widget.Label({ label: '?' })]
-        revealChild: languageStackArray.length > 1,
+            ],
-    });
+            setup: (self) => self.hook(Hyprland, (stack, kbName, layoutName) => {
-    const widgetContent = Widget.Stack({
+                if (!kbName) {
-        transition: 'slide_up_down',
+                    return;
-        items: [
+                }
-            ...languageStackArray,
+                var lang = languages.find(lang => layoutName.includes(lang.name));
-            ['undef', Widget.Label({ label: '?' })]
+                if (lang) {
-        ],
+                    widgetContent.shown = lang.layout;
-        setup: (self) => self.hook(Hyprland, (stack, kbName, layoutName) => {
+                }
-            if (!kbName) {
+                else { // Attempt to support langs not listed
-                return;
+                    lang = languageStackArray.find(lang => isLanguageMatch(lang[0], layoutName));
-            }
+                    if (!lang) stack.shown = 'undef';
-            var lang = languages.find(lang => layoutName.includes(lang.name));
+                    else stack.shown = lang[0];
-            if (lang) {
+                }
-                widgetContent.shown = lang.layout;
+            }, 'keyboard-layout'),
-            }
+        });
-            else { // Attempt to support langs not listed
+        widgetRevealer.child = widgetContent;
-                lang = languageStackArray.find(lang => isLanguageMatch(lang[0], layoutName));
+        return widgetRevealer;
-                if (!lang) stack.shown = 'undef';
+    } catch {
-                else stack.shown = lang[0];
+        return null;
-            }
+    }
-        }, 'keyboard-layout'),
-    });
-    widgetRevealer.child = widgetContent;
-    return widgetRevealer;
 }
 
 const OptionalKeyboardLayout = async () => {

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

@@ -134,7 +134,7 @@ apply_gtk() { # Using gradience-cli
     # (which is unreadable when broken when you use dark mode)
     if [ "$lightdark" = "-l" ]; then
         gsettings set org.gnome.desktop.interface gtk-theme 'adw-gtk3'
-        gsettings set org.gnome.desktop.interface color-scheme 'default'
+        gsettings set org.gnome.desktop.interface color-scheme 'prefer-light'
     else
         gsettings set org.gnome.desktop.interface gtk-theme adw-gtk3-dark
         gsettings set org.gnome.desktop.interface color-scheme 'prefer-dark'

.config/ags/scss/_sidebars.scss

@@ -416,8 +416,8 @@ $onChatgpt: $onPrimary;
 }
 
 .sidebar-todo-add {
-    @include full-rounding;
     @include menu_decel;
+    @include small-rounding;
     min-width: 1.705rem;
     min-height: 1.705rem;
     color: $onSecondaryContainer;
@@ -435,7 +435,7 @@ $onChatgpt: $onPrimary;
 
 .sidebar-todo-add-available {
     @include menu_decel;
-    @include full-rounding;
+    @include small-rounding;
     min-width: 1.705rem;
     min-height: 1.705rem;
     background-color: $primary;

.config/ags/style.css

@@ -1735,9 +1735,9 @@ tooltip {
   background-color: #52696f; }
 
 .sidebar-todo-add {
-  border-radius: 9999px;
-  -gtk-outline-radius: 9999px;
   transition: 300ms cubic-bezier(0.1, 1, 0, 1);
+  border-radius: 0.818rem;
+  -gtk-outline-radius: 0.818rem;
   min-width: 1.705rem;
   min-height: 1.705rem;
   color: #cde7ed;
@@ -1752,8 +1752,8 @@ tooltip {
 
 .sidebar-todo-add-available {
   transition: 300ms cubic-bezier(0.1, 1, 0, 1);
-  border-radius: 9999px;
+  border-radius: 0.818rem;
-  -gtk-outline-radius: 9999px;
+  -gtk-outline-radius: 0.818rem;
   min-width: 1.705rem;
   min-height: 1.705rem;
   background-color: #85e3f4;

.config/ags/widgets/bar/leftspace.js

@@ -1,42 +1,41 @@
 import App from 'resource:///com/github/Aylur/ags/app.js';
 import Widget from 'resource:///com/github/Aylur/ags/widget.js';
-import Hyprland from 'resource:///com/github/Aylur/ags/service/hyprland.js';
 import { RoundedCorner } from "../../lib/roundedcorner.js";
 import Brightness from '../../services/brightness.js';
 import Indicator from '../../services/indicator.js';
 
-const WindowTitle = async () => Widget.Scrollable({
+const WindowTitle = async () => {
-    hexpand: true, vexpand: true,
-    hscroll: 'automatic', vscroll: 'never',
-    child: Widget.Box({
-        vertical: true,
-        children: [
-            Widget.Label({
-                xalign: 0,
-                className: 'txt-smaller bar-topdesc txt',
-                setup: (self) => self.hook(Hyprland.active.client, label => { // Hyprland.active.client
-                    label.label = Hyprland.active.client.class.length === 0 ? 'Desktop' : Hyprland.active.client.class;
-                }),
-            }),
-            Widget.Label({
-                xalign: 0,
-                className: 'txt txt-smallie',
-                setup: (self) => self.hook(Hyprland.active.client, label => { // Hyprland.active.client
-                    label.label = Hyprland.active.client.title.length === 0 ? `Workspace ${Hyprland.active.workspace.id}` : Hyprland.active.client.title;
-                }),
-            })
-        ]
-    })
-})
-
-const OptionalWindowTitle = async () => {
     try {
-        return await WindowTitle();
+        const Hyprland = (await import('resource:///com/github/Aylur/ags/service/hyprland.js')).default;
+        return Widget.Scrollable({
+            hexpand: true, vexpand: true,
+            hscroll: 'automatic', vscroll: 'never',
+            child: Widget.Box({
+                vertical: true,
+                children: [
+                    Widget.Label({
+                        xalign: 0,
+                        className: 'txt-smaller bar-topdesc txt',
+                        setup: (self) => self.hook(Hyprland.active.client, label => { // Hyprland.active.client
+                            label.label = Hyprland.active.client.class.length === 0 ? 'Desktop' : Hyprland.active.client.class;
+                        }),
+                    }),
+                    Widget.Label({
+                        xalign: 0,
+                        className: 'txt txt-smallie',
+                        setup: (self) => self.hook(Hyprland.active.client, label => { // Hyprland.active.client
+                            label.label = Hyprland.active.client.title.length === 0 ? `Workspace ${Hyprland.active.workspace.id}` : Hyprland.active.client.title;
+                        }),
+                    })
+                ]
+            })
+        });
     } catch {
         return null;
     }
-};
+}
-const OptionalWindowTitleInstance = await OptionalWindowTitle();
+
+const OptionalWindowTitleInstance = await WindowTitle();
 
 export const ModuleLeftSpace = () => Widget.EventBox({
     onScrollUp: () => {

.config/ags/widgets/bar/main.js

@@ -2,29 +2,25 @@ const { Gtk } = imports.gi;
 import Widget from 'resource:///com/github/Aylur/ags/widget.js';
 
 import { ModuleLeftSpace } from "./leftspace.js";
-import { ModuleMusic } from "./music.js";
 import { ModuleRightSpace } from "./rightspace.js";
+import { ModuleMusic } from "./music.js";
 import { ModuleSystem } from "./system.js";
 const OptionalWorkspaces = async () => {
     try {
         return (await import('./workspaces_hyprland.js')).default();
     } catch {
         // return (await import('./workspaces_sway.js')).default();
-        return Box({});
+        return null;
     }
 };
 
 const left = Widget.Box({
     className: 'bar-sidemodule',
-    children: [
+    children: [ ModuleMusic()],
-        ModuleMusic()
-    ],
 });
 
 const center = Widget.Box({
-    children: [
+    children: [await OptionalWorkspaces()],
-        await OptionalWorkspaces(),
-    ],
 });
 
 const right = Widget.Box({

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

@@ -1,7 +1,6 @@
 import Widget from 'resource:///com/github/Aylur/ags/widget.js';
 import * as Utils from 'resource:///com/github/Aylur/ags/utils.js';
 import Mpris from 'resource:///com/github/Aylur/ags/service/mpris.js';
-import Hyprland from 'resource:///com/github/Aylur/ags/service/hyprland.js';
 const { execAsync, exec } = Utils;
 import { AnimatedCircProg } from "../../lib/animatedcircularprogress.js";
 import { showMusicControls } from '../../variables.js';
@@ -30,9 +29,18 @@ const TrackProgress = () => {
     })
 }
 
+const moveToRelativeWorkspace = async (self, num) => {
+    try {
+        const Hyprland = (await import('resource:///com/github/Aylur/ags/service/hyprland.js')).default;
+        Hyprland.sendMessage(`dispatch workspace ${num > 0 ? '+' : ''}${num}`);
+    } catch {
+        console.log(`TODO: Sway workspace ${num > 0 ? '+' : ''}${num}`);
+    }
+}
+
 export const ModuleMusic = () => Widget.EventBox({ // TODO: use cairo to make button bounce smaller on click
-    onScrollUp: () => Hyprland.sendMessage(`dispatch workspace -1`),
+    onScrollUp: (self) => moveToRelativeWorkspace(self, -1),
-    onScrollDown: () => Hyprland.sendMessage(`dispatch workspace +1`),
+    onScrollDown: (self) => moveToRelativeWorkspace(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),

.config/ags/widgets/bar/rightspace.js

@@ -32,8 +32,8 @@ export const ModuleRightSpace = () => {
             Audio.speaker.volume -= 0.03;
             Indicator.popup(1);
         },
-        // onHover: () => { barStatusIcons.toggleClassName('bar-statusicons-hover', true) },
+        onHover: () => { barStatusIcons.toggleClassName('bar-statusicons-hover', true) },
-        // onHoverLost: () => { barStatusIcons.toggleClassName('bar-statusicons-hover', false) },
+        onHoverLost: () => { barStatusIcons.toggleClassName('bar-statusicons-hover', false) },
         onPrimaryClick: () => App.toggleWindow('sideright'),
         onSecondaryClickRelease: () => execAsync(['bash', '-c', 'playerctl next || playerctl position `bc <<< "100 * $(playerctl metadata mpris:length) / 1000000 / 100"` &']).catch(print),
         onMiddleClickRelease: () => execAsync('playerctl play-pause').catch(print),

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

@@ -5,7 +5,6 @@ import * as Utils from 'resource:///com/github/Aylur/ags/utils.js';
 const { Box, Label, Button, Overlay, Revealer, Scrollable, Stack, EventBox } = Widget;
 const { exec, execAsync } = Utils;
 const { GLib } = imports.gi;
-import Hyprland from 'resource:///com/github/Aylur/ags/service/hyprland.js';
 import Battery from 'resource:///com/github/Aylur/ags/service/battery.js';
 import { MaterialIcon } from '../../lib/materialicon.js';
 import { AnimatedCircProg } from "../../lib/animatedcircularprogress.js";
@@ -14,7 +13,7 @@ const BATTERY_LOW = 20;
 
 const BatBatteryProgress = () => {
     const _updateProgress = (circprog) => { // Set circular progress value
-        circprog.css = `font-size: ${Battery.percent}px;`
+        circprog.css = `font-size: ${Math.abs(Battery.percent)}px;`
 
         circprog.toggleClassName('bar-batt-circprog-low', Battery.percent <= BATTERY_LOW);
         circprog.toggleClassName('bar-batt-circprog-full', Battery.charged);
@@ -187,9 +186,18 @@ const BarGroup = ({ child }) => Widget.Box({
     ]
 });
 
+const moveToRelativeWorkspace = async (self, num) => {
+    try {
+        const Hyprland = (await import('resource:///com/github/Aylur/ags/service/hyprland.js')).default;
+        Hyprland.sendMessage(`dispatch workspace ${num > 0 ? '+' : ''}${num}`);
+    } catch {
+        console.log(`TODO: Sway workspace ${num > 0 ? '+' : ''}${num}`);
+    }
+}
+
 export const ModuleSystem = () => Widget.EventBox({
-    onScrollUp: () => Hyprland.sendMessage(`dispatch workspace -1`),
+    onScrollUp: (self) => moveToRelativeWorkspace(self, -1),
-    onScrollDown: () => Hyprland.sendMessage(`dispatch workspace +1`),
+    onScrollDown: (self) => moveToRelativeWorkspace(self, +1),
     onPrimaryClick: () => App.toggleWindow('sideright'),
     child: Widget.Box({
         className: 'spacing-h-5',

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

@@ -26,7 +26,7 @@ const WorkspaceContents = (count = 10) => {
                 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 <= 0) continue; // Ignore scratchpads
                     if (ws.id > count) return; // Not rendered
                     if (workspaces[i].windows > 0) {
                         workspaceMask |= (1 << ws.id);

.config/ags/widgets/desktopbackground/main.js

@@ -10,7 +10,7 @@ import GraphWidget from './graph.js'
 export default () => Widget.Window({
     name: 'desktopbackground',
     anchor: ['top', 'bottom', 'left', 'right'],
-    layer: 'background',
+    layer: 'bottom',
     exclusivity: 'normal',
     visible: true,
     child: Widget.Overlay({

.config/ags/widgets/onscreenkeyboard/onscreenkeyboard.js

@@ -4,7 +4,6 @@ import Widget from 'resource:///com/github/Aylur/ags/widget.js';
 import Service from 'resource:///com/github/Aylur/ags/service.js';
 import * as Utils from 'resource:///com/github/Aylur/ags/utils.js';
 
-import Hyprland from 'resource:///com/github/Aylur/ags/service/hyprland.js';
 const { Box, EventBox, Button, Revealer } = Widget;
 const { execAsync, exec } = Utils;
 import { MaterialIcon } from '../../lib/materialicon.js';
@@ -146,22 +145,32 @@ const keyboardWindow = Box({
 
 const gestureEvBox = EventBox({ child: keyboardWindow })
 const gesture = Gtk.GestureDrag.new(gestureEvBox);
-gesture.connect('drag-begin', () => {
+gesture.connect('drag-begin', async () => {
-    Hyprland.sendMessage('j/cursorpos').then((out) => {
+    try {
-        gesture.startY = JSON.parse(out).y;
+        const Hyprland = (await import('resource:///com/github/Aylur/ags/service/hyprland.js')).default;
-    }).catch(print);
+        Hyprland.sendMessage('j/cursorpos').then((out) => {
+            gesture.startY = JSON.parse(out).y;
+        }).catch(print);
+    } catch {
+        return;
+    }
 });
-gesture.connect('drag-update', () => {
+gesture.connect('drag-update', async () => {
-    Hyprland.sendMessage('j/cursorpos').then((out) => {
+    try {
-        const currentY = JSON.parse(out).y;
+        const Hyprland = (await import('resource:///com/github/Aylur/ags/service/hyprland.js')).default;
-        const offset = gesture.startY - currentY;
+        Hyprland.sendMessage('j/cursorpos').then((out) => {
+            const currentY = JSON.parse(out).y;
+            const offset = gesture.startY - currentY;
 
-        if (offset > 0) return;
+            if (offset > 0) return;
 
-        keyboardWindow.setCss(`
+            keyboardWindow.setCss(`
             margin-bottom: ${offset}px;
         `);
-    }).catch(print);
+        }).catch(print);
+    } catch {
+        return;
+    }
 });
 gesture.connect('drag-end', () => {
     var offset = gesture.get_offset()[2];

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

@@ -39,7 +39,7 @@ const OptionalOverview = async () => {
     try {
         return (await import('./overview_hyprland.js')).default();
     } catch {
-        return null;
+        return Widget.Box({});
         // return (await import('./overview_hyprland.js')).default();
     }
 };

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

@@ -22,49 +22,52 @@ export const chatGPTTabIcon = Box({
     ],
 });
 
-const chatGPTInfo = Box({
+const ChatGPTInfo = () => {
-    vertical: true,
+    const openAiLogo = Icon({
-    className: 'spacing-v-15',
+        hpack: 'center',
-    children: [
+        className: 'sidebar-chat-welcome-logo',
-        Icon({
+        icon: `${App.configDir}/assets/openai-logomark.svg`,
-            hpack: 'center',
+        setup: (self) => Utils.timeout(1, () => {
-            className: 'sidebar-chat-welcome-logo',
+            const styleContext = self.get_style_context();
-            icon: `${App.configDir}/assets/openai-logomark.svg`,
+            const width = styleContext.get_property('min-width', Gtk.StateFlags.NORMAL);
-            setup: (self) => Utils.timeout(1, () => {
+            const height = styleContext.get_property('min-height', Gtk.StateFlags.NORMAL);
-                const styleContext = self.get_style_context();
+            self.size = Math.max(width, height, 1) * 116 / 180; // Why such a specific proportion? See https://openai.com/brand#logos
-                const width = styleContext.get_property('min-width', Gtk.StateFlags.NORMAL);
+        })
-                const height = styleContext.get_property('min-height', Gtk.StateFlags.NORMAL);
+    });
-                self.size = Math.max(width, height, 1) * 116 / 180; // Why such a specific proportion? See https://openai.com/brand#logos
+    return Box({
-            })
+        vertical: true,
-        }),
+        className: 'spacing-v-15',
-        Label({
+        children: [
-            className: 'txt txt-title-small sidebar-chat-welcome-txt',
+            openAiLogo,
-            wrap: true,
+            Label({
-            justify: Gtk.Justification.CENTER,
+                className: 'txt txt-title-small sidebar-chat-welcome-txt',
-            label: 'ChatGPT',
+                wrap: true,
-        }),
+                justify: Gtk.Justification.CENTER,
-        Box({
+                label: 'ChatGPT',
-            className: 'spacing-h-5',
+            }),
-            hpack: 'center',
+            Box({
-            children: [
+                className: 'spacing-h-5',
-                Label({
+                hpack: 'center',
-                    className: 'txt-smallie txt-subtext',
+                children: [
-                    wrap: true,
+                    Label({
-                    justify: Gtk.Justification.CENTER,
+                        className: 'txt-smallie txt-subtext',
-                    label: 'Powered by OpenAI',
+                        wrap: true,
-                }),
+                        justify: Gtk.Justification.CENTER,
-                Button({
+                        label: 'Powered by OpenAI',
-                    className: 'txt-subtext txt-norm icon-material',
+                    }),
-                    label: 'info',
+                    Button({
-                    tooltipText: 'Uses gpt-3.5-turbo.\nNot affiliated, endorsed, or sponsored by OpenAI.',
+                        className: 'txt-subtext txt-norm icon-material',
-                    setup: setupCursorHoverInfo,
+                        label: 'info',
-                }),
+                        tooltipText: 'Uses gpt-3.5-turbo.\nNot affiliated, endorsed, or sponsored by OpenAI.',
-            ]
+                        setup: setupCursorHoverInfo,
-        }),
+                    }),
-    ]
+                ]
-})
+            }),
+        ]
+    });
+}
 
-export const chatGPTSettings = MarginRevealer({
+export const ChatGPTSettings = () => MarginRevealer({
     transition: 'slide_down',
     revealChild: true,
     extraSetup: (self) => self
@@ -124,7 +127,7 @@ export const chatGPTSettings = MarginRevealer({
     })
 });
 
-export const openaiApiKeyInstructions = Box({
+export const OpenaiApiKeyInstructions = () => Box({
     homogeneous: true,
     children: [Revealer({
         transition: 'slide_down',
@@ -158,9 +161,9 @@ export const chatGPTWelcome = Box({
         vpack: 'center',
         vertical: true,
         children: [
-            chatGPTInfo,
+            ChatGPTInfo(),
-            openaiApiKeyInstructions,
+            OpenaiApiKeyInstructions(),
-            chatGPTSettings, ``
+            ChatGPTSettings(),
         ]
     })
 });

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

@@ -4,7 +4,6 @@ import * as Utils from 'resource:///com/github/Aylur/ags/utils.js';
 
 import Bluetooth from 'resource:///com/github/Aylur/ags/service/bluetooth.js';
 import Network from 'resource:///com/github/Aylur/ags/service/network.js';
-import Hyprland from 'resource:///com/github/Aylur/ags/service/hyprland.js';
 const { execAsync, exec } = Utils;
 import { BluetoothIndicator, NetworkIndicator } from "../../lib/statusicons.js";
 import { setupCursorHover } from "../../lib/cursorhover.js";
@@ -62,24 +61,30 @@ export const ToggleIconBluetooth = (props = {}) => Widget.Button({
     ...props,
 });
 
-export const HyprToggleIcon = (icon, name, hyprlandConfigValue, props = {}) => Widget.Button({
+export const HyprToggleIcon = async (icon, name, hyprlandConfigValue, props = {}) => {
-    className: 'txt-small sidebar-iconbutton',
+    try {
-    tooltipText: `${name}`,
+        return Widget.Button({
-    onClicked: (button) => {
+            className: 'txt-small sidebar-iconbutton',
-        // Set the value to 1 - value
+            tooltipText: `${name}`,
-        Utils.execAsync(`hyprctl -j getoption ${hyprlandConfigValue}`).then((result) => {
+            onClicked: (button) => {
-            const currentOption = JSON.parse(result).int;
+                // Set the value to 1 - value
-            execAsync(['bash', '-c', `hyprctl keyword ${hyprlandConfigValue} ${1 - currentOption} &`]).catch(print);
+                Utils.execAsync(`hyprctl -j getoption ${hyprlandConfigValue}`).then((result) => {
-            button.toggleClassName('sidebar-button-active', currentOption == 0);
+                    const currentOption = JSON.parse(result).int;
-        }).catch(print);
+                    execAsync(['bash', '-c', `hyprctl keyword ${hyprlandConfigValue} ${1 - currentOption} &`]).catch(print);
-    },
+                    button.toggleClassName('sidebar-button-active', currentOption == 0);
-    child: MaterialIcon(icon, 'norm', { hpack: 'center' }),
+                }).catch(print);
-    setup: button => {
+            },
-        button.toggleClassName('sidebar-button-active', JSON.parse(Utils.exec(`hyprctl -j getoption ${hyprlandConfigValue}`)).int == 1);
+            child: MaterialIcon(icon, 'norm', { hpack: 'center' }),
-        setupCursorHover(button);
+            setup: button => {
-    },
+                button.toggleClassName('sidebar-button-active', JSON.parse(Utils.exec(`hyprctl -j getoption ${hyprlandConfigValue}`)).int == 1);
-    ...props,
+                setupCursorHover(button);
-})
+            },
+            ...props,
+        })
+    } catch {
+        return null;
+    }
+}
 
 export const ModuleNightLight = (props = {}) => Widget.Button({ // TODO: Make this work
     attribute: {
@@ -104,31 +109,38 @@ export const ModuleNightLight = (props = {}) => Widget.Button({ // TODO: Make th
     ...props,
 });
 
-export const ModuleInvertColors = (props = {}) => Widget.Button({
+export const ModuleInvertColors = async (props = {}) => {
-    className: 'txt-small sidebar-iconbutton',
+    try {
-    tooltipText: 'Color inversion',
+        const Hyprland = (await import('resource:///com/github/Aylur/ags/service/hyprland.js')).default;
-    onClicked: (button) => {
+        return Widget.Button({
-        // const shaderPath = JSON.parse(exec('hyprctl -j getoption decoration:screen_shader')).str;
+            className: 'txt-small sidebar-iconbutton',
-        Hyprland.sendMessage('j/getoption decoration:screen_shader')
+            tooltipText: 'Color inversion',
-            .then((output) => {
+            onClicked: (button) => {
-                const shaderPath = JSON.parse(output)["str"].trim();
+                // const shaderPath = JSON.parse(exec('hyprctl -j getoption decoration:screen_shader')).str;
-                console.log(output)
+                Hyprland.sendMessage('j/getoption decoration:screen_shader')
-                console.log(shaderPath)
+                    .then((output) => {
-                if (shaderPath != "[[EMPTY]]" && shaderPath != "") {
+                        const shaderPath = JSON.parse(output)["str"].trim();
-                    execAsync(['bash', '-c', `hyprctl keyword decoration:screen_shader '[[EMPTY]]'`]).catch(print);
+                        console.log(output)
-                    button.toggleClassName('sidebar-button-active', false);
+                        console.log(shaderPath)
-                }
+                        if (shaderPath != "[[EMPTY]]" && shaderPath != "") {
-                else {
+                            execAsync(['bash', '-c', `hyprctl keyword decoration:screen_shader '[[EMPTY]]'`]).catch(print);
-                    Hyprland.sendMessage(`j/keyword decoration:screen_shader ${expandTilde('~/.config/hypr/shaders/invert.frag')}`)
+                            button.toggleClassName('sidebar-button-active', false);
-                        .catch(print);
+                        }
-                    button.toggleClassName('sidebar-button-active', true);
+                        else {
-                }
+                            Hyprland.sendMessage(`j/keyword decoration:screen_shader ${expandTilde('~/.config/hypr/shaders/invert.frag')}`)
-            })
+                                .catch(print);
-    },
+                            button.toggleClassName('sidebar-button-active', true);
-    child: MaterialIcon('invert_colors', 'norm'),
+                        }
-    setup: setupCursorHover,
+                    })
-    ...props,
+            },
-})
+            child: MaterialIcon('invert_colors', 'norm'),
+            setup: setupCursorHover,
+            ...props,
+        })
+    } catch {
+        return null;
+    };
+}
 
 export const ModuleIdleInhibitor = (props = {}) => Widget.Button({ // TODO: Make this work
     attribute: {
@@ -173,9 +185,9 @@ export const ModuleEditIcon = (props = {}) => Widget.Button({ // TODO: Make this
 export const ModuleReloadIcon = (props = {}) => Widget.Button({
     ...props,
     className: 'txt-small sidebar-iconbutton',
-    tooltipText: 'Reload Hyprland',
+    tooltipText: 'Reload Environment config',
     onClicked: () => {
-        execAsync(['bash', '-c', 'hyprctl reload &']);
+        execAsync(['bash', '-c', 'hyprctl reload || swaymsg reload &']);
         App.toggleWindow('sideright');
     },
     child: MaterialIcon('refresh', 'norm'),

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

@@ -45,10 +45,10 @@ const togglesBox = Widget.Box({
     children: [
         ToggleIconWifi(),
         ToggleIconBluetooth(),
-        HyprToggleIcon('mouse', 'Raw input', 'input:force_no_accel', {}),
+        await HyprToggleIcon('mouse', 'Raw input', 'input:force_no_accel', {}),
-        HyprToggleIcon('front_hand', 'No touchpad while typing', 'input:touchpad:disable_while_typing', {}),
+        await HyprToggleIcon('front_hand', 'No touchpad while typing', 'input:touchpad:disable_while_typing', {}),
         ModuleNightLight(),
-        ModuleInvertColors(),
+        await ModuleInvertColors(),
         ModuleIdleInhibitor(),
     ]
 })