Fixed systray icons to have reactive sizing and volume icon to properly change when muted/unmuted.

modules/bar/bar.js

@@ -7,7 +7,8 @@ import { Volume } from "./volume/index.js";
 import { Network } from "./network/index.js";
 import { Bluetooth } from "./bluetooth/index.js";
 import { BatteryLabel } from "./battery/index.js";
-import { Clock } from "./clock/index.js"; import { SysTray } from "./systray/index.js";
+import { Clock } from "./clock/index.js"; 
+import { SysTray } from "./systray/index.js";
 import { Power } from "./power/index.js";
 
 import { BarItemBox } from "../shared/barItemBox.js";

modules/bar/systray/index.js

@@ -13,8 +13,8 @@ const SysTray = () => {
       return Widget.Button({
         cursor: "pointer",
         child: Widget.Icon({
+          class_name: "systray-icon",
           icon: item.bind("icon"),
-          size: 18,
         }),
         on_primary_click: (_, event) => item.activate(event),
         on_secondary_click: (_, event) => item.openMenu(event),

modules/bar/volume/index.js

@@ -12,17 +12,22 @@ const Volume = () => {
   };
 
   const getIcon = () => {
-    const icon = audio.speaker.is_muted
-      ? 0
-      : [101, 66, 34, 1, 0].find(
-          (threshold) => threshold <= audio.speaker.volume * 100,
-        );
+    const icon = Utils.merge(
+      [audio.speaker.bind("is_muted"), audio.speaker.bind("volume")],
+      (isMuted, vol) => {
+        return isMuted
+          ? 0
+          : [101, 66, 34, 1, 0].find((threshold) => threshold <= vol * 100);
+      },
+    );
 
-    return icons[icon];
+    console.log(icon);
+
+    return icon.as((i) => icons[i]);
   };
 
   const volIcn = Widget.Label({
-    label: audio.speaker.bind("volume").as(() => getIcon()),
+    label: getIcon(),
     class_name: "bar-volume_icon",
   });