✨ chore: migrate widgets to ags v3 and gtk4

2025-07-06 19:56:44 -03:00
parent 9db1d6fc12
commit b90a799a89
16 changed files with 650 additions and 711 deletions
@@ -0,0 +1,129 @@
+import { Gdk, Gtk } from "ags/gtk4";
+import { Separator } from "./Separator";
+import { HistoryNotification, Notifications } from "../scripts/notifications";
+import { getAppIcon, getSymbolicIcon } from "../scripts/apps";
+
+import AstalNotifd from "gi://AstalNotifd";
+import Pango from "gi://Pango?version=1.0";
+import GLib from "gi://GLib?version=2.0";
+import GObject from "gi://GObject?version=2.0";
+
+function getNotificationImage(notif: AstalNotifd.Notification|HistoryNotification): (string|undefined) {
+    const img = notif.image || notif.appIcon;
+
+    if(!img || !img.includes('/')) 
+        return undefined;
+
+    switch(true) {
+        case /^[/]/.test(img): 
+            return `file://${img}`;
+
+        case /^[~]/.test(img):
+        case /^file:\/\/[~]/i.test(img):
+            return `file://${GLib.get_home_dir()}/${img.replace(/^(file\:\/\/|[~]|file\:\/\[~])/i, "")}`;
+    }
+
+    return img;
+}
+
+export function NotificationWidget({ notification, actionClicked, holdOnHover, showTime, actionClose }: {
+        notification: AstalNotifd.Notification|number|HistoryNotification;
+        actionClicked?: (notif: AstalNotifd.Notification|HistoryNotification) => void;
+        actionClose?: (notif: AstalNotifd.Notification|HistoryNotification) => void;
+        holdOnHover?: boolean;
+        showTime?: boolean; // It's showTime :speaking_head: :boom: :bangbang:
+    }): Gtk.Widget {
+
+    notification = (typeof notification === "number") ? 
+        AstalNotifd.get_default().get_notification(notification)
+    : notification;
+
+    const conns: Map<GObject.Object, Array<number>> = new Map();
+
+    return <Gtk.Box hexpand={true} vexpand={true} class={`notification ${
+          Notifications.getDefault().getUrgencyString(notification.urgency)
+      }`} orientation={Gtk.Orientation.VERTICAL} spacing={5}
+      $={(self) => {
+          const eventControllerMotion = Gtk.EventControllerMotion.new(),
+              gestureClick = Gtk.GestureClick.new();
+
+          self.add_controller(eventControllerMotion);
+          self.add_controller(gestureClick);
+
+          conns.set(eventControllerMotion, [
+              eventControllerMotion.connect("enter", () => 
+                  holdOnHover && Notifications.getDefault().holdNotification(notification.id)),
+              eventControllerMotion.connect("leave", () => 
+                  holdOnHover && Notifications.getDefault().removeNotification(notification.id))
+          ]);
+
+          conns.set(gestureClick, [
+              gestureClick.connect("released", (gesture) => {
+                  gesture.get_current_button() === Gdk.BUTTON_PRIMARY &&
+                      actionClicked?.(notification);
+              })
+          ]);
+      }} onDestroy={(_) => {
+          conns.forEach((ids, obj) => ids.forEach(id => obj.disconnect(id)));
+      }}>
+
+        <Gtk.Box class={"top"} hexpand={true}>
+            <Gtk.Image css={"font-size: 16px;"} $={(self) => {
+                  const icon = getSymbolicIcon(notification.appIcon ?? notification.appName) ?? 
+                      getSymbolicIcon(notification.appName) ?? getAppIcon(notification.appName);
+
+                  if(icon) {
+                      self.set_from_icon_name(icon);
+                      return;
+                  }
+
+                  self.set_visible(false);
+            }} />
+            <Gtk.Label class={"app-name"} halign={Gtk.Align.START} hexpand={true} 
+              label={notification.appName || "Application"} />
+
+            <Gtk.Label class={"time"} visible={showTime} xalign={1} 
+              label={GLib.DateTime.new_from_unix_local(notification.time).format("%H:%M") ?? ""} />
+
+            <Gtk.Button halign={Gtk.Align.END} iconName={"window-close-symbolic"} 
+              class={"close icon"}/>
+        </Gtk.Box>
+        <Separator alpha={.1} orientation={Gtk.Orientation.VERTICAL} />
+        <Gtk.Box class={"content"} $={(self) => {
+            const image = getNotificationImage(notification);
+            
+            image &&
+                self.prepend(Gtk.Picture.new_for_filename(image));
+          }}>
+
+            <Gtk.Box class={"text"} orientation={Gtk.Orientation.VERTICAL}
+              vexpand={true}>
+
+                <Gtk.Label class={"summary"} useMarkup={true} xalign={0}
+                  ellipsize={Pango.EllipsizeMode.END} label={
+                      notification.summary.replace(/[&]/g, "&amp;")
+                } />
+
+                <Gtk.Label class={"body"} useMarkup={true} xalign={0} wrap={true} 
+                  wrapMode={Pango.WrapMode.WORD_CHAR} singleLineMode={false}
+                  label={notification.body.replace(/[&]/g, "&amp;")} />
+            </Gtk.Box>
+        </Gtk.Box>
+
+        <Gtk.Box class={"action button-row"} hexpand={true} visible={
+            (notification instanceof AstalNotifd.Notification) &&
+                (notification.actions.filter(action => action.label.toLowerCase() !== "view").length > 0)
+        }>
+            {
+              (notification instanceof AstalNotifd.Notification) && 
+                notification.actions.filter(a => a.label.toLowerCase() !== "view").map(action =>
+                    <Gtk.Button class={"action"} label={action.label} 
+                      hexpand={true} onClicked={(_) => {
+                          notification.invoke(action.id);
+                          actionClose?.(notification);
+                      }}
+                    />)
+            }
+        </Gtk.Box>
+    </Gtk.Box> as Gtk.Widget;
+}