Add a notification panel

ags/bar/widgets/time.ts

@@ -11,5 +11,5 @@ export const Time = () =>
       className: "time",
       label: time.bind(),
     }),
-    onClicked: () => Utils.execAsync("swaync-client -t"),
+    on_clicked: () => App.toggleWindow("timemenu"),
   });

ags/config.js

@@ -35,6 +35,24 @@ async function compileMain(dest) {
     await compileStyles(dest);
     await compileMain(dest);
 
+    // Set up hot reloading of styles.
+    Utils.monitorFile(`${App.configDir}/style.scss`, (_, event) => {
+      if (event !== 0) {
+        // Not a changed event.
+        return;
+      }
+
+      print("Hot reloading styles.");
+      Promise.resolve(compileStyles(dest))
+        .then((_) => {
+          App.resetCss();
+          App.applyCss(`${dest}/style.css`);
+        })
+        .catch((reason) => {
+          print(`Hot reloading error: ${reason}`);
+        });
+    });
+
     (await import(`file://${dest}/main.js`)).main(dest);
   } catch (err) {
     console.error(err);

ags/lib/develop.ts

@@ -0,0 +1,18 @@
+export function SetupCssHotReload(dest: string) {
+  Utils.monitorFile(`${App.configDir}/style.scss`, (_, event) => {
+    if (event !== 0) {
+      // Not a changed event.
+      return;
+    }
+
+    print("Hot reloading styles.");
+    Promise.resolve(compileStyles(dest))
+      .then((_) => {
+        App.resetCss();
+        App.applyCss(`${dest}/style.css`);
+      })
+      .catch((reason) => {
+        print(`Hot reloading error: ${reason}`);
+      });
+  });
+}

ags/lib/format.ts

@@ -0,0 +1,9 @@
+import GLib from "gi://GLib";
+
+export function formatTime(value: number, format = "%H:%M"): string {
+  const result = GLib.DateTime.new_from_unix_local(value).format(format);
+  if (result === null) {
+    throw new Error(`Failed to format time using \`${format}\` format.`);
+  }
+  return result;
+}

ags/lib/option-rs.ts

@@ -0,0 +1,49 @@
+export abstract class Option<T> {
+  abstract orElse(fn: () => Option<T>): Option<T>;
+  abstract andThen<U>(fn: (value: T) => Option<U>): Option<U>;
+  abstract unwrapOr(value: T): T;
+
+  static from<T>(value: T | null | undefined): Some<T> | None<T> {
+    return value !== null && value !== undefined ? new Some(value) : new None();
+  }
+
+  isSome(): boolean {
+    return this instanceof Some;
+  }
+
+  isNone(): boolean {
+    return this instanceof None;
+  }
+}
+
+export class Some<T> extends Option<T> {
+  constructor(public value: T) {
+    super();
+  }
+
+  orElse(_fn: () => Option<T>): Option<T> {
+    return this;
+  }
+
+  andThen<U>(fn: (value: T) => Option<U>): Option<U> {
+    return fn(this.value);
+  }
+
+  unwrapOr(_value: T): T {
+    return this.value;
+  }
+}
+
+export class None<T> extends Option<T> {
+  orElse(fn: () => Option<T>): Option<T> {
+    return fn();
+  }
+
+  andThen<U>(_fn: (value: T) => Option<U>): Option<U> {
+    return new None();
+  }
+
+  unwrapOr(value: T): T {
+    return value;
+  }
+}

ags/lib/settings.ts

@@ -29,6 +29,7 @@ export let config = {
       enable: opt<boolean>(true),
     },
   },
+  development: opt<boolean>(false),
 };
 
 /**

ags/lib/widgets.ts

@@ -1,5 +1,4 @@
 import type Gtk from "gi://Gtk?version=3.0";
-import { Binding } from "types/service";
 
 /** Return only the children that are not equal to null. */
 export function conditionalChildren(children: (Gtk.Widget | null)[]): Gtk.Widget[] {

ags/main.ts

@@ -1,10 +1,12 @@
 import Gdk from "gi://Gdk";
 import type Gtk from "gi://Gtk?version=3.0";
 
+import { SetupCssHotReload } from "lib/develop";
 import { VolumePopup } from "osd-popup/osd-popup.js";
 import { Bar } from "./bar/bar.js";
 import { config, readConfig } from "./lib/settings.js";
 import { Quicksettings } from "./quicksettings/quicksettings.js";
+import TimeMenu from "./timemenu/timemenu";
 
 function forMonitors(widget: (monitor: number) => Gtk.Window) {
   const n = Gdk.Display.get_default()?.get_n_monitors() || 1;
@@ -13,10 +15,13 @@ function forMonitors(widget: (monitor: number) => Gtk.Window) {
 
 export function main(dest: string): void {
   readConfig();
+
+  if (config.development) SetupCssHotReload(dest);
+
   App.config({
     style: `${dest}/style.css`,
     windows: () => {
-      const windows = [...forMonitors(Bar), Quicksettings()];
+      const windows = [...forMonitors(Bar), Quicksettings(), TimeMenu()];
 
       if (config.popups?.volumePopup?.enable) {
         windows.push(VolumePopup());

ags/style.scss

@@ -346,7 +346,6 @@ window.darkened {
       }
     }
   }
-
 }
 
 .osd-popup {
@@ -385,4 +384,61 @@ window.darkened {
 
     }
   }
-}
+}
+
+.timemenu {
+  @include space-between-y(1.5em);
+
+  padding: 1em;
+  min-width: 24em;
+  min-height: 26em;
+
+  border-radius: 1.5em;
+
+  .notifications {
+
+    .placeholder {
+
+      >.icon,
+      >label {
+        font-size: 1.22em;
+      }
+
+      >.icon {
+        margin-right: 1em;
+      }
+    }
+
+    .list {
+      @include space-between-y(0.75em);
+
+      .notification>.event-box {
+        border-radius: 0.5em;
+        border: 1px solid scale-color($background1, $lightness: 7.5%);
+        background-color: $surface0;
+        box-shadow: 0 0.1em 0.25em rgba(20, 20, 20, 0.25);
+
+        &:hover {
+          box-shadow: inset 1px 1px 1px 1px $surface0;
+          background-color: hover-color($surface0);
+        }
+
+        .content {
+          padding: 0.5em;
+
+          .image {
+            $icon-width: 4em;
+
+            margin-right: 1em;
+            min-width: $icon-width;
+            min-height: $icon-width;
+
+            >.icon {
+              font-size: $icon-width;
+            }
+          }
+        }
+      }
+    }
+  }
+}

ags/timemenu/icon.ts

@@ -0,0 +1,38 @@
+import type { Notification as NotificationInfo } from "types/service/notifications";
+
+import { None, Option, Some } from "lib/option-rs";
+
+const iconAsOption = (icon: string): Option<string> => {
+  return Utils.lookUpIcon(icon) ? new Some(icon) : new None();
+};
+
+export default ({ app_entry, app_icon, image }: NotificationInfo) => {
+  if (image !== undefined) {
+    return Widget.Box({
+      className: "image",
+      css: `
+        background-image: url("${image}");
+        background-size: cover;
+        background-repeat: no-repeat;
+        background-position: center;
+      `,
+    });
+  }
+
+  const icon = Option.from(app_entry)
+    .andThen(iconAsOption)
+    .orElse(() => iconAsOption(app_icon))
+    .unwrapOr(""); // TODO: Add some fallback icon here.;
+
+  return Widget.Box({
+    className: "image",
+    child: Widget.Icon({
+      icon,
+      className: "icon",
+      hpack: "center",
+      vpack: "center",
+      hexpand: true,
+      vexpand: true,
+    }),
+  });
+};

ags/timemenu/notification-list.ts

@@ -0,0 +1,91 @@
+import type { Variable as VariableType } from "types/variable";
+
+import Notification from "./notification";
+
+const notificationService = await Service.import("notifications");
+
+type NotificationMap = VariableType<Map<number, ReturnType<typeof Notification>>>;
+
+const Placeholder = (notifications: NotificationMap) =>
+  Widget.Box({
+    visible: notifications.bind().as((m) => m.size === 0),
+    className: "placeholder",
+    hexpand: true,
+    vexpand: true,
+    hpack: "center",
+    vpack: "center",
+    children: [
+      Widget.Icon({ className: "icon", icon: "notifications-disabled-symbolic" }),
+      Widget.Label("Your inbox is empty"),
+    ],
+  });
+
+const NotificationList = (notifications: NotificationMap) => {
+  const notify = (self: ReturnType<typeof Widget.Box>, id: number | undefined) => {
+    if (id === undefined) return;
+    const result = notifications.getValue();
+
+    // Remove notification with the same id.
+    // These are notifications that are meant to replace other notifications
+    // (e.g., currently playing song).
+    const replacedNotification = result.get(id);
+    if (replacedNotification !== undefined) {
+      result.delete(id);
+      replacedNotification.destroy();
+    }
+
+    const info = notificationService.getNotification(id);
+    if (info === undefined) return;
+
+    const notification = Notification(info);
+    notifications.setValue(result.set(id, notification));
+    self.children = [notification, ...self.children];
+  };
+
+  const remove = (id: number | undefined) => {
+    if (id === undefined) return;
+
+    const m = notifications.getValue();
+    const notification = m.get(id);
+    if (notification === undefined) {
+      return;
+    }
+
+    m.delete(id);
+    notification.destroy();
+    notifications.setValue(m);
+  };
+
+  return Widget.Scrollable({
+    visible: notifications.bind().as((n) => n.size > 0),
+    vexpand: true,
+    hscroll: "never",
+    child: Widget.Box({
+      className: "list",
+      vertical: true,
+      children: notificationService.notifications.map((info) => {
+        const notification = Notification(info);
+        notifications.setValue(notifications.getValue().set(info.id, notification));
+        return notification;
+      }),
+      setup(self) {
+        self
+          .hook(
+            notificationService,
+            (_: unknown, id: number | undefined) => notify(self, id),
+            "notified",
+          )
+          .hook(notificationService, (_: unknown, id: number | undefined) => remove(id), "closed");
+      },
+    }),
+  });
+};
+
+export default () => {
+  // Keep track of registered notifications.
+  const notifications: NotificationMap = Variable(new Map());
+  return Widget.Box({
+    className: "notifications",
+    children: [Placeholder(notifications), NotificationList(notifications)],
+  });
+};