refractor selection groups and config option row

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

@@ -46,47 +46,24 @@ ContentPage {
             text: "Material palette"
             color: Appearance.colors.colSubtext
         }
-        Flow {
-            id: paletteFlow
-            Layout.fillWidth: true
-            spacing: 2
-            property list<var> palettes: [
+
+        ConfigSelectionArray {
+            currentValue: ConfigOptions.appearance.palette.type
+            configOptionName: "appearance.palette.type"
+            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 {
-            spacing: 10
-            uniformCellSizes: true
+        ConfigRow {
+            uniform: true
             ConfigSwitch {
                 text: "Title bar"
                 checked: ConfigOptions.windows.showTitlebar