add: increase group maximum, better read receipts

app/public/messages.js

@@ -13,11 +13,11 @@ function create_streamer(chat_id, hook_element) {
     STATE.stream_element = hook_element.parentElement;
 
     STATE.observer = new IntersectionObserver(
-        () => {
+        (entries) => {
             load_messages();
         },
         {
-            root: STATE.stream_element,
+            root: document.body,
             rootMargin: "0px",
             scrollMargin: "0px",
             threshold: 1.0,
@@ -52,8 +52,6 @@ function load_messages() {
                     .getAttribute("data-first-message-time"),
             );
 
-            // STATE.stream_element.scrollTo(0, STATE.stream_element.scrollHeight);
-
             if (document.getElementById(`msgs_quit_${STATE.id}`)) {
                 STATE.observer.disconnect();
                 console.log("quit");
@@ -64,6 +62,10 @@ function load_messages() {
                     ),
                 );
 
+                STATE.stream_element
+                    .querySelector("[ui_ident=data_marker]")
+                    .remove();
+
                 const element = document.createElement("div");
                 element.setAttribute("ui_ident", "data_marker");
                 STATE.stream_element.append(element);
@@ -80,10 +82,21 @@ function render_message(id) {
             STATE.is_loading = false;
             STATE.stream_element.innerHTML = `${res}${STATE.stream_element.innerHTML}`;
             mark_message_read();
-            STATE.stream_element.scrollTo(0, STATE.stream_element.scrollHeight);
+            scroll_bottom();
+
+            if (document.getElementById("delivered_read_status")) {
+                document.getElementById("delivered_read_status").remove(); // clear read receipt box
+            }
         });
 }
 
+function scroll_bottom() {
+    STATE.stream_element.parentElement.scrollTo(
+        0,
+        STATE.stream_element.parentElement.scrollHeight,
+    );
+}
+
 function sock_con() {
     const socket = new WebSocket(
         `//${window.location.origin.split("//")[1]}/api/v1/chats/${STATE.chat_id}/_connect`,
@@ -109,7 +122,7 @@ function sock_con() {
         } else if (msg.method === "ReadReceipt") {
             setTimeout(() => {
                 read_receipt();
-            }, 1500);
+            }, 150);
         }
     });
 }
@@ -164,7 +177,7 @@ function read_receipt() {
     fetch(`/chats/_templates/chat/${STATE.chat_id}/read_receipt`)
         .then((res) => res.text())
         .then((res) => {
-            STATE.stream_element.innerHTML = `${res}${STATE.stream_element.innerHTML}`;
+            document.getElementById("read_receipt_zone").innerHTML = res;
         });
 }
 

app/templates_src/chat.lisp

@@ -23,14 +23,18 @@
     ("class" "flex flex_col card_nest reverse")
     ("style" "flex: 1 0 auto")
     (div
-        ("class" "card flex flex_rev_col gap_2")
+        ("class" "flex flex_col")
         ("style" "flex: 1 0 auto; max-height: 80dvh; overflow: auto")
-        ("id" "messages_stream")
+        (div
-        (text "{% if messages|length == 0 -%}")
+            ("class" "card flex flex_rev_col gap_2")
-        (i ("class" "flex gap_ch items_center fade") (text "{{ icon \"star\" }} This is the start of the chat!"))
+            ("style" "flex: 1 0 auto")
-        (text "{%- endif %}")
+            ("id" "messages_stream")
+            (text "{% if messages|length == 0 -%}")
+            (i ("class" "flex gap_ch items_center fade") (text "{{ icon \"star\" }} This is the start of the chat!"))
+            (text "{%- endif %}")
 
-        (div ("ui_ident" "data_marker")))
+            (div ("ui_ident" "data_marker")))
+        (div ("id" "read_receipt_zone") ("class" "card") ("style" "min-height: 32.5px; position: sticky; bottom: 0")))
     (form
         ("class" "card flex flex_row items_center gap_2")
         ("onsubmit" "create_message(event)")
@@ -49,5 +53,9 @@
     (text "create_streamer(\"{{ chat.id }}\", document.querySelector(\"[ui_ident=data_marker]\"));
     sock_con();
     mark_message_read();
-    read_receipt();"))
+    read_receipt();
+
+    setTimeout(() => {
+        scroll_bottom();
+    }, 500);"))
 (text "{% endblock %}")

app/templates_src/read_receipt.lisp

@@ -11,7 +11,7 @@
     ; delivered and read by at least two people
     (text "{{ icon \"check-check\" }}")
     (text "{% for uid in chat.last_message_read_by -%}")
-    (text "{{ components::avatar(id=uid) }}")
+    (a ("href" "/@{{ uid }}?redirect=true") (text "{{ components::avatar(id=uid) }}"))
     (text "{%- endfor %}")
     (text "{%- endif %}"))
 (text "{%- endif %}")

src/routes/api/chats.rs

@@ -28,6 +28,8 @@ pub struct CreateChat {
     pub members: Vec<String>,
 }
 
+pub const GC_MAXIMUM_MEMBERS: usize = 20;
+
 pub async fn create_request(
     jar: CookieJar,
     Extension(data): Extension<State>,
@@ -41,7 +43,7 @@ pub async fn create_request(
     req.members.dedup();
 
     if (req.members.len() > 2 && req.style == ChatStyle::Direct)
-        | (req.members.len() > 10 && req.style != ChatStyle::Direct)
+        | (req.members.len() > GC_MAXIMUM_MEMBERS && req.style != ChatStyle::Direct)
     {
         return Json(Error::DataTooLong("members list".to_string()).into());
     } else if req.members.len() < 1 {
@@ -197,8 +199,8 @@ pub async fn add_member_request(
         return Json(Error::NotAllowed.into());
     }
 
-    if chat.style != ChatStyle::Direct && chat.members.len() > 10 {
+    if chat.style != ChatStyle::Direct && chat.members.len() > GC_MAXIMUM_MEMBERS {
-        // can only have a maximum of 10 members in one chat
+        // can only have a maximum of GC_MAXIMUM_MEMBERS members in one chat
         return Json(Error::DataTooLong("members list".to_string()).into());
     }