redesign control center

Modules/ControlCenter/Widgets/AudioSliderRow.qml

@@ -0,0 +1,78 @@
+import QtQuick
+import QtQuick.Controls
+import Quickshell
+import Quickshell.Services.Pipewire
+import qs.Common
+import qs.Services
+import qs.Widgets
+
+Row {
+    id: root
+
+    property var defaultSink: AudioService.sink
+
+    height: 60
+    spacing: Theme.spacingM
+
+    Rectangle {
+        width: Theme.iconSize + Theme.spacingS * 2
+        height: Theme.iconSize + Theme.spacingS * 2
+        anchors.verticalCenter: parent.verticalCenter
+        radius: (Theme.iconSize + Theme.spacingS * 2) / 2  // Make it circular
+        color: iconArea.containsMouse ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.12) : "transparent"
+        
+        Behavior on color {
+            ColorAnimation { duration: Theme.shortDuration }
+        }
+
+        MouseArea {
+            id: iconArea
+            anchors.fill: parent
+            visible: defaultSink !== null
+            hoverEnabled: true
+            cursorShape: Qt.PointingHandCursor
+            onClicked: {
+                if (defaultSink) {
+                    defaultSink.audio.muted = !defaultSink.audio.muted
+                }
+            }
+        }
+
+        DankIcon {
+            anchors.centerIn: parent
+            name: {
+                if (!defaultSink) return "volume_off"
+                
+                let volume = defaultSink.audio.volume
+                let muted = defaultSink.audio.muted
+                
+                if (muted || volume === 0.0) return "volume_off"
+                if (volume <= 0.33) return "volume_down"
+                if (volume <= 0.66) return "volume_up"
+                return "volume_up"
+            }
+            size: Theme.iconSize
+            color: defaultSink && !defaultSink.audio.muted && defaultSink.audio.volume > 0 ? Theme.primary : Theme.surfaceText
+        }
+    }
+
+    DankSlider {
+        anchors.verticalCenter: parent.verticalCenter
+        width: {
+            if (parent.width <= 0) return 80
+            return Math.max(80, Math.min(400, parent.width - (Theme.iconSize + Theme.spacingS * 2) - Theme.spacingM))
+        }
+        enabled: defaultSink !== null
+        minimum: 0
+        maximum: 100
+        value: defaultSink ? Math.round(defaultSink.audio.volume * 100) : 0
+        onSliderValueChanged: function(newValue) {
+            if (defaultSink) {
+                defaultSink.audio.volume = newValue / 100.0
+                if (newValue > 0 && defaultSink.audio.muted) {
+                    defaultSink.audio.muted = false
+                }
+            }
+        }
+    }
+}