Changeset ea138c0 in Klonkt

Timestamp:

08/07/2026 11:37:53 AM (5 weeks ago)

Author:

roboburr <roboburr@…>

Branches:

main

Children:

1e172f3

Parents:

f889429

git-author:

Robin <roboburr@…> (08/07/2026 11:37:51 AM)

git-committer:

roboburr <roboburr@…> (08/07/2026 11:37:53 AM)

Message:

Gesprekken in- en uitklappen door op de tegenpartij te tikken

Barts aanwijzing: de uitsparing met de naam is ook de knop. Dat is waar je van
nature naar wijst als je "dit gesprek" bedoelt, en het scheelt een extra
bedieningselement in een lijst die juist rustiger moest worden.

Een BUTTON en geen span met een klikhandler: dan werkt hij met het toetsenbord en
leest een schermlezer de stand voor (aria-expanded). Zonder JavaScript doet hij
niets, en dan staat het gesprek open -- wat ook de beginstand is. Standaard
uitgeklapt, zoals gevraagd.

Ingeklapt blijven de naam en het AANTAL staan. Dat aantal is juist ingeklapt het
meest waard: het is dan het enige wat zegt hoe groot het gesprek is.

Twee dingen die eromheen moesten:

RAAKVLAK de uitsparing is 18px hoog en dat is op een telefoon niet te raken.

De knop krijgt een minimumhoogte; de uitsparing blijft klein, het
doel wordt groter.

ZOEKEN een treffer in een dichtgeklapt gesprek liet alleen de naam zien: je

zoekt iets, het staat er, en je ziet het niet. Zolang er gezocht
wordt gaat zo'n gesprek open en daarna keert hij terug naar de stand
die de lezer zelf koos.

De stand leeft alleen in de pagina en niet in opslag. Een gesprek dat je gisteren
dichtklapte stilhouden is iets anders dan het opruimen van je scherm van nu.

De nieuwe CSS staat NA .msg-item, om dezelfde reden als de rest van dat blok: bij
gelijke specificiteit wint de laatste regel.

Templates compileren, suite 551/551. De pagina zelf staat achter een login, dus
het gedrag in beeld is aan Bart.

Location:

src/views

Files:

• pages/messages.ejs (modified) (2 diffs)
• partials/msg-item.ejs (modified) (1 diff)

src/views/pages/messages.ejs

@@ -101 +101 @@
         (!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;
@@ -166 +184 @@
      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-size: .78em; line-height: 1.5; font-weight: 500;
-    padding: .05rem .5rem; border-radius: 999px;
+    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; text-overflow: ellipsis; white-space: nowrap; }
+    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); }

src/views/partials/msg-item.ejs

@@ -15 +15 @@
           <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>
+                gesprek, geen kop erboven. Zo houdt de inhoud de ruimte.
+
+                Deze uitsparing is ook de knop die het gesprek in- en uitklapt
+                (Barts aanwijzing): tikken op de tegenpartij is waar je van
+                nature naar wijst als je "dit gesprek" bedoelt. Een BUTTON en
+                geen span met een klikhandler, want dan werkt hij ook met het
+                toetsenbord en leest een schermlezer de stand voor.
+
+                Zonder JavaScript doet hij niets, en dan staat het gesprek
+                gewoon open -- dat is ook de stand waar we mee beginnen. %>
+            <button type="button" class="msg-thread-who" aria-expanded="true">
+              <span class="msg-thread-name"><%= _tlabel %></span>
+              <% if (n.count > 1) { %><span class="msg-thread-count"><%= n.count %></span><% } %>
+              <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>
             <% if (_tnew) { %><span class="msg-new" title="<%= t('msg.new') %>"></span><% } %>
             <%# De context bij de draad: waar gaat dit gesprek over? Zonder deze