Refactor comments, still

assets/controllers/comments_mercure_controller.js

@@ -1,14 +1,23 @@
 import { Controller } from "@hotwired/stimulus";
+import { getComponent } from "@symfony/ux-live-component";
 
 export default class extends Controller {
   static values  = { coordinate: String }
   static targets = ["list", "loading"]
 
-  connect() {
-    this._liveRoot = this.element.closest(
-      '[data-controller~="live"]'
-    );
+  async connect() {
+    // this.element IS the Live root now
+    this.component = await getComponent(this.element);
 
+    // Optional: hook for spinner polish
+    this.component.on('render:started', () => this._showLoading());
+    this.component.on('render:finished', () => this._hideLoading());
+
+    // Initial render from cache so UI isn’t empty
+    this._showLoading();
+    await this.component.render();
+
+    // Subscribe to Mercure and re-render on each ping
     const hubUrl = window.MercureHubUrl || document.querySelector('meta[name="mercure-hub"]')?.content;
     if (!hubUrl) return;
 
@@ -16,21 +25,23 @@ export default class extends Controller {
     url.searchParams.append('topic', `/comments/${this.coordinateValue}`);
 
     this.es = new EventSource(url.toString());
-    this.es.onmessage = (event) => this._pushToLive(event.data);
+    this.es.onmessage = async (msg) => {
+      this._showLoading();
+      this.component.set('payloadJson', JSON.stringify(msg.data));
+      await this.component.render(); // Live re-hydrates from your server/cache
+    };
   }
 
   disconnect() {
-    if (this.es) try { this.es.close(); } catch {}
+    try { this.es?.close(); } catch {}
   }
 
-  _pushToLive(jsonString) {
-    if (!this._liveRoot) return;
-    // Find the hidden input bound to the LiveProp
-    const input = this._liveRoot.querySelector('input[type="hidden"][data-model="payloadJson"]');
-    if (!input) return;
-
-    // Set value and dispatch an 'input' event so Live updates & re-renders
-    input.value = jsonString;
-    input.dispatchEvent(new Event('change', { bubbles: true }));
+  _showLoading() {
+    if (this.hasLoadingTarget) this.loadingTarget.style.display = '';
+    if (this.hasListTarget)    this.listTarget.style.opacity = '0.6';
+  }
+  _hideLoading() {
+    if (this.hasLoadingTarget) this.loadingTarget.style.display = 'none';
+    if (this.hasListTarget)    this.listTarget.style.opacity = '';
   }
 }

templates/components/Organisms/Comments.html.twig

@@ -1,65 +1,61 @@
-<div
-    {{ attributes }}
-    data-comments-coordinate="{{ current }}">
-
-    <input type="hidden"
-           data-model="payloadJson"
-           value="{{ payloadJson|default('') }}" />
-
-    <div
-        class="comments"
-        data-controller="comments-mercure"
-        data-comments-mercure-coordinate-value="{{ current }}"
-        data-comments-mercure-target="root"
-        id="comments-{{ current|e('html_attr') }}">
+{% set existing = attributes.all()['data-controller'] ?? '' %}
+{% set merged   = (existing ? existing ~ ' ' : '') ~ 'comments-mercure' %}
 
-        {% if loading %}
-            <div class="comments-loading" data-comments-mercure-target="loading">Loading comments…</div>
-        {% endif %}
-        <div class="comments-list" data-comments-mercure-target="list" {% if loading %}style="display:none"{% endif %}>
-            {% for item in list %}
-                <div class="card comment {% if item.kind is defined and item.kind == '9735' %}zap-comment{% endif %}">
-                    <div class="metadata">
-                        {% if item.kind != '9735' %}
-                            <twig:Molecules:UserFromNpub ident="{{ item.pubkey }}" :user="authorsMetadata[item.pubkey]" />
-                        {% elseif zappers[item.id] %}
-                            <twig:Molecules:UserFromNpub ident="{{ zappers[item.id]  }}" :user="authorsMetadata[zappers[item.id]]" />
-                        {% else %}
-                            <p><em>Unknown</em></p>
-                        {% endif %}
-                        <small>{{ item.created_at|date('F j Y') }}</small>
-                    </div>
+<div
+    {{ attributes.add('data-controller', merged) }}
+    data-comments-mercure-coordinate-value="{{ current }}"
+    data-comments-mercure-target="loading"
+    data-comments-mercure-target="list"
+    id="comments-{{ current|e('html_attr') }}"
+    class="comments"
+>
 
-                    <div class="card-body">
-                        {% if item.kind is defined and item.kind == '9735' %}
-                            <div class="zap-amount">
-                                {% if zapAmounts[item.id] is defined %}
-                                    <strong>{{ zapAmounts[item.id] }} sat</strong>
-                                {% else %}
-                                    <em>Zap</em>
-                                {% endif %}
-                            </div>
-                        {% endif %}
-                        <twig:Atoms:Content content="{{ item.content }}" />
-                    </div>
+    {% if loading %}
+        <div class="comments-loading" data-comments-mercure-target="loading">Loading comments…</div>
+    {% endif %}
+    <div class="comments-list" data-comments-mercure-target="list" {% if loading %}style="display:none"{% endif %}>
+        {% for item in list %}
+            <div class="card comment {% if item.kind is defined and item.kind == '9735' %}zap-comment{% endif %}">
+                <div class="metadata">
+                    {% if item.kind != '9735' %}
+                        <twig:Molecules:UserFromNpub ident="{{ item.pubkey }}" :user="authorsMetadata[item.pubkey]" />
+                    {% elseif zappers[item.id] %}
+                        <twig:Molecules:UserFromNpub ident="{{ zappers[item.id]  }}" :user="authorsMetadata[zappers[item.id]]" />
+                    {% else %}
+                        <p><em>Unknown</em></p>
+                    {% endif %}
+                    <small>{{ item.created_at|date('F j Y') }}</small>
+                </div>
 
-                    {# Display Nostr link previews if links detected #}
-                    {% if commentLinks[item.id] is defined and commentLinks[item.id]|length > 0 %}
-                        <div class="card-footer nostr-previews mt-3">
-                            <div class="preview-container">
-                                {% for link in commentLinks[item.id] %}
-                                    <div>
-                                        <twig:Molecules:NostrPreview preview="{{ link }}" />
-                                    </div>
-                                {% endfor %}
-                            </div>
+                <div class="card-body">
+                    {% if item.kind is defined and item.kind == '9735' %}
+                        <div class="zap-amount">
+                            {% if zapAmounts[item.id] is defined %}
+                                <strong>{{ zapAmounts[item.id] }} sat</strong>
+                            {% else %}
+                                <em>Zap</em>
+                            {% endif %}
                         </div>
                     {% endif %}
+                    <twig:Atoms:Content content="{{ item.content }}" />
                 </div>
-            {% else %}
-                <div class="no-comments">No comments yet.</div>
-            {% endfor %}
-        </div>
 
+                {# Display Nostr link previews if links detected #}
+                {% if commentLinks[item.id] is defined and commentLinks[item.id]|length > 0 %}
+                    <div class="card-footer nostr-previews mt-3">
+                        <div class="preview-container">
+                            {% for link in commentLinks[item.id] %}
+                                <div>
+                                    <twig:Molecules:NostrPreview preview="{{ link }}" />
+                                </div>
+                            {% endfor %}
+                        </div>
+                    </div>
+                {% endif %}
+            </div>
+        {% else %}
+            <div class="no-comments">No comments yet.</div>
+        {% endfor %}
     </div>
+
 </div>