add some config on sidebar

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

@@ -151,12 +151,10 @@ export const ConfigMulipleSelection = ({
         tooltipText: desc,
         className: 'multipleselection-container spacing-v-3',
         vertical: true,
-        children: optionsArr.map((options, grp) => {
+        children: optionsArr.map((options, grp) => Box({
-            return Box({
             className: 'spacing-h-5',
             hpack: 'center',
-                children: options.map((option, id) => {
+            children: options.map((option, id) => Button({
-                    return Button({
                 setup: setupCursorHover,
                 className: `multipleselection-btn ${id == initIndex[1] && grp == initIndex[0] ? 'multipleselection-btn-enabled' : ''}`,
                 label: option.name,
@@ -170,10 +168,8 @@ export const ConfigMulipleSelection = ({
                     self.toggleClassName('multipleselection-btn-enabled', true);
                     onChange(option.value, option.name);
                 }
-                    })
+            })),
-                }),
+        })),
-            })
-        }),
         ...rest,
     });
     return widget;

.config/ags/modules/.configuration/user_options.js

@@ -1,7 +1,7 @@
-
 import userOverrides from '../../user_options.js';
 
-// Defaults
+// Default options.
+// Add overrides in ~/.config/ags/user_options.js
 let configOptions = {
     // General stuff
     'ai': {

.config/ags/modules/indicators/colorscheme.js

@@ -106,9 +106,19 @@ const ColorSchemeSettings = () => Widget.Box({
     vpack: 'center',
     children: [
         Widget.Box({
+            vertical: true,
             children: [
+                Widget.Label({
+                    xalign: 0,
+                    className: 'txt-norm titlefont txt',
+                    label: 'Options',
+                    hpack: 'center',
+                }),
+                //////////////////
                 ConfigToggle({
+                    icon: 'dark_mode',
                     name: 'Dark Mode',
+                    desc: 'Ya should go to sleep!',
                     initValue: initColorVal,
                     onChange: (self, newValue) => {
                         let lightdark = newValue == 0 ? "light" : "dark";
@@ -118,7 +128,9 @@ const ColorSchemeSettings = () => Widget.Box({
                     },
                 }),
                 ConfigToggle({
+                    icon: 'border_clear',
                     name: 'Transparency',
+                    desc: 'Make shell elements transparent',
                     initValue: initTransparencyVal,
                     onChange: (self, newValue) => {
                         let transparency = newValue == 0 ? "opaque" : "transparent";
@@ -129,6 +141,17 @@ const ColorSchemeSettings = () => Widget.Box({
                 }),
             ]
         }),
+        Widget.Box({
+            vertical: true,
+            className: 'spacing-v-5',
+            children: [
+                Widget.Label({
+                    xalign: 0,
+                    className: 'txt-norm titlefont txt margin-top-5',
+                    label: 'Scheme styles',
+                    hpack: 'center',
+                }),
+                //////////////////
                 ConfigMulipleSelection({
                     hpack: 'center',
                     vpack: 'center',
@@ -141,6 +164,8 @@ const ColorSchemeSettings = () => Widget.Box({
                     },
                 }),
             ]
+        })
+    ]
 });
 
 const ColorschemeContent = () => Widget.Box({

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

@@ -0,0 +1,89 @@
+const { GLib } = imports.gi;
+import Hyprland from 'resource:///com/github/Aylur/ags/service/hyprland.js';
+import Widget from 'resource:///com/github/Aylur/ags/widget.js';
+import * as Utils from 'resource:///com/github/Aylur/ags/utils.js';
+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';
+
+const HyprlandToggle = ({ icon, name, desc = null, option, enableValue = 1, disableValue = 0 }) => ConfigToggle({
+    icon: icon,
+    name: name,
+    desc: desc,
+    initValue: JSON.parse(exec(`hyprctl getoption -j ${option}`))["int"] != 0,
+    onChange: (self, newValue) => {
+        execAsync(['hyprctl', 'keyword', option, `${newValue ? enableValue : disableValue}`]).catch(print);
+    }
+});
+
+export default (props) => {
+    const ConfigSection = ({ name, children }) => Box({
+        vertical: true,
+        className: 'spacing-v-5',
+        children: [
+            Label({
+                hpack: 'start',
+                className: 'txt txt-large margin-left-10',
+                label: name,
+            }),
+            Box({
+                className: 'margin-left-10 margin-right-10',
+                vertical: true,
+                children: children,
+            })
+        ]
+    })
+    const mainContent = Scrollable({
+        vexpand: true,
+        child: Box({
+            vertical: true,
+            className: 'spacing-v-10',
+            children: [
+                ConfigSection({
+                    name: 'Effects', children: [
+                        ConfigToggle({
+                            icon: 'border_clear',
+                            name: 'Transparency',
+                            desc: 'Make shell elements transparent',
+                            initValue: exec('bash -c "sed -n \'2p\' $HOME/.cache/ags/user/colormode.txt"') == "transparent",
+                            onChange: (self, newValue) => {
+                                const transparency = newValue == 0 ? "opaque" : "transparent";
+                                console.log(transparency);
+                                execAsync([`bash`, `-c`, `mkdir -p ${GLib.get_user_cache_dir()}/ags/user && sed -i "2s/.*/${transparency}/"  ${GLib.get_user_cache_dir()}/ags/user/colormode.txt`])
+                                    .then(execAsync(['bash', '-c', `${App.configDir}/scripts/color_generation/switchcolor.sh`]))
+                                    .catch(print);
+                            },
+                        }),
+                        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" }),
+                    ]
+                }),
+                ConfigSection({
+                    name: 'Developer', children: [
+                        HyprlandToggle({ icon: 'speed', name: 'Show FPS', desc: "[Nerd] Show Hyprland's FPS overlay", option: "debug:overlay" }),
+                        HyprlandToggle({ icon: 'motion_sensor_active', name: 'Damage tracking', desc: "Enable damage tracking\nGenerally, leave it on.\nTurn off only when a shader doesn't work", option: "debug:damage_tracking", enableValue: 2 }),
+                        HyprlandToggle({ icon: 'destruction', name: 'Damage blink', desc: "[Epilepsy warning!] [Nerd] Show screen damage flashes", option: "debug:damage_blink" }),
+                    ]
+                }),
+            ]
+        })
+    });
+    const footNote = Box({
+        homogeneous: true,
+        children: [Label({
+            hpack: 'center',
+            className: 'txt txt-italic txt-subtext margin-5',
+            label: 'Not all changes are saved.',
+        })]
+    })
+    return Box({
+        ...props,
+        className: 'spacing-v-5',
+        vertical: true,
+        children: [
+            mainContent,
+            footNote,
+        ]
+    });
+}

.config/ags/modules/sideright/sideright.js

@@ -19,6 +19,7 @@ import ModuleNotificationList from "./centermodules/notificationlist.js";
 import ModuleVolumeMixer from "./centermodules/volumemixer.js";
 import ModuleWifiNetworks from "./centermodules/wifinetworks.js";
 import ModuleBluetooth from "./centermodules/bluetooth.js";
+import ModuleConfigure from "./centermodules/configure.js";
 import { ModuleCalendar } from "./calendar.js";
 import { getDistroIcon } from '../.miscutils/system.js';
 import { MaterialIcon } from '../.commonwidgets/materialicon.js';
@@ -47,6 +48,11 @@ const centerWidgets = [
         contentWidget: ModuleWifiNetworks(),
         onFocus: () => execAsync('nmcli dev wifi list').catch(print),
     },
+    {
+        name: 'Live config',
+        materialIcon: 'tune',
+        contentWidget: ModuleConfigure(),
+    },
 ];
 
 const timeRow = Box({

.config/ags/user_options.js

@@ -1,10 +1,9 @@
-
-const userConfigOptions = {
 // For every option, see ~/.config/ags/modules/.configuration/user_options.js
 // (vscode users ctrl+click this: file://./modules/.configuration/user_options.js)
 // (vim users: `:vsp` to split window, move cursor to this path, press `gf`. `Ctrl-w` twice to switch between)
 //   options listed in this file will override the default ones in the above file
-    // Here's an example
+
+const userConfigOptions = {
     'keybinds': {
         'sidebar': {
             'pin': "Ctrl+p",