feat(vorlagen): Editor, Liste und Versionsgeschichte

Der Redakteur baut eine Vorlage jetzt vollstaendig in der Oberflaeche: Liste mit
Suche und Filtern, Editor mit Abschnitten, Schritten und Variablen, Vorschau mit
Beispielwerten, Veroeffentlichen mit Aenderungsnotiz, Versionsgeschichte.

Sortiert wird mit dem Finger, der Maus, der Tastatur **und** zwei Knoepfen an
jeder Zeile — ein Touch-Drag gelingt auf einem 390-px-Geraet nicht jedem, und
die Reihenfolge ist fachlich zu wichtig fuer nur einen Weg. Schritte, Variablen
und Abschnitte klappen zu: dieselbe Vorlage misst am Handy 3 482 statt 16 986 px.

- src/lib/platzhalter.ts als einzige Quelle der eingebauten Platzhalter; der
  Editor warnt vor unbekannten, blockiert aber nichts
- Hilfetexte als Markdown ohne rohes HTML, Bilder als Alternativtext
- Erste Playwright-Tests: der Editor wird durch die Oberflaeche gefahren

Wichtigster Befund des Meilensteins: `next dev` hydriert in dieser Umgebung
ueberhaupt nicht — die Seiten sehen richtig aus, aber kein Knopf tut etwas
(2 von 1302 Elementen tragen React-Knoten, im gebauten Stand 1281 von 1296).
Nicht an diesem Code: auch ohne proxy.ts und ohne output: standalone. Ein
Screenshot beweist damit nichts ueber Bedienbarkeit. Oberflaechen werden ab
sofort gegen `pnpm build && pnpm start` abgenommen, und was nur mit angehaengtem
React gelingt, gehoert in einen Playwright-Test.

Der unabhaengige Review fand zwei Blocker: eine abgelaufene Anmeldung haette im
Editor jede ungespeicherte Arbeit vernichtet (der Rechtefehler lief bis in Nexts
Fehlergrenze), und das Speichern der Kopfdaten loeste eine archivierte
Kundenzuordnung stillschweigend auf. Dazu sechs weitere Befunde, alle behoben.

496 Tests gruen (vorher 428), dazu 5 E2E-Tests.

Schliesst #010

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

src/components/vorlage-aktionen.tsx

@@ -0,0 +1,170 @@
+"use client";
+
+import { useActionState, useState } from "react";
+import { Copy, Download, Trash2 } from "lucide-react";
+import {
+  entwurfVerwerfenAktion,
+  vorlageArchivierenAktion,
+  vorlageDuplizierenAktion,
+  vorlageExportierenAktion,
+  type AktionsErgebnis,
+} from "@/server/actions/vorlagen";
+
+// `w-fit`, damit ein Knopf in einem Block-Element nicht auf volle Breite geht –
+// drei verschieden breite Balken untereinander sehen aus wie ein Fehler.
+const KNOPF =
+  "flex w-fit min-h-11 items-center gap-2 rounded-pille border border-linie px-4 text-sm text-nebentext hover:bg-flaeche-hoch hover:text-text md:min-h-10";
+const FELD =
+  "min-h-11 rounded-karte border border-linie bg-grund px-3 text-sm text-text outline-none focus-visible:border-akzent";
+
+function Meldung({ ergebnis }: { ergebnis: AktionsErgebnis }) {
+  if (ergebnis.fehler) {
+    return (
+      <p role="alert" className="mt-2 max-w-prose text-sm text-fehler">
+        {ergebnis.fehler}
+      </p>
+    );
+  }
+  if (ergebnis.erfolg) {
+    return (
+      <p role="status" className="mt-2 max-w-prose text-sm text-erledigt">
+        {ergebnis.erfolg}
+      </p>
+    );
+  }
+  return null;
+}
+
+/**
+ * Entwurf verwerfen.
+ *
+ * Mit Rueckfrage, weil ein Entwurf nicht protokolliert wird: was hier
+ * verschwindet, ist wirklich weg. Die veroeffentlichte Version bleibt
+ * unberuehrt — genau das ist der Sinn des Entwurfs.
+ */
+export function EntwurfVerwerfen({ versionId }: { versionId: string }) {
+  const [ergebnis, aktion, laeuft] = useActionState<AktionsErgebnis, FormData>(entwurfVerwerfenAktion, {});
+  const [sicher, setSicher] = useState(false);
+
+  if (!sicher) {
+    return (
+      <button type="button" onClick={() => setSicher(true)} className={KNOPF}>
+        <Trash2 className="size-4" strokeWidth={1.75} aria-hidden="true" />
+        Entwurf verwerfen
+      </button>
+    );
+  }
+
+  return (
+    <div className="flex flex-col gap-2">
+      <p className="max-w-prose text-sm text-faellig">
+        Der Entwurf wird gelöscht und ist nicht wiederherstellbar. Die veröffentlichte Version bleibt.
+      </p>
+      <div className="flex flex-wrap gap-2">
+        <form action={aktion}>
+          <input type="hidden" name="versionId" value={versionId} />
+          <button
+            type="submit"
+            disabled={laeuft}
+            className="flex min-h-11 items-center rounded-pille border border-fehler px-4 text-sm text-fehler hover:bg-fehler/10 md:min-h-10"
+          >
+            {laeuft ? "Wird verworfen …" : "Ja, verwerfen"}
+          </button>
+        </form>
+        <button type="button" onClick={() => setSicher(false)} className={KNOPF}>
+          Abbrechen
+        </button>
+      </div>
+      <Meldung ergebnis={ergebnis} />
+    </div>
+  );
+}
+
+/** Duplizieren: neue Vorlage, Inhalt der neuesten Version als Entwurf. */
+export function VorlageDuplizieren({ vorlageId, name }: { vorlageId: string; name: string }) {
+  const [ergebnis, aktion, laeuft] = useActionState<AktionsErgebnis, FormData>(vorlageDuplizierenAktion, {});
+
+  return (
+    <details>
+      <summary className={`${KNOPF} cursor-pointer list-none`}>
+        <Copy className="size-4" strokeWidth={1.75} aria-hidden="true" />
+        Duplizieren
+      </summary>
+      <form action={aktion} className="mt-3 flex flex-col gap-3 sm:flex-row sm:items-end">
+        <input type="hidden" name="vorlageId" value={vorlageId} />
+        <label className="flex min-w-0 flex-1 flex-col gap-1.5 text-sm">
+          <span className="text-nebentext">Name der Kopie</span>
+          <input name="name" required defaultValue={`${name} (Kopie)`} className={FELD} />
+        </label>
+        <button type="submit" disabled={laeuft} className={KNOPF}>
+          {laeuft ? "Wird kopiert …" : "Kopie anlegen"}
+        </button>
+      </form>
+      <Meldung ergebnis={ergebnis} />
+    </details>
+  );
+}
+
+/** Archivieren statt loeschen – sonst verloere das Archiv seine Bezuege. */
+export function VorlageArchivieren({ vorlageId, archiviert }: { vorlageId: string; archiviert: boolean }) {
+  const [ergebnis, aktion, laeuft] = useActionState<AktionsErgebnis, FormData>(vorlageArchivierenAktion, {});
+
+  return (
+    <div>
+      <form action={aktion}>
+        <input type="hidden" name="vorlageId" value={vorlageId} />
+        <input type="hidden" name="archiviert" value={archiviert ? "false" : "true"} />
+        <button type="submit" disabled={laeuft} className={KNOPF}>
+          {archiviert ? "wieder freigeben" : "archivieren"}
+        </button>
+      </form>
+      <Meldung ergebnis={ergebnis} />
+    </div>
+  );
+}
+
+/**
+ * Export einer Version als Datei.
+ *
+ * Die Server Action gibt den Text zurueck, und der Browser legt daraus die
+ * Datei an. Ein Route Handler dafuer waere ein zweiter Weg zu denselben Daten,
+ * mit eigener Rechtepruefung — und damit eine zweite Stelle, die falsch sein kann.
+ */
+export function VersionExportieren({ versionId }: { versionId: string }) {
+  const [laeuft, setLaeuft] = useState(false);
+  const [fehler, setFehler] = useState<string | null>(null);
+
+  async function exportieren() {
+    setLaeuft(true);
+    setFehler(null);
+    try {
+      const ergebnis = await vorlageExportierenAktion(versionId);
+      if (!("inhalt" in ergebnis)) {
+        setFehler(ergebnis.fehler ?? "Der Export ist fehlgeschlagen.");
+        return;
+      }
+      const adresse = URL.createObjectURL(new Blob([ergebnis.inhalt], { type: "application/json" }));
+      const verweis = document.createElement("a");
+      verweis.href = adresse;
+      verweis.download = ergebnis.dateiname;
+      verweis.click();
+      URL.revokeObjectURL(adresse);
+    } finally {
+      setLaeuft(false);
+    }
+  }
+
+  return (
+    <div>
+      <button type="button" onClick={() => void exportieren()} disabled={laeuft} className={KNOPF}>
+        <Download className="size-4" strokeWidth={1.75} aria-hidden="true" />
+        {laeuft ? "Wird erzeugt …" : "Als JSON exportieren"}
+      </button>
+      {fehler ? (
+        <p role="alert" className="mt-2 max-w-prose text-sm text-fehler">
+          {fehler}
+        </p>
+      ) : null}
+    </div>
+  );
+}