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;
+    }
+}

app/templates_src/components.lisp

@@ -111,7 +111,7 @@
 
 (text "{% if replying_to -%}")
 (div
-    ("style" "transform: scale(0.8); opacity: 75%; width: 110%")
+    ("class" "message_reply_wrapper")
     (text "{{ self::message(message=replying_to, hide_actions=true) }}"))
 (text "{%- endif %}")
 (text "{%- endmacro %}")

app/templates_src/profile.lisp

@@ -58,7 +58,9 @@
         ("class" "card_nest w_full")
         ("style" "max-width: 25rem")
         (div
-            ("class" "card banner"))
+            ("class" "card banner")
+            (img
+                ("src" "{{ config.service_hosts.buckets }}/banners/{{ profile.id }}")))
         (div
             ("class" "card flex flex_col gap_ch")
             (text "{{ components::avatar(id=profile.id, size=\"160px\") }}")
@@ -134,12 +136,17 @@
     }
 
     .profile .banner {
-        background-image: url(\"{{ config.service_hosts.buckets }}/banners/{{ profile.id }}\") !important;
-        background-repeat: no-repeat !important;
-        background-position: center !important;
-        background-size: cover !important;
         border-radius: var(--radius) var(--radius) 0 0;
         height: 225px;
+        overflow: hidden;
+        padding: 0 !important;
+    }
+
+    .profile .banner img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        object-position: center;
     }
 
     .card_nest .card:nth-child(2) {