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
+            id: batteryPopup
-            visible: true
+            anchors.centerIn: parent
-            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,99 +46,73 @@ Item {
         acceptedButtons: Qt.NoButton
     }
 
-    LazyLoader {
+    StyledPopup {
-        id: popupLoader
+        hoverTarget: mouseArea
-        active: mouseArea.containsMouse
+        offsetY: -30
+        contentComponent: Rectangle {
+            id: datePopup
+            readonly property real margin: 12
+            implicitWidth: columnLayout.implicitWidth + margin * 2
+            implicitHeight: columnLayout.implicitHeight + margin * 2
+            color: Appearance.colors.colLayer0
+            radius: Appearance.rounding.small
+            border.width: 1
+            border.color: Appearance.colors.colLayer0Border
+            clip: true
 
-        component: PanelWindow {
+            ColumnLayout {
-            id: popupWindow
+                id: columnLayout
-            visible: true
+                anchors.centerIn: parent
-            implicitWidth: datePopup.implicitWidth
+                spacing: 8
-            implicitHeight: datePopup.implicitHeight
-            color: "transparent"
-            exclusiveZone: 0
 
-            anchors.top: true
+                // Date + Time row
-            anchors.left: true
+                RowLayout {
+                    spacing: 5
+                    Layout.fillWidth: true
+                    StyledText {
+                        Layout.fillWidth: true
+                        horizontalAlignment: Text.AlignLeft
+                        color: Appearance.colors.colOnLayer1
+                        text: `${root.formattedDate} • ${root.formattedTime}`
+                    }
+                }
 
-            margins {
+                // Uptime row
-                left: root.mapToGlobal(Qt.point(
+                RowLayout {
-                    (root.width - datePopup.implicitWidth) / 2,
+                    spacing: 5
-                    0
+                    Layout.fillWidth: true
-                )).x
+                    MaterialSymbol { text: "timelapse"; color: Appearance.m3colors.m3onSecondaryContainer }
-                top: root.mapToGlobal(Qt.point(0, root.height)).y - 30 
+                    StyledText { text: Translation.tr("Uptime:"); color: Appearance.colors.colOnLayer1 }
-            }
+                    StyledText {
-
+                        Layout.fillWidth: true
-            mask: Region {
+                        horizontalAlignment: Text.AlignRight
-                item: datePopup
+                        color: Appearance.colors.colOnLayer1
-            }
+                        text: root.formattedUptime
-            
+                    }
-            Rectangle {
+                }
-                id: datePopup
-                readonly property real margin: 12
-                implicitWidth: columnLayout.implicitWidth + margin * 2
-                implicitHeight: columnLayout.implicitHeight + margin * 2
-                color: Appearance.colors.colLayer0
-                radius: Appearance.rounding.small
-                border.width: 1
-                border.color: Appearance.colors.colLayer0Border
-                clip: true
 
+                // Upcoming tasks row
                 ColumnLayout {
-                    id: columnLayout
+                    spacing: 2
-                    anchors.centerIn: parent
+                    Layout.fillWidth: true
-                    spacing: 8
 
-                    // Date + Time row
                     RowLayout {
                         spacing: 5
                         Layout.fillWidth: true
-                        StyledText {
+                        MaterialSymbol { text: "checklist"; color: Appearance.m3colors.m3onSecondaryContainer }
-                            Layout.fillWidth: true
+                        StyledText { text: Translation.tr("Upcoming Tasks:"); color: Appearance.colors.colOnLayer1 }
-                            horizontalAlignment: Text.AlignLeft
-                            color: Appearance.colors.colOnLayer1
-                            text: `${root.formattedDate} • ${root.formattedTime}`
-                        }
                     }
 
-                    // Uptime row
+                    StyledText {
-                    RowLayout {
-                        spacing: 5
                         Layout.fillWidth: true
-                        MaterialSymbol { text: "timelapse"; color: Appearance.m3colors.m3onSecondaryContainer }
+                        topPadding: 5
-                        StyledText { text: Translation.tr("Uptime:"); color: Appearance.colors.colOnLayer1 }
+                        horizontalAlignment: Text.AlignLeft
-                        StyledText {
+                        wrapMode: Text.Wrap
-                            Layout.fillWidth: true
+                        color: Appearance.colors.colOnLayer1
-                            horizontalAlignment: Text.AlignRight
+                        text: root.todosSection
-                            color: Appearance.colors.colOnLayer1
-                            text: root.formattedUptime
-                        }
-                    }
-
-                    // Upcoming tasks row
-                    ColumnLayout {
-                        spacing: 2
-                        Layout.fillWidth: true
-
-                        RowLayout {
-                            spacing: 5
-                            Layout.fillWidth: true
-                            MaterialSymbol { text: "checklist"; color: Appearance.m3colors.m3onSecondaryContainer }
-                            StyledText { text: Translation.tr("Upcoming Tasks:"); color: Appearance.colors.colOnLayer1 }
-                        }
-
-                        StyledText {
-                            Layout.fillWidth: true
-                            topPadding: 5
-                            horizontalAlignment: Text.AlignLeft
-                            wrapMode: Text.Wrap
-                            color: Appearance.colors.colOnLayer1
-                            text: root.todosSection
-                        }
                     }
                 }
             }
-
         }
     }
 

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

@@ -68,71 +68,49 @@ Item {
         enabled: resourceRowLayout.x >= 0 && root.width > 0 && root.visible
     }
 
-    LazyLoader {
+    StyledPopup {
-        id: popupLoader
+        hoverTarget: mouseArea
-        active: mouseArea.containsMouse
+        offsetY: -30
+        contentComponent: Rectangle {
+            id: resourcePopup
+            readonly property real margin: 10
+            implicitWidth: columnLayout.implicitWidth + margin * 2
+            implicitHeight: columnLayout.implicitHeight + margin * 2
+            color: Appearance.colors.colLayer0
+            radius: Appearance.rounding.small
+            border.width: 1
+            border.color: Appearance.colors.colLayer0Border
+            clip: true
 
-        component: PanelWindow {
+            ColumnLayout {
-            id: popupWindow
+                id: columnLayout
-            visible: true
+                anchors.centerIn: parent
+                spacing: 6
 
-            color: "transparent"
+                Repeater {
-            exclusiveZone: 0
+                    model: root.tooltipData
-            anchors.top: true
+                    delegate: RowLayout {
-            anchors.left: true
+                        spacing: 5
+                        Layout.fillWidth: true
 
-            implicitWidth: resourcePopup.implicitWidth
+                        MaterialSymbol {
-            implicitHeight: resourcePopup.implicitHeight
+                            text: modelData.icon
-
+                            color: Appearance.m3colors.m3onSecondaryContainer
-            margins {
+                        }
-                left: root.mapToGlobal(Qt.point(
+                        StyledText {
-                    (root.width - resourcePopup.implicitWidth) / 2,
+                            text: modelData.label
-                    0
+                            color: Appearance.colors.colOnLayer1
-                )).x
+                        }
-                top: root.mapToGlobal(Qt.point(0, root.height)).y - 30 
+                        StyledText {
-            }
-
-            
-            Rectangle {
-                id: resourcePopup
-                readonly property real margin: 10
-                implicitWidth: columnLayout.implicitWidth + margin * 2
-                implicitHeight: columnLayout.implicitHeight + margin * 2
-                color: Appearance.colors.colLayer0
-                radius: Appearance.rounding.small
-                border.width: 1
-                border.color: Appearance.colors.colLayer0Border
-                clip: true
-
-                ColumnLayout {
-                    id: columnLayout
-                    anchors.centerIn: parent
-                    spacing: 6
-
-                    Repeater {
-                        model: root.tooltipData
-                        delegate: RowLayout {
-                            spacing: 5
                             Layout.fillWidth: true
-
+                            horizontalAlignment: Text.AlignRight
-                            MaterialSymbol {
+                            visible: modelData.value !== ""
-                                text: modelData.icon
+                            color: Appearance.colors.colOnLayer1
-                                color: Appearance.m3colors.m3onSecondaryContainer
+                            text: modelData.value
-                            }
-                            StyledText {
-                                text: modelData.label
-                                color: Appearance.colors.colOnLayer1
-                            }
-                            StyledText {
-                                Layout.fillWidth: true
-                                horizontalAlignment: Text.AlignRight
-                                visible: modelData.value !== ""
-                                color: Appearance.colors.colOnLayer1
-                                text: modelData.value
-                            }
                         }
                     }
                 }
+
             }
         }
     }

.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: weatherPopup
-            id: popupWindow
+            anchors.centerIn: parent
-            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
-            }
         }
     }
 }

.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
+        }
+    }
+}