HyprPanel now handles notification removal itself. (#242)

globals.d.ts

@@ -7,6 +7,7 @@ declare global {
     var useTheme: Function;
     var globalWeatherVar: VariableType<Weather>;
     var options: Options
+    var removingNotifications: VariableType<boolean>;
 }
 
 export { };

globals/notification.ts

@@ -1,4 +1,7 @@
 import icons from "modules/icons/index";
+import { Notification } from "types/service/notifications";
+
+export const removingNotifications = Variable<boolean>(false);
 
 export const getNotificationIcon = (app_name: string, app_icon: string, app_entry: string) => {
     let icon: string = icons.fallback.notification;
@@ -22,3 +25,13 @@ export const getNotificationIcon = (app_name: string, app_icon: string, app_entr
     return icon;
 };
 
+export const closeNotifications = async (notifications: Notification[]) => {
+    removingNotifications.value = true;
+    for (const notif of notifications) {
+        notif.close();
+        await new Promise(resolve => setTimeout(resolve, 100));
+    }
+    removingNotifications.value = false;
+}
+
+globalThis["removingNotifications"] = removingNotifications;

globals/weather.ts

@@ -125,4 +125,3 @@ export const getWeatherStatusTextIcon = (wthr: Weather): WeatherIcon => {
 };
 
 globalThis["globalWeatherVar"] = globalWeatherVar;
-

modules/menus/notifications/controls/index.ts

@@ -1,3 +1,4 @@
+import { closeNotifications } from "globals/notification";
 import { Notifications } from "types/service/notifications";
 
 const Controls = (notifs: Notifications) => {
@@ -40,11 +41,21 @@ const Controls = (notifs: Notifications) => {
                                 class_name: "menu-separator notification-controls",
                             }),
                             Widget.Button({
-                                class_name: "clear-notifications-button",
+                                className: "clear-notifications-button",
                                 tooltip_text: "Clear Notifications",
-                                on_primary_click: () => notifs.clear(),
+                                on_primary_click: () => {
+                                    if (removingNotifications.value) {
+                                        return;
+                                    }
+
+                                    closeNotifications(notifs.notifications);
+                                },
                                 child: Widget.Label({
-                                    class_name: "clear-notifications-label txt-icon",
+                                    class_name: removingNotifications.bind("value").as((removing: boolean) => {
+                                        return removing
+                                            ? "clear-notifications-label txt-icon removing"
+                                            : "clear-notifications-label txt-icon";
+                                    }),
                                     label: "",
                                 }),
                             }),

modules/menus/notifications/index.ts

@@ -1,3 +1,4 @@
+import { Notification } from "types/service/notifications.js";
 import DropdownMenu from "../DropdownMenu.js";
 const notifs = await Service.import("notifications");
 import { Controls } from "./controls/index.js";
@@ -7,18 +8,27 @@ import { NotificationPager } from "./pager/index.js";
 import options from "options";
 
 const { displayedTotal } = options.notifications;
-const { show: showPager } = options.theme.bar.menus.menu.notifications.pager;
 
 export default () => {
     const curPage = Variable(1);
 
-    Utils.merge([curPage.bind("value"), displayedTotal.bind("value"), notifs.bind("notifications")], (currentPage, dispTotal, notifications) => {
+    Utils.merge(
-        // If the page doesn't have enough notifications to display, go back
+        [
-        // to the previous page.
+            curPage.bind("value"),
-        if (notifications.length <= (currentPage - 1) * dispTotal) {
+            displayedTotal.bind("value"),
-            curPage.value = currentPage <= 1 ? 1 : currentPage - 1;
+            notifs.bind("notifications"),
-        }
+        ],
-    });
+        (
+            currentPage: number,
+            dispTotal: number,
+            notifications: Notification[],
+        ) => {
+            // If the page doesn't have enough notifications to display, go back
+            // to the previous page.
+            if (notifications.length <= (currentPage - 1) * dispTotal) {
+                curPage.value = currentPage <= 1 ? 1 : currentPage - 1;
+            }
+        });
 
     return DropdownMenu({
         name: "notificationsmenu",
@@ -34,13 +44,7 @@ export default () => {
                     vertical: true,
                     hexpand: false,
                     vexpand: false,
-                    children: showPager.bind("value").as(shPgr => {
+                    children: [Controls(notifs), NotificationCard(notifs, curPage), NotificationPager(curPage)]
-                        if (shPgr) {
-                            return [Controls(notifs), NotificationCard(notifs, curPage), NotificationPager(curPage)];
-                        }
-                        return [Controls(notifs), NotificationCard(notifs, curPage)]
-
-                    })
                 }),
             ],
         }),

modules/menus/notifications/pager/index.ts

@@ -1,74 +1,91 @@
 const notifs = await Service.import("notifications");
 
 import options from "options";
+import { Notification } from "types/service/notifications";
 import { Variable } from "types/variable";
 
 const { displayedTotal } = options.notifications;
+const { show: showPager } = options.theme.bar.menus.menu.notifications.pager;
 
 export const NotificationPager = (curPage: Variable<number>) => {
     return Widget.Box({
         class_name: "notification-menu-pager",
         hexpand: true,
         vexpand: false,
-        children: Utils.merge([curPage.bind("value"), displayedTotal.bind("value"), notifs.bind("notifications")], (currentPage, dispTotal, _) => {
+        children: Utils.merge(
-            return [
+            [
-                Widget.Button({
+                curPage.bind("value"),
-                    hexpand: true,
+                displayedTotal.bind("value"),
-                    hpack: "start",
+                notifs.bind("notifications"),
-                    class_name: `pager-button left ${currentPage <= 1 ? "disabled" : ""}`,
+                showPager.bind("value")
-                    onPrimaryClick: () => {
+            ],
-                        curPage.value = 1;
+            (
-                    },
+                currentPage: number,
-                    child: Widget.Label({
+                dispTotal: number,
-                        className: "pager-button-label",
+                _: Notification[],
-                        label: ""
+                showPgr: boolean
+            ) => {
+                if (showPgr === false) {
+                    return [];
+                }
+                return [
+                    Widget.Button({
+                        hexpand: true,
+                        hpack: "start",
+                        class_name: `pager-button left ${currentPage <= 1 ? "disabled" : ""}`,
+                        onPrimaryClick: () => {
+                            curPage.value = 1;
+                        },
+                        child: Widget.Label({
+                            className: "pager-button-label",
+                            label: ""
+                        }),
                     }),
-                }),
+                    Widget.Button({
-                Widget.Button({
+                        hexpand: true,
-                    hexpand: true,
+                        hpack: "start",
-                    hpack: "start",
+                        class_name: `pager-button left ${currentPage <= 1 ? "disabled" : ""}`,
-                    class_name: `pager-button left ${currentPage <= 1 ? "disabled" : ""}`,
+                        onPrimaryClick: () => {
-                    onPrimaryClick: () => {
+                            curPage.value = currentPage <= 1 ? 1 : currentPage - 1;
-                        curPage.value = currentPage <= 1 ? 1 : currentPage - 1;
+                        },
-                    },
+                        child: Widget.Label({
-                    child: Widget.Label({
+                            className: "pager-button-label",
-                        className: "pager-button-label",
+                            label: ""
-                        label: ""
+                        }),
                     }),
-                }),
+                    Widget.Label({
-                Widget.Label({
+                        hexpand: true,
-                    hexpand: true,
+                        hpack: "center",
-                    hpack: "center",
+                        class_name: "pager-label",
-                    class_name: "pager-label",
+                        label: `${currentPage} / ${Math.ceil(notifs.notifications.length / dispTotal) || 1}`
-                    label: `${currentPage} / ${Math.ceil(notifs.notifications.length / dispTotal) || 1}`
-                }),
-                Widget.Button({
-                    hexpand: true,
-                    hpack: "end",
-                    class_name: `pager-button right ${currentPage >= Math.ceil(notifs.notifications.length / dispTotal) ? "disabled" : ""}`,
-                    onPrimaryClick: () => {
-                        const maxPage = Math.ceil(notifs.notifications.length / displayedTotal.value);
-                        curPage.value = currentPage >= maxPage ? currentPage : currentPage + 1;
-                    },
-                    child: Widget.Label({
-                        className: "pager-button-label",
-                        label: ""
                     }),
-                }),
+                    Widget.Button({
-                Widget.Button({
+                        hexpand: true,
-                    hexpand: true,
+                        hpack: "end",
-                    hpack: "end",
+                        class_name: `pager-button right ${currentPage >= Math.ceil(notifs.notifications.length / dispTotal) ? "disabled" : ""}`,
-                    class_name: `pager-button right ${currentPage >= Math.ceil(notifs.notifications.length / dispTotal) ? "disabled" : ""}`,
+                        onPrimaryClick: () => {
-                    onPrimaryClick: () => {
+                            const maxPage = Math.ceil(notifs.notifications.length / displayedTotal.value);
-                        const maxPage = Math.ceil(notifs.notifications.length / displayedTotal.value);
+                            curPage.value = currentPage >= maxPage ? currentPage : currentPage + 1;
-                        curPage.value = maxPage;
+                        },
-                    },
+                        child: Widget.Label({
-                    child: Widget.Label({
+                            className: "pager-button-label",
-                        className: "pager-button-label",
+                            label: ""
-                        label: "󰄾"
+                        }),
                     }),
-                }),
+                    Widget.Button({
-            ]
+                        hexpand: true,
-        })
+                        hpack: "end",
+                        class_name: `pager-button right ${currentPage >= Math.ceil(notifs.notifications.length / dispTotal) ? "disabled" : ""}`,
+                        onPrimaryClick: () => {
+                            const maxPage = Math.ceil(notifs.notifications.length / displayedTotal.value);
+                            curPage.value = maxPage;
+                        },
+                        child: Widget.Label({
+                            className: "pager-button-label",
+                            label: "󰄾"
+                        }),
+                    }),
+                ]
+            })
     })
 }

scss/style/menus/notifications.scss

@@ -94,7 +94,7 @@
   .clear-notifications-button {
     margin-right: 0.3em;
 
-    &:hover label {
+    &:hover label:not(.removing) {
       color: transparentize(if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-notifications-clear), 0.5);
     }
   }
@@ -102,6 +102,10 @@
   .clear-notifications-label {
     color: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-notifications-clear);
     font-size: 1.5em;
+
+    &.removing {
+      color: $bar-menus-buttons-disabled;
+    }
   }
 
   scrollbar {