From 75f1fc1905b18723837078bdb4fbcae6afaa2ef8 Mon Sep 17 00:00:00 2001
From: Benjamin Palko <benjaminpalko@hotmail.com>
Date: Thu, 4 Sep 2025 16:46:04 -0400
Subject: [PATCH] wip

---
 components/StyledPopup.qml      | 37 ++++++++++++++++++++++++
 modules/storybook/Storybook.qml | 51 ++++++++++++++++++---------------
 2 files changed, 65 insertions(+), 23 deletions(-)
 create mode 100644 components/StyledPopup.qml

diff --git a/components/StyledPopup.qml b/components/StyledPopup.qml
new file mode 100644
index 0000000..c335b7a
--- /dev/null
+++ b/components/StyledPopup.qml
@@ -0,0 +1,37 @@
+import qs.config
+import QtQuick
+import Quickshell
+import Quickshell.Hyprland
+
+PopupWindow {
+    id: root
+
+    implicitWidth: background.implicitWidth
+    implicitHeight: background.implicitHeight
+    color: "transparent"
+
+    function open() {
+        visible = true;
+    }
+
+    function close() {
+        visible = false;
+    }
+
+    HyprlandFocusGrab {
+        id: grab
+        windows: [root]
+        onCleared: {
+            root.close();
+        }
+      }
+
+    Rectangle {
+        id: background
+        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
+    }
+}
diff --git a/modules/storybook/Storybook.qml b/modules/storybook/Storybook.qml
index 7163db9..5d9d10d 100644
--- a/modules/storybook/Storybook.qml
+++ b/modules/storybook/Storybook.qml
@@ -1,6 +1,5 @@
 pragma ComponentBehavior: Bound
 
-import qs.widgets
 import qs.components
 import qs.config
 import qs.constants
@@ -22,24 +21,28 @@ StyledWindow {
     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
 
-        HyprlandFocusGrab {
-            active: Visibility.storybook
-            windows: [root]
-            onCleared: {
-                Visibility.storybook = false;
-            }
-        }
+        GridLayout {
+            id: grid
 
-        ColumnLayout {
-
-            spacing: 12
+            flow: GridLayout.TopToBottom
+            columns: 2
+            rows: 10
 
             StyledText {
+                Layout.columnSpan: grid.columns
                 Layout.alignment: Qt.AlignHCenter
                 text: "Components"
                 font.pixelSize: 24
@@ -151,7 +154,7 @@ StyledWindow {
 
             ColumnLayout {
                 StyledText {
-                    text: "Menu"
+                    text: "Popup"
                     font.pixelSize: 18
                 }
                 Button {
@@ -159,19 +162,21 @@ StyledWindow {
                     text: "File"
                     onPressed: menu.visible ? menu.close() : menu.open()
 
-                    StyledMenu {
+                    StyledPopup {
                         id: menu
-                        y: fileButton.height
 
-                        StyledMenuItem {
-                            text: "New..."
-                        }
-                        StyledMenuItem {
-                            text: "Open..."
-                        }
-                        StyledMenuSeparator {}
-                        StyledMenuItem {
-                            text: "Close"
+                        anchor.item: fileButton
+
+                        Column {
+                            StyledButton {
+                                text: "New..."
+                            }
+                            StyledButton {
+                                text: "Open..."
+                            }
+                            StyledText {
+                                text: "Close"
+                            }
                         }
                     }
                 }