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,12 +8,21 @@ 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(
+        [
+            curPage.bind("value"),
+            displayedTotal.bind("value"),
+            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) {
@@ -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,16 +1,33 @@
 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(
+            [
+                curPage.bind("value"),
+                displayedTotal.bind("value"),
+                notifs.bind("notifications"),
+                showPager.bind("value")
+            ],
+            (
+                currentPage: number,
+                dispTotal: number,
+                _: Notification[],
+                showPgr: boolean
+            ) => {
+                if (showPgr === false) {
+                    return [];
+                }
                 return [
                     Widget.Button({
                         hexpand: true,

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 {