add: live browser notifications

crates/app/src/public/html/macros.html

@@ -51,9 +51,12 @@
                 class="button {% if selected == 'requests' %}active{% endif %}"
                 title="Requests"
             >
-                {{ icon "inbox" }} {% if user.request_count > 0 %}
-                <span class="notification tr">{{ user.request_count }}</span>
-                {% endif %}
+                {{ icon "inbox" }}
+                <span
+                    class="notification tr {% if user.request_count <= 0 %}hidden{% endif %}"
+                    id="requests_span"
+                    >{{ user.request_count }}</span
+                >
             </a>
 
             <a
@@ -61,11 +64,12 @@
                 class="button {% if selected == 'notifications' %}active{% endif %}"
                 title="Notifications"
             >
-                {% if user.notification_count > 0 %} {{ icon "bell-dot" }}
-                <span class="notification tr"
+                {{ icon "bell" }}
+                <span
+                    class="notification tr {% if user.notification_count <= 0 %}hidden{% endif %}"
+                    id="notifications_span"
                     >{{ user.notification_count }}</span
                 >
-                {% else %} {{ icon "bell" }} {% endif %}
             </a>
 
             <div class="dropdown">

crates/app/src/public/html/profile/settings.html

@@ -107,6 +107,23 @@
                 </div>
             </div>
 
+            <div class="card-nest desktop" ui_ident="notifications">
+                <div class="card small">
+                    <b>Notifications</b>
+                </div>
+
+                <div class="card flex flex-col gap-2">
+                    <button id="notifications_button"></button>
+                    <span class="fade">Notifications require you to keep {{ config.name }} open in your browser for real-time updates. This setting does not sync across browsers.</span>
+                </div>
+            </div>
+
+            <script>
+                setTimeout(() => {
+                    trigger("me::notifications_button", [document.getElementById("notifications_button")]);
+                }, 150)
+            </script>
+
             <div class="card-nest" ui_ident="change_password">
                 <div class="card small">
                     <b>{{ text "settings:label.change_password" }}</b>
@@ -880,6 +897,7 @@
 
             ui.refresh_container(account_settings, [
                 "home_timeline",
+                "notifications",
                 "change_password",
                 "change_username",
                 "two_factor_authentication",

crates/app/src/public/html/root.html

@@ -118,6 +118,10 @@ macros -%}
                         document.getElementById("tokens"),
                     ]);
                 }
+
+                setTimeout(() => {
+                    trigger("me::notifications_stream");
+                }, 250);
             });
         </script>
 

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) => {