Added more configuration options

2024-07-20 16:21:52 -07:00
parent 29abe55008
commit a480400359
37 changed files with 368 additions and 417 deletions
--- a/modules/bar/Bar.ts
+++ b/modules/bar/Bar.ts
@@ -14,7 +14,6 @@ import { BarItemBox as WidgetContainer } from "../shared/barItemBox.js";
 import options from "options";

 const { start, center, end } = options.bar.layout;
-const { transparent, position } = options.bar;

 export type BarWidget = keyof typeof widget;

--- a/modules/bar/battery/index.js
+++ b/modules/bar/battery/index.js
@@ -4,9 +4,10 @@ import { openMenu } from "../utils.js";
 const BatteryLabel = () => {
  const isVis = Variable(battery.available);

-  const icon = battery
-    .bind("percent")
-    .as((p) => `battery-level-${Math.floor(p / 10) * 10}-symbolic`);
+  const icon = () =>
+    battery
+      .bind("percent")
+      .as((p) => `battery-level-${Math.floor(p / 10) * 10}-symbolic`);

  battery.connect("changed", ({ available }) => {
    isVis.value = available;
@@ -36,19 +37,22 @@ const BatteryLabel = () => {
      class_name: "battery",
      visible: battery.bind("available"),
      tooltip_text: battery.bind("time_remaining").as((t) => t.toString()),
-      children: [
-        Widget.Icon({ icon }),
-        Widget.Label({
-          label: battery.bind("percent").as((p) => ` ${p}%`),
-        }),
-      ],
      setup: (self) => {
        self.hook(battery, () => {
-          self.tooltip_text = generateTooltip(
-            battery.time_remaining,
-            battery.charging,
-            battery.charged,
-          );
+          if (battery.available) {
+            self.children = [
+              Widget.Icon({ icon: icon() }),
+              Widget.Label({
+                label: battery.bind("percent").as((p) => ` ${p}%`),
+              }),
+            ];
+
+            self.tooltip_text = generateTooltip(
+              battery.time_remaining,
+              battery.charging,
+              battery.charged,
+            );
+          }
        });
      },
    }),
--- a/modules/bar/bluetooth/index.js
+++ b/modules/bar/bluetooth/index.js
@@ -1,4 +1,5 @@
 const bluetooth = await Service.import('bluetooth')
+import options from "options";
 import { openMenu } from "../utils.js";

 const Bluetooth = () => {
@@ -8,7 +9,13 @@ const Bluetooth = () => {
  });

  const btText = Widget.Label({
-    label: bluetooth.bind("enabled").as((v) => v ? " On" : " Off"),
+    label: Utils.merge([bluetooth.bind("enabled"), options.bar.bluetooth.label.bind("value")], (btEnabled, showLabel) => {
+      if (showLabel) {
+        return btEnabled ? " On" : " Off"
+      }
+      return "";
+
+    }),
    class_name: "bar-bt_label",
  });

--- a/modules/bar/clock/index.js
+++ b/modules/bar/clock/index.js
@@ -1,14 +1,18 @@
+import GLib from "gi://GLib";
 import { openMenu } from "../utils.js";
+import options from "options";
+const { format } = options.bar.clock;

-const date = Variable("", {
-  poll: [1000, 'date "+󰃭  %a %b %d    %I:%M:%S %p"'],
+const date = Variable(GLib.DateTime.new_now_local(), {
+  poll: [1000, () => GLib.DateTime.new_now_local()],
 });
+const time = Utils.derive([date, format], (c, f) => c.format(f) || "");

 const Clock = () => {
  return {
    component: Widget.Label({
      class_name: "clock",
-      label: date.bind(),
+      label: time.bind(),
    }),
    isVisible: true,
    boxClass: "clock",
--- a/modules/bar/index.js
+++ b/modules/bar/index.js
@@ -1,113 +0,0 @@
-import { Menu } from "./menu/index.js";
-import { Workspaces } from "./workspaces/index.js";
-import { ClientTitle } from "./window_title/index.js";
-import { Media } from "./media/index.js";
-import { Notifications } from "./notifications/index.js";
-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 { BarItemBox } from "../shared/barItemBox.js";
-
-// layout of the bar
-const Left = (monitor, wsMap) => {
-  return Widget.Box({
-    class_name: "box-left",
-    hpack: "start",
-    spacing: 5,
-    children: [BarItemBox(Menu()), BarItemBox(Workspaces(monitor, wsMap, 10)), BarItemBox(ClientTitle())],
-  });
-};
-
-const Center = () => {
-  return Widget.Box({
-    class_name: "box-center",
-    spacing: 5,
-    children: [
-      BarItemBox(Media()),
-    ],
-  });
-};
-
-const Right = () => {
-  return Widget.Box({
-    class_name: "box-right",
-    hpack: "end",
-    spacing: 5,
-    children: [
-      BarItemBox(Volume()),
-      BarItemBox(Network()),
-      BarItemBox(Bluetooth()),
-      BarItemBox(BatteryLabel()),
-      BarItemBox(SysTray()),
-      BarItemBox(Clock()),
-      BarItemBox(Notifications()),
-    ],
-  });
-};
-
-const LeftAlt = (monitor, wsMap) => {
-  return Widget.Box({
-    class_name: "box-left",
-    hpack: "start",
-    spacing: 5,
-    children: [BarItemBox(Menu()), BarItemBox(Workspaces(monitor, wsMap)), BarItemBox(ClientTitle())],
-  });
-};
-
-const CenterAlt = () => {
-  return Widget.Box({
-    class_name: "box-center",
-    spacing: 5,
-    children: [
-      BarItemBox(Media()),
-    ],
-  });
-};
-
-const RightAlt = () => {
-  return Widget.Box({
-    class_name: "box-right",
-    hpack: "end",
-    spacing: 5,
-    children: [
-      BarItemBox(Volume()),
-      BarItemBox(Clock()),
-    ],
-  });
-};
-
-const Bar = (monitor = 0, wsMap) => {
-  return Widget.Window({
-    name: `bar-${monitor}`,
-    class_name: "bar",
-    monitor,
-    anchor: ["top", "left", "right"],
-    exclusivity: "exclusive",
-    child: Widget.CenterBox({
-      start_widget: Left(monitor, wsMap),
-      center_widget: Center(),
-      end_widget: Right(),
-    }),
-  });
-};
-
-const BarAlt = (monitor = 0, wsMap) => {
-  return Widget.Window({
-    name: `bar-${monitor}`,
-    class_name: "bar",
-    monitor,
-    anchor: ["top", "left", "right"],
-    exclusivity: "exclusive",
-    child: Widget.CenterBox({
-      start_widget: LeftAlt(monitor, wsMap),
-      center_widget: CenterAlt(),
-      end_widget: RightAlt(),
-    }),
-  });
-};
-
-export { Bar, BarAlt };
--- a/modules/bar/menu/index.js
+++ b/modules/bar/menu/index.js
@@ -1,11 +1,12 @@
 import { openMenu } from "../utils.js";
+import options from "options";

 const Menu = () => {
  return {
    component: Widget.Box({
      child: Widget.Label({
        class_name: "bar-menu_label",
-        label: "󰣇",
+        label: options.bar.launcher.icon.bind("value"),
      }),
    }),
    isVisible: true,
--- a/modules/bar/network/index.js
+++ b/modules/bar/network/index.js
@@ -1,4 +1,5 @@
 const network = await Service.import("network");
+import options from "options";
 import { openMenu } from "../utils.js";

 const Network = () => {
@@ -22,7 +23,15 @@ const Network = () => {
    }),
    Widget.Label({
      class_name: "bar-network-label",
-      label: network.bind("wired").as(() => "  Wired"),
+      label: Utils.merge(
+        [network.bind("wired"), options.bar.network.label.bind("value")],
+        (_, showLabel) => {
+          if (showLabel) {
+            return "  Wired";
+          }
+          return "";
+        },
+      ),
    }),
  ];

--- a/modules/bar/notifications/index.js
+++ b/modules/bar/notifications/index.js
@@ -1,4 +1,7 @@
 import { openMenu } from "../utils.js";
+import options from "options";
+
+const { show_total } = options.bar.notifications;

 const notifs = await Service.import("notifications");

@@ -9,21 +12,27 @@ export const Notifications = () => {
      child: Widget.Box({
        hpack: "start",
        class_name: "bar-notifications",
-        child: Widget.Label({
-          hpack: "center",
-          class_name: "bar-notifications-label",
-          setup: (self) => {
-            self.hook(notifs, () => {
-              if (notifs.dnd) {
-                return (self.label = "󰂛");
-              } else if (notifs.notifications.length > 0) {
-                return (self.label = "󱅫");
-              } else {
-                return (self.label = "󰂚");
-              }
+        children: Utils.merge(
+          [notifs.bind("notifications"), notifs.bind("dnd"), show_total.bind("value")],
+          (notif, dnd, showTotal) => {
+            const notifIcon = Widget.Label({
+              hpack: "center",
+              class_name: "bar-notifications-label",
+              label: dnd ? "󰂛" : notif.length > 0 ? "󱅫" : "󰂚",
            });
+
+            const notifLabel = Widget.Label({
+              hpack: "center",
+              class_name: "bar-notifications-total",
+              label: notif.length.toString(),
+            });
+
+            if (showTotal) {
+              return [notifIcon, notifLabel];
+            }
+            return [notifIcon];
          },
-        }),
+        ),
      }),
    }),
    isVisible: true,
--- a/modules/bar/power/index.js
+++ b/modules/bar/power/index.js
@@ -1,18 +0,0 @@
-export const Power = () => {
-  return {
-    component: Widget.Box({
-      child: Widget.Button({
-        class_name: "bar-powermenu",
-        child: Widget.Icon({
-          class_name: "bar-power_label",
-          icon: "system-shutdown-symbolic",
-        }),
-      }),
-    }),
-    isVisible: true,
-    boxClass: "power",
-    props: {
-      on_clicked: () => App.toggleWindow("powermenu"),
-    },
-  };
-};
--- a/modules/bar/systray/index.js
+++ b/modules/bar/systray/index.js
@@ -1,27 +1,37 @@
 const systemtray = await Service.import("systemtray");
+import { bash } from "lib/utils";
+import options from "options";
+
+const { ignore } = options.bar.systray;

 const SysTray = () => {
  const isVis = Variable(false);

-  const items = systemtray.bind("items").as((items) => {
-    isVis.value = items.length > 0;
-    return items.map((item) => {
-      if (item.menu !== undefined) {
-        item.menu["class_name"] = "systray-menu";
-      }
+  const items = Utils.merge(
+    [systemtray.bind("items"), ignore.bind("value")],
+    (items, ignored) => {
+      const filteredTray = items.filter(({ id }) => !ignored.includes(id));

-      return Widget.Button({
-        cursor: "pointer",
-        child: Widget.Icon({
-          class_name: "systray-icon",
-          icon: item.bind("icon"),
-        }),
-        on_primary_click: (_, event) => item.activate(event),
-        on_secondary_click: (_, event) => item.openMenu(event),
-        tooltip_markup: item.bind("tooltip_markup"),
+      isVis.value = filteredTray.length > 0;
+
+      return filteredTray.map((item) => {
+        if (item.menu !== undefined) {
+          item.menu["class_name"] = "systray-menu";
+        }
+
+        return Widget.Button({
+          cursor: "pointer",
+          child: Widget.Icon({
+            class_name: "systray-icon",
+            icon: item.bind("icon"),
+          }),
+          on_primary_click: (_, event) => item.activate(event),
+          on_secondary_click: (_, event) => item.openMenu(event),
+          tooltip_markup: item.bind("tooltip_markup"),
+        });
      });
-    });
-  });
+    },
+  );

  return {
    component: Widget.Box({
--- a/modules/bar/volume/index.js
+++ b/modules/bar/volume/index.js
@@ -1,7 +1,8 @@
 const audio = await Service.import("audio");
 import { openMenu } from "../utils.js";
+import options from "options";

-import { globalMousePos } from "../../../globals.js";
+import { globalMousePos } from "globals.js";

 const Volume = () => {
  const icons = {
@@ -41,7 +42,12 @@ const Volume = () => {
    component: Widget.Box({
      vpack: "center",
      class_name: "volume",
-      children: [volIcn, volPct],
+      children: options.bar.volume.label.bind("value").as((showLabel) => {
+        if (showLabel) {
+          return [volIcn, volPct];
+        }
+        return [volIcn];
+      }),
    }),
    isVisible: true,
    boxClass: "volume",
--- a/modules/bar/workspaces/index.js
+++ b/modules/bar/workspaces/index.js
@@ -58,8 +58,46 @@ const Workspaces = (monitor = -1, ws = 8) => {
              return Widget.Label({
                attribute: i,
                vpack: "center",
-                label: `${i}`,
-                setup: (self) =>
+                class_name: Utils.merge(
+                  [
+                    options.bar.workspaces.show_icons.bind("value"),
+                    options.bar.workspaces.icons.available.bind("value"),
+                    options.bar.workspaces.icons.active.bind("value"),
+                    options.bar.workspaces.icons.occupied.bind("value"),
+                  ],
+                  (show_icons) => {
+                    if (show_icons) {
+                      return `workspace-icon`;
+                    }
+                    return "";
+                  },
+                ),
+                label: Utils.merge(
+                  [
+                    options.bar.workspaces.show_icons.bind("value"),
+                    options.bar.workspaces.icons.available.bind("value"),
+                    options.bar.workspaces.icons.active.bind("value"),
+                    options.bar.workspaces.icons.occupied.bind("value"),
+                  ],
+                  (showIcons, available, active, occupied) => {
+                    if (showIcons) {
+                      if (hyprland.active.workspace.id === i) {
+                        return active;
+                      }
+                      if ((hyprland.getWorkspace(i)?.windows || 0) > 0) {
+                        return occupied;
+                      }
+                      if (
+                        monitor !== -1 &&
+                        hyprland.getWorkspace(i)?.monitorID !== monitor
+                      ) {
+                        return available;
+                      }
+                    }
+                    return `${i}`;
+                  },
+                ),
+                setup: (self) => {
                  self.hook(hyprland, () => {
                    self.toggleClassName(
                      "active",
@@ -69,13 +107,8 @@ const Workspaces = (monitor = -1, ws = 8) => {
                      "occupied",
                      (hyprland.getWorkspace(i)?.windows || 0) > 0,
                    );
-
-                    const isCurrentMonitor =
-                      monitor !== -1 &&
-                      hyprland.getWorkspace(i)?.monitorID !== monitor;
-
-                    self.toggleClassName("hidden", isCurrentMonitor);
-                  }),
+                  });
+                },
              });
            });
        },
--- a/modules/menus/audio/index.js
+++ b/modules/menus/audio/index.js
@@ -7,7 +7,7 @@ export default () => {
    name: "audiomenu",
    transition: "crossfade",
    child: Widget.Box({
-      class_name: "menu-items",
+      class_name: "menu-items audio",
      hpack: "fill",
      hexpand: true,
      child: Widget.Box({
--- a/modules/menus/bluetooth/index.js
+++ b/modules/menus/bluetooth/index.js
@@ -6,7 +6,7 @@ export default () => {
    name: "bluetoothmenu",
    transition: "crossfade",
    child: Widget.Box({
-      class_name: "menu-items",
+      class_name: "menu-items bluetooth",
      hpack: "fill",
      hexpand: true,
      child: Widget.Box({
--- a/modules/menus/dashboard/profile/index.js
+++ b/modules/menus/dashboard/profile/index.js
@@ -1,11 +1,14 @@
 import icons from "../../../icons/index.js";
 import powermenu from "../../power/helpers/actions.js";

+import options from "options";
+const { image, name } = options.menus.dashboard.powermenu.avatar;
+
 const Profile = () => {
  const handleClick = (action) => {
    App.closeWindow("dashboardmenu");
    return powermenu.action(action);
-  }
+  };

  return Widget.Box({
    class_name: "profiles-container",
@@ -20,12 +23,17 @@ const Profile = () => {
          Widget.Icon({
            hpack: "center",
            class_name: "profile-picture",
-            icon: `${App.configDir}/assets/21210205.png`,
+            icon: image.bind("value"),
          }),
          Widget.Label({
            hpack: "center",
            class_name: "profile-name",
-            label: "Jaskir Linux",
+            label: name.bind("value").as((v) => {
+              if (v === "system") {
+                return Utils.exec("bash -c whoami");
+              }
+              return v;
+            }),
          }),
        ],
      }),
--- a/modules/menus/dashboard/shortcuts/index.js
+++ b/modules/menus/dashboard/shortcuts/index.js
@@ -1,4 +1,7 @@
 const hyprland = await Service.import("hyprland");
+import options from "options";
+
+const { left, right } = options.menus.dashboard.shortcuts;

 const Shortcuts = () => {
  const isRecording = Variable(false, {
@@ -83,21 +86,25 @@ const Shortcuts = () => {
            hexpand: true,
            children: [
              Widget.Button({
-                tooltip_text: "Microsoft Edge",
-                class_name: "dashboard-button edge top-button",
-                on_primary_click: () => handleClick("microsoft-edge-stable"),
+                tooltip_text: left.shortcut1.tooltip.bind("value"),
+                class_name: "dashboard-button top-button",
+                on_primary_click: left.shortcut1.command
+                  .bind("value")
+                  .as((cmd) => () => handleClick(cmd)),
                child: Widget.Label({
                  class_name: "button-label",
-                  label: "󰇩",
+                  label: left.shortcut1.icon.bind("value"),
                }),
              }),
              Widget.Button({
-                tooltip_text: "Spotify",
-                class_name: "dashboard-button spotify",
-                on_primary_click: () => handleClick("spotify-launcher"),
+                tooltip_text: left.shortcut2.tooltip.bind("value"),
+                class_name: "dashboard-button",
+                on_primary_click: left.shortcut2.command
+                  .bind("value")
+                  .as((cmd) => () => handleClick(cmd)),
                child: Widget.Label({
                  class_name: "button-label",
-                  label: "",
+                  label: left.shortcut2.icon.bind("value"),
                }),
              }),
            ],
@@ -107,22 +114,26 @@ const Shortcuts = () => {
            hexpand: true,
            children: [
              Widget.Button({
-                tooltip_text: "Discord",
-                class_name: "dashboard-button discord top-button",
-                on_primary_click: () => handleClick("discord"),
+                tooltip_text: left.shortcut3.tooltip.bind("value"),
+                class_name: "dashboard-button top-button",
+                on_primary_click: left.shortcut3.command
+                  .bind("value")
+                  .as((cmd) => () => handleClick(cmd)),
                child: Widget.Label({
                  hpack: "center",
                  class_name: "button-label",
-                  label: "",
+                  label: left.shortcut3.icon.bind("value"),
                }),
              }),
              Widget.Button({
-                tooltip_text: "Search Apps",
-                class_name: "dashboard-button search",
-                on_primary_click: () => handleClick("rofi -show drun"),
+                tooltip_text: left.shortcut4.tooltip.bind("value"),
+                class_name: "dashboard-button",
+                on_primary_click: left.shortcut4.command
+                  .bind("value")
+                  .as((cmd) => () => handleClick(cmd)),
                child: Widget.Label({
                  class_name: "button-label",
-                  label: "",
+                  label: left.shortcut4.icon.bind("value"),
                }),
              }),
            ],
@@ -139,24 +150,25 @@ const Shortcuts = () => {
            hexpand: true,
            children: [
              Widget.Button({
-                tooltip_text: "Color Picker",
-                class_name: "dashboard-button colorpicker top-button",
-                on_primary_click: () => handleClick("hyprpicker -a", {}, 500),
+                tooltip_text: right.shortcut1.tooltip.bind("value"),
+                class_name: "dashboard-button top-button",
+                on_primary_click: right.shortcut1.command
+                  .bind("value")
+                  .as((cmd) => () => handleClick(cmd)),
                child: Widget.Label({
                  class_name: "button-label",
-                  label: "",
+                  label: right.shortcut1.icon.bind("value"),
                }),
              }),
              Widget.Button({
-                tooltip_text: "Hyprland Settings",
-                class_name: "dashboard-button settings",
-                on_primary_click: () =>
-                  handleClick(
-                    'bash -c "kitty -e nvim $HOME/.config/hypr/hyprland.conf"',
-                  ),
+                tooltip_text: right.shortcut2.tooltip.bind("value"),
+                class_name: "dashboard-button",
+                on_primary_click: right.shortcut2.command
+                  .bind("value")
+                  .as((cmd) => () => handleClick(cmd)),
                child: Widget.Label({
                  class_name: "button-label",
-                  label: "󰒓",
+                  label: right.shortcut2.icon.bind("value"),
                }),
              }),
            ],
@@ -166,13 +178,14 @@ const Shortcuts = () => {
            hexpand: true,
            children: [
              Widget.Button({
-                tooltip_text: "Screenshot",
-                class_name: "dashboard-button snapshot top-button",
-                on_primary_click: () =>
-                  handleClick(`${App.configDir}/services/snapshot.sh`),
+                tooltip_text: right.shortcut3.tooltip.bind("value"),
+                class_name: "dashboard-button top-button",
+                on_primary_click: right.shortcut3.command
+                  .bind("value")
+                  .as((cmd) => () => handleClick(cmd)),
                child: Widget.Label({
                  class_name: "button-label",
-                  label: "󰄀",
+                  label: right.shortcut3.icon.bind("value"),
                }),
              }),
              Widget.Button({
--- a/modules/menus/energy/index.js
+++ b/modules/menus/energy/index.js
@@ -7,7 +7,7 @@ export default () => {
    name: "energymenu",
    transition: "crossfade",
    child: Widget.Box({
-      class_name: "menu-items",
+      class_name: "menu-items energy",
      hpack: "fill",
      hexpand: true,
      child: Widget.Box({
--- a/modules/menus/media/index.js
+++ b/modules/menus/media/index.js
@@ -6,7 +6,7 @@ export default () => {
    name: "mediamenu",
    transition: "crossfade",
    child: Widget.Box({
-      class_name: "menu-items",
+      class_name: "menu-items media",
      hpack: "fill",
      hexpand: true,
      child: Widget.Box({
--- a/modules/menus/network/ethernet/index.js
+++ b/modules/menus/network/ethernet/index.js
@@ -21,41 +21,43 @@ const Ethernet = () => {
        child: Widget.Box({
          class_name: "menu-content",
          vertical: true,
-          child: network.bind("wired").as((wired) => {
-            return Widget.Box({
-              class_name: "network-element-item",
-              child: Widget.Box({
-                hpack: "start",
-                children: [
-                  Widget.Icon({
-                    class_name: `network-icon ethernet ${network.wired.state === "activated" ? "active" : ""}`,
-                    tooltip_text: wired.internet,
-                    icon: `${wired["icon_name"]}`,
-                  }),
-                  Widget.Box({
-                    class_name: "connection-container",
-                    vertical: true,
-                    children: [
-                      Widget.Label({
-                        class_name: "active-connection",
-                        hpack: "start",
-                        truncate: "end",
-                        wrap: true,
-                        label: `Ethernet Connection ${wired.state !== "unknown" && typeof wired?.speed === "number" ? `(${wired?.speed / 1000} Gbps)` : ""}`,
-                      }),
-                      Widget.Label({
-                        hpack: "start",
-                        class_name: "connection-status dim",
-                        label:
-                          wired.internet.charAt(0).toUpperCase() +
-                          wired.internet.slice(1),
-                      }),
-                    ],
-                  }),
-                ],
-              }),
+          setup: (self) => {
+            self.hook(network, () => {
+              return (self.child = Widget.Box({
+                class_name: "network-element-item",
+                child: Widget.Box({
+                  hpack: "start",
+                  children: [
+                    Widget.Icon({
+                      class_name: `network-icon ethernet ${network.wired.state === "activated" ? "active" : ""}`,
+                      tooltip_text: network.wired.internet,
+                      icon: `${network.wired["icon_name"]}`,
+                    }),
+                    Widget.Box({
+                      class_name: "connection-container",
+                      vertical: true,
+                      children: [
+                        Widget.Label({
+                          class_name: "active-connection",
+                          hpack: "start",
+                          truncate: "end",
+                          wrap: true,
+                          label: `Ethernet Connection ${network.wired.state !== "unknown" && typeof network.wired?.speed === "number" ? `(${network.wired?.speed / 1000} Gbps)` : ""}`,
+                        }),
+                        Widget.Label({
+                          hpack: "start",
+                          class_name: "connection-status dim",
+                          label:
+                          network.wired.internet.charAt(0).toUpperCase() +
+                            network.wired.internet.slice(1),
+                        }),
+                      ],
+                    }),
+                  ],
+                }),
+              }));
            });
-          }),
+          },
        }),
      }),
    ],
--- a/modules/menus/network/index.js
+++ b/modules/menus/network/index.js
@@ -7,7 +7,7 @@ export default () => {
    name: "networkmenu",
    transition: "crossfade",
    child: Widget.Box({
-      class_name: "menu-items",
+      class_name: "menu-items network",
      child: Widget.Box({
        vertical: true,
        hexpand: true,
--- a/modules/menus/power/helpers/actions.js
+++ b/modules/menus/power/helpers/actions.js
@@ -1,9 +1,5 @@
-const powerOptions = {
-  sleep: "systemctl suspend",
-  reboot: "systemctl reboot",
-  logout: "pkill Hyprland",
-  shutdown: "shutdown now",
-};
+import options from "options";
+const { sleep, reboot, logout, shutdown } = options.menus.dashboard.powermenu;

 class PowerMenu extends Service {
  static {
@@ -26,10 +22,10 @@ class PowerMenu extends Service {

  action(action) {
    [this.#cmd, this.#title] = {
-      sleep: [powerOptions.sleep, "Sleep"],
-      reboot: [powerOptions.reboot, "Reboot"],
-      logout: [powerOptions.logout, "Log Out"],
-      shutdown: [powerOptions.shutdown, "Shutdown"],
+      sleep: [sleep.value, "Sleep"],
+      reboot: [reboot.value, "Reboot"],
+      logout: [logout.value, "Log Out"],
+      shutdown: [shutdown.value, "Shutdown"],
    }[action];

    this.notify("cmd");