Add volume indicator

quickshell/ui/AudioIcon.qml

@@ -0,0 +1,53 @@
+import Quickshell
+import Quickshell.Io
+import QtQuick
+import QtQuick.Layouts
+
+import "../constants"
+import "../services"
+
+Text {
+    id: root
+    required property TopBar parentWindow
+
+    property string lowVolumeIconGlyph: "\uf027"
+    property string highVolumeIconGlyph: "\uf028"
+    property string iconGlyph: lowVolumeIconGlyph
+    property string volumeText: ""
+    property list<string> volumeDudes: ["⸝(°-°)⸜","ヽ(°∘°)ﾉ","ヽ(°o°)ﾉ","ヽ(°O°)ﾉ","ヽ(°ᗜ°)ﾉ","ヽ(°〇°)ﾉ","ᕙ( ᗒᗣᗕ )ᕗ"]
+    property int volumeDudeIndex: 0
+    property int dudeStep: 100 / volumeDudes.length
+
+    property AudioService audioService: AudioService {
+        onVolumeChanged: function (volume) {
+            var dudeIndex = Math.min(Math.floor(volume / root.dudeStep), root.volumeDudes.length - 1);
+            root.text = volume + "% " + root.volumeDudes[dudeIndex];
+        }
+    }
+
+    text: iconGlyph
+    color: Colors.md3.on_primary_fixed
+
+    font {
+        family: Constants.fontFamily
+        pixelSize: Constants.fontSize
+        bold: false
+    }
+
+    MouseArea {
+        anchors.fill: parent
+        hoverEnabled: true
+
+        onClicked: {
+            // TODO open volume control panel
+        }
+
+        onWheel: function (wheel) {
+            if (wheel.angleDelta.y > 0) {
+                root.audioService.volumeUp();
+            } else {
+                root.audioService.volumeDown();
+            }
+        }
+    }
+}