add: live browser notifications

crates/app/src/public/js/me.js

@@ -1,5 +1,5 @@
 (() => {
-    const self = reg_ns("me");
+    const self = reg_ns("me", ["streams"]);
 
     self.LOGIN_ACCOUNT_TOKENS = JSON.parse(
         window.localStorage.getItem("atto:login_account_tokens") || "{}",
@@ -235,6 +235,120 @@
             });
     });
 
+    self.define("notifications_stream", ({ _, streams }) => {
+        const element = document.getElementById("notifications_span");
+
+        streams.subscribe("notifs");
+        streams.event("notifs", "message", (data) => {
+            if (data === "Ping") {
+                return;
+            }
+
+            const json = JSON.parse(data);
+            if (!json.method.Packet) {
+                console.warn("notifications stream cannot read this message");
+                return;
+            }
+
+            const inner_data = JSON.parse(json.data);
+            if (json.method.Packet.Crud === "Create") {
+                const current = Number.parseInt(element.innerText || "0");
+
+                if (current <= 0) {
+                    element.classList.remove("hidden");
+                }
+
+                element.innerText = current + 1;
+
+                // check if we're already connected
+                const connected =
+                    window.sessionStorage.getItem("atto:connected/notifs") ===
+                    "true";
+
+                if (connected) {
+                    return;
+                }
+
+                window.sessionStorage.setItem("atto:connected/notifs", "true");
+
+                // send notification
+                const enabled =
+                    window.localStorage.getItem("atto:notifs_enabled") ===
+                    "true";
+
+                if (Notification.permission === "granted" && enabled) {
+                    // try to pull notification user
+                    const matches = /\/api\/v1\/auth\/user\/find\/(\d*)/.exec(
+                        inner_data.content,
+                    );
+
+                    // ...
+                    new Notification(inner_data.title, {
+                        body: inner_data.content,
+                        icon: matches[1]
+                            ? `/api/v1/auth/user/${matches[1]}/avatar?selector_type=id`
+                            : "/public/favicon.svg",
+                        lang: "en-US",
+                    });
+
+                    console.info("notification created");
+                }
+            } else if (json.method.Packet.Crud === "Delete") {
+                const current = Number.parseInt(element.innerText || "0");
+
+                if (current - 1 <= 0) {
+                    element.classList.add("hidden");
+                }
+
+                element.innerText = current - 1;
+            } else {
+                console.warn("correct packet type but with wrong data");
+            }
+        });
+    });
+
+    self.define("notifications_button", (_, element) => {
+        if (Notification.permission === "granted") {
+            let enabled =
+                window.localStorage.getItem("atto:notifs_enabled") === "true";
+
+            function text() {
+                if (!enabled) {
+                    element.innerText = "Enable notifications";
+                } else {
+                    element.innerText = "Disable notifications";
+                }
+            }
+
+            element.addEventListener("click", () => {
+                enabled = !enabled;
+                window.localStorage.setItem("atto:notifs_enabled", enabled);
+
+                text();
+            });
+
+            text();
+        } else if (Notification.permission !== "denied") {
+            element.innerText = "Enable notifications";
+            element.addEventListener("click", () => {
+                Notification.requestPermission().then((permission) => {
+                    if (permission === "granted") {
+                        window.localStorage.setItem(
+                            "atto:notifs_enabled",
+                            "true",
+                        );
+
+                        window.location.reload();
+                    } else {
+                        alert(
+                            "Permission denied! You must allow this permission for browser notifications.",
+                        );
+                    }
+                });
+            });
+        }
+    });
+
     // token switcher
     self.define(
         "set_login_account_tokens",

crates/app/src/public/js/streams.js

@@ -65,7 +65,6 @@
         }
 
         socket.events[event] = handler;
-        socket.socket.addEventListener(event, handler);
     });
 
     self.define("send_packet", async ({ $ }, stream, method, data) => {