# HG changeset patch
# User Goffi <goffi@goffi.org>
# Date 1700662931 -3600
# Node ID 941e4006ab6ecbc9f6907945cd240c3cd3e253fb
# Parent  4e050f67c0794f378ca544d8104d1a23414cd3e5
bulma (message): reactions + fixes:

- add "reaction" button
- fix attachments display
- add reaction templates
- add reactions to messages
- fix "info" messages display

diff -r 4e050f67c079 -r 941e4006ab6e sat_templates/templates/bulma/chat/chat.html
--- a/sat_templates/templates/bulma/chat/chat.html	Wed Nov 22 15:22:10 2023 +0100
+++ b/sat_templates/templates/bulma/chat/chat.html	Wed Nov 22 15:22:11 2023 +0100
@@ -3,7 +3,7 @@
 {% block body %}
     {{ icon_defs(
     "lock-open", "lock-filled", "ok", "pencil", "dot-3", "share", "attach",
-    "paper-plane-empty", "doc", "download", "wrench", "eye"
+    "paper-plane-empty", "doc", "download", "wrench", "eye", "smile", "plus-circled"
     ) }}
 
     {# TODO: this should be done in a more generic way in dialog module #}
diff -r 4e050f67c079 -r 941e4006ab6e sat_templates/templates/bulma/chat/message.html
--- a/sat_templates/templates/bulma/chat/message.html	Wed Nov 22 15:22:10 2023 +0100
+++ b/sat_templates/templates/bulma/chat/message.html	Wed Nov 22 15:22:11 2023 +0100
@@ -1,7 +1,7 @@
 {% import 'components/avatar.html' as avatar with context %}
 
 <div id="{{msg.id}}" class="media is-chat-message msg_{{msg.type}} {{'own_msg' if msg.from_ == own_jid}}" style="padding: 0.5em;" role="listitem" aria-label="Chat Message">
-    {%- if msg.type != C.MESS_TYPE_INFO %}
+    {%- if msg.type != "info" %}
         {%- set author = identities[msg.from_].nicknames[0] | default(msg.from_) -%}
         <figure class="media-left pt-1">
             {{ avatar.avatar(msg.from_, "is-32x32") }}
@@ -9,7 +9,7 @@
     {% endif -%}
     <div class="media-content is-relative">
         <div class="content">
-            {%- if msg.type != C.MESS_TYPE_INFO %}
+            {%- if msg.type != "info" %}
                 <nav class="level is-mobile is-marginless is-size-7">
                     <div class="level-left has-text-weight-bold">
                         <div class="level-item">
@@ -36,7 +36,7 @@
                     </div>
                 </nav>
             {% endif -%}
-            <p class="msg_body has-whitespace-pre-wrap" id="msg_body_{{msg.id}}" style="margin: 0;">
+            <p class="msg_body has-whitespace-pre-wrap {{ "has-text-info" if msg.type=="info" }}" id="msg_body_{{msg.id}}" style="margin: 0;">
             {{- msg.html or (msg.text|e|urlize|safe) -}}
             </p>
 
@@ -45,26 +45,41 @@
             </div>
 
             <div id="actions_{{msg.id}}" class="level is-mobile actions mb-0">
-                <div class="level-right">
-                    {#{{ icon('share', cls='icon is-small action-button', id='msg_share_{{msg.id}}') }} #}
-                    {{ icon('dot-3', cls='icon is-small action-button', id='msg_actions_{{msg.id}}') }}
-                </div>
+                {#{{ icon('share', cls='icon is-small action-button', id='msg_share_{{msg.id}}') }} #}
+                {{ icon('smile', cls='icon is-small action-button reaction-button', id='msg_actions_{{msg.id}}') }}
+                {{ icon('dot-3', cls='icon is-small action-button extra-button', id='msg_actions_{{msg.id}}') }}
             </div>
             <div id="msg_reactions_{{msg.id}}" style="margin-top: 0.5em;">
-                <!-- Reactions will go here -->
+                {% if msg.extra.reactions is defined %}
+                    {% set reactions = msg.extra.get("reactions") %}
+                    {% include 'chat/reactions.html' %}
+                {% endif %}
             </div>
         {% if msg.attachments %}
             <div class="message-attachments pt-2">
                 {%- for attachment in msg.attachments %}
                     <figure class="image message-attachment">
-                        {%- if attachment.media_type|media_type_main == 'image' %}
-                            <img src="{{attachment.sources[0].url}}" alt="{{attachment.name}}">
-                        {%- else %}
-                            {{ icon('doc', cls='icon') }}
-                        {%- endif %}
-                        <figcaption class="has-text-centered is-size-7">
-                            <a href="{{attachment.sources[0].url if attachment.sources}}" target="_blank" class="has-text-grey">{{attachment.name}}</a>
-                        </figcaption>
+                        {%- if not attachment.url -%}
+                            <div class="notification is-warning">
+                                <div class="is-size-6 has-text-weight-semibold mb-1">
+                                    {% trans name=attachment.name %}Attachment: {{name}}{% endtrans %}
+                                </div>
+
+                                <div class="is-size-7 mb-1">
+                                    {% trans %}Cannot be opened as there are no sources available.{% endtrans %}
+                                </div>
+
+                            </div>
+                        {%- else -%}
+                            {%- if attachment.media_type|media_type_main == 'image' %}
+                                <img src="{{attachment.url}}" alt="{{attachment.name}}">
+                            {%- else %}
+                                {{ icon('doc', cls='icon') }}
+                            {%- endif %}
+                            <figcaption class="has-text-centered is-size-7">
+                                <a href="{{attachment.url}}" target="_blank" class="has-text-grey">{{attachment.name}}</a>
+                            </figcaption>
+                        {%- endif -%}
                     </figure>
                 {%- endfor %}
             </div>
diff -r 4e050f67c079 -r 941e4006ab6e sat_templates/templates/bulma/chat/reactions.html
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/sat_templates/templates/bulma/chat/reactions.html	Wed Nov 22 15:22:11 2023 +0100
@@ -0,0 +1,11 @@
+<div class="reactions-container is-flex-wrap-wrap">
+    {% for emoji, jids in reactions.items() %}
+        <div
+                class="reaction box is-shadowless is-inline-flex is-align-items-center my-1 ml-0 mr-2 px-2 py-1 is-size-6 has-background-light has-border is-not-selectable"
+                data-jids='{{jids|tojson}}'
+                >
+            <span class="emoji has-text-weight-semibold">{{ emoji }}</span>
+            <span class="counter">{{ jids|length }}</span>
+        </div>
+    {% endfor %}
+</div>
diff -r 4e050f67c079 -r 941e4006ab6e sat_templates/templates/bulma/chat/reactions_details.html
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/sat_templates/templates/bulma/chat/reactions_details.html	Wed Nov 22 15:22:11 2023 +0100
@@ -0,0 +1,12 @@
+{% import 'components/avatar.html' as avatar with context %}
+
+<div class="reacting-users-list">
+    {% for jid in reacting_jids %}
+        <div class="reacting-user-item is-flex is-align-items-center mb-2">
+            {{ avatar.avatar(jid, "is-24x24") }}
+            <span class="reacting-user-nickname ml-2">
+                {{ identities[jid].nicknames[0] if identities[jid].nicknames else jid }}
+            </span>
+        </div>
+    {% endfor %}
+</div>
diff -r 4e050f67c079 -r 941e4006ab6e sat_templates/templates/bulma/components/search_item.html
--- a/sat_templates/templates/bulma/components/search_item.html	Wed Nov 22 15:22:10 2023 +0100
+++ b/sat_templates/templates/bulma/components/search_item.html	Wed Nov 22 15:22:11 2023 +0100
@@ -23,4 +23,3 @@
         {% block call %}{% endblock %}
     </div>
 </div>
-p
diff -r 4e050f67c079 -r 941e4006ab6e sat_templates/templates/bulma/components/url_preview.html
--- a/sat_templates/templates/bulma/components/url_preview.html	Wed Nov 22 15:22:10 2023 +0100
+++ b/sat_templates/templates/bulma/components/url_preview.html	Wed Nov 22 15:22:11 2023 +0100
@@ -1,7 +1,7 @@
 
 {% if url_preview %}
 
-<div id="url-preview" class="box m-2 url-preview has-background-light">
+<div id="url-preview" class="box my-2 url-preview has-background-light">
   <div class="has-text-right">
     <span class="tag is-dark is-rounded is-fullwidth-mobile has-text-centered-mobile mb-2">
       {% trans %}Preview{% endtrans %}
diff -r 4e050f67c079 -r 941e4006ab6e sat_templates/templates/bulma/components/url_preview_control.html
--- a/sat_templates/templates/bulma/components/url_preview_control.html	Wed Nov 22 15:22:10 2023 +0100
+++ b/sat_templates/templates/bulma/components/url_preview_control.html	Wed Nov 22 15:22:11 2023 +0100
@@ -1,5 +1,5 @@
 {% block url_preview %}
-<div class="notification is-info is-light m-5">
+<div class="notification is-info is-light my-5">
     <div class="content">
         <h4 class="title is-4">{% trans %}URL Preview{% endtrans %}</h4>
         <p class="mb-4">{% trans %}To protect your privacy, we don't automatically fetch URL previews. If you want to preview this URL, just hit the "Fetch Preview" button. You can customize this preference in your settings.{% endtrans %}</p>
diff -r 4e050f67c079 -r 941e4006ab6e sat_templates/templates/bulma/static/chat.css
--- a/sat_templates/templates/bulma/static/chat.css	Wed Nov 22 15:22:10 2023 +0100
+++ b/sat_templates/templates/bulma/static/chat.css	Wed Nov 22 15:22:11 2023 +0100
@@ -22,7 +22,7 @@
     padding-left: 1.5em;
 }
 
-.is-chat-message:hover {
+.is-chat-message:hover, .chat-message-highlight {
     background-color: #f5f5f5;
     box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
 }
@@ -42,13 +42,15 @@
     opacity: 0;
 }
 
-.is-chat-message:hover .actions {
+.is-chat-message:hover .actions, .chat-message-highlight .actions {
     opacity: 1;
 }
 
 .action-button {
     box-sizing: border-box;
     margin: 0 0.2rem;
+    user-select: none;
+    z-index: 10;
 }
 
 .action-button:hover {
diff -r 4e050f67c079 -r 941e4006ab6e sat_templates/templates/bulma/static/styles.css
--- a/sat_templates/templates/bulma/static/styles.css	Wed Nov 22 15:22:10 2023 +0100
+++ b/sat_templates/templates/bulma/static/styles.css	Wed Nov 22 15:22:11 2023 +0100
@@ -628,6 +628,19 @@
   }
 }
 
+/*******************
+ * common features *
+ ******************/
+
+.reaction {
+    border-radius: 12px; /* Rounded background */
+    cursor: pointer; /* Pointer cursor for the entire reaction */
+    border: 1px solid #dbdbdb; /* Discreet but visible border */
+}
+
+.reaction .emoji {
+    margin-right: .5rem; /* Space between emoji and counter using rem unit */
+}
 
 /**************
  * animations *
@@ -772,3 +785,12 @@
 .animation-reverse {
   animation-direction: reverse;
 }
+
+/***************
+ * third party *
+ **************/
+
+emoji-picker {
+  width: 100%;
+  /* height: 30rem; */
+}