bin/docs/superpowers/specs/2026-07-20-szenarien-seite-ux-design.md

Design — Ausbaustufe 7: Szenarien-Seite, Formular-UX, Kategorien-Verwaltung (v0.8.0)

Status: vom Nutzer freigegeben (Chat 2026-07-20, inkl. Direktdurchlauf). Anlass: Nutzertest von v0.7.0 — vier Befunde: (1) Eintragsart „Einmalzahlung" im Formular nicht auffindbar (Layout verschleiert, welches Dropdown was steuert), (2) irrelevantes Kategorie-Dropdown bei Einmalzahlung + keine GUI zum Anlegen von Kategorien, (3) Label/Feld-Paare zerfließen über Zeilen, „Durchrechnen" klebt am Formular, (4) Felder „Wert" vs. „Betrag" unverständlich, gesperrte Felder nicht als gesperrt erkennbar.

Nutzerentscheidungen

• Szenarien auf eigene Seite /szenarien (Nav-Punkt zwischen Planung und Admin); Planung behält Fixposten/Einmalposten/Kredite.
• Nicht zur Eintragsart passende Felder bleiben sichtbar, aber gesperrt und optisch deutlich gekennzeichnet (grau gefüllt, gedimmt) — keine Ausblendung.
• Kategorien-Verwaltung auf der Admin-Seite (anlegen + umbenennen, bewusst kein Löschen — FK-Abhängigkeiten zu Buchungen/Regeln/Posten/ Modifikatoren wären ein eigenes Thema).
• Kein „Keine"-Eintrag im Kategorie-Dropdown des Eintrags-Formulars (Kategorie-Modifikator braucht zwingend ein Ziel).

1. Szenarien-Seite

• routers/gui.py: neue Route GET /szenarien (szenarien_page, gui_session-geschützt) mit dem Szenario-Kontext (scenario_rows, loans, categories/category_names, recurring/recurring_names, modifier_kinds); planung_page verliert scenario_rows/modifier_kinds.
• Neues Template szenarien.html (extends base): komplette bisherige Szenarien-<section> aus planning.html (Kopf+Edit, Kredite zuordnen, Einträge-Tabelle, Neuer Eintrag, Durchrechnen, Ergebnis, Neues Szenario) plus die szenario-spezifischen JS-Helfer (onModTargetTypeChange, onEntryArtChange, toggleScenarioLoan).
• toggleEdit (von Planung UND Szenarien gebraucht) zieht in den zentralen Script-Block von base.html.
• Nav in base.html: „Szenarien" zwischen „Planung" und „Admin".
• hilfe.html: Verweise „auf der Planung-Seite" für Szenarien anpassen.

2. Formular-UX (style.css + Templates)

• Paar-Layout: Regel für Formular-Labels der Planungs-/Szenarien- Formulare: label als inline-flex-Einheit (Label + Feld in einer Zeile, white-space: nowrap, gap), Paare mit Außenabstand voneinander getrennt. Gilt automatisch auch für die Bearbeiten-Formulare (gleiches Markup).
• Gesperrt-Kennzeichnung: input:disabled, select:disabled → graue Füllung, gedimmter Text, cursor: not-allowed; label:has(:disabled) → reduzierte Deckkraft + title-Tooltip im Markup der umschaltbaren Felder („Für diese Eintragsart nicht relevant").
• Struktur „Neuer Eintrag": Eintragsart als erste, eigene Zeile mit fettem Label und Hinweistext („die passenden Felder werden aktiv"); danach die Feldpaare. Dynamisches Wert-Label in onEntryArtChange: percent → „Prozentsatz (%)", absolute → „Kürzung (€)", sonst „Wert" — Label-Text via <span class="value-label">.
• „Durchrechnen" in eigenem, per Abstand/<hr> abgesetztem Block.

3. Kategorien-Verwaltung (Admin)

• Neuer Endpunkt PATCH /api/categories/{category_id} in routers/categories.py: Body CategoryIn, 404 „Kategorie nicht gefunden", 409 „Kategorie existiert bereits" bei Namenskollision mit anderer Kategorie, Antwort CategoryOut.
• admin.html: Abschnitt „Kategorien" — Tabelle (Name + Bearbeiten/ Inline-Umbenennen nach toggleEdit-Muster, IDs cat-row-{id}/ cat-edit-{id}) + Formular „Neue Kategorie anlegen" (POST /api/categories via json-form). Kein Löschen.
• routers/admin.py::admin_page lädt die Kategorienliste in den Kontext.

4. Tests / Release

• GUI-Tests: /szenarien rendert Szenario-Inhalte, ist login-geschützt und in der Nav; /planung enthält KEINE Szenarien-Sektion mehr (bestehende Szenario-GUI-Tests auf /szenarien umziehen); Admin-Seite zeigt Kategorien-Abschnitt.
• API-Tests: PATCH Kategorie (Erfolg, 404, 409-Kollision, Umbenennung auf eigenen Namen erlaubt).
• CSS ist nicht automatisiert testbar → Fable-Gate prüft die gerenderte Struktur (Klassen/Tooltips/Label-Spans) und macht den Live-Check.
• VERSION → 0.8.0, Redeploy, Live-Check (Szenarien-Seite mit Best Case, Kategorien-Anlage+Umbenennung live mit Wegwerf-Kategorie).

Außerhalb des Scopes: Kategorie-Löschen/-Zusammenführen, Regel-Pflege- GUI, Änderungen an Engine/Projektion/Datenmodell (keine Migration).