add: base chat ui

app/templates_src/chat.lisp

@@ -15,11 +15,43 @@
             ("href" "/chats/{{ chat.id }}")
             (text "{{ components::chat_name(chat=chat, members=members, advanced=true, avatar_size=\"18px\") }}"))))
 (div
-    ("class" "card flex flex_col gap_2")
+    ("class" "flex flex_col card_nest reverse")
     ("style" "flex: 1 0 auto")
-    (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
+        ("class" "card flex flex_rev_col gap_2")
+        ("style" "flex: 1 0 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 %}"))
+    (form
+        ("class" "card flex flex_row items_center gap_2")
+        (input
+            ("type" "text")
+            ("class" "w_full")
+            ("name" "content")
+            ("id" "content")
+            ("placeholder" "Send a message to {{ components::chat_name(chat=chat, members=members) }}"))
+        (button
+            ("class" "button")
+            (text "{{ icon \"send\" }}"))))
 
 (script
     (text ""))

app/templates_src/components.lisp

@@ -40,3 +40,12 @@
 (text "{%- endif %}")
 (text "{%- endif %}")
 (text "{%- endmacro %}")
+
+(text "{% macro message(message) -%}")
+(div
+    ("class" "flex w_full gap_ch message {%- if user.id == message.owner %} justify_right mine {%- endif %}")
+    (div
+        ("class" "inner no_p_margin")
+        (text "{{ message.content|markdown|safe }}"))
+    (text "{{ components::avatar(id=uid) }}"))
+(text "{%- endmacro %}")

app/templates_src/message.lisp

@@ -0,0 +1,2 @@
+(text "{%- import \"components.lisp\" as components -%}")
+(text "{{ components::message(message) }}")

app/templates_src/messages.lisp

@@ -0,0 +1,4 @@
+(text "{%- import \"components.lisp\" as components -%}")
+(text "{% for message in messages -%}")
+(text "{{ components::message(message) }}")
+(text "{%- endfor %}")

app/templates_src/root.lisp

@@ -48,7 +48,7 @@
                             (text "home"))
                         (a
                             ("class" "button")
-                            ("href" "https://trisua.com/t/malachite")
+                            ("href" "https://trisua.com/t/tawny")
                             (text "source"))
                         (hr)
                         (text "{% if not user -%}")
@@ -63,8 +63,8 @@
                         (text "{%- else -%}")
                         (a
                             ("class" "button")
-                            ("href" "/app")
-                            (text "app"))
+                            ("href" "/chats")
+                            (text "my chats"))
                         (a
                             ("class" "button")
                             ("href" "{{ config.service_hosts.tetratto }}/settings")