Bar widgets: modular loading refactoring via BarWidgetRegistry+NWidgetLoader

- Hot reload is working again.
- Should also be more memory efficient on multi monitors.

Commons/WidgetLoader.qml

@@ -1,88 +0,0 @@
-import QtQuick
-import qs.Commons
-
-QtObject {
-  id: root
-
-  // Signal emitted when widget loading status changes
-  signal widgetLoaded(string widgetName)
-  signal widgetFailed(string widgetName, string error)
-  signal loadingComplete(int total, int loaded, int failed)
-
-  // Properties to track loading status
-  property int totalWidgets: 0
-  property int loadedWidgets: 0
-  property int failedWidgets: 0
-
-  // Auto-discover widget components
-  function getWidgetComponent(widgetName) {
-    if (!widgetName || widgetName.trim() === "") {
-      return null
-    }
-
-    const widgetPath = `../Modules/Bar/Widgets/${widgetName}.qml`
-
-    // Try to load the widget directly from file
-    const component = Qt.createComponent(widgetPath)
-    if (component.status === Component.Ready) {
-      return component
-    }
-
-    const errorMsg = `Failed to load ${widgetName}.qml widget, status: ${component.status}, error: ${component.errorString(
-                     )}`
-    Logger.error("WidgetLoader", errorMsg)
-    return null
-  }
-
-  // Initialize loading tracking
-  function initializeLoading(widgetList) {
-    totalWidgets = widgetList.length
-    loadedWidgets = 0
-    failedWidgets = 0
-  }
-
-  // Track widget loading success
-  function onWidgetLoaded(widgetName) {
-    loadedWidgets++
-    widgetLoaded(widgetName)
-
-    if (loadedWidgets + failedWidgets === totalWidgets) {
-      Logger.log("WidgetLoader", `Loaded ${loadedWidgets} widgets`)
-      loadingComplete(totalWidgets, loadedWidgets, failedWidgets)
-    }
-  }
-
-  // Track widget loading failure
-  function onWidgetFailed(widgetName, error) {
-    failedWidgets++
-    widgetFailed(widgetName, error)
-
-    if (loadedWidgets + failedWidgets === totalWidgets) {
-      loadingComplete(totalWidgets, loadedWidgets, failedWidgets)
-    }
-  }
-
-  // This is where you should add your Modules/Bar/Widgets/
-  // so it gets registered in the BarTab
-  function discoverAvailableWidgets() {
-    const widgetFiles = ["ActiveWindow", "ArchUpdater", "Battery", "Bluetooth", "Brightness", "Clock", "KeyboardLayout", "MediaMini", "NotificationHistory", "PowerProfile", "ScreenRecorderIndicator", "SidePanelToggle", "SystemMonitor", "Tray", "Volume", "WiFi", "Workspace"]
-
-    const availableWidgets = []
-
-    widgetFiles.forEach(widgetName => {
-                          // Test if the widget can be loaded
-                          const component = getWidgetComponent(widgetName)
-                          if (component) {
-                            availableWidgets.push({
-                                                    "key": widgetName,
-                                                    "name": widgetName
-                                                  })
-                          }
-                        })
-
-    // Sort alphabetically
-    availableWidgets.sort((a, b) => a.name.localeCompare(b.name))
-
-    return availableWidgets
-  }
-}

Modules/Bar/Bar.qml

@@ -48,6 +48,7 @@ Variants {
         layer.enabled: true
       }
 
+      // ------------------------------
       // Left Section - Dynamic Widgets
       Row {
         id: leftSection
@@ -61,30 +62,19 @@ Variants {
         Repeater {
           model: Settings.data.bar.widgets.left
           delegate: Loader {
-            id: leftWidgetLoader
-            sourceComponent: widgetLoader.getWidgetComponent(modelData)
             active: true
-            visible: {
+            sourceComponent: NWidgetLoader {
-              if (modelData === "WiFi" && !Settings.data.network.wifiEnabled)
+              widgetName: modelData
-                return false
+              widgetProps: {
-              if (modelData === "Bluetooth" && !Settings.data.network.bluetoothEnabled)
+                "screen": screen
-                return false
-              if (modelData === "Battery" && !shouldShowBattery())
-                return false
-              return true
-            }
-            anchors.verticalCenter: parent.verticalCenter
-            onStatusChanged: {
-              if (status === Loader.Error) {
-                widgetLoader.onWidgetFailed(modelData, "Loader error")
-              } else if (status === Loader.Ready) {
-                widgetLoader.onWidgetLoaded(modelData)
               }
             }
+            anchors.verticalCenter: parent.verticalCenter
           }
         }
       }
 
+      // ------------------------------
       // Center Section - Dynamic Widgets
       Row {
         id: centerSection
@@ -97,30 +87,19 @@ Variants {
         Repeater {
           model: Settings.data.bar.widgets.center
           delegate: Loader {
-            id: centerWidgetLoader
-            sourceComponent: widgetLoader.getWidgetComponent(modelData)
             active: true
-            visible: {
+            sourceComponent: NWidgetLoader {
-              if (modelData === "WiFi" && !Settings.data.network.wifiEnabled)
+              widgetName: modelData
-                return false
+              widgetProps: {
-              if (modelData === "Bluetooth" && !Settings.data.network.bluetoothEnabled)
+                "screen": screen
-                return false
-              if (modelData === "Battery" && !shouldShowBattery())
-                return false
-              return true
-            }
-            anchors.verticalCenter: parent.verticalCenter
-            onStatusChanged: {
-              if (status === Loader.Error) {
-                widgetLoader.onWidgetFailed(modelData, "Loader error")
-              } else if (status === Loader.Ready) {
-                widgetLoader.onWidgetLoaded(modelData)
               }
             }
+            anchors.verticalCenter: parent.verticalCenter
           }
         }
       }
 
+      // ------------------------------
       // Right Section - Dynamic Widgets
       Row {
         id: rightSection
@@ -134,49 +113,17 @@ Variants {
         Repeater {
           model: Settings.data.bar.widgets.right
           delegate: Loader {
-            id: rightWidgetLoader
-            sourceComponent: widgetLoader.getWidgetComponent(modelData)
             active: true
-            visible: {
+            sourceComponent: NWidgetLoader {
-              if (modelData === "WiFi" && !Settings.data.network.wifiEnabled)
+              widgetName: modelData
-                return false
+              widgetProps: {
-              if (modelData === "Bluetooth" && !Settings.data.network.bluetoothEnabled)
+                "screen": screen
-                return false
-              return true
-            }
-            anchors.verticalCenter: parent.verticalCenter
-            onStatusChanged: {
-              if (status === Loader.Error) {
-                widgetLoader.onWidgetFailed(modelData, "Loader error")
-              } else if (status === Loader.Ready) {
-                widgetLoader.onWidgetLoaded(modelData)
               }
             }
+            anchors.verticalCenter: parent.verticalCenter
           }
         }
       }
     }
-
-    // Helper function to check if battery widget should be visible (same logic as Battery.qml)
-    function shouldShowBattery() {
-      // For now, always show battery widget and let it handle its own visibility
-      // The Battery widget has its own testMode and visibility logic
-      return true
-    }
-
-    // Widget loader instance
-    WidgetLoader {
-      id: widgetLoader
-
-      onWidgetFailed: function (widgetName, error) {
-        Logger.error("Bar", `Widget failed: ${widgetName} - ${error}`)
-      }
-    }
-
-    // Initialize widget loading tracking
-    Component.onCompleted: {
-      const allWidgets = [...Settings.data.bar.widgets.left, ...Settings.data.bar.widgets.center, ...Settings.data.bar.widgets.right]
-      widgetLoader.initializeLoading(allWidgets)
-    }
   }
 }

Modules/Bar/Widgets/ActiveWindow.qml

@@ -9,13 +9,16 @@ import qs.Widgets
 
 Row {
   id: root
+
+  property ShellScreen screen
+  property real scaling: ScalingService.scale(screen)
+  property bool showingFullTitle: false
+  property int lastWindowIndex: -1
+
   anchors.verticalCenter: parent.verticalCenter
   spacing: Style.marginS * scaling
   visible: getTitle() !== ""
 
-  property bool showingFullTitle: false
-  property int lastWindowIndex: -1
-
   // Timer to hide full title after window switch
   Timer {
     id: fullTitleTimer

Modules/Bar/Widgets/ArchUpdater.qml

@@ -1,16 +1,18 @@
-import qs.Commons
-import qs.Services
-import qs.Widgets
 import QtQuick
 import QtQuick.Controls
 import QtQuick.Layouts
+import Quickshell
+import qs.Commons
+import qs.Services
+import qs.Widgets
 
 NIconButton {
   id: root
+
+  property ShellScreen screen
+  property real scaling: ScalingService.scale(screen)
+
   sizeMultiplier: 0.8
-
-  readonly property real scaling: ScalingService.scale(screen)
-
   colorBg: Color.mSurfaceVariant
   colorFg: Color.mOnSurface
   colorBorder: Color.transparent
@@ -64,7 +66,7 @@ NIconButton {
 
     if (ArchUpdaterService.updatePackages.length > 0) {
       // Show confirmation dialog for updates
-      PanelService.updatePanel.toggle(screen)
+      PanelService.getPanel("archUpdaterPanel").toggle(screen)
     } else {
       // Just refresh if no updates available
       ArchUpdaterService.doPoll()

Modules/Bar/Widgets/Battery.qml

@@ -6,89 +6,100 @@ import qs.Commons
 import qs.Services
 import qs.Widgets
 
-NPill {
+Item {
   id: root
 
-  // Test mode
+  property ShellScreen screen
-  property bool testMode: false
+  property real scaling: ScalingService.scale(screen)
-  property int testPercent: 49
-  property bool testCharging: false
 
-  property var battery: UPower.displayDevice
+  implicitWidth: pill.width
-  property bool isReady: testMode ? true : (battery && battery.ready && battery.isLaptopBattery && battery.isPresent)
+  implicitHeight: pill.height
-  property real percent: testMode ? testPercent : (isReady ? (battery.percentage * 100) : 0)
-  property bool charging: testMode ? testCharging : (isReady ? battery.state === UPowerDeviceState.Charging : false)
-  property bool show: isReady && percent > 0
 
-  // Choose icon based on charge and charging state
+  NPill {
-  function batteryIcon() {
+    id: pill
 
-    if (charging)
+    // Test mode
-      return "battery_android_bolt"
+    property bool testMode: false
+    property int testPercent: 49
+    property bool testCharging: false
 
-    if (percent >= 95)
+    property var battery: UPower.displayDevice
-      return "battery_android_full"
+    property bool isReady: testMode ? true : (battery && battery.ready && battery.isLaptopBattery && battery.isPresent)
+    property real percent: testMode ? testPercent : (isReady ? (battery.percentage * 100) : 0)
+    property bool charging: testMode ? testCharging : (isReady ? battery.state === UPowerDeviceState.Charging : false)
 
-    // Hardcoded battery symbols
+    // Choose icon based on charge and charging state
-    if (percent >= 85)
+    function batteryIcon() {
-      return "battery_android_6"
-    if (percent >= 70)
-      return "battery_android_5"
-    if (percent >= 55)
-      return "battery_android_4"
-    if (percent >= 40)
-      return "battery_android_3"
-    if (percent >= 25)
-      return "battery_android_2"
-    if (percent >= 10)
-      return "battery_android_1"
-    if (percent >= 0)
-      return "battery_android_0"
-  }
 
-  visible: testMode || (isReady && battery.isLaptopBattery)
+      if (!isReady || !battery.isLaptopBattery)
+        return "battery_android_alert"
 
-  icon: root.batteryIcon()
+      if (charging)
-  text: Math.round(root.percent) + "%"
+        return "battery_android_bolt"
-  textColor: charging ? Color.mPrimary : Color.mOnSurface
-  forceShown: Settings.data.bar.alwaysShowBatteryPercentage
-  tooltipText: {
-    let lines = []
 
-    if (testMode) {
+      if (percent >= 95)
-      lines.push("Time left: " + Time.formatVagueHumanReadableDuration(12345))
+        return "battery_android_full"
+
+      // Hardcoded battery symbols
+      if (percent >= 85)
+        return "battery_android_6"
+      if (percent >= 70)
+        return "battery_android_5"
+      if (percent >= 55)
+        return "battery_android_4"
+      if (percent >= 40)
+        return "battery_android_3"
+      if (percent >= 25)
+        return "battery_android_2"
+      if (percent >= 10)
+        return "battery_android_1"
+      if (percent >= 0)
+        return "battery_android_0"
+    }
+
+    icon: batteryIcon()
+    text: (isReady && battery.isLaptopBattery) ? Math.round(percent) + "%" : "-"
+    textColor: charging ? Color.mPrimary : Color.mOnSurface
+    forceOpen: isReady && battery.isLaptopBattery && Settings.data.bar.alwaysShowBatteryPercentage
+    disableOpen: (!isReady || !battery.isLaptopBattery)
+    tooltipText: {
+      let lines = []
+
+      if (testMode) {
+        lines.push("Time Left: " + Time.formatVagueHumanReadableDuration(12345))
+        return lines.join("\n")
+      }
+
+      if (!isReady || !battery.isLaptopBattery) {
+        return "No Battery Detected"
+      }
+
+      if (battery.timeToEmpty > 0) {
+        lines.push("Time Left: " + Time.formatVagueHumanReadableDuration(battery.timeToEmpty))
+      }
+
+      if (battery.timeToFull > 0) {
+        lines.push("Time Until Full: " + Time.formatVagueHumanReadableDuration(battery.timeToFull))
+      }
+
+      if (battery.changeRate !== undefined) {
+        const rate = battery.changeRate
+        if (rate > 0) {
+          lines.push(charging ? "Charging Rate: " + rate.toFixed(2) + " W" : "Discharging Rate: " + rate.toFixed(
+                                  2) + " W")
+        } else if (rate < 0) {
+          lines.push("Discharging Rate: " + Math.abs(rate).toFixed(2) + " W")
+        } else {
+          lines.push("Estimating...")
+        }
+      } else {
+        lines.push(charging ? "Charging" : "Discharging")
+      }
+
+      if (battery.healthPercentage !== undefined && battery.healthPercentage > 0) {
+        lines.push("Health: " + Math.round(battery.healthPercentage) + "%")
+      }
       return lines.join("\n")
     }
-
-    if (!root.isReady) {
-      return ""
-    }
-
-    if (root.battery.timeToEmpty > 0) {
-      lines.push("Time left: " + Time.formatVagueHumanReadableDuration(root.battery.timeToEmpty))
-    }
-
-    if (root.battery.timeToFull > 0) {
-      lines.push("Time until full: " + Time.formatVagueHumanReadableDuration(root.battery.timeToFull))
-    }
-
-    if (root.battery.changeRate !== undefined) {
-      const rate = root.battery.changeRate
-      if (rate > 0) {
-        lines.push(root.charging ? "Charging rate: " + rate.toFixed(2) + " W" : "Discharging rate: " + rate.toFixed(
-                                     2) + " W")
-      } else if (rate < 0) {
-        lines.push("Discharging rate: " + Math.abs(rate).toFixed(2) + " W")
-      } else {
-        lines.push("Estimating...")
-      }
-    } else {
-      lines.push(root.charging ? "Charging" : "Discharging")
-    }
-
-    if (root.battery.healthPercentage !== undefined && root.battery.healthPercentage > 0) {
-      lines.push("Health: " + Math.round(root.battery.healthPercentage) + "%")
-    }
-    return lines.join("\n")
   }
 }

Modules/Bar/Widgets/Bluetooth.qml

@@ -10,8 +10,11 @@ import qs.Widgets
 NIconButton {
   id: root
 
-  sizeMultiplier: 0.8
+  property ShellScreen screen
+  property real scaling: ScalingService.scale(screen)
 
+  visible: Settings.data.network.bluetoothEnabled
+  sizeMultiplier: 0.8
   colorBg: Color.mSurfaceVariant
   colorFg: Color.mOnSurface
   colorBorder: Color.transparent
@@ -28,7 +31,5 @@ NIconButton {
     }
   }
   tooltipText: "Bluetooth Devices"
-  onClicked: {
+  onClicked: PanelService.getPanel("bluetoothPanel")?.toggle(screen)
-    bluetoothPanel.toggle(screen)
-  }
 }

Modules/Bar/Widgets/Brightness.qml

@@ -8,13 +8,16 @@ import qs.Widgets
 Item {
   id: root
 
-  width: pill.width
+  property ShellScreen screen
-  height: pill.height
+  property real scaling: ScalingService.scale(screen)
-  visible: getMonitor() !== null
 
   // Used to avoid opening the pill on Quickshell startup
   property bool firstBrightnessReceived: false
 
+  width: pill.width
+  height: pill.height
+  visible: getMonitor() !== null
+
   function getMonitor() {
     return BrightnessService.getMonitorForScreen(screen) || null
   }

Modules/Bar/Widgets/Clock.qml

@@ -1,16 +1,21 @@
 import QtQuick
+import Quickshell
 import qs.Commons
 import qs.Services
 import qs.Widgets
 
-// Clock Icon with attached calendar
 Rectangle {
   id: root
-  width: clock.width + Style.marginM * 2 * scaling
+
-  height: Math.round(Style.capsuleHeight * scaling)
+  property ShellScreen screen
+  property real scaling: ScalingService.scale(screen)
+
+  implicitWidth: clock.width + Style.marginM * 2 * scaling
+  implicitHeight: Math.round(Style.capsuleHeight * scaling)
   radius: Math.round(Style.radiusM * scaling)
   color: Color.mSurfaceVariant
 
+  // Clock Icon with attached calendar
   NClock {
     id: clock
     anchors.verticalCenter: parent.verticalCenter
@@ -24,7 +29,7 @@ Rectangle {
     }
 
     onEntered: {
-      if (!calendarPanel.active) {
+      if (!PanelService.getPanel("calendarPanel")?.active) {
         tooltip.show()
       }
     }
@@ -33,7 +38,7 @@ Rectangle {
     }
     onClicked: {
       tooltip.hide()
-      calendarPanel.toggle(screen)
+      PanelService.getPanel("calendarPanel")?.toggle(screen)
     }
   }
 }

Modules/Bar/Widgets/KeyboardLayout.qml

@@ -6,15 +6,18 @@ import qs.Commons
 import qs.Services
 import qs.Widgets
 
-Item {
+Row {
   id: root
 
-  width: pill.width
+  property ShellScreen screen
-  height: pill.height
+  property real scaling: ScalingService.scale(screen)
 
   // Use the shared service for keyboard layout
   property string currentLayout: KeyboardLayoutService.currentLayout
 
+  width: pill.width
+  height: pill.height
+
   NPill {
     id: pill
     icon: "keyboard_alt"

Modules/Bar/Widgets/MediaMini.qml

@@ -9,6 +9,10 @@ import qs.Widgets
 
 Row {
   id: root
+
+  property ShellScreen screen
+  property real scaling: ScalingService.scale(screen)
+
   anchors.verticalCenter: parent.verticalCenter
   spacing: Style.marginS * scaling
   visible: MediaService.currentPlayer !== null && MediaService.canPlay

Modules/Bar/Widgets/NotificationHistory.qml

@@ -10,6 +10,9 @@ import qs.Widgets
 NIconButton {
   id: root
 
+  property ShellScreen screen
+  property real scaling: ScalingService.scale(screen)
+
   sizeMultiplier: 0.8
   icon: "notifications"
   tooltipText: "Notification History"
@@ -17,8 +20,5 @@ NIconButton {
   colorFg: Color.mOnSurface
   colorBorder: Color.transparent
   colorBorderHover: Color.transparent
-
+  onClicked: PanelService.getPanel("notificationHistoryPanel")?.toggle(screen)
-  onClicked: {
-    notificationHistoryPanel.toggle(screen)
-  }
 }

Modules/Bar/Widgets/PowerProfile.qml

@@ -1,7 +1,7 @@
 import QtQuick
+import QtQuick.Layouts
 import Quickshell
 import Quickshell.Services.UPower
-import QtQuick.Layouts
 import qs.Commons
 import qs.Services
 import qs.Widgets
@@ -9,6 +9,8 @@ import qs.Widgets
 NIconButton {
   id: root
 
+  property ShellScreen screen
+  property real scaling: ScalingService.scale(screen)
   property var powerProfiles: PowerProfiles
   readonly property bool hasPP: powerProfiles.hasPerformanceProfile
 

Modules/Bar/Widgets/ScreenRecorderIndicator.qml

@@ -1,18 +1,21 @@
+import Quickshell
 import qs.Commons
 import qs.Services
 import qs.Widgets
 
 // Screen Recording Indicator
 NIconButton {
-  id: screenRecordingIndicator
+  id: root
+
+  property ShellScreen screen
+  property real scaling: ScalingService.scale(screen)
+
+  visible: ScreenRecorderService.isRecording
   icon: "videocam"
   tooltipText: "Screen Recording Active\nClick To Stop Recording"
   sizeMultiplier: 0.8
   colorBg: Color.mPrimary
   colorFg: Color.mOnPrimary
-  visible: ScreenRecorderService.isRecording
   anchors.verticalCenter: parent.verticalCenter
-  onClicked: {
+  onClicked: ScreenRecorderService.toggleRecording()
-    ScreenRecorderService.toggleRecording()
-  }
 }

Modules/Bar/Widgets/SidePanelToggle.qml

@@ -1,9 +1,14 @@
 import Quickshell
 import qs.Commons
 import qs.Widgets
+import qs.Services
 
 NIconButton {
-  id: sidePanelToggle
+  id: root
+
+  property ShellScreen screen
+  property real scaling: ScalingService.scale(screen)
+
   icon: "widgets"
   tooltipText: "Open Side Panel"
   sizeMultiplier: 0.8
@@ -14,5 +19,5 @@ NIconButton {
   colorBorderHover: Color.transparent
 
   anchors.verticalCenter: parent.verticalCenter
-  onClicked: sidePanel.toggle(screen)
+  onClicked: PanelService.getPanel("sidePanel")?.toggle(screen)
 }

Modules/Bar/Widgets/SystemMonitor.qml

@@ -6,6 +6,10 @@ import qs.Widgets
 
 Row {
   id: root
+
+  property ShellScreen screen
+  property real scaling: ScalingService.scale(screen)
+
   anchors.verticalCenter: parent.verticalCenter
   spacing: Style.marginS * scaling
 

Modules/Bar/Widgets/Tray.qml

@@ -6,15 +6,20 @@ import Quickshell
 import Quickshell.Services.SystemTray
 import Quickshell.Widgets
 import qs.Commons
+import qs.Modules.Bar.Extras
 import qs.Services
 import qs.Widgets
 
 Rectangle {
+  id: root
+
+  property ShellScreen screen
+  property real scaling: ScalingService.scale(screen)
   readonly property real itemSize: 24 * scaling
 
   visible: SystemTray.items.values.length > 0
-  width: tray.width + Style.marginM * scaling * 2
+  implicitWidth: tray.width + Style.marginM * scaling * 2
-  height: Math.round(Style.capsuleHeight * scaling)
+  implicitHeight: Math.round(Style.capsuleHeight * scaling)
   radius: Math.round(Style.radiusM * scaling)
   color: Color.mSurfaceVariant
 
@@ -134,9 +139,7 @@ Rectangle {
     function open() {
       visible = true
 
-      // Register into the panel service
+      PanelService.willOpenPanel(trayPanel)
-      // so this will autoclose if we open another panel
-      PanelService.registerOpen(trayPanel)
     }
 
     function close() {
@@ -152,7 +155,7 @@ Rectangle {
 
     Loader {
       id: trayMenu
-      source: "TrayMenu.qml"
+      source: "../Extras/TrayMenu.qml"
     }
   }
 }

Modules/Bar/Widgets/Volume.qml

@@ -9,12 +9,15 @@ import qs.Widgets
 Item {
   id: root
 
-  width: pill.width
+  property ShellScreen screen
-  height: pill.height
+  property real scaling: ScalingService.scale(screen)
 
   // Used to avoid opening the pill on Quickshell startup
   property bool firstVolumeReceived: false
 
+  implicitWidth: pill.width
+  implicitHeight: pill.height
+
   function getIcon() {
     if (AudioService.muted) {
       return "volume_off"
@@ -64,6 +67,7 @@ Item {
       }
     }
     onClicked: {
+      var settingsPanel = PanelService.getPanel("settingsPanel")
       settingsPanel.requestedTab = SettingsPanel.Tab.AudioService
       settingsPanel.open(screen)
     }

Modules/Bar/Widgets/WiFi.qml

@@ -10,6 +10,11 @@ import qs.Widgets
 NIconButton {
   id: root
 
+  property ShellScreen screen
+  property real scaling: ScalingService.scale(screen)
+
+  visible: Settings.data.network.wifiEnabled
+
   sizeMultiplier: 0.8
 
   Component.onCompleted: {
@@ -44,11 +49,11 @@ NIconButton {
       return "signal_wifi_bad"
     }
   }
-  tooltipText: "WiFi Networks"
+  tooltipText: "Network / WiFi"
   onClicked: {
     try {
       Logger.log("WiFi", "Button clicked, toggling panel")
-      wifiPanel.toggle(screen)
+      PanelService.getPanel("wifiPanel")?.toggle(screen)
     } catch (error) {
       Logger.error("WiFi", "Error toggling panel:", error)
     }

Modules/Bar/Widgets/Workspace.qml

@@ -10,6 +10,10 @@ import qs.Services
 
 Item {
   id: root
+
+  property ShellScreen screen: null
+  property real scaling: ScalingService.scale(screen)
+
   property bool isDestroying: false
   property bool hovered: false
 
@@ -23,7 +27,8 @@ Item {
 
   signal workspaceChanged(int workspaceId, color accentColor)
 
-  width: {
+  implicitHeight: Math.round(36 * scaling)
+  implicitWidth: {
     let total = 0
     for (var i = 0; i < localWorkspaces.count; i++) {
       const ws = localWorkspaces.get(i)
@@ -39,34 +44,35 @@ Item {
     return total
   }
 
-  height: Math.round(36 * scaling)
-
   Component.onCompleted: {
-    localWorkspaces.clear()
+    refreshWorkspaces()
-    for (var i = 0; i < WorkspaceService.workspaces.count; i++) {
-      const ws = WorkspaceService.workspaces.get(i)
-      if (ws.output.toLowerCase() === screen.name.toLowerCase()) {
-        localWorkspaces.append(ws)
-      }
-    }
-    workspaceRepeater.model = localWorkspaces
-    updateWorkspaceFocus()
   }
 
+  Component.onDestruction: {
+    root.isDestroying = true
+  }
+
+  onScreenChanged: refreshWorkspaces()
+
   Connections {
     target: WorkspaceService
     function onWorkspacesChanged() {
-      localWorkspaces.clear()
+      refreshWorkspaces()
+    }
+  }
+
+  function refreshWorkspaces() {
+    localWorkspaces.clear()
+    if (screen !== null) {
       for (var i = 0; i < WorkspaceService.workspaces.count; i++) {
         const ws = WorkspaceService.workspaces.get(i)
         if (ws.output.toLowerCase() === screen.name.toLowerCase()) {
           localWorkspaces.append(ws)
         }
       }
-
-      workspaceRepeater.model = localWorkspaces
-      updateWorkspaceFocus()
     }
+    workspaceRepeater.model = localWorkspaces
+    updateWorkspaceFocus()
   }
 
   function triggerUnifiedWave() {
@@ -74,6 +80,17 @@ Item {
     masterAnimation.restart()
   }
 
+  function updateWorkspaceFocus() {
+    for (var i = 0; i < localWorkspaces.count; i++) {
+      const ws = localWorkspaces.get(i)
+      if (ws.isFocused === true) {
+        root.triggerUnifiedWave()
+        root.workspaceChanged(ws.id, Color.mPrimary)
+        break
+      }
+    }
+  }
+
   SequentialAnimation {
     id: masterAnimation
     PropertyAction {
@@ -101,17 +118,6 @@ Item {
     }
   }
 
-  function updateWorkspaceFocus() {
-    for (var i = 0; i < localWorkspaces.count; i++) {
-      const ws = localWorkspaces.get(i)
-      if (ws.isFocused === true) {
-        root.triggerUnifiedWave()
-        root.workspaceChanged(ws.id, Color.mPrimary)
-        break
-      }
-    }
-  }
-
   Rectangle {
     id: workspaceBackground
     width: parent.width - Style.marginS * scaling * 2
@@ -254,8 +260,4 @@ Item {
       }
     }
   }
-
-  Component.onDestruction: {
-    root.isDestroying = true
-  }
 }

Modules/Calendar/Calendar.qml

@@ -104,17 +104,6 @@ NPanel {
       year: Time.date.getFullYear()
       locale: Qt.locale() // Use system locale
 
-      // Optionally, update when the panel becomes visible
-      Connections {
-        target: calendarPanel
-        function onVisibleChanged() {
-          if (calendarPanel.visible) {
-            grid.month = Time.date.getMonth()
-            grid.year = Time.date.getFullYear()
-          }
-        }
-      }
-
       delegate: Rectangle {
         width: (Style.baseWidgetSize * scaling)
         height: (Style.baseWidgetSize * scaling)

Modules/SettingsPanel/Tabs/BarTab.qml

@@ -163,7 +163,7 @@ ColumnLayout {
             spacing: Style.marginM * scaling
 
             // Left Section
-            NWidgetCard {
+            NSectionEditor {
               sectionName: "Left"
               widgetModel: Settings.data.bar.widgets.left
               availableWidgets: availableWidgets
@@ -174,7 +174,7 @@ ColumnLayout {
             }
 
             // Center Section
-            NWidgetCard {
+            NSectionEditor {
               sectionName: "Center"
               widgetModel: Settings.data.bar.widgets.center
               availableWidgets: availableWidgets
@@ -185,7 +185,7 @@ ColumnLayout {
             }
 
             // Right Section
-            NWidgetCard {
+            NSectionEditor {
               sectionName: "Right"
               widgetModel: Settings.data.bar.widgets.right
               availableWidgets: availableWidgets
@@ -228,15 +228,6 @@ ColumnLayout {
 
       // Assign the new array
       Settings.data.bar.widgets[section] = newArray
-
-      // Force a settings save
-      //Logger.log("BarTab", "Settings updated, triggering save...")
-
-      // Verify the change was applied
-      Qt.setTimeout(function () {
-        var updatedArray = Settings.data.bar.widgets[section]
-        //Logger.log("BarTab", "Verification - updated section array:", JSON.stringify(updatedArray))
-      }, 100)
     } else {
 
       //Logger.log("BarTab", "Invalid section or index:", section, index, "array length:",
@@ -262,29 +253,19 @@ ColumnLayout {
     }
   }
 
-  // Widget loader for discovering available widgets
+  // Base list model for all combo boxes
-  WidgetLoader {
-    id: widgetLoader
-  }
-
   ListModel {
     id: availableWidgets
   }
 
   Component.onCompleted: {
-    discoverWidgets()
+    // Fill out availableWidgets ListModel
-  }
-
-  // Automatically discover available widgets using WidgetLoader
-  function discoverWidgets() {
     availableWidgets.clear()
-
+    BarWidgetRegistry.getAvailableWidgets().forEach(entry => {
-    // Use WidgetLoader to discover available widgets
+                                                      availableWidgets.append({
-    const discoveredWidgets = widgetLoader.discoverAvailableWidgets()
+                                                                                "key": entry,
-
+                                                                                "name": entry
-    // Add discovered widgets to the ListModel
+                                                                              })
-    discoveredWidgets.forEach(widget => {
+                                                    })
-                                availableWidgets.append(widget)
-                              })
   }
 }

Modules/SidePanel/Cards/UtilitiesCard.qml

@@ -50,6 +50,7 @@ NBox {
       icon: "image"
       tooltipText: "Open Wallpaper Selector"
       onClicked: {
+        var settingsPanel = PanelService.getPanel("settingsPanel")
         settingsPanel.requestedTab = SettingsPanel.Tab.WallpaperSelector
         settingsPanel.open(screen)
       }

Services/BarWidgetRegistry.qml

@@ -0,0 +1,99 @@
+pragma Singleton
+
+import QtQuick
+import Quickshell
+import qs.Modules.Bar.Widgets
+
+Singleton {
+  id: root
+
+  // Widget registry object mapping widget names to components
+  property var widgets: ({
+                           "ActiveWindow": activeWindowComponent,
+                           "ArchUpdater": archUpdaterComponent,
+                           "Battery": batteryComponent,
+                           "Bluetooth": bluetoothComponent,
+                           "Brightness": brightnessComponent,
+                           "Clock": clockComponent,
+                           "KeyboardLayout": keyboardLayoutComponent,
+                           "MediaMini": mediaMiniComponent,
+                           "NotificationHistory": notificationHistoryComponent,
+                           "PowerProfile": powerProfileComponent,
+                           "ScreenRecorderIndicator": screenRecorderIndicatorComponent,
+                           "SidePanelToggle": sidePanelToggleComponent,
+                           "SystemMonitor": systemMonitorComponent,
+                           "Tray": trayComponent,
+                           "Volume": volumeComponent,
+                           "WiFi": wiFiComponent,
+                           "Workspace": workspaceComponent
+                         })
+
+  // Component definitions - these are loaded once at startup
+  property Component activeWindowComponent: Component {
+    ActiveWindow {}
+  }
+  property Component archUpdaterComponent: Component {
+    ArchUpdater {}
+  }
+  property Component batteryComponent: Component {
+    Battery {}
+  }
+  property Component bluetoothComponent: Component {
+    Bluetooth {}
+  }
+  property Component brightnessComponent: Component {
+    Brightness {}
+  }
+  property Component clockComponent: Component {
+    Clock {}
+  }
+  property Component keyboardLayoutComponent: Component {
+    KeyboardLayout {}
+  }
+  property Component mediaMiniComponent: Component {
+    MediaMini {}
+  }
+  property Component notificationHistoryComponent: Component {
+    NotificationHistory {}
+  }
+  property Component powerProfileComponent: Component {
+    PowerProfile {}
+  }
+  property Component screenRecorderIndicatorComponent: Component {
+    ScreenRecorderIndicator {}
+  }
+  property Component sidePanelToggleComponent: Component {
+    SidePanelToggle {}
+  }
+  property Component systemMonitorComponent: Component {
+    SystemMonitor {}
+  }
+  property Component trayComponent: Component {
+    Tray {}
+  }
+  property Component volumeComponent: Component {
+    Volume {}
+  }
+  property Component wiFiComponent: Component {
+    WiFi {}
+  }
+  property Component workspaceComponent: Component {
+    Workspace {}
+  }
+
+  // ------------------------------
+  // Helper function to get widget component by name
+  function getWidget(name) {
+    return widgets[name] || null
+  }
+
+  // Helper function to check if widget exists
+  function hasWidget(name) {
+    return name in widgets
+  }
+
+  // Get list of available widget names
+  function getAvailableWidgets() {
+    return Object.keys(widgets)
+  }
+}

Services/CavaService.qml

@@ -38,7 +38,7 @@ Singleton {
     id: process
     stdinEnabled: true
     running: (Settings.data.audio.visualizerType !== "none")
-             && (PanelService.sidePanel.active || Settings.data.audio.showMiniplayerCava
+             && (PanelService.getPanel("sidePanel").active || Settings.data.audio.showMiniplayerCava
                  || (PanelService.lockScreen && PanelService.lockScreen.active))
     command: ["cava", "-p", "/dev/stdin"]
     onExited: {

Services/CompositorService.qml

@@ -19,7 +19,7 @@ Singleton {
   property ListModel workspaces: ListModel {}
   property var windows: []
   property int focusedWindowIndex: -1
-  property string focusedWindowTitle: "(No active window)"
+  property string focusedWindowTitle: "n/a"
   property bool inOverview: false
 
   // Generic events

Services/GitHubService.qml

@@ -1,9 +1,10 @@
+pragma Singleton
+
 import QtQuick
 import Quickshell
 import Quickshell.Io
 import qs.Commons
 import qs.Services
-pragma Singleton
 
 // GitHub API logic and caching
 Singleton {

Services/LocationService.qml

@@ -1,9 +1,10 @@
+pragma Singleton
+
 import QtQuick
 import Quickshell
 import Quickshell.Io
 import qs.Commons
 import qs.Services
-pragma Singleton
 
 // Weather logic and caching
 Singleton {

Services/NotificationService.qml

@@ -1,10 +1,11 @@
+pragma Singleton
+
 import QtQuick
 import Quickshell
 import Quickshell.Io
 import qs.Commons
 import qs.Services
 import Quickshell.Services.Notifications
-pragma Singleton
 
 QtObject {
   id: root

Services/PanelService.qml

@@ -1,23 +1,38 @@
 pragma Singleton
 
 import Quickshell
+import qs.Commons
 
 Singleton {
   id: root
 
-  // A ref. to the sidePanel, so it's accessible from other services
+  // A ref. to the lockScreen, so it's accessible from anywhere
-  property var sidePanel: null
+  // This is not a panel...
-
-  // A ref. to the lockScreen, so it's accessible from other services
   property var lockScreen: null
 
-  // A ref. to the updatePanel, so it's accessible from other services
-  property var updatePanel: null
-
   // Currently opened panel
   property var openedPanel: null
 
-  function registerOpen(panel) {
+  property var registeredPanels: ({})
+
+  // Register this panel
+  function registerPanel(panel) {
+    registeredPanels[panel.objectName] = panel
+    Logger.log("PanelService", "Registered:", panel.objectName)
+  }
+
+  // Returns a panel
+  function getPanel(name) {
+    return registeredPanels[name] || null
+  }
+
+  // Check if a panel exists
+  function hasPanel(name) {
+    return name in registeredPanels
+  }
+
+  // Helper to keep only one panel open at any time
+  function willOpenPanel(panel) {
     if (openedPanel && openedPanel != panel) {
       openedPanel.close()
     }

Services/ScreenRecorderService.qml

@@ -46,7 +46,6 @@ Singleton {
     //Logger.log("ScreenRecorder", command)
     Quickshell.execDetached(["sh", "-c", command])
     Logger.log("ScreenRecorder", "Started recording")
-    //Logger.log("ScreenRecorder", command)
   }
 
   // Stop recording using Quickshell.execDetached

Widgets/NPanel.qml

@@ -31,6 +31,12 @@ Loader {
   signal opened
   signal closed
 
+  Component.onCompleted: {
+    // console.log("Oh Yeah")
+    // console.log(objectName)
+    PanelService.registerPanel(root)
+  }
+
   // -----------------------------------------
   function toggle(aScreen) {
     if (!active || isClosing) {
@@ -53,7 +59,7 @@ Loader {
       opacityValue = 1.0
     }
 
-    PanelService.registerOpen(root)
+    PanelService.willOpenPanel(root)
 
     active = true
     root.opened()

Widgets/NPill.qml

@@ -16,10 +16,11 @@ Item {
   property color collapsedIconColor: Color.mOnSurface
   property real sizeMultiplier: 0.8
   property bool autoHide: false
-  // When true, keep the pill expanded regardless of hover state
+  property bool forceOpen: false
-  property bool forceShown: false
+  property bool disableOpen: false
+
   // Effective shown state (true if hovered/animated open or forced)
-  readonly property bool effectiveShown: forceShown || showPill
+  readonly property bool effectiveShown: forceOpen || showPill
 
   signal shown
   signal hidden
@@ -85,7 +86,7 @@ Item {
     height: iconSize
     radius: width * 0.5
     // When forced shown, match pill background; otherwise use accent when hovered
-    color: forceShown ? pillColor : (showPill ? iconCircleColor : Color.mSurfaceVariant)
+    color: forceOpen ? pillColor : (showPill ? iconCircleColor : Color.mSurfaceVariant)
     anchors.verticalCenter: parent.verticalCenter
     anchors.right: parent.right
 
@@ -100,7 +101,7 @@ Item {
       text: root.icon
       font.pointSize: Style.fontSizeM * scaling
       // When forced shown, use pill text color; otherwise accent color when hovered
-      color: forceShown ? textColor : (showPill ? iconTextColor : Color.mOnSurface)
+      color: forceOpen ? textColor : (showPill ? iconTextColor : Color.mOnSurface)
       anchors.centerIn: parent
     }
   }
@@ -194,18 +195,21 @@ Item {
     anchors.fill: parent
     hoverEnabled: true
     onEntered: {
-      if (!forceShown) {
+      root.entered()
+      tooltip.show()
+      if (disableOpen) {
+        return
+      }
+      if (!forceOpen) {
         showDelayed()
       }
-      tooltip.show()
-      root.entered()
     }
     onExited: {
-      if (!forceShown) {
+      root.exited()
+      if (!forceOpen) {
         hide()
       }
       tooltip.hide()
-      root.exited()
     }
     onClicked: {
       root.clicked()
@@ -226,7 +230,7 @@ Item {
   }
 
   function hide() {
-    if (forceShown) {
+    if (forceOpen) {
       return
     }
     if (showPill) {
@@ -245,8 +249,8 @@ Item {
     }
   }
 
-  onForceShownChanged: {
+  onForceOpenChanged: {
-    if (forceShown) {
+    if (forceOpen) {
       // Immediately lock open without animations
       showAnim.stop()
       hideAnim.stop()

Widgets/NSectionEditor.qml

@@ -90,6 +90,7 @@ NBox {
         colorFgHover: Color.mOnSecondary
         enabled: comboBox.selectedKey !== ""
         Layout.alignment: Qt.AlignVCenter
+        Layout.leftMargin: Style.marginS * scaling
         onClicked: {
           if (comboBox.currentKey !== "") {
             addWidget(comboBox.currentKey, sectionName.toLowerCase())
@@ -174,27 +175,27 @@ NBox {
             anchors.fill: parent
             drag.target: parent
 
-            onPressed: {
+            onPressed: mouse => {
-              // Check if the click is on the close button area
+                         // Check if the click is on the close button area
-              const closeButtonX = widgetContent.x + widgetContent.width - 20 * scaling
+                         const closeButtonX = widgetContent.x + widgetContent.width - 20 * scaling
-              const closeButtonY = widgetContent.y
+                         const closeButtonY = widgetContent.y
-              const closeButtonWidth = 20 * scaling
+                         const closeButtonWidth = 20 * scaling
-              const closeButtonHeight = 20 * scaling
+                         const closeButtonHeight = 20 * scaling
 
-              if (mouseX >= closeButtonX && mouseX <= closeButtonX + closeButtonWidth && mouseY >= closeButtonY
+                         if (mouseX >= closeButtonX && mouseX <= closeButtonX + closeButtonWidth
-                  && mouseY <= closeButtonY + closeButtonHeight) {
+                             && mouseY >= closeButtonY && mouseY <= closeButtonY + closeButtonHeight) {
-                // Click is on the close button, don't start drag
+                           // Click is on the close button, don't start drag
-                mouse.accepted = false
+                           mouse.accepted = false
-                return
+                           return
-              }
+                         }
 
-              Logger.log("NWidgetCard", `Started dragging widget: ${modelData} at index ${index}`)
+                         Logger.log("NSectionEditor", `Started dragging widget: ${modelData} at index ${index}`)
-              // Bring to front when starting drag
+                         // Bring to front when starting drag
-              widgetItem.z = 1000
+                         widgetItem.z = 1000
-            }
+                       }
 
             onReleased: {
-              Logger.log("NWidgetCard", `Released widget: ${modelData} at index ${index}`)
+              Logger.log("NSectionEditor", `Released widget: ${modelData} at index ${index}`)
               // Reset z-index when drag ends
               widgetItem.z = 0
 
@@ -232,12 +233,12 @@ NBox {
                 const fromIndex = index
                 const toIndex = targetIndex
                 Logger.log(
-                      "NWidgetCard",
+                      "NSectionEditor",
                       `Dropped widget from index ${fromIndex} to position ${toIndex} (distance: ${minDistance.toFixed(
                         2)})`)
                 reorderWidget(sectionName.toLowerCase(), fromIndex, toIndex)
               } else {
-                Logger.log("NWidgetCard", `No valid drop target found for widget at index ${index}`)
+                Logger.log("NSectionEditor", `No valid drop target found for widget at index ${index}`)
               }
             }
           }
@@ -264,16 +265,16 @@ NBox {
       }
 
       onEntered: function (drag) {
-        Logger.log("NWidgetCard", "Entered start drop zone")
+        Logger.log("NSectionEditor", "Entered start drop zone")
       }
 
       onDropped: function (drop) {
-        Logger.log("NWidgetCard", "Dropped on start zone")
+        Logger.log("NSectionEditor", "Dropped on start zone")
         if (drop.source && drop.source.widgetIndex !== undefined) {
           const fromIndex = drop.source.widgetIndex
           const toIndex = 0 // Insert at the beginning
           if (fromIndex !== toIndex) {
-            Logger.log("NWidgetCard", `Dropped widget from index ${fromIndex} to beginning`)
+            Logger.log("NSectionEditor", `Dropped widget from index ${fromIndex} to beginning`)
             reorderWidget(sectionName.toLowerCase(), fromIndex, toIndex)
           }
         }
@@ -299,16 +300,16 @@ NBox {
       }
 
       onEntered: function (drag) {
-        Logger.log("NWidgetCard", "Entered end drop zone")
+        Logger.log("NSectionEditor", "Entered end drop zone")
       }
 
       onDropped: function (drop) {
-        Logger.log("NWidgetCard", "Dropped on end zone")
+        Logger.log("NSectionEditor", "Dropped on end zone")
         if (drop.source && drop.source.widgetIndex !== undefined) {
           const fromIndex = drop.source.widgetIndex
           const toIndex = widgetModel.length // Insert at the end
           if (fromIndex !== toIndex) {
-            Logger.log("NWidgetCard", `Dropped widget from index ${fromIndex} to end`)
+            Logger.log("NSectionEditor", `Dropped widget from index ${fromIndex} to end`)
             reorderWidget(sectionName.toLowerCase(), fromIndex, toIndex)
           }
         }

Widgets/NWidgetLoader.qml

@@ -0,0 +1,46 @@
+import QtQuick
+import Quickshell
+import qs.Services
+
+Item {
+  id: root
+
+  property string widgetName: ""
+  property var widgetProps: ({})
+  property bool enabled: true
+
+  // Don't reserve space unless the loaded widget is really visible
+  implicitWidth: loader.item ? loader.item.visible ? loader.item.implicitWidth : 0 : 0
+  implicitHeight: loader.item ? loader.item.visible ? loader.item.implicitHeight : 0 : 0
+
+  Loader {
+    id: loader
+
+    anchors.fill: parent
+    active: enabled && widgetName !== ""
+    sourceComponent: {
+      if (!active) {
+        return null
+      }
+      return BarWidgetRegistry.getWidget(widgetName)
+    }
+
+    onLoaded: {
+      if (item && widgetProps) {
+        // Apply properties to loaded widget
+        for (var prop in widgetProps) {
+          if (item.hasOwnProperty(prop)) {
+            item[prop] = widgetProps[prop]
+          }
+        }
+      }
+    }
+  }
+
+  // Error handling
+  onWidgetNameChanged: {
+    if (widgetName && !BarWidgetRegistry.hasWidget(widgetName)) {
+      Logger.warn("WidgetLoader", "Widget not found in registry:", widgetName)
+    }
+  }
+}

shell.qml

@@ -40,64 +40,69 @@ ShellRoot {
   Bar {}
   Dock {}
 
-  Launcher {
-    id: launcherPanel
-  }
-
-  SidePanel {
-    id: sidePanel
-  }
-
-  Calendar {
-    id: calendarPanel
-  }
-
-  SettingsPanel {
-    id: settingsPanel
-  }
-
   Notification {
     id: notification
   }
 
-  NotificationHistoryPanel {
-    id: notificationHistoryPanel
-  }
-
   LockScreen {
     id: lockScreen
   }
 
-  PowerPanel {
-    id: powerPanel
-  }
-
-  WiFiPanel {
-    id: wifiPanel
-  }
-
-  BluetoothPanel {
-    id: bluetoothPanel
-  }
-
-  ArchUpdaterPanel {
-    id: updatePanel
-  }
-
   ToastManager {}
 
   IPCManager {}
 
+  // ------------------------------
+  // All the panels
+  Launcher {
+    id: launcherPanel
+    objectName: "launcherPanel"
+  }
+
+  SidePanel {
+    id: sidePanel
+    objectName: "sidePanel"
+  }
+
+  Calendar {
+    id: calendarPanel
+    objectName: "calendarPanel"
+  }
+
+  SettingsPanel {
+    id: settingsPanel
+    objectName: "settingsPanel"
+  }
+
+  NotificationHistoryPanel {
+    id: notificationHistoryPanel
+    objectName: "notificationHistoryPanel"
+  }
+
+  PowerPanel {
+    id: powerPanel
+    objectName: "powerPanel"
+  }
+
+  WiFiPanel {
+    id: wifiPanel
+    objectName: "wifiPanel"
+  }
+
+  BluetoothPanel {
+    id: bluetoothPanel
+    objectName: "bluetoothPanel"
+  }
+
+  ArchUpdaterPanel {
+    id: archUpdaterPanel
+    objectName: "archUpdaterPanel"
+  }
+
   Component.onCompleted: {
-    // Save a ref. to our sidePanel so we can access it from services
+    // Save a ref. to our lockScreen so we can access it  easily
-    PanelService.sidePanel = sidePanel
-
-    // Save a ref. to our lockScreen so we can access it from services
     PanelService.lockScreen = lockScreen
 
-    // Save a ref. to our updatePanel so we can access it from services
-    PanelService.updatePanel = updatePanel
-
     // Ensure our singleton is created as soon as possible so we start fetching weather asap
     LocationService.init()
   }