Phase 3 abgeschlossen: Vorlagen, Abschnitte, Schwärzung, Diff

Eine Vorlage ist eine geordnete Liste von Bausteinen: Eingabefelder und feste
Textbausteine mit Platzhaltern. Damit trägt dieselbe Struktur den
Vorfallsbericht und den Sonderarbeitsvertrag. Die Startvorlagen bilden jetzt
den echten Bericht der Abteilung ab, samt Berichtsart, Gefahreneinschätzung
und Foundation-Freigabe — letztere als gewöhnliches Feld ohne Wirkung auf den
Zugriff.

Abschnitte werden gerendert und bearbeitet, Entwürfe alle zwei Sekunden lokal
gesichert. Gespeichert wird auf Knopfdruck: ein Abschnitt ist der Sachstand
der Akte, kein Chatbeitrag. Die geladene Version geht mit; weicht sie ab, gibt
es kein stilles Überschreiben, sondern beide Fassungen nebeneinander mit
"Meine übernehmen" und "Fremde übernehmen".

Felder über der Stufe des Lesers werden serverseitig durch einen Platzhalter
ersetzt, Schwärzungen im Fliesstext kommen als Segmente. Beides so, dass der
echte Wert den Server nicht verlässt — nicht als Ausblenden im Client.

Der Wortdiff ist selbst geschrieben statt eingekauft: ein Dutzend Zeilen gegen
30 kB im Bündel für etwas, das nur serverseitig läuft.

Beim Bauen des Vorlagen-Editors riss das Bündel-Budget auf 127,9 kB, weil zod
über das Vorlagenmodul in den Client geriet. Typen und Validierung sind jetzt
getrennt: fields.ts ohne zod für Client und Server, schema.ts nur
serverseitig. Wieder bei 111,9 kB von 120.

85 Tests, 22 E2E.

web/app/(app)/faelle/[caseNumber]/aenderungen/page.tsx

@@ -6,6 +6,7 @@ import { requireUser } from '@/lib/auth/current'
 import { loadVisibleCase } from '@/lib/cases/service'
 import { loadChangeHistory } from '@/lib/cases/entryService'
 import { de } from '@/lib/i18n/de'
+import { wordDiff } from '@/lib/diff'
 
 export const metadata: Metadata = { title: de.entry.changesHeading }
 export const dynamic = 'force-dynamic'
@@ -72,20 +73,23 @@ export default async function ChangesPage({
                 </p>
               ) : null}
 
-              <div className="mt-3 grid gap-4 md:grid-cols-2">
-                <div>
-                  <p className="font-condensed text-2xs text-text-dim">{de.entry.before}</p>
-                  <p className="mt-1 border-l-(length:--spacing-edge) border-line pl-3 text-sm whitespace-pre-wrap">
-                    {version.body}
-                  </p>
-                </div>
-                <div>
-                  <p className="font-condensed text-2xs text-text-dim">{de.entry.after}</p>
-                  <p className="mt-1 border-l-(length:--spacing-edge) border-steel pl-3 text-sm whitespace-pre-wrap">
-                    {version.entry.body}
-                  </p>
-                </div>
-              </div>
+              {/* Wortdiff statt zweier Spalten: bei langen Vermerken sieht man
+                  sonst nicht, was sich geändert hat. */}
+              <p className="mt-3 max-w-(--container-measure) text-sm whitespace-pre-wrap">
+                {wordDiff(version.body, version.entry.body).map((teil, index) =>
+                  teil.kind === 'gleich' ? (
+                    <span key={index}>{teil.text}</span>
+                  ) : teil.kind === 'entfernt' ? (
+                    <del key={index} className="text-stamp-4 decoration-stamp-4">
+                      {teil.text}
+                    </del>
+                  ) : (
+                    <ins key={index} className="text-stamp-2 no-underline">
+                      {teil.text}
+                    </ins>
+                  ),
+                )}
+              </p>
             </li>
           ))}
         </ol>