Begin work on configuration menu

modules/bar/Bar.ts

@@ -0,0 +1,65 @@
+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 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
+
+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 }),
+}
+
+export const Bar = (monitor: number) => Widget.Window({
+    monitor,
+    class_name: "bar",
+    name: `bar${monitor}`,
+    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)
+    }),
+})

modules/bar/utils.js

@@ -1,9 +1,19 @@
 export const closeAllMenus = () => {
-  App.closeWindow("bluetoothmenu");
-  App.closeWindow("audiomenu");
-  App.closeWindow("networkmenu");
-  App.closeWindow("mediamenu");
-  App.closeWindow("calendarmenu");
+  const menuWindows = App.windows
+    .filter((w) => {
+      if (w.name) {
+        return /.*menu/.test(w.name);
+      }
+
+      return false;
+    })
+    .map((w) => w.name);
+
+  menuWindows.forEach((w) => {
+    if (w) {
+      App.closeWindow(w);
+    }
+  });
 };
 
 export const openMenu = (clicked, event, window) => {
@@ -12,8 +22,8 @@ export const openMenu = (clicked, event, window) => {
    * to the center of the button clicked. We don't want the menu to spawn
    * offcenter dependending on which edge of the button you click on.
    * -------------
-   * To fix this, we take the x coordinate of the click within the icon's bounds.
-   * So if you click the left edge of a 100width button then the x axis will be 0
+   * To fix this, we take the x coordinate of the click within the button's bounds.
+   * If you click the left edge of a 100 width button, then the x axis will be 0
    * and if you click the right edge then the x axis will be 100.
    * -------------
    * Then we divide the width of the button by 2 to get the center of the button and then get