feat: migrate to ags v3

widgets/notifications/index.tsx

@@ -1,28 +1,49 @@
-import { Astal, Gdk } from "astal/gtk4";
-import Notifd from "gi://AstalNotifd";
-import { bind } from "astal";
-import { NotificationWidget } from "./notification";
+import { For, createState, onCleanup } from "ags";
+import { Astal, Gdk, Gtk } from "ags/gtk4";
+import AstalNotifd from "gi://AstalNotifd";
+import { Notification } from "./notification";
 
 export const WINDOW_NAME = "notifications";
 
 export const Notifications = (gdkmonitor: Gdk.Monitor) => {
-  const notifd = Notifd.get_default();
+  const notifd = AstalNotifd.get_default();
+
   const { TOP, RIGHT } = Astal.WindowAnchor;
 
+  const [notifications, setNotifications] = createState(
+    new Array<AstalNotifd.Notification>(),
+  );
+
+  const notifiedHandler = notifd.connect("notified", (_, id, replaced) => {
+    const notification = notifd.get_notification(id);
+
+    if (replaced && notifications.get().some((n) => n.id === id)) {
+      setNotifications((ns) => ns.map((n) => (n.id === id ? notification : n)));
+    } else {
+      setNotifications((ns) => [notification, ...ns]);
+    }
+  });
+
+  const resolvedHandler = notifd.connect("resolved", (_, id) => {
+    setNotifications((ns) => ns.filter((n) => n.id !== id));
+  });
+
+  onCleanup(() => {
+    notifd.disconnect(notifiedHandler);
+    notifd.disconnect(resolvedHandler);
+  });
+
   return (
     <window
+      $={(self) => onCleanup(() => self.destroy())}
       name={WINDOW_NAME}
       cssClasses={["notifications"]}
       gdkmonitor={gdkmonitor}
+      visible={notifications((ns) => ns.length > 0)}
       anchor={TOP | RIGHT}
-      visible={bind(notifd, "notifications").as(
-        (notifications) => notifications.length > 0,
-      )}
     >
-      <box vertical={true} spacing={10}>
-        {bind(notifd, "notifications").as((notifications) =>
-          notifications.map((n) => <NotificationWidget n={n} />),
-        )}
+      <box orientation={Gtk.Orientation.VERTICAL}>
+        <For each={notifications}>{(n) => <Notification n={n} />}</For>
       </box>
     </window>
   );