Implement reactions and image sync

core/templates/partials/compose-panel.html

@@ -293,6 +293,17 @@
           {% else %}
             <p class="compose-body compose-image-fallback is-hidden">(no text)</p>
           {% endif %}
+          {% if msg.reactions %}
+            <div class="compose-reactions" aria-label="Message reactions">
+              {% for reaction in msg.reactions %}
+                <span
+                  class="compose-reaction-chip"
+                  title="{{ reaction.actor|default:'Unknown' }} via {{ reaction.source_service|default:'unknown'|upper }}">
+                  {{ reaction.emoji }}
+                </span>
+              {% endfor %}
+            </div>
+          {% endif %}
           <p class="compose-msg-meta">
             {{ msg.display_ts }}{% if msg.author %} · {{ msg.author }}{% endif %}
             {% if msg.read_ts %}
@@ -602,6 +613,25 @@
     white-space: pre-wrap;
     word-break: break-word;
   }
+  #{{ panel_id }} .compose-reactions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.26rem;
+    margin: 0 0 0.28rem 0;
+  }
+  #{{ panel_id }} .compose-reaction-chip {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 1.55rem;
+    height: 1.35rem;
+    padding: 0 0.38rem;
+    border-radius: 0.8rem;
+    border: 1px solid rgba(0, 0, 0, 0.12);
+    background: rgba(255, 255, 255, 0.7);
+    font-size: 0.86rem;
+    line-height: 1;
+  }
   #{{ panel_id }} .compose-msg-meta,
   #{{ panel_id }} .compose-meta-line {
     color: #616161;