add: message replies

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