feat(agsV2): only let one notif popup at a time

nixosModules/ags/v2/widgets/notifs/center.tsx

@@ -59,6 +59,9 @@ const NotificationList = () => (
 );
 
 const ClearButton = () => (
+    <eventbox
+        cursor={bind(HasNotifs).as((hasNotifs) => hasNotifs ? 'pointer' : 'not-allowed')}
+    >
         <button
             className="clear"
             sensitive={bind(HasNotifs)}
@@ -82,6 +85,7 @@ const ClearButton = () => (
                 />
             </box>
         </button>
+    </eventbox>
 );
 
 const Header = () => (

nixosModules/ags/v2/widgets/notifs/gesture.tsx

@@ -62,6 +62,9 @@ export class NotifGestureWrapper extends Widget.EventBox {
     @signal(Number)
     declare timer_update: (popup_timer: number) => void;
 
+    public static sliding_in = 0;
+    public static on_sliding_in: (amount: number) => void;
+
     public dragging: boolean;
 
     private async get_hovered(): Promise<boolean> {
@@ -69,17 +72,16 @@ export class NotifGestureWrapper extends Widget.EventBox {
             const layers = JSON.parse(await hyprMessage('j/layers')) as LayerResult;
             const cursorPos = JSON.parse(await hyprMessage('j/cursorpos')) as CursorPos;
 
-            const window = this.get_window();
+            const monitor = display?.get_monitor_at_window(this.get_window()!);
+            const plugName = get_hyprland_monitor(monitor!)?.name;
 
-            if (window) {
-                const monitor = display?.get_monitor_at_window(window);
-
-                if (monitor) {
-                    const plugName = get_hyprland_monitor(monitor)?.name;
             const notifLayer = layers[plugName ?? '']?.levels['3']
                 ?.find((n) => n.namespace === 'notifications');
 
-                    if (notifLayer) {
+            if (!notifLayer) {
+                return false;
+            }
+
             const index = [...NotifGestureWrapper.popups.keys()]
                 .sort((a, b) => b - a)
                 .indexOf(this.id);
@@ -100,9 +102,6 @@ export class NotifGestureWrapper extends Widget.EventBox {
                 }
             }
         }
-                }
-            }
-        }
         catch (e) {
             console.log(e);
         }
@@ -301,6 +300,10 @@ export class NotifGestureWrapper extends Widget.EventBox {
                                 }
                             });
 
+                        if (this.is_popup) {
+                            NotifGestureWrapper.on_sliding_in(++NotifGestureWrapper.sliding_in);
+                        }
+
                         // Reverse of slideAway, so it started at squeeze, then we go to slide
                         self.css = this.slide_in_from === 'Left' ?
                             slideLeft :
@@ -312,6 +315,14 @@ export class NotifGestureWrapper extends Widget.EventBox {
                             setTimeout(() => {
                                 // Then we go to center
                                 self.css = defaultStyle;
+
+                                if (this.is_popup) {
+                                    setTimeout(() => {
+                                        NotifGestureWrapper.on_sliding_in(
+                                            --NotifGestureWrapper.sliding_in,
+                                        );
+                                    }, ANIM_DURATION);
+                                }
                             }, ANIM_DURATION);
                         });
                     }}

nixosModules/ags/v2/widgets/notifs/notification.tsx

@@ -1,4 +1,4 @@
-import { App, Gtk, Gdk } from 'astal/gtk3';
+import { App, Gtk, Gdk, Widget } from 'astal/gtk3';
 import { Variable } from 'astal';
 
 import GLib from 'gi://GLib?version=2.0';
@@ -26,11 +26,11 @@ const NotifIcon = ({ notifObj }: {
 }) => {
     let icon: string;
 
-    if (notifObj.get_image() !== '') {
+    if (notifObj.get_image() && notifObj.get_image() !== '') {
         icon = notifObj.get_image();
         App.add_icons(icon);
     }
-    else if (notifObj.get_app_icon() !== '') {
+    else if (notifObj.get_app_icon() !== '' && Widget.Icon.lookup_icon(notifObj.get_app_icon())) {
         icon = notifObj.get_app_icon();
     }
     else {

nixosModules/ags/v2/widgets/notifs/popups.tsx

@@ -13,11 +13,14 @@ export default () => (
         vertical
 
         setup={(self) => {
+            const notifQueue: number[] = [];
+
             const addPopup = (id: number) => {
                 if (!id) {
                     return;
                 }
 
+                if (NotifGestureWrapper.sliding_in === 0) {
                     const NewNotif = Notification({ id, popup_timer: 5 });
 
                     if (NewNotif) {
@@ -27,6 +30,20 @@ export default () => (
 
                         NotifGestureWrapper.popups.set(id, NewNotif);
                     }
+                }
+                else {
+                    notifQueue.push(id);
+                }
+            };
+
+            NotifGestureWrapper.on_sliding_in = (n) => {
+                if (n === 0) {
+                    const id = notifQueue.shift();
+
+                    if (id) {
+                        addPopup(id);
+                    }
+                }
             };
 
             const handleResolved = (id: number) => {

nixosModules/ags/v2/widgets/notifs/style.scss

@@ -70,6 +70,10 @@
         border-radius: 30px;
         border-top: 2px solid $accent-color;
 
+        .notification {
+            box-shadow: none;
+        }
+
         viewport {
             all: unset;
         }