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

<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>

<%# Filteren, zoeken en het in-/uitklappen zitten in assets/js/mod/messages.js.
    Inline script hier wordt door de CSP geweigerd zodra je deze pagina via een
    link BINNEN de site opent -- zie shaer-0i6. De shell laadt de module op
    body[data-js]; deze pagina vraagt erom met pageJs (routes/posts.js). %>

<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>