vertical tabs on configuration

components/StyledTabBar.qml

@@ -1,8 +1,20 @@
+import qs.config
 import QtQuick
 import QtQuick.Controls.Basic
 
 TabBar {
     id: control
 
-    background: Item {}
+    property alias orientation: view.orientation
+
+    contentItem: ListView {
+        id: view
+        model: control.contentModel
+        currentIndex: control.currentIndex
+        orientation: ListView.Horizontal
+        boundsBehavior: Flickable.StopAtBounds
+    }
+    background: Rectangle {
+      color: Styling.theme.base200
+    }
 }

components/StyledTabButton.qml

@@ -6,7 +6,6 @@ TabButton {
     id: control
 
     contentItem: Text {
-        id: icon
         font.pixelSize: Styling.typography.textSize.base
         font.family: Styling.typography.fontFamily
         text: control.text

modules/configuration/Configuration.qml

@@ -1,9 +1,7 @@
 import qs.components
-import qs.config
 import qs.services
 import QtQuick
 import QtQuick.Controls
-import QtQuick.Layouts
 
 StyledPanelWindow {
     id: window
@@ -14,53 +12,52 @@ StyledPanelWindow {
     implicitWidth: 800
     implicitHeight: 400
 
-    ColumnLayout {
-        spacing: 0
-        anchors.fill: parent
-        StyledText {
-            Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
+    StyledTabBar {
+        id: tabs
+        anchors.top: parent.top
+        anchors.left: parent.left
+        anchors.bottom: parent.bottom
+        anchors.right: view.left
 
-            text: "Configurations"
-            font.pixelSize: Styling.typography.textSize.xl
-            padding: 8
+        implicitWidth: 200
+        orientation: ListView.Vertical
+
+        StyledTabButton {
+            anchors.left: parent.left
+            anchors.right: parent.right
+
+            text: "General"
         }
-
-        StyledRectangle {
-            id: titleBar
-
-            Layout.fillWidth: true
-            Layout.preferredHeight: 4
+        StyledTabButton {
+            anchors.left: parent.left
+            anchors.right: parent.right
+            text: "Styling"
         }
+    }
+
+    SwipeView {
+        id: view
+
+        anchors.top: parent.top
+        anchors.right: parent.right
+        anchors.bottom: parent.bottom
+        anchors.left: tabs.right
+
+        clip: true
+        orientation: Qt.Vertical
+
+        currentIndex: tabs.currentIndex
 
         ScrollView {
-            id: view
-
-            Layout.fillHeight: true
-            padding: 24
-            background: Item {}
-
-            GridLayout {
-
-                columnSpacing: Styling.layout.spacing.xl
-
-                StyledText {
-                    text: "Theme"
-                    // font.bold: true
-                    font.pixelSize: Styling.typography.textSize.lg
-                }
-
-                StyledComboBox {
-                    currentIndex: Theme.themes.indexOf(Theme.currentTheme)
-                    model: Theme.themes
-                    onActivated: index => {
-                        Theme.currentTheme = Theme.themes[index];
-                    }
-                }
+            padding: 36
+            StyledPane {
+                anchors.left: parent.left
+                anchors.right: parent.right
             }
         }
-    }
-
-    component Menus: QtObject {
-        property Component theme
+        ScrollView {
+            padding: 36
+            StylingView {}
+        }
     }
 }

modules/configuration/StylingView.qml

@@ -0,0 +1,25 @@
+import qs.components
+import qs.config
+import QtQuick
+import QtQuick.Layouts
+
+StyledPane {
+    GridLayout {
+
+        columnSpacing: Styling.layout.spacing.xl
+
+        StyledText {
+            text: "Theme"
+            // font.bold: true
+            font.pixelSize: Styling.typography.textSize.lg
+        }
+
+        StyledComboBox {
+            currentIndex: Theme.themes.indexOf(Theme.currentTheme)
+            model: Theme.themes
+            onActivated: index => {
+                Theme.currentTheme = Theme.themes[index];
+            }
+        }
+    }
+}

modules/configuration/ThemeConfig.qml

@@ -1,5 +0,0 @@
-import QtQuick
-import QtQuick.Layouts
-import Quickshell
-
-GridLayout {}

modules/storybook/Storybook.qml

@@ -36,7 +36,7 @@ StyledPanelWindow {
             anchors.top: parent.top
             anchors.left: parent.left
             anchors.right: parent.right
-            anchors.bottom: stack.top
+            anchors.bottom: view.top
 
             StyledTabButton {
                 text: "Fields"
@@ -49,8 +49,8 @@ StyledPanelWindow {
             }
         }
 
-        StackLayout {
-            id: stack
+        SwipeView {
+            id: view
 
             anchors.top: tabs.bottom
             anchors.left: parent.left
@@ -60,7 +60,6 @@ StyledPanelWindow {
             currentIndex: tabs.currentIndex
 
             ScrollView {
-                Layout.fillWidth: true
                 padding: 36
                 Fields {}
             }
@@ -69,7 +68,6 @@ StyledPanelWindow {
                 Selectors {}
             }
             ScrollView {
-                Layout.fillWidth: true
                 padding: 36
                 Components {}
             }