Modularized notification toast and menu components.

modules/notifications/header/icon.js

@@ -0,0 +1,32 @@
+import icons from "../../icons/index.js";
+
+const NotificationIcon = ({ app_entry, app_icon, app_name }) => {
+  let icon = icons.fallback.notification;
+
+  if (
+    Utils.lookUpIcon(app_name) ||
+    Utils.lookUpIcon(app_name.toLowerCase() || "")
+  )
+    icon = Utils.lookUpIcon(app_name)
+      ? app_name
+      : Utils.lookUpIcon(app_name.toLowerCase())
+        ? app_name.toLowerCase()
+        : "";
+
+  if (Utils.lookUpIcon(app_icon) && icon === "") icon = app_icon;
+
+  if (Utils.lookUpIcon(app_entry || "") && icon === "") icon = app_entry || "";
+
+  return Widget.Box({
+    css: `
+            min-width: 2rem;
+            min-height: 2rem;
+        `,
+    child: Widget.Icon({
+      class_name: "notification-icon",
+      icon,
+    }),
+  });
+};
+
+export { NotificationIcon };

modules/notifications/header/index.js

@@ -0,0 +1,49 @@
+import GLib from "gi://GLib";
+import { notifHasImg } from "../../menus/notifications/utils.js";
+import { NotificationIcon } from "./icon.js";
+
+const time = (time, format = "%I:%M %p") =>
+  GLib.DateTime.new_from_unix_local(time).format(format);
+
+export const Header = (notif) => {
+  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),
+        }),
+      }),
+    ],
+  });
+};