utilities: allow disabling and moving toggles + support for extra row (#1181)

* quickToggles: Allow disabling and moving toggles and support for extra row

* edit: README

* splitIndex logic edit

* fix

---------

Co-authored-by: 2 * r + 2 * t <61896496+soramanew@users.noreply.github.com>

1 files changed, 109 insertions, 52 deletions

diff --git a/modules/utilities/cards/Toggles.qml b/modules/utilities/cards/Toggles.qml
index dd4a687..d610586 100644
--- a/modules/utilities/cards/Toggles.qml
+++ b/modules/utilities/cards/Toggles.qml
@@ -14,6 +14,30 @@ StyledRect {
     required property var visibilities
     required property Item popouts
 
+    readonly property var quickToggles: {
+        const seenIds = new Set();
+
+        return Config.utilities.quickToggles.filter(item => {
+            if (!item.enabled)
+                return false;
+            
+            if (seenIds.has(item.id)) {
+                return false;
+            }
+
+            if (item.id === "vpn") {
+                return Config.utilities.vpn.provider.some(p => 
+                    typeof p === "object" ? (p.enabled === true) : false
+                );
+            }
+
+            seenIds.add(item.id);
+            return true;
+        });
+    }
+    readonly property int splitIndex: Math.ceil(quickToggles.length / 2)
+    readonly property bool needExtraRow: quickToggles.length > 6
+
     Layout.fillWidth: true
     implicitHeight: layout.implicitHeight + Appearance.padding.large * 2
 
@@ -32,64 +56,97 @@ StyledRect {
             font.pointSize: Appearance.font.size.normal
         }
 
-        RowLayout {
-            Layout.alignment: Qt.AlignHCenter
-            spacing: Appearance.spacing.small
-
-            Toggle {
-                icon: "wifi"
-                checked: Nmcli.wifiEnabled
-                onClicked: Nmcli.toggleWifi()
-            }
+        ToggleRow {
+            rowModel: root.needExtraRow ? root.quickToggles.slice(0, root.splitIndex) : root.quickToggles
+        }
 
-            Toggle {
-                icon: "bluetooth"
-                checked: Bluetooth.defaultAdapter?.enabled ?? false
-                onClicked: {
-                    const adapter = Bluetooth.defaultAdapter;
-                    if (adapter)
-                        adapter.enabled = !adapter.enabled;
-                }
-            }
+        ToggleRow {
+            visible: root.needExtraRow
+            rowModel: root.needExtraRow ? root.quickToggles.slice(root.splitIndex) : []
+        }
+    }
 
-            Toggle {
-                icon: "mic"
-                checked: !Audio.sourceMuted
-                onClicked: {
-                    const audio = Audio.source?.audio;
-                    if (audio)
-                        audio.muted = !audio.muted;
-                }
-            }
+    component ToggleRow: RowLayout {
+        property var rowModel: []
 
-            Toggle {
-                icon: "settings"
-                inactiveOnColour: Colours.palette.m3onSurfaceVariant
-                toggle: false
-                onClicked: {
-                    root.visibilities.utilities = false;
-                    root.popouts.detach("network");
-                }
-            }
+        Layout.fillWidth: true
+        spacing: Appearance.spacing.small
 
-            Toggle {
-                icon: "gamepad"
-                checked: GameMode.enabled
-                onClicked: GameMode.enabled = !GameMode.enabled
-            }
+        Repeater {
+            model: parent.rowModel
 
-            Toggle {
-                icon: "notifications_off"
-                checked: Notifs.dnd
-                onClicked: Notifs.dnd = !Notifs.dnd
-            }
+            delegate: DelegateChooser {
+                role: "id"
 
-            Toggle {
-                icon: "vpn_key"
-                checked: VPN.connected
-                enabled: !VPN.connecting
-                visible: Config.utilities.vpn.provider.some(p => typeof p === "object" ? (p.enabled === true) : false)
-                onClicked: VPN.toggle()
+                DelegateChoice {
+                    roleValue: "wifi"
+                    delegate: Toggle {
+                        icon: "wifi"
+                        checked: Nmcli.wifiEnabled
+                        onClicked: Nmcli.toggleWifi()
+                    }
+                }
+                DelegateChoice {
+                    roleValue: "bluetooth"
+                    delegate: Toggle {
+                        icon: "bluetooth"
+                        checked: Bluetooth.defaultAdapter?.enabled ?? false
+                        onClicked: {
+                            const adapter = Bluetooth.defaultAdapter;
+                            if (adapter)
+                                adapter.enabled = !adapter.enabled;
+                        }
+                    }
+                }
+                DelegateChoice {
+                    roleValue: "mic"
+                    delegate: Toggle {
+                        icon: "mic"
+                        checked: !Audio.sourceMuted
+                        onClicked: {
+                            const audio = Audio.source?.audio;
+                            if (audio)
+                                audio.muted = !audio.muted;
+                        }
+                    }
+                }
+                DelegateChoice {
+                    roleValue: "settings"
+                    delegate: Toggle {
+                        icon: "settings"
+                        inactiveOnColour: Colours.palette.m3onSurfaceVariant
+                        toggle: false
+                        onClicked: {
+                            root.visibilities.utilities = false;
+                            root.popouts.detach("network");
+                        }
+                    }
+                }
+                DelegateChoice {
+                    roleValue: "gameMode"
+                    delegate: Toggle {
+                        icon: "gamepad"
+                        checked: GameMode.enabled
+                        onClicked: GameMode.enabled = !GameMode.enabled
+                    }
+                }
+                DelegateChoice {
+                    roleValue: "dnd"
+                    delegate: Toggle {
+                        icon: "notifications_off"
+                        checked: Notifs.dnd
+                        onClicked: Notifs.dnd = !Notifs.dnd
+                    }
+                }
+                DelegateChoice {
+                    roleValue: "vpn"
+                    delegate: Toggle {
+                        icon: "vpn_key"
+                        checked: VPN.connected
+                        enabled: !VPN.connecting
+                        onClicked: VPN.toggle()
+                    }
+                }
             }
         }
     }