notifications: make popup window

3 files changed, 101 insertions, 70 deletions

diff --git a/src/modules/bar.tsx b/src/modules/bar.tsx
index b56d94a..aeb6e42 100644
--- a/src/modules/bar.tsx
+++ b/src/modules/bar.tsx
@@ -15,6 +15,7 @@ import { getAppCategoryIcon } from "../utils/icons";
 import { ellipsize } from "../utils/strings";
 import { osIcon } from "../utils/system";
 import { setupCustomTooltip } from "../utils/widgets";
+import type PopupWindow from "../widgets/popupwindow";
 
 const hyprland = AstalHyprland.get_default();
 
@@ -385,11 +386,19 @@ const PkgUpdates = () => (
     </box>
 );
 
-const Notifications = () => {
+const Unread = () => {
     const unreadCount = Variable(0);
     return (
-        <box
-            className="module notifications"
+        <button
+            onClick={(self, event) => {
+                if (event.button === Astal.MouseButton.PRIMARY) {
+                    const popup = App.get_window("notifications") as PopupWindow | null;
+                    if (popup) {
+                        if (popup.visible) popup.hide();
+                        else popup.popup_at_widget(self, event);
+                    }
+                } else if (event.button === Astal.MouseButton.SECONDARY) unreadCount.set(0);
+            }}
             setup={self =>
                 setupCustomTooltip(
                     self,
@@ -397,39 +406,37 @@ const Notifications = () => {
                 )
             }
         >
-            <label className="icon" label="info" />
-            <label
-                label="0"
-                setup={self => {
-                    const notifd = AstalNotifd.get_default();
-                    let notifsOpen = false;
-                    let unread = new Set<number>();
+            <box className="module unread">
+                <label className="icon" label="info" />
+                <label
+                    label={bind(unreadCount).as(String)}
+                    setup={self => {
+                        const notifd = AstalNotifd.get_default();
+                        let notifsOpen = false;
+                        let unread = new Set<number>();
+                        self.hook(unreadCount, (_, u) => u === 0 && unread.clear());
 
-                    self.hook(notifd, "notified", (self, id, replaced) => {
-                        if (!notifsOpen && !replaced) {
-                            unread.add(id);
-                            unreadCount.set(unread.size);
-                            self.label = String(unread.size);
-                        }
-                    });
-                    self.hook(notifd, "resolved", (self, id) => {
-                        if (unread.delete(id)) {
-                            unreadCount.set(unread.size);
-                            self.label = String(unread.size);
-                        }
-                    });
-                    self.hook(App, "window-toggled", (_, window) => {
-                        if (window.name === "notifications") {
-                            notifsOpen = window.visible;
-                            if (notifsOpen) {
-                                unread.clear();
-                                unreadCount.set(0);
+                        self.hook(notifd, "notified", (_, id, replaced) => {
+                            if (!notifsOpen && !replaced) {
+                                unread.add(id);
+                                unreadCount.set(unread.size);
                             }
-                        }
-                    });
-                }}
-            />
-        </box>
+                        });
+                        self.hook(notifd, "resolved", (_, id) => {
+                            if (unread.delete(id)) {
+                                unreadCount.set(unread.size);
+                            }
+                        });
+                        self.hook(App, "window-toggled", (_, window) => {
+                            if (window.name === "notifications") {
+                                notifsOpen = window.visible;
+                                if (notifsOpen) unreadCount.set(0);
+                            }
+                        });
+                    }}
+                />
+            </box>
+        </button>
     );
 };
 
@@ -491,7 +498,7 @@ export default ({ monitor }: { monitor: Monitor }) => (
                 <Tray />
                 <StatusIcons />
                 <PkgUpdates />
-                <Notifications />
+                <Unread />
                 <DateTime />
                 <Power />
             </box>
diff --git a/src/modules/notifications.tsx b/src/modules/notifications.tsx
index 66188a1..ea98ada 100644
--- a/src/modules/notifications.tsx
+++ b/src/modules/notifications.tsx
@@ -1,6 +1,8 @@
-import { Gtk } from "astal/gtk3";
+import { bind } from "astal";
+import { Astal, Gtk } from "astal/gtk3";
 import AstalNotifd from "gi://AstalNotifd";
-import { PopupWindow, setupChildClickthrough } from "../utils/widgets";
+import Notification from "../widgets/notification";
+import PopupWindow from "../widgets/popupwindow";
 
 const List = () => (
     <box
@@ -9,49 +11,63 @@ const List = () => (
         className="list"
         setup={self => {
             const notifd = AstalNotifd.get_default();
-            const map = new Map<number, NotifPopup>();
-            self.hook(notifd, "notified", (self, id) => {
-                const notification = notifd.get_notification(id);
+            const map = new Map<number, Notification>();
 
-                const popup = (<NotifPopup notification={notification} />) as NotifPopup;
-                popup.connect("destroy", () => map.get(notification.id) === popup && map.delete(notification.id));
+            const addNotification = (notification: AstalNotifd.Notification) => {
+                const notif = (<Notification notification={notification} />) as Notification;
+                notif.connect("destroy", () => map.get(notification.id) === notif && map.delete(notification.id));
                 map.get(notification.id)?.destroyWithAnims();
-                map.set(notification.id, popup);
+                map.set(notification.id, notif);
 
-                self.add(
+                self.pack_end(
                     <eventbox
                         // Dismiss on middle click
                         onClick={(_, event) => event.button === Astal.MouseButton.MIDDLE && notification.dismiss()}
-                        // Close on hover lost
-                        onHoverLost={() => popup.destroyWithAnims()}
                     >
-                        {popup}
-                    </eventbox>
+                        {notif}
+                    </eventbox>,
+                    false,
+                    false,
+                    0
                 );
+            };
 
-                // Limit number of popups
-                if (config.maxPopups > 0 && self.children.length > config.maxPopups)
-                    map.values().next().value?.destroyWithAnims();
-            });
-            self.hook(notifd, "resolved", (_, id) => map.get(id)?.destroyWithAnims());
+            notifd
+                .get_notifications()
+                .sort((a, b) => a.time - b.time)
+                .forEach(addNotification);
 
-            // Change input region to child region so can click through empty space
-            setupChildClickthrough(self);
+            self.hook(notifd, "notified", (_, id) => addNotification(notifd.get_notification(id)));
+            self.hook(notifd, "resolved", (_, id) => map.get(id)?.destroyWithAnims());
         }}
     />
 );
 
-export default class Notifications extends PopupWindow {
-    constructor() {
-        super({
-            name: "notifications",
-            child: (
-                <box>
-                    <List />
-                </box>
-            ),
-        });
-
-        setupChildClickthrough(self);
-    }
-}
+export default () => (
+    <PopupWindow name="notifications">
+        <box vertical className="notifications">
+            <box className="header">
+                <label
+                    label={bind(AstalNotifd.get_default(), "notifications").as(
+                        n => `${n.length} notification${n.length === 1 ? "" : "s"}`
+                    )}
+                />
+                <box hexpand />
+                <button
+                    cursor="pointer"
+                    onClicked={() => (AstalNotifd.get_default().dontDisturb = !AstalNotifd.get_default().dontDisturb)}
+                    label="Silence"
+                    className={bind(AstalNotifd.get_default(), "dontDisturb").as(d => (d ? "enabled" : ""))}
+                />
+                <button
+                    cursor="pointer"
+                    onClicked={() => AstalNotifd.get_default().notifications.forEach(n => n.dismiss())}
+                    label="Clear"
+                />
+            </box>
+            <scrollable expand hscroll={Gtk.PolicyType.NEVER}>
+                <List />
+            </scrollable>
+        </box>
+    </PopupWindow>
+);
diff --git a/src/modules/notifpopups.tsx b/src/modules/notifpopups.tsx
index 5da3092..9e34549 100644
--- a/src/modules/notifpopups.tsx
+++ b/src/modules/notifpopups.tsx
@@ -1,4 +1,4 @@
-import { Astal, Gtk } from "astal/gtk3";
+import { App, Astal, Gtk } from "astal/gtk3";
 import AstalNotifd from "gi://AstalNotifd";
 import { notifpopups as config } from "../../config";
 import { setupChildClickthrough } from "../utils/widgets";
@@ -16,7 +16,11 @@ export default () => (
             setup={self => {
                 const notifd = AstalNotifd.get_default();
                 const map = new Map<number, Notification>();
+                let notifsOpen = false;
+
                 self.hook(notifd, "notified", (self, id) => {
+                    if (notifsOpen) return;
+
                     const notification = notifd.get_notification(id);
 
                     const popup = (<Notification popup notification={notification} />) as Notification;
@@ -41,6 +45,10 @@ export default () => (
                 });
                 self.hook(notifd, "resolved", (_, id) => map.get(id)?.destroyWithAnims());
 
+                self.hook(App, "window-toggled", (_, window) => {
+                    if (window.name === "notifications") notifsOpen = window.visible;
+                });
+
                 // Change input region to child region so can click through empty space
                 setupChildClickthrough(self);
             }}