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>
This commit is contained in:
co-authored by
Claude Opus 5
parent
d8d5444e9f
commit
548c090562
@@ -149,12 +149,37 @@ createdb -h 127.0.0.1 -p 5434 -U laufzettel laufzettel_review
|
||||
TEST_DATABASE_URL=postgresql://laufzettel:laufzettel@localhost:5434/laufzettel_review pnpm test
|
||||
```
|
||||
|
||||
## Oberfläche prüfen
|
||||
|
||||
**Immer gegen den gebauten Stand, nie gegen `pnpm dev`:**
|
||||
|
||||
```bash
|
||||
pnpm build && PORT=3300 APP_URL=http://127.0.0.1:3300 pnpm start
|
||||
```
|
||||
|
||||
In dieser Umgebung hydriert `next dev` nicht: die Seiten werden serverseitig
|
||||
gerendert und sehen vollständig richtig aus, aber React hängt sich nie an — kein
|
||||
Knopf, kein Formular, kein Sortieren tut etwas. Nachgewiesen in #010, und zwar
|
||||
auch ohne `src/proxy.ts` und ohne `output: "standalone"`; der HMR-WebSocket
|
||||
scheitert dort mit `ERR_INVALID_HTTP_RESPONSE`. Es liegt also am Werkzeug, nicht
|
||||
an diesem Code — der gebaute Stand hydriert einwandfrei (1281 von 1296 Elementen
|
||||
tragen React-Knoten, im Entwicklungsmodus 2).
|
||||
|
||||
Das ist heimtückisch: ein Screenshot beweist damit **nichts** über Bedienbarkeit.
|
||||
Wer eine Oberfläche abnimmt, klickt sie im gebauten Stand durch — hinzufügen,
|
||||
speichern, neu laden, und nachsehen, ob es wirklich in der Datenbank steht.
|
||||
`pnpm docs:screenshots` verlangt deshalb ebenfalls den gebauten Stand.
|
||||
|
||||
## Vor jedem Commit
|
||||
|
||||
```bash
|
||||
pnpm lint && pnpm typecheck && pnpm test && pnpm pruefe:doku
|
||||
pnpm lint && pnpm typecheck && pnpm format:pruefen && pnpm test && pnpm pruefe:doku
|
||||
```
|
||||
|
||||
`format:pruefen` gehört dazu, seit der Review in #010 darauf gestoßen ist: `lint-staged` formatiert
|
||||
beim Commit automatisch nach, und das Ergebnis wäre ein Commit mit Änderungen, die niemand gesehen
|
||||
hat. Lieber vorher sehen, was sich ändert.
|
||||
|
||||
Der Pre-Commit-Hook erzwingt Lint und Format, der Commit-Msg-Hook Conventional Commits mit
|
||||
höchstens 72 Zeichen im Betreff. Ein Commit pro abgeschlossener, lauffähiger Änderung. Kein
|
||||
`wip` auf `main`. Fußzeile referenziert das Issue: `Closes #12`.
|
||||
@@ -166,5 +191,20 @@ und aktive Zustände. Token stehen als CSS-Variablen in `src/app/globals.css` un
|
||||
Komponenten greifen nur darauf zu, nie auf rohe Hexwerte. Schriften selbst gehostet über
|
||||
`@fontsource-variable`. Icons ausschließlich Lucide-Stroke-SVGs — **keine Emojis**. Keine
|
||||
Verläufe, keine Schatten; Karten mit 1-px-Linie. Buttons als Pillen, 40 px hoch, am Handy 44–46 px.
|
||||
Abschnitte mit zweistelliger Nummer (`01 · Vorbereitung`). Druckansichten und Etiketten immer hell.
|
||||
Abschnitte mit zweistelliger Nummer (`01 · Vorbereitung`), die aus der Position
|
||||
kommt und nie gespeichert wird. Druckansichten und Etiketten immer hell.
|
||||
**Am Handy nie horizontales Scrollen** — bei 390 px geprüft.
|
||||
|
||||
> Der folgende Block ist **nicht von uns**: `next dev` schreibt ihn bei jedem Start selbst in diese
|
||||
> Datei und stellt ihn wieder her, wenn man ihn löscht. Er steht deshalb hier, auf Englisch, und
|
||||
> wird mitcommittet, damit der Arbeitsbaum sauber bleibt.
|
||||
|
||||
<!-- BEGIN:nextjs-agent-rules -->
|
||||
|
||||
# This is NOT the Next.js you know
|
||||
|
||||
This version has breaking changes — APIs, conventions, and file structure may all differ from your training data. Read the relevant guide in `node_modules/next/dist/docs/` (resolved from this file's directory; in monorepos the `next` package may not be visible from the repo root) before writing any code. Heed deprecation notices.
|
||||
|
||||
This block is written and re-added by `next dev` — verify at `node_modules/next/dist/server/lib/generate-agent-files.js`. Removing it from a diff only re-creates the uncommitted change; committing it with your work keeps the tree clean.
|
||||
|
||||
<!-- END:nextjs-agent-rules -->
|
||||
|
||||
Reference in New Issue
Block a user