# HG changeset patch
# User Goffi <goffi@goffi.org>
# Date 1746484661 -7200
# Node ID 66f98ee041d89c55d81703f514d0f84f4db49f9d
# Parent  65c53ec5e7776c7c86e93b8556bd3a5defd5326a
chat: add UI for replies/threads:

rel 457

diff -r 65c53ec5e777 -r 66f98ee041d8 sat_templates/templates/bulma/chat/chat.html
--- a/sat_templates/templates/bulma/chat/chat.html	Fri Apr 11 21:32:05 2025 +0200
+++ b/sat_templates/templates/bulma/chat/chat.html	Tue May 06 00:37:41 2025 +0200
@@ -6,7 +6,7 @@
 {% block title %}{{ target_jid }} - {{ super() }}{% endblock %}
 {% block body %}
     {{ icon_defs(
-   "share-nodes", "ellipsis","regular face-smile", "quote-left", "paperclip", "pencil", "regular trash-can"
+   "comment-dots", "ellipsis", "paperclip", "pencil", "quote-left", "reply", "regular face-smile", "regular trash-can", "share-nodes"
     ) }}
 
 
@@ -96,40 +96,15 @@
                     {% endfor %}
                 </div>
 
-            <!-- Attachments -->
-            <div id="attachments" class="box has-background-white is-flex is-flex-grow-0 is-flex-shrink-0 is-align-items-center is-overflow-auto is-contracted">
-                {% for file in attachments %}
-                    {% include 'chat/attachment_preview.html' %}
-                {% endfor %}
-            </div>
 
-            <div id="message_input" class="chat-input">
-                <div class="field has-addons">
-                    <div class="control">
-                        <button id="attach-button" class="button">
-                            <span class="icon is-small">
-                            {{ icon('paperclip') }}
-                            </span>
-                        </button>
-                        <input id="file-input" type="file" multiple="true" style="display: none" />
-                    </div>
-                    <div class="control is-expanded">
-                     <textarea id="message_input_area" class="textarea" name="message_input_area" type="text" rows="1" placeholder="{{_("Type your message…")}}"></textarea>
-                    </div>
-                    <div class="control">
-                        <button class="button is-primary">
-                            <span class="icon is-small">
-                                <i class="fas fa-paper-plane"></i>
-                            </span>
-                            <span class="is-hidden-mobile">Send</span>
-                        </button>
-                    </div>
-                </div>
+            <div id="input-panel-area">
+                {% include 'chat/message_input.html' %}
             </div>
 
         </div>
 
 
+
         <!-- Right Panel -->
 
         <div class="column is-2-desktop is-3-tablet chat-details {{ 'is-hidden' if chat_type != 'group' }}" id="right_panel">
diff -r 65c53ec5e777 -r 66f98ee041d8 sat_templates/templates/bulma/chat/message.html
--- a/sat_templates/templates/bulma/chat/message.html	Fri Apr 11 21:32:05 2025 +0200
+++ b/sat_templates/templates/bulma/chat/message.html	Tue May 06 00:37:41 2025 +0200
@@ -9,9 +9,10 @@
 <div
     id="{{msg.id}}"
     class="media chat-message msg_{{msg.type}} {{'own_msg' if own_msg}} {{ 'is-retracted' if msg.extra.retracted }}"
-    role="listitem"
     aria-label="{{ 'Retracted Message' if msg.extra.retracted else 'Chat Message' }}"
+    data-from='{{msg.from_}}'
     {% if msg.extra.editions %}data-editions='{{msg.extra.editions|tojson}}'{% endif %}
+    {% if msg.extra.thread %}data-thread='{{msg.extra.thread}}'{% endif %}
     >
     {%- if msg.type != "info" %}
         {%- set author = identities[msg.from_].nicknames[0] | default(msg.from_) -%}
@@ -27,6 +28,9 @@
                     <span class="author" id="msg_author_{{msg.id}}">{{author}}</span>
                     <span class="date" id="msg_date_{{msg.id}}">{{(msg.extra.updated or msg.timestamp)|date_fmt('short', tz_name=tz_name)}}</span>
                     <span id="status_icons_{{msg.id}}" class="status-icons level-item has-padding-left">
+                        {% if msg.reply_to or msg.extra.thread %}
+                            {{ icon('comment-dots', cls='icon is-small message-thread') }}
+                        {% endif %}
                         {% if msg.extra.editions %}
                             {{ icon('pencil', cls='icon is-small message-editions') }}
                         {% endif %}
@@ -65,8 +69,9 @@
                    <div class="level-left"></div>
                     <div class="level-right">
                         {# {{ icon('share-nodes', cls='icon is-small action-button', id='msg_share_' + msg.id) }} #}
-                        {{ icon('regular face-smile', cls='icon is-small action-button reaction-button', id='msg_actions_' + msg.id) }}
-                        {{ icon('ellipsis', cls='icon is-small action-button extra-button', id='msg_actions_' + msg.id) }}
+                        {{ icon('reply', cls='icon is-small action-button reply-button')}}
+                        {{ icon('regular face-smile', cls='icon is-small action-button reaction-button') }}
+                        {{ icon('ellipsis', cls='icon is-small action-button extra-button') }}
                     </div>
                 </div>
 
diff -r 65c53ec5e777 -r 66f98ee041d8 sat_templates/templates/bulma/chat/message_input.html
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/sat_templates/templates/bulma/chat/message_input.html	Tue May 06 00:37:41 2025 +0200
@@ -0,0 +1,46 @@
+
+<div id="input-panel">
+    <!-- Attachments -->
+    <div id="attachments" class="box has-background-white is-flex is-flex-grow-0 is-flex-shrink-0 is-align-items-center is-overflow-auto is-contracted">
+        {% for file in attachments %}
+            {% include 'chat/attachment_preview.html' %}
+        {% endfor %}
+    </div>
+
+    <div id="message_input" class="chat-input">
+
+        <!-- Reply Indicator -->
+        <div id="reply-to" class="mb-3 is-hidden">
+            <div class="is-flex is-justify-content-space-between is-align-items-center">
+                <div>
+                    <span class="is-size-6"><strong>{% trans %}Replying to :{% endtrans %}</strong></span>
+                    <div id="reply-to_message" class="mt-1 ml-1 is-size-7"></div>
+                </div>
+                <button id="cancel_reply_btn" class="button is-small is-danger is-rounded">Cancel</button>
+            </div>
+        </div>
+
+
+        <div class="field has-addons">
+            <div class="control">
+                <button id="attach-button" class="button">
+                    <span class="icon is-small">
+                    {{ icon('paperclip') }}
+                    </span>
+                </button>
+                <input id="file-input" type="file" multiple="true" style="display: none" />
+            </div>
+            <div class="control is-expanded">
+             <textarea id="message_input_area" class="textarea" name="message_input_area" type="text" rows="1" placeholder="{{_("Type your message…")}}"></textarea>
+            </div>
+            <div class="control">
+                <button class="button is-primary">
+                    <span class="icon is-small">
+                        <i class="fas fa-paper-plane"></i>
+                    </span>
+                    <span id="send_button">{% trans %}Send{% endtrans %}</span>
+                </button>
+            </div>
+        </div>
+    </div>
+</div>
diff -r 65c53ec5e777 -r 66f98ee041d8 sat_templates/templates/bulma/chat/thread_panel.html
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/sat_templates/templates/bulma/chat/thread_panel.html	Tue May 06 00:37:41 2025 +0200
@@ -0,0 +1,7 @@
+<nav class="panel has-background-light">
+    <p class="panel-heading">Thread View</p>
+    <div class="panel-block mt-1" >
+        <div id="thread-messages" class="is-full-width">
+        </div>
+    </div>
+</nav>
diff -r 65c53ec5e777 -r 66f98ee041d8 sat_templates/templates/bulma/static/chat.css
--- a/sat_templates/templates/bulma/static/chat.css	Fri Apr 11 21:32:05 2025 +0200
+++ b/sat_templates/templates/bulma/static/chat.css	Tue May 06 00:37:41 2025 +0200
@@ -251,3 +251,13 @@
     width: 9rem;
     height: 6rem;
 }
+
+
+/* Reply to indicator */
+#reply-to {
+    background-color: var(--message-background);
+    border-left: 4px solid #3273dc;
+    padding: 0.5rem;
+    margin-bottom: 1rem;
+    border-radius: 0.25rem;
+}
diff -r 65c53ec5e777 -r 66f98ee041d8 sat_templates/templates/bulma/static/styles.css
--- a/sat_templates/templates/bulma/static/styles.css	Fri Apr 11 21:32:05 2025 +0200
+++ b/sat_templates/templates/bulma/static/styles.css	Tue May 06 00:37:41 2025 +0200
@@ -23,6 +23,10 @@
     height: 100%;
 }
 
+.is-full-width {
+    width: 100%;
+}
+
 .navbar-item {
     gap: 0;
 }