source: Klonkt/src/views/partials/fedi-node.ejs@ ef1853c

<%# Renders one fediverse thread node (n). Expects: n, t, canManageSite, _base, siteAvatar, formatDateTime, postSlug %>
<div class="comment-avatar">
  <% if (n.actor_icon) { %><img src="<%= avatar(n.actor_icon, 96) %>" alt="" loading="lazy">
  <% } else { %><span><%= (n.actor_name || '?').charAt(0).toUpperCase() %></span><% } %>
</div>
<div class="comment-body">
  <div class="comment-meta">
    <% if (n.actor_url) { %><a class="comment-author" href="<%= n.actor_url %>" rel="nofollow noopener" target="_blank"><%- emojiName(n.actor_name, n.actor_emoji_json) %></a>
    <% } else { %><span class="comment-author"><%- emojiName(n.actor_name, n.actor_emoji_json) %></span><% } %>
    <% if (n.actor_handle) { %><span class="fedi-handle"><%= n.actor_handle %></span><% } %>
    <% if (n.created_at) { %><span class="comment-time"><%= formatDateTime(n.created_at) %></span><% } %>
  </div>
  <div class="comment-content"><%- emojiHtml(n.content, n.emoji_json) %></div>
  <%# Rich replies: media on our own sent replies (attachments on the Note).
      Visitors see these too, and the reply editor (owner-only) may not render,
      so make sure the stylesheet is on the page either way. %>
  <% if (n.media && n.media.length) { %>
    <% if (!locals.__reAssets) { locals.__reAssets = 1; %><link rel="stylesheet" href="/assets/css/reply-editor.css"><% } %>
    <div class="re-reply-media">
      <% n.media.forEach(function (m) { %>
        <% if ((m.mediaType || '').indexOf('image/') === 0) { %>
          <a href="<%= m.url %>" target="_blank" rel="noopener"><img src="<%= m.url %>" alt="<%= m.name || '' %>" loading="lazy"></a>
        <% } else if ((m.mediaType || '').indexOf('audio/') === 0) { %>
          <audio controls preload="none" src="<%= m.url %>"></audio>
        <% } else { %>
          <video controls preload="metadata" src="<%= m.url %>"></video>
        <% } %>
      <% }); %>
    </div>
  <% } %>
  <div class="comment-actions">
    <% if (n.mine && typeof canManageSite !== 'undefined' && canManageSite && n.outboxId) { %>
      <form method="post" action="<%= _base %>/fediverse/<%= n.outboxId %>/delete" data-confirm="<%= t('fedi.delete_confirm') %>">
        <button type="submit" class="comment-delete-btn"><%= t('comments.delete') %></button>
      </form>
    <% } else if (!n.mine && typeof canManageSite !== 'undefined' && canManageSite && n.id && typeof postSlug !== 'undefined' && postSlug) { %>
      <%# Owner: like / boost / reply directly AS the site — no "your server" detour (it's your own site). %>
      <form method="post" action="<%= _base %>/posts/<%= postSlug %>/fedi-react" class="fedi-owner-react">
        <input type="hidden" name="interaction_id" value="<%= n.id %>">
        <input type="hidden" name="kind" value="like">
        <button type="submit" class="fedi-cact fedi-cact-like<%= n.acted_like ? ' is-on' : '' %>" title="<%= n.acted_like ? t('fedi.unlike_short') : t('fedi.like_short') %>" aria-label="<%= n.acted_like ? t('fedi.unlike_short') : t('fedi.like_short') %>"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 2.6l2.9 5.88 6.49.95-4.7 4.58 1.11 6.46L12 17.96l-5.8 3.06 1.1-6.46-4.69-4.58 6.49-.95z"/></svg></button>
      </form>
      <form method="post" action="<%= _base %>/posts/<%= postSlug %>/fedi-react" class="fedi-owner-react">
        <input type="hidden" name="interaction_id" value="<%= n.id %>">
        <input type="hidden" name="kind" value="boost">
        <button type="submit" class="fedi-cact fedi-cact-boost<%= n.acted_boost ? ' is-on' : '' %>" title="<%= n.acted_boost ? t('tl.unboost') : t('fedi.boost_short') %>" aria-label="<%= n.acted_boost ? t('tl.unboost') : t('fedi.boost_short') %>"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg></button>
      </form>
      <details class="fedi-owner-reply">
        <summary class="fedi-cact fedi-cact-reply" title="<%= t('fedi.remote_reply_short') %>" aria-label="<%= t('fedi.remote_reply_short') %>"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="9 17 4 12 9 7"/><path d="M20 18v-2a4 4 0 0 0-4-4H4"/></svg></summary>
        <%- include('reply-editor', {
          action: _base + '/posts/' + postSlug + '/fedi-reply',
          hiddenFields: [{ name: 'interaction_id', value: n.id }],
          placeholder: t('fedi.reply_ph'),
          submitLabel: t('fedi.send'),
          rows: 2,
          participants: n.participants || [],
        }) %>
      </details>
      <%# Owner moderation: report to their instance + remove (tombstoned: never comes back via re-delivery or thread-crawl). %>
      <form method="post" action="<%= _base %>/interactions/<%= n.id %>/report" class="fedi-owner-react" data-confirm="<%= t('fedi.mod_report_confirm') %>">
        <button type="submit" class="fedi-cact fedi-cact-report" title="<%= t('fedi.report_send') %>" aria-label="<%= t('fedi.report_send') %>"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z"/><line x1="4" y1="22" x2="4" y2="15"/></svg></button>
      </form>
      <form method="post" action="<%= _base %>/interactions/<%= n.id %>/remove" class="fedi-owner-react" data-confirm="<%= t('fedi.mod_remove_confirm') %>">
        <button type="submit" class="fedi-cact fedi-cact-remove" title="<%= t('comments.delete') %>" aria-label="<%= t('comments.delete') %>"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/><path d="M9 6V4a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2"/></svg></button>
      </form>
    <% } else if (n.noteId) { %>
      <%# Visitor: reply via YOUR OWN instance. Also on the site's own (mine) comments —
          those are dereferenceable Notes (/ap/notes/<id>) too; without this a visitor
          could not reply to the owner's comments at all (only the owner branches above
          catch mine-nodes for managers, so this else-if never renders for the owner). %>
      <button type="button" class="comment-reply-btn fedi-remote-reply-btn" data-fedi-uri="<%= n.noteId %>" data-fedi-ph="<%= t('fedi.remote_ph') %>">
        <svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="9 17 4 12 9 7"/><path d="M20 18v-2a4 4 0 0 0-4-4H4"/></svg>
        <%= t('fedi.remote_reply_short') %>
      </button>
    <% } %>
  </div>
  <% if (n.children && n.children.length) { %>
    <ol class="comment-replies">
      <% n.children.forEach(function(c){ %>
        <li class="comment comment-reply"><%- include('../partials/fedi-node', { n: c, t: t, canManageSite: (typeof canManageSite !== 'undefined' ? canManageSite : false), _base: _base, siteAvatar: (typeof siteAvatar !== 'undefined' ? siteAvatar : null), formatDateTime: formatDateTime, postSlug: (typeof postSlug !== 'undefined' ? postSlug : null) }) %></li>
      <% }); %>
    </ol>
  <% } %>
</div>