components/StyledTabBar.qml

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

modules/configuration/StylingView.qml

@@ -1,25 +0,0 @@
-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

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