Implemented config changing functionality

modules/bar/Bar.ts

@@ -1,3 +1,4 @@
+const network = await Service.import("network");
 import { Menu } from "./menu/index.js";
 import { Workspaces } from "./workspaces/index.js";
 import { ClientTitle } from "./window_title/index.js";
@@ -7,59 +8,75 @@ 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 { Clock } from "./clock/index.js";
 import { SysTray } from "./systray/index.js";
 
 import { BarItemBox as WidgetContainer } from "../shared/barItemBox.js";
-import options from "options"
+import options from "options";
 
-const { start, center, end } = options.bar.layout
-const { transparent, position } = options.bar
+const { start, center, end } = options.bar.layout;
+const { transparent, position } = options.bar;
 
-export type BarWidget = keyof typeof widget
+export type BarWidget = keyof typeof widget;
 
 const widget = {
-    battery: WidgetContainer(BatteryLabel()),
-    dashboard: WidgetContainer(Menu()),
-    workspaces: WidgetContainer(Workspaces()),
-    windowtitle: WidgetContainer(ClientTitle()),
-    media: WidgetContainer(Media()),
-    notifications: WidgetContainer(Notifications()),
-    volume: WidgetContainer(Volume()),
-    network: WidgetContainer(Network()),
-    bluetooth: WidgetContainer(Bluetooth()),
-    clock: WidgetContainer(Clock()),
-    systray: WidgetContainer(SysTray()),
-    // expander: () => Widget.Box({ expand: true }),
-}
+  battery: () => WidgetContainer(BatteryLabel()),
+  dashboard: () => WidgetContainer(Menu()),
+  workspaces: (monitor) => WidgetContainer(Workspaces(monitor, 10)),
+  windowtitle: () => WidgetContainer(ClientTitle()),
+  media: () => WidgetContainer(Media()),
+  notifications: () => WidgetContainer(Notifications()),
+  volume: () => WidgetContainer(Volume()),
+  network: () => WidgetContainer(Network()),
+  bluetooth: () => WidgetContainer(Bluetooth()),
+  clock: () => WidgetContainer(Clock()),
+  systray: () => WidgetContainer(SysTray()),
+  // expander: () => Widget.Box({ expand: true }),
+};
 
-export const Bar = (monitor: number) => Widget.Window({
-    monitor,
+export const Bar = (monitor: number) => {
+  return Widget.Window({
+    name: `bar-${monitor}`,
     class_name: "bar",
-    name: `bar${monitor}`,
+    monitor,
+    visible: true,
+    anchor: ["top", "left", "right"],
     exclusivity: "exclusive",
-    anchor: position.bind().as(pos => [pos, "right", "left"]),
     child: Widget.CenterBox({
-        startWidget: Widget.Box({
-            class_name: "box-left",
-            spacing: 5,
-            hexpand: true,
-            children: start.bind().as(s => s.map(w => widget[w])),
-        }),
-        centerWidget: Widget.Box({
-            class_name: "box-center",
-            hpack: "center",
-            spacing: 5,
-            children: center.bind().as(c => c.map(w => widget[w])),
-        }),
-        endWidget: Widget.Box({
-            class_name: "box-right",
-            hexpand: true,
-            spacing: 5,
-            children: end.bind().as(e => e.map(w => widget[w])),
-        }),
-    }),
-    setup: self => self.hook(transparent, () => {
-        self.toggleClassName("transparent", transparent.value)
-    }),
-})
+      visible: true,
+      startWidget: Widget.Box({
+        class_name: "box-left",
+        spacing: 5,
+        hexpand: true,
+        setup: self => {
+          self.children = start.value.map(w => widget[w](monitor));
+          self.hook(start, (self) => {
+          self.children = start.value.map(w => widget[w](monitor));
+          })
+        },
+      }),
+      centerWidget: Widget.Box({
+        class_name: "box-center",
+        hpack: "center",
+        spacing: 5,
+        setup: self => {
+          self.children = center.value.map(w => widget[w](monitor));
+          self.hook(center, (self) => {
+            self.children = center.value.map(w => widget[w](monitor));
+          })
+        },
+      }),
+      endWidget: Widget.Box({
+        class_name: "box-right",
+        hpack: "end",
+        spacing: 5,
+        setup: self => {
+          self.children = end.value.map(w => widget[w](monitor));
+          self.hook(end, (self) => {
+            self.children = end.value.map(w => widget[w](monitor));
+          })
+        },
+      }),
+    })
+  });
+};

modules/bar/notifications/index.js

@@ -6,14 +6,11 @@ export const Notifications = () => {
   return {
     component: Widget.Box({
       hpack: "start",
-      hexpand: true,
-      child: Widget.Button({
+      child: Widget.Box({
         hpack: "start",
-        hexpand: true,
         class_name: "bar-notifications",
         child: Widget.Label({
           hpack: "center",
-          hexpand: true,
           class_name: "bar-notifications-label",
           setup: (self) => {
             self.hook(notifs, () => {

modules/bar/workspaces/index.js

@@ -1,49 +1,81 @@
 const hyprland = await Service.import("hyprland");
+import options from "options";
+
+const { workspaces, monitorSpecific } = options.bar.workspaces;
 
 function range(length, start = 1) {
   return Array.from({ length }, (_, i) => i + start);
 }
 
-const Workspaces = (monitor = -1, wsMap = {}, ws = 8) => {
-  const getWorkspacesForMonitor = (curWs) => {
-    if (
-      Object.keys(wsMap)
-        .map((mn) => Number(mn))
-        .includes(monitor)
-    ) {
-      return wsMap[monitor].includes(curWs);
-    }
-    return true;
+const Workspaces = (monitor = -1, ws = 8) => {
+  const getWorkspacesForMonitor = (curWs, wsRules) => {
+    const monitorMap = {};
+    hyprland.monitors.forEach((m) => (monitorMap[m.id] = m.name));
+
+    const currentMonitorName = monitorMap[monitor];
+    return wsRules[currentMonitorName].includes(curWs);
   };
+
+  const getWorkspaceRules = () => {
+    try {
+      const rules = Utils.exec("hyprctl workspacerules -j");
+
+      const workspaceRules = {};
+
+      JSON.parse(rules).forEach((rule, index) => {
+        if (Object.hasOwnProperty.call(workspaceRules, rule.monitor)) {
+          workspaceRules[rule.monitor].push(index + 1);
+        } else {
+          workspaceRules[rule.monitor] = [index + 1];
+        }
+      });
+
+      return workspaceRules;
+    } catch (err) {
+      console.error(err);
+    }
+  };
+
   return {
     component: Widget.Box({
       class_name: "workspaces",
-      children: range(ws || 8)
-        .filter((i) => getWorkspacesForMonitor(i))
-        .map((i) => {
-          return Widget.Label({
-            attribute: i,
-            vpack: "center",
-            label: `${i}`,
-            setup: (self) =>
-              self.hook(hyprland, () => {
-                self.toggleClassName(
-                  "active",
-                  hyprland.active.workspace.id === i,
-                );
-                self.toggleClassName(
-                  "occupied",
-                  (hyprland.getWorkspace(i)?.windows || 0) > 0,
-                );
+      children: Utils.merge(
+        [workspaces.bind(), monitorSpecific.bind()],
+        (workspaces, monitorSpecific) => {
+          return range(workspaces || 8)
+            .filter((i) => {
+              if (!monitorSpecific) {
+                return true;
+              }
+              const workspaceRules = getWorkspaceRules();
+              return getWorkspacesForMonitor(i, workspaceRules);
+            })
+            .map((i) => {
+              return Widget.Label({
+                attribute: i,
+                vpack: "center",
+                label: `${i}`,
+                setup: (self) =>
+                  self.hook(hyprland, () => {
+                    self.toggleClassName(
+                      "active",
+                      hyprland.active.workspace.id === i,
+                    );
+                    self.toggleClassName(
+                      "occupied",
+                      (hyprland.getWorkspace(i)?.windows || 0) > 0,
+                    );
 
-                const isCurrentMonitor =
-                  monitor !== -1 &&
-                  hyprland.getWorkspace(i)?.monitorID !== monitor;
+                    const isCurrentMonitor =
+                      monitor !== -1 &&
+                      hyprland.getWorkspace(i)?.monitorID !== monitor;
 
-                self.toggleClassName("hidden", isCurrentMonitor);
-              }),
-          });
-        }),
+                    self.toggleClassName("hidden", isCurrentMonitor);
+                  }),
+              });
+            });
+        },
+      ),
       setup: (box) => {
         if (ws === 0) {
           box.hook(hyprland.active.workspace, () =>

modules/shared/barItemBox.js

@@ -3,7 +3,6 @@ export const BarItemBox = (child) => {
     if (Object.hasOwnProperty.call(child, "isVis")) {
       return child.isVis.bind("value");
     }
-
     return child.isVisible;
   };