refractor selection groups and config option row

.config/quickshell/modules/common/widgets/ConfigRow.qml

@@ -0,0 +1,8 @@
+import QtQuick
+import QtQuick.Layouts
+
+RowLayout {
+    property bool uniform: false
+    spacing: 10
+    uniformCellSizes: uniform
+}

.config/quickshell/modules/common/widgets/ConfigSelectionArray.qml

@@ -0,0 +1,48 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import Quickshell
+import Quickshell.Io
+import Quickshell.Hyprland
+import "root:/services/"
+import "root:/modules/common/"
+import "root:/modules/common/widgets/"
+import "root:/modules/common/functions/color_utils.js" as ColorUtils
+import "root:/modules/common/functions/file_utils.js" as FileUtils
+
+Flow {
+    id: root
+    Layout.fillWidth: true
+    spacing: 2
+    property list<var> options: []
+    property string configOptionName: ""
+    property var currentValue: null
+
+    signal selected(var newValue)
+
+    Repeater {
+        model: root.options
+        delegate: SelectionGroupButton {
+            id: paletteButton
+            required property var modelData
+            required property int index
+            onYChanged: {
+                if (index === 0) {
+                    paletteButton.leftmost = true
+                } else {
+                    var prev = root.children[index - 1]
+                    var thisIsOnNewLine = prev && prev.y !== paletteButton.y
+                    paletteButton.leftmost = thisIsOnNewLine
+                    prev.rightmost = thisIsOnNewLine
+                }
+            }
+            leftmost: index === 0
+            rightmost: index === root.options.length - 1
+            buttonText: modelData.displayName;
+            toggled: root.currentValue === modelData.value
+            onClicked: {
+                root.selected(modelData.value);
+            }
+        }
+    }
+}

.config/quickshell/modules/settings/BehaviorConfig.qml

@@ -9,86 +9,46 @@ ContentPage {
     ContentSection {
         title: "Policies"
 
-        RowLayout {
+        ConfigRow {
-            Layout.alignment: Qt.AlignHCenter
-            spacing: 15
             ColumnLayout { // Weeb policy
                 StyledText {
                     text: "Weeb"
                     color: Appearance.colors.colSubtext
                 }
-                ButtonGroup {
+                ConfigSelectionArray {
-                    id: weebPolicyBtnGroup
+                    currentValue: ConfigOptions.policies.weeb
-                    property int selectedPolicy: ConfigOptions.policies.weeb
+                    configOptionName: "policies.weeb"
-                    spacing: 2
+                    onSelected: (newValue) => {
-                    SelectionGroupButton {
+                        ConfigLoader.setConfigValueAndSave("policies.weeb", newValue);
-                        property int value: 0
-                        leftmost: true
-                        buttonText: "No"
-                        toggled: (weebPolicyBtnGroup.selectedPolicy === value)
-                        onClicked: {
-                            ConfigLoader.setConfigValueAndSave("policies.weeb", value);
-                        }
-                    }
-                    SelectionGroupButton {
-                        property int value: 1
-                        buttonText: "Yes"
-                        toggled: (weebPolicyBtnGroup.selectedPolicy === value)
-                        onClicked: {
-                            ConfigLoader.setConfigValueAndSave("policies.weeb", value);
-                        }
-                    }
-                    SelectionGroupButton {
-                        property int value: 2
-                        rightmost: true
-                        buttonText: "Closet"
-                        toggled: (weebPolicyBtnGroup.selectedPolicy === value)
-                        onClicked: {
-                            ConfigLoader.setConfigValueAndSave("policies.weeb", value);
-                        }
-                        StyledToolTip {
-                            content: "The Anime tab on the left sidebar would still\nbe available, but its tab button won't show"
-                        }
                     }
+                    options: [
+                        { displayName: "No", value: 0 },
+                        { displayName: "Yes", value: 1 },
+                        { displayName: "Closet", value: 2 }
+                    ]
                 }
             }
+
             ColumnLayout { // AI policy
                 StyledText {
                     text: "AI"
                     color: Appearance.colors.colSubtext
                 }
-                ButtonGroup {
+                ConfigSelectionArray {
-                    id: aiPolicyBtnGroup
+                    currentValue: ConfigOptions.policies.ai
-                    property int selectedPolicy: ConfigOptions.policies.ai
+                    configOptionName: "policies.ai"
-                    spacing: 2
+                    onSelected: (newValue) => {
-                    SelectionGroupButton {
+                        ConfigLoader.setConfigValueAndSave("policies.ai", newValue);
-                        property int value: 0
-                        leftmost: true
-                        buttonText: "No"
-                        toggled: (aiPolicyBtnGroup.selectedPolicy === value)
-                        onClicked: {
-                            ConfigLoader.setConfigValueAndSave("policies.ai", value);
-                        }
-                    }
-                    SelectionGroupButton {
-                        property int value: 1
-                        buttonText: "Yes"
-                        toggled: (aiPolicyBtnGroup.selectedPolicy === value)
-                        onClicked: {
-                            ConfigLoader.setConfigValueAndSave("policies.ai", value);
-                        }
-                    }
-                    SelectionGroupButton {
-                        property int value: 2
-                        rightmost: true
-                        buttonText: "Local only"
-                        toggled: (aiPolicyBtnGroup.selectedPolicy === value)
-                        onClicked: {
-                            ConfigLoader.setConfigValueAndSave("policies.ai", value);
-                        }
                     }
+                    options: [
+                        { displayName: "No", value: 0 },
+                        { displayName: "Yes", value: 1 },
+                        { displayName: "Local only", value: 2 }
+                    ]
                 }
             }
         }
+
+
     }
 }

.config/quickshell/modules/settings/Style.qml

@@ -46,47 +46,24 @@ ContentPage {
             text: "Material palette"
             color: Appearance.colors.colSubtext
         }
-        Flow {
+
-            id: paletteFlow
+        ConfigSelectionArray {
-            Layout.fillWidth: true
+            currentValue: ConfigOptions.appearance.palette.type
-            spacing: 2
+            configOptionName: "appearance.palette.type"
-            property list<var> palettes: [
+            onSelected: (newValue) => {
+                ConfigLoader.setConfigValueAndSave("appearance.palette.type", newValue);
+            }
+            options: [
                 {"value": "auto", "displayName": "Auto"},
                 {"value": "scheme-content", "displayName": "Content"},
                 {"value": "scheme-expressive", "displayName": "Expressive"},
-                {"value": "scheme-fidelity", "displayName": "Fidelty"},
+                {"value": "scheme-fidelity", "displayName": "Fidelity"},
                 {"value": "scheme-fruit-salad", "displayName": "Fruit Salad"},
                 {"value": "scheme-monochrome", "displayName": "Monochrome"},
                 {"value": "scheme-neutral", "displayName": "Neutral"},
                 {"value": "scheme-rainbow", "displayName": "Rainbow"},
-                {"value": "scheme-tonal-spot", "displayName": "Tonal Spot"},
+                {"value": "scheme-tonal-spot", "displayName": "Tonal Spot"}
             ]
-
-            Repeater {
-                model: paletteFlow.palettes
-                delegate: SelectionGroupButton {
-                    id: paletteButton
-                    required property var modelData
-                    required property int index
-                    onYChanged: {
-                        if (index === 0) {
-                            paletteButton.leftmost = true
-                        } else {
-                            var prev = paletteFlow.children[index - 1]
-                            var thisIsOnNewLine = prev && prev.y !== paletteButton.y
-                            paletteButton.leftmost = thisIsOnNewLine
-                            prev.rightmost = thisIsOnNewLine
-                        }
-                    }
-                    leftmost: index === 0
-                    rightmost: index === paletteFlow.palettes.length - 1
-                    buttonText: modelData.displayName;
-                    toggled: ConfigOptions.appearance.palette.type === modelData.value
-                    onClicked: {
-                        ConfigLoader.setConfigValueAndSave("appearance.palette.type", modelData.value);
-                    }
-                }
-            }
         }
 
         // Wallpaper selection
@@ -214,9 +191,8 @@ ContentPage {
         title: "Shell windows"
         spacing: 4
 
-        RowLayout {
+        ConfigRow {
-            spacing: 10
+            uniform: true
-            uniformCellSizes: true
             ConfigSwitch {
                 text: "Title bar"
                 checked: ConfigOptions.windows.showTitlebar

.config/quickshell/welcome.qml

@@ -201,84 +201,42 @@ ApplicationWindow {
                 ContentSection {
                     title: "Policies"
 
-                    RowLayout {
+                    ConfigRow {
-                        Layout.alignment: Qt.AlignHCenter
-                        spacing: 15
                         ColumnLayout { // Weeb policy
                             StyledText {
                                 text: "Weeb"
                                 color: Appearance.colors.colSubtext
                             }
-                            ButtonGroup {
+                            ConfigSelectionArray {
-                                id: weebPolicyBtnGroup
+                                currentValue: ConfigOptions.policies.weeb
-                                property int selectedPolicy: ConfigOptions.policies.weeb
+                                configOptionName: "policies.weeb"
-                                spacing: 2
+                                onSelected: (newValue) => {
-                                SelectionGroupButton {
+                                    ConfigLoader.setConfigValueAndSave("policies.weeb", newValue);
-                                    property int value: 0
-                                    leftmost: true
-                                    buttonText: "No"
-                                    toggled: (weebPolicyBtnGroup.selectedPolicy === value)
-                                    onClicked: {
-                                        ConfigLoader.setConfigValueAndSave("policies.weeb", value);
-                                    }
-                                }
-                                SelectionGroupButton {
-                                    property int value: 1
-                                    buttonText: "Yes"
-                                    toggled: (weebPolicyBtnGroup.selectedPolicy === value)
-                                    onClicked: {
-                                        ConfigLoader.setConfigValueAndSave("policies.weeb", value);
-                                    }
-                                }
-                                SelectionGroupButton {
-                                    property int value: 2
-                                    rightmost: true
-                                    buttonText: "Closet"
-                                    toggled: (weebPolicyBtnGroup.selectedPolicy === value)
-                                    onClicked: {
-                                        ConfigLoader.setConfigValueAndSave("policies.weeb", value);
-                                    }
-                                    StyledToolTip {
-                                        content: "The Anime tab on the left sidebar would still\nbe available, but its tab button won't show"
-                                    }
                                 }
+                                options: [
+                                    { displayName: "No", value: 0 },
+                                    { displayName: "Yes", value: 1 },
+                                    { displayName: "Closet", value: 2 }
+                                ]
                             }
                         }
+
                         ColumnLayout { // AI policy
                             StyledText {
                                 text: "AI"
                                 color: Appearance.colors.colSubtext
                             }
-                            ButtonGroup {
+                            ConfigSelectionArray {
-                                id: aiPolicyBtnGroup
+                                currentValue: ConfigOptions.policies.ai
-                                property int selectedPolicy: ConfigOptions.policies.ai
+                                configOptionName: "policies.ai"
-                                spacing: 2
+                                onSelected: (newValue) => {
-                                SelectionGroupButton {
+                                    ConfigLoader.setConfigValueAndSave("policies.ai", newValue);
-                                    property int value: 0
-                                    leftmost: true
-                                    buttonText: "No"
-                                    toggled: (aiPolicyBtnGroup.selectedPolicy === value)
-                                    onClicked: {
-                                        ConfigLoader.setConfigValueAndSave("policies.ai", value);
-                                    }
-                                }
-                                SelectionGroupButton {
-                                    property int value: 1
-                                    buttonText: "Yes"
-                                    toggled: (aiPolicyBtnGroup.selectedPolicy === value)
-                                    onClicked: {
-                                        ConfigLoader.setConfigValueAndSave("policies.ai", value);
-                                    }
-                                }
-                                SelectionGroupButton {
-                                    property int value: 2
-                                    rightmost: true
-                                    buttonText: "Local only"
-                                    toggled: (aiPolicyBtnGroup.selectedPolicy === value)
-                                    onClicked: {
-                                        ConfigLoader.setConfigValueAndSave("policies.ai", value);
-                                    }
                                 }
+                                options: [
+                                    { displayName: "No", value: 0 },
+                                    { displayName: "Yes", value: 1 },
+                                    { displayName: "Local only", value: 2 }
+                                ]
                             }
                         }
                     }