source: Klonkt/src/views/pages/messages.ejs@ ea138c0

<div class="msg-wrap">
  <%- include('../partials/fedi-tabs', { active: 'berichten' }) %>
  <h1 class="msg-title"><%= t('msg.title') %></h1>
  <% if (typeof success !== 'undefined' && success) { %><div class="alert alert-success"><%= success === 'guardian_accepted' ? t('msg.guard_accepted') : (success === 'guardian_rejected' ? t('msg.guard_rejected') : (success === 'wave_sent' ? t('msg.wave_sent') : (success === 'reply_sent' ? t('msg.reply_sent') : success))) %></div><% } %>
  <% if (typeof error !== 'undefined' && error) { %><div class="alert alert-error"><%= error === 'guardianship' ? t('msg.guard_failed') : (error === 'reply_empty' ? t('msg.reply_empty') : ((error === 'reply_failed' || error === 'reply_target') ? t('msg.reply_failed') : error)) %></div><% } %>

  <%# FEP-633c: a pending guardianship offer is a special message: the kid
      answers here (accept/reject travels the same C2S pipeline as the apps). %>
  <% if (typeof guardianOffers !== 'undefined' && guardianOffers.length) { %>
    <% guardianOffers.forEach(function(o){ %>
    <div class="alert" style="display:flex;align-items:center;gap:12px;flex-wrap:wrap;border-left:3px solid #ff6b35;">
      <span style="font-size:1.4em;">&#128735;</span>
      <div style="flex:1;min-width:200px;">
        <strong><%= o['shaer:candidateHandle'] || o['shaer:candidate'] %></strong><br>
        <span><%= t('msg.guard_offer') %></span>
      </div>
      <form method="post" action="<%= (typeof moreBase !== 'undefined' ? moreBase : '') %>/messages/guardianship" style="display:flex;gap:8px;">
        <input type="hidden" name="offer" value="<%= o.id %>">
        <button class="btn" type="submit" name="answer" value="accept"><%= t('msg.guard_accept') %></button>
        <button class="btn" type="submit" name="answer" value="reject" style="opacity:.7;"><%= t('msg.guard_reject') %></button>
      </form>
    </div>
    <% }); %>
  <% } %>

  <div class="msg-filters" role="tablist" aria-label="<%= t('msg.title') %>">
    <%# Vier chips, geen zes: Berichten, Gesprekken en Verzonden gingen op in
        een enkele Gesprekken-view, waarin verzonden en ontvangen in dezelfde
        draad staan. Activiteit en Moderatie blijven wat ze waren. %>
    <button type="button" class="msg-chip is-on" data-show="all"><%= t('msg.filter_all') %></button>
    <button type="button" class="msg-chip" data-show="conv"><%= t('msg.filter_conv') %></button>
    <button type="button" class="msg-chip" data-show="act"><%= t('msg.filter_act') %></button>
    <button type="button" class="msg-chip" data-show="mod"><%= t('msg.filter_mod') %></button>
  </div>
  <div class="msg-search">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
    <input type="search" id="msg-q" placeholder="<%= t('msg.search_ph') %>" autocomplete="off" spellcheck="false" aria-label="<%= t('msg.search_ph') %>">
  </div>

  <% var _seen = (typeof seenAt !== 'undefined' && seenAt) ? seenAt : 0; %>
  <% if (!items || !items.length) { %>
    <p class="msg-empty"><%= t('msg.empty') %></p>
  <% } else { %>
    <ul class="msg-list" data-show="all" id="msg-list">
      <% items.forEach(function(n){ %><%- include('../partials/msg-item', { n: n, seen: _seen }) %><% }); %>
    </ul>
    <p class="msg-nomatch" hidden><%= t('msg.no_match') %></p>
    <%- include('../partials/load-more', { hasMore: hasMore, nextOffset: nextOffset, moreBase: moreBase, moreTarget: '#msg-list', morePath: '/messages' }) %>
  <% } %>

  <%# Interact bookmarklet — moved here from the old Reacties page. %>
  <details class="msg-bm">
    <summary><%= t('fedi.bm_label') %></summary>
    <p class="msg-bm-help"><%= t('fedi.bm_help') %></p>
    <a class="fedi-bm-btn" id="fedi-bm-btn" href="#" draggable="true" title="<%= t('fedi.bm_help') %>">
      <svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"/></svg>
      <%= t('fedi.bm_label') %>
    </a>
  </details>
</div>

<script>
(function () {
  if (window.__msgWired) return; window.__msgWired = true;

  // Filtering: kind chip AND free-text search, combined in JS (search over the
  // sender and the rendered message text). Empty search + "all" = show all.
  var list = document.querySelector('.msg-list');
  var noMatch = document.querySelector('.msg-nomatch');
  var q = document.getElementById('msg-q');
  var kind = 'all';
  var items = [];
  function indexItem(li) {
    // Een draad indexeren op zijn eerste bubbel zou de rest onvindbaar maken,
    // dus daar nemen we de hele tekst; losse regels blijven gericht geindexeerd.
    if (li.classList.contains('msg-thread')) {
      li._search = ((li.getAttribute('data-who') || '') + ' ' + li.textContent).toLowerCase();
      return;
    }
    // Index once: sender + message body + linked post title + poll text.
    var body = li.querySelector('.msg-content');
    var post = li.querySelector('.msg-post');
    var poll = li.querySelector('.msg-poll');
    li._search = ((li.getAttribute('data-who') || '') + ' ' +
      (body ? body.textContent : '') + ' ' + (post ? post.textContent : '') + ' ' +
      (poll ? poll.textContent : '')).toLowerCase();
  }
  // Re-collect + index; called on load and after each "Load more" append so new
  // items join the filter/search (and inherit the active chip via apply()).
  function reindex() {
    items = list ? Array.prototype.slice.call(list.querySelectorAll(':scope > .msg-item')) : [];
    items.forEach(function (li) { if (!li._search) indexItem(li); });
  }
  reindex();
  function apply() {
    if (!list) return;
    var term = (q && q.value || '').trim().toLowerCase();
    var shown = 0;
    items.forEach(function (li) {
      var ok = (kind === 'all' || li.getAttribute('data-kind') === kind) &&
        (!term || li._search.indexOf(term) !== -1);
      li.style.display = ok ? '' : 'none';
      // Een treffer die in een dichtgeklapt gesprek zit, laat anders alleen de
      // naam zien: je zoekt iets, het staat er, en je ziet het niet. Zolang er
      // gezocht wordt gaat zo'n gesprek open; daarna keert hij terug naar de
      // stand die de lezer zelf koos.
      if (li.classList.contains('msg-thread')) {
        li.classList.toggle('is-search-open', !!term && ok);
      }
      if (ok) shown++;
    });
    if (noMatch) noMatch.hidden = shown !== 0;
  }
  // In- en uitklappen door op de tegenpartij te tikken (Barts aanwijzing).
  // Gedelegeerd, zodat draden die via "meer laden" binnenkomen het vanzelf ook
  // doen. De stand leeft alleen in deze pagina: standaard uitgeklapt, en na een
  // herlading weer. Dat is bewust -- een gesprek dat je gisteren dichtklapte
  // stilhouden is niet hetzelfde als het opruimen van je scherm van nu.
  document.addEventListener('click', function (e) {
    var who = e.target.closest('.msg-thread-who'); if (!who) return;
    var li = who.closest('.msg-thread'); if (!li) return;
    var dicht = li.classList.toggle('is-collapsed');
    who.setAttribute('aria-expanded', dicht ? 'false' : 'true');
  });
  document.addEventListener('click', function (e) {
    var chip = e.target.closest('.msg-chip'); if (!chip) return;
    kind = chip.getAttribute('data-show');
    document.querySelectorAll('.msg-chip').forEach(function (c) { c.classList.toggle('is-on', c === chip); });
    apply();
  });
  if (q) q.addEventListener('input', apply);
  // After a "Load more" append (htmx), index the new rows and re-apply the filter.
  document.body.addEventListener('htmx:afterSettle', function (e) {
    if (e.target && e.target.id === 'msg-list') { reindex(); apply(); }
  });

  var a = document.getElementById('fedi-bm-btn');
  if (a) {
    a.setAttribute('href', "javascript:void(window.open('" + location.origin + "/authorize_interaction?uri='+encodeURIComponent(window.location.href)))");
    a.addEventListener('click', function (e) { e.preventDefault(); a.classList.add('nudge'); setTimeout(function(){ a.classList.remove('nudge'); }, 600); });
  }
})();
</script>

<style>
  .msg-wrap { max-width: 640px; margin: 1rem auto; padding: 0 1rem; }
  .msg-title { margin: 0 0 .9rem; }
  .msg-empty { color: var(--ink-soft, #888); }

  .msg-filters { display: flex; gap: .4rem; margin: 0 0 1.1rem; flex-wrap: wrap; }
  .msg-chip { border: 1px solid color-mix(in srgb, var(--ink, #000) 16%, transparent); background: none;
    color: var(--ink-soft, #888); font: inherit; font-size: .84rem; font-weight: 600;
    padding: .3rem .85rem; border-radius: 999px; cursor: pointer; }
  .msg-chip.is-on { background: var(--accent, #06c); border-color: var(--accent, #06c); color: #fff; }

  .msg-search { display: flex; align-items: center; gap: .5rem; margin: 0 0 1.1rem;
    padding: .45rem .7rem; border-radius: 10px;
    border: 1px solid color-mix(in srgb, var(--ink, #000) 16%, transparent); }
  .msg-search:focus-within { border-color: var(--accent, #06c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, #06c) 18%, transparent); }
  .msg-search svg { width: 16px; height: 16px; color: var(--ink-soft, #888); flex-shrink: 0; }
  .msg-search input { flex: 1; border: none; background: none; color: inherit; font: inherit; outline: none; min-width: 0; }
  .msg-nomatch { color: var(--ink-soft, #888); text-align: center; padding: 1.2rem 0; }

  .msg-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .55rem; }


  .msg-item { display: flex; gap: .8rem; padding: .85rem .95rem; border-radius: 14px; align-items: flex-start;
    background: color-mix(in srgb, var(--ink, #000) 3.5%, transparent);
    border: 1px solid color-mix(in srgb, var(--ink, #000) 9%, transparent);
    transition: border-color .15s ease, box-shadow .15s ease; }
  .msg-item:hover { border-color: color-mix(in srgb, var(--accent, #888) 30%, transparent);
    box-shadow: 0 2px 12px color-mix(in srgb, var(--ink, #000) 6%, transparent); }
  .msg-item.is-new { border-color: color-mix(in srgb, var(--accent, #06c) 45%, transparent);
    background: color-mix(in srgb, var(--accent, #06c) 4%, transparent); }
  .msg-sent { border-left: 3px solid color-mix(in srgb, var(--accent, #06c) 55%, transparent); }

  /* ── Gesprekken ──────────────────────────────────────────────────────
     NA .msg-item, en dat is geen smaak: .msg-item zet display:flex, en bij
     gelijke specificiteit wint de laatste regel. Stond dit ervoor, dan kwam de
     draadkop NAAST de bubbels te staan in plaats van erboven. */
  .msg-thread { display: block; }
  .msg-thread-head { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; margin-bottom: .4rem; }
  /* De tegenpartij is een labeltje bij het gesprek, geen kop erboven: een
     kleine verzonken uitsparing, zodat de bubbels eronder de ruimte krijgen.
     Het aantal zit in dezelfde uitsparing in plaats van ernaast. */
  /* Ook de knop die het gesprek in- en uitklapt. Een button erft geen font en
     geen kleur, dus die staan hier expliciet; zonder dat wordt het ineens
     systeemblauw in 13px. */
  .msg-thread-who { display: inline-flex; align-items: center; gap: .3rem; min-width: 0;
    font: inherit; font-size: .78em; line-height: 1.5; font-weight: 500;
    padding: .05rem .5rem; border-radius: 999px; border: 0; cursor: pointer;
    color: color-mix(in srgb, var(--ink, #000) 62%, transparent);
    background: color-mix(in srgb, var(--ink, #000) 5%, transparent);
    box-shadow: inset 0 1px 2px color-mix(in srgb, var(--ink, #000) 9%, transparent);
    max-width: 100%; overflow: hidden; white-space: nowrap;
    /* Ruimer aanraakvlak dan de tekst: een chip van 18px hoog is op een telefoon
       niet te raken. De uitsparing blijft klein, het doel wordt groter. */
    min-height: 32px; }
  .msg-thread-who:hover { background: color-mix(in srgb, var(--ink, #000) 9%, transparent); }
  .msg-thread-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .msg-thread-chevron { width: 12px; height: 12px; flex: none; opacity: .55;
    transition: transform .18s ease; }
  /* Ingeklapt: de bubbels en het antwoordveld verdwijnen, de uitsparing met de
     naam en het AANTAL blijft staan -- dat aantal is juist ingeklapt het meest
     waard. */
  .msg-thread.is-collapsed .msg-thread-msgs,
  .msg-thread.is-collapsed .msg-thread-foot { display: none; }
  /* Tijdens het zoeken wint de treffer van de dichtgeklapte stand. */
  .msg-thread.is-collapsed.is-search-open .msg-thread-msgs { display: flex; }
  .msg-thread.is-collapsed.is-search-open .msg-thread-foot { display: flex; }
  .msg-thread.is-collapsed .msg-thread-chevron { transform: rotate(-90deg); }
  .msg-thread.is-collapsed .msg-thread-head { margin-bottom: 0; }
  @media (prefers-reduced-motion: reduce) { .msg-thread-chevron { transition: none; } }
  .msg-thread-count { font-variant-numeric: tabular-nums; opacity: .75; flex: 0 0 auto;
    padding-inline-start: .3rem; border-inline-start: 1px solid color-mix(in srgb, var(--ink, #000) 14%, transparent); }
  .msg-thread-post { display: inline-flex; align-items: center; gap: .3rem; font-size: .85em;
    margin-inline-start: auto; min-width: 0; max-width: 100%;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .msg-thread-post svg { width: 13px; height: 13px; flex: none; }
  .msg-thread-msgs { list-style: none; margin: 0; padding: 0 0 0 .7rem; display: flex; flex-direction: column; gap: .5rem;
    border-inline-start: 2px solid color-mix(in srgb, var(--ink, #000) 10%, transparent); }
  .msg-sub { display: flex; gap: .6rem; align-items: flex-start; min-width: 0; }
  .msg-sub > .msg-body { min-width: 0; }
  /* Jouw eigen bijdrage onderscheidt zich met een tint en de accentlijn die
     .msg-sent al had -- niet met row-reverse: dat duwde de avatar buiten de
     kaart zodra de regel smaller werd dan zijn inhoud. */
  .msg-sub.msg-sent { border-radius: 10px; padding: .3rem .45rem;
    background: color-mix(in srgb, var(--accent, #06c) 5%, transparent); }
  /* Een lange naam of tijd mag de bubbel niet uit de kaart duwen. */
  .msg-sub .msg-line { flex-wrap: wrap; }

  /* De voet van een gesprek: antwoorden en zwaaien naast elkaar, ingeklapt.
     Een open editor onder elk gesprek maakt de lijst weer onleesbaar -- precies
     wat deze weergave moest oplossen. */
  .msg-thread-foot { display: flex; align-items: flex-start; gap: .5rem; margin-top: .5rem; flex-wrap: wrap; }
  .msg-reply { flex: 1 1 12rem; min-width: 0; }
  .msg-reply > summary { cursor: pointer; font-size: .82rem; color: var(--ink-soft, #888); }
  .msg-reply[open] > summary { margin-bottom: .4rem; }
  .msg-reply-form { min-width: 0; }
  .msg-wave button { line-height: 1.2; }

  @media (max-width: 560px) {
    /* Op een telefoon is 40px avatar per bubbel puur verlies: de naam staat er
       al naast, en de inhoud heeft de breedte harder nodig. */
    .msg-sub > .msg-av { display: none; }
    .msg-thread-msgs { padding-inline-start: .55rem; }
    .msg-thread-post { margin-inline-start: 0; }
    .msg-item { padding: .7rem .6rem; gap: .6rem; }
  }

  .msg-av { position: relative; flex: 0 0 40px; width: 40px; height: 40px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center; font-weight: 700;
    background: color-mix(in srgb, var(--accent, #888) 16%, transparent); color: var(--accent, #06c); overflow: visible; }
  .msg-av img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; background: #fff; }
  .msg-av-sent svg { width: 17px; height: 17px; }
  .msg-dot { position: absolute; right: -3px; bottom: -3px; width: 18px; height: 18px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    border: 2px solid var(--paper, #fff); background: var(--accent, #06c); color: #fff; }
  .msg-dot svg { width: 10px; height: 10px; }
  .msg-dot-like { background: #e8b04b; } .msg-dot-boost { background: #2fa85a; }
  .msg-dot-report { background: #c0392b; } .msg-dot-mention { background: #8e6cf0; }

  .msg-body { flex: 1; min-width: 0; }
  .msg-line { display: flex; align-items: baseline; gap: .4rem; }
  .msg-who { font-weight: 700; color: var(--ink, inherit); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  a.msg-who:hover { text-decoration: underline; }
  .msg-handle { color: var(--ink-soft, #888); font-size: .82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .msg-new { width: 8px; height: 8px; border-radius: 50%; background: var(--accent, #06c); flex: 0 0 auto; align-self: center; }
  .msg-time { color: var(--ink-soft, #999); font-size: .76rem; margin-left: auto; flex: 0 0 auto; white-space: nowrap; }
  .msg-what { color: var(--ink-soft, #aaa); margin-top: .12rem; line-height: 1.4; }
  .msg-what .msg-post { color: var(--accent, #06c); font-weight: 600; margin-left: .25rem; }
  .msg-priv { display: inline-block; margin-left: .3rem; padding: .05rem .5rem; border-radius: 999px; font-size: .72rem; font-weight: 700;
    background: color-mix(in srgb, #8e6cf0 14%, transparent); color: #8e6cf0; }
  .msg-content { margin: .45rem 0 0; padding: .55rem .75rem; border-radius: 10px; line-height: 1.5;
    background: color-mix(in srgb, var(--ink, #000) 4%, transparent); color: var(--ink, inherit); overflow-wrap: anywhere; }
  .msg-content p { margin: .2rem 0; } .msg-content p:first-child { margin-top: 0; } .msg-content p:last-child { margin-bottom: 0; }

  .msg-poll { margin: .5rem 0 0; display: flex; flex-direction: column; gap: .4rem; }
  .msg-poll-opt { display: flex; flex-direction: column; gap: .2rem; }
  .msg-poll-top { display: flex; justify-content: space-between; gap: .5rem; font-size: .85rem; }
  .msg-poll-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .msg-poll-pct { font-variant-numeric: tabular-nums; color: var(--ink-soft, #888); flex-shrink: 0; }
  .msg-poll-bar { height: 7px; border-radius: 999px; overflow: hidden; background: color-mix(in srgb, var(--ink, #000) 10%, transparent); }
  .msg-poll-bar span { display: block; height: 100%; border-radius: 999px; background: var(--accent, #06c); }
  .msg-poll-total { font-size: .78rem; color: var(--ink-soft, #888); margin-top: .1rem; }

  .msg-actions { display: flex; gap: .7rem; align-items: center; margin-top: .45rem; }
  .msg-edit summary { cursor: pointer; font-size: .8rem; color: var(--ink-soft, #888); font-weight: 600; }
  .msg-edit-form { margin-top: .4rem; display: flex; flex-direction: column; gap: .4rem; }
  .msg-edit-form textarea { width: 100%; font: inherit; padding: .5rem .65rem; border-radius: 8px;
    border: 1px solid color-mix(in srgb, var(--ink, #000) 16%, transparent); background: transparent; color: var(--ink, inherit); }
  .msg-del { background: none; border: none; padding: 0; font: inherit; font-size: .8rem; font-weight: 600;
    color: var(--ink-soft, #888); cursor: pointer; }
  .msg-del:hover { color: #c0392b; }

  .msg-bm { margin: 1.4rem 0 0; border-top: 1px solid color-mix(in srgb, var(--ink, #000) 10%, transparent); padding-top: .8rem; }
  .msg-bm summary { cursor: pointer; color: var(--ink-soft, #888); font-weight: 600; font-size: .88rem; }
  .msg-bm-help { color: var(--ink-soft, #888); font-size: .82rem; line-height: 1.5; margin: .5rem 0 .6rem; }
</style>