add: working chat ui

app/templates_src/chat.lisp

@@ -19,30 +19,16 @@
     ("style" "flex: 1 0 auto")
     (div
         ("class" "card flex flex_rev_col gap_2")
-        ("style" "flex: 1 0 auto")
+        ("style" "flex: 1 0 auto; max-height: 80dvh; overflow: auto")
         ("id" "messages_stream")
-        (text "{% if chat.last_message_created > 0 -%}")
-        (div
-            ("class" "flex gap_ch items_center")
-            ("id" "delivered_read_status")
-            (text "{% if chat.last_message_read_by|length <= 1 -%}")
-            ; just delivered
-            (text "{{ icon \"check\" }}")
-            (text "{{ chat.last_message_created|int|date(format=\"%Y-%m-%d %H:%M\", timezone=\"Etc/UTC\") }} UTC }}")
-            (text "{%- else -%}")
-            ; 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) }}")
-            (text "{%- endfor %}")
-            (text "{%- endif %}"))
-        (text "{%- endif %}")
-
         (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 %}"))
+        (text "{%- endif %}")
+
+        (div ("ui_ident" "data_marker")))
     (form
         ("class" "card flex flex_row items_center gap_2")
+        ("onsubmit" "create_message(event)")
         (input
             ("type" "text")
             ("class" "w_full")
@@ -53,6 +39,10 @@
             ("class" "button")
             (text "{{ icon \"send\" }}"))))
 
+(script ("src" "/public/messages.js"))
 (script
-    (text ""))
+    (text "create_streamer(\"{{ chat.id }}\", document.querySelector(\"[ui_ident=data_marker]\"));
+    sock_con();
+    mark_message_read();
+    read_receipt();"))
 (text "{% endblock %}")