Changeset 2c0c338 in Klonkt

Timestamp:

08/25/2026 07:25:31 PM (2 weeks ago)

Author:

Robin <roboburr@…>

Branches:

main

Children:

824d1d0

Parents:

3e7dde2

Message:

Berichten: binnen een gesprek nieuwste bovenaan, en de zwaai in de kop

Twee dingen die bij elkaar horen (Robins besluit, 25-8).

Binnen een DRAAD leest het nu van nieuw naar oud: wat er net bij kwam
staat er meteen, in plaats van onderaan een lange draad. De lijst van
gesprekken en de meldingen blijven staan zoals ze stonden -- alleen
binnen een gesprek draait de volgorde om.

Op een kopie van de array, want groupConversations sorteert oplopend en
de rest van de pagina rekent daarop (_tnew en _tto lezen dezelfde
array). En in de markup, niet met column-reverse: dat draait alleen het
beeld om terwijl een schermlezer de oude volgorde houdt.

Een ONTVANGEN zwaai staat nu ook in de kop van de draad. Ingeklapt zijn
de bubbels weg, en een zwaai is het bericht dat om een antwoord vraagt
zonder iets te zeggen -- die mocht niet achter een dichtgeklapt gesprek
verdwijnen. Blijft staan als de draad open is, net als het aantal. Een
zwaai die je zelf stuurde zet geen teken: dat is geen uitnodiging aan
jezelf.

Vijf toetsen die de echte partial renderen (test/messages-thread-order):
EJS-fouten bestaan alleen tijdens het renderen, dus die vielen tot nu
toe nergens in de suite om. Tegenbewijs gedraaid tegen de oude partial:
de volgorde-toets faalt daar, zoals het hoort.

Files:

• src/views/pages/messages.ejs (modified) (1 diff)
• src/views/partials/msg-item.ejs (modified) (3 diffs)
• test/messages-thread-order.test.js (added)

src/views/pages/messages.ejs

@@ -134 +134 @@
   .msg-thread.is-collapsed .msg-thread-head { margin-bottom: 0; }
   @media (prefers-reduced-motion: reduce) { .msg-thread-chevron { transition: none; } }
+  /* De zwaai in de kop: klein, en met dezelfde rust als het aantal ernaast.
+     Hij staat er ook als het gesprek open is -- dan zegt de bubbel het al, maar
+     een kop die van stand verandert leest als iets dat gebeurde. */
+  .msg-thread-wave { flex: 0 0 auto; font-size: .95em; line-height: 1; }
   .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); }

src/views/partials/msg-item.ejs

@@ -11 +11 @@
            var _tto = ((n.messages || []).find(function (m) { return m.to_handle; }) || {}).to_handle;
            var _tlabel = _tpeople.length ? _tpeople.join(', ') : (_tto || t('msg.you'));
+           // Zwaaide er iemand in dit gesprek? Dan hoort dat in de KOP
+           // (Robins aanwijzing, 25-8). Ingeklapt zijn de bubbels weg, en juist
+           // een zwaai is het bericht dat om een antwoord vraagt zonder iets te
+           // zeggen -- die mag niet achter een dichtgeklapt gesprek verdwijnen.
+           // Alleen een ONTVANGEN zwaai: je eigen zwaai staat er als 'sent' en
+           // is geen uitnodiging aan jezelf.
+           var _twave = (n.messages || []).some(function (m) { return m.type === 'mention' && m.wave; });
       %>
         <li class="msg-item msg-thread<%= _tnew ? ' is-new' : '' %>" data-kind="conv" data-who="<%= (_tpeople.join(' ') + ' ' + (_tto || '')).toLowerCase() %>">
@@ -30 +37 @@
               <svg class="msg-thread-chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="6 9 12 15 18 9"/></svg>
             </button>
+            <%# Blijft staan als het gesprek dicht is, net als het aantal in de
+                uitsparing hierboven -- daar is hij juist het meest waard. %>
+            <% if (_twave) { %><span class="msg-thread-wave" role="img" aria-label="<%= t('msg.waved_at_you') %>" title="<%= t('msg.waved_at_you') %>">&#128075;</span><% } %>
             <% if (_tnew) { %><span class="msg-new" title="<%= t('msg.new') %>"></span><% } %>
             <%# De context bij de draad: waar gaat dit gesprek over? Zonder deze
@@ -40 +50 @@
             <% } %>
           </div>
+          <%# NIEUWSTE BOVENAAN binnen een gesprek (Robins besluit, 25-8). De
+              LIJST van gesprekken en de meldingen blijven staan zoals ze
+              stonden; alleen binnen een draad leest het van nieuw naar oud, dus
+              wat er net bij kwam staat er meteen en niet onderaan een lange
+              draad.
+
+              Op een KOPIE, want groupConversations sorteert `messages`
+              oplopend en de rest van deze pagina rekent daarop -- `_tnew` en
+              `_tto` hierboven lezen dezelfde array. Een reverse() zonder
+              slice() draait het origineel om en dat werkt door naar alles wat
+              er daarna nog naar kijkt.
+
+              In de MARKUP en niet met column-reverse: die draait alleen het
+              beeld om, terwijl een schermlezer en het toetsenbord de oude
+              volgorde houden. %>
           <ul class="msg-thread-msgs">
-            <% (n.messages || []).forEach(function (m) { %><%- include('msg-item', { n: m, seen: _tseen, inThread: true }) %><% }); %>
+            <% (n.messages || []).slice().reverse().forEach(function (m) { %><%- include('msg-item', { n: m, seen: _tseen, inThread: true }) %><% }); %>
           </ul>
           <%# Antwoorden vanuit de draad zelf. Ingeklapt, want een open editor