feat: Per program audio sliders

README.md

@@ -409,7 +409,8 @@ default, you must create it manually.
         "enabled": true,
         "dragThreshold": 50,
         "mediaUpdateInterval": 500,
-        "showOnHover": true
+        "showOnHover": true,
+        "showAudioMixerOverMediaGif": false
     },
     "launcher": {
         "actionPrefix": ">",

components/controls/StyledSelect.qml

@@ -0,0 +1,113 @@
+import qs.components
+import qs.services
+import qs.config
+import QtQuick
+import QtQuick.Templates
+import QtQuick
+import Quickshell
+import Quickshell.Widgets
+import Quickshell.Services.Mpris
+import Quickshell.Services.Pipewire
+
+// Used the following source as a template:
+// https://stackoverflow.com/questions/9634897/qt-qml-dropdown-list-like-in-html
+// Posted by Paul Drummond
+// Retrieved 2025-11-08, License - CC BY-SA 3.0
+Rectangle {
+    id: root
+    required property list<string> items
+    required property int defIndex
+    property alias selectedItem: chosenItemText.text
+    property alias selectedIndex: listView.currentIndex
+    signal optionClicked(index: int)
+    height: 30
+    color: "transparent"
+
+    Rectangle {
+        id: chosenItem
+        border.color: Colours.palette.m3outline
+        border.width: 1
+        radius: Appearance.rounding.normal
+        width: parent.width
+        height: root.height
+        color: Colours.palette.m3surfaceContainer
+
+        StyledText {
+            id: chosenItemText
+            anchors.top: parent.top
+            anchors.left: parent.left
+            anchors.right: parent.right
+            anchors.topMargin: 6
+            anchors.leftMargin: 12
+            anchors.rightMargin: 16
+            elide: Text.ElideRight
+            text: root.items[root.defIndex]
+        }
+
+        WrapperMouseArea {
+            anchors.fill: parent
+            cursorShape: Qt.PointingHandCursor
+            onClicked: {
+                dropDown.open()
+            }
+        }
+    }
+
+    Popup {
+        id: dropDown
+        width: root.width
+        height: 120
+        clip: true
+        visible: false
+
+        Rectangle {
+            anchors.fill: parent
+            radius: Appearance.rounding.small
+            color: Colours.palette.m3surfaceContainer
+            ListView {
+                id: listView
+                height: dropDown.height;
+                model: root.items
+                currentIndex: 0
+
+                delegate: Rectangle {
+                    width: root.width
+                    height: root.height
+                    radius: Appearance.rounding.small
+                    color: dropDownMa.containsMouse ? Colours.palette.m3outline : "transparent"
+
+                    StyledText {
+                        anchors.top: parent.top
+                        anchors.left: parent.left
+                        anchors.right: parent.right
+                        anchors.margins: 5
+                        elide: Text.ElideRight
+                        text: modelData
+                    }
+                    WrapperMouseArea {
+                        id: dropDownMa
+                        anchors.fill: parent
+                        cursorShape: Qt.PointingHandCursor
+                        hoverEnabled: true
+                        onClicked: {
+                            root.state = "";
+                            var prevSelection = chosenItemText.text;
+                            chosenItemText.text = modelData;
+                            if(chosenItemText.text != prevSelection){
+                                root.optionClicked(index);
+                            }
+                            listView.currentIndex = index;
+                            dropDown.close()
+                        }
+                    }
+                }
+            }
+        }
+        onVisibleChanged: {
+            if (dropDown.visible) {
+                dropDown.x = chosenItem.x;
+                dropDown.y = chosenItem.y + chosenItem.height + Appearance.spacing.small;
+            }
+        }
+    }
+}

components/controls/StyledSlider.qml

@@ -7,6 +7,21 @@ import QtQuick.Templates
 Slider {
     id: root
 
+    enum SliderType {
+        Default = 0,
+        Error = 1
+    }
+    property int type: StyledSlider.SliderType.Default
+
+    function getBarColour() {
+        if (type === StyledSlider.SliderType.Default) return Colours.palette.m3primary;
+        if (type === StyledSlider.SliderType.Error) return Colours.palette.m3error;
+    }
+    function getHandleColour() {
+        if (type === StyledSlider.SliderType.Default) return Colours.palette.m3surfaceContainer;
+        if (type === StyledSlider.SliderType.Error) return Colours.palette.m3errorContainer;
+    }
+
     background: Item {
         StyledRect {
             anchors.top: parent.top
@@ -17,7 +32,7 @@ Slider {
 
             implicitWidth: root.handle.x - root.implicitHeight / 6
 
-            color: Colours.palette.m3primary
+            color: root.getBarColour()
             radius: Appearance.rounding.full
             topRightRadius: root.implicitHeight / 15
             bottomRightRadius: root.implicitHeight / 15
@@ -32,7 +47,7 @@ Slider {
 
             implicitWidth: parent.width - root.handle.x - root.handle.implicitWidth - root.implicitHeight / 6
 
-            color: Colours.tPalette.m3surfaceContainer
+            color: root.getHandleColour()
             radius: Appearance.rounding.full
             topLeftRadius: root.implicitHeight / 15
             bottomLeftRadius: root.implicitHeight / 15
@@ -45,7 +60,7 @@ Slider {
         implicitWidth: root.implicitHeight / 4.5
         implicitHeight: root.implicitHeight
 
-        color: Colours.palette.m3primary
+        color: root.getBarColour()
         radius: Appearance.rounding.full
 
         MouseArea {

config/DashboardConfig.qml

@@ -5,6 +5,7 @@ JsonObject {
     property bool showOnHover: true
     property int mediaUpdateInterval: 500
     property int dragThreshold: 50
+    property bool showAudioMixerOverMediaGif: false
     property Sizes sizes: Sizes {}
 
     component Sizes: JsonObject {

modules/controlcenter/Panes.qml

@@ -1,6 +1,7 @@
 pragma ComponentBehavior: Bound
 
 import "bluetooth"
+import "audio"
 import qs.components
 import qs.services
 import qs.config
@@ -43,15 +44,7 @@ ClippingRectangle {
 
         Pane {
             index: 2
-            sourceComponent: Item {
-                StyledText {
-                    anchors.centerIn: parent
-                    text: qsTr("Work in progress")
-                    color: Colours.palette.m3outline
-                    font.pointSize: Appearance.font.size.extraLarge
-                    font.weight: 500
-                }
-            }
+            sourceComponent: AudioPane { }
         }
 
         Behavior on y {