# HG changeset patch
# User Goffi <goffi@goffi.org>
# Date 1751643202 -7200
# Node ID f7a4345818726b402cf2e14e4961520d34026398
# Parent  a5588ea3bcd68fb2c5df1d3a1d1d05794604f333
chat: Add forward, rich editing and extra recipients:

- There is a new "forward" menu in message. For now, a simple prompt ask for recipient JID.
- A new "extra" menu is available next to input field. Inside there are 2 items for now:
  add extra recipient, and toggle rich edit mode.
- Extra recipient option add a field to add an email-like "to", "cc" or "bcc" recipients.
- Rich edit let use rich styling such as bold, italic, underline, etc.

rel 461

diff -r a5588ea3bcd6 -r f7a434581872 sat_templates/templates/bulma/chat/chat.html
--- a/sat_templates/templates/bulma/chat/chat.html	Fri Jul 04 12:41:07 2025 +0200
+++ b/sat_templates/templates/bulma/chat/chat.html	Fri Jul 04 17:33:22 2025 +0200
@@ -6,7 +6,7 @@
 {% block title %}{{ target_jid }} - {{ super() }}{% endblock %}
 {% block body %}
     {{ icon_defs(
-   "check", "comment-dots", "ellipsis", "lock", "paperclip", "pencil", "quote-left", "reply", "regular face-smile", "regular trash-can", "share-nodes", "unlock"
+   "check", "comment-dots", "ellipsis", "ellipsis-vertical", "regular envelope", "lock", "paperclip", "pencil", "pen-to-square", "quote-left", "reply", "regular face-smile", "regular share-from-square", "regular trash-can", "share-nodes", "unlock"
     ) }}
 
 
diff -r a5588ea3bcd6 -r f7a434581872 sat_templates/templates/bulma/chat/extra_menu.html
--- a/sat_templates/templates/bulma/chat/extra_menu.html	Fri Jul 04 12:41:07 2025 +0200
+++ b/sat_templates/templates/bulma/chat/extra_menu.html	Fri Jul 04 17:33:22 2025 +0200
@@ -19,5 +19,10 @@
                 </a>
             </li>
         {% endif %}
+        <li class="action_forward">
+            <a href="#" class="">
+                {{ icon('regular share-from-square', cls='icon is-small') }} {% trans %}Forward{% endtrans %}
+            </a>
+        </li>
     </ul>
 </div>
diff -r a5588ea3bcd6 -r f7a434581872 sat_templates/templates/bulma/chat/extra_recipient_field.html
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/sat_templates/templates/bulma/chat/extra_recipient_field.html	Fri Jul 04 17:33:22 2025 +0200
@@ -0,0 +1,26 @@
+<div class="recipient-field field has-addons mb-2">
+    <div class="control">
+        <div class="select">
+            {% set selected = selected|default('to') %}
+            <select>
+                <option value="to" {% if selected == 'to' %}selected{% endif %}>
+                    {% trans %}To{% endtrans %}
+                </option>
+                <option value="cc" {% if selected == 'cc' %}selected{% endif %}>
+                    {% trans %}Cc{% endtrans %}
+                </option>
+                <option value="bcc" {% if selected == 'bcc' %}selected{% endif %}>
+                    {% trans %}Bcc{% endtrans %}
+                </option>
+            </select>
+        </div>
+    </div>
+    <div class="control is-expanded">
+        <input class="input" type="text" placeholder="{{ _('Recipient JID') }}">
+    </div>
+    <div class="control">
+        <button class="button delete-action" title="{% trans %}Remove{% endtrans %}">
+            <span class="delete"></span>
+        </button>
+    </div>
+</div>
diff -r a5588ea3bcd6 -r f7a434581872 sat_templates/templates/bulma/chat/input_extra_menu.html
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/sat_templates/templates/bulma/chat/input_extra_menu.html	Fri Jul 04 17:33:22 2025 +0200
@@ -0,0 +1,18 @@
+<div class="menu extra-menu-popup">
+    <ul class="menu-list">
+        <li class="action_toggle_rich_editor">
+            <a href="#">
+                {% if rich_edit %}
+                    {{ icon('pencil', cls='icon is-small') }} {% trans %}Switch to Simple Edition{% endtrans %}
+                {% else %}
+                    {{ icon('pen-to-square', cls='icon is-small') }} {% trans %}Switch to Rich Edition{% endtrans %}
+                {% endif %}
+            </a>
+        </li>
+        <li class="action_toggle_extra_recipients">
+            <a href="#">
+                {{ icon('regular envelope', cls='icon is-small') }} {% trans %}Add Recipients{% endtrans %}
+            </a>
+        </li>
+    </ul>
+</div>
diff -r a5588ea3bcd6 -r f7a434581872 sat_templates/templates/bulma/chat/message_input.html
--- a/sat_templates/templates/bulma/chat/message_input.html	Fri Jul 04 12:41:07 2025 +0200
+++ b/sat_templates/templates/bulma/chat/message_input.html	Fri Jul 04 17:33:22 2025 +0200
@@ -20,8 +20,42 @@
             </div>
         </div>
 
+        <!-- Rich Editor Toolbar -->
+        <div id="rich-edit-toolbar" class="field is-grouped is-grouped-multiline is-hidden">
+            <div class="control">
+                <button class="rich-editor-btn button" type="button" data-action="bold">
+                    <span class="icon"><i class="fas fa-bold fa-sm"></i></span>
+                </button>
+            </div>
+            <div class="control">
+                <button class="rich-editor-btn button" type="button" data-action="italic">
+                    <span class="icon"><i class="fas fa-italic fa-sm"></i></span>
+                </button>
+            </div>
+            <div class="control">
+                <button class="rich-editor-btn button" type="button" data-action="underline">
+                    <span class="icon"><i class="fas fa-underline fa-sm"></i></span>
+                </button>
+            </div>
+            <div class="control">
+                <button class="rich-editor-btn button" type="button" data-action="list-bullet">
+                    <span class="icon"><i class="fas fa-list-ul fa-sm"></i></span>
+                </button>
+            </div>
+            <div class="control">
+                <button class="rich-editor-btn button" type="button" data-action="list-ordered">
+                    <span class="icon"><i class="fas fa-list-ol fa-sm"></i></span>
+                </button>
+            </div>
+            <div class="control">
+                <button class="rich-editor-btn button" type="button" data-action="link">
+                    <span class="icon"><i class="fas fa-link fa-sm"></i></span>
+                </button>
+            </div>
+        </div>
 
-        <div class="field has-addons">
+        <!-- Main Input -->
+        <div class="field has-addons is-align-items-flex-end">
             <div class="control">
                 <button id="attach-button" class="button">
                     <span class="icon is-small">
@@ -30,8 +64,16 @@
                 </button>
                 <input id="file-input" type="file" multiple="true" style="display: none" />
             </div>
+            <div class="control">
+                <button id="input-extra-button" class="button">
+                    <span class="icon is-small">
+                    {{ icon('ellipsis-vertical') }}
+                    </span>
+                </button>
+            </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 id="message_input_area_rich" class="is-hidden"></div>
             </div>
             <div class="control">
                 <button class="button is-primary">
diff -r a5588ea3bcd6 -r f7a434581872 sat_templates/templates/bulma/static/chat.css
--- a/sat_templates/templates/bulma/static/chat.css	Fri Jul 04 12:41:07 2025 +0200
+++ b/sat_templates/templates/bulma/static/chat.css	Fri Jul 04 17:33:22 2025 +0200
@@ -57,8 +57,21 @@
     padding: 1rem;
 }
 
-.chat-input button {
+.chat-input button, .chat-input input, .chat-input select {
+    height: auto;
+    min-height: 3rem;
+}
+
+#message_input_area, #message_input_area_rich {
     height: 100%;
+    min-height: 3rem;
+}
+
+div.ql-editor {
+    margin: 0 2px;
+    min-height: 3rem;
+    border: 1px lightgray solid;
+    padding: 11px;
 }
 
 .media.chat-message {
@@ -74,6 +87,7 @@
     overflow-wrap: anywhere;
     background-color: #f5f5f5;
     transition: background-color 0.2s, border-left 0.2s;
+    list-style-position: inside;
 }
 .message-core:hover, .message-core.has-popup-focus {
     background-color: #e8e8e8;