refactor: make the whole thing more generic

modules/home-manager/desktops/hyprland/ags/js/dashboard/Dashboard.js

@@ -0,0 +1,26 @@
+import Widget from "resource:///com/github/Aylur/ags/widget.js";
+import DateColumn from "./DateColumn.js";
+import NotificationColumn from "./NotificationColumn.js";
+import PopupWindow from "../misc/PopupWindow.js";
+import options from "../options.js";
+
+export default () =>
+  PopupWindow({
+    name: "dashboard",
+    setup: (self) =>
+      self.hook(options.bar.position, () => {
+        self.anchor = [options.bar.position.value];
+        if (options.bar.position.value === "top")
+          self.transition = "slide_down";
+
+        if (options.bar.position.value === "bottom")
+          self.transition = "slide_up";
+      }),
+    child: Widget.Box({
+      children: [
+        NotificationColumn(),
+        Widget.Separator({ orientation: 1 }),
+        DateColumn(),
+      ],
+    }),
+  });

modules/home-manager/desktops/hyprland/ags/js/dashboard/DateColumn.js

@@ -0,0 +1,63 @@
+import Widget from "resource:///com/github/Aylur/ags/widget.js";
+import icons from "../icons.js";
+import Clock from "../misc/Clock.js";
+import * as vars from "../variables.js";
+import options from "../options.js";
+
+/**
+ * @param {'cpu' | 'ram' | 'temp'} type
+ * @param {string} title
+ * @param {string} unit
+ */
+const SysProgress = (type, title, unit) =>
+  Widget.Box({
+    class_name: `circular-progress-box ${type}`,
+    hexpand: true,
+    tooltip_text: vars[type]
+      .bind("value")
+      .transform((v) => `${title}: ${Math.floor(v * 100)}${unit}`),
+    child: Widget.CircularProgress({
+      hexpand: true,
+      class_name: `circular-progress ${type}`,
+      child: Widget.Icon(icons.system[type]),
+      start_at: 0.75,
+      value: vars[type].bind(),
+      rounded: options.radii.bind("value").transform((v) => v > 0),
+    }),
+  });
+
+export default () =>
+  Widget.Box({
+    vertical: true,
+    class_name: "datemenu vertical",
+    children: [
+      Widget.Box({
+        class_name: "clock-box",
+        vertical: true,
+        children: [
+          Clock({ format: "%H:%M" }),
+          Widget.Label({
+            class_name: "uptime",
+            label: vars.uptime.bind("value").transform((t) => `uptime: ${t}`),
+          }),
+        ],
+      }),
+      Widget.Box({
+        class_name: "calendar",
+        children: [
+          Widget.Calendar({
+            hexpand: true,
+            hpack: "center",
+          }),
+        ],
+      }),
+      Widget.Box({
+        class_name: "system-info horizontal",
+        children: [
+          SysProgress("cpu", "Cpu", "%"),
+          SysProgress("ram", "Ram", "%"),
+          SysProgress("temp", "Temperature", "°"),
+        ],
+      }),
+    ],
+  });

modules/home-manager/desktops/hyprland/ags/js/dashboard/NotificationColumn.js

@@ -0,0 +1,81 @@
+import Widget from "resource:///com/github/Aylur/ags/widget.js";
+import Notifications from "resource:///com/github/Aylur/ags/service/notifications.js";
+import icons from "../icons.js";
+import Notification from "../misc/Notification.js";
+import { timeout } from "resource:///com/github/Aylur/ags/utils.js";
+
+const ClearButton = () =>
+  Widget.Button({
+    on_clicked: () => {
+      const list = Array.from(Notifications.notifications);
+      for (let i = 0; i < list.length; i++)
+        timeout(50 * i, () => list[i]?.close());
+    },
+    sensitive: Notifications.bind("notifications").transform(
+      (n) => n.length > 0,
+    ),
+    child: Widget.Box({
+      children: [
+        Widget.Label("Clear "),
+        Widget.Icon({
+          icon: Notifications.bind("notifications").transform(
+            (n) => icons.trash[n.length > 0 ? "full" : "empty"],
+          ),
+        }),
+      ],
+    }),
+  });
+
+const Header = () =>
+  Widget.Box({
+    class_name: "header",
+    children: [
+      Widget.Label({ label: "Notifications", hexpand: true, xalign: 0 }),
+      ClearButton(),
+    ],
+  });
+
+const NotificationList = () =>
+  Widget.Box({
+    vertical: true,
+    vexpand: true,
+    children: Notifications.bind("notifications").transform((n) =>
+      n.reverse().map(Notification),
+    ),
+    visible: Notifications.bind("notifications").transform((n) => n.length > 0),
+  });
+
+const Placeholder = () =>
+  Widget.Box({
+    class_name: "placeholder",
+    vertical: true,
+    vpack: "center",
+    hpack: "center",
+    vexpand: true,
+    hexpand: true,
+    visible: Notifications.bind("notifications").transform(
+      (n) => n.length === 0,
+    ),
+    children: [
+      Widget.Icon(icons.notifications.silent),
+      Widget.Label("Your inbox is empty"),
+    ],
+  });
+
+export default () =>
+  Widget.Box({
+    class_name: "notifications",
+    vertical: true,
+    children: [
+      Header(),
+      Widget.Scrollable({
+        vexpand: true,
+        class_name: "notification-scrollable",
+        child: Widget.Box({
+          class_name: "notification-list",
+          vertical: true,
+          children: [NotificationList(), Placeholder()],
+        }),
+      }),
+    ],
+  });