Workspace: lange Protokoll-Listen aufklappbar, zugeklappt vier Zeilen

Die "Letzten Ereignisse" im Personen-Bereich fuellten mit 25 Zeilen die
halbe Seite, obwohl sie Nachschlagewerk sind und kein Startbild. Jetzt
stehen nur die vier neuesten da, der Rest kommt auf Knopfdruck.

Der Knopf sagt, was er TUT ("Alle 25 zeigen" / "Nur die letzten 4") und
nennt die Zahl, damit man weiss, was dahintersteckt. Bei hoechstens vier
Eintraegen bleibt er ganz weg -- ein Knopf, der nichts verbirgt, verwirrt
nur. Der Pfeil dreht sich, aria-expanded stimmt.

Gemeinsamer Helfer in kopf.js statt zweimal derselbe Block: Dieselbe
Liste gab es auf der Automationen-Seite ("Zuletzt automatisch passiert"),
die verhaelt sich jetzt genauso. Zugeklappt wird per CSS
([data-klapp="zu"]) statt durch Entfernen von Zeilen -- das Aufklappen
braucht so weder Neuaufbau noch zweite Abfrage.

Der Zuhoerer wird nur einmal gesetzt (die Listen werden bei jeder
Aktualisierung neu aufgebaut), und die Anzahl wird bei jedem Umschalten
frisch gelesen statt in der Fassung des ersten Durchlaufs festzuhaengen.

Geprueft: beide Seiten, Computer und Handy, zweimaliges Hin- und
Herklappen, Gegenprobe mit drei Eintraegen -- server/pruef-protokoll-klappe.mjs

Co-Authored-By: Claude Opus 5 <[email protected]>

workspace/assets/js/kopf.js

@@ -10,6 +10,58 @@
 
   const START = '/workspace/start.html';
 
+  /* ---------- Auf- und Zuklappen langer Listen -------------------------
+
+     Lange Protokoll-Listen sind Nachschlagewerk, kein Startbild: Sie
+     stehen zugeklappt da und zeigen nur die neuesten Zeilen.
+
+     Steht hier, weil es an mehreren Stellen gebraucht wird -- und weil
+     genau so schon dreimal Regeln in einer Seitendatei gelandet sind,
+     die eine andere Seite gar nicht laedt.
+
+     `klappe(liste, knopf, text)` erwartet: die Liste (deren direkte
+     Kinder die Zeilen sind), den Knopf und das Textfeld darin. Das
+     Ausblenden macht CSS ueber [data-klapp="zu"] -- ohne Neuaufbau und
+     ohne zweite Abfrage. */
+  const KLAPP_ZU = 4;   /* dieselbe Zahl steht im CSS als nth-child(n+5) */
+
+  window.klappe = function (liste, knopf, textfeld) {
+    if (!liste || !knopf) return;
+    const anzahl = liste.children.length;
+
+    /* Ein Knopf, der nichts zu verbergen hat, verwirrt nur. */
+    knopf.hidden = anzahl <= KLAPP_ZU;
+    if (knopf.hidden) { liste.removeAttribute('data-klapp'); return; }
+
+    /* Liest die Anzahl bei jedem Aufruf frisch aus der Liste, statt sie
+       von oben mitzunehmen. Der Zuhoerer unten wird nur einmal gesetzt
+       und haelt darum fuer immer die Fassung vom ersten Durchlauf fest
+       -- mit einer festgehaltenen Zahl stuende spaeter "Alle 3 zeigen"
+       an einer Liste mit dreissig Zeilen. */
+    const stand = (offen) => {
+      if (offen) liste.removeAttribute('data-klapp');
+      else liste.dataset.klapp = 'zu';
+      knopf.setAttribute('aria-expanded', offen ? 'true' : 'false');
+      /* Der Knopf sagt, was er TUT, nicht wo man gerade ist -- und nennt
+         die Zahl, damit man weiss, was dahintersteckt. */
+      if (textfeld) {
+        textfeld.textContent = offen
+          ? `Nur die letzten ${KLAPP_ZU}`
+          : `Alle ${liste.children.length} zeigen`;
+      }
+    };
+
+    /* Die Liste wird bei jeder Aktualisierung neu aufgebaut, also laeuft
+       auch klappe() mehrfach. Der Zuhoerer wird deshalb nur EINMAL
+       gesetzt -- sonst haengten beim zweiten Mal zwei daran und ein
+       Klick haette doppelt umgeschaltet, also gar nichts bewirkt. */
+    if (!knopf.dataset.klappBereit) {
+      knopf.dataset.klappBereit = 'ja';
+      knopf.addEventListener('click', () => stand(liste.dataset.klapp === 'zu'));
+    }
+    stand(false);
+  };
+
   /* Gibt es eine sinnvolle vorherige Seite INNERHALB des Workspace?
 
      Blindes history.back() reicht nicht: Wer die Adresse direkt eingibt