use new styled popup window for tray item menu

modules/background/Background.qml

@@ -1,7 +1,7 @@
 import QtQuick
 import Quickshell
 import Quickshell.Wayland
-import "root:styled"
+import "../../styled/"
 
 Variants {
     model: Quickshell.screens

modules/bar/Bar.qml

@@ -59,9 +59,9 @@ Scope {
                     anchors.verticalCenter: parent.verticalCenter
                 }
 
-                // Tray {
-                //     anchors.verticalCenter: parent.verticalCenter
-                // }
+                Tray {
+                    anchors.verticalCenter: parent.verticalCenter
+                }
             }
 
             Row {

modules/bar/components/tray/menu/Menu.qml

@@ -6,72 +6,15 @@ import Quickshell
 import "../../../../../config/"
 import "../../../../../styled/"
 
-PopupWindow {
+StyledPopupWindow {
     id: window
 
-    property QsMenuOpener menuOpener
-    property bool opened: false
-
-    color: 'transparent'
-
-    implicitWidth: menu.width
-    implicitHeight: menu.height
-
-    Rectangle {
-        id: background
-
-        anchors.fill: menu
-        color: Theme.palette.base300
-        border.color: Theme.palette.base200
-        border.width: 2
+    backgroundColor: Theme.palette.base300
     radius: 8
 
-        opacity: 0
+    property QsMenuOpener menuOpener
 
-        states: State {
-            name: "opened"
-            when: window.opened
-            PropertyChanges {
-                background {
-                    opacity: 1
-                }
-            }
-        }
-
-        transitions: [
-            Transition {
-                from: ""
-                to: "opened"
-                SequentialAnimation {
-                    ScriptAction {
-                        script: window.visible = true
-                    }
-                    NumberAnimation {
-                        property: "background.opacity"
-                        duration: 200
-                    }
-                }
-            },
-            Transition {
-                from: "opened"
-                to: ""
-                SequentialAnimation {
-                    PauseAnimation {
-                        duration: repeater.count * 15
-                    }
-                    NumberAnimation {
-                        property: "background.opacity"
-                        duration: 200
-                    }
-                    ScriptAction {
-                        script: window.visible = false
-                    }
-                }
-            }
-        ]
-    }
-
-    ColumnLayout {
+    content: ColumnLayout {
         id: menu
 
         anchors.margins: 30
@@ -118,7 +61,7 @@ PopupWindow {
                         to: "opened"
                         SequentialAnimation {
                             PauseAnimation {
-                                duration: 15 * loader.index
+                                duration: (repeater.count / root.animationDuration) * loader.index
                             }
                             NumberAnimation {
                                 property: "opacity"

styled/StyledPopupWindow.qml

@@ -0,0 +1,75 @@
+import QtQuick
+import Quickshell
+import Quickshell.Widgets
+
+PopupWindow {
+    id: root
+    property bool opened: false
+    property int animationDuration: 200
+    property int margins: 10
+    property alias backgroundColor: background.color
+    property alias radius: background.radius
+    required property Component content
+
+    color: "transparent"
+
+    implicitWidth: background.width
+    implicitHeight: background.height
+
+    Rectangle {
+        id: background
+
+        implicitWidth: margins.width
+        implicitHeight: margins.height
+
+        opacity: 0
+        Behavior on opacity {
+            NumberAnimation {
+                duration: root.animationDuration
+            }
+        }
+
+        states: State {
+            name: "opened"
+            when: root.opened
+            PropertyChanges {
+                background {
+                    opacity: 1
+                }
+            }
+        }
+
+        transitions: [
+            Transition {
+                from: ""
+                to: "opened"
+                ScriptAction {
+                    script: root.visible = true
+                }
+            },
+            Transition {
+                from: "opened"
+                to: ""
+                SequentialAnimation {
+                    PauseAnimation {
+                        duration: root.animationDuration
+                    }
+                    ScriptAction {
+                        script: root.visible = false
+                    }
+                }
+            }
+        ]
+
+        WrapperItem {
+            id: margins
+
+            margin: root.margins
+
+            Loader {
+                active: root.visible
+                sourceComponent: content
+            }
+        }
+    }
+}