make volume device selection use a combobox

dots/.config/quickshell/ii/modules/common/widgets/StyledComboBox.qml

@@ -0,0 +1,15 @@
+import QtQuick
+import QtQuick.Controls.Material
+import QtQuick.Controls
+import qs.modules.common
+
+ComboBox {
+    id: root
+    
+    Material.theme: Material.System
+    Material.accent: Appearance.m3colors.m3primary
+    Material.primary: Appearance.m3colors.m3primary
+    Material.background: Appearance.m3colors.m3surface
+    Material.foreground: Appearance.m3colors.m3onSurface
+    Material.containerStyle: Material.Outlined
+}

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

@@ -11,21 +11,23 @@ import Quickshell.Services.Pipewire
 WindowDialog {
     id: root
     property bool isSink: true
-    backgroundHeight: 700
+    backgroundHeight: 600
 
     WindowDialogTitle {
         text: root.isSink ? Translation.tr("Audio output") : Translation.tr("Audio input")
     }
 
-    VolumeDialogContent {
-        isSink: root.isSink
-    }
-
     WindowDialogSeparator {
+        visible: root.hasApps
+        Layout.topMargin: -22
         Layout.leftMargin: 0
         Layout.rightMargin: 0
     }
 
+    VolumeDialogContent {
+        isSink: root.isSink
+    }
+
     WindowDialogButtonRow {
         DialogButton {
             buttonText: Translation.tr("Details")

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

@@ -16,25 +16,16 @@ ColumnLayout {
     readonly property list<var> appPwNodes: Pipewire.nodes.values.filter((node) => { // Should be list<PwNode> but it breaks ScriptModel
         return root.correctType(node) && node.isStream
     })
+    readonly property list<var> devices: Pipewire.nodes.values.filter(node => {
+        return root.correctType(node) && !node.isStream
+    })
     readonly property bool hasApps: appPwNodes.length > 0
     spacing: 16
 
-    WindowDialogSectionHeader {
-        visible: root.hasApps
-        text: Translation.tr("Applications")
-    }
-
-    WindowDialogSeparator {
-        visible: root.hasApps
-        Layout.topMargin: -22
-        Layout.leftMargin: 0
-        Layout.rightMargin: 0
-        color: Appearance.colors.colOutlineVariant
-    }
-
     DialogSectionListView {
         visible: root.hasApps
         Layout.fillHeight: true
+        topMargin: 14
 
         model: ScriptModel {
             values: root.appPwNodes
@@ -49,44 +40,25 @@ ColumnLayout {
         }
     }
 
-    WindowDialogSectionHeader {
-        text: Translation.tr("Devices")
-    }
-
-    WindowDialogSeparator {
-        Layout.topMargin: -22
-        Layout.leftMargin: 0
-        Layout.rightMargin: 0
-        color: Appearance.colors.colOutlineVariant
-    }
-
-    DialogSectionListView {
-        Layout.fillHeight: !root.hasApps
-        Layout.preferredHeight: 180
-
-        model: ScriptModel {
-            values: Pipewire.nodes.values.filter(node => {
-                return root.correctType(node) && !node.isStream
-            })
-        }
-        delegate: StyledRadioButton {
-            id: radioButton
-            required property var modelData
-            anchors {
-                left: parent?.left
-                right: parent?.right
+    StyledComboBox {
+        id: deviceSelector
+        Layout.fillWidth: true
+        Layout.bottomMargin: 6
+        model: root.devices.map(node => node.description)
+        currentIndex: root.devices.findIndex(item => {
+            if (root.isSink) {
+                return item.id === Pipewire.preferredDefaultAudioSink?.id
+            } else {
+                return item.id === Pipewire.preferredDefaultAudioSource?.id
             }
-
-            description: modelData.description
-            checked: modelData.id === (root.isSink ? Pipewire.preferredDefaultAudioSink?.id : Pipewire.preferredDefaultAudioSource?.id)
-
-            onCheckedChanged: {
-                if (!checked) return;
-                if (root.isSink) {
-                    Pipewire.preferredDefaultAudioSink = modelData
-                } else {
-                    Pipewire.preferredDefaultAudioSource = modelData
-                }
+        })
+        onActivated: (index) => {
+            print(index)
+            const item = root.devices[index]
+            if (root.isSink) {
+                Pipewire.preferredDefaultAudioSink = item
+            } else {
+                Pipewire.preferredDefaultAudioSource = item
             }
         }
     }
@@ -106,4 +78,9 @@ ColumnLayout {
         spacing: 4
         animateAppearance: false
     }
+
+    Component {
+        id: listElementComp
+        ListElement {}
+    }
 }