dotfiles/modules/ags/config/notifications/Notifications.js

const notifications = await Service.import("notifications")

/** @param {import('resource:///com/github/Aylur/ags/service/notifications.js').Notification} n */
function NotificationIcon({ app_entry, app_icon, image }) {
    if (image) {
        return Widget.Box({
            css: `background-image: url("${image}");`
                + "background-size: contain;"
                + "background-repeat: no-repeat;"
                + "background-position: center;",
        })
    }

    let icon = "dialog-information-symbolic"
    if (Utils.lookUpIcon(app_icon))
        icon = app_icon

    if (app_entry && Utils.lookUpIcon(app_entry))
        icon = app_entry

    return Widget.Box({
        child: Widget.Icon(icon),
    })
}

/** @param {import('resource:///com/github/Aylur/ags/service/notifications.js').Notification} n */
function Notification(n) {
    const icon = Widget.Box({
        vpack: "start",
        class_name: "icon",
        child: NotificationIcon(n),
    })

    const title = Widget.Label({
        class_name: "title",
        xalign: 0,
        justification: "left",
        hexpand: true,
        max_width_chars: 24,
        label: n.summary,
        use_markup: true,
    })

    const body = Widget.Label({
        class_name: "body",
        hexpand: true,
        use_markup: true,
        xalign: 0,
        justification: "left",
        label: n.body,
        wrap: true,
    })

    const content = Widget.Box({
        className: "content",
        children: [
            icon,
            Widget.Box({
                vertical: true,
                children: [
                    title,
                    body,
                ]
            }),
        ],
    })

    const actions = Widget.Box({
        className: "actions",
        children: n.actions.map(({ id, label }) => Widget.Button({
            className: "action",
            on_clicked: () => {
                n.invoke(id)
                n.dismiss()
            },
            hexpand: true,
            child: Widget.Label(label),
        })),
    })


    return Widget.EventBox({
        attribute: { id: n.id },
        onPrimaryClick: n.dismiss,
        child: Widget.Box({
            classNames: ["notification", n.urgency],
            vertical: true,
            children: [
                content,
                actions,
            ],
        }),
    })
}

function NotificationList() {
    const list = Widget.Box({
        css: "min-width: 2px; min-height: 2px;",
        vertical: true,
        spacing: 10,
        children: notifications.popups.map(Notification),
    })

    function onNotified(_, /** @type {number} */ id) {
        const n = notifications.getNotification(id)
        if (n)
            list.children = [Notification(n), ...list.children]
    }

    function onDismissed(_, /** @type {number} */ id) {
        list.children.find(n => n.attribute.id === id)?.destroy()
    }

    list.hook(notifications, onNotified, "notified")
        .hook(notifications, onDismissed, "dismissed")
    return list
}

export function Notifications(monitor = 0) {
    return Widget.Window({
        monitor,
        exclusivity: "normal",
        className: "notifications",
        margins: [10, 10, 10, 10],
        name: `notifications${monitor}`,
        anchor: ["left", "top"],
        child: NotificationList(),
    })
}