Chat: auf eine Nachricht reagieren, ohne zu antworten

Filipe: "ich will dass man auf die nachrichten auch reagieren kann mit
einem emoji, die nachricht selbst ohne zu antworten."

Neben "antworten" steht jetzt "reagieren". Ein Klick klappt sechs
Zeichen auf, ein zweiter Klick setzt es -- und unter der Nachricht
steht, wer mit was reagiert hat.

EINE FESTE AUSWAHL, KEIN FREIES FELD (👍 ❤️ 😂 😮 🔥 🙏). Drei Gruende,
der erste ist der wichtigste: Eine feste Liste laesst sich pruefen --
was dort nicht drinsteht, kommt nicht in die Datenbank, kein beliebiger
Text, keine 4-KB-Zeichenketten. Zweitens sehen alle dasselbe. Drittens
kann man sechs Zeichen ueberfliegen; eine volle Tafel ist eine
Suchaufgabe, und dann tippt man doch wieder "ok".

DIE LISTE STEHT AUF DEM SERVER und wird an die Oberflaeche geliefert.
Stuende sie im Browser, gaebe es sie zweimal -- und die zweite Fassung
waere die, in der ein Zeichen fehlt, das der Server noch annimmt. Faellt
der Abruf aus, erscheint KEINE Auswahl statt einer mit erfundenen
Zeichen.

DER PRIMAERSCHLUESSEL BEANTWORTET "WIE OFT?": (nachricht, person,
zeichen). Eine Person darf verschiedene Zeichen geben, jedes aber nur
einmal -- und zwar durchgesetzt von der Datenbank, nicht von einer
Abfrage davor, die man vergessen kann. Derselbe Klick noch einmal nimmt
es zurueck; das erspart einen zweiten Weg, den man auch absichern
muesste.

KEIN ZAEHLER IN chat_nachrichten. Eine mitgefuehrte Zahl muesste bei
jedem Hin und Her stimmen und ist genau die Art Angabe, die irgendwann
nicht mehr stimmt und die niemand nachrechnet. Gezaehlt wird beim
Lesen -- in EINER Abfrage fuer alle 200 Nachrichten, nicht je Zeile
eine.

WER ES WAR, STEHT IM TITEL. "Drei Daumen" sagt weniger als "Ayla, Ben
und Cem", und es sind Leute aus demselben Raum.

KEINE BENACHRICHTIGUNG AUFS HANDY. Wer im Raum ist, sieht es sofort;
wer nicht, bekommt nichts. Ein Daumen ist keine Nachricht -- wer dafuer
geweckt wird, schaltet Meldungen ab.

Was NICHT geht: wer nicht im Raum ist (404), ein erfundenes Zeichen
(400), eine zurueckgenommene Nachricht (409). Und mit der Nachricht
verschwinden die Reaktionen (CASCADE).

pruef-chat-aufloesen 59 -> 85. Gemessen wird der BESTAND, nicht die
Antwort -- und im Browser der KNOPF, nicht nur das Recht: dass die
Auswahl aufklappt, sich nach dem Klick von selbst schliesst, die
Reaktion darunter erscheint, als die eigene erkennbar ist und ein Klick
darauf sie wieder wegnimmt.

EINE EIGENE PRUEFUNG WAR ZU SCHWACH: "bei Cem ist ueberall selbst=true"
war trivial wahr, weil es nur EINE Sorte gab. Jetzt bekommt eine andere
Person ein drittes Zeichen, und in derselben Antwort muss eines auf
true und eines auf false stehen. Eine Angabe, die nie `false` sein kann,
sagt nichts.

Im CSS keine vierte Abschrift: "reagieren" haengt an derselben Regel
wie "antworten" -- neben anheften und kopieren waere es die vierte fast
gleiche gewesen.

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

workspace/assets/css/chat.css

@@ -826,13 +826,21 @@
 
 /* Der Antworten-Knopf am Fuß einer Nachricht -- genauso leise wie
    "zurücknehmen" daneben. Er ist ein Angebot, keine Aufforderung. */
-.chat-nachricht__antwort-knopf {
+/* "reagieren" steht seit dem 14.09.2026 daneben und sieht genauso aus
+   -- dieselbe Sorte Handgriff, dieselbe Zeile. Deshalb DIESELBE Regel
+   und keine vierte Abschrift: Neben antworten, anheften und kopieren
+   waere sie die vierte fast gleiche, und die vierte ist die, die
+   irgendwann eine Zeile anders hat. */
+.chat-nachricht__antwort-knopf,
+.chat-nachricht__reag-knopf {
   border: 0; background: none; padding: 0;
   font: inherit; font-size: .72rem;
   color: inherit; cursor: pointer;
   text-decoration: underline; text-underline-offset: 2px;
 }
-.chat-nachricht__antwort-knopf:hover { color: var(--text); }
+.chat-nachricht__antwort-knopf:hover,
+.chat-nachricht__reag-knopf:hover { color: var(--text); }
+.chat-nachricht__reag-knopf:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
 
 /* =====================================================================
    CHAT: SECHS ERGÄNZUNGEN (09.09.2026)
@@ -968,6 +976,69 @@
    sich zwei auto-Raender den freien Platz und reissen sie auseinander.
    Welche sichtbar sind, entscheidet der Server; eine Regel, die das
    aushaelt, ist besser als eine Zahl, die fuer einen Fall stimmt. */
+/* =====================================================================
+   REAKTIONEN (14.09.2026)
+
+   Filipe: "ich will dass man auf die nachrichten auch reagieren kann
+   mit einem emoji, die nachricht selbst ohne zu antworten."
+
+   GEDECKT, NICHT BUNT. Die Zeichen bringen ihre eigene Farbe mit --
+   ein farbiger Rahmen darum waere zu viel fuer eine Zeile, die unter
+   jeder zweiten Nachricht stehen kann. Die eigene Reaktion ist am
+   Rahmen zu erkennen, nicht an einem Leuchten.
+   ===================================================================== */
+.reaktionen {
+  display: flex; flex-wrap: wrap; gap: 5px;
+  margin: 7px 0 0;
+}
+.reaktionen__stueck {
+  display: inline-flex; align-items: center; gap: 5px;
+  padding: 2px 8px 3px;
+  border: 1px solid var(--rand); border-radius: 999px;
+  background: rgba(255, 255, 255, .04);
+  font: inherit; font-size: .8rem; line-height: 1.4;
+  color: var(--text-leise); cursor: pointer;
+  transition: border-color var(--tempo), background var(--tempo);
+}
+.reaktionen__stueck:hover { border-color: var(--rand-hell); }
+/* Die EIGENE Reaktion: ein Rahmen in der Hausfarbe. Damit sieht man
+   auf einen Blick, wo man selbst schon geklickt hat -- und ein zweiter
+   Klick nimmt sie zurueck. */
+.reaktionen__stueck[data-selbst="ja"] {
+  border-color: color-mix(in srgb, var(--akzent) 55%, transparent);
+  background: color-mix(in srgb, var(--akzent) 12%, transparent);
+  color: var(--text);
+}
+.reaktionen__stueck:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
+.reaktionen__zeichen { font-size: .95rem; line-height: 1; }
+.reaktionen__zahl { font-variant-numeric: tabular-nums; }
+
+/* Die Auswahl klappt AN der Nachricht auf, nicht in einem Fenster.
+   Wer ein Zeichen anklickt, ist in zwei Sekunden fertig; ein Dialog
+   dafuer waere mehr Weg als Zweck. */
+.reagieren-tafel {
+  display: flex; gap: 2px;
+  margin: 7px 0 0;
+  padding: 4px;
+  border: 1px solid var(--rand); border-radius: 999px;
+  background: var(--flaeche-hoch, rgba(255, 255, 255, .05));
+  width: max-content; max-width: 100%;
+  box-shadow: 0 6px 18px -10px rgba(0, 0, 0, .8);
+}
+.reagieren-tafel__zeichen {
+  appearance: none; border: 0; border-radius: 999px;
+  padding: 4px 7px;
+  background: none; cursor: pointer;
+  font-size: 1.05rem; line-height: 1;
+  transition: background var(--tempo), transform var(--tempo);
+}
+.reagieren-tafel__zeichen:hover { background: rgba(255, 255, 255, .09); transform: scale(1.12); }
+.reagieren-tafel__zeichen:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
+@media (prefers-reduced-motion: reduce) {
+  .reagieren-tafel__zeichen:hover { transform: none; }
+  .reagieren-tafel__zeichen, .reaktionen__stueck { transition: none; }
+}
+
 .chat__kopf-knoepfe {
   flex: none; margin-left: auto;
   display: flex; align-items: center; gap: 6px;