Chatliste: gruene Plakette mit Zahl, Gruppe ohne Allerwelts-Symbol

Der Punkt fuer Ungelesenes war violett und leer. Violett ist im Produkt die
Farbe der Projekte -- das Kanalsymbol in derselben Zeile traegt sie schon, und
ein zweites violettes Zeichen daneben konkurriert damit, statt etwas anderes zu
sagen. Ein farbloser Punkt sagt ausserdem nur "da war was". Jetzt gruen, mit
der Zahl der ungelesenen Nachrichten darin, wie in jedem Messenger, den ein
Betrieb kennt. Die Uhrzeit derselben Zeile faerbt mit.

Die Zahlen (3, 2, 1) stehen nicht in der Quelle, dort ist unread ein
Wahrheitswert. Sie sind die einzigen erfundenen Werte im Post und stehen so in
POST-6.md.

Die Gruppe trug FeatherUsers -- das Zwei-Personen-Piktogramm, das in jeder
zweiten Oberflaeche steckt und danach aussieht. Jetzt zwei ueberlappende
Avatarscheiben, wie Teams und Linear sie an derselben Stelle zeigen; sie
sprechen dieselbe Sprache wie die Kuerzelkreise der Direktnachrichten daneben.
Ohne Buchstaben, weil die Mitglieder nirgends benannt sind.

Dabei gefunden: nach dem Vergroessern des Ausschnitts auf Slide 2 hatte ich
kollision.mjs mit Argument 1 laufen lassen -- das ist Slide 1. Auf Slide 2 ragte
das hinterste, gedrehte Blatt des Stapels fuenf Einheiten unter den Kasten.
stapelRand() rechnet den Ueberstand fuer die unskalierte Groesse, die
Skalierung vergroessert ihn mit. Der Kasten kommt jetzt aus dem skalierten
Stapel.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

POST-6.md

@@ -109,6 +109,25 @@ dem Gewerk: Wärmepumpe Müller, Montagetermin, Baustellenfotos.
 
 ## 4. Wo bewusst abgewichen wird
 
+**Die Plakette für Ungelesenes trägt eine Zahl und ist grün.** In der Quelle
+ist `unread` ein Wahrheitswert und der Punkt violett. Beides ist geändert:
+violett ist im Produkt die Farbe der Projekte, das Kanalsymbol in derselben
+Zeile trägt sie schon, und ein zweites violettes Zeichen daneben konkurriert
+damit, statt etwas anderes zu sagen. Ein farbloser Punkt sagt außerdem nur
+„da war was", eine Zahl sagt, wie viel — so macht es jeder Messenger, den ein
+Betrieb kennt.
+
+Die Zahlen (3, 2, 1) stehen **nicht** in der Quelle; sie ist an dieser Stelle
+binär. Sie sind die einzigen erfundenen Werte im ganzen Post.
+
+**Die Gruppe trägt zwei überlappende Scheiben und kein Symbol.** In der Quelle
+steht dort `FeatherUsers`. Dieses Zwei-Personen-Piktogramm steckt in jeder
+zweiten Oberfläche und sieht danach aus. Zwei versetzte Avatare sind das, was
+Teams und Linear an derselben Stelle zeigen, und sie sprechen dieselbe Sprache
+wie die Kürzelkreise der Direktnachrichten daneben. Ohne Buchstaben, weil die
+Mitglieder dieser Gruppe nirgends benannt sind; wie viele es sind, steht in der
+Zeile darunter.
+
 **Slide 4 nennt drei der sechs Einträge, nicht alle.** „Versende mehr als nur
 Textnachrichten: Dokumente, Fotos, Sprachnachrichten." Drei Beispiele sagen,
 worum es geht; die vollständige Liste steht im Bild daneben.
@@ -334,7 +353,7 @@ violett.** Im Original steht dort `bg-surface-neutral-primary` mit Rand und
 
 ---
 
-## 6. Siebzehn Fallen aus diesem Bau
+## 6. Achtzehn Fallen aus diesem Bau
 
 **Die Listenzeile hat drei Zeilen, nicht zwei.** Der erste Anlauf setzte Titel
 und Vorschau untereinander und schob Nadel und Ungelesen-Punkt rechts neben
@@ -462,6 +481,14 @@ nicht, was das Produkt heute kann. Wo eine Aussage der Website (hier:
 im vorliegenden Code hat, ist das ein Grund nachzufragen und nicht, die Aussage
 auf den vorhandenen Code zu biegen.
 
+**Ich habe die falsche Slide geprüft.** Nach dem Vergrößern des Ausschnitts auf
+Slide 2 lief `kollision.mjs` mit dem Argument `1` — das ist Slide 1. Auf Slide 2
+ragte das hinterste, gedrehte Blatt des Stapels fünf Einheiten unter den Kasten:
+`stapelRand()` rechnet den Überstand für die unskalierte Größe, und die
+Skalierung vergrößert ihn mit. Der Kasten wird jetzt aus dem skalierten Stapel
+gerechnet. Gefunden wurde es erst zwei Commits später, bei einer Prüfung, die
+alle fünf Slides durchging.
+
 **Ein `|| 0` an der falschen Stelle verdeckt ein NaN.** Der Abspielen-Knopf tat
 nichts, sobald man ihn nach dem Laden als Erstes anfasste. `animAbspielen`
 rechnete `performance.now() - ANIM_T[i] * dauer`, damit die Vorschau dort

post6.html

@@ -2611,12 +2611,12 @@ if (location.search.indexOf("nur=anim") >= 0)
      Direktnachricht das Kuerzel des Menschen -- so macht es ChatAvatar. */
   const CHATS = [
     { titel: "# waermepumpe-mueller", vorschau: "Tobias: @Michael Fotos sind im Projektordner.",
-      zeit: "14:32", meta: "P-2026-0042", art: "projekt", ungelesen: true, pin: true, aktiv: true },
+      zeit: "14:32", meta: "P-2026-0042", art: "projekt", ungelesen: 3, pin: true, aktiv: true },
     { titel: "Sandra Koch", vorschau: "Montagetermin ist mit der Familie abgestimmt.",
-      zeit: "13:48", meta: "Projektleitung", art: "direkt", ungelesen: true, pin: true,
+      zeit: "13:48", meta: "Projektleitung", art: "direkt", ungelesen: 2, pin: true,
       kuerzel: "SK", farbe: "blau" },
     { titel: "Angebot_v1.pdf · Rückfrage", vorschau: "Maike: Geprüft und freigegeben.",
-      zeit: "12:05", meta: "Dokumenten-Thread", art: "projekt", ungelesen: true },
+      zeit: "12:05", meta: "Dokumenten-Thread", art: "projekt", ungelesen: 1 },
     { titel: "Tobias Wagner", vorschau: "Passt, der Termin steht bei mir.",
       zeit: "11:26", meta: "Montage", art: "direkt", kuerzel: "TW", farbe: "violett" },
     { titel: "Montage Team Süd", vorschau: "Mehmet: Werkzeugliste ist abgeschickt.",
@@ -2629,6 +2629,12 @@ if (location.search.indexOf("nur=anim") >= 0)
       zeit: "25.07.", meta: "Service & Wartung", art: "projekt" },
   ];
 
+  /* Gruen statt violett fuer alles Ungelesene: die Plakette und die Uhrzeit
+     daneben. Violett ist im Produkt die Farbe der Projekte -- das Symbol des
+     Kanals traegt sie, und ein zweites violettes Zeichen in derselben Zeile
+     konkurriert damit, statt etwas anderes zu sagen. */
+  const UNGELESEN = "#148134";
+
   const LISTE_B = 372, ZEILE_H = 96;
 
   /* Eine Zeile der Chatliste. Drei Zeilen, wie im Original:
@@ -2657,12 +2663,30 @@ if (location.search.indexOf("nur=anim") >= 0)
         '" stroke="' + CHAT_RAND + '" stroke-width="1.2"/>' +
         uiText(mx + 20, my + 6, c.kuerzel, 15, 800, av.text, { anker: "middle" });
     } else {
-      const projekt = c.art === "projekt";
-      g += '<rect x="' + n1(mx) + '" y="' + n1(my - 20) + '" width="40" height="40" rx="11" fill="' +
-        (projekt ? "#F0E7FF" : "#FAFAFA") + '" stroke="' + (projekt ? "#e4d4ff" : CHAT_RAND) +
-        '" stroke-width="1.2"/>';
-      g += feather(projekt ? "briefcase" : "users", mx + 20, my, 20,
-                   projekt ? "#691CD4" : CHAT_TEXT3, 1.9);
+      if (c.art === "projekt") {
+        g += '<rect x="' + n1(mx) + '" y="' + n1(my - 20) + '" width="40" height="40" rx="11" ' +
+          'fill="#F0E7FF" stroke="#e4d4ff" stroke-width="1.2"/>';
+        g += feather("briefcase", mx + 20, my, 20, "#691CD4", 1.9);
+      } else {
+        /* Die Gruppe traegt zwei ueberlappende Scheiben und kein Symbol. Das
+           Zwei-Personen-Piktogramm aus dem Feather-Satz steckt in jeder
+           zweiten Oberflaeche und sieht danach aus; zwei versetzte Avatare
+           sind das, was Teams und Linear an derselben Stelle zeigen, und sie
+           sprechen dieselbe Sprache wie die Kuerzelkreise der
+           Direktnachrichten daneben. Ohne Buchstaben, weil wir die Mitglieder
+           dieser Gruppe nicht kennen -- wie viele es sind, steht in der
+           Zeile darunter. */
+        /* Kontur in der Textfarbe des jeweiligen Avatars, nicht in der
+           allgemeinen Randfarbe: mit CHAT_RAND verschwammen die beiden
+           Scheiben bei Listengroesse zu einem Fleck. */
+        const a1 = AVATAR.blau, a2 = AVATAR.violett;
+        g += '<circle cx="' + n1(mx + 13) + '" cy="' + n1(my - 7) + '" r="13" fill="' +
+          a1.flaeche + '" stroke="' + a1.text + '" stroke-width="1.4" opacity=".9"/>';
+        g += '<circle cx="' + n1(mx + 27) + '" cy="' + n1(my + 7) + '" r="14.6" ' +
+          'fill="#FFFFFF"/>';
+        g += '<circle cx="' + n1(mx + 27) + '" cy="' + n1(my + 7) + '" r="13" fill="' +
+          a2.flaeche + '" stroke="' + a2.text + '" stroke-width="1.4" opacity=".9"/>';
+      }
     }
     const tx = mx + 52, rechts = x + LISTE_B - 16, frei = rechts - tx;
 
@@ -2671,13 +2695,20 @@ if (location.search.indexOf("nur=anim") >= 0)
     g += uiText(tx, y + 30, umbrechen(c.titel, frei - zeitB - 12, 17, 700, 1)[0],
                 17, 700, CHAT_TEXT);
     g += uiText(rechts, y + 30, c.zeit, 14, 500,
-                c.ungelesen ? "#691CD4" : CHAT_TEXT3, { anker: "end" });
+                c.ungelesen ? UNGELESEN : CHAT_TEXT3, { anker: "end" });
 
-    // Zeile 2: Vorschau, rechts der Punkt fuer Ungelesenes.
-    g += uiText(tx, y + 54, umbrechen(c.vorschau, frei - (c.ungelesen ? 22 : 0), 15, 500, 1)[0],
+    /* Zeile 2: Vorschau, rechts die Plakette. Sie traegt die Zahl der
+       ungelesenen Nachrichten und ist gruen -- ein farbloser Punkt sagt nur
+       "da war was", eine Zahl sagt, wie viel. So macht es jeder Messenger,
+       den ein Betrieb kennt. */
+    const zahl = c.ungelesen ? String(c.ungelesen) : "";
+    const zb = zahl ? Math.max(22, messen(zahl, 13, 800) + 14) : 0;
+    g += uiText(tx, y + 54, umbrechen(c.vorschau, frei - (zb ? zb + 8 : 0), 15, 500, 1)[0],
                 15, 500, c.ungelesen ? CHAT_TEXT : CHAT_TEXT2);
-    if (c.ungelesen) {
-      g += '<circle cx="' + n1(rechts - 6) + '" cy="' + n1(y + 49) + '" r="6" fill="#691CD4"/>';
+    if (zahl) {
+      g += '<rect x="' + n1(rechts - zb) + '" y="' + n1(y + 38) + '" width="' + n1(zb) +
+        '" height="22" rx="11" fill="' + UNGELESEN + '"/>';
+      g += uiText(rechts - zb / 2, y + 53, zahl, 13, 800, "#FFFFFF", { anker: "middle" });
     }
 
     // Zeile 3: die Zuordnung, rechts die Nadel.
@@ -3072,7 +3103,12 @@ if (location.search.indexOf("nur=anim") >= 0)
     const LISTE_SKALA = 1.28;
     const skB = sb * LISTE_SKALA, skH = sh * LISTE_SKALA, skM = m * LISTE_SKALA;
     const LX = 388;                       // wo der Kasten der Liste anfaengt
-    const W = LX + skB + skM, H = 736;
+    /* Der Kasten muss den skalierten Stapel samt Ueberstand fassen. Mit fest
+       gesetzten 736 ragte das hinterste, gedrehte Blatt fuenf Einheiten
+       darunter heraus -- stapelRand() rechnet den Ueberstand fuer die
+       unskalierte Groesse, und die Skalierung vergroessert ihn mit. */
+    const W = LX + skB + skM;
+    const H = Math.max(736, Math.ceil(skH + 2 * skM + 6));
     let g = "";
 
     /* Fest gesetzte Lagen statt gewuerfelter: ein Zufallsgenerator gaebe bei