refactor: make the whole thing more generic

modules/home-manager/desktops/hyprland/ags/js/desktop/Desktop.js

@@ -0,0 +1,69 @@
+import Widget from "resource:///com/github/Aylur/ags/widget.js";
+import Clock from "../misc/Clock.js";
+import DesktopMenu from "./DesktopMenu.js";
+import options from "../options.js";
+
+const DesktopClock = () =>
+  Widget.Box({
+    class_name: "clock-box-shadow",
+    child: Widget.CenterBox({
+      class_name: "clock-box",
+      start_widget: Clock({
+        class_name: "clock",
+        hpack: "center",
+        format: "%H",
+      }),
+      center_widget: Widget.Box({
+        class_name: "separator-box",
+        vertical: true,
+        hexpand: true,
+        hpack: "center",
+        children: [
+          Widget.Separator({ vpack: "center", vexpand: true }),
+          Widget.Separator({ vpack: "center", vexpand: true }),
+        ],
+      }),
+      end_widget: Clock({
+        class_name: "clock",
+        hpack: "center",
+        format: "%M",
+      }),
+    }),
+  });
+
+const Desktop = () =>
+  Widget.EventBox({
+    on_secondary_click: (_, event) => DesktopMenu().popup_at_pointer(event),
+    child: Widget.Box({
+      vertical: true,
+      vexpand: true,
+      hexpand: true,
+      visible: options.desktop.clock.enable.bind("value"),
+      setup: (self) =>
+        self.hook(options.desktop.clock.position, () => {
+          const [hpack = "center", vpack = "center", offset = 64] =
+            options.desktop.clock.position.value.split(" ") || [];
+
+          // @ts-expect-error
+          self.hpack = hpack;
+          self.vpack = vpack;
+          self.setCss(`margin: ${Number(offset)}px;`);
+        }),
+      children: [
+        DesktopClock(),
+        Clock({ format: "%B %e. %A", class_name: "date" }),
+      ],
+    }),
+  });
+
+/** @param {number} monitor */
+export default (monitor) =>
+  Widget.Window({
+    monitor,
+    keymode: "on-demand",
+    name: `desktop${monitor}`,
+    layer: "background",
+    class_name: "desktop",
+    anchor: ["top", "bottom", "left", "right"],
+    child: Desktop(),
+  });

modules/home-manager/desktops/hyprland/ags/js/desktop/DesktopMenu.js

@@ -0,0 +1,66 @@
+import Widget from "resource:///com/github/Aylur/ags/widget.js";
+import App from "resource:///com/github/Aylur/ags/app.js";
+import PowerMenu from "../services/powermenu.js";
+import icons from "../icons.js";
+import Gtk from "gi://Gtk";
+import { openSettings } from "../settings/theme.js";
+
+/**
+ * @param {string} label
+ * @param {string} icon
+ * @param {import('types/widgets/menu').MenuItemProps['on_activate']} on_activate
+ */
+const Item = (label, icon, on_activate) =>
+  Widget.MenuItem({
+    on_activate,
+    child: Widget.Box({
+      children: [
+        Widget.Icon(icon),
+        Widget.Label({
+          label,
+          hexpand: true,
+          xalign: 0,
+        }),
+      ],
+    }),
+  });
+
+export default () =>
+  Widget.Menu({
+    class_name: "desktop-menu",
+    children: [
+      Widget.MenuItem({
+        child: Widget.Box({
+          children: [
+            Widget.Icon(icons.powermenu.shutdown),
+            Widget.Label({
+              label: "System",
+              hexpand: true,
+              xalign: 0,
+            }),
+          ],
+        }),
+        submenu: Widget.Menu({
+          children: [
+            Item("Shutdown", icons.powermenu.shutdown, () =>
+              PowerMenu.action("shutdown"),
+            ),
+            Item("Log Out", icons.powermenu.logout, () =>
+              PowerMenu.action("logout"),
+            ),
+            Item("Reboot", icons.powermenu.reboot, () =>
+              PowerMenu.action("reboot"),
+            ),
+            Item("Sleep", icons.powermenu.sleep, () =>
+              PowerMenu.action("reboot"),
+            ),
+          ],
+        }),
+      }),
+      Item("Applications", icons.apps.apps, () =>
+        App.openWindow("applauncher"),
+      ),
+      new Gtk.SeparatorMenuItem(),
+      Item("Settings", icons.ui.settings, openSettings),
+    ],
+  });