basic pipewire, no menu

config/Dimensions.qml

@@ -11,6 +11,7 @@ Singleton {
     property Bar bar: Bar {}
     property Mpris mpris: Mpris {}
     property Clock clock: Clock {}
+    property Pipewire pipewire: Pipewire {}
     property Caffeine caffeine: Caffeine {}
     property Workspace workspace: Workspace {}
     property Tray tray: Tray {}
@@ -46,6 +47,15 @@ Singleton {
         property int verticalPadding: 6
     }
 
+    component Pipewire: QtObject {
+        id: clock
+
+        property int fontSize: 14
+        property int height: 30
+        property int horizontalPadding: 8
+        property int verticalPadding: 6
+    }
+
     component Caffeine: QtObject {
         id: clock
 

modules/bar/Bar.qml

@@ -92,6 +92,10 @@ Scope {
 
                 spacing: Dimensions.bar.spacing
 
+                Pipewire {
+                    anchors.verticalCenter: parent.verticalCenter
+                }
+
                 Caffeine {
                     anchors.verticalCenter: parent.verticalCenter
                 }

modules/bar/components/Pipewire.qml

@@ -0,0 +1,72 @@
+import QtQuick
+import Quickshell.Services.Pipewire
+import "../../../config/"
+import "../../../styled/"
+
+Clickable {
+    id: clickable
+
+    property var sink: Pipewire.defaultAudioSink
+
+    implicitWidth: text.width
+    implicitHeight: Dimensions.pipewire.height
+
+    PwObjectTracker {
+        id: bound
+        objects: [clickable.sink]
+    }
+
+    onClicked: mouse => {
+        if (mouse.button == Qt.LeftButton) {
+            sink.audio.muted = !sink.audio.muted;
+        } else if (mouse.button == Qt.RightButton) {
+            // show menu
+        }
+    }
+
+    onWheel: event => {
+        if (event.angleDelta.y > 0) {
+            sink.audio.volume = Math.min(sink.audio.volume + 0.02, 1.0);
+        } else if (event.angleDelta.y < 0) {
+            sink.audio.volume -= 0.02;
+        }
+    }
+
+    states: [
+        State {
+            name: "muted"
+            when: clickable.sink.audio.muted
+            PropertyChanges {
+                text {
+                    icon: " "
+                }
+            }
+        },
+        State {
+            name: "off"
+            when: clickable.sink.audio.volume <= 0
+            PropertyChanges {
+                text {
+                    icon: " "
+                }
+            }
+        }
+    ]
+
+    StyledText {
+        id: text
+
+        property string icon: " "
+
+        text: `${icon} ${(Pipewire.defaultAudioSink.audio.volume * 100).toFixed()}%`
+        font.pixelSize: Dimensions.pipewire.fontSize
+
+        color: clickable.containsMouse ? Theme.palette.base300 : Theme.palette.basecontent
+
+        anchors.verticalCenter: parent.verticalCenter
+        topPadding: Dimensions.pipewire.verticalPadding
+        bottomPadding: Dimensions.pipewire.verticalPadding
+        leftPadding: Dimensions.pipewire.horizontalPadding
+        rightPadding: Dimensions.pipewire.horizontalPadding
+    }
+}