QuickSettings: editable widgets/button section in the ControlCenter

Modules/ControlCenter/Cards/TopCard.qml

@@ -4,9 +4,9 @@ import QtQuick.Layouts
 import Quickshell
 import Quickshell.Io
 import Quickshell.Widgets
-import Quickshell.Services.UPower
 import qs.Modules.Settings
 import qs.Modules.ControlCenter
+import qs.Modules.ControlCenter.Extras
 import qs.Commons
 import qs.Services
 import qs.Widgets
@@ -17,7 +17,6 @@ NBox {
 
   property string uptimeText: "--"
   property real spacing: Style.marginS * scaling
-  readonly property bool hasPP: PowerProfileService.available
 
   ColumnLayout {
     anchors.fill: parent
@@ -97,205 +96,34 @@ NBox {
       }
     }
 
-    RowLayout {
-      id: utilitiesRow
-      Layout.alignment: Qt.AlignVCenter
+    NDivider {
+      Layout.fillWidth: true
       Layout.topMargin: Style.marginM * scaling
       Layout.bottomMargin: Style.marginM * scaling
+    }
+
+    GridLayout {
+      id: grid
       Layout.fillWidth: true
+      columns: 2
+      columnSpacing: Style.marginL * scaling
+      rowSpacing: Style.marginM * scaling
 
-      // Left group - Media & Display
-      Rectangle {
-        color: Color.mSurface
-        radius: Style.radiusM * scaling
-        Layout.preferredHeight: Style.baseWidgetSize * 1.2 * scaling
-        Layout.preferredWidth: childrenRect.width + (Style.marginS * scaling * 2)
-
-        RowLayout {
-          anchors.centerIn: parent
-          spacing: Style.marginM * scaling
-
-          // Screen Recorder
-          NIconButton {
-            baseSize: Style.baseWidgetSize * 0.9
-            icon: "camera-video"
-            visible: ProgramCheckerService.gpuScreenRecorderAvailable
-            tooltipText: ScreenRecorderService.isRecording ? I18n.tr("tooltips.stop-screen-recording") : I18n.tr("tooltips.start-screen-recording")
-            colorBg: ScreenRecorderService.isRecording ? Color.mPrimary : Color.mSurfaceVariant
-            colorFg: ScreenRecorderService.isRecording ? Color.mOnPrimary : Color.mPrimary
-            onClicked: {
-              ScreenRecorderService.toggleRecording()
-              if (!ScreenRecorderService.isRecording) {
-                var panel = PanelService.getPanel("controlCenterPanel")
-                panel?.close()
-              }
-            }
-          }
-
-          // Wallpaper
-          NIconButton {
-            baseSize: Style.baseWidgetSize * 0.9
-            visible: Settings.data.wallpaper.enabled
-            icon: "wallpaper-selector"
-            tooltipText: I18n.tr("tooltips.wallpaper-selector")
-            onClicked: PanelService.getPanel("wallpaperPanel")?.toggle(this)
-            onRightClicked: WallpaperService.setRandomWallpaper()
-          }
-
-          // Night Light
-          NIconButton {
-            baseSize: Style.baseWidgetSize * 0.9
-            visible: ProgramCheckerService.wlsunsetAvailable
-            colorBg: Settings.data.nightLight.forced ? Color.mPrimary : Color.transparent
-            colorFg: Settings.data.nightLight.forced ? Color.mOnPrimary : Color.mPrimary
-            icon: Settings.data.nightLight.enabled ? (Settings.data.nightLight.forced ? "nightlight-forced" : "nightlight-on") : "nightlight-off"
-            tooltipText: Settings.data.nightLight.enabled ? (Settings.data.nightLight.forced ? I18n.tr("tooltips.night-light-forced") : I18n.tr("tooltips.night-light-enabled")) : I18n.tr("tooltips.night-light-disabled")
-            onClicked: {
-              if (!Settings.data.nightLight.enabled) {
-                Settings.data.nightLight.enabled = true
-                Settings.data.nightLight.forced = false
-              } else if (Settings.data.nightLight.enabled && !Settings.data.nightLight.forced) {
-                Settings.data.nightLight.forced = true
-              } else {
-                Settings.data.nightLight.enabled = false
-                Settings.data.nightLight.forced = false
-              }
-            }
-
-            onRightClicked: {
-              var settingsPanel = PanelService.getPanel("settingsPanel")
-              settingsPanel.requestedTab = SettingsPanel.Tab.Display
-              settingsPanel.open()
-            }
-          }
-        }
-      }
-
-      // Spacer
-      Item {
-        Layout.fillWidth: true
-      }
-
-      // Center group - Network & Caffeine
-      Rectangle {
-        color: Color.mSurface
-        radius: Style.radiusM * scaling
-        Layout.preferredHeight: Style.baseWidgetSize * 1.2 * scaling
-        Layout.preferredWidth: childrenRect.width + (Style.marginS * scaling * 2)
-
-        RowLayout {
-          anchors.centerIn: parent
-          spacing: Style.marginM * scaling
-
-          // Wifi
-          NIconButton {
-            id: wifiButton
-            baseSize: Style.baseWidgetSize * 0.9
-            tooltipText: I18n.tr("tooltips.manage-wifi")
-            icon: {
-              try {
-                if (NetworkService.ethernetConnected) {
-                  return "ethernet"
-                }
-                let connected = false
-                let signalStrength = 0
-                for (const net in NetworkService.networks) {
-                  if (NetworkService.networks[net].connected) {
-                    connected = true
-                    signalStrength = NetworkService.networks[net].signal
-                    break
-                  }
-                }
-                return connected ? NetworkService.signalIcon(signalStrength) : "wifi-off"
-              } catch (error) {
-                Logger.error("Wi-Fi", "Error getting icon:", error)
-                return "signal_wifi_bad"
-              }
-            }
-            onClicked: PanelService.getPanel("wifiPanel")?.toggle(this)
-            onRightClicked: PanelService.getPanel("wifiPanel")?.toggle(this)
-          }
-
-          // Bluetooth
-          NIconButton {
-            baseSize: Style.baseWidgetSize * 0.9
-            tooltipText: I18n.tr("tooltips.bluetooth-devices")
-            icon: BluetoothService.enabled ? "bluetooth" : "bluetooth-off"
-            onClicked: PanelService.getPanel("bluetoothPanel")?.toggle(this)
-            onRightClicked: PanelService.getPanel("bluetoothPanel")?.toggle(this)
-          }
-
-          // Caffeine (Keep Awake)
-          NIconButton {
-            baseSize: Style.baseWidgetSize * 0.9
-            icon: IdleInhibitorService.isInhibited ? "keep-awake-on" : "keep-awake-off"
-            tooltipText: IdleInhibitorService.isInhibited ? I18n.tr("tooltips.disable-keep-awake") : I18n.tr("tooltips.enable-keep-awake")
-            colorBg: IdleInhibitorService.isInhibited ? Color.mPrimary : Color.mSurfaceVariant
-            colorFg: IdleInhibitorService.isInhibited ? Color.mOnPrimary : Color.mPrimary
-            onClicked: {
-              IdleInhibitorService.manualToggle()
-            }
-          }
-        }
-      }
-
-      // Spacer
-      Item {
-        Layout.fillWidth: true
-      }
-
-      // Right group - Power Profiles
-      Rectangle {
-        color: Color.mSurface
-        radius: Style.radiusM * scaling
-        Layout.preferredHeight: Style.baseWidgetSize * 1.2 * scaling
-        Layout.preferredWidth: childrenRect.width + (Style.marginS * scaling * 2)
-
-        RowLayout {
-          anchors.centerIn: parent
-          spacing: Style.marginM * scaling
-
-          // Performance
-          NIconButton {
-            baseSize: Style.baseWidgetSize * 0.9
-            icon: PowerProfileService.getIcon(PowerProfile.Performance)
-            tooltipText: I18n.tr("tooltips.set-power-profile", {
-                                   "profile": PowerProfileService.getName(PowerProfile.Performance)
-                                 })
-            enabled: hasPP
-            opacity: enabled ? Style.opacityFull : Style.opacityMedium
-            colorBg: (enabled && PowerProfileService.profile === PowerProfile.Performance) ? Color.mPrimary : Color.mSurfaceVariant
-            colorFg: (enabled && PowerProfileService.profile === PowerProfile.Performance) ? Color.mOnPrimary : Color.mPrimary
-            onClicked: PowerProfileService.setProfile(PowerProfile.Performance)
-          }
-
-          // Balanced
-          NIconButton {
-            baseSize: Style.baseWidgetSize * 0.9
-            icon: PowerProfileService.getIcon(PowerProfile.Balanced)
-            tooltipText: I18n.tr("tooltips.set-power-profile", {
-                                   "profile": PowerProfileService.getName(PowerProfile.Balanced)
-                                 })
-            enabled: hasPP
-            opacity: enabled ? Style.opacityFull : Style.opacityMedium
-            colorBg: (enabled && PowerProfileService.profile === PowerProfile.Balanced) ? Color.mPrimary : Color.mSurfaceVariant
-            colorFg: (enabled && PowerProfileService.profile === PowerProfile.Balanced) ? Color.mOnPrimary : Color.mPrimary
-            onClicked: PowerProfileService.setProfile(PowerProfile.Balanced)
-          }
-
-          // Eco
-          NIconButton {
-            baseSize: Style.baseWidgetSize * 0.9
-            icon: PowerProfileService.getIcon(PowerProfile.PowerSaver)
-            tooltipText: I18n.tr("tooltips.set-power-profile", {
-                                   "profile": PowerProfileService.getName(PowerProfile.PowerSaver)
-                                 })
-            enabled: hasPP
-            opacity: enabled ? Style.opacityFull : Style.opacityMedium
-            colorBg: (enabled && PowerProfileService.profile === PowerProfile.PowerSaver) ? Color.mPrimary : Color.mSurfaceVariant
-            colorFg: (enabled && PowerProfileService.profile === PowerProfile.PowerSaver) ? Color.mOnPrimary : Color.mPrimary
-            onClicked: PowerProfileService.setProfile(PowerProfile.PowerSaver)
+      Repeater {
+        model: Settings.data.controlCenter.widgets.quickSettings
+        delegate: ControlCenterWidgetLoader {
+          Layout.fillWidth: true
+          Layout.preferredWidth: (grid.width - grid.columnSpacing) / 2
+          widgetId: (modelData.id !== undefined ? modelData.id : "")
+          widgetProps: {
+            "screen": root.modelData || null,
+            "scaling": ScalingService.getScreenScale(screen),
+            "widgetId": modelData.id,
+            "section": "quickSettings",
+            "sectionWidgetIndex": index,
+            "sectionWidgetsCount": Settings.data.controlCenter.widgets.quickSettings.length
           }
+          Layout.alignment: Qt.AlignVCenter
         }
       }
     }

Modules/ControlCenter/Cards/WeatherCard.qml

@@ -1,130 +0,0 @@
-import QtQuick
-import QtQuick.Layouts
-import Quickshell
-import qs.Commons
-import qs.Services
-import qs.Widgets
-
-// Weather overview card (placeholder data)
-NBox {
-  id: root
-
-  readonly property bool weatherReady: (LocationService.data.weather !== null)
-
-  ColumnLayout {
-    id: content
-    anchors.left: parent.left
-    anchors.right: parent.right
-    anchors.top: parent.top
-    anchors.margins: Style.marginM * scaling
-    spacing: Style.marginM * scaling
-    clip: true
-
-    RowLayout {
-      spacing: Style.marginS * scaling
-      NIcon {
-        Layout.alignment: Qt.AlignVCenter
-        icon: weatherReady ? LocationService.weatherSymbolFromCode(LocationService.data.weather.current_weather.weathercode) : ""
-        pointSize: Style.fontSizeXXXL * 1.75 * scaling
-        color: Color.mPrimary
-      }
-
-      ColumnLayout {
-        spacing: Style.marginXXS * scaling
-        NText {
-          text: {
-            // Ensure the name is not too long if one had to specify the country
-            const chunks = Settings.data.location.name.split(",")
-            return chunks[0]
-          }
-          pointSize: Style.fontSizeL * scaling
-          font.weight: Style.fontWeightBold
-        }
-
-        RowLayout {
-          NText {
-            visible: weatherReady
-            text: {
-              if (!weatherReady) {
-                return ""
-              }
-              var temp = LocationService.data.weather.current_weather.temperature
-              var suffix = "C"
-              if (Settings.data.location.useFahrenheit) {
-                temp = LocationService.celsiusToFahrenheit(temp)
-                var suffix = "F"
-              }
-              temp = Math.round(temp)
-              return `${temp}°${suffix}`
-            }
-            pointSize: Style.fontSizeXL * scaling
-            font.weight: Style.fontWeightBold
-          }
-
-          NText {
-            text: weatherReady ? `(${LocationService.data.weather.timezone_abbreviation})` : ""
-            pointSize: Style.fontSizeXS * scaling
-            color: Color.mOnSurfaceVariant
-            visible: LocationService.data.weather
-          }
-        }
-      }
-    }
-
-    NDivider {
-      visible: weatherReady
-      Layout.fillWidth: true
-    }
-
-    RowLayout {
-      visible: weatherReady
-      Layout.fillWidth: true
-      Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter
-      spacing: Style.marginL * scaling
-      Repeater {
-        model: weatherReady ? LocationService.data.weather.daily.time : []
-        delegate: ColumnLayout {
-          Layout.alignment: Qt.AlignHCenter
-          spacing: Style.marginS * scaling
-          NText {
-            text: {
-              var weatherDate = new Date(LocationService.data.weather.daily.time[index].replace(/-/g, "/"))
-              return Qt.locale().toString(weatherDate, "ddd")
-            }
-            color: Color.mOnSurface
-            Layout.alignment: Qt.AlignHCenter
-          }
-          NIcon {
-            Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter
-            icon: LocationService.weatherSymbolFromCode(LocationService.data.weather.daily.weathercode[index])
-            pointSize: Style.fontSizeXXL * 1.6 * scaling
-            color: Color.mPrimary
-          }
-          NText {
-            Layout.alignment: Qt.AlignHCenter
-            text: {
-              var max = LocationService.data.weather.daily.temperature_2m_max[index]
-              var min = LocationService.data.weather.daily.temperature_2m_min[index]
-              if (Settings.data.location.useFahrenheit) {
-                max = LocationService.celsiusToFahrenheit(max)
-                min = LocationService.celsiusToFahrenheit(min)
-              }
-              max = Math.round(max)
-              min = Math.round(min)
-              return `${max}°/${min}°`
-            }
-            pointSize: Style.fontSizeXS * scaling
-            color: Color.mOnSurfaceVariant
-          }
-        }
-      }
-    }
-
-    RowLayout {
-      visible: !weatherReady
-      Layout.fillWidth: true
-      Layout.alignment: Qt.AlignHCenter
-      NBusyIndicator {}
-    }
-  }
-}

Modules/ControlCenter/ControlCenterPanel.qml

@@ -10,8 +10,8 @@ import qs.Widgets
 NPanel {
   id: root
 
-  preferredWidth: 480
-  preferredHeight: 580
+  preferredWidth: 440
+  preferredHeight: 540
   panelKeyboardFocus: true
 
   // Positioning
@@ -38,13 +38,7 @@ NPanel {
       // Top Card: profile + utilities
       TopCard {
         Layout.fillWidth: true
-        Layout.preferredHeight: Math.max(124 * scaling)
-      }
-
-      // Weather
-      WeatherCard {
-        Layout.fillWidth: true
-        Layout.preferredHeight: Math.max(196 * scaling)
+        Layout.preferredHeight: Math.max(280 * scaling)
       }
 
       // Media + stats column
@@ -55,13 +49,13 @@ NPanel {
 
         // Media card
         MediaCard {
-          Layout.preferredWidth: Math.max(270 * scaling)
-          Layout.fillHeight: true
+          Layout.preferredWidth: Math.max(250 * scaling)
+          Layout.preferredHeight: Math.max(196 * scaling)
         }
 
         // System monitors combined in one card
         SystemMonitorCard {
-          Layout.preferredWidth: Math.max(160 * scaling)
+          Layout.preferredWidth: Math.max(140 * scaling)
           Layout.preferredHeight: Math.max(196 * scaling)
         }
       }

Modules/ControlCenter/Extras/ControlCenterWidgetLoader.qml

@@ -0,0 +1,74 @@
+import QtQuick
+import Quickshell
+import qs.Services
+import qs.Commons
+
+Item {
+  id: root
+
+  property string widgetId: ""
+  property var widgetProps: ({})
+  property string screenName: widgetProps && widgetProps.screen ? widgetProps.screen.name : ""
+  property string section: widgetProps && widgetProps.section || ""
+  property int sectionIndex: widgetProps && widgetProps.sectionWidgetIndex || 0
+
+  // Don't reserve space unless the loaded widget is really visible
+  implicitWidth: getImplicitSize(loader.item, "implicitWidth")
+  implicitHeight: getImplicitSize(loader.item, "implicitHeight")
+
+  Connections {
+    target: ScalingService
+    enabled: loader.item && (loader.item.screen !== undefined)
+    function onScaleChanged(aScreenName, scale) {
+      if (loader.item && loader.item.screen && aScreenName === screenName) {
+        loader.item['scaling'] = scale
+      }
+    }
+  }
+
+  function getImplicitSize(item, prop) {
+    return (item && item.visible) ? item[prop] : 0
+  }
+
+  Loader {
+    id: loader
+    anchors.fill: parent
+    active: widgetId !== ""
+    asynchronous: false
+    sourceComponent: {
+      if (!active) {
+        return null
+      }
+      return ControlCenterWidgetRegistry.getWidget(widgetId)
+    }
+
+    onLoaded: {
+      if (item && widgetProps) {
+        // Apply properties to loaded widget
+        for (var prop in widgetProps) {
+          if (item.hasOwnProperty(prop)) {
+            item[prop] = widgetProps[prop]
+          }
+        }
+      }
+
+      if (item.hasOwnProperty("onLoaded")) {
+        item.onLoaded()
+      }
+
+      //Logger.log("ControlCenterWidgetLoader", "Loaded", widgetId, "on screen", item.screen.name)
+    }
+
+    Component.onDestruction: {
+      // Explicitly clear references
+      widgetProps = null
+    }
+  }
+
+  // Error handling
+  onWidgetIdChanged: {
+    if (widgetId && !ControlCenterWidgetRegistry.hasWidget(widgetId)) {
+      Logger.warn("ControlCenterWidgetLoader", "Widget not found in registry:", widgetId)
+    }
+  }
+}

Modules/ControlCenter/Widgets/Bluetooth.qml

@@ -0,0 +1,17 @@
+import QtQuick.Layouts
+import Quickshell
+import qs.Commons
+import qs.Services
+import qs.Widgets
+
+NButton {
+  property ShellScreen screen
+  property real scaling: 1.0
+
+  outlined: true
+  text: "Bluetooth"
+  fontSize: Style.fontSizeS * scaling
+  fontWeight: Style.fontWeightRegular
+  icon: BluetoothService.enabled ? "bluetooth" : "bluetooth-off"
+  onClicked: PanelService.getPanel("bluetoothPanel")?.toggle(this)
+}

Modules/ControlCenter/Widgets/KeepAwake.qml

@@ -0,0 +1,17 @@
+import QtQuick.Layouts
+import Quickshell
+import qs.Commons
+import qs.Services
+import qs.Widgets
+
+NButton {
+  property ShellScreen screen
+  property real scaling: 1.0
+
+  outlined: true
+  text: IdleInhibitorService.isInhibited ? "Keep-awake" : "Keep-awake"
+  fontSize: Style.fontSizeS * scaling
+  fontWeight: Style.fontWeightRegular
+  icon: IdleInhibitorService.isInhibited ? "keep-awake-on" : "keep-awake-off"
+  onClicked: IdleInhibitorService.manualToggle()
+}

Modules/ControlCenter/Widgets/NightLight.qml

@@ -0,0 +1,33 @@
+import QtQuick.Layouts
+import Quickshell
+import qs.Commons
+import qs.Services
+import qs.Widgets
+
+NButton {
+  property ShellScreen screen
+  property real scaling: 1.0
+
+  outlined: true
+  enabled: ProgramCheckerService.wlsunsetAvailable
+  text: "Night Light"
+  fontSize: Style.fontSizeS * scaling
+  fontWeight: Style.fontWeightRegular
+  icon: Settings.data.nightLight.enabled ? (Settings.data.nightLight.forced ? "nightlight-forced" : "nightlight-on") : "nightlight-off"
+  onClicked: {
+    if (!Settings.data.nightLight.enabled) {
+      Settings.data.nightLight.enabled = true
+      Settings.data.nightLight.forced = false
+    } else if (Settings.data.nightLight.enabled && !Settings.data.nightLight.forced) {
+      Settings.data.nightLight.forced = true
+    } else {
+      Settings.data.nightLight.enabled = false
+      Settings.data.nightLight.forced = false
+    }
+  }
+  onRightClicked: {
+    var settingsPanel = PanelService.getPanel("settingsPanel")
+    settingsPanel.requestedTab = SettingsPanel.Tab.Display
+    settingsPanel.open()
+  }
+}

Modules/ControlCenter/Widgets/PowerProfile.qml

@@ -0,0 +1,23 @@
+import QtQuick.Layouts
+import Quickshell
+import Quickshell.Services.UPower
+import qs.Commons
+import qs.Services
+import qs.Widgets
+
+// Performance
+NButton {
+  property ShellScreen screen
+  property real scaling: 1.0
+  readonly property bool hasPP: PowerProfileService.available
+
+  enabled: hasPP
+  outlined: true
+  text: PowerProfileService.getName()
+  fontSize: Style.fontSizeS * scaling
+  fontWeight: Style.fontWeightRegular
+  icon: PowerProfileService.getIcon()
+  onClicked: {
+    PowerProfileService.cycleProfile()
+  }
+}

Modules/ControlCenter/Widgets/ScreenRecorder.qml

@@ -0,0 +1,24 @@
+import QtQuick.Layouts
+import Quickshell
+import qs.Commons
+import qs.Services
+import qs.Widgets
+
+NButton {
+
+  property ShellScreen screen
+  property real scaling: 1.0
+
+  enabled: ProgramCheckerService.gpuScreenRecorderAvailable
+  outlined: true
+  icon: "camera-video"
+  text: "Screen Recorder"
+  fontWeight: Style.fontWeightRegular
+  onClicked: {
+    ScreenRecorderService.toggleRecording()
+    if (!ScreenRecorderService.isRecording) {
+      var panel = PanelService.getPanel("controlCenterPanel")
+      panel?.close()
+    }
+  }
+}

Modules/ControlCenter/Widgets/WallpaperSelector.qml

@@ -0,0 +1,20 @@
+import QtQuick.Layouts
+import Quickshell
+import qs.Commons
+import qs.Services
+import qs.Widgets
+
+NButton {
+  property ShellScreen screen
+  property real scaling: 1.0
+
+  
+  enabled: Settings.data.wallpaper.enabled
+  outlined: true
+  icon: "wallpaper-selector"
+  text: "Wallpaper"
+  fontSize: Style.fontSizeS * scaling
+  fontWeight: Style.fontWeightRegular
+  onClicked: PanelService.getPanel("wallpaperPanel")?.toggle(this)
+  onRightClicked: WallpaperService.setRandomWallpaper()
+}

Modules/ControlCenter/Widgets/WiFi.qml

@@ -0,0 +1,42 @@
+import QtQuick.Layouts
+import Quickshell
+import qs.Commons
+import qs.Services
+import qs.Widgets
+
+NButton {
+  property ShellScreen screen
+  property real scaling: 1.0
+
+
+  outlined: true
+  icon: {
+    try {
+      if (NetworkService.ethernetConnected) {
+        return "ethernet"
+      }
+      let connected = false
+      let signalStrength = 0
+      for (const net in NetworkService.networks) {
+        if (NetworkService.networks[net].connected) {
+          connected = true
+          signalStrength = NetworkService.networks[net].signal
+          break
+        }
+      }
+      return connected ? NetworkService.signalIcon(signalStrength) : "wifi-off"
+    } catch (error) {
+      Logger.error("Wi-Fi", "Error getting icon:", error)
+      return "signal_wifi_bad"
+    }
+  }
+  text: {
+    if (NetworkService.ethernetConnected) {
+      return "Network"
+    }
+    return "Wi-Fi"
+  }
+  fontSize: Style.fontSizeS * scaling
+  fontWeight: Style.fontWeightRegular
+  onClicked: PanelService.getPanel("wifiPanel")?.toggle(this)
+}