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",
   });
 

modules/menus/DropdownMenu.js

@@ -9,7 +9,7 @@ export const Padding = (name) =>
     setup: (w) => w.on("button-press-event", () => App.toggleWindow(name)),
   });
 
-const moveBoxToCursor = (self, minWidth, minHeight) => {
+const moveBoxToCursor = (self, minWidth, minHeight, fixed) => {
   globalMousePos.connect("changed", ({ value }) => {
     let monWidth = hyprland.monitors[hyprland.active.monitor.id].width;
     let monHeight = hyprland.monitors[hyprland.active.monitor.id].height;
@@ -19,7 +19,8 @@ const moveBoxToCursor = (self, minWidth, minHeight) => {
       [monWidth, monHeight] = [monHeight, monWidth];
     }
 
-    let marginRight = monWidth - value[0] - minWidth / 2;
+    let marginRight = monWidth - minWidth / 2;
+    marginRight = fixed ? marginRight - monWidth / 2 : marginRight - value[0];
     let marginLeft = monWidth - minWidth - marginRight;
 
     if (marginRight < 0) {
@@ -46,6 +47,7 @@ export default ({
   minWidth = 375,
   minHeight = 200,
   exclusivity = "ignore",
+  fixed = false,
   ...props
 }) =>
   Widget.Window({
@@ -68,7 +70,7 @@ export default ({
           return true;
         },
         setup: (self) => {
-          moveBoxToCursor(self, minWidth, minHeight);
+          moveBoxToCursor(self, minWidth, minHeight, fixed);
         },
         child: Widget.Box({
           css: "padding: 1px; margin: -1px;",

modules/menus/audio/index.js

@@ -2,6 +2,9 @@ const audio = await Service.import("audio");
 import DropdownMenu from "../DropdownMenu.js";
 
 export default () => {
+  audio.connect("changed", val => {
+    // console.log(JSON.stringify(val, null, 2));
+  })
   const renderPlaybacks = (playbackDevices) => {
     return playbackDevices.map((device) => {
       if (device.description === "Dummy Output") {

modules/menus/media/index.js

@@ -5,10 +5,12 @@ export default () => {
   return DropdownMenu({
     name: "mediamenu",
     transition: "crossfade",
+    fixed: true,
     child: Widget.Box({
       class_name: "menu-items",
       child: Widget.Box({
         vertical: true,
+        hexpand: true,
         class_name: "menu-items-container",
         children: [
           Widget.Box({