add: message replies

app/public/messages.js

@@ -5,6 +5,7 @@ const STATE = {
     is_loading: false,
     stream_element: null,
     last_message_time: 0,
+    replying_to: undefined,
     last_read_receipt_load: 0,
 };
 
@@ -144,6 +145,7 @@ function create_message(e) {
         "body",
         JSON.stringify({
             content: e.target.content.value,
+            replying_to: STATE.replying_to,
         }),
     );
 
@@ -154,6 +156,7 @@ function create_message(e) {
             if (res.ok) {
                 e.target.reset();
                 document.getElementById("images_zone").classList.add("hidden");
+                clear_replying_to();
             } else {
                 show_message(res.message, res.ok);
             }
@@ -395,3 +398,25 @@ function remove_file_from_picker(input_id, idx) {
     // render
     display_pending_images({ target: input });
 }
+
+function reply_to_message(id) {
+    STATE.replying_to = id;
+    document.getElementById("replying_to_zone").classList.remove("hidden");
+    document.getElementById(`message_${id}`).classList.add("card");
+    document.getElementById(`message_${id}`).classList.add("surface");
+    scroll_bottom();
+}
+
+function clear_replying_to() {
+    if (STATE.replying_to) {
+        document
+            .getElementById(`message_${STATE.replying_to}`)
+            .classList.remove("card");
+        document
+            .getElementById(`message_${STATE.replying_to}`)
+            .classList.remove("surface");
+    }
+
+    STATE.replying_to = undefined;
+    document.getElementById("replying_to_zone").classList.add("hidden");
+}

app/templates_src/chat.lisp

@@ -31,7 +31,13 @@
             ("id" "messages_stream")
             (div ("ui_ident" "data_marker")))
         (div ("id" "read_receipt_zone") ("class" "card") ("style" "min-height: 32.5px; position: sticky; bottom: 0"))
-        (div ("id" "images_zone") ("class" "card hidden flex gap_2 flex_wrap")))
+        (div ("id" "images_zone") ("class" "card hidden flex gap_2 flex_wrap"))
+        (div
+            ("id" "replying_to_zone") ("class" "card hidden flex flex_col gap_1")
+            (div
+                ("class" "flex items_center gap_ch")
+                (text "{{ icon \"reply\" }} Replying to message"))
+            (button ("class" "button surface red") ("onclick" "clear_replying_to()") (text "cancel"))))
     (form
         ("class" "card flex flex_row items_center gap_2")
         ("onsubmit" "create_message(event)")

app/templates_src/components.lisp

@@ -41,10 +41,11 @@
 (text "{%- endif %}")
 (text "{%- endmacro %}")
 
-(text "{% macro message(message, is_pinned=false) -%}")
+(text "{% macro message(message, replying_to=false, is_pinned=false, hide_actions=false) -%}")
 (div
     ("class" "flex w_full gap_ch message {%- if user.id == message.owner %} justify_right mine {%- endif %}")
-    ("id" "message_{{ message.id }}")
+    ("id" "{% if not hide_actions -%} message_{{ message.id }} {%- endif %}")
+    (text "{% if not hide_actions -%}")
     (div
         ("class" "dropdown hidden")
         (button
@@ -61,6 +62,11 @@
                 (text "pin"))
             (text "{%- endif %}")
 
+            (button
+                ("class" "button surface")
+                ("onclick" "reply_to_message('{{ message.id }}')")
+                (text "reply"))
+
             (text "{% if message.owner == user.id -%}")
             (button
                 ("class" "button surface")
@@ -71,6 +77,7 @@
                 ("onclick" "delete_message('{{ message.id }}')")
                 (text "delete"))
             (text "{%- endif %}")))
+    (text "{%- endif %}")
 
     (div
         ("class" "body no_p_margin")
@@ -101,6 +108,12 @@
         ("href" "/@{{ message.owner }}?redirect=true")
         ("target" "_blank")
         (text "{{ self::avatar(id=message.owner) }}")))
+
+(text "{% if replying_to -%}")
+(div
+    ("style" "transform: scale(0.8); opacity: 75%; width: 110%")
+    (text "{{ self::message(message=replying_to, hide_actions=true) }}"))
+(text "{%- endif %}")
 (text "{%- endmacro %}")
 
 (text "{% macro theme(user, theme_preference) -%} {% if user %} {% if user.settings.theme_hue -%}")

app/templates_src/message.lisp

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

app/templates_src/messages.lisp

@@ -1,6 +1,6 @@
 (text "{%- import \"components.lisp\" as components -%}")
 (text "{% for message in messages -%}")
-(text "{{ components::message(message=message, is_pinned=message.id in pins) }}")
+(text "{{ components::message(message=message[0], replying_to=message[1], is_pinned=message[0].id in pins) }}")
 (text "{%- endfor %}")
 
 (div