[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
2025-04-22 15:30:41 +02:00
parent 8b70f80e60
commit 8a2180e120
19 changed files with 678 additions and 200 deletions
--- a/config/astal/components/notifications/handler.tsx
+++ b/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!';
    }
--- a/config/astal/components/notifications/notifications.scss
+++ b/config/astal/components/notifications/notifications.scss
@@ -14,22 +14,25 @@ window.NotificationHandler {
 }

 box.Notification {
-    min-width: 400px;
-    border-radius: 13px;
-    background-color: $bg-color;
-    margin: .5rem 1rem .5rem 1rem;
-    box-shadow: 2px 3px 8px 0 gtkalpha(black, .4);
-    border: 1pt solid gtkalpha($fg-color, .03);

-    &:first-child>box {
+    &:first-child {
        margin-top: 1rem;
    }

-    &:last-child>box {
+    &:last-child {
        margin-bottom: 1rem;
    }

-    &.critical>box {
+    & {
+        min-width: 400px;
+        border-radius: 13px;
+        background-color: $bg-color;
+        margin: .5rem 1rem .5rem 1rem;
+        box-shadow: 2px 3px 8px 0 gtkalpha(black, .4);
+        border: 1pt solid gtkalpha($fg-color, .03);
+    }
+
+    &.critical {
        border: 1pt solid gtkalpha($error, .4);

        .header {
--- a/config/astal/components/notifications/notifications.tsx
+++ b/config/astal/components/notifications/notifications.tsx
@@ -24,9 +24,9 @@ const urgency = (n: Notifd.Notification) => {
 }

 type Props = {
-    delete( id: number ): void
+    delete: ( id: number ) => void;
    notification: Notifd.Notification
-    id: number
+    id: number,
 }

 export default function Notification(props: Props) {
@@ -34,54 +34,54 @@ export default function Notification(props: Props) {
    const { START, CENTER, END } = Gtk.Align

    return <box vertical
-        cssClasses={['Notification', urgency(n)]}>
-        <box cssName="header">
+        cssClasses={['Notification', `${urgency(n)}`]}>
+        <box cssClasses={["header"]}>
            {(n.appIcon || n.desktopEntry) ? <Gtk.Image
-                cssName="app-icon"
+                cssClasses={["app-icon"]}
                visible={Boolean(n.appIcon || n.desktopEntry)}
                iconName={n.appIcon || n.desktopEntry}
-            /> : <Gtk.Image iconName={'window-close-symbolic'}></Gtk.Image>}
+            /> : <image iconName={'window-close-symbolic'}></image>}
            <label
-                cssName="app-name"
+                cssClasses={["app-name"]}
                halign={START}
                // ellipsize={Pango.EllipsizeMode.END}
                label={n.appName || "Unknown"}
            />
            <label
-                cssName="time"
+                cssClasses={["time"]}
                hexpand
                halign={END}
                label={time(n.time)}
            />
-            <button onClicked={() => del( id )}>
-                <Gtk.Image iconName="window-close-symbolic" />
+            <button onClicked={() => { del( id ) }}>
+                <image iconName="window-close-symbolic" />
            </button>
        </box>
        <Gtk.Separator visible />
-        <box cssName="content">
+        <box cssClasses={["content"]}>
            {n.image && fileExists(n.image) ? <box
                valign={START}
-                cssName="image">
-                <Gtk.Image file={n.image}></Gtk.Image>
+                cssClasses={["image"]}>
+                <image file={n.image}></image>
            </box>
                : <box></box>}
            {n.image ? <box
                expand={false}
                valign={START}
-                className="icon-image">
-                <Gtk.Image iconName={n.image} expand halign={CENTER} valign={CENTER} />
+                cssClasses={["icon-image"]}>
+                <image iconName={n.image} expand halign={CENTER} valign={CENTER} />
            </box>
                : <box></box>}
            <box vertical>
-                <Gtk.Label
-                    cssName="summary"
+                <label
+                    cssClasses={["summary"]}
                    halign={START}
                    xalign={0}
                    label={n.summary}
                    // ellipsize={Pango.EllipsizeMode.END}
                />
                {n.body ? <label
-                    cssName="body"
+                    cssClasses={["body"]}
                    wrap
                    useMarkup
                    halign={START}
@@ -90,7 +90,7 @@ export default function Notification(props: Props) {
                /> : <label></label>}
            </box>
        </box>
-        {n.get_actions().length > 0 ? <box cssName="actions">
+        {n.get_actions().length > 0 ? <box cssClasses={["actions"]}>
            {n.get_actions().map(({ label, id }) => (
                <button
                    hexpand