components/StyledMenu.qml

@@ -0,0 +1,34 @@
+import qs.config
+import qs.services
+import QtQuick
+import QtQuick.Controls
+
+Menu {
+    id: root
+
+    palette.window: Theme.palette.base100
+    palette.base: Theme.palette.base100
+
+    focus: true
+    closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutsideParent
+    popupType: Popup.Window
+
+    function toggle() {
+        visible ? close() : open();
+    }
+
+    enter: Transition {
+        NumberAnimation {
+            property: "opacity"
+            from: 0.0
+            to: 1.0
+        }
+    }
+    exit: Transition {
+        NumberAnimation {
+            property: "opacity"
+            from: 1.0
+            to: 0.0
+        }
+    }
+}

components/StyledMenuItem.qml

@@ -0,0 +1,9 @@
+import qs.config
+import QtQuick
+import QtQuick.Controls
+
+MenuItem {
+    palette.text: Theme.palette.basecontent
+    palette.highlight: Theme.palette.primary
+    palette.highlightedText: Theme.palette.primarycontent
+}

components/StyledMenuSeparator.qml

@@ -0,0 +1,9 @@
+import qs.config
+import QtQuick
+import QtQuick.Controls
+
+MenuSeparator {
+    palette.text: Theme.palette.basecontent
+    palette.highlight: Theme.palette.primary
+    palette.highlightedText: Theme.palette.primarycontent
+}

components/StyledPopup.qml

@@ -6,10 +6,9 @@ import Quickshell.Hyprland
 PopupWindow {
     id: root
 
-    implicitWidth: contentItem.children.reduce((prev, child) => Math.max(prev, child.width), 0)
+    implicitWidth: background.implicitWidth
-    implicitHeight: contentItem.children.reduce((prev, child) => prev + child.height, 0)
+    implicitHeight: background.implicitHeight
     color: "transparent"
-    contentItem.focus: visible
 
     function open() {
         visible = true;
@@ -19,10 +18,8 @@ PopupWindow {
         visible = false;
     }
 
-    // WlrLayershell.layer: WlrLayer.Top
-    // WlrLayershell.keyboardFocus: root.visible ? WlrKeyboardFocus.OnDemand : WlrKeyboardFocus.None
     HyprlandFocusGrab {
-        active: root.visible
+        id: grab
         windows: [root]
         onCleared: {
             root.close();
@@ -31,7 +28,9 @@ PopupWindow {
 
     Rectangle {
         id: background
-        anchors.fill: parent
+        anchors.centerIn: root
+        implicitWidth: root.contentItem.children.reduce((prev, child) => Math.max(prev, child.width), 0)
+        implicitHeight: root.contentItem.children.reduce((prev, child) => prev + child.height, 0)
         color: Theme.palette.base200
         radius: 8
     }

modules/Shell.qml

@@ -78,11 +78,7 @@ Variants {
         Launcher {}
         Pomodoro {}
         PowerMenu {}
-        Storybook {
+        Storybook {}
-            anchor.window: topWindow
-            anchor.rect.x: topWindow.width / 2 - width / 2
-            anchor.rect.y: topWindow.height / 4
-        }
         Drawers {}
     }
 }

modules/storybook/Storybook.qml

@@ -4,14 +4,35 @@ import qs.components
 import qs.config
 import qs.constants
 import qs.services
+import Quickshell.Hyprland
+import Quickshell.Wayland
 import QtQuick
 import QtQuick.Controls
 import QtQuick.Layouts
 
-StyledPopupWindow {
+StyledWindow {
     id: root
+    name: "storybook"
 
     visible: Visibility.storybook
+    implicitWidth: rect.width
+    implicitHeight: rect.height
+
+    WlrLayershell.layer: WlrLayer.Top
+    WlrLayershell.keyboardFocus: root.visible ? WlrKeyboardFocus.OnDemand : WlrKeyboardFocus.None
+
+    HyprlandFocusGrab {
+        active: Visibility.storybook
+        windows: [root]
+        onCleared: {
+            Visibility.storybook = false;
+        }
+    }
+
+    StyledWrapperRectangle {
+        id: rect
+
+        margin: 48
 
         GridLayout {
             id: grid
@@ -131,6 +152,36 @@ StyledPopupWindow {
                 }
             }
 
+            ColumnLayout {
+                StyledText {
+                    text: "Popup"
+                    font.pixelSize: 18
+                }
+                Button {
+                    id: fileButton
+                    text: "File"
+                    onPressed: menu.visible ? menu.close() : menu.open()
+
+                    StyledPopup {
+                        id: menu
+
+                        anchor.item: fileButton
+
+                        Column {
+                            StyledButton {
+                                text: "New..."
+                            }
+                            StyledButton {
+                                text: "Open..."
+                            }
+                            StyledText {
+                                text: "Close"
+                            }
+                        }
+                    }
+                }
+            }
+
             ColumnLayout {
                 StyledText {
                     text: "Drawer"
@@ -176,6 +227,7 @@ StyledPopupWindow {
                 }
             }
         }
+    }
 
     StyledDrawer {
         id: drawer