control center: open relevant tab based on click area, configurable

icons

Modules/TopBar/ControlCenterButton.qml

@@ -10,10 +10,16 @@ Rectangle {
     property string section: "right"
     property var popupTarget: null
     property var parentScreen: null
+    property var widgetData: null
+
+    property bool showNetworkIcon: SettingsData.controlCenterShowNetworkIcon
+    property bool showBluetoothIcon: SettingsData.controlCenterShowBluetoothIcon
+    property bool showAudioIcon: SettingsData.controlCenterShowAudioIcon
 
     signal clicked
+    signal iconClicked(string tab)
 
-    width: Math.max(80, controlIndicators.implicitWidth + Theme.spacingS * 2)
+    width: controlIndicators.implicitWidth + Theme.spacingS * 2
     height: 30
     radius: Theme.cornerRadius
     color: {
@@ -30,6 +36,7 @@ Rectangle {
         spacing: Theme.spacingXS
 
         DankIcon {
+            id: networkIcon
             name: {
                 if (NetworkService.networkStatus === "ethernet")
                     return "lan"
@@ -39,15 +46,16 @@ Rectangle {
             color: NetworkService.networkStatus
                    !== "disconnected" ? Theme.primary : Theme.outlineButton
             anchors.verticalCenter: parent.verticalCenter
-            visible: true
+            visible: root.showNetworkIcon
         }
 
         DankIcon {
+            id: bluetoothIcon
             name: "bluetooth"
             size: Theme.iconSize - 8
             color: BluetoothService.enabled ? Theme.primary : Theme.outlineButton
             anchors.verticalCenter: parent.verticalCenter
-            visible: BluetoothService.available && BluetoothService.enabled
+            visible: root.showBluetoothIcon && BluetoothService.available && BluetoothService.enabled
         }
 
         Rectangle {
@@ -55,6 +63,7 @@ Rectangle {
             height: audioIcon.implicitHeight + 4
             color: "transparent"
             anchors.verticalCenter: parent.verticalCenter
+            visible: root.showAudioIcon
 
             DankIcon {
                 id: audioIcon
@@ -72,9 +81,7 @@ Rectangle {
                     return "volume_up"
                 }
                 size: Theme.iconSize - 8
-                color: audioWheelArea.containsMouse
-                       || controlCenterArea.containsMouse
-                       || root.isActive ? Theme.primary : Theme.surfaceText
+                color: Theme.surfaceText
                 anchors.centerIn: parent
             }
 
@@ -98,6 +105,7 @@ Rectangle {
                     if (AudioService.sink && AudioService.sink.audio) {
                         AudioService.sink.audio.muted = false
                         AudioService.sink.audio.volume = newVolume / 100
+                        AudioService.volumeChanged()
                     }
                     wheelEvent.accepted = true
                 }
@@ -111,6 +119,15 @@ Rectangle {
             anchors.verticalCenter: parent.verticalCenter
             visible: false // TODO: Add mic detection
         }
+
+        // Fallback settings icon when all other icons are hidden
+        DankIcon {
+            name: "settings"
+            size: Theme.iconSize - 8
+            color: controlCenterArea.containsMouse || root.isActive ? Theme.primary : Theme.surfaceText
+            anchors.verticalCenter: parent.verticalCenter
+            visible: !root.showNetworkIcon && !root.showBluetoothIcon && !root.showAudioIcon
+        }
     }
 
     MouseArea {
@@ -129,7 +146,46 @@ Rectangle {
                             relativeX, Theme.barHeight + Theme.spacingXS,
                             width, section, currentScreen)
             }
-            root.clicked()
+
+            // Calculate which zone was clicked based on mouse position relative to controlIndicators
+            var indicatorsX = controlIndicators.x
+            var relativeX = mouseX - indicatorsX
+            
+            var iconSpacing = Theme.spacingXS
+            var iconSize = Theme.iconSize - 8
+            var networkWidth = networkIcon.visible ? iconSize : 0
+            var bluetoothWidth = bluetoothIcon.visible ? iconSize : 0
+            var audioWidth = audioIcon.parent.visible ? (iconSize + 4) : 0
+            
+            var currentX = 0
+            var clickedZone = ""
+            
+            // Network zone
+            if (networkIcon.visible && relativeX >= currentX && relativeX < currentX + networkWidth) {
+                clickedZone = "network"
+            }
+            if (networkIcon.visible) {
+                currentX += networkWidth + iconSpacing
+            }
+            
+            // Bluetooth zone  
+            if (bluetoothIcon.visible && relativeX >= currentX && relativeX < currentX + bluetoothWidth) {
+                clickedZone = "bluetooth"
+            }
+            if (bluetoothIcon.visible) {
+                currentX += bluetoothWidth + iconSpacing
+            }
+            
+            // Audio zone
+            if (audioIcon.parent.visible && relativeX >= currentX && relativeX < currentX + audioWidth) {
+                clickedZone = "audio"
+            }
+            
+            if (clickedZone !== "") {
+                root.iconClicked(clickedZone)
+            } else {
+                root.clicked()
+            }
         }
     }