audio: create and connect volume popup to IPCs

Modules/ControlCenter/Audio/VolumeControl.qml

@@ -23,7 +23,6 @@ Column {
         id: volumeSlider
         
         width: parent.width
-        value: Math.round(root.volumeLevel)
         minimum: 0
         maximum: 100
         leftIcon: root.volumeMuted ? "volume_off" : "volume_down"
@@ -32,16 +31,18 @@ Column {
         showValue: true
         unit: "%"
         
-        onSliderValueChanged: (newValue) => {
-            if (AudioService.sink && AudioService.sink.audio) {
-                AudioService.sink.audio.muted = false;
-                AudioService.sink.audio.volume = newValue / 100;
+        Connections {
+            target: AudioService.sink && AudioService.sink.audio ? AudioService.sink.audio : null
+            function onVolumeChanged() {
+                volumeSlider.value = Math.round(AudioService.sink.audio.volume * 100);
             }
         }
         
-        // Add click handler for mute icon
         Component.onCompleted: {
-            // Find the left icon and add mouse area
+            if (AudioService.sink && AudioService.sink.audio) {
+                value = Math.round(AudioService.sink.audio.volume * 100);
+            }
+            
             let leftIconItem = volumeSlider.children[0].children[0];
             if (leftIconItem) {
                 let mouseArea = Qt.createQmlObject(
@@ -51,5 +52,12 @@ Column {
                 );
             }
         }
+        
+        onSliderValueChanged: (newValue) => {
+            if (AudioService.sink && AudioService.sink.audio) {
+                AudioService.sink.audio.muted = false;
+                AudioService.sink.audio.volume = newValue / 100;
+            }
+        }
     }
 }

Modules/VolumePopup.qml

@@ -0,0 +1,209 @@
+import QtQuick
+import QtQuick.Effects
+import Quickshell
+import Quickshell.Wayland
+import Quickshell.Widgets
+import qs.Common
+import qs.Services
+import qs.Widgets
+
+PanelWindow {
+    id: root
+
+    property bool volumePopupVisible: false
+
+    visible: volumePopupVisible
+    WlrLayershell.layer: WlrLayershell.Overlay
+    WlrLayershell.exclusiveZone: -1
+    WlrLayershell.keyboardFocus: WlrKeyboardFocus.None
+    color: "transparent"
+
+    anchors {
+        top: true
+        left: true
+        right: true
+        bottom: true
+    }
+
+    Timer {
+        id: hideTimer
+        interval: 3000
+        repeat: false
+        onTriggered: {
+            if (!volumePopup.containsMouse) {
+                root.volumePopupVisible = false
+            } else {
+                hideTimer.restart()
+            }
+        }
+    }
+
+    function show() {
+        root.volumePopupVisible = true;
+        hideTimer.restart();
+    }
+
+    function resetHideTimer() {
+        if (root.volumePopupVisible) {
+            hideTimer.restart();
+        }
+    }
+
+    Connections {
+        target: AudioService
+        function onVolumeChanged() {
+            root.show();
+        }
+        function onSinkChanged() {
+            if (root.volumePopupVisible) {
+                root.show();
+            }
+        }
+    }
+
+
+    Rectangle {
+        id: volumePopup
+
+        property bool containsMouse: popupMouseArea.containsMouse
+
+        width: Math.min(260, Screen.width - Theme.spacingM * 2)
+        height: volumeContent.height + Theme.spacingS * 2
+        anchors.horizontalCenter: parent.horizontalCenter
+        anchors.bottom: parent.bottom
+        anchors.bottomMargin: Theme.spacingM
+        
+        color: Theme.popupBackground()
+        radius: Theme.cornerRadiusLarge
+        border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.08)
+        border.width: 1
+        
+        opacity: root.volumePopupVisible ? 1 : 0
+        scale: root.volumePopupVisible ? 1 : 0.9
+
+        Column {
+            id: volumeContent
+            
+            anchors.centerIn: parent
+            width: parent.width - Theme.spacingS * 2
+            spacing: Theme.spacingXS
+
+            Item {
+                width: parent.width
+                height: 40
+                
+                property int gap: Theme.spacingS
+                
+                Rectangle {
+                    width: Theme.iconSize
+                    height: Theme.iconSize
+                    radius: Theme.iconSize / 2
+                    color: "transparent"
+                    x: parent.gap
+                    anchors.verticalCenter: parent.verticalCenter
+
+                    DankIcon {
+                        anchors.centerIn: parent
+                        name: AudioService.sink && AudioService.sink.audio && AudioService.sink.audio.muted ? 
+                            "volume_off" : "volume_up"
+                        size: Theme.iconSize
+                        color: muteButton.containsMouse ? Theme.primary : Theme.surfaceText
+                    }
+
+                    MouseArea {
+                        id: muteButton
+                        anchors.fill: parent
+                        hoverEnabled: true
+                        cursorShape: Qt.PointingHandCursor
+                        onClicked: {
+                            AudioService.toggleMute();
+                            root.resetHideTimer();
+                        }
+                    }
+                }
+
+                DankSlider {
+                    id: volumeSlider
+                    width: parent.width - Theme.iconSize - parent.gap * 3
+                    height: 40
+                    x: parent.gap * 2 + Theme.iconSize
+                    anchors.verticalCenter: parent.verticalCenter
+                    minimum: 0
+                    maximum: 100
+                    enabled: AudioService.sink && AudioService.sink.audio
+                    showValue: true
+                    unit: "%"
+                    
+                    Connections {
+                        target: AudioService.sink && AudioService.sink.audio ? AudioService.sink.audio : null
+                        function onVolumeChanged() {
+                            volumeSlider.value = Math.round(AudioService.sink.audio.volume * 100);
+                        }
+                    }
+                    
+                    Component.onCompleted: {
+                        if (AudioService.sink && AudioService.sink.audio) {
+                            value = Math.round(AudioService.sink.audio.volume * 100);
+                        }
+                    }
+                    
+                    onSliderValueChanged: function(newValue) {
+                        if (AudioService.sink && AudioService.sink.audio) {
+                            AudioService.sink.audio.volume = newValue / 100;
+                            root.resetHideTimer();
+                        }
+                    }
+                }
+            }
+
+        }
+
+        MouseArea {
+            id: popupMouseArea
+            anchors.fill: parent
+            hoverEnabled: true
+            acceptedButtons: Qt.NoButton
+            propagateComposedEvents: true
+            z: -1
+        }
+
+        layer.enabled: true
+        layer.effect: MultiEffect {
+            shadowEnabled: true
+            shadowHorizontalOffset: 0
+            shadowVerticalOffset: 4
+            shadowBlur: 0.8
+            shadowColor: Qt.rgba(0, 0, 0, 0.3)
+            shadowOpacity: 0.3
+        }
+
+        transform: Translate {
+            y: root.volumePopupVisible ? 0 : 20
+        }
+
+        Behavior on opacity {
+            NumberAnimation {
+                duration: Theme.mediumDuration
+                easing.type: Theme.emphasizedEasing
+            }
+        }
+
+        Behavior on scale {
+            NumberAnimation {
+                duration: Theme.mediumDuration
+                easing.type: Theme.emphasizedEasing
+            }
+        }
+
+        Behavior on transform {
+            PropertyAnimation {
+                duration: Theme.mediumDuration
+                easing.type: Theme.emphasizedEasing
+            }
+        }
+    }
+
+    mask: Region {
+        item: volumePopup
+    }
+}