feat(bar): unify extraction to StyledPopup and add namespace

.config/quickshell/ii/modules/bar/BatteryIndicator.qml

@@ -95,39 +95,13 @@ MouseArea {
         }
     }
 
-    LazyLoader {
+    StyledPopup {
-        id: popupLoader
+        hoverTarget: root
-        active: root.containsMouse
+        offsetY: -30
-
+        maskEnabled: true
-        component: PanelWindow {
+        contentComponent: BatteryPopup {
-            id: popupWindow
-            visible: true
-            color: "transparent"
-            exclusiveZone: 0
-
-            anchors.top: true
-            anchors.left: true
-
-            implicitWidth: batteryPopup.implicitWidth
-            implicitHeight: batteryPopup.implicitHeight
-
-            margins {
-                left: root.mapToGlobal(Qt.point(
-                    (root.width - batteryPopup.implicitWidth) / 2,
-                    0
-                )).x
-                top: root.mapToGlobal(Qt.point(0, root.height)).y - 30 
-            }
-
-            mask: Region {
-                item: batteryPopup
-            }
-
-            BatteryPopup {
             id: batteryPopup
             anchors.centerIn: parent
         }
     }
 }
-
-}

.config/quickshell/ii/modules/bar/ClockWidget.qml

@@ -46,34 +46,10 @@ Item {
         acceptedButtons: Qt.NoButton
     }
 
-    LazyLoader {
+    StyledPopup {
-        id: popupLoader
+        hoverTarget: mouseArea
-        active: mouseArea.containsMouse
+        offsetY: -30
-
+        contentComponent: Rectangle {
-        component: PanelWindow {
-            id: popupWindow
-            visible: true
-            implicitWidth: datePopup.implicitWidth
-            implicitHeight: datePopup.implicitHeight
-            color: "transparent"
-            exclusiveZone: 0
-
-            anchors.top: true
-            anchors.left: true
-
-            margins {
-                left: root.mapToGlobal(Qt.point(
-                    (root.width - datePopup.implicitWidth) / 2,
-                    0
-                )).x
-                top: root.mapToGlobal(Qt.point(0, root.height)).y - 30 
-            }
-
-            mask: Region {
-                item: datePopup
-            }
-            
-            Rectangle {
             id: datePopup
             readonly property real margin: 12
             implicitWidth: columnLayout.implicitWidth + margin * 2
@@ -138,8 +114,6 @@ Item {
                 }
             }
         }
-
-        }
     }
 
     RowLayout {

.config/quickshell/ii/modules/bar/Resource.qml

@@ -68,32 +68,10 @@ Item {
         enabled: resourceRowLayout.x >= 0 && root.width > 0 && root.visible
     }
 
-    LazyLoader {
+    StyledPopup {
-        id: popupLoader
+        hoverTarget: mouseArea
-        active: mouseArea.containsMouse
+        offsetY: -30
-
+        contentComponent: Rectangle {
-        component: PanelWindow {
-            id: popupWindow
-            visible: true
-
-            color: "transparent"
-            exclusiveZone: 0
-            anchors.top: true
-            anchors.left: true
-
-            implicitWidth: resourcePopup.implicitWidth
-            implicitHeight: resourcePopup.implicitHeight
-
-            margins {
-                left: root.mapToGlobal(Qt.point(
-                    (root.width - resourcePopup.implicitWidth) / 2,
-                    0
-                )).x
-                top: root.mapToGlobal(Qt.point(0, root.height)).y - 30 
-            }
-
-            
-            Rectangle {
             id: resourcePopup
             readonly property real margin: 10
             implicitWidth: columnLayout.implicitWidth + margin * 2
@@ -132,7 +110,7 @@ Item {
                         }
                     }
                 }
-                }
+
             }
         }
     }

.config/quickshell/ii/modules/bar/weather/WeatherBar.qml

@@ -36,37 +36,12 @@ MouseArea {
         }
     }
 
-    LazyLoader {
+    StyledPopup {
-        id: popupLoader
+        hoverTarget: root
-        active: root.containsMouse
+        offsetY: -25
-
+        contentComponent: WeatherPopup {
-        component: PanelWindow {
-            id: popupWindow
-            visible: true
-            implicitWidth: weatherPopup.implicitWidth
-            implicitHeight: weatherPopup.implicitHeight
-
-            color: "transparent"
-            exclusiveZone: 0
-
-            anchors.top: true
-            anchors.left: true
-
-            margins {
-                left: root.mapToGlobal(Qt.point(
-                    (root.width - weatherPopup.implicitWidth) / 2,
-                    0
-                )).x
-                top: root.mapToGlobal(Qt.point(0, root.height)).y - 25
-            }
-
-            mask: Region {
-                item: weatherPopup
-            }
-            
-            WeatherPopup {
             id: weatherPopup
-            }
+            anchors.centerIn: parent
         }
     }
 }

.config/quickshell/ii/modules/common/widgets/StyledPopup.qml

@@ -0,0 +1,57 @@
+import qs
+import qs.modules.common
+import qs.modules.common.widgets
+import qs.services
+import QtQuick
+import QtQuick.Layouts
+import Quickshell
+import Quickshell.Wayland
+
+LazyLoader {
+    id: root
+
+    property Item hoverTarget
+    property real offsetY: -30
+    property bool maskEnabled: true
+    property Component contentComponent
+
+    active: hoverTarget && hoverTarget.containsMouse
+
+    component: PanelWindow {
+        id: popupWindow
+        visible: true
+        color: "transparent"
+        exclusiveZone: 0
+        anchors.top: true
+        anchors.left: true
+
+        implicitWidth: popupContent.implicitWidth
+        implicitHeight: popupContent.implicitHeight
+
+        margins {
+            left: hoverTarget
+                ? hoverTarget.mapToGlobal(Qt.point(
+                      (hoverTarget.width - popupContent.implicitWidth) / 2,
+                      0
+                  )).x
+                : 0
+            top: hoverTarget
+                ? hoverTarget.mapToGlobal(Qt.point(0, hoverTarget.height)).y + offsetY
+                : 0
+        }
+
+        mask: maskEnabled ? popupMask : undefined
+        WlrLayershell.namespace: "quickshell:styledPopup" //maybe this can fix with the popups not showing ?
+
+        Region {
+            id: popupMask
+            item: popupContent
+        }
+
+        Loader {
+            id: popupContent
+            sourceComponent: root.contentComponent
+            anchors.centerIn: parent
+        }
+    }
+}