Added Power menu and show only the workspaces allocated to monitor

modules/menus/power/helpers/actions.js

@@ -0,0 +1,54 @@
+const powerOptions = {
+  sleep: "systemctl suspend",
+  reboot: "systemctl reboot",
+  logout: "pkill Hyprland",
+  shutdown: "shutdown now",
+};
+
+class PowerMenu extends Service {
+  static {
+    Service.register(
+      this,
+      {},
+      {
+        title: ["string"],
+        cmd: ["string"],
+      },
+    );
+  }
+
+  #title = "";
+  #cmd = "";
+
+  get title() {
+    return this.#title;
+  }
+
+  action(action) {
+    [this.#cmd, this.#title] = {
+      sleep: [powerOptions.sleep, "Sleep"],
+      reboot: [powerOptions.reboot, "Reboot"],
+      logout: [powerOptions.logout, "Log Out"],
+      shutdown: [powerOptions.shutdown, "Shutdown"],
+    }[action];
+
+    this.notify("cmd");
+    this.notify("title");
+    this.emit("changed");
+    App.closeWindow("powermenu");
+    App.openWindow("verification");
+  }
+
+  shutdown = () => {
+    this.action("shutdown");
+  };
+
+  exec = () => {
+    App.closeWindow("verification");
+    Utils.exec(this.#cmd);
+  };
+}
+
+const powermenu = new PowerMenu();
+Object.assign(globalThis, { powermenu });
+export default powermenu;

modules/menus/power/index.js

@@ -0,0 +1,37 @@
+import PopupWindow from "../PopupWindow.js";
+import powermenu from "./helpers/actions.js";
+import icons from "../../icons/index.js";
+
+const SysButton = (action, label) =>
+  Widget.Button({
+    class_name: `widget-button powermenu-button-${action}`,
+    on_clicked: () => powermenu.action(action),
+    child: Widget.Box({
+      vertical: true,
+      class_name: "system-button widget-button",
+      children: [
+        Widget.Icon({
+          class_name: `system-button_icon ${action}`,
+          icon: icons.powermenu[action],
+        }),
+        Widget.Label({
+          class_name: `system-button_label ${action}`,
+          label,
+        }),
+      ],
+    }),
+  });
+export default () =>
+  PopupWindow({
+    name: "powermenu",
+    transition: "crossfade",
+    child: Widget.Box({
+      class_name: "powermenu horizontal",
+      children: [
+        SysButton("shutdown", "SHUTDOWN"),
+        SysButton("logout", "LOG OUT"),
+        SysButton("reboot", "REBOOT"),
+        SysButton("sleep", "SLEEP"),
+      ],
+    }),
+  });

modules/menus/power/verification.js

@@ -0,0 +1,48 @@
+import PopupWindow from "../PopupWindow.js";
+import powermenu from "./helpers/actions.js";
+
+export default () =>
+  PopupWindow({
+    name: "verification",
+    transition: "crossfade",
+    child: Widget.Box({
+      class_name: "verification",
+      vertical: true,
+      children: [
+        Widget.Box({
+          class_name: "text-box",
+          vertical: true,
+          children: [
+            Widget.Label({
+              class_name: "title",
+              label: powermenu.bind("title"),
+            }),
+            Widget.Label({
+              class_name: "desc",
+              label: "Are you sure?",
+            }),
+          ],
+        }),
+        Widget.Box({
+          class_name: "buttons horizontal",
+          vexpand: true,
+          vpack: "end",
+          homogeneous: true,
+          children: [
+            Widget.Button({
+              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({
+              child: Widget.Label("Yes"),
+              on_clicked: powermenu.exec,
+            }),
+          ],
+        }),
+      ],
+    }),
+  });