controlcenter: refined connected button groups

2 files changed, 157 insertions, 152 deletions

diff --git a/modules/controlcenter/taskbar/ConnectedButtonGroup.qml b/modules/controlcenter/taskbar/ConnectedButtonGroup.qml
index 7999b70..83ff95e 100644
--- a/modules/controlcenter/taskbar/ConnectedButtonGroup.qml
+++ b/modules/controlcenter/taskbar/ConnectedButtonGroup.qml
@@ -12,9 +12,10 @@ StyledRect {
 
     property var options: [] // Array of {label: string, propertyName: string, onToggled: function}
     property var rootItem: null // The root item that contains the properties we want to bind to
+    property string title: "" // Optional title text
 
     Layout.fillWidth: true
-    implicitHeight: buttonRow.implicitHeight + Appearance.padding.large * 2
+    implicitHeight: layout.implicitHeight + Appearance.padding.large * 2
     radius: Appearance.rounding.normal
     color: Colours.layer(Colours.palette.m3surfaceContainer, 2)
     clip: true
@@ -23,115 +24,125 @@ StyledRect {
         Anim {}
     }
 
-    RowLayout {
-        id: buttonRow
-        anchors.left: parent.left
-        anchors.right: parent.right
-        anchors.verticalCenter: parent.verticalCenter
+    ColumnLayout {
+        id: layout
+
+        anchors.fill: parent
         anchors.margins: Appearance.padding.large
-        spacing: Appearance.spacing.small
+        spacing: Appearance.spacing.normal
 
-        Repeater {
-            id: repeater
-            model: root.options
+        StyledText {
+            visible: root.title !== ""
+            text: root.title
+            font.pointSize: Appearance.font.size.normal
+        }
 
-            delegate: TextButton {
-                id: button
-                required property int index
-                required property var modelData
+        RowLayout {
+            id: buttonRow
+            Layout.alignment: Qt.AlignHCenter
+            spacing: Appearance.spacing.small
 
-                Layout.fillWidth: true
-                text: modelData.label
-                
-                property bool isChecked: false
-                
-                // Initialize from root property
-                Component.onCompleted: {
-                    if (root.rootItem && modelData.propertyName) {
-                        isChecked = root.rootItem[modelData.propertyName];
-                    }
-                }
-                
-                checked: isChecked
-                toggle: false
-                type: TextButton.Tonal
+            Repeater {
+                id: repeater
+                model: root.options
 
-                // Listen for property changes on rootItem
-                Connections {
-                    target: root.rootItem
-                    enabled: root.rootItem !== null && modelData.propertyName !== undefined
+                delegate: TextButton {
+                    id: button
+                    required property int index
+                    required property var modelData
 
-                    function onShowAudioChanged() {
-                        if (modelData.propertyName === "showAudio") {
-                            button.isChecked = root.rootItem.showAudio;
+                    Layout.fillWidth: true
+                    text: modelData.label
+                    
+                    property bool isChecked: false
+                    
+                    // Initialize from root property
+                    Component.onCompleted: {
+                        if (root.rootItem && modelData.propertyName) {
+                            isChecked = root.rootItem[modelData.propertyName];
                         }
                     }
+                    
+                    checked: isChecked
+                    toggle: false
+                    type: TextButton.Tonal
+
+                    // Listen for property changes on rootItem
+                    Connections {
+                        target: root.rootItem
+                        enabled: root.rootItem !== null && modelData.propertyName !== undefined
 
-                    function onShowMicrophoneChanged() {
-                        if (modelData.propertyName === "showMicrophone") {
-                            button.isChecked = root.rootItem.showMicrophone;
+                        function onShowAudioChanged() {
+                            if (modelData.propertyName === "showAudio") {
+                                button.isChecked = root.rootItem.showAudio;
+                            }
                         }
-                    }
 
-                    function onShowKbLayoutChanged() {
-                        if (modelData.propertyName === "showKbLayout") {
-                            button.isChecked = root.rootItem.showKbLayout;
+                        function onShowMicrophoneChanged() {
+                            if (modelData.propertyName === "showMicrophone") {
+                                button.isChecked = root.rootItem.showMicrophone;
+                            }
                         }
-                    }
 
-                    function onShowNetworkChanged() {
-                        if (modelData.propertyName === "showNetwork") {
-                            button.isChecked = root.rootItem.showNetwork;
+                        function onShowKbLayoutChanged() {
+                            if (modelData.propertyName === "showKbLayout") {
+                                button.isChecked = root.rootItem.showKbLayout;
+                            }
                         }
-                    }
 
-                    function onShowBluetoothChanged() {
-                        if (modelData.propertyName === "showBluetooth") {
-                            button.isChecked = root.rootItem.showBluetooth;
+                        function onShowNetworkChanged() {
+                            if (modelData.propertyName === "showNetwork") {
+                                button.isChecked = root.rootItem.showNetwork;
+                            }
                         }
-                    }
 
-                    function onShowBatteryChanged() {
-                        if (modelData.propertyName === "showBattery") {
-                            button.isChecked = root.rootItem.showBattery;
+                        function onShowBluetoothChanged() {
+                            if (modelData.propertyName === "showBluetooth") {
+                                button.isChecked = root.rootItem.showBluetooth;
+                            }
                         }
-                    }
 
-                    function onShowLockStatusChanged() {
-                        if (modelData.propertyName === "showLockStatus") {
-                            button.isChecked = root.rootItem.showLockStatus;
+                        function onShowBatteryChanged() {
+                            if (modelData.propertyName === "showBattery") {
+                                button.isChecked = root.rootItem.showBattery;
+                            }
                         }
-                    }
-                }
 
+                        function onShowLockStatusChanged() {
+                            if (modelData.propertyName === "showLockStatus") {
+                                button.isChecked = root.rootItem.showLockStatus;
+                            }
+                        }
+                    }
 
-                // Match utilities Toggles radius styling
-                // Each button has full rounding (not connected) since they have spacing
-                radius: stateLayer.pressed ? Appearance.rounding.small / 2 : internalChecked ? Appearance.rounding.small : Appearance.rounding.normal
+                    // Match utilities Toggles radius styling
+                    // Each button has full rounding (not connected) since they have spacing
+                    radius: stateLayer.pressed ? Appearance.rounding.small / 2 : internalChecked ? Appearance.rounding.small : Appearance.rounding.normal
 
-                // Match utilities Toggles inactive color
-                inactiveColour: Colours.layer(Colours.palette.m3surfaceContainerHighest, 2)
-                
-                // Adjust width similar to utilities toggles
-                Layout.preferredWidth: implicitWidth + (stateLayer.pressed ? Appearance.padding.large : internalChecked ? Appearance.padding.smaller : 0)
+                    // Match utilities Toggles inactive color
+                    inactiveColour: Colours.layer(Colours.palette.m3surfaceContainerHighest, 2)
+                    
+                    // Adjust width similar to utilities toggles
+                    Layout.preferredWidth: implicitWidth + (stateLayer.pressed ? Appearance.padding.large : internalChecked ? Appearance.padding.smaller : 0)
 
-                onClicked: {
-                    if (modelData.onToggled) {
-                        modelData.onToggled(!checked);
+                    onClicked: {
+                        if (modelData.onToggled) {
+                            modelData.onToggled(!checked);
+                        }
                     }
-                }
 
-                Behavior on Layout.preferredWidth {
-                    Anim {
-                        duration: Appearance.anim.durations.expressiveFastSpatial
-                        easing.bezierCurve: Appearance.anim.curves.expressiveFastSpatial
+                    Behavior on Layout.preferredWidth {
+                        Anim {
+                            duration: Appearance.anim.durations.expressiveFastSpatial
+                            easing.bezierCurve: Appearance.anim.curves.expressiveFastSpatial
+                        }
                     }
-                }
 
-                Behavior on radius {
-                    Anim {
-                        duration: Appearance.anim.durations.expressiveFastSpatial
-                        easing.bezierCurve: Appearance.anim.curves.expressiveFastSpatial
+                    Behavior on radius {
+                        Anim {
+                            duration: Appearance.anim.durations.expressiveFastSpatial
+                            easing.bezierCurve: Appearance.anim.curves.expressiveFastSpatial
+                        }
                     }
                 }
             }
diff --git a/modules/controlcenter/taskbar/TaskbarPane.qml b/modules/controlcenter/taskbar/TaskbarPane.qml
index d7cc664..0ec27e5 100644
--- a/modules/controlcenter/taskbar/TaskbarPane.qml
+++ b/modules/controlcenter/taskbar/TaskbarPane.qml
@@ -164,7 +164,6 @@ Item {
                 readonly property bool allSectionsExpanded: 
                     clockSection.expanded &&
                     barBehaviorSection.expanded &&
-                    statusIconsSection.expanded &&
                     traySettingsSection.expanded &&
                     workspacesSection.expanded
 
@@ -189,13 +188,76 @@ Item {
                             const shouldExpand = !sidebarLayout.allSectionsExpanded;
                             clockSection.expanded = shouldExpand;
                             barBehaviorSection.expanded = shouldExpand;
-                            statusIconsSection.expanded = shouldExpand;
                             traySettingsSection.expanded = shouldExpand;
                             workspacesSection.expanded = shouldExpand;
                         }
                     }
                 }
 
+                ConnectedButtonGroup {
+                    rootItem: root
+                    title: qsTr("Status Icons")
+                    
+                    options: [
+                        {
+                            label: qsTr("Audio"),
+                            propertyName: "showAudio",
+                            onToggled: function(checked) {
+                                root.showAudio = checked;
+                                root.saveConfig();
+                            }
+                        },
+                        {
+                            label: qsTr("Mic"),
+                            propertyName: "showMicrophone",
+                            onToggled: function(checked) {
+                                root.showMicrophone = checked;
+                                root.saveConfig();
+                            }
+                        },
+                        {
+                            label: qsTr("KB"),
+                            propertyName: "showKbLayout",
+                            onToggled: function(checked) {
+                                root.showKbLayout = checked;
+                                root.saveConfig();
+                            }
+                        },
+                        {
+                            label: qsTr("Network"),
+                            propertyName: "showNetwork",
+                            onToggled: function(checked) {
+                                root.showNetwork = checked;
+                                root.saveConfig();
+                            }
+                        },
+                        {
+                            label: qsTr("BT"),
+                            propertyName: "showBluetooth",
+                            onToggled: function(checked) {
+                                root.showBluetooth = checked;
+                                root.saveConfig();
+                            }
+                        },
+                        {
+                            label: qsTr("Battery"),
+                            propertyName: "showBattery",
+                            onToggled: function(checked) {
+                                root.showBattery = checked;
+                                root.saveConfig();
+                            }
+                        },
+                        {
+                            label: qsTr("Lock"),
+                            propertyName: "showLockStatus",
+                            onToggled: function(checked) {
+                                root.showLockStatus = checked;
+                                root.saveConfig();
+                            }
+                        }
+                    ]
+                }
+
                 CollapsibleSection {
                     id: clockSection
                     title: qsTr("Clock")
@@ -333,74 +395,6 @@ Item {
                 }
 
                 CollapsibleSection {
-                    id: statusIconsSection
-                    title: qsTr("Status Icons")
-
-                    ConnectedButtonGroup {
-                        rootItem: root
-                        
-                        options: [
-                            {
-                                label: qsTr("Audio"),
-                                propertyName: "showAudio",
-                                onToggled: function(checked) {
-                                    root.showAudio = checked;
-                                    root.saveConfig();
-                                }
-                            },
-                            {
-                                label: qsTr("Mic"),
-                                propertyName: "showMicrophone",
-                                onToggled: function(checked) {
-                                    root.showMicrophone = checked;
-                                    root.saveConfig();
-                                }
-                            },
-                            {
-                                label: qsTr("KB"),
-                                propertyName: "showKbLayout",
-                                onToggled: function(checked) {
-                                    root.showKbLayout = checked;
-                                    root.saveConfig();
-                                }
-                            },
-                            {
-                                label: qsTr("Network"),
-                                propertyName: "showNetwork",
-                                onToggled: function(checked) {
-                                    root.showNetwork = checked;
-                                    root.saveConfig();
-                                }
-                            },
-                            {
-                                label: qsTr("BT"),
-                                propertyName: "showBluetooth",
-                                onToggled: function(checked) {
-                                    root.showBluetooth = checked;
-                                    root.saveConfig();
-                                }
-                            },
-                            {
-                                label: qsTr("Battery"),
-                                propertyName: "showBattery",
-                                onToggled: function(checked) {
-                                    root.showBattery = checked;
-                                    root.saveConfig();
-                                }
-                            },
-                            {
-                                label: qsTr("Lock"),
-                                propertyName: "showLockStatus",
-                                onToggled: function(checked) {
-                                    root.showLockStatus = checked;
-                                    root.saveConfig();
-                                }
-                            }
-                        ]
-                    }
-                }
-
-                CollapsibleSection {
                     id: traySettingsSection
                     title: qsTr("Tray Settings")