Bar widgets: modular loading refactoring via BarWidgetRegistry+NWidgetLoader

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

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 bool testMode: false
-  property int testPercent: 49
-  property bool testCharging: false
+  property ShellScreen screen
+  property real scaling: ScalingService.scale(screen)
 
-  property var battery: UPower.displayDevice
-  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)
-  property bool show: isReady && percent > 0
+  implicitWidth: pill.width
+  implicitHeight: pill.height
 
-  // Choose icon based on charge and charging state
-  function batteryIcon() {
+  NPill {
+    id: pill
 
-    if (charging)
-      return "battery_android_bolt"
+    // Test mode
+    property bool testMode: false
+    property int testPercent: 49
+    property bool testCharging: false
 
-    if (percent >= 95)
-      return "battery_android_full"
+    property var battery: UPower.displayDevice
+    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
-    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"
-  }
+    // Choose icon based on charge and charging state
+    function batteryIcon() {
 
-  visible: testMode || (isReady && battery.isLaptopBattery)
+      if (!isReady || !battery.isLaptopBattery)
+        return "battery_android_alert"
 
-  icon: root.batteryIcon()
-  text: Math.round(root.percent) + "%"
-  textColor: charging ? Color.mPrimary : Color.mOnSurface
-  forceShown: Settings.data.bar.alwaysShowBatteryPercentage
-  tooltipText: {
-    let lines = []
+      if (charging)
+        return "battery_android_bolt"
 
-    if (testMode) {
-      lines.push("Time left: " + Time.formatVagueHumanReadableDuration(12345))
+      if (percent >= 95)
+        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: {
-    bluetoothPanel.toggle(screen)
-  }
+  onClicked: PanelService.getPanel("bluetoothPanel")?.toggle(screen)
 }

Modules/Bar/Widgets/Brightness.qml

@@ -8,13 +8,16 @@ import qs.Widgets
 Item {
   id: root
 
-  width: pill.width
-  height: pill.height
-  visible: getMonitor() !== null
+  property ShellScreen screen
+  property real scaling: ScalingService.scale(screen)
 
   // 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
-  height: pill.height
+  property ShellScreen screen
+  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: {
-    notificationHistoryPanel.toggle(screen)
-  }
+  onClicked: PanelService.getPanel("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: {
-    ScreenRecorderService.toggleRecording()
-  }
+  onClicked: 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
-  height: Math.round(Style.capsuleHeight * scaling)
+  implicitWidth: tray.width + Style.marginM * scaling * 2
+  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
-      // so this will autoclose if we open another panel
-      PanelService.registerOpen(trayPanel)
+      PanelService.willOpenPanel(trayPanel)
     }
 
     function close() {
@@ -152,7 +155,7 @@ Rectangle {
 
     Loader {
       id: trayMenu
-      source: "TrayMenu.qml"
+      source: "../Extras/TrayMenu.qml"
     }
   }
 }

Modules/Bar/Widgets/TrayMenu.qml

@@ -1,257 +0,0 @@
-import QtQuick
-import QtQuick.Controls
-import QtQuick.Layouts
-import Quickshell
-import qs.Commons
-import qs.Services
-import qs.Widgets
-
-PopupWindow {
-  id: root
-  property QsMenuHandle menu
-  property var anchorItem: null
-  property real anchorX
-  property real anchorY
-  property bool isSubMenu: false
-  property bool isHovered: rootMouseArea.containsMouse
-
-  readonly property int menuWidth: 180
-
-  implicitWidth: menuWidth * scaling
-
-  // Use the content height of the Flickable for implicit height
-  implicitHeight: Math.min(Screen.height * 0.9, flickable.contentHeight + (Style.marginM * 2 * scaling))
-  visible: false
-  color: Color.transparent
-  anchor.item: anchorItem
-  anchor.rect.x: anchorX
-  anchor.rect.y: anchorY - (isSubMenu ? 0 : 4)
-
-  function showAt(item, x, y) {
-    if (!item) {
-      Logger.warn("TrayMenu", "anchorItem is undefined, won't show menu.")
-      return
-    }
-
-    if (!opener.children || opener.children.values.length === 0) {
-      //Logger.warn("TrayMenu", "Menu not ready, delaying show")
-      Qt.callLater(() => showAt(item, x, y))
-      return
-    }
-
-    anchorItem = item
-    anchorX = x
-    anchorY = y
-
-    visible = true
-    forceActiveFocus()
-
-    // Force update after showing.
-    Qt.callLater(() => {
-                   root.anchor.updateAnchor()
-                 })
-  }
-
-  function hideMenu() {
-    visible = false
-
-    // Clean up all submenus recursively
-    for (var i = 0; i < columnLayout.children.length; i++) {
-      const child = columnLayout.children[i]
-      if (child?.subMenu) {
-        child.subMenu.hideMenu()
-        child.subMenu.destroy()
-        child.subMenu = null
-      }
-    }
-  }
-
-  // Full-sized, transparent MouseArea to track the mouse.
-  MouseArea {
-    id: rootMouseArea
-    anchors.fill: parent
-    hoverEnabled: true
-  }
-
-  Item {
-    anchors.fill: parent
-    Keys.onEscapePressed: root.hideMenu()
-  }
-
-  QsMenuOpener {
-    id: opener
-    menu: root.menu
-  }
-
-  Rectangle {
-    anchors.fill: parent
-    color: Color.mSurface
-    border.color: Color.mOutline
-    border.width: Math.max(1, Style.borderS * scaling)
-    radius: Style.radiusM * scaling
-  }
-
-  Flickable {
-    id: flickable
-    anchors.fill: parent
-    anchors.margins: Style.marginS * scaling
-    contentHeight: columnLayout.implicitHeight
-    interactive: true
-    clip: true
-
-    // Use a ColumnLayout to handle menu item arrangement
-    ColumnLayout {
-      id: columnLayout
-      width: flickable.width
-      spacing: 0
-
-      Repeater {
-        model: opener.children ? [...opener.children.values] : []
-
-        delegate: Rectangle {
-          id: entry
-          required property var modelData
-
-          Layout.preferredWidth: parent.width
-          Layout.preferredHeight: {
-            if (modelData?.isSeparator) {
-              return 8 * scaling
-            } else {
-              // Calculate based on text content
-              const textHeight = text.contentHeight || (Style.fontSizeS * scaling * 1.2)
-              return Math.max(28 * scaling, textHeight + (Style.marginS * 2 * scaling))
-            }
-          }
-
-          color: Color.transparent
-          property var subMenu: null
-
-          NDivider {
-            anchors.centerIn: parent
-            width: parent.width - (Style.marginM * scaling * 2)
-            visible: modelData?.isSeparator ?? false
-          }
-
-          Rectangle {
-            anchors.fill: parent
-            color: mouseArea.containsMouse ? Color.mTertiary : Color.transparent
-            radius: Style.radiusS * scaling
-            visible: !(modelData?.isSeparator ?? false)
-
-            RowLayout {
-              anchors.fill: parent
-              anchors.leftMargin: Style.marginM * scaling
-              anchors.rightMargin: Style.marginM * scaling
-              spacing: Style.marginS * scaling
-
-              NText {
-                id: text
-                Layout.fillWidth: true
-                color: (modelData?.enabled
-                        ?? true) ? (mouseArea.containsMouse ? Color.mOnTertiary : Color.mOnSurface) : Color.mOnSurfaceVariant
-                text: modelData?.text !== "" ? modelData?.text.replace(/[\n\r]+/g, ' ') : "..."
-                font.pointSize: Style.fontSizeS * scaling
-                verticalAlignment: Text.AlignVCenter
-                wrapMode: Text.WordWrap
-              }
-
-              Image {
-                Layout.preferredWidth: Style.marginL * scaling
-                Layout.preferredHeight: Style.marginL * scaling
-                source: modelData?.icon ?? ""
-                visible: (modelData?.icon ?? "") !== ""
-                fillMode: Image.PreserveAspectFit
-              }
-
-              NIcon {
-                text: modelData?.hasChildren ? "menu" : ""
-                font.pointSize: Style.fontSizeS * scaling
-                verticalAlignment: Text.AlignVCenter
-                visible: modelData?.hasChildren ?? false
-                color: Color.mOnSurface
-              }
-            }
-
-            MouseArea {
-              id: mouseArea
-              anchors.fill: parent
-              hoverEnabled: true
-              enabled: (modelData?.enabled ?? true) && !(modelData?.isSeparator ?? false) && root.visible
-
-              onClicked: {
-                if (modelData && !modelData.isSeparator && !modelData.hasChildren) {
-                  modelData.triggered()
-                  root.hideMenu()
-                }
-              }
-
-              onEntered: {
-                if (!root.visible)
-                  return
-
-                // Close all sibling submenus
-                for (var i = 0; i < columnLayout.children.length; i++) {
-                  const sibling = columnLayout.children[i]
-                  if (sibling !== entry && sibling?.subMenu) {
-                    sibling.subMenu.hideMenu()
-                    sibling.subMenu.destroy()
-                    sibling.subMenu = null
-                  }
-                }
-
-                // Create submenu if needed
-                if (modelData?.hasChildren) {
-                  if (entry.subMenu) {
-                    entry.subMenu.hideMenu()
-                    entry.subMenu.destroy()
-                  }
-
-                  // Need a slight overlap so that menu don't close when moving the mouse to a submenu
-                  const submenuWidth = menuWidth * scaling // Assuming a similar width as the parent
-                  const overlap = 4 * scaling // A small overlap to bridge the mouse path
-
-                  // Check if there's enough space on the right
-                  const globalPos = entry.mapToGlobal(0, 0)
-                  const openLeft = (globalPos.x + entry.width + submenuWidth > Screen.width)
-
-                  // Position with overlap
-                  const anchorX = openLeft ? -submenuWidth + overlap : entry.width - overlap
-
-                  // Create submenu
-                  entry.subMenu = Qt.createComponent("TrayMenu.qml").createObject(root, {
-                                                                                    "menu": modelData,
-                                                                                    "anchorItem": entry,
-                                                                                    "anchorX": anchorX,
-                                                                                    "anchorY": 0,
-                                                                                    "isSubMenu": true
-                                                                                  })
-
-                  if (entry.subMenu) {
-                    entry.subMenu.showAt(entry, anchorX, 0)
-                  }
-                }
-              }
-
-              onExited: {
-                Qt.callLater(() => {
-                               if (entry.subMenu && !entry.subMenu.isHovered) {
-                                 entry.subMenu.hideMenu()
-                                 entry.subMenu.destroy()
-                                 entry.subMenu = null
-                               }
-                             })
-              }
-            }
-          }
-
-          Component.onDestruction: {
-            if (subMenu) {
-              subMenu.destroy()
-              subMenu = null
-            }
-          }
-        }
-      }
-    }
-  }
-}

Modules/Bar/Widgets/Volume.qml

@@ -9,12 +9,15 @@ import qs.Widgets
 Item {
   id: root
 
-  width: pill.width
-  height: pill.height
+  property ShellScreen screen
+  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()
-    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()
+    refreshWorkspaces()
   }
 
+  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
-  }
 }