feat(vorlagen): Editor, Liste und Versionsgeschichte #24

2026-09-25T08:23:09Z

florian.wilde commented

2026-09-25 08:23:09 +00:00

Schließt #10.

Der Redakteur baut eine Vorlage jetzt vollständig in der Oberfläche: Liste mit Suche und Filtern, Editor mit Abschnitten, Schritten und Variablen, Vorschau mit Beispielwerten, Veröffentlichen mit Änderungsnotiz, Versionsgeschichte.

Sortieren auf vier Wegen

Mit dem Finger (TouchSensor, 200 ms Halteschwelle, damit eine Wischgeste ein Bildlauf bleibt), mit der Maus, mit der Tastatur und über zwei Knöpfe an jeder Zeile. Ein Touch-Drag gelingt auf einem 390-px-Gerät nicht jedem zuverlässig, und die Reihenfolge der Schritte ist fachlich zu wichtig für nur einen Weg.

Schritte, Variablen und Abschnitte klappen zu. Mit einer einzigen Beispielvorlage war der Editor vorher 16 986 px hoch — mit den sieben Vorlagen aus #017 (rund 150 Schritte) wäre er unbenutzbar gewesen. Jetzt sind es 3 482 px am Handy.

Der teuerste Befund: ein Screenshot beweist nichts

next dev hydriert in dieser Umgebung überhaupt nicht. Die Seiten werden serverseitig gerendert und sehen vollständig richtig aus, aber React hängt sich nie an: kein Knopf tut etwas. Gemessen — im Entwicklungsmodus tragen 2 von 1302 Elementen React-Knoten, im gebauten Stand 1281 von 1296. Es liegt nicht an diesem Code: auch ohne src/proxy.ts und ohne output: "standalone" bleibt es dabei.

Zwei Folgen, beide in CLAUDE.md und docs/architektur.md:

Oberflächen werden gegen pnpm build && pnpm start abgenommen, ebenso die Screenshots.
Was nur mit angehängtem React gelingt, gehört in einen Playwright-Test. pnpm test:e2e klickt den Editor durch: anlegen, tippen, mit dem Finger sortieren bei 390 px, speichern, neu laden und nachsehen, ob es wirklich in der Datenbank steht.

Nebenbei gefunden: die CSP hatte im Entwicklungsmodus kein unsafe-eval, das React dort braucht. Behoben; der ausgelieferte Stand bleibt streng, und der Test prüft jetzt den Proxy selbst statt nur die Funktion darunter.

Der Review

Zwei Blocker:

Eine abgelaufene Anmeldung hätte im Editor jede ungespeicherte Arbeit vernichtet. rechtErforderlich wirft, der Wurf lief durch die Server Action bis in Nexts Fehlergrenze, und die hängt die Seite aus. Nach zwölf Stunden läuft die Sitzung von selbst ab — es hätte genau die Person getroffen, die lange an einer Vorlage sitzt. Jetzt wird der Fehler gefangen, und der Aufbau lässt sich bei jedem fehlgeschlagenen Speichern als JSON herauskopieren.
Das Speichern der Kopfdaten löste eine archivierte Kundenzuordnung auf. Der archivierte Kunde fehlte in der Auswahlliste, der Browser wählte die erste Option, und aus einer kundenspezifischen Vorlage wurde eine für alle sichtbare.

Dazu sechs weitere Befunde: zwei stille Textverfälscher (24 · 7 Bereitschaft → 7 Bereitschaft; $& als Rückverweis im Ersatztext), eine Zusage im Kommentar ohne Test, unbrauchbare Fehlermeldungen (abschnitte.2.schritte.0.titel), ein ungeprüfter Doku-Link in der Vorschau, ein „Scannen“-Knopf, der auf jeder Seite eine 404 vorablud.

Prüfung

pnpm lint && pnpm typecheck && pnpm format:pruefen && pnpm test && pnpm pruefe:doku grün, 496 Tests (vorher 428), dazu 5 E2E-Tests gegen den gebauten Stand. Screenshots in docs/screenshots/m5/, je Desktop und Handy, kein horizontales Scrollen bei 390 px.

🤖 Generated with Claude Code

Schließt #10. Der Redakteur baut eine Vorlage jetzt vollständig in der Oberfläche: Liste mit Suche und Filtern, Editor mit Abschnitten, Schritten und Variablen, Vorschau mit Beispielwerten, Veröffentlichen mit Änderungsnotiz, Versionsgeschichte. ## Sortieren auf vier Wegen Mit dem Finger (`TouchSensor`, 200 ms Halteschwelle, damit eine Wischgeste ein Bildlauf bleibt), mit der Maus, mit der Tastatur **und** über zwei Knöpfe an jeder Zeile. Ein Touch-Drag gelingt auf einem 390-px-Gerät nicht jedem zuverlässig, und die Reihenfolge der Schritte ist fachlich zu wichtig für nur einen Weg. Schritte, Variablen und Abschnitte klappen zu. Mit einer einzigen Beispielvorlage war der Editor vorher 16 986 px hoch — mit den sieben Vorlagen aus #017 (rund 150 Schritte) wäre er unbenutzbar gewesen. Jetzt sind es 3 482 px am Handy. ## Der teuerste Befund: ein Screenshot beweist nichts `next dev` hydriert in dieser Umgebung **überhaupt nicht**. Die Seiten werden serverseitig gerendert und sehen vollständig richtig aus, aber React hängt sich nie an: kein Knopf tut etwas. Gemessen — im Entwicklungsmodus tragen 2 von 1302 Elementen React-Knoten, im gebauten Stand 1281 von 1296. Es liegt nicht an diesem Code: auch ohne `src/proxy.ts` und ohne `output: "standalone"` bleibt es dabei. Zwei Folgen, beide in `CLAUDE.md` und `docs/architektur.md`: 1. Oberflächen werden gegen `pnpm build && pnpm start` abgenommen, ebenso die Screenshots. 2. Was nur mit angehängtem React gelingt, gehört in einen Playwright-Test. `pnpm test:e2e` klickt den Editor durch: anlegen, tippen, mit dem Finger sortieren bei 390 px, speichern, neu laden und nachsehen, ob es wirklich in der Datenbank steht. Nebenbei gefunden: die CSP hatte im Entwicklungsmodus kein `unsafe-eval`, das React dort braucht. Behoben; der ausgelieferte Stand bleibt streng, und der Test prüft jetzt den Proxy selbst statt nur die Funktion darunter. ## Der Review Zwei Blocker: - **Eine abgelaufene Anmeldung hätte im Editor jede ungespeicherte Arbeit vernichtet.** `rechtErforderlich` wirft, der Wurf lief durch die Server Action bis in Nexts Fehlergrenze, und die hängt die Seite aus. Nach zwölf Stunden läuft die Sitzung von selbst ab — es hätte genau die Person getroffen, die lange an einer Vorlage sitzt. Jetzt wird der Fehler gefangen, und der Aufbau lässt sich bei jedem fehlgeschlagenen Speichern als JSON herauskopieren. - **Das Speichern der Kopfdaten löste eine archivierte Kundenzuordnung auf.** Der archivierte Kunde fehlte in der Auswahlliste, der Browser wählte die erste Option, und aus einer kundenspezifischen Vorlage wurde eine für alle sichtbare. Dazu sechs weitere Befunde: zwei stille Textverfälscher (`24 · 7 Bereitschaft` → `7 Bereitschaft`; `$&` als Rückverweis im Ersatztext), eine Zusage im Kommentar ohne Test, unbrauchbare Fehlermeldungen (`abschnitte.2.schritte.0.titel`), ein ungeprüfter Doku-Link in der Vorschau, ein „Scannen“-Knopf, der auf jeder Seite eine 404 vorablud. ## Prüfung `pnpm lint && pnpm typecheck && pnpm format:pruefen && pnpm test && pnpm pruefe:doku` grün, **496 Tests** (vorher 428), dazu **5 E2E-Tests** gegen den gebauten Stand. Screenshots in `docs/screenshots/m5/`, je Desktop und Handy, kein horizontales Scrollen bei 390 px. 🤖 Generated with [Claude Code](https://claude.com/claude-code)

florian.wilde added 1 commit 2026-09-25 08:23:10 +00:00

feat(vorlagen): Editor, Liste und Versionsgeschichte

Prüfung / pruefung (pull_request) Canceled after 0s

Details

Prüfung / pruefung (push) Canceled after 0s

Details

Prüfung / e2e (pull_request) Canceled after 0s

Details

Prüfung / e2e (push) Canceled after 0s

Details

548c090562

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>

florian.wilde merged commit e3d80e5982 into main

2026-09-25 08:23:22 +00:00

florian.wilde deleted branch feat/10-vorlagen-editor

2026-09-25 08:23:22 +00:00

florian.wilde referenced this issue from a commit

2026-09-26 13:53:22 +00:00

feat(betrieb): native Installation, Proxmox-Einzeiler und Abnahme

florian.wilde referenced this pull request

2026-09-26 13:53:52 +00:00

feat(betrieb): native Installation, Proxmox-Einzeiler und Abnahme #37

florian.wilde referenced this issue from a commit

2026-10-11 04:05:40 +00:00