merge PopupPanel into HoverPanel with popupMode flag, delete PopupPanel

modules/BluetoothMenu.qml

@@ -3,10 +3,11 @@ import Quickshell
 import Quickshell.Io
 import "." as M
 
-M.PopupPanel {
+M.HoverPanel {
     id: menuWindow
 
-    panelWidth: 250
+    popupMode: true
+    contentWidth: 250
 
     property var _devices: []
 

modules/HoverPanel.qml

@@ -3,19 +3,36 @@ import Quickshell
 import Quickshell.Wayland
 import "." as M
 
-// Shared hover/OSD panel PanelWindow — slides down from the bar on hover or
+// Unified bar panel — fullscreen transparent window so content can resize
-// external trigger. Fullscreen transparent window so content can resize freely
+// freely without triggering Wayland surface resizes.
-// without triggering Wayland surface resize events. Parent module computes
+//
-// showPanel and reads panelHovered.
+// Hover mode (popupMode: false, default):
+//   Parent drives visibility via showPanel. Panel auto-closes when showPanel
+//   drops, with a 50ms debounce. Reports panelHovered back to parent.
+//   Pass anchorItem for lazy position computation on each show.
+//
+// Popup mode (popupMode: true):
+//   Shows immediately on creation. Stays open until click-outside or
+//   dismiss() call. Emits dismissed() when closed — caller's LazyLoader
+//   sets active: false. Pass anchorX (screen-relative centre x).
 PanelWindow {
     id: root
 
-    required property bool showPanel
+    property bool popupMode: false
-    required property Item anchorItem
+
+    // Hover mode
+    property bool showPanel: true
+    property Item anchorItem: null
+    property bool panelHovered: false
+
+    // Popup mode
+    property real anchorX: -1
+    signal dismissed
+
+    // Shared
     required property color accentColor
     property string panelNamespace: "nova-panel"
     property real contentWidth: 220
-    property bool panelHovered: false
 
     default property alias content: panelContent.children
 
@@ -36,30 +53,46 @@ PanelWindow {
     margins.top: 0
 
     function _updatePosition() {
-        const pt = anchorItem.mapToGlobal(anchorItem.width / 2, 0);
         const scr = screen;
         const sw = scr?.width ?? 1920;
-        panelContent.x = Math.max(0, Math.min(Math.round(pt.x - (scr?.x ?? 0) - contentWidth / 2), sw - contentWidth));
+        let cx;
+        if (root.anchorItem) {
+            const pt = root.anchorItem.mapToGlobal(root.anchorItem.width / 2, 0);
+            cx = pt.x - (scr?.x ?? 0);
+        } else {
+            cx = root.anchorX;
+        }
+        panelContainer.x = Math.max(0, Math.min(Math.round(cx - root.contentWidth / 2), sw - root.contentWidth));
     }
 
+    function _show() {
+        _updatePosition();
+        _winVisible = true;
+        hideAnim.stop();
+        showAnim.start();
+    }
+
+    function dismiss() {
+        showAnim.stop();
+        hideAnim.start();
+    }
+
+    Component.onCompleted: if (popupMode)
+        _show()
+
     Timer {
         id: _hideTimer
         interval: 50
-        onTriggered: {
+        onTriggered: if (!root.showPanel)
-            if (!root.showPanel) {
+            root.dismiss()
-                showAnim.stop();
-                hideAnim.start();
-            }
-        }
     }
 
     onShowPanelChanged: {
+        if (root.popupMode)
+            return;
         if (showPanel) {
             _hideTimer.stop();
-            _updatePosition();
+            _show();
-            _winVisible = true;
-            hideAnim.stop();
-            showAnim.start();
         } else {
             _hideTimer.restart();
         }
@@ -68,14 +101,14 @@ PanelWindow {
     ParallelAnimation {
         id: showAnim
         NumberAnimation {
-            target: panelContent
+            target: panelContainer
             property: "opacity"
             to: 1
             duration: 120
             easing.type: Easing.OutCubic
         }
         NumberAnimation {
-            target: panelContent
+            target: panelContainer
             property: "y"
             to: 0
             duration: 150
@@ -86,53 +119,81 @@ PanelWindow {
     ParallelAnimation {
         id: hideAnim
         NumberAnimation {
-            target: panelContent
+            target: panelContainer
             property: "opacity"
             to: 0
             duration: 150
             easing.type: Easing.InCubic
         }
         NumberAnimation {
-            target: panelContent
+            target: panelContainer
             property: "y"
-            to: -panelContent.height
+            to: -panelContainer.height
             duration: 150
             easing.type: Easing.InCubic
         }
-        onFinished: root._winVisible = false
+        onFinished: {
-    }
+            root._winVisible = false;
-
+            if (root.popupMode)
-    M.PopupBackground {
+                root.dismissed();
-        x: panelContent.x
-        y: panelContent.y
-        width: panelContent.width
-        height: panelContent.height
-        opacity: panelContent.opacity * Math.max(M.Theme.barOpacity, 0.85)
-        accentColor: root.accentColor
-    }
-
-    Column {
-        id: panelContent
-        width: root.contentWidth
-        opacity: 0
-        y: -height
-
-        HoverHandler {
-            onHoveredChanged: root.panelHovered = hovered
         }
     }
 
-    // Border overlay — drawn on top of content so full-bleed items (e.g. album art) don't cover it
+    // Popup mode: click-outside dismiss (declared first = lowest z = below content)
-    Rectangle {
+    MouseArea {
-        x: panelContent.x
+        anchors.fill: parent
-        y: panelContent.y
+        visible: root.popupMode
-        width: panelContent.width
+        enabled: root.popupMode
+        onClicked: root.dismiss()
+    }
+
+    M.PopupBackground {
+        x: panelContainer.x
+        y: panelContainer.y
+        width: panelContainer.width
+        height: panelContainer.height
+        opacity: panelContainer.opacity * Math.max(M.Theme.barOpacity, 0.85)
+        accentColor: root.accentColor
+    }
+
+    Item {
+        id: panelContainer
+        x: 0
+        y: -height
+        width: root.contentWidth
         height: panelContent.height
+        opacity: 0
+
+        // Popup mode: eat clicks on panel background so outer dismiss doesn't fire
+        MouseArea {
+            anchors.fill: parent
+            visible: root.popupMode
+            enabled: root.popupMode
+        }
+
+        Column {
+            id: panelContent
+            width: root.contentWidth
+
+            HoverHandler {
+                enabled: !root.popupMode
+                onHoveredChanged: if (!root.popupMode)
+                    root.panelHovered = hovered
+            }
+        }
+    }
+
+    // Border overlay — on top of content so full-bleed items don't cover it
+    Rectangle {
+        x: panelContainer.x
+        y: panelContainer.y
+        width: panelContainer.width
+        height: panelContainer.height
         color: "transparent"
         border.color: root.accentColor
         border.width: 1
         bottomLeftRadius: M.Theme.radius
         bottomRightRadius: M.Theme.radius
-        opacity: panelContent.opacity
+        opacity: panelContainer.opacity
     }
 }

modules/NetworkMenu.qml

@@ -3,10 +3,11 @@ import Quickshell
 import Quickshell.Io
 import "." as M
 
-M.PopupPanel {
+M.HoverPanel {
     id: menuWindow
 
-    panelWidth: 250
+    popupMode: true
+    contentWidth: 250
 
     property var _networks: []
 

modules/PopupPanel.qml

@@ -1,111 +0,0 @@
-import QtQuick
-import Quickshell
-import Quickshell.Wayland
-import "." as M
-
-// Shared flyout popup window — slides down from the bar, dismisses on
-// click outside. Created on demand via Loader; animates in on creation,
-// animates out then emits dismissed() for the Loader to deactivate.
-PanelWindow {
-    id: root
-
-    default property alias content: contentCol.children
-    required property var screen
-    required property real anchorX
-    property real panelWidth: 220
-    property color accentColor: M.Theme.base05
-
-    signal dismissed
-
-    visible: true
-    color: "transparent"
-
-    WlrLayershell.layer: WlrLayer.Overlay
-    WlrLayershell.exclusiveZone: 0
-    WlrLayershell.namespace: "nova-popup"
-
-    anchors.top: true
-    anchors.left: true
-    anchors.right: true
-    anchors.bottom: true
-
-    Component.onCompleted: showAnim.start()
-
-    function dismiss() {
-        showAnim.stop();
-        hideAnim.start();
-    }
-
-    // Click outside → dismiss
-    MouseArea {
-        anchors.fill: parent
-        onClicked: root.dismiss()
-    }
-
-    Item {
-        id: panel
-
-        x: Math.max(0, Math.min(Math.round(root.anchorX - contentCol.width / 2), root.width - contentCol.width))
-        y: 0
-        width: contentCol.width
-        height: contentCol.height
-        opacity: 0
-
-        // Eat clicks inside the panel
-        MouseArea {
-            anchors.fill: parent
-        }
-
-        M.PopupBackground {
-            anchors.fill: parent
-            accentColor: root.accentColor
-        }
-
-        Column {
-            id: contentCol
-            width: root.panelWidth
-            topPadding: 4
-            bottomPadding: 4
-            spacing: 2
-        }
-    }
-
-    ParallelAnimation {
-        id: showAnim
-        NumberAnimation {
-            target: panel
-            property: "opacity"
-            from: 0
-            to: 1
-            duration: 150
-            easing.type: Easing.OutCubic
-        }
-        NumberAnimation {
-            target: panel
-            property: "y"
-            from: -panel.height
-            to: 0
-            duration: 200
-            easing.type: Easing.OutCubic
-        }
-    }
-
-    ParallelAnimation {
-        id: hideAnim
-        NumberAnimation {
-            target: panel
-            property: "opacity"
-            to: 0
-            duration: 150
-            easing.type: Easing.InCubic
-        }
-        NumberAnimation {
-            target: panel
-            property: "y"
-            to: -panel.height
-            duration: 150
-            easing.type: Easing.InCubic
-        }
-        onFinished: root.dismissed()
-    }
-}

modules/PowerMenu.qml

@@ -2,10 +2,11 @@ import QtQuick
 import Quickshell
 import "." as M
 
-M.PopupPanel {
+M.HoverPanel {
     id: menuWindow
 
-    panelWidth: 180
+    popupMode: true
+    contentWidth: 180
 
     signal runCommand(var cmd)
 
@@ -56,7 +57,7 @@ M.PopupPanel {
             required property var modelData
             required property int index
 
-            width: menuWindow.panelWidth
+            width: menuWindow.contentWidth
             height: 32
 
             Rectangle {

modules/qmldir

@@ -12,7 +12,6 @@ Clock 1.0 Clock.qml
 Volume 1.0 Volume.qml
 Tray 1.0 Tray.qml
 TrayMenu 1.0 TrayMenu.qml
-PopupPanel 1.0 PopupPanel.qml
 PopupBackground 1.0 PopupBackground.qml
 HoverPanel 1.0 HoverPanel.qml
 PowerMenu 1.0 PowerMenu.qml