NPanel: simplified screen/scaling management

Modules/Bar/Widgets/Bluetooth.qml

@@ -21,5 +21,5 @@ NIconButton {
 
   icon: Settings.data.network.bluetoothEnabled ? "bluetooth" : "bluetooth-off"
   tooltipText: "Bluetooth devices."
-  onClicked: PanelService.getPanel("bluetoothPanel")?.toggle(screen, this)
+  onClicked: PanelService.getPanel("bluetoothPanel")?.toggle(this)
 }

Modules/Bar/Widgets/Brightness.qml

@@ -107,7 +107,7 @@ Item {
     onClicked: {
       var settingsPanel = PanelService.getPanel("settingsPanel")
       settingsPanel.requestedTab = SettingsPanel.Tab.Brightness
-      settingsPanel.open(screen)
+      settingsPanel.open()
     }
   }
 }

Modules/Bar/Widgets/Clock.qml

@@ -85,7 +85,7 @@ Rectangle {
     }
     onClicked: {
       tooltip.hide()
-      PanelService.getPanel("calendarPanel")?.toggle(screen, this)
+      PanelService.getPanel("calendarPanel")?.toggle(this)
     }
   }
 }

Modules/Bar/Widgets/CustomButton.qml

@@ -70,7 +70,7 @@ NIconButton {
       // No script was defined, open settings
       var settingsPanel = PanelService.getPanel("settingsPanel")
       settingsPanel.requestedTab = SettingsPanel.Tab.Bar
-      settingsPanel.open(screen)
+      settingsPanel.open()
     }
   }
 

Modules/Bar/Widgets/Microphone.qml

@@ -111,7 +111,7 @@ Item {
     onClicked: {
       var settingsPanel = PanelService.getPanel("settingsPanel")
       settingsPanel.requestedTab = SettingsPanel.Tab.Audio
-      settingsPanel.open(screen)
+      settingsPanel.open()
     }
     onRightClicked: {
       AudioService.setInputMuted(!AudioService.inputMuted)

Modules/Bar/Widgets/NightLight.qml

@@ -37,6 +37,6 @@ NIconButton {
   onRightClicked: {
     var settingsPanel = PanelService.getPanel("settingsPanel")
     settingsPanel.requestedTab = SettingsPanel.Tab.Brightness
-    settingsPanel.open(screen)
+    settingsPanel.open()
   }
 }

Modules/Bar/Widgets/NotificationHistory.qml

@@ -62,7 +62,7 @@ NIconButton {
 
   onClicked: {
     var panel = PanelService.getPanel("notificationHistoryPanel")
-    panel?.toggle(screen, this)
+    panel?.toggle(this)
     Settings.data.notifications.lastSeenTs = Time.timestamp * 1000
   }
 

Modules/Bar/Widgets/PowerToggle.qml

@@ -8,9 +8,6 @@ import qs.Widgets
 NIconButton {
   id: root
 
-  property ShellScreen screen
-  property real scaling: 1.0
-
   sizeRatio: 0.8
 
   icon: "power"
@@ -19,5 +16,5 @@ NIconButton {
   colorFg: Color.mError
   colorBorder: Color.transparent
   colorBorderHover: Color.transparent
-  onClicked: PanelService.getPanel("powerPanel")?.toggle(screen)
+  onClicked: PanelService.getPanel("powerPanel")?.toggle()
 }

Modules/Bar/Widgets/SidePanelToggle.qml

@@ -43,8 +43,8 @@ NIconButton {
   colorBorderHover: Color.transparent
 
   anchors.verticalCenter: parent.verticalCenter
-  onClicked: PanelService.getPanel("sidePanel")?.toggle(screen, this)
+  onClicked: PanelService.getPanel("sidePanel")?.toggle(this)
-  onRightClicked: PanelService.getPanel("settingsPanel")?.toggle(screen)
+  onRightClicked: PanelService.getPanel("settingsPanel")?.toggle()
 
   IconImage {
     id: logo

Modules/Bar/Widgets/Volume.qml

@@ -96,7 +96,7 @@ Item {
     onClicked: {
       var settingsPanel = PanelService.getPanel("settingsPanel")
       settingsPanel.requestedTab = SettingsPanel.Tab.Audio
-      settingsPanel.open(screen)
+      settingsPanel.open()
     }
     onRightClicked: {
       AudioService.setMuted(!AudioService.muted)

Modules/Bar/Widgets/WiFi.qml

@@ -41,5 +41,5 @@ NIconButton {
     }
   }
   tooltipText: "Manage Wi-Fi."
-  onClicked: PanelService.getPanel("wifiPanel")?.toggle(screen, this)
+  onClicked: PanelService.getPanel("wifiPanel")?.toggle(this)
 }

Modules/BluetoothPanel/BluetoothPanel.qml

@@ -11,8 +11,8 @@ import qs.Widgets
 NPanel {
   id: root
 
-  panelWidth: 380 * scaling
+  preferredWidth: 380
-  panelHeight: 500 * scaling
+  preferredHeight: 500
 
   panelContent: Rectangle {
     color: Color.transparent

Modules/Calendar/Calendar.qml

@@ -10,8 +10,8 @@ import qs.Widgets
 NPanel {
   id: root
 
-  panelWidth: 340 * scaling
+  preferredWidth: 340
-  panelHeight: 320 * scaling
+  preferredHeight: 320
   panelAnchorRight: true
 
   // Main Column

Modules/IPC/IPCManager.qml

@@ -8,17 +8,6 @@ import qs.Services
 Item {
   id: root
 
-  // Using Wayland protocols to get focused window then determine which screen it's on.
-  function getActiveScreen() {
-    const activeWindow = ToplevelManager.activeToplevel
-    if (activeWindow && activeWindow.screens.length > 0) {
-      return activeWindow.screens[0]
-    }
-
-    // Fall back to the primary screen
-    return Quickshell.screens[0]
-  }
-
   IpcHandler {
     target: "screenRecorder"
     function toggle() {
@@ -31,14 +20,14 @@ Item {
   IpcHandler {
     target: "settings"
     function toggle() {
-      settingsPanel.toggle(getActiveScreen())
+      settingsPanel.toggle()
     }
   }
 
   IpcHandler {
     target: "notifications"
     function toggleHistory() {
-      notificationHistoryPanel.toggle(getActiveScreen())
+      notificationHistoryPanel.toggle()
     }
     function toggleDND() {
       Settings.data.notifications.doNotDisturb = !Settings.data.notifications.doNotDisturb
@@ -55,15 +44,15 @@ Item {
   IpcHandler {
     target: "launcher"
     function toggle() {
-      launcherPanel.toggle(getActiveScreen())
+      launcherPanel.toggle()
     }
     function clipboard() {
       launcherPanel.setSearchText(">clip ")
-      launcherPanel.toggle(getActiveScreen())
+      launcherPanel.toggle()
     }
     function calculator() {
       launcherPanel.setSearchText(">calc ")
-      launcherPanel.toggle(getActiveScreen())
+      launcherPanel.toggle()
     }
   }
 
@@ -122,14 +111,14 @@ Item {
   IpcHandler {
     target: "powerPanel"
     function toggle() {
-      powerPanel.toggle(getActiveScreen())
+      powerPanel.toggle()
     }
   }
 
   IpcHandler {
     target: "sidePanel"
     function toggle() {
-      sidePanel.toggle(getActiveScreen())
+      sidePanel.toggle()
     }
   }
 

Modules/Launcher/Launcher.qml

@@ -11,16 +11,10 @@ NPanel {
   id: root
 
   // Panel configuration
-  panelWidth: {
+  preferredWidth: 500
-    var w = Math.round(Math.max(screen?.width * 0.3, 500) * scaling)
+  preferredWidthRatio: 0.3
-    w = Math.min(w, screen?.width - Style.marginL * 2)
+  preferredHeight: 600
-    return w
+  preferredHeightRatio: 0.5
-  }
-  panelHeight: {
-    var h = Math.round(Math.max(screen?.height * 0.5, 600) * scaling)
-    h = Math.min(h, screen?.height - Style.barHeight * scaling - Style.marginL * 2)
-    return h
-  }
 
   panelKeyboardFocus: true
   panelBackgroundColor: Qt.alpha(Color.mSurface, Settings.data.appLauncher.backgroundOpacity)

Modules/Notification/NotificationHistoryPanel.qml

@@ -12,8 +12,8 @@ import qs.Widgets
 NPanel {
   id: root
 
-  panelWidth: 380 * scaling
+  preferredWidth: 380
-  panelHeight: 500 * scaling
+  preferredHeight: 500
   panelAnchorRight: true
 
   panelContent: Rectangle {

Modules/PowerPanel/PowerPanel.qml

@@ -13,8 +13,8 @@ import qs.Widgets
 NPanel {
   id: root
 
-  panelWidth: 440 * scaling
+  preferredWidth: 440
-  panelHeight: 380 * scaling
+  preferredHeight: 380
   panelAnchorHorizontalCenter: true
   panelAnchorVerticalCenter: true
   panelKeyboardFocus: true

Modules/SettingsPanel/Bar/BarSectionEditor.qml

@@ -19,10 +19,8 @@ NBox {
   signal reorderWidget(string section, int fromIndex, int toIndex)
   signal updateWidgetSettings(string section, int index, var settings)
   signal dragPotentialStarted
-  // Emitted when a widget is pressed (potential drag start)
   signal dragPotentialEnded
 
-  // Emitted when interaction ends (drag or click)
   color: Color.mSurface
   Layout.fillWidth: true
   Layout.minimumHeight: {
@@ -147,12 +145,12 @@ NBox {
 
             Behavior on opacity {
               NumberAnimation {
-                duration: 150
+                duration: Style.animationFast
               }
             }
             Behavior on scale {
               NumberAnimation {
-                duration: 150
+                duration: Style.animationFast
               }
             }
 

Modules/SettingsPanel/Bar/WidgetSettings/CustomButtonSettings.qml

@@ -48,18 +48,16 @@ ColumnLayout {
   Popup {
     id: iconPicker
     modal: true
-    property real panelWidth: {
+    width: {
       var w = Math.round(Math.max(Screen.width * 0.35, 900) * scaling)
       w = Math.min(w, Screen.width - Style.marginL * 2)
       return w
     }
-    property real panelHeight: {
+    height: {
       var h = Math.round(Math.max(Screen.height * 0.65, 700) * scaling)
       h = Math.min(h, Screen.height - Style.barHeight * scaling - Style.marginL * 2)
       return h
     }
-    width: panelWidth
-    height: panelHeight
     anchors.centerIn: Overlay.overlay
     padding: Style.marginXL * scaling
 

Modules/SettingsPanel/SettingsPanel.qml

@@ -11,16 +11,11 @@ import qs.Widgets
 NPanel {
   id: root
 
-  panelWidth: {
+  preferredWidth: 1000
-    var w = Math.round(Math.max(screen?.width * 0.4, 1000) * scaling)
+  preferredHeight: 1000
-    w = Math.min(w, screen?.width - Style.marginL * 2)
+  preferredWidthRatio: 0.4
-    return w
+  preferredHeightRatio: 0.75
-  }
+
-  panelHeight: {
-    var h = Math.round(Math.max(screen?.height * 0.75, 800) * scaling)
-    h = Math.min(h, screen?.height - Style.barHeight * scaling - Style.marginL * 2)
-    return h
-  }
   panelAnchorHorizontalCenter: true
   panelAnchorVerticalCenter: true
 

Modules/SettingsPanel/Tabs/DisplayTab.qml

@@ -44,12 +44,11 @@ ColumnLayout {
       model: Quickshell.screens || []
       delegate: Rectangle {
         Layout.fillWidth: true
-        Layout.minimumWidth: 550 * scaling
+        implicitHeight: contentCol.implicitHeight + Style.marginXL * 2 * scaling
         radius: Style.radiusM * scaling
         color: Color.mSurface
         border.color: Color.mOutline
         border.width: Math.max(1, Style.borderS * scaling)
-        implicitHeight: contentCol.implicitHeight + Style.marginXL * 2 * scaling
 
         property real localScaling: ScalingService.getScreenScale(modelData)
         Connections {
@@ -177,7 +176,6 @@ ColumnLayout {
                   value: localScaling
                   onPressedChanged: ScalingService.setScreenScale(modelData, value)
                   Layout.fillWidth: true
-                  Layout.minimumWidth: 150 * scaling
                 }
 
                 NIconButton {

Modules/SidePanel/Cards/MediaCard.qml

@@ -10,12 +10,8 @@ import qs.Widgets
 NBox {
   id: root
 
-  Layout.fillWidth: true
-  Layout.fillHeight: true
-
   ColumnLayout {
     anchors.fill: parent
-    Layout.fillHeight: true
     anchors.margins: Style.marginL * scaling
 
     // No media player detected

Modules/SidePanel/Cards/ProfileCard.qml

@@ -63,7 +63,7 @@ NBox {
         tooltipText: "Open settings."
         onClicked: {
           settingsPanel.requestedTab = SettingsPanel.Tab.General
-          settingsPanel.open(screen)
+          settingsPanel.open()
         }
       }
 
@@ -72,7 +72,7 @@ NBox {
         icon: "power"
         tooltipText: "Power menu."
         onClicked: {
-          powerPanel.open(screen)
+          powerPanel.open()
           sidePanel.close()
         }
       }

Modules/SidePanel/Cards/SystemMonitorCard.qml

@@ -9,7 +9,6 @@ NBox {
   id: root
 
   Layout.preferredWidth: Style.baseWidgetSize * 2.625 * scaling
-  implicitHeight: content.implicitHeight + Style.marginXS * 2 * scaling
 
   ColumnLayout {
     id: content

Modules/SidePanel/Cards/UtilitiesCard.qml

@@ -61,7 +61,7 @@ NBox {
       onClicked: {
         var settingsPanel = PanelService.getPanel("settingsPanel")
         settingsPanel.requestedTab = SettingsPanel.Tab.WallpaperSelector
-        settingsPanel.open(screen)
+        settingsPanel.open()
       }
       onRightClicked: {
         WallpaperService.setRandomWallpaper()

Modules/SidePanel/SidePanel.qml

@@ -10,32 +10,14 @@ import qs.Widgets
 NPanel {
   id: root
 
-  panelWidth: 460 * scaling
+  preferredWidth: 460
-  panelHeight: contentHeight
+  preferredHeight: 730
-
-  // Default height, will be modified via binding when the content is fully loaded
-  property real contentHeight: 720 * scaling
 
   panelContent: Item {
     id: content
 
     property real cardSpacing: Style.marginL * scaling
 
-    width: root.panelWidth
-    implicitHeight: layout.implicitHeight + (2 * cardSpacing)
-    height: implicitHeight
-
-    // Update parent's contentHeight whenever our height changes
-    onHeightChanged: {
-      root.contentHeight = height
-    }
-
-    onImplicitHeightChanged: {
-      if (implicitHeight > 0) {
-        root.contentHeight = implicitHeight
-      }
-    }
-
     // Layout content
     ColumnLayout {
       id: layout
@@ -46,55 +28,45 @@ NPanel {
 
       // Cards (consistent inter-card spacing via ColumnLayout spacing)
       ProfileCard {
-        id: profileCard
         Layout.fillWidth: true
       }
 
       WeatherCard {
-        id: weatherCard
         Layout.fillWidth: true
       }
 
       // Middle section: media + stats column
       RowLayout {
-        id: middleRow
         Layout.fillWidth: true
-        Layout.minimumHeight: 280 * scaling
+        Layout.preferredHeight: Math.max(310 * scaling)
-        Layout.preferredHeight: Math.max(280 * scaling, statsCard.implicitHeight)
         spacing: content.cardSpacing
 
         // Media card
         MediaCard {
-          id: mediaCard
           Layout.fillWidth: true
           Layout.fillHeight: true
         }
 
         // System monitors combined in one card
         SystemMonitorCard {
-          id: statsCard
+          Layout.fillHeight: true
-          Layout.alignment: Qt.AlignTop
         }
       }
 
       // Bottom actions (two grouped rows of round buttons)
       RowLayout {
-        id: bottomRow
         Layout.fillWidth: true
-        Layout.minimumHeight: 60 * scaling
+        Layout.preferredHeight: Math.max(60 * scaling)
-        Layout.preferredHeight: Math.max(60 * scaling, powerProfilesCard.implicitHeight, utilitiesCard.implicitHeight)
         spacing: content.cardSpacing
 
         // Power Profiles switcher
         PowerProfilesCard {
-          id: powerProfilesCard
           spacing: content.cardSpacing
           Layout.fillWidth: true
         }
 
         // Utilities buttons
         UtilitiesCard {
-          id: utilitiesCard
           spacing: content.cardSpacing
           Layout.fillWidth: true
         }

Modules/WiFiPanel/WiFiPanel.qml

@@ -10,8 +10,8 @@ import qs.Widgets
 NPanel {
   id: root
 
-  panelWidth: 400 * scaling
+  preferredWidth: 400
-  panelHeight: 500 * scaling
+  preferredHeight: 500
   panelKeyboardFocus: true
 
   property string passwordSsid: ""

Widgets/NPanel.qml

@@ -7,24 +7,14 @@ import qs.Services
 Loader {
   id: root
 
-  active: false
+  property ShellScreen screen: undefined
-  asynchronous: true
+  property real scaling: 1.0
-
-  property ShellScreen screen
-  property real scaling: ScalingService.getScreenScale(screen)
-
-  Connections {
-    target: ScalingService
-    function onScaleChanged(screenName, scale) {
-      if ((screen !== null) && (screenName === screen.name)) {
-        scaling = scale
-      }
-    }
-  }
 
   property Component panelContent: null
-  property int panelWidth: 1500
+  property real preferredWidth: 700
-  property int panelHeight: 400
+  property real preferredHeight: 900
+  property real preferredWidthRatio: undefined
+  property real preferredHeightRatio: undefined
   property color panelBackgroundColor: Color.mSurface
 
   property bool panelAnchorHorizontalCenter: false
@@ -50,14 +40,13 @@ Loader {
   property real opacityValue: originalOpacity
 
   property alias isClosing: hideTimer.running
-  readonly property real barHeight: Math.round(Style.barHeight * scaling)
-  readonly property bool barAtBottom: Settings.data.bar.position === "bottom"
-  readonly property bool barIsVisible: (screen !== null) && (Settings.data.bar.monitors.includes(screen.name)
-                                                             || (Settings.data.bar.monitors.length === 0))
 
   signal opened
   signal closed
 
+  active: false
+  asynchronous: true
+
   Component.onCompleted: {
     PanelService.registerPanel(root)
   }
@@ -81,32 +70,16 @@ Loader {
   }
 
   // -----------------------------------------
-  function toggle(aScreen, buttonItem) {
+  function toggle(buttonItem) {
-    // Don't toggle if screen is null or invalid
-    if (!aScreen || !aScreen.name) {
-      Logger.warn("NPanel", "Cannot toggle panel: invalid screen object")
-      return
-    }
-
     if (!active || isClosing) {
-      open(aScreen, buttonItem)
+      open(buttonItem)
     } else {
       close()
     }
   }
 
   // -----------------------------------------
-  function open(aScreen, buttonItem) {
+  function open(buttonItem) {
-    // Don't open if screen is null or invalid
-    if (!aScreen || !aScreen.name) {
-      Logger.warn("NPanel", "Cannot open panel: invalid screen object")
-      return
-    }
-
-    if (aScreen !== null) {
-      screen = aScreen
-    }
-
     // Get the button position if provided
     if (buttonItem !== undefined && buttonItem !== null) {
       useButtonPosition = true
@@ -165,6 +138,34 @@ Loader {
     PanelWindow {
       id: panelWindow
 
+      // PanelWindow has its own screen property inherited of QsWindow
+      property real scaling: ScalingService.getScreenScale(screen)
+      readonly property real barHeight: Math.round(Style.barHeight * scaling)
+      readonly property bool barAtBottom: Settings.data.bar.position === "bottom"
+      readonly property bool barIsVisible: (screen !== null) && (Settings.data.bar.monitors.includes(screen.name)
+                                                                 || (Settings.data.bar.monitors.length === 0))
+
+      Connections {
+        target: ScalingService
+        function onScaleChanged(screenName, scale) {
+          if ((screen !== null) && (screenName === screen.name)) {
+            root.scaling = scale
+          }
+        }
+      }
+
+      Connections {
+        target: panelWindow
+        function onScreenChanged() {
+          root.screen = screen
+          root.scaling = ScalingService.getScreenScale(screen)
+
+          // It's mandatory to force refresh the subloader to ensure the scaling is properly dispatched
+          panelContentLoader.active = false
+          panelContentLoader.active = true
+        }
+      }
+
       visible: true
 
       // Dim desktop if required
@@ -209,8 +210,27 @@ Loader {
         radius: Style.radiusL * scaling
         border.color: Color.mOutline
         border.width: Math.max(1, Style.borderS * scaling)
-        width: panelWidth
+        width: {
-        height: panelHeight
+          var w
+          if (preferredWidthRatio !== undefined) {
+            w = Math.round(Math.max(screen?.width * preferredWidthRatio, preferredWidth) * scaling)
+          } else {
+            w = preferredWidth * scaling
+          }
+          // Clamp width so it is never bigger than the screen
+          return Math.min(w, screen?.width - Style.marginL * 2)
+        }
+        height: {
+          var h
+          if (preferredHeightRatio !== undefined) {
+            h = Math.round(Math.max(screen?.height * preferredHeightRatio, preferredHeight) * scaling)
+          } else {
+            h = preferredHeight * scaling
+          }
+
+          // Clamp width so it is never bigger than the screen
+          return Math.min(h, screen?.height - Style.barHeight * scaling - Style.marginL * 2)
+        }
 
         scale: root.scaleValue
         opacity: root.opacityValue
@@ -221,27 +241,27 @@ Loader {
         property int calculatedX: {
           if (root.useButtonPosition) {
             // Position panel relative to button
-            var targetX = root.buttonPosition.x + (root.buttonWidth / 2) - (panelWidth / 2)
+            var targetX = root.buttonPosition.x + (root.buttonWidth / 2) - (preferredWidth / 2)
 
             // Keep panel within screen bounds
-            var maxX = panelWindow.width - panelWidth - (Style.marginS * scaling)
+            var maxX = panelWindow.width - panelBackground.width - (Style.marginS * scaling)
             var minX = Style.marginS * scaling
 
             return Math.round(Math.max(minX, Math.min(targetX, maxX)))
           } else if (!panelAnchorHorizontalCenter && panelAnchorLeft) {
             return Math.round(Style.marginS * scaling)
           } else if (!panelAnchorHorizontalCenter && panelAnchorRight) {
-            return Math.round(panelWindow.width - panelWidth - (Style.marginS * scaling))
+            return Math.round(panelWindow.width - panelBackground.width - (Style.marginS * scaling))
           } else {
-            return Math.round((panelWindow.width - panelWidth) / 2)
+            return Math.round((panelWindow.width - panelBackground.width) / 2)
           }
         }
 
         property int calculatedY: {
           if (panelAnchorVerticalCenter) {
-            return Math.round((panelWindow.height - panelHeight) / 2)
+            return Math.round((panelWindow.height - panelBackground.height) / 2)
           } else if (panelAnchorBottom) {
-            return Math.round(panelWindow.height - panelHeight - (Style.marginS * scaling))
+            return Math.round(panelWindow.height - panelBackground.height - (Style.marginS * scaling))
           } else if (panelAnchorTop) {
             return Math.round(Style.marginS * scaling)
           } else if (!barAtBottom) {
@@ -249,7 +269,7 @@ Loader {
             return Math.round(Style.marginS * scaling)
           } else {
             // Above the bottom bar
-            return Math.round(panelWindow.height - panelHeight - (Style.marginS * scaling))
+            return Math.round(panelWindow.height - panelBackground.height - (Style.marginS * scaling))
           }
         }
 
@@ -280,6 +300,7 @@ Loader {
         }
 
         Loader {
+          id: panelContentLoader
           anchors.fill: parent
           sourceComponent: root.panelContent
         }