qs: add peak detection

modules/user/modules/quickshell/shell/bar/audio/AudioControl.qml

@@ -10,6 +10,12 @@ ClickableIcon {
 
 	PwObjectTracker { objects: [ node ] }
 
+	PwNodePeakMonitor {
+		id: peakMonitor
+		node: root.node
+		enabled: tooltip.visible
+	}
+
 	implicitHeight: width;
 	acceptedButtons: Qt.LeftButton | Qt.RightButton;
 	fillWindowWidth: true
@@ -55,6 +61,7 @@ ClickableIcon {
 
 				//enabled: !node.audio.muted
 				value: node.audio.volume
+				peak: peakMonitor.peak
 				onValueChanged: node.audio.volume = value
 			}
 		}

modules/user/modules/quickshell/shell/bar/audio/Mixer.qml

@@ -45,6 +45,7 @@ ColumnLayout {
 			required property PwLinkGroup modelData;
 			node: trackedNode.isSink ? modelData.source : modelData.target;
 			state: modelData.state;
+			peakDetect: trackedNode.isSink
 
 			image: {
 				let icon = "";

modules/user/modules/quickshell/shell/bar/audio/MixerEntryBase.qml

@@ -9,6 +9,7 @@ RowLayout {
 	required property PwNode node;
 	required property string image;
 	required property Item headerComponent;
+	property bool peakDetect: true;
 
 	property int state: PwLinkState.Unlinked;
 
@@ -21,6 +22,12 @@ RowLayout {
 
 	PwObjectTracker { objects: [ node ] }
 
+	PwNodePeakMonitor {
+		id: peakMonitor
+		node: root.node
+		enabled: root.peakDetect
+	}
+
 	ClickableIcon {
 		image: root.image
 		asynchronous: true
@@ -44,6 +51,7 @@ RowLayout {
 			Layout.fillWidth: true
 
 			value: node.audio.volume
+			peak: root.peakDetect ? peakMonitor.peak : 1
 			onValueChanged: node.audio.volume = value
 		}
 	}

modules/user/modules/quickshell/shell/bar/audio/VolumeSlider.qml

@@ -7,11 +7,13 @@ Item {
 	property real to: 1.5
 	property real warning: 1.0
 	property real value: 0.0
+	property real peak: 1.0
 
 	implicitWidth: groove.implicitWidth
 	implicitHeight: 20
 
 	property real __valueOffset: ((value - from) / (to - from)) * groove.width
+	property real __peakOffset: peak * __valueOffset
 	property real __wheelValue: -1
 
 	MouseArea {
@@ -55,10 +57,24 @@ Item {
 			}
 
 			radius: 5
-			color: "#80ceffff"
+			color: "#40ceffff"
 			width: __valueOffset
 		}
 
+		Rectangle {
+			id: peakFill
+
+			anchors {
+				left: groove.left
+				top: groove.top
+				bottom: groove.bottom
+			}
+
+			radius: 5
+			color: "#60ceffff"
+			width: __peakOffset
+		}
+
 		Rectangle {
 			id: groove