hyprpanel

ags/HyprPanel/modules/notifications/actions/index.ts

@@ -0,0 +1,47 @@
+import { Attribute, Child } from 'lib/types/widget';
+import { Notification, Notifications } from 'types/service/notifications';
+import Box from 'types/widgets/box';
+
+const Action = (notif: Notification, notifs: Notifications): Box<Child, Attribute> => {
+    if (notif.actions !== undefined && notif.actions.length > 0) {
+        return Widget.Box({
+            class_name: 'notification-card-actions',
+            hexpand: true,
+            vpack: 'end',
+            children: notif.actions.map((action) => {
+                return Widget.Button({
+                    hexpand: true,
+                    class_name: 'notification-action-buttons',
+                    on_primary_click: () => {
+                        if (action.id.includes('scriptAction:-')) {
+                            Utils.execAsync(`${action.id.replace('scriptAction:-', '')}`).catch((err) =>
+                                console.error(err),
+                            );
+                            notifs.CloseNotification(notif.id);
+                        } else {
+                            notif.invoke(action.id);
+                        }
+                    },
+                    child: Widget.Box({
+                        hpack: 'center',
+                        hexpand: true,
+                        children: [
+                            Widget.Label({
+                                class_name: 'notification-action-buttons-label',
+                                hexpand: true,
+                                label: action.label,
+                                max_width_chars: 15,
+                                truncate: 'end',
+                                wrap: true,
+                            }),
+                        ],
+                    }),
+                });
+            }),
+        });
+    }
+
+    return Widget.Box();
+};
+
+export { Action };

ags/HyprPanel/modules/notifications/body/index.ts

@@ -0,0 +1,26 @@
+import { Notification } from 'types/service/notifications';
+import { notifHasImg } from '../../menus/notifications/utils.js';
+import Box from 'types/widgets/box.js';
+import { Attribute, Child } from 'lib/types/widget.js';
+
+export const Body = (notif: Notification): Box<Child, Attribute> => {
+    return Widget.Box({
+        vpack: 'start',
+        hexpand: true,
+        class_name: 'notification-card-body',
+        children: [
+            Widget.Label({
+                hexpand: true,
+                use_markup: true,
+                xalign: 0,
+                justification: 'left',
+                truncate: 'end',
+                lines: 2,
+                max_width_chars: !notifHasImg(notif) ? 35 : 28,
+                wrap: true,
+                class_name: 'notification-card-body-label',
+                label: notif['body'],
+            }),
+        ],
+    });
+};

ags/HyprPanel/modules/notifications/close/index.ts

@@ -0,0 +1,18 @@
+import { Attribute, Child } from 'lib/types/widget';
+import { Notification, Notifications } from 'types/service/notifications';
+import Button from 'types/widgets/button';
+import Label from 'types/widgets/label';
+
+export const CloseButton = (notif: Notification, notifs: Notifications): Button<Label<Child>, Attribute> => {
+    return Widget.Button({
+        class_name: 'close-notification-button',
+        on_primary_click: () => {
+            notifs.CloseNotification(notif.id);
+        },
+        child: Widget.Label({
+            class_name: 'txt-icon notif-close',
+            label: '󰅜',
+            hpack: 'center',
+        }),
+    });
+};

ags/HyprPanel/modules/notifications/header/icon.ts

@@ -0,0 +1,23 @@
+import { Notification } from 'types/service/notifications.js';
+import { getNotificationIcon } from 'globals/notification.js';
+import Box from 'types/widgets/box';
+import { Attribute, Child } from 'lib/types/widget';
+
+const NotificationIcon = ({
+    app_entry = '',
+    app_icon = '',
+    app_name = '',
+}: Partial<Notification>): Box<Child, Attribute> => {
+    return Widget.Box({
+        css: `
+            min-width: 2rem;
+            min-height: 2rem;
+        `,
+        child: Widget.Icon({
+            class_name: 'notification-icon',
+            icon: getNotificationIcon(app_name, app_icon, app_entry),
+        }),
+    });
+};
+
+export { NotificationIcon };

ags/HyprPanel/modules/notifications/header/index.ts

@@ -0,0 +1,56 @@
+import GLib from 'gi://GLib';
+import { notifHasImg } from '../../menus/notifications/utils.js';
+import { NotificationIcon } from './icon.js';
+import { Notification } from 'types/service/notifications';
+import options from 'options.js';
+import Box from 'types/widgets/box.js';
+import { Attribute, Child } from 'lib/types/widget.js';
+
+const { military } = options.menus.clock.time;
+
+export const Header = (notif: Notification): Box<Child, Attribute> => {
+    const time = (time: number, format = '%I:%M %p'): string => {
+        return GLib.DateTime.new_from_unix_local(time).format(military.value ? '%H:%M' : format) || '--';
+    };
+
+    return Widget.Box({
+        vertical: false,
+        hexpand: true,
+        children: [
+            Widget.Box({
+                class_name: 'notification-card-header',
+                hpack: 'start',
+                children: [NotificationIcon(notif)],
+            }),
+            Widget.Box({
+                class_name: 'notification-card-header',
+                hexpand: true,
+                hpack: 'start',
+                vpack: 'start',
+                children: [
+                    Widget.Label({
+                        class_name: 'notification-card-header-label',
+                        hpack: 'start',
+                        hexpand: true,
+                        vexpand: true,
+                        max_width_chars: !notifHasImg(notif) ? 30 : 19,
+                        truncate: 'end',
+                        wrap: true,
+                        label: notif['summary'],
+                    }),
+                ],
+            }),
+            Widget.Box({
+                class_name: 'notification-card-header menu',
+                hpack: 'end',
+                vpack: 'start',
+                hexpand: true,
+                child: Widget.Label({
+                    vexpand: true,
+                    class_name: 'notification-time',
+                    label: time(notif.time),
+                }),
+            }),
+        ],
+    });
+};

ags/HyprPanel/modules/notifications/image/index.ts

@@ -0,0 +1,25 @@
+import { Notification } from 'types/service/notifications';
+import { notifHasImg } from '../../menus/notifications/utils.js';
+import Box from 'types/widgets/box.js';
+import { Attribute, Child } from 'lib/types/widget.js';
+
+const Image = (notif: Notification): Box<Child, Attribute> => {
+    if (notifHasImg(notif)) {
+        return Widget.Box({
+            class_name: 'notification-card-image-container',
+            hpack: 'center',
+            vpack: 'center',
+            vexpand: false,
+            child: Widget.Box({
+                hpack: 'center',
+                vexpand: false,
+                class_name: 'notification-card-image',
+                css: `background-image: url("${notif.image}")`,
+            }),
+        });
+    }
+
+    return Widget.Box();
+};
+
+export { Image };

ags/HyprPanel/modules/notifications/index.ts

@@ -0,0 +1,80 @@
+const notifs = await Service.import('notifications');
+import options from 'options';
+import { notifHasImg } from '../menus/notifications/utils.js';
+import { Image } from './image/index.js';
+import { Action } from './actions/index.js';
+import { Header } from './header/index.js';
+import { Body } from './body/index.js';
+import { CloseButton } from './close/index.js';
+import { getPosition } from 'lib/utils.js';
+import { filterNotifications } from 'lib/shared/notifications.js';
+import { Notification } from 'types/service/notifications.js';
+import Window from 'types/widgets/window.js';
+import Box from 'types/widgets/box.js';
+import { Attribute, Child } from 'lib/types/widget.js';
+const hyprland = await Service.import('hyprland');
+
+const { position, timeout, cache_actions, monitor, active_monitor, displayedTotal, ignore } = options.notifications;
+
+const curMonitor = Variable(monitor.value);
+
+hyprland.active.connect('changed', () => {
+    curMonitor.value = hyprland.active.monitor.id;
+});
+
+export default (): Window<Box<Child, Attribute>, unknown> => {
+    Utils.merge([timeout.bind('value'), cache_actions.bind('value')], (timeout, doCaching) => {
+        notifs.popupTimeout = timeout;
+        notifs.cacheActions = doCaching;
+    });
+
+    return Widget.Window({
+        name: 'notifications-window',
+        class_name: 'notifications-window',
+        monitor: Utils.merge(
+            [curMonitor.bind('value'), monitor.bind('value'), active_monitor.bind('value')],
+            (curMon, mon, activeMonitor) => {
+                if (activeMonitor === true) {
+                    return curMon;
+                }
+
+                return mon;
+            },
+        ),
+        layer: options.tear.bind('value').as((tear) => (tear ? 'top' : 'overlay')),
+        anchor: position.bind('value').as((v) => getPosition(v)),
+        exclusivity: 'normal',
+        child: Widget.Box({
+            class_name: 'notification-card-container',
+            vertical: true,
+            hexpand: true,
+            setup: (self) => {
+                Utils.merge(
+                    [notifs.bind('popups'), ignore.bind('value')],
+                    (notifications: Notification[], ignoredNotifs: string[]) => {
+                        const filteredNotifications = filterNotifications(notifications, ignoredNotifs);
+
+                        return (self.children = filteredNotifications.slice(0, displayedTotal.value).map((notif) => {
+                            return Widget.Box({
+                                class_name: 'notification-card',
+                                vpack: 'start',
+                                hexpand: true,
+                                children: [
+                                    Image(notif),
+                                    Widget.Box({
+                                        vpack: 'start',
+                                        vertical: true,
+                                        hexpand: true,
+                                        class_name: `notification-card-content ${!notifHasImg(notif) ? 'noimg' : ''}`,
+                                        children: [Header(notif), Body(notif), Action(notif, notifs)],
+                                    }),
+                                    CloseButton(notif, notifs),
+                                ],
+                            });
+                        }));
+                    },
+                );
+            },
+        }),
+    });
+};