vertical tabs on configuration

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 {
+    StyledTabBar {
-        spacing: 0
+        id: tabs
-        anchors.fill: parent
+        anchors.top: parent.top
-        StyledText {
+        anchors.left: parent.left
-            Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
+        anchors.bottom: parent.bottom
+        anchors.right: view.left
 
-            text: "Configurations"
+        implicitWidth: 200
-            font.pixelSize: Styling.typography.textSize.xl
+        orientation: ListView.Vertical
-            padding: 8
+
+        StyledTabButton {
+            anchors.left: parent.left
+            anchors.right: parent.right
+
+            text: "General"
+        }
+        StyledTabButton {
+            anchors.left: parent.left
+            anchors.right: parent.right
+            text: "Styling"
+        }
     }
 
-        StyledRectangle {
+    SwipeView {
-            id: titleBar
-
-            Layout.fillWidth: true
-            Layout.preferredHeight: 4
-        }
-
-        ScrollView {
         id: view
 
-            Layout.fillHeight: true
+        anchors.top: parent.top
-            padding: 24
+        anchors.right: parent.right
-            background: Item {}
+        anchors.bottom: parent.bottom
+        anchors.left: tabs.right
 
-            GridLayout {
+        clip: true
+        orientation: Qt.Vertical
 
-                columnSpacing: Styling.layout.spacing.xl
+        currentIndex: tabs.currentIndex
 
-                StyledText {
+        ScrollView {
-                    text: "Theme"
+            padding: 36
-                    // font.bold: true
+            StyledPane {
-                    font.pixelSize: Styling.typography.textSize.lg
+                anchors.left: parent.left
+                anchors.right: parent.right
             }
-
+        }
-                StyledComboBox {
+        ScrollView {
-                    currentIndex: Theme.themes.indexOf(Theme.currentTheme)
+            padding: 36
-                    model: Theme.themes
+            StylingView {}
-                    onActivated: index => {
-                        Theme.currentTheme = Theme.themes[index];
         }
     }
 }
-        }
-    }
-
-    component Menus: QtObject {
-        property Component theme
-    }
-}

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

@@ -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 {}
             }