Styled power menu

modules/bar/media/index.js

@@ -42,14 +42,22 @@ const Media = () => {
     return foundMatch ? foundMatch[1] : "󰝚";
   };
 
-  const label = Utils.watch("󰎇 Nothing is playing 󰎇", mpris, "player-changed", () => {
-    if (activePlayer.value) {
-      const { track_title, identity } = activePlayer.value;
-      return `${getIconForPlayer(identity)}  ${track_title}`;
-    } else {
-      return "󰎇 Nothing is playing 󰎇";
-    }
-  });
+  const songIcon = Variable("");
+
+  const label = Utils.watch(
+    "󰎇 No media playing 󰎇",
+    mpris,
+    "player-changed",
+    () => {
+      if (activePlayer.value) {
+        const { track_title, identity } = activePlayer.value;
+        songIcon.value = getIconForPlayer(identity);
+        return track_title.length === 0 ? `  No media playing...` : `  ${track_title}`;
+      } else {
+        return "󰎇 No media playing 󰎇";
+      }
+    },
+  );
 
   return {
     component: Widget.Box({
@@ -59,11 +67,20 @@ const Media = () => {
         on_primary_click: () => mpris.getPlayer("")?.playPause(),
         on_scroll_up: () => mpris.getPlayer("")?.next(),
         on_scroll_down: () => mpris.getPlayer("")?.previous(),
-        child: Widget.Label({
-          label,
-          truncate: 'end',
-          wrap: true,
-          maxWidthChars: 30,
+        child: Widget.Box({
+          children: [
+            Widget.Label({
+              class_name: "bar-media_icon",
+              label: songIcon.bind("value"),
+              maxWidthChars: 30,
+            }),
+            Widget.Label({
+              label,
+              truncate: "end",
+              wrap: true,
+              maxWidthChars: 30,
+            }),
+          ],
         }),
       }),
     }),

modules/bar/power/index.js

@@ -2,8 +2,7 @@ export const Power = () => {
   return {
     component: Widget.Box({
       child: Widget.Button({
-        class_name: "powermenu",
-        on_clicked: () => App.toggleWindow("powermenu"),
+        class_name: "bar-powermenu",
         child: Widget.Label({
           class_name: "bar-power_label",
           label: "⏻",
@@ -11,5 +10,8 @@ export const Power = () => {
       }),
     }),
     isVisible: true,
+    props: {
+      on_clicked: () => App.toggleWindow("powermenu"),
+    },
   };
 };

modules/bar/workspaces/index.js

@@ -27,12 +27,6 @@ const Workspaces = (monitor = -1, wsMap = {}, ws = 8) => {
             label: `${i}`,
             setup: (self) =>
               self.hook(hyprland, () => {
-                // console.log(`currentMonitor: ${monitor}`);
-                console.log(i);
-                console.log(JSON.stringify(hyprland.getWorkspace(i), null, 2));
-                if (hyprland.getWorkspace(i)) {
-                  // console.log(`currentMonitor: ${monitor}`);
-                }
                 self.toggleClassName(
                   "active",
                   hyprland.active.workspace.id === i,

modules/menus/PopupWindow.js

@@ -127,7 +127,7 @@ export default ({
     name,
     class_names: [name, "popup-window"],
     setup: w => w.keybind("Escape", () => App.closeWindow(name)),
-    visible: true,
+    visible: false,
     keymode: "on-demand",
     exclusivity,
     layer: "top",

modules/menus/power/verification.js

@@ -30,14 +30,12 @@ export default () =>
           homogeneous: true,
           children: [
             Widget.Button({
+              class_name: "verification-button bar-verification_no",
               child: Widget.Label("No"),
               on_clicked: () => App.toggleWindow("verification"),
-              setup: (self) =>
-                self.hook(App, (_, name, visible) => {
-                  if (name === "verification" && visible) self.grab_focus();
-                }),
             }),
             Widget.Button({
+              class_name: "verification-button bar-verification_yes",
               child: Widget.Label("Yes"),
               on_clicked: powermenu.exec,
             }),

modules/shared/barItemBox.js

@@ -7,9 +7,10 @@ export const BarItemBox = (child) => {
     return child.isVisible;
   };
 
-  return Widget.Box({
+  return Widget.Button({
     class_name: "bar_item_box_visible",
     child: child.component,
     visible: computeVisible(),
+    ...child.props
   });
 };