add click-to-mute on app icons in the volume mixer

dots/.config/quickshell/ii/modules/ii/sidebarRight/volumeMixer/VolumeMixerEntry.qml

@@ -5,6 +5,7 @@ import QtQuick
 import QtQuick.Layouts
 import Quickshell
 import Quickshell.Services.Pipewire
+import Qt5Compat.GraphicalEffects
 
 Item {
     id: root
@@ -20,19 +21,51 @@ Item {
         anchors.fill: parent
         spacing: 6
 
-        Image {
+        Item {
             property real size: 36
             Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
-            visible: source != ""
+            Layout.preferredWidth: size
-            sourceSize.width: size
+            Layout.preferredHeight: size
-            sourceSize.height: size
+
-            source: {
+            Image {
-                let icon;
+                id: iconImg
-                icon = AppSearch.guessIcon(root.node?.properties["application.icon-name"] ?? "");
+                anchors.fill: parent
-                if (AppSearch.iconExists(icon))
+                visible: false
+                sourceSize.width: parent.size
+                sourceSize.height: parent.size
+                source: {
+                    let icon;
+                    icon = AppSearch.guessIcon(root.node?.properties["application.icon-name"] ?? "");
+                    if (AppSearch.iconExists(icon))
+                        return Quickshell.iconPath(icon, "image-missing");
+                    icon = AppSearch.guessIcon(root.node?.properties["node.name"] ?? "");
                     return Quickshell.iconPath(icon, "image-missing");
-                icon = AppSearch.guessIcon(root.node?.properties["node.name"] ?? "");
+                }
-                return Quickshell.iconPath(icon, "image-missing");
+            }
+
+            Desaturate {
+                anchors.fill: iconImg
+                source: iconImg
+                desaturation: root.node?.audio.muted ? 1.0 : 0.0
+                visible: iconImg.source != ""
+                opacity: root.node?.audio.muted ? 0.4 : 1.0
+                
+                Behavior on opacity { NumberAnimation { duration: 150 } }
+                Behavior on desaturation { NumberAnimation { duration: 150 } }
+            }
+
+            MaterialSymbol {
+                anchors.centerIn: parent
+                visible: root.node?.audio.muted ?? false
+                text: root.node?.isSink ? "volume_off" : "mic_off"
+                font.pixelSize: 22
+                color: Appearance.colors.colError
+            }
+
+            MouseArea {
+                anchors.fill: parent
+                cursorShape: Qt.PointingHandCursor
+                onClicked: root.node.audio.muted = !root.node.audio.muted
             }
         }