From 9b78090b0aa3a756c88f25a8a95cd3ba60aff1e6 Mon Sep 17 00:00:00 2001
From: verysillycat <cortex@duck.com>
Date: Sat, 14 Sep 2024 13:45:16 -0600
Subject: [PATCH] ags(statusicons): add customizable order for utilities

---
 .../modules/.configuration/user_options.js    |  4 +-
 .config/ags/modules/bar/normal/system.js      | 53 ++++++++++++-------
 2 files changed, 38 insertions(+), 19 deletions(-)

diff --git a/.config/ags/modules/.configuration/user_options.js b/.config/ags/modules/.configuration/user_options.js
index 13be1e91d..78edd76b4 100644
--- a/.config/ags/modules/.configuration/user_options.js
+++ b/.config/ags/modules/.configuration/user_options.js
@@ -227,7 +227,9 @@ let configOptions = {
         // Array of bar modes for each monitor. Hit Ctrl+Alt+Slash to cycle.
         // Modes: "normal", "focus" (workspace indicator only), "nothing"
         // Example for four monitors: ["normal", "focus", "normal", "nothing"]
-        'modes': ["normal"]
+        'modes': ["normal"],
+        // Change Order to reorder, remove to hide
+        'utilities': ['snip', 'picker', 'keyboard']
     },
 }
 
diff --git a/.config/ags/modules/bar/normal/system.js b/.config/ags/modules/bar/normal/system.js
index 82a5bc384..b3c41b383 100644
--- a/.config/ags/modules/bar/normal/system.js
+++ b/.config/ags/modules/bar/normal/system.js
@@ -69,28 +69,45 @@ const UtilButton = ({ name, icon, onClicked }) => Button({
     label: `${icon}`,
 })
 
-const Utilities = () => Box({
-    hpack: 'center',
-    className: 'spacing-h-4',
-    children: [
-        UtilButton({
-            name: 'Screen snip', icon: 'screenshot_region', onClicked: () => {
-                Utils.execAsync(`${App.configDir}/scripts/grimblast.sh copy area`)
-                    .catch(print)
+const Utilities = () => {
+    const availableUtilities = {
+        snip: {
+            name: "Screen snip",
+            icon: "screenshot_region",
+            onClicked: () => {
+                Utils.execAsync(`${App.configDir}/scripts/grimblast.sh copy area`).catch(print);
             }
-        }),
-        UtilButton({
-            name: 'Color picker', icon: 'colorize', onClicked: () => {
-                Utils.execAsync(['hyprpicker', '-a']).catch(print)
+        },
+        picker: {
+            name: "Color picker",
+            icon: "colorize",
+            onClicked: () => {
+                Utils.execAsync(['hyprpicker', '-a']).catch(print);
             }
-        }),
-        UtilButton({
-            name: 'Toggle on-screen keyboard', icon: 'keyboard', onClicked: () => {
+        },
+        keyboard: {
+            name: "Toggle on-screen keyboard",
+            icon: "keyboard",
+            onClicked: () => {
                 toggleWindowOnAllMonitors('osk');
             }
-        }),
-    ]
-})
+        },
+    };
+
+    const utilityButtons = userOptions.bar.utilities
+        .filter(utility => availableUtilities[utility])
+        .map(utility => UtilButton({
+            name: availableUtilities[utility].name,
+            icon: availableUtilities[utility].icon,
+            onClicked: availableUtilities[utility].onClicked,
+        }));
+
+    return Box({
+        hpack: 'center',
+        className: 'spacing-h-4',
+        children: utilityButtons,
+    });
+}
 
 const BarBattery = () => Box({
     className: 'spacing-h-4 bar-batt-txt',