sideright: configure: make values update on reset

.config/ags/modules/.commonwidgets/configwidgets.js

@@ -5,11 +5,14 @@ import { MaterialIcon } from './materialicon.js';
 import { setupCursorHover } from '../.widgetutils/cursorhover.js';
 const { Box, Button, Label, Revealer, SpinButton } = Widget;
 
+// Basically M3 Switch
+// https://m3.material.io/components/switch/overview
+// onReset must be async
 export const ConfigToggle = ({
     icon, name, desc = '', initValue,
     expandWidget = true, resetButton = false,
     onChange = () => { }, extraSetup = () => { },
-    onReset = () => { },
+    onReset = () => { }, fetchValue = () => { },
     ...rest
 }) => {
     const enabled = Variable(initValue);
@@ -85,19 +88,24 @@ export const ConfigToggle = ({
         },
         ...rest,
     });
-    interactionWrapper.enabled = enabled;
+    const wholeThing = Box({
-    return Box({
         className: 'configtoggle-box spacing-h-5',
         children: [
             interactionWrapper,
             ...(resetButton ? [Button({
-                className: 'spinbutton-reset',
+                className: 'configtoggle-reset',
-                onClicked: onReset,
+                onClicked: (self) => {
+                    onReset(self).then(() => {
+                        enabled.value = fetchValue();
+                    }).catch(print);
+                },
                 child: MaterialIcon('settings_backup_restore', 'small'),
                 setup: setupCursorHover,
             })] : []),
         ]
     });
+    wholeThing.enabled = enabled;
+    return wholeThing;
 }
 
 export const ConfigSegmentedSelection = ({
@@ -201,15 +209,17 @@ export const ConfigSpinButton = ({
     minValue = 0, maxValue = 100, step = 1,
     expandWidget = true, resetButton = false,
     onChange = () => { }, extraSetup = () => { },
-    onReset = () => { },
+    onReset = () => { }, fetchValue = () => { },
     ...rest
 }) => {
+    let resetLock = false;
     const value = Variable(initValue);
     const spinButton = SpinButton({
         className: 'spinbutton',
         range: [minValue, maxValue],
         increments: [step, step],
         onValueChanged: ({ value: newValue }) => {
+            if (resetLock) return;
             value.value = newValue;
             onChange(spinButton, newValue);
         },
@@ -228,7 +238,15 @@ export const ConfigSpinButton = ({
             spinButton,
             ...(resetButton ? [Button({
                 className: 'spinbutton-reset',
-                onClicked: onReset,
+                onClicked: (self) => {
+                    onReset(self).then(() => {
+                        resetLock = true;
+                        const newValue = fetchValue();
+                        spinButton.value = newValue;
+                        value.value = newValue;
+                        resetLock = false;
+                    }).catch(print);
+                },
                 child: MaterialIcon('settings_backup_restore', 'small'),
                 setup: setupCursorHover,
             })] : []),
@@ -238,5 +256,6 @@ export const ConfigSpinButton = ({
         },
         ...rest,
     });
+    widgetContent.enabled = value;
     return widgetContent;
 }

.config/ags/modules/sideright/centermodules/configure.js

@@ -14,6 +14,7 @@ const HyprlandToggle = ({ icon, name, desc = null, option, enableValue = 1, disa
     desc: desc,
     resetButton: true,
     initValue: JSON.parse(exec(`hyprctl getoption -j ${option}`))["int"] != 0,
+    fetchValue: () => JSON.parse(exec(`hyprctl getoption -j ${option}`))["int"] != 0,
     onChange: (self, newValue) => {
         if (save)
             execAsync(['bash', '-c', `${App.configDir}/scripts/hyprland/hyprconfigurator.py \
@@ -23,28 +24,28 @@ const HyprlandToggle = ({ icon, name, desc = null, option, enableValue = 1, disa
             ]).catch(print);
         else
             execAsync(['hyprctl', 'keyword', option, `${newValue ? enableValue : disableValue}`]).catch(print);
-        // scripts/hyprland/hyprconfigurator.py --key decoration:rounding --value 12 --file '/home/end/.config/hypr/custom/general.conf'
+        
         extraOnChange(self, newValue);
     },
-    onReset: (self, newValue) => {
+    onReset: async (self) => {
         if (save)
-            execAsync(['bash', '-c', `${App.configDir}/scripts/hyprland/hyprconfigurator.py \
+            exec(`bash -c '${App.configDir}/scripts/hyprland/hyprconfigurator.py \
                 --key ${option} \
                 --reset \
-                --file \${XDG_CONFIG_HOME:-$HOME/.config}/hypr/custom/general.conf`
+                --file "\${XDG_CONFIG_HOME:-$HOME/.config}/hypr/custom/general.conf"'`);
-            ]).catch(print);
         else
-            execAsync(['bash', '-c', `hyprctl reload`]).catch(print);
+            exec('hyprctl reload')
-        extraOnReset(self, newValue);
+        extraOnReset(self);
     },
 });
 
-const HyprlandSpinButton = ({ icon, name, desc = null, option, save = true, ...rest }) => ConfigSpinButton({
+const HyprlandSpinButton = ({ icon, name, desc = null, option, save = true, extraOnChange = () => { }, extraOnReset = () => { }, ...rest }) => ConfigSpinButton({
     icon: icon,
     name: name,
     desc: desc,
     resetButton: true,
     initValue: Number(JSON.parse(exec(`hyprctl getoption -j ${option}`))["int"]),
+    fetchValue: () => Number(JSON.parse(exec(`hyprctl getoption -j ${option}`))["int"]),
     onChange: (self, newValue) => {
         if (save)
             execAsync(['bash', '-c', `${App.configDir}/scripts/hyprland/hyprconfigurator.py \
@@ -54,16 +55,18 @@ const HyprlandSpinButton = ({ icon, name, desc = null, option, save = true, ...r
             ]).catch(print);
         else
             execAsync(['hyprctl', 'keyword', option, `${newValue}`]).catch(print);
+
+        extraOnChange(self, newValue);
     },
-    onReset: (self, newValue) => {
+    onReset: async (self) => {
         if (save)
-            execAsync(['bash', '-c', `${App.configDir}/scripts/hyprland/hyprconfigurator.py \
+            exec(`bash -c '${App.configDir}/scripts/hyprland/hyprconfigurator.py \
                 --key ${option} \
                 --reset \
-                --file \${XDG_CONFIG_HOME:-$HOME/.config}/hypr/custom/general.conf`
+                --file "\${XDG_CONFIG_HOME:-$HOME/.config}/hypr/custom/general.conf"'`);
-            ]).catch(print);
         else
-            execAsync(['bash', '-c', `hyprctl reload`]).catch(print);
+            exec('hyprctl reload')
+        extraOnReset(self);
     },
     ...rest,
 });

.config/ags/scss/_common.scss

@@ -115,6 +115,14 @@ popover {
     padding: 0.205rem 0.341rem;
 }
 
+.configtoggle-reset {
+    @include small-rounding;
+    color: $onLayer2;
+    background-color: $layer2;
+    min-width: 2.045rem;
+    min-height: 2.045rem;
+}
+
 .switch-bg {
     @include element_decel;
     @include full-rounding;