[AGS] GTK 4 Migration: Done, Start adding QuickActions

Probably gonna abandon the QuickActions, as that is just way too much
effort for what it does. Will be providing keybinds for doing what I
wanted to do there in Hyprland

config/astal/components/notifications/handler.tsx

@@ -7,7 +7,7 @@
 *
 */
 
-import { Astal, Gdk } from "astal/gtk4"
+import { App, Astal, Gdk } from "astal/gtk4"
 import Notifd from "gi://AstalNotifd";
 import Notification from "./notifications";
 import { timeout, Variable } from "astal"
@@ -31,8 +31,7 @@ interface NotificationDetails {
 //          │                   Handler                     │
 //          ╰───────────────────────────────────────────────╯
 // ───────────────────────────────────────────────────────────────────
-let ShownNotifications: number[] = [];
-const ShownNotificationsCount: Variable<number> = Variable( 0 );
+let ShownNotifications: Variable<number[]> = Variable( [] );
 let Notifications: NotificationDetails[] = [];
 
 const notifd = Notifd.get_default();
@@ -46,6 +45,9 @@ notifd.ignoreTimeout = true;
 const deleteNotification = ( index: number ): void => {
     hideNotification( index );
     Notifications.splice( index, 1 );
+    if ( Notifications.length === 0 ) {
+        notificationMenuOpen = false;
+    }
 }
 
 // ───────────────────────────────────────────────────────────────────
@@ -133,9 +135,9 @@ const hookToNotificationDaemon = (): void => {
  */
 const showNotification = ( id: number, removeAgain: boolean = true ) => {
     // Add notification to UI for display
-    ShownNotifications.reverse().push( id );
-    ShownNotifications.reverse();
-    ShownNotificationsCount.set( ShownNotifications.length );
+    const not = [...ShownNotifications.get()].reverse();
+    not.push( id );
+    ShownNotifications.set( not.reverse() );
 
     // Set delay to remove the notification again
     if ( removeAgain && Notifications[ id ].notification.get_urgency() !== Notifd.Urgency.CRITICAL ) {
@@ -154,7 +156,9 @@ const showNotification = ( id: number, removeAgain: boolean = true ) => {
  */
 const hideNotification = ( id: number ) => {
     if ( !notificationMenuOpen ) {
-        ShownNotifications.splice( ShownNotifications.indexOf( id ), 1 );
+        const not = [...ShownNotifications.get()];
+        not.splice( not.indexOf( id ), 1 );
+        ShownNotifications.set( not );
     }
 }
 
@@ -167,10 +171,11 @@ const hideNotification = ( id: number ) => {
 const openNotificationMenu = () => {
     // Simply show all notifications
     notificationMenuOpen = true;
-    const ShownNotifications = [];
+    const not = [];
     for (let index = 0; index < Notifications.length; index++) {
-        ShownNotifications.push( index );
+        not.push( index );
     }
+    ShownNotifications.set( not.reverse() );
 }
 
 // ───────────────────────────────────────────────────────────────────
@@ -182,9 +187,7 @@ const openNotificationMenu = () => {
 const closeNotificationMenu = () => {
     // Hide all notifications
     notificationMenuOpen = true;
-
-    ShownNotifications = [];
-    ShownNotificationsCount.set( 0 );
+    ShownNotifications.set( [] );
 }
 
 // ───────────────────────────────────────────────────────────────────
@@ -193,11 +196,13 @@ const closeNotificationMenu = () => {
 /**
  * Toggle the notification menu (i.e. show all notifications)
  */
-const toggleNotificationMenu = () => {
+const toggleNotificationMenu = (): string => {
     if ( notificationMenuOpen ) {
         closeNotificationMenu();
+        return 'Toggle notification menu closed';
     } else {
         openNotificationMenu();
+        return 'Toggled notification menu open';
     }
 }
 
@@ -209,8 +214,9 @@ const toggleNotificationMenu = () => {
  */
 const clearAllNotifications = () => {
     Notifications = [];
-    ShownNotifications = [];
-    ShownNotificationsCount.set( 0 );
+    ShownNotifications.set( [] );
+    // TODO: Hiding for each individual deleteNotification
+    notificationMenuOpen = false;
 }
 
 // ───────────────────────────────────────────────────────────────────
@@ -220,7 +226,9 @@ const clearAllNotifications = () => {
  * Delete the newest notifications
  */
 const clearNewestNotifications = () => {
-    ShownNotifications.splice( 0, 1 );
+    const not = [...ShownNotifications.get()];
+    not.splice( 0, 1 );
+    ShownNotifications.set( not );
 
     Notifications.splice( Notifications.length - 1, 1 );
 }
@@ -236,16 +244,16 @@ const startNotificationHandler = (gdkmonitor: Gdk.Monitor) => {
     const { TOP, RIGHT } = Astal.WindowAnchor
 
     hookToNotificationDaemon();
-    const range = (n: number) => [...Array(n).keys()];
 
     return <window
         cssClasses={["NotificationHandler"]}
         gdkmonitor={gdkmonitor}
         exclusivity={Astal.Exclusivity.EXCLUSIVE}
-        anchor={TOP | RIGHT}>
-        <box vertical noImplicitDestroy>
-            {ShownNotificationsCount( n => range( n ).map( i => {
-                print( 'Rendering' );
+        anchor={TOP | RIGHT}
+        visible={ShownNotifications( list => list.length > 0 )}
+        application={App}>
+        <box vertical>
+            {ShownNotifications( list => list.map( i => {
                 // i is index in ShownNotifications array
                 return <Notification id={i} delete={deleteNotification} notification={Notifications[ i ].notification}></Notification>
             } ) ) }
@@ -267,8 +275,19 @@ const cliHandler = ( args: string[] ): string => {
         clearNewestNotifications();
         return 'Cleared newest notification';
     } else if ( args[ 1 ] == 'toggle' ) {
-        toggleNotificationMenu();
-        return 'Toggled notifications';
+        return toggleNotificationMenu();
+    } else if ( args[ 1 ] == 'list' ){
+        if ( Notifications.length > 0 ) {
+            let list = 'Currently unviewed notifications: ';
+            for (let index = 0; index < Notifications.length; index++) {
+                const element = Notifications[index];
+                
+                list += `\n - (${element.notifdID}) ${element.notification.get_app_name()}: ${element.notification.get_summary()}`;
+            }
+            return list;
+        } else {
+            return 'No currently unviewed notifications'
+        }
     } else {
         return 'Unknown command!';
     }