fixed notifications font rendering

bar/modules/Volume.qml

@@ -6,19 +6,11 @@ import Quickshell.Wayland
 import Quickshell.Services.Pipewire
 
 import "../../config" as Cfg
+import "../../components"
 
-Rectangle {
+ModuleChip {
     id: root
 
-    property real panelRadius: Cfg.Config.radius / 2
-    property int  borderWidth: Cfg.Config.panelBorderWidth
-    property bool isTop:       true
-    property var  targetScreen: null
-    property int  barHeight:    Cfg.Config.barHeight
-    property int  barMargin:    Cfg.Config.margin
-
-    readonly property var t: Cfg.Config.theme
-
     property int outputMaxVolume: Cfg.Config.volumeOutputMax
     property int inputMaxVolume:  Cfg.Config.volumeInputMax
 
@@ -165,54 +157,11 @@ Rectangle {
         }
     }
 
-    PanelWindow {
+    PopupPanel {
         id: volumePopup
-        screen:  root.targetScreen
-        visible: false
-        color:   "transparent"
-
-        property bool popupOpen: false
-
-        function open()   { hideTimer.stop(); visible = true; popupOpen = true }
-        function close()  { popupOpen = false; hideTimer.restart() }
-        function toggle() { popupOpen ? close() : open() }
-
-        Timer {
-            id: hideTimer
-            interval: Cfg.Config.popupAnimDuration + 70
-            onTriggered: volumePopup.visible = false
-        }
-
-        anchors { top: true; bottom: true; left: true; right: true }
-        WlrLayershell.layer:         WlrLayer.Top
-        WlrLayershell.namespace:     "main-shell-volume"
-        WlrLayershell.exclusiveZone: -1
-        mask: popupOpen ? null : _noInput
-        Region { id: _noInput }
-
-        MouseArea {
-            anchors.fill: parent
-            onClicked: volumePopup.close()
-        }
-
-        Item {
-            id: volClipContainer
-            readonly property int cardW:     Cfg.Config.volumePopupWidth
-            readonly property int screenPad: root.barMargin + 10
-
-            x: {
-                let cx = root.mapToItem(null, 0, 0).x + root.width / 2
-                return Math.max(screenPad, Math.min(cx - cardW / 2, parent.width - cardW - screenPad))
-            }
-            width: cardW
-
-            anchors.top:          root.isTop ? parent.top    : undefined
-            anchors.bottom:       root.isTop ? undefined     : parent.bottom
-            anchors.topMargin:    root.isTop ? (root.barHeight + 10) : 0
-            anchors.bottomMargin: root.isTop ? 0 : (root.barHeight + 10)
-            height: parent.height - root.barHeight - 10
-
-            clip: true
+        ns: "volume"
+        chipRoot: root
+        cardWidth: Cfg.Config.volumePopupWidth
 
             Rectangle {
                 id: volCard
@@ -340,7 +289,6 @@ Rectangle {
                     Item { height: 2 }
                 }
             }
-        }
     }
 
     component VolumeSection: ColumnLayout {