add storybook (component dev)

modules/Shell.qml

@@ -2,10 +2,9 @@ import "bar"
 import "launcher"
 import "pomodoro"
 import "powermenu"
+import "storybook"
 import Quickshell
-import Quickshell.Wayland
 import QtQuick
-import QtQuick.Effects
 
 Variants {
     model: Quickshell.screens
@@ -19,5 +18,6 @@ Variants {
         Launcher {}
         Pomodoro {}
         PowerMenu {}
+        Storybook {}
     }
 }

modules/Shortcuts.qml

@@ -22,4 +22,10 @@ Scope {
         description: 'Open the Power Menu'
         onPressed: Visibility.powermenu = !Visibility.powermenu
     }
+
+    LuxShortcut {
+        name: 'storybook'
+        description: 'Open the Component Storybook'
+        onPressed: Visibility.storybook = !Visibility.storybook
+    }
 }

modules/storybook/Storybook.qml

@@ -0,0 +1,44 @@
+pragma ComponentBehavior: Bound
+
+import qs.components
+import qs.config
+import qs.services
+import qs.widgets
+import Quickshell.Hyprland
+import Quickshell.Wayland
+import Quickshell.Widgets
+import QtQuick
+import QtQuick.Layouts
+
+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
+
+    WrapperRectangle {
+        id: rect
+
+        color: Theme.palette.base300
+        leftMargin: 48
+        rightMargin: 48
+        topMargin: 24
+        bottomMargin: 24
+        radius: 8
+
+        HyprlandFocusGrab {
+            active: Visibility.storybook
+            windows: [root]
+            onCleared: {
+                Visibility.storybook = false;
+            }
+        }
+
+        ColumnLayout {}
+    }
+}

services/Visibility.qml

@@ -7,6 +7,7 @@ Singleton {
     property alias launcher: properties.launcher
     property alias pomodoro: properties.pomodoro
     property alias powermenu: properties.powermenu
+    property alias storybook: properties.storybook
     property StyledPopupWindow activePopup
 
     function togglePopup(popup: StyledPopupWindow) {
@@ -23,5 +24,6 @@ Singleton {
         property bool launcher
         property bool pomodoro
         property bool powermenu
+        property bool storybook
     }
 }