ControlCenter: toggle to hide/show volume sliders + getting ready for more modularity soon

Modules/ControlCenter/ControlCenterPanel.qml

@@ -10,9 +10,17 @@ import qs.Widgets
 NPanel {
   id: root
 
-  preferredWidth: Math.round(460 * Style.uiScaleRatio)
-  preferredHeight: (profileHeight + weatherHeight + mediaSysMonHeight + audioHeight + bottomHeight) + 6 * Style.marginL
   panelKeyboardFocus: true
+  preferredWidth: Math.round(460 * Style.uiScaleRatio)
+  preferredHeight: {
+    let height = profileHeight + weatherHeight + mediaSysMonHeight + utilsHeight
+    let count = 4
+    if (Settings.data.controlCenter.audioControlsEnabled) {
+      count++
+      height += audioHeight
+    }
+    return height + (count + 1) * Style.marginL
+  }
 
   // Positioning
   readonly property string controlCenterPosition: Settings.data.controlCenter.position
@@ -27,7 +35,7 @@ NPanel {
   readonly property int weatherHeight: Math.round(190 * Style.uiScaleRatio)
   readonly property int mediaSysMonHeight: Math.round(260 * Style.uiScaleRatio)
   readonly property int audioHeight: Math.round(120 * Style.uiScaleRatio)
-  readonly property int bottomHeight: Math.round(52 * Style.uiScaleRatio)
+  readonly property int utilsHeight: Math.round(52 * Style.uiScaleRatio)
 
   panelContent: Item {
     id: content
@@ -40,18 +48,47 @@ NPanel {
       width: parent.width - (Style.marginL * 2)
       spacing: Style.marginL
 
-      // Cards (consistent inter-card spacing via ColumnLayout spacing)
+      // Profile
       ProfileCard {
         Layout.fillWidth: true
         Layout.preferredHeight: profileHeight
       }
 
+      // Utils
+      RowLayout {
+        Layout.fillWidth: true
+        Layout.preferredHeight: utilsHeight
+        spacing: Style.marginL
+
+        // Power Profiles switcher
+        PowerProfilesCard {
+          Layout.fillWidth: true
+          Layout.fillHeight: true
+          spacing: Style.marginL
+        }
+
+        // Utilities buttons
+        UtilitiesCard {
+          Layout.fillWidth: true
+          Layout.fillHeight: true
+          spacing: Style.marginL
+        }
+      }
+
+      // Audio controls
+      AudioCard {
+        visible: Settings.data.controlCenter.audioControlsEnabled
+        Layout.fillWidth: true
+        Layout.preferredHeight: audioHeight
+      }
+
+      // Weather
       WeatherCard {
         Layout.fillWidth: true
         Layout.preferredHeight: weatherHeight
       }
 
-      // Middle section: media + stats column
+      // Media + SysMon
       RowLayout {
         Layout.fillWidth: true
         Layout.preferredHeight: mediaSysMonHeight
@@ -69,33 +106,6 @@ NPanel {
           Layout.fillHeight: true
         }
       }
-
-      // Audio card below media and system monitor
-      AudioCard {
-        Layout.fillWidth: true
-        Layout.preferredHeight: audioHeight
-      }
-
-      // Bottom actions (two grouped rows of round buttons)
-      RowLayout {
-        Layout.fillWidth: true
-        Layout.preferredHeight: bottomHeight
-        spacing: Style.marginL
-
-        // Power Profiles switcher
-        PowerProfilesCard {
-          Layout.fillWidth: true
-          Layout.fillHeight: true
-          spacing: Style.marginL
-        }
-
-        // Utilities buttons
-        UtilitiesCard {
-          Layout.fillWidth: true
-          Layout.fillHeight: true
-          spacing: Style.marginL
-        }
-      }
     }
   }
 }

Modules/ControlCenter/Widgets/Bluetooth.qml

@@ -7,9 +7,7 @@ import qs.Widgets
 NQuickSetting {
   property ShellScreen screen
 
-  text: I18n.tr("quickSettings.bluetooth.label.enabled")
   icon: BluetoothService.enabled ? "bluetooth" : "bluetooth-off"
   tooltipText: I18n.tr("quickSettings.bluetooth.tooltip.action")
-  style: Settings.data.controlCenter.quickSettingsStyle || "modern"
   onClicked: PanelService.getPanel("bluetoothPanel")?.toggle(this)
 }

Modules/ControlCenter/Widgets/KeepAwake.qml

@@ -7,11 +7,8 @@ import qs.Widgets
 NQuickSetting {
   property ShellScreen screen
 
-  text: I18n.tr("quickSettings.keepAwake.label.enabled")
   icon: IdleInhibitorService.isInhibited ? "keep-awake-on" : "keep-awake-off"
   hot: IdleInhibitorService.isInhibited
   tooltipText: I18n.tr("quickSettings.keepAwake.tooltip.action")
-  style: Settings.data.controlCenter.quickSettingsStyle || "modern"
-
   onClicked: IdleInhibitorService.manualToggle()
 }

Modules/ControlCenter/Widgets/NightLight.qml

@@ -8,10 +8,8 @@ NQuickSetting {
   property ShellScreen screen
 
   enabled: ProgramCheckerService.wlsunsetAvailable
-  text: I18n.tr("quickSettings.nightLight.label.enabled")
   icon: Settings.data.nightLight.enabled ? (Settings.data.nightLight.forced ? "nightlight-forced" : "nightlight-on") : "nightlight-off"
   hot: !Settings.data.nightLight.enabled || Settings.data.nightLight.forced
-  style: Settings.data.controlCenter.quickSettingsStyle || "modern"
   tooltipText: I18n.tr("quickSettings.nightLight.tooltip.action")
 
   onClicked: {

Modules/ControlCenter/Widgets/Notifications.qml

@@ -7,12 +7,9 @@ import qs.Widgets
 NQuickSetting {
   property ShellScreen screen
 
-  text: Settings.data.notifications.doNotDisturb ? I18n.tr("quickSettings.notifications.label.disabled") : I18n.tr("quickSettings.notifications.label.enabled")
   icon: Settings.data.notifications.doNotDisturb ? "bell-off" : "bell"
   hot: Settings.data.notifications.doNotDisturb
   tooltipText: I18n.tr("quickSettings.notifications.tooltip.action")
-  style: Settings.data.controlCenter.quickSettingsStyle || "modern"
-
   onClicked: PanelService.getPanel("notificationHistoryPanel")?.toggle(this)
   onRightClicked: Settings.data.notifications.doNotDisturb = !Settings.data.notifications.doNotDisturb
 }

Modules/ControlCenter/Widgets/PowerProfile.qml

@@ -12,12 +12,9 @@ NQuickSetting {
   readonly property bool hasPP: PowerProfileService.available
 
   enabled: hasPP
-  text: hasPP ? PowerProfileService.getName() : I18n.tr("quickSettings.powerProfile.label.unavailable")
   icon: PowerProfileService.getIcon()
   hot: !PowerProfileService.isDefault()
   tooltipText: I18n.tr("quickSettings.powerProfile.tooltip.action")
-  style: Settings.data.controlCenter.quickSettingsStyle || "modern"
-
   onClicked: {
     PowerProfileService.cycleProfile()
   }

Modules/ControlCenter/Widgets/ScreenRecorder.qml

@@ -9,10 +9,8 @@ NQuickSetting {
 
   enabled: ProgramCheckerService.gpuScreenRecorderAvailable
   icon: "camera-video"
-  text: ScreenRecorderService.isRecording ? I18n.tr("quickSettings.screenRecorder.label.recording") : I18n.tr("quickSettings.screenRecorder.label.stopped")
   hot: ScreenRecorderService.isRecording
   tooltipText: I18n.tr("quickSettings.screenRecorder.tooltip.action")
-  style: Settings.data.controlCenter.quickSettingsStyle || "modern"
 
   // Force hover state when recording to get hover colors
   property bool originalHovered: hovered

Modules/ControlCenter/Widgets/WallpaperSelector.qml

@@ -9,10 +9,7 @@ NQuickSetting {
 
   enabled: Settings.data.wallpaper.enabled
   icon: "wallpaper-selector"
-  text: I18n.tr("quickSettings.wallpaperSelector.label")
   tooltipText: I18n.tr("quickSettings.wallpaperSelector.tooltip.action")
-  style: Settings.data.controlCenter.quickSettingsStyle || "modern"
-
   onClicked: PanelService.getPanel("wallpaperPanel")?.toggle(this)
   onRightClicked: WallpaperService.setRandomWallpaper()
 }

Modules/ControlCenter/Widgets/WiFi.qml

@@ -28,21 +28,6 @@ NQuickSetting {
     }
   }
 
-  text: {
-    if (NetworkService.ethernetConnected) {
-      return I18n.tr("quickSettings.wifi.label.ethernet")
-    }
-    let connected = false
-    for (const net in NetworkService.networks) {
-      if (NetworkService.networks[net].connected) {
-        connected = true
-        break
-      }
-    }
-    return connected ? I18n.tr("quickSettings.wifi.label.wifi") : I18n.tr("quickSettings.wifi.label.disconnected")
-  }
-
-  style: Settings.data.controlCenter.quickSettingsStyle || "modern"
   tooltipText: I18n.tr("quickSettings.wifi.tooltip.action")
   onClicked: PanelService.getPanel("wifiPanel")?.toggle(this)
 }