feat(quickshell): show microphone status separately

home/dot_config/quickshell/bar/Bar.qml

@@ -122,15 +122,19 @@ PanelWindow {
             interactive: true
             text: {
                 if (!bar.sink || !bar.sink.audio)
-                    return "\uf6a9";
-                const output = bar.sink.audio.muted
-                    ? "\uf6a9" : "\uf028 " + Math.round(bar.sink.audio.volume * 100) + "%";
-                const input = bar.source && bar.source.audio
-                    ? (bar.source.audio.muted ? "\uf131"
-                        : "\uf130 " + Math.round(bar.source.audio.volume * 100) + "%")
-                    : "";
-                return output + (input ? "  " + input : "");
+                    return "\uf026";
+                return bar.sink.audio.muted
+                    ? "\uf026" : "\uf028 " + Math.round(bar.sink.audio.volume * 100) + "%";
             }
+            secondaryIcon: bar.source && bar.source.audio
+                ? (bar.source.audio.muted
+                    ? "file://" + Quickshell.shellPath("icons/microphone-muted.svg")
+                    : "file://" + Quickshell.shellPath("icons/microphone.svg"))
+                : ""
+            secondaryText: bar.source && bar.source.audio
+                ? (bar.source.audio.muted ? "OFF"
+                    : Math.round(bar.source.audio.volume * 100) + "%")
+                : ""
             onClicked: mouse => {
                 if (mouse.button === Qt.MiddleButton && bar.sink && bar.sink.audio)
                     bar.sink.audio.muted = !bar.sink.audio.muted;

home/dot_config/quickshell/bar/Block.qml

@@ -1,4 +1,5 @@
 import QtQuick
+import Quickshell.Widgets
 
 Rectangle {
     id: root
@@ -7,22 +8,46 @@ Rectangle {
     property color textColor: "#ffffff"
     property bool interactive: false
     property string text: ""
+    property string fontFamily: "SF Pro Display, Font Awesome 6 Free"
+    property string secondaryIcon: ""
+    property string secondaryText: ""
     signal clicked(var mouse)
     signal wheel(var wheel)
 
-    implicitWidth: label.implicitWidth + 20
+    implicitWidth: content.implicitWidth + 20
     implicitHeight: 32
     color: blockColor
 
-    Text {
-        id: label
+    Row {
+        id: content
         anchors.centerIn: parent
+        spacing: 7
+
+        Text {
             text: root.text
             color: root.textColor
-        font.family: "SF Pro Display, Font Awesome 6 Free"
+            font.family: root.fontFamily
             font.pixelSize: 18
         }
 
+        IconImage {
+            width: 18
+            height: 18
+            anchors.verticalCenter: parent.verticalCenter
+            visible: root.secondaryIcon !== ""
+            source: root.secondaryIcon
+        }
+
+        Text {
+            anchors.verticalCenter: parent.verticalCenter
+            visible: root.secondaryText !== ""
+            text: root.secondaryText
+            color: root.textColor
+            font.family: root.fontFamily
+            font.pixelSize: 18
+        }
+    }
+
     MouseArea {
         anchors.fill: parent
         enabled: root.interactive

home/dot_config/quickshell/bar/icons/microphone-muted.svg

@@ -0,0 +1,6 @@
+<svg height="16" viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg">
+  <g fill="#ffffff">
+    <path d="M8 1C6.34 1 5 2.34 5 4v4c0 1.66 1.34 3 3 3 .36 0 .7-.07 1.02-.18.04-.45.23-.89.57-1.23.33-.33.77-.54 1.23-.58.11-.32.18-.66.18-1.01V4c0-1.66-1.34-3-3-3zm0 2c.55 0 1 .45 1 1v4c0 .55-.45 1-1 1s-1-.45-1-1V4c0-.55.45-1 1-1zM2 7v1.01c0 2.96 2.16 5.42 5 5.9V16h2v-2.09c.13-.02.25-.05.38-.08a2 2 0 0 1 .21-.24l.41-.42v-.34l-.41-.42a2 2 0 0 1-.15-.16A4.5 4.5 0 0 1 3.5 8.01V7z" opacity=".7"/>
+    <path d="M11 10a1 1 0 0 0-.71 1.71L11.59 13l-1.3 1.29a1 1 0 1 0 1.42 1.42L13 14.41l1.29 1.3a1 1 0 1 0 1.42-1.42L14.41 13l1.3-1.29a1 1 0 1 0-1.42-1.42L13 11.59l-1.29-1.3A1 1 0 0 0 11 10z"/>
+  </g>
+</svg>

home/dot_config/quickshell/bar/icons/microphone.svg

@@ -0,0 +1,3 @@
+<svg height="16" viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg">
+  <path d="M8 0C6.34 0 5 1.34 5 3v5c0 1.66 1.34 3 3 3s3-1.34 3-3V3c0-1.66-1.34-3-3-3zM2 6v2.01c0 2.96 2.16 5.43 5 5.91V16h2v-2.08c2.84-.48 5-2.94 5-5.91V6h-1.5v2.01c0 2.5-1.99 4.49-4.5 4.49s-4.5-1.99-4.5-4.49V6z" fill="#ffffff"/>
+</svg>