modules/background/Background.qml

@@ -1,7 +1,7 @@
 import QtQuick
 import Quickshell
 import Quickshell.Wayland
-import "../../styled/"
+import "root: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,15 +6,72 @@ import Quickshell
 import "../../../../../config/"
 import "../../../../../styled/"
 
-StyledPopupWindow {
+PopupWindow {
     id: window
 
-    backgroundColor: Theme.palette.base300
-    radius: 8
-
     property QsMenuOpener menuOpener
+    property bool opened: false
 
-    content: ColumnLayout {
+    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
+        radius: 8
+
+        opacity: 0
+
+        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 {
         id: menu
 
         anchors.margins: 30
@@ -61,7 +118,7 @@ StyledPopupWindow {
                         to: "opened"
                         SequentialAnimation {
                             PauseAnimation {
-                                duration: (repeater.count / root.animationDuration) * loader.index
+                                duration: 15 * loader.index
                             }
                             NumberAnimation {
                                 property: "opacity"

styled/StyledPopupWindow.qml

@@ -1,75 +0,0 @@
-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
-            }
-        }
-    }
-}