Chat: sechs Ergaenzungen -- und ein Absturz, den nie jemand gesehen hat

Filipe: "die kategorie chat, boah ich will dass du die wirklich ueberall
perfektionierst. wirklich alles was gratis ist und hinzugefuegt werden
kann ohne problem will ich drin haben bitte. ich will das es hoch
profissionel und ultra krass geil ist."

Zuerst Bestand aufgenommen, nicht gebaut: Suche, Ungelesen-Zahlen, die
"ab hier neu"-Linie, Lesestand, Live-Strom, Antworten mit Zitat,
Zuruecknehmen und Enter-zum-Senden gab es schon. Dazugekommen ist, was
gefehlt hat und ohne fremde Bibliothek geht:

1. ADRESSEN SIND ANKLICKBAR. Gebaut als echte Knoten, nie ueber
   innerHTML -- ein Chat ist die eine Stelle, an der jeder schreiben
   darf. Erkannt wird bewusst wenig (http, https, www.): Wer mehr
   erkennt, macht irgendwann aus "z.b." einen Link ins Nichts.
   Satzzeichen am Ende bleiben beim Satz. rel="noopener noreferrer".
2. KOPIEREN je Nachricht, mit Rueckfall auf "Text markieren", wenn der
   Browser die Zwischenablage nicht hergibt.
3. DER VERLAUF REISST NIEMANDEN MEHR WEG. Vorher sprang er bei JEDEM
   Neuzeichnen ans Ende -- wer weiter oben nachlas und dabei eine
   Nachricht bekam, verlor die Stelle. Jetzt bleibt er stehen, und ein
   Knopf sagt, WIE VIEL unten wartet, nicht nur DASS etwas da ist.
4. ENTWUERFE JE GESPRAECH. Wer mitten im Satz wechselt, findet ihn
   wieder. Im localStorage, nicht auf dem Server: Ein Entwurf ist
   nichts, was jemand anders sehen soll. Abgeschickt heisst geloescht.
5. EMOJI-AUSWAHL, dreissig feste Zeichen, eingefuegt an der
   Cursorstelle. Am Handy hat die Tastatur sie ohnehin -- am Rechner
   nicht, und dort sitzt die Betreuung.
6. ZEICHENZAEHLER, sichtbar ab 400 Rest. Die Grenze steht NICHT im
   Skript, sondern kommt aus dem maxlength des Feldes -- zwei Stellen
   fuer dieselbe Zahl laufen auseinander.

--- DER FUND, um den es eigentlich geht ---

Die neue Pruefung hoert auf "pageerror". Damit kam sofort neun Mal
dieselbe Meldung: "Cannot set properties of null (setting 'hidden')",
raumOeffnen, Zeile 278.

Ursache: verlaufZeichnen() leerte den Verlaufskasten mit
`textContent = ''`. Darin liegt aber #verlauf-leer, der Absatz "Links
ein Gespraech auswaehlen". Nach dem ersten Zeichnen gab es ihn nicht
mehr, und raumOeffnen faellt sechs Zeilen weiter darueber.

Die Folge ist nicht die Fehlermeldung, sondern der Abbruch: Beim ZWEITEN
Aufruf liefen history.replaceState, gelesenMelden() und raeumeZeichnen()
nie. Der zweite Aufruf ist der Normalfall -- der Ereignisstrom ruft nach
jedem Verbindungsaufbau genau das, um nachzuholen, was waehrend der
Pause geschrieben wurde. Dieses Nachholen hat nie funktioniert. Von
aussen sah alles normal aus; nur die Konsole wusste Bescheid.

Behoben, indem nur noch die Nachrichten entfernt werden und der Absatz
stehenbleibt. Abschnitt 8 der Pruefung wechselt jetzt dreimal zwischen
zwei Gespraechen OHNE Neuladen und verlangt null Abstuerze.

--- UND EIN ZWEITER, der schon laenger drin war ---

Abschnitt 9 misst den Kontrast an der wirklichen Flaeche (Text kurz
unsichtbar, Flaeche fotografiert). Die Fusszeile jeder Nachricht stand
auf --text-still: auf der eigenen Blase 3,68:1, unter den 4,5:1 fuer
Text dieser Groesse. Aufgefallen ist es nie, weil niemand nachgemessen
hat. Jetzt traegt .chat-nachricht__fuss EINE Farbe (--text-leise,
4,81:1) und Uhrzeit, antworten, zuruecknehmen und kopieren erben sie --
statt vier eigener Angaben, die beim naechsten Mal auseinanderlaufen.

--- Pruefung ---

server/pruef-chat-ausbau.mjs, neu, 64 Pruefungen, alle gruen. Zu jedem
Punkt eine Gegenprobe: kein Link ohne Adresse, keine Auszeichnung aus
<b>/<img onerror>, kein Kopier-Knopf an zurueckgenommenen Nachrichten,
kein Sprungknopf fuer den, der schon unten steht, kein Entwurf nach dem
Abschicken, ein absichtlich zu dunkler Text faellt durch, und ein
absichtlich geworfener Fehler wird bemerkt (sonst waere Abschnitt 10
auch gruen, wenn niemand zuhoert).

Ausserdem gruen: pruef-css-klassen, pruef-chat, pruef-chat-optik.
Angesehen bei 1440 px und bei 390 px.

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

workspace/profil.html

@@ -14,11 +14,11 @@
 <meta name="theme-color" content="#06090f" />
 <link rel="icon" type="image/png" href="/assets/img/app-symbole/workspace-32.png" />
 <link rel="apple-touch-icon" href="/assets/img/app-symbole/workspace-180.png" />
-<link rel="stylesheet" href="assets/css/gate.css?v=202609090318" />
-<link rel="stylesheet" href="assets/css/start.css?v=202609090318" />
-<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609090318" />
-<link rel="stylesheet" href="assets/css/profil.css?v=202609090318" />
-<link rel="stylesheet" href="assets/css/module.css?v=202609090318" />
+<link rel="stylesheet" href="assets/css/gate.css?v=202609091211" />
+<link rel="stylesheet" href="assets/css/start.css?v=202609091211" />
+<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609091211" />
+<link rel="stylesheet" href="assets/css/profil.css?v=202609091211" />
+<link rel="stylesheet" href="assets/css/module.css?v=202609091211" />
 </head>
 
 <body class="start">
@@ -207,11 +207,11 @@
 
 </main>
 
-<script src="assets/js/wahl.js?v=202609090318" defer></script>
-<script src="assets/js/bereiche.js?v=202609090318" defer></script>
-<script src="assets/js/kopf.js?v=202609090318" defer></script>
-<script src="assets/js/glocke.js?v=202609090318" defer></script>
-<script src="assets/js/steckbrief.js?v=202609090318" defer></script>
-<script src="assets/js/profil.js?v=202609090318" defer></script>
+<script src="assets/js/wahl.js?v=202609091211" defer></script>
+<script src="assets/js/bereiche.js?v=202609091211" defer></script>
+<script src="assets/js/kopf.js?v=202609091211" defer></script>
+<script src="assets/js/glocke.js?v=202609091211" defer></script>
+<script src="assets/js/steckbrief.js?v=202609091211" defer></script>
+<script src="assets/js/profil.js?v=202609091211" defer></script>
 </body>
 </html>