Start work on notifications menu

modules/bar/bar.js

@@ -2,7 +2,7 @@ import { Menu } from "./menu/index.js";
 import { Workspaces } from "./workspaces/index.js";
 import { ClientTitle } from "./window_title/index.js";
 import { Media } from "./media/index.js";
-import { Notification } from "./notification/index.js";
+import { Notifications } from "./notifications/index.js";
 import { Volume } from "./volume/index.js";
 import { Network } from "./network/index.js";
 import { Bluetooth } from "./bluetooth/index.js";
@@ -53,6 +53,7 @@ const Right = () => {
       BarItemBox(BatteryLabel()),
       BarItemBox(SysTray()),
       BarItemBox(Clock()),
+      BarItemBox(Notifications()),
       BarItemBox(Power()),
     ],
   });

modules/bar/notification/index.js

@@ -1,24 +0,0 @@
-const notifications = await Service.import("notifications");
-
-// we don't need dunst or any other notification daemon
-// because the Notifications module is a notification daemon itself
-const Notification = () => {
-  const popups = notifications.bind("popups");
-  return {
-    component: Widget.Box({
-      class_name: "notification",
-      visible: popups.as((p) => p.length > 0),
-      children: [
-        Widget.Icon({
-          icon: "preferences-system-notifications-symbolic",
-        }),
-        Widget.Label({
-          label: popups.as((p) => p[0]?.summary || ""),
-        }),
-      ],
-    }),
-    isVisible: false,
-  };
-};
-
-export { Notification };

modules/bar/notifications/index.js

@@ -0,0 +1,38 @@
+const notifs = await Service.import("notifications");
+
+export const Notifications = () => {
+  notifs.connect("changed", () => {
+    console.log(JSON.stringify(notifs, null, 2));
+  });
+  return {
+    component: Widget.Box({
+      hpack: "start",
+      hexpand: true,
+      child: Widget.Button({
+        hpack: "start",
+        hexpand: true,
+        class_name: "bar-notifications",
+        child: Widget.Label({
+          hpack: "start",
+          hexpand: true,
+          class_name: "bar-notifications-label",
+          setup: (self) => {
+            self.hook(notifs, () => {
+              if (notifs.dnd) {
+                return (self.label = "󰂛");
+              } else if (notifs.notifications.length > 0) {
+                return (self.label = "󱅫");
+              } else {
+                return (self.label = "󰂚");
+              }
+            });
+          },
+        }),
+      }),
+    }),
+    isVisible: true,
+    props: {
+      on_primary_click: () => App.toggleWindow("notificationsmenu"),
+    },
+  };
+};

modules/menus/main.js

@@ -4,5 +4,6 @@ import AudioMenu from "./audio/index.js";
 import NetworkMenu from "./network/index.js";
 import BluetoothMenu from "./bluetooth/index.js";
 import MediaMenu from "./media/index.js";
+import NotificationsMenu from "./notifications/index.js";
 
-export default [PowerMenu(), Verification(), AudioMenu(), NetworkMenu(), BluetoothMenu(), MediaMenu()];
+export default [PowerMenu(), Verification(), AudioMenu(), NetworkMenu(), BluetoothMenu(), MediaMenu(), NotificationsMenu()];

modules/menus/notifications/index.js

@@ -0,0 +1,205 @@
+const notifs = await Service.import("notifications");
+import icons from "../../icons/index.js";
+
+export default () => {
+  notifs.popupTimeout = 5000;
+
+  return Widget.Window({
+    name: "notificationsmenu",
+    class_name: "notifications-menu",
+    layer: "top",
+    anchor: ["top", "right"],
+    monitor: 2,
+    keymode: "on-demand",
+    exclusivity: "ignore",
+    setup: (w) =>
+      w.keybind("Escape", () => App.closeWindow("notificationsmenu")),
+    visible: false,
+    child: Widget.Box({
+      class_name: "notification-menu-content",
+      css: "padding: 1px; margin: -1px;",
+      child: Widget.Revealer({
+        transitionDuration: 350,
+        reveal_child: false,
+        transition: "crossfade",
+        setup: (self) =>
+          self.hook(App, (_, wname, visible) => {
+            if (wname === "notificationsmenu") self.reveal_child = visible;
+          }),
+        child: Widget.Box({
+          class_name: "notification-card-container menu",
+          vertical: true,
+          hexpand: true,
+          setup: (self) => {
+            self.hook(notifs, () => {
+              const imageContainer = (notif) => {
+                if (notif.image !== undefined) {
+                  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 [];
+              };
+
+              const actionsContainer = (notif) => {
+                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: () => {
+                            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,
+                              }),
+                            ],
+                          }),
+                        });
+                      }),
+                    }),
+                  ];
+                }
+
+                return [];
+              };
+
+              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,
+                  }),
+                });
+              };
+
+              return (self.children = notifs.notifications.map((notif) => {
+                return Widget.Box({
+                  class_name: "notification-card",
+                  vpack: "start",
+                  hexpand: true,
+                  children: [
+                    ...imageContainer(notif),
+                    Widget.Box({
+                      vpack: "start",
+                      vertical: true,
+                      hexpand: true,
+                      class_name: `notification-card-content ${notif.image === undefined ? "noimg" : ""}`,
+                      children: [
+                        Widget.Box({
+                          vertical: false,
+                          hexpand: true,
+                          children: [
+                            Widget.Box({
+                              class_name: "notification-card-header",
+                              hexpand: true,
+                              vpack: "start",
+                              children: [
+                                Widget.Label({
+                                  class_name: "notification-card-header-label",
+                                  hpack: "start",
+                                  hexpand: true,
+                                  vexpand: true,
+                                  max_width_chars:
+                                    notif.image === undefined ? 27 : 20,
+                                  truncate: "end",
+                                  wrap: true,
+                                  label: notif["summary"],
+                                }),
+                              ],
+                            }),
+                            Widget.Box({
+                              class_name: "notification-card-header",
+                              hexpand: true,
+                              hpack: "end",
+                              children: [NotificationIcon(notif)],
+                            }),
+                          ],
+                        }),
+                        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:
+                                notif.image === undefined ? 35 : 28,
+                              wrap: true,
+                              class_name: "notification-card-body-label",
+                              label: notif["body"],
+                            }),
+                          ],
+                        }),
+                        ...actionsContainer(notif),
+                      ],
+                    }),
+                    Widget.Button({
+                      class_name: "close-notification-button",
+                      on_primary_click: () => {
+                        notifs.CloseNotification(notif.id);
+                      },
+                      child: Widget.Label({
+                        label: "󰅜",
+                        hpack: "center",
+                      }),
+                    }),
+                  ],
+                });
+              }));
+            });
+          },
+        }),
+      }),
+    }),
+  });
+};

scss/bar/notifications.scss

@@ -0,0 +1,8 @@
+@import "../colors";
+
+.bar-notifications-label {
+  color: $yellow;
+  font-size: 1.3em;
+  min-width: 1em;
+  margin-right: 0.15em;
+}

scss/main.scss

@@ -21,6 +21,7 @@
 @import "bar/workspace";
 @import "bar/window_title";
 @import "bar/systray";
+@import "bar/notifications";
 @import "bar/power";
 @import "bar/bar";
 
@@ -31,6 +32,7 @@
 @import "menus/network";
 @import "menus/bluetooth";
 @import "menus/media";
+@import "menus/notifications";
 
 //notifications
 @import "notifications/popups";

scss/menus/notifications.scss

@@ -0,0 +1,13 @@
+@import "../colors";
+
+.notification-card-container.menu {
+    min-width: 30rem;
+    min-height: 50rem;
+    background: $mantle;
+    border: 0.25rem solid $surface0; 
+    border-radius: 0.4rem;
+}
+
+.notification-menu-content {
+    margin: 40rem;
+}

style.css

@@ -388,6 +388,13 @@ spinner:checked {
   font-size: 1.3em;
 }
 
+.bar-notifications-label {
+  color: #f9e2af;
+  font-size: 1.3em;
+  min-width: 1em;
+  margin-right: 0.15em;
+}
+
 .bar-power_label {
   color: #f38ba8;
   margin-top: 0.2rem;
@@ -1030,6 +1037,18 @@ image {
   background: #6c7086;
   box-shadow: none;
 }
+.notification-card-container.menu {
+  min-width: 30rem;
+  min-height: 50rem;
+  background: #181825;
+  border: 0.25rem solid #313244;
+  border-radius: 0.4rem;
+}
+
+.notification-menu-content {
+  margin: 40rem;
+}
+
 .notification-card-container {
   margin-top: 3.5rem;
 }