source: Klonkt/src/views/partials/msg-item.ejs@ 691311f

<% if (n.type === 'thread') { %>
<%
           var _tseen = (typeof seen !== 'undefined' && seen) ? seen : 0;
           // Een draad is nieuw zodra EEN bericht erin nieuw is.
           var _tnew = !!_tseen && (n.messages || []).some(function (m) {
             return m.created_at && Date.parse(m.created_at) > _tseen;
           });
           var _tpeople = (n.people || []).map(function (p) { return p.name || p.handle || '?'; });
           // Alleen jij aan het woord: dan is de tegenpartij het adres waaraan
           // je schreef, niet een lege naam.
           var _tto = ((n.messages || []).find(function (m) { return m.to_handle; }) || {}).to_handle;
           var _tlabel = _tpeople.length ? _tpeople.join(', ') : (_tto || t('msg.you'));
      %>
        <li class="msg-item msg-thread<%= _tnew ? ' is-new' : '' %>" data-kind="conv" data-who="<%= (_tpeople.join(' ') + ' ' + (_tto || '')).toLowerCase() %>">
          <div class="msg-thread-head">
            <%# Tegenpartij en aantal in EEN uitsparing: het is een label bij het
                gesprek, geen kop erboven. Zo houdt de inhoud de ruimte. %>
            <span class="msg-thread-who"><%= _tlabel %><% if (n.count > 1) { %><span class="msg-thread-count"><%= n.count %></span><% } %></span>
            <% if (_tnew) { %><span class="msg-new" title="<%= t('msg.new') %>"></span><% } %>
            <%# De context bij de draad: waar gaat dit gesprek over? Zonder deze
                link is een antwoord in een lijst niet te plaatsen. %>
            <% if (n.post) { %>
              <a class="msg-thread-post" href="/<%= n.post.slug %>">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
                <%= n.post.title || n.post.slug %>
              </a>
            <% } %>
          </div>
          <ul class="msg-thread-msgs">
            <% (n.messages || []).forEach(function (m) { %><%- include('msg-item', { n: m, seen: _tseen, inThread: true }) %><% }); %>
          </ul>
          <%# Antwoorden vanuit de draad zelf. Ingeklapt, want een open editor
              onder elk gesprek maakt de lijst onleesbaar -- juist het probleem
              dat deze weergave moest oplossen. De route kiest het pad: een
              draad aan een post krijgt een reply, een draad aan een persoon een
              direct bericht. %>
          <% var _rt = n.replyTo || {}; var _kan = canMutate && ((_rt.interactionId && _rt.postSlug) || _rt.actorUri); %>
          <% if (_kan) { %>
            <div class="msg-thread-foot">
              <details class="msg-reply">
                <summary><%= t('fedi.reply') %></summary>
                <div class="msg-reply-form">
                  <%- include('../partials/reply-editor', {
                    action: (typeof siteUrlBase !== 'undefined' ? siteUrlBase : '') + '/messages/reply',
                    hiddenFields: [
                      { name: 'interaction_id', value: _rt.interactionId || '' },
                      { name: 'post_slug', value: _rt.postSlug || '' },
                      { name: 'to', value: _rt.actorUri || '' },
                    ],
                    placeholder: t('fedi.reply_ph'),
                    submitLabel: t('fedi.reply'),
                    rows: 2,
                  }) %>
                </div>
              </details>
              <%# De zwaai blijft een eigen knop: het is geen antwoord maar een
                  seintje (FEP-633c), en die twee horen niet op een hoop. %>
              <% if (_rt.actorUri) { %>
                <form method="post" action="<%= (typeof siteUrlBase !== 'undefined' ? siteUrlBase : '') %>/messages/quick-reply" class="msg-wave">
                  <input type="hidden" name="to" value="<%= _rt.actorUri %>">
                  <button class="btn small" name="text" value="&#128075;" title="<%= t('msg.wave_back') %>">&#128075;</button>
                </form>
              <% } %>
            </div>
          <% } %>
        </li>
<% } else { %>
<%
           var _seen = (typeof seen !== 'undefined' && seen) ? seen : 0;
           var _t = n.type === 'announce' ? 'boost' : n.type; // reply|mention|report|like|boost|follow|sent
           var _new = _seen && n.created_at ? (Date.parse(n.created_at) > _seen) : false;
           var _who = n.name || n.handle || '';
           var _priv0 = (n.visibility === 'followers' || n.visibility === 'direct');
           // Emmers: Activiteit = likes/boosts/follows/polls, Moderatie =
           // reports, en al het overige is gesprek. De oude emmers 'msgs' en
           // 'sent' bestaan niet meer sinds Berichten, Gesprekken en Verzonden
           // samenvielen -- en dat is geen cosmetische hernoeming: een
           // gespreksregel die om wat voor reden dan ook geen draad werd (geen
           // post, geen herkenbare tegenpartij) hield anders een data-kind
           // waarvoor geen chip meer bestond, en was daarmee onder ELKE chip
           // behalve Alles onzichtbaar.
           var _kind = (_t === 'like' || _t === 'boost' || _t === 'follow' || _t === 'poll_done') ? 'act'
             : _t === 'report' ? 'mod'
             : 'conv';
           // Binnen een draad is dit geen zelfstandige regel: de chip filtert op
           // de draad, niet op de losse zinnen erin.
           var _sub = (typeof inThread !== 'undefined' && inThread);
           var _init = String(_who || '?').replace(/^@/, '').charAt(0).toUpperCase();
           var _priv = (n.visibility === 'followers' || n.visibility === 'direct');
      %>
        <li class="<%= _sub ? 'msg-sub' : 'msg-item' %> msg-<%= _t %><%= _new ? ' is-new' : '' %>"<% if (!_sub) { %> data-kind="<%= _kind %>"<% } %> data-who="<%= String(_who).toLowerCase() %>">
          <span class="msg-av<%= _t === 'sent' ? ' msg-av-sent' : '' %>" aria-hidden="true">
            <% if (_t === 'sent') { %><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></svg>
            <% } else if (_t === 'poll_done') { %><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/></svg>
            <% } else if (n.icon) { %><img src="<%= avatar(n.icon, 96) %>" alt="" loading="lazy">
            <% } else { %><%= _init %><% } %>
            <span class="msg-dot msg-dot-<%= _t %>">
              <% if (_t === 'like') { %><svg viewBox="0 0 24 24" fill="currentColor"><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>
              <% } else if (_t === 'boost') { %><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><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>
              <% } else if (_t === 'follow') { %><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><line x1="19" y1="8" x2="19" y2="14"/><line x1="22" y1="11" x2="16" y2="11"/></svg>
              <% } else if (_t === 'report') { %><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><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>
              <% } else if (_t === 'mention') { %><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="4"/><path d="M16 8v5a3 3 0 0 0 6 0v-1a10 10 0 1 0-3.92 7.94"/></svg>
              <% } else if (_t === 'sent') { %><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 17 4 12 9 7"/><path d="M20 18v-2a4 4 0 0 0-4-4H4"/></svg>
              <% } else if (_t === 'poll_done') { %><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/></svg>
              <% } else { %><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg><% } %>
            </span>
          </span>

          <div class="msg-body">
            <div class="msg-line">
              <% if (_t === 'sent') { %>
                <span class="msg-who"><%= t('msg.you') %></span>
                <% if (n.to_handle && !_sub) { %><span class="msg-handle">→ <%= n.to_handle %></span><% } %>
              <% } else { %>
                <a class="msg-who" href="<%= n.url %>" target="_blank" rel="nofollow noopener"><%- emojiName(_who, n.actor_emoji_json) %></a>
                <% /* De naam blijft: binnen een draad moet je zien WIE wat zei.
                      De handle erachter niet -- die staat in de kop. */ %>
                <% if (n.handle && n.name && !_sub) { %><span class="msg-handle"><%= n.handle %></span><% } %>
              <% } %>
              <% if (_new) { %><span class="msg-new" title="<%= t('msg.new') %>"></span><% } %>
              <% /* When the post was written, like de Krant and de Guardian PWA
                    show it. created_at (when it reached us) stays the sort key
                    and drives the "new since your last visit" dot above. */ %>
              <% if (n.published || n.created_at) { %><span class="msg-time"><%= formatDateTime(n.published || n.created_at) %></span><% } %>
            </div>

            <% var _hasWhat = !_sub || _priv
                 || (_t === 'mention' && (n.help_request || n.wave || n.note_url))
                 || (_t === 'sent' && n.in_reply_to); %>
            <% if (_hasWhat) { %>
            <div class="msg-what">
              <% if (n.count && n.count > 1) { %>
                <strong><%= t('msg.and_more', { n: n.count - 1 }) %></strong>
                <%= _t === 'like' ? t('msg.liked_many') : t('msg.boosted_many') %>
              <% } else if (_t === 'follow') { %><%= t('notif.followed') %>
              <% } else if (_t === 'like') { %><%= t('notif.liked') %>
              <% } else if (_t === 'boost') { %><%= t('notif.boosted') %>
              <% } else if (_t === 'report') { %><%= t('notif.reported') %>
              <% } else if (_t === 'mention' && n.help_request) { %>🛟 <%= t('msg.help_request') %>
              <% } else if (_t === 'mention' && n.wave) { %>👋 <%= t('msg.waved_at_you') %>
              <% } else if (_sub) { %><%# binnen een draad zegt de kop al dat dit een gesprek is %>
              <% } else if (_t === 'mention') { %><%= t('notif.mentioned') %>
              <% } else if (_t === 'sent') { %><%= t('msg.sent_reply') %>
              <% } else if (_t === 'poll_done') { %><strong><%= t('msg.poll_done') %></strong>
              <% } else { %><%= t('notif.replied') %><% } %>
              <% if (_priv) { %><span class="msg-priv" title="<%= t('msg.private_hint') %>">🔒 <%= t('msg.private') %></span><% } %>
              <% if (n.post_slug && !_sub) { %><a class="msg-post" href="/<%= n.post_slug %>"><%= n.post_title || n.post_slug %></a><% } %>
              <% if (_t === 'mention' && n.note_url) { %><a class="msg-post" href="<%= n.note_url %>" target="_blank" rel="nofollow noopener"><%= t('tl.view_original') %></a><% } %>
              <% if (_t === 'sent' && n.in_reply_to) { %><a class="msg-post" href="<%= n.in_reply_to %>" target="_blank" rel="nofollow noopener"><%= t('tl.view_original') %></a><% } %>
            </div>
            <% } %>

            <% if (_t === 'report' && n.content) { %><div class="msg-content"><%= n.content %></div>
            <% } else if ((_t === 'reply' || _t === 'mention' || _t === 'sent') && n.content) { %><div class="msg-content msg-note"><%- include('../partials/note-body', { nb: n }) %></div>
              <% if (_t === 'mention' && n.wave && n.actorUri && canMutate) { %>
                <form class="msg-quickreply" method="post" action="<%= (typeof siteUrlBase !== 'undefined' ? siteUrlBase : '') %>/messages/quick-reply" style="display:flex;gap:6px;flex-wrap:wrap;margin-top:6px">
                  <input type="hidden" name="to" value="<%= n.actorUri %>">
                  <button class="btn small" name="text" value="<%= t('msg.wave_r1') %>"><%= t('msg.wave_r1') %></button>
                  <button class="btn small" name="text" value="<%= t('msg.wave_r2') %>"><%= t('msg.wave_r2') %></button>
                  <button class="btn small" name="text" value="👋"><%= t('msg.wave_back') %></button>
                </form>
              <% } %>
            <% } else if (_t === 'poll_done' && n.poll) { %>
              <div class="msg-poll" role="group">
                <% n.poll.options.forEach(function (o) { %>
                  <div class="msg-poll-opt">
                    <div class="msg-poll-top"><span class="msg-poll-name"><%= o.name %></span><span class="msg-poll-pct"><%= o.pct %>%</span></div>
                    <div class="msg-poll-bar"><span style="width:<%= o.pct %>%"></span></div>
                  </div>
                <% }); %>
                <div class="msg-poll-total"><%= t('msg.poll_total', { n: n.poll.voters }) %></div>
              </div>
            <% } %>

            <% if (_t === 'sent' && n.outboxId) { %>
              <div class="msg-actions">
                <details class="msg-edit">
                  <summary><%= t('fedi.edit') %></summary>
                  <div class="msg-edit-form">
                    <%- include('../partials/reply-editor', {
                      action: '/fediverse/' + n.outboxId + '/edit',
                      placeholder: t('fedi.reply_ph'),
                      submitLabel: t('fedi.save_edit'),
                      rows: 2,
                      initialHtml: n.content,
                      initialText: n.editable,
                      defaultLang: n.language,
                      noAttach: true,
                    }) %>
                  </div>
                </details>
                <form method="post" action="/fediverse/<%= n.outboxId %>/delete" data-confirm="<%= t('fedi.delete_confirm') %>">
                  <button type="submit" class="msg-del"><%= t('comments.delete') %></button>
                </form>
              </div>
            <% } %>
          </div>
        </li>
<% } %>