allow drawers to close on parent window focus lost

components/StyledDrawer.qml

@@ -1,11 +1,29 @@
 import qs.config
 import QtQuick
 import QtQuick.Controls
+import Quickshell
+import Quickshell.Hyprland
+import Quickshell.Widgets
 
 Drawer {
     id: control
     dim: false
-    background: Rectangle {
+    property bool focused: false
+
+    onVisibleChanged: {
+        focused = visible;
+    }
+
+    HyprlandFocusGrab {
+        active: control.focused
+        windows: [QsWindow.window]
+        onCleared: {
+            control.focused = false;
+        }
+    }
+
+    background: ClippingWrapperRectangle {
+        margin: 4
         Component.onCompleted: {
             if (control.edge == Qt.TopEdge) {
                 radius = 8;
@@ -20,6 +38,24 @@ Drawer {
                 topRightRadius = 8;
             }
         }
-        color: Styling.theme.base100
+        color: Styling.theme.base300
+
+        Rectangle {
+            Component.onCompleted: {
+                if (control.edge == Qt.TopEdge) {
+                    radius = 8;
+                } else if (control.edge == Qt.LeftEdge) {
+                    topRightRadius = 8;
+                    bottomRightRadius = 8;
+                } else if (control.edge == Qt.RightEdge) {
+                    topLeftRadius = 8;
+                    bottomLeftRadius = 8;
+                } else if (control.edge == Qt.BottomEdge) {
+                    topLeftRadius = 8;
+                    topRightRadius = 8;
+                }
+            }
+            color: Styling.theme.base100
+        }
     }
 }

modules/bar/components/tray/Tray.qml

@@ -10,7 +10,7 @@ RowLayout {
     spacing: 4
 
     Repeater {
-        model: SystemTray.items
+        model: SystemTray.items.values
 
         Loader {
             id: loader

modules/bar/components/tray/TrayItem.qml

@@ -5,12 +5,11 @@ import QtQuick
 import Quickshell
 import Quickshell.Services.SystemTray
 import Quickshell.Widgets
-import "menu/"
 
 StyledIconButton {
     id: root
 
-    property SystemTrayItem trayItem
+    required property SystemTrayItem trayItem
 
     onClicked: menu.toggle()
 
@@ -28,7 +27,7 @@ StyledIconButton {
         }
     }
 
-    Menu {
+    TrayMenu {
         id: menu
 
         anchor.item: root

modules/bar/components/tray/TrayMenu.qml

@@ -0,0 +1,49 @@
+pragma ComponentBehavior: Bound
+
+import qs.components
+import qs.config
+import QtQuick
+import QtQuick.Layouts
+import Quickshell
+import Quickshell.Widgets
+
+StyledPopupWindow {
+    id: window
+
+    required property QsMenuOpener menuOpener
+
+    content: ColumnLayout {
+        spacing: 4
+        Repeater {
+            model: window.menuOpener.children.values
+            delegate: Loader {
+                id: loader
+                required property QsMenuEntry modelData
+
+                active: true
+
+                Component.onCompleted: {
+                    console.log(modelData.text);
+                }
+
+                Layout.fillWidth: true
+                Layout.minimumWidth: 160
+
+                sourceComponent: modelData.isSeparator ? menuSeperator : menuItem
+                property Component menuSeperator: WrapperItem {
+                    margin: 4
+                    Rectangle {
+                        implicitHeight: 2
+
+                        color: Styling.theme.base200
+                    }
+                }
+                property Component menuItem: StyledButton {
+                    text: loader.modelData.text
+
+                    onClicked: loader.modelData.triggered()
+                }
+            }
+        }
+    }
+}

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

@@ -1,39 +0,0 @@
-pragma ComponentBehavior: Bound
-
-import qs.components
-import qs.config
-import QtQuick
-import QtQuick.Layouts
-import Quickshell
-
-StyledPopupWindow {
-    id: window
-
-    property QsMenuOpener menuOpener
-
-    content: ColumnLayout {
-        spacing: 8
-        Repeater {
-            model: window.menuOpener.children
-            delegate: Loader {
-                id: loader
-                required property QsMenuEntry modelData
-
-                active: true
-
-                Layout.fillWidth: true
-                Layout.minimumWidth: 160
-
-                sourceComponent: modelData.isSeparator ? menuSeperator : menuItem
-                property Component menuSeperator: Rectangle {
-                    implicitHeight: 2
-
-                    color: Styling.theme.base100
-                }
-                property Component menuItem: MenuItem {
-                    menuEntry: loader.modelData
-                }
-            }
-        }
-    }
-}

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

@@ -1,12 +0,0 @@
-import qs.components
-import Quickshell
-
-StyledButton {
-    id: root
-
-    property QsMenuEntry menuEntry
-
-    text: root.menuEntry.text
-
-    onClicked: menuEntry.triggered()
-}

modules/drawers/dashboard/Dashboard.qml

@@ -12,6 +12,10 @@ StyledDrawer {
 
     visible: Visibility.dashboard
 
+    onFocusedChanged: {
+        Visibility.dashboard = focused;
+    }
+
     WrapperItem {
         margin: 32
         ColumnLayout {