add blur config and config spinbox

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

@@ -3,7 +3,7 @@ import Widget from 'resource:///com/github/Aylur/ags/widget.js';
 import * as Utils from 'resource:///com/github/Aylur/ags/utils.js';
 import { MaterialIcon } from './materialicon.js';
 import { setupCursorHover } from '../.widgetutils/cursorhover.js';
-const { Box, Button, Label, Revealer } = Widget;
+const { Box, Button, Label, Revealer, SpinButton } = Widget;
 
 export const ConfigToggle = ({
     icon, name, desc = '', initValue,
@@ -180,3 +180,40 @@ export const ConfigGap = ({ vertical = true, size = 5, ...rest }) => Box({
     className: `gap-${vertical ? 'v' : 'h'}-${size}`,
     ...rest,
 })
+
+export const ConfigSpinButton = ({
+    icon, name, desc = '', initValue,
+    minValue = 0, maxValue = 100, step = 1,
+    expandWidget = true,
+    onChange = () => { }, extraSetup = () => { },
+    ...rest
+}) => {
+    const value = Variable(initValue);
+    const spinButton = SpinButton({
+        className: 'spinbutton',
+        range: [minValue, maxValue],
+        increments: [step, step],
+        onValueChanged: ({ value: newValue }) => {
+            value.value = newValue;
+            onChange(spinButton, newValue);
+        },
+    });
+    spinButton.value = value.value;
+    const widgetContent = Box({
+        tooltipText: desc,
+        className: 'txt spacing-h-5 configtoggle-box',
+        children: [
+            (icon !== undefined ? MaterialIcon(icon, 'norm') : null),
+            (name !== undefined ? Label({
+                className: 'txt txt-small',
+                label: name,
+            }) : null),
+            expandWidget ? Box({ hexpand: true }) : null,
+            spinButton,
+        ],
+        setup: (self) => {
+            extraSetup(self);
+        }
+    });
+    return widgetContent;
+}

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

@@ -6,7 +6,7 @@ const { Box, Button, Icon, Label, Scrollable, Slider, Stack } = Widget;
 const { execAsync, exec } = Utils;
 import { MaterialIcon } from '../../.commonwidgets/materialicon.js';
 import { setupCursorHover } from '../../.widgetutils/cursorhover.js';
-import { ConfigToggle } from '../../.commonwidgets/configwidgets.js';
+import { ConfigSpinButton, ConfigToggle } from '../../.commonwidgets/configwidgets.js';
 
 const HyprlandToggle = ({ icon, name, desc = null, option, enableValue = 1, disableValue = 0 }) => ConfigToggle({
     icon: icon,
@@ -18,6 +18,23 @@ const HyprlandToggle = ({ icon, name, desc = null, option, enableValue = 1, disa
     }
 });
 
+const HyprlandSpinButton = ({ icon, name, desc = null, option, ...rest }) => ConfigSpinButton({
+    icon: icon,
+    name: name,
+    desc: desc,
+    initValue: Number(JSON.parse(exec(`hyprctl getoption -j ${option}`))["int"]),
+    onChange: (self, newValue) => {
+        execAsync(['hyprctl', 'keyword', option, `${newValue}`]).catch(print);
+    },
+    ...rest,
+});
+
+const Subcategory = (children) => Box({
+    className: 'margin-left-15',
+    vertical: true,
+    children: children,
+})
+
 export default (props) => {
     const ConfigSection = ({ name, children }) => Box({
         vertical: true,
@@ -57,6 +74,10 @@ export default (props) => {
                             },
                         }),
                         HyprlandToggle({ icon: 'blur_on', name: 'Blur', desc: "Enable blur on transparent elements\nDoesn't affect performance/power consumption unless you have transparent windows.", option: "decoration:blur:enabled" }),
+                        Subcategory([
+                            HyprlandSpinButton({ icon: 'target', name: 'Size', desc: 'Adjust the blur radius. Generally doesn\'t affect performance\nHigher = more color spread', option: 'decoration:blur:size', minValue: 1, maxValue: 1000 }),
+                            HyprlandSpinButton({ icon: 'repeat', name: 'Passes', desc: 'Adjust the number of runs of the blur algorithm\nMore passes = more spread and power consumption\n4 is recommended\n2- would look weird and 6+ would look lame.', option: 'decoration:blur:passes', minValue: 1, maxValue: 10 }),
+                        ]),
                     ]
                 }),
                 ConfigSection({
@@ -74,7 +95,7 @@ export default (props) => {
         children: [Label({
             hpack: 'center',
             className: 'txt txt-italic txt-subtext margin-5',
-            label: 'Not all changes are saved.',
+            label: 'Not all changes are saved',
         })]
     })
     return Box({

.config/ags/scss/_common.scss

@@ -302,4 +302,18 @@ popover {
 
 widget {
     @include small-rounding;
+}
+
+.spinbutton {
+    @include small-rounding;
+    background-color: $layer2;
+    padding: 0.341rem;
+    entry {
+        color: $onLayer2;
+        margin: 0.136rem 0.273rem;
+    }
+    button {
+        margin-left: 0.205rem;
+        padding: 0.136rem;
+    }
 }