ags/notifications: init

home/services/ags/config.js

@@ -1,6 +1,7 @@
 import { App, Utils } from "./imports.js";
 import Bar from "./windows/bar/main.js";
 import Music from "./windows/music/main.js";
+import NotificationPopup from "./windows/notifications/popups.js";
 import Osd from "./windows/osd/main.js";
 import SystemMenu from "./windows/system-menu/main.js";
 
@@ -16,6 +17,10 @@ export default {
   closeWindowDelay: {
     "system-menu": 200,
   },
+  notificationPopupTimeout: 5000,
+  notificationForceTimeout: false,
+  cacheNotificationActions: true,
+  maxStreamVolume: 1,
 };
 
 function reloadCss() {
@@ -27,6 +32,9 @@ function reloadCss() {
 
 Utils.monitorFile(`${App.configDir}/style`, reloadCss, "directory");
 
+/**
+ * @param {import("types/widgets/window.js").Window[]} windows
+ */
 function addWindows(windows) {
   windows.forEach((win) => App.addWindow(win));
 }
@@ -37,5 +45,6 @@ addWindows(
     Music(),
     Osd(),
     SystemMenu(),
+    NotificationPopup(),
   ],
 );

home/services/ags/imports.js

@@ -1,8 +1,8 @@
 // Required components
-import App from "resource:///com/github/Aylur/ags/app.js";
 import GLib from "gi://GLib";
-import * as Utils from "resource:///com/github/Aylur/ags/utils.js";
+import App from "resource:///com/github/Aylur/ags/app.js";
 import Service from "resource:///com/github/Aylur/ags/service.js";
+import * as Utils from "resource:///com/github/Aylur/ags/utils.js";
 import Variable from "resource:///com/github/Aylur/ags/variable.js";
 import Widget from "resource:///com/github/Aylur/ags/widget.js";
 
@@ -13,6 +13,7 @@ import Bluetooth from "resource:///com/github/Aylur/ags/service/bluetooth.js";
 import Hyprland from "resource:///com/github/Aylur/ags/service/hyprland.js";
 import Mpris from "resource:///com/github/Aylur/ags/service/mpris.js";
 import Network from "resource:///com/github/Aylur/ags/service/network.js";
+import Notifications from "resource:///com/github/Aylur/ags/service/notifications.js";
 import PowerProfiles from "resource:///com/github/Aylur/ags/service/powerprofiles.js";
 import SystemTray from "resource:///com/github/Aylur/ags/service/systemtray.js";
 
@@ -28,6 +29,7 @@ export {
   Icons,
   Mpris,
   Network,
+  Notifications,
   PowerProfiles,
   Service,
   SystemTray,

home/services/ags/style.scss

@@ -10,3 +10,4 @@
 @import "style/music";
 @import "style/osd";
 @import "style/system-menu";
+@import "style/notifications";

home/services/ags/style/notifications.scss

@@ -0,0 +1,57 @@
+.notification {
+  @include window;
+  margin: 5px 5px 5px 10px;
+
+  min-width: 25rem;
+
+  border-radius: $round2;
+  background-color: $bg;
+
+  .critical {
+    border: 1px solid red;
+  }
+}
+
+.notifications widget:last-child .notification {
+  margin-bottom: 15px;
+}
+
+.notification .icon {
+  image {
+    font-size: 5rem;
+    margin: 0.5rem;
+    min-height: 5rem;
+    min-width: 5rem;
+  }
+
+  > box {
+    border-radius: $round;
+    margin: 0.5rem;
+    min-height: 5rem;
+    min-width: 5rem;
+  }
+}
+
+.notification .actions .action-button {
+  @include window-box;
+  @include animate;
+  padding: 0.5rem 0;
+
+  &:hover {
+    background: $button-disabled-hover;
+  }
+}
+
+.notification .text {
+  margin: 0.5rem;
+
+  .title {
+    margin-bottom: 0.2rem;
+    font-weight: 500;
+  }
+
+  .body {
+    color: rgba(255, 255, 255, 0.7);
+    font-weight: 500;
+  }
+}

home/services/ags/windows/notifications/popups.js

@@ -0,0 +1,131 @@
+import { Notifications, Utils, Widget } from "../../imports.js";
+
+const closeAll = () => {
+  Notifications.popups.map(n => n.dismiss());
+};
+
+/** @param {import("types/service/notifications").Notification} n */
+const 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;
+      `,
+    });
+  }
+
+  if (Utils.lookUpIcon(app_icon)) {
+    return Widget.Icon(app_icon);
+  }
+
+  if (app_entry && Utils.lookUpIcon(app_entry)) {
+    return Widget.Icon(app_entry);
+  }
+
+  return null;
+};
+
+/** @param {import('types/service/notifications').Notification} n */
+export const Notification = (n) => {
+  const icon = Widget.Box({
+    vpack: "start",
+    class_name: "icon",
+    // @ts-ignore
+    setup: self => {
+      let icon = NotificationIcon(n);
+      if (icon !== null) {
+        self.child = icon;
+      }
+    },
+  });
+
+  const title = Widget.Label({
+    class_name: "title",
+    xalign: 0,
+    justification: "left",
+    hexpand: true,
+    max_width_chars: 24,
+    truncate: "end",
+    wrap: true,
+    label: n.summary,
+    use_markup: true,
+  });
+
+  const body = Widget.Label({
+    class_name: "body",
+    hexpand: true,
+    use_markup: true,
+    xalign: 0,
+    justification: "left",
+    max_width_chars: 100,
+    wrap: true,
+    label: n.body,
+  });
+
+  const actions = Widget.Box({
+    class_name: "actions",
+    children: n.actions.filter(({ id }) => id != "default").map(({ id, label }) =>
+      Widget.Button({
+        class_name: "action-button",
+        on_clicked: () => n.invoke(id),
+        hexpand: true,
+        child: Widget.Label(label),
+      })
+    ),
+  });
+
+  return Widget.EventBox({
+    on_primary_click: () => {
+      if (n.actions.length > 0) n.invoke(n.actions[0].id);
+    },
+    on_middle_click: closeAll,
+    on_secondary_click: () => n.dismiss(),
+    child: Widget.Box({
+      class_name: `notification ${n.urgency}`,
+      vertical: true,
+
+      children: [
+        Widget.Box({
+          class_name: "info",
+          children: [
+            icon,
+            Widget.Box({
+              vertical: true,
+              class_name: "text",
+              vpack: "center",
+
+              setup: self => {
+                if (n.body.length > 0) {
+                  self.children = [title, body];
+                } else {
+                  self.children = [title];
+                }
+              },
+            }),
+          ],
+        }),
+        actions,
+      ],
+    }),
+  });
+};
+
+export const notificationPopup = () =>
+  Widget.Window({
+    name: "notifications",
+    anchor: ["top", "right"],
+    child: Widget.Box({
+      css: "padding: 1px;",
+      class_name: "notifications",
+      vertical: true,
+      // @ts-ignore
+      children: Notifications.bind("popups").transform((popups) => {
+        return popups.map(Notification);
+      }),
+    }),
+  });
+
+export default notificationPopup;