tabbbss are still kinda fucked

components/StyledTabBar.qml

@@ -5,6 +5,7 @@ TabBar {
     id: control
 
     property alias orientation: view.orientation
+    spacing: 12
 
     contentItem: Item {
         ListView {

components/StyledTabButton.qml

@@ -6,6 +6,8 @@ TabButton {
     id: control
 
     property alias radius: rectangle.radius
+    padding: 10
+    radius: Styling.theme.radiusField
 
     contentItem: Text {
         font.pixelSize: Styling.typography.textSize.base

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
 import Quickshell.Hyprland
 import Quickshell.Wayland
 
@@ -13,6 +15,7 @@ StyledPanelWindow {
     visible: Visibility.configuration
     implicitWidth: 800
     implicitHeight: 400
+    background.color: Styling.theme.base200
 
     WlrLayershell.layer: WlrLayer.Top
     WlrLayershell.keyboardFocus: window.visible ? WlrKeyboardFocus.OnDemand : WlrKeyboardFocus.None
@@ -32,19 +35,39 @@ StyledPanelWindow {
         anchors.bottom: parent.bottom
         anchors.right: view.left
 
-        implicitWidth: 200
+        implicitWidth: 150
         orientation: ListView.Vertical
 
-        StyledTabButton {
+        Repeater {
+            model: views.data
+            delegate: StyledTabButton {
+                id: tabButton
+                required property ConfigurationView modelData
                 anchors.left: parent.left
                 anchors.right: parent.right
-
+                contentItem: RowLayout {
-            text: "Audio"
+                    states: [
+                        State {
+                            when: tabButton.hovered
+                            PropertyChanges {
+                                tabIcon.color: Styling.theme.primarycontent
+                                tabText.color: Styling.theme.primarycontent
+                            }
+                        }
+                    ]
+                    LucideIcon {
+                        id: tabIcon
+                        text: tabButton.modelData.icon
+                        font.pixelSize: Styling.typography.textSize.lg
+                    }
+                    StyledText {
+                        id: tabText
+                        text: tabButton.modelData.title
+                        font.pixelSize: Styling.typography.textSize.lg
+                    }
+                }
+                text: tabButton.modelData.title
             }
-        StyledTabButton {
-            anchors.left: parent.left
-            anchors.right: parent.right
-            text: "Styling"
         }
     }
 
@@ -55,19 +78,54 @@ StyledPanelWindow {
         anchors.right: parent.right
         anchors.bottom: parent.bottom
         anchors.left: tabs.right
+        anchors.topMargin: 4
+        anchors.rightMargin: 4
+        anchors.bottomMargin: 4
 
         clip: true
         orientation: Qt.Vertical
 
         currentIndex: tabs.currentIndex
 
-        ScrollView {
+        background: Rectangle {
+            color: Styling.theme.base100
+            radius: Styling.theme.radiusBox
+        }
+
+        Repeater {
+            model: views.data
+            delegate: ScrollView {
+                id: scrollView
+                required property ConfigurationView modelData
                 padding: 24
-            AudioView {}
+                Loader {
-        }
+                    anchors.fill: parent
-        ScrollView {
+                    active: scrollView.modelData.view
-            padding: 24
+                    sourceComponent: scrollView.modelData.view
-            StylingView {}
                 }
             }
         }
+    }
+
+    Item {
+        id: views
+
+        ConfigurationView {
+            icon: Styling.lucide.icons.audioLines
+            title: "Audio"
+            view: AudioView {}
+        }
+
+        ConfigurationView {
+            icon: Styling.lucide.icons.swatchBook
+            title: "Styling"
+            view: StylingView {}
+        }
+    }
+
+    component ConfigurationView: QtObject {
+        property string icon
+        property string title
+        property Component view
+    }
+}

modules/storybook/Storybook.qml

@@ -1,10 +1,10 @@
 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
 
@@ -16,6 +16,8 @@ StyledPanelWindow {
     implicitWidth: 500
     implicitHeight: 600
 
+    background.color: Styling.theme.base200
+
     WlrLayershell.layer: WlrLayer.Top
     WlrLayershell.keyboardFocus: root.visible ? WlrKeyboardFocus.OnDemand : WlrKeyboardFocus.None
 
@@ -27,16 +29,13 @@ StyledPanelWindow {
         }
     }
 
-    Item {
-        id: layout
-        anchors.fill: parent
-
     StyledTabBar {
         id: tabs
         anchors.top: parent.top
         anchors.left: parent.left
         anchors.right: parent.right
         anchors.bottom: view.top
+        implicitHeight: 40
 
         StyledTabButton {
             text: "Fields"
@@ -59,6 +58,11 @@ StyledPanelWindow {
 
         currentIndex: tabs.currentIndex
 
+        background: Rectangle {
+            color: Styling.theme.base100
+            radius: Styling.theme.radiusBox
+        }
+
         ScrollView {
             padding: 36
             Fields {}
@@ -73,4 +77,3 @@ StyledPanelWindow {
         }
     }
 }
-}