make storybook a tabbed window

components/StyledButton.qml

@@ -8,6 +8,7 @@ Button {
     property alias radius: rectangle.radius
 
     font.pixelSize: Styling.typography.textSize.base
+    font.family: Styling.typography.fontFamily
     verticalPadding: 6
     horizontalPadding: 8
 

components/StyledIconButton.qml

@@ -22,6 +22,7 @@ RoundButton {
         id: icon
         font: control.font
         text: control.text
+        verticalAlignment: Text.AlignVCenter
         color: control.color
         Behavior on color {
             ColorAnimation {

components/StyledTabBar.qml

@@ -0,0 +1,8 @@
+import QtQuick
+import QtQuick.Controls.Basic
+
+TabBar {
+    id: control
+
+    background: Item {}
+}

components/StyledTabButton.qml

@@ -0,0 +1,44 @@
+import qs.config
+import QtQuick
+import QtQuick.Controls.Basic
+
+TabButton {
+    id: control
+
+    contentItem: Text {
+        id: icon
+        font.pixelSize: Styling.typography.textSize.base
+        font.family: Styling.typography.fontFamily
+        text: control.text
+        verticalAlignment: Text.AlignVCenter
+        horizontalAlignment: Text.AlignHCenter
+        color: control.hovered ? Styling.theme.primarycontent : Styling.theme.basecontent
+        Behavior on color {
+            ColorAnimation {
+                duration: Styling.animations.speed.normal
+            }
+        }
+        rotation: control.rotation
+        Behavior on rotation {
+            RotationAnimation {
+                duration: Styling.animations.speed.slow
+                easing.type: Easing.OutQuad
+            }
+        }
+    }
+
+    background: Rectangle {
+        id: rectangle
+        color: control.hovered ? Styling.theme.primary : Styling.theme.base200
+        Behavior on color {
+            ColorAnimation {
+                duration: Styling.animations.speed.normal
+            }
+        }
+        // radius: Styling.theme.radiusField
+    }
+
+    HoverHandler {
+        cursorShape: Qt.PointingHandCursor
+    }
+}

modules/storybook/Components.qml

@@ -0,0 +1,136 @@
+import qs.components
+import qs.config
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+
+GridLayout {
+    flow: GridLayout.TopToBottom
+    columns: 2
+    rows: 10
+
+    ColumnLayout {
+        StyledText {
+            text: "ToolTip"
+            font.pixelSize: 18
+        }
+        Button {
+            id: toolTipButton
+            text: "Hello world!"
+            StyledToolTip {
+                visible: toolTipButton.hovered
+                text: qsTr("Save the active project")
+            }
+        }
+    }
+
+    ColumnLayout {
+        StyledText {
+            text: "ProgressBar"
+            font.pixelSize: 18
+        }
+        StyledProgressBar {
+            id: progressBar
+            indeterminate: true
+            implicitHeight: 10
+            from: 0
+            to: 100
+            value: 50
+        }
+    }
+
+    ColumnLayout {
+        StyledText {
+            text: "ListView"
+            font.pixelSize: 18
+        }
+        StyledWrapperRectangle {
+            border.color: Styling.theme.base100
+            border.width: 2
+            StyledListView {
+                implicitWidth: 200
+                implicitHeight: 100
+                model: 10
+                delegate: StyledText {
+                    text: "Hello world!"
+                }
+            }
+        }
+    }
+
+    ColumnLayout {
+        StyledText {
+            text: "Mpris Player Selector"
+            font.pixelSize: 18
+        }
+        MprisPlayerSelector {}
+    }
+
+    ColumnLayout {
+        StyledText {
+            text: "Mpris Controller"
+            font.pixelSize: 18
+        }
+        MprisController {
+            player: Mpris.active ?? null
+        }
+    }
+
+    ColumnLayout {
+        StyledText {
+            text: "Drawer"
+            font.pixelSize: 18
+        }
+        RowLayout {
+            Button {
+                text: "Top"
+                onClicked: {
+                    drawer.x = root.width / 2 - drawer.width / 2;
+                    drawer.y = 0;
+                    drawer.edge = Qt.TopEdge;
+                    drawer.open();
+                }
+            }
+            Button {
+                text: "Left"
+                onClicked: {
+                    drawer.y = root.height / 2 - drawer.height / 2;
+                    drawer.x = 0;
+                    drawer.edge = Qt.LeftEdge;
+                    drawer.open();
+                }
+            }
+            Button {
+                text: "Right"
+                onClicked: {
+                    drawer.y = root.height / 2 - drawer.height / 2;
+                    drawer.x = 0;
+                    drawer.edge = Qt.RightEdge;
+                    drawer.open();
+                }
+            }
+            Button {
+                text: "Bottom"
+                onClicked: {
+                    drawer.x = root.width / 2 - drawer.width / 2;
+                    drawer.y = 0;
+                    drawer.edge = Qt.BottomEdge;
+                    drawer.open();
+                }
+            }
+        }
+    }
+
+    StyledDrawer {
+        id: drawer
+        edge: Qt.TopEdge
+        width: 400
+        height: 200
+        Button {
+            anchors.horizontalCenter: parent.horizontalCenter
+            anchors.verticalCenter: parent.verticalCenter
+            text: "Close"
+            onClicked: drawer.close()
+        }
+    }
+}

modules/storybook/Fields.qml

@@ -0,0 +1,34 @@
+import qs.components
+import qs.config
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+
+GridLayout {
+    flow: GridLayout.TopToBottom
+    columns: 2
+    rows: 10
+
+    ColumnLayout {
+        StyledText {
+            text: "Icon Button"
+            font.pixelSize: 18
+        }
+        StyledIconButton {
+            text: Styling.lucide.icons.square
+        }
+    }
+
+    ColumnLayout {
+        StyledText {
+            text: "Slider"
+            font.pixelSize: 18
+        }
+        StyledSlider {
+            id: slider
+            from: 0
+            to: 100
+            value: 50
+        }
+    }
+}

modules/storybook/Selectors.qml

@@ -0,0 +1,21 @@
+import qs.components
+import qs.config
+import QtQuick
+import QtQuick.Layouts
+
+GridLayout {
+    flow: GridLayout.TopToBottom
+    columns: 2
+    rows: 10
+
+    ColumnLayout {
+        StyledText {
+            text: "Switch"
+            font.pixelSize: 18
+        }
+
+        StyledSwitch {
+            text: "Enable"
+        }
+    }
+}

modules/storybook/Storybook.qml

@@ -1,22 +1,20 @@
 pragma ComponentBehavior: Bound
 
 import qs.components
-import qs.config
 import qs.services
 import QtQuick
 import QtQuick.Controls
 import QtQuick.Layouts
 import Quickshell.Hyprland
 import Quickshell.Wayland
-import Quickshell.Widgets
 
 StyledPanelWindow {
     id: root
     name: "storybook"
 
     visible: Visibility.storybook
-    implicitWidth: rect.width
+    implicitWidth: 500
-    implicitHeight: rect.height
+    implicitHeight: 600
 
     WlrLayershell.layer: WlrLayer.Top
     WlrLayershell.keyboardFocus: root.visible ? WlrKeyboardFocus.OnDemand : WlrKeyboardFocus.None
@@ -29,215 +27,44 @@ StyledPanelWindow {
         }
     }
 
-    WrapperItem {
+    ColumnLayout {
-        id: rect
+        id: layout
 
-        margin: 48
+        anchors.fill: parent
+        spacing: 0
 
-        GridLayout {
+        StyledTabBar {
-            id: grid
+            id: tabs
-
+            Layout.fillWidth: true
-            flow: GridLayout.TopToBottom
+            StyledTabButton {
-            columns: 2
+                text: "Fields"
-            rows: 10
+            }
-
+            StyledTabButton {
-            StyledText {
+                text: "Selectors"
-                Layout.columnSpan: grid.columns
+            }
-                Layout.alignment: Qt.AlignHCenter
+            StyledTabButton {
                 text: "Components"
-                font.pixelSize: 24
-                font.bold: true
-                font.underline: true
-                bottomPadding: 24
-            }
-
-            ColumnLayout {
-                StyledText {
-                    text: "Icon Button"
-                    font.pixelSize: 18
-                }
-                StyledIconButton {
-                    text: Styling.lucide.icons.square
-                }
-            }
-
-            ColumnLayout {
-                StyledText {
-                    text: "Theme Selector"
-                    font.pixelSize: 18
-                }
-                RowLayout {
-                    Repeater {
-                        model: Theme.themes
-                        delegate: StyledButton {
-                            required property var modelData
-                            text: modelData
-                            onClicked: Theme.currentTheme = modelData
-                        }
-                    }
-                }
-            }
-
-            ColumnLayout {
-                StyledText {
-                    text: "Switch"
-                    font.pixelSize: 18
-                }
-
-                StyledSwitch {
-                    text: "Enable"
-                }
-            }
-
-            ColumnLayout {
-                StyledText {
-                    text: "ToolTip"
-                    font.pixelSize: 18
-                }
-                Button {
-                    id: toolTipButton
-                    text: "Hello world!"
-                    StyledToolTip {
-                        visible: toolTipButton.hovered
-                        text: qsTr("Save the active project")
-                    }
-                }
-            }
-
-            ColumnLayout {
-                StyledText {
-                    text: "Slider"
-                    font.pixelSize: 18
-                }
-                StyledSlider {
-                    id: slider
-                    from: 0
-                    to: 100
-                    value: 50
-                }
-            }
-
-            ColumnLayout {
-                StyledText {
-                    text: "ProgressBar"
-                    font.pixelSize: 18
-                }
-                StyledProgressBar {
-                    id: progressBar
-                    indeterminate: true
-                    implicitHeight: 10
-                    from: 0
-                    to: 100
-                    value: 50
-                }
-            }
-
-            ColumnLayout {
-                StyledText {
-                    text: "ListView"
-                    font.pixelSize: 18
-                }
-                StyledWrapperRectangle {
-                    border.color: Styling.theme.base100
-                    border.width: 2
-                    StyledListView {
-                        implicitWidth: 200
-                        implicitHeight: 100
-                        model: 10
-                        delegate: StyledText {
-                            text: "Hello world!"
-                        }
-                    }
-                }
-            }
-
-            ColumnLayout {
-                StyledText {
-                    text: "Mpris Player Selector"
-                    font.pixelSize: 18
-                }
-                MprisPlayerSelector {}
-            }
-
-            ColumnLayout {
-                StyledText {
-                    text: "Mpris Controller"
-                    font.pixelSize: 18
-                }
-                MprisController {
-                    player: Mpris.active ?? null
-                }
-            }
-
-            ColumnLayout {
-                StyledText {
-                    text: "Popup"
-                    font.pixelSize: 18
-                }
-                Button {
-                    id: fileButton
-                    text: "File"
-                    onPressed: menu.visible ? menu.close() : menu.open()
-                }
-            }
-
-            ColumnLayout {
-                StyledText {
-                    text: "Drawer"
-                    font.pixelSize: 18
-                }
-                RowLayout {
-                    Button {
-                        text: "Top"
-                        onClicked: {
-                            drawer.x = root.width / 2 - drawer.width / 2;
-                            drawer.y = 0;
-                            drawer.edge = Qt.TopEdge;
-                            drawer.open();
-                        }
-                    }
-                    Button {
-                        text: "Left"
-                        onClicked: {
-                            drawer.y = root.height / 2 - drawer.height / 2;
-                            drawer.x = 0;
-                            drawer.edge = Qt.LeftEdge;
-                            drawer.open();
-                        }
-                    }
-                    Button {
-                        text: "Right"
-                        onClicked: {
-                            drawer.y = root.height / 2 - drawer.height / 2;
-                            drawer.x = 0;
-                            drawer.edge = Qt.RightEdge;
-                            drawer.open();
-                        }
-                    }
-                    Button {
-                        text: "Bottom"
-                        onClicked: {
-                            drawer.x = root.width / 2 - drawer.width / 2;
-                            drawer.y = 0;
-                            drawer.edge = Qt.BottomEdge;
-                            drawer.open();
-                        }
-                    }
-                }
             }
         }
-    }
 
-    StyledDrawer {
+        StackLayout {
-        id: drawer
+            currentIndex: tabs.currentIndex
-        edge: Qt.TopEdge
+
-        width: 400
+            ScrollView {
-        height: 200
+                Layout.maximumHeight: 400
-        Button {
+                padding: 36
-            anchors.horizontalCenter: parent.horizontalCenter
+                Fields {}
-            anchors.verticalCenter: parent.verticalCenter
+            }
-            text: "Close"
+            ScrollView {
-            onClicked: drawer.close()
+                Layout.maximumHeight: 400
+                padding: 36
+                Selectors {}
+            }
+            ScrollView {
+                Layout.maximumHeight: 400
+                padding: 36
+                Components {}
+            }
         }
     }
 }