overlay: make volume mixer has both output and input

dots/.config/quickshell/ii/modules/common/Persistent.qml

@@ -105,6 +105,7 @@ Singleton {
                     property bool clickthrough: false
                     property real x: 80
                     property real y: 280
+                    property int tabIndex: 0
                 }
             }
 

dots/.config/quickshell/ii/modules/overlay/resources/Resources.qml

@@ -50,7 +50,7 @@ StyledOverlayWidget {
                 fill: parent
                 margins: parent.padding
             }
-            spacing: 10
+            spacing: 8
 
             SecondaryTabBar {
                 id: tabBar

dots/.config/quickshell/ii/modules/overlay/volumeMixer/VolumeMixer.qml

@@ -1,7 +1,10 @@
 import QtQuick
+import QtQuick.Controls
 import QtQuick.Layouts
 import Quickshell
+import qs.services
 import qs.modules.common
+import qs.modules.common.widgets
 import qs.modules.overlay
 import qs.modules.sidebarRight.volumeMixer
 
@@ -15,11 +18,44 @@ StyledOverlayWidget {
         implicitHeight: 600
         implicitWidth: 350
 
-        VolumeDialogContent {
+        ColumnLayout {
-            anchors.fill: parent
+            id: contentColumn
-            anchors.margins: parent.padding
+            anchors {
-            isSink: true
+                fill: parent
-        }
+                margins: parent.padding
+            }
+            spacing: 8
 
+            SecondaryTabBar {
+                id: tabBar
+
+                currentIndex: Persistent.states.overlay.volumeMixer.tabIndex
+                onCurrentIndexChanged: {
+                    Persistent.states.overlay.volumeMixer.tabIndex = tabBar.currentIndex;
+                }
+
+                SecondaryTabButton {
+                    buttonIcon: "media_output"
+                    buttonText: Translation.tr("Output")
+                }
+                SecondaryTabButton {
+                    buttonIcon: "mic"
+                    buttonText: Translation.tr("Input")
+                }
+            }
+            SwipeView {
+                id: swipeView
+                Layout.fillWidth: true
+                Layout.fillHeight: true
+                currentIndex: Persistent.states.overlay.volumeMixer.tabIndex
+                onCurrentIndexChanged: {
+                    Persistent.states.overlay.volumeMixer.tabIndex = swipeView.currentIndex;
+                }
+                clip: true
+
+                VolumeDialogContent { isSink: true }
+                VolumeDialogContent { isSink: false }
+            }
+        }
     }
 }

dots/.config/quickshell/ii/modules/sidebarRight/volumeMixer/VolumeDialogContent.qml

@@ -29,6 +29,7 @@ ColumnLayout {
         Layout.topMargin: -22
         Layout.leftMargin: 0
         Layout.rightMargin: 0
+        color: Appearance.colors.colOutlineVariant
     }
 
     DialogSectionListView {
@@ -56,6 +57,7 @@ ColumnLayout {
         Layout.topMargin: -22
         Layout.leftMargin: 0
         Layout.rightMargin: 0
+        color: Appearance.colors.colOutlineVariant
     }
 
     DialogSectionListView {