add: message notifications

app/public/messages.js

@@ -12,6 +12,7 @@ const STATE = {
 function create_streamer(chat_id, hook_element) {
     STATE.chat_id = chat_id;
     STATE.stream_element = hook_element.parentElement;
+    clear_notifications();
 
     STATE.observer = new IntersectionObserver(
         (entries) => {
@@ -112,6 +113,10 @@ function sock_con() {
 
         if (msg.method === "MessageCreate") {
             render_message(msg.body);
+
+            setTimeout(() => {
+                clear_notifications();
+            }, 150);
         } else if (msg.method === "MessageDelete") {
             if (document.getElementById(`message_${msg.body}`)) {
                 document.getElementById(`message_${msg.body}`).remove();
@@ -420,3 +425,15 @@ function clear_replying_to() {
     STATE.replying_to = undefined;
     document.getElementById("replying_to_zone").classList.add("hidden");
 }
+
+function clear_notifications() {
+    fetch(`/api/v1/chats/${STATE.chat_id}/notifications`, {
+        method: "DELETE",
+    })
+        .then((res) => res.json())
+        .then((res) => {
+            if (!res.ok) {
+                show_message(res.message, res.ok);
+            }
+        });
+}

app/public/style.css

@@ -837,3 +837,22 @@ menu.col {
 .message .body p:last-of-type {
     margin: 0 !important;
 }
+
+.message_reply_wrapper .message {
+    opacity: 75%;
+    padding: 0 4px;
+
+    & .body {
+        min-height: unset;
+        height: 26px !important;
+        overflow: hidden;
+    }
+
+    & p {
+        font-size: 10px;
+    }
+
+    & .avatar {
+        --size: 18px !important;
+    }
+}