Changeset 2c0c338 in Klonkt for src/views/pages

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.

File:

• src/views/pages/messages.ejs (modified) (1 diff)

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); }