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"),
+    },
+  };
+};