diff --git a/SPEZIFIKATION.md b/SPEZIFIKATION.md index 72cfbb1..eaad7ad 100644 --- a/SPEZIFIKATION.md +++ b/SPEZIFIKATION.md @@ -4,10 +4,10 @@ | | | |---|---| | **Dokument** | Funktionale und Technische Spezifikation FPT | -| **Version** | 0.42.1 | +| **Version** | 0.42.2 | | **Datum** | 2026-07-25 | | **Status** | Lebendes Dokument | -| **Codestand** | Arbeitsstand nach `f41c361` inkl. Memo 2026081702 (Branch `main`) | +| **Codestand** | Arbeitsstand nach `ff862ed` inkl. Memo 2026081703 (Branch `main`) | | **Ersetzt** | `FDD_TDD_FPT.docx` (v1–v5) im Ordner `Info Dateien` – diese sind ab Version 0.1 dieses Dokuments obsolet | | **Geltungsbereich** | Gesamter Code im Verzeichnis `FPT` | @@ -17,6 +17,7 @@ | Version | Datum | Autor | Änderung | |---|---|---|---| +| 0.42.2 | 2026-08-17 | Claude (Opus 5) | **Memo 2026081703** – Feinschliff der neuen Oberfläche, sechs Punkte. (1) **Die Menüleiste schiebt, statt zu überlappen.** Beim Ausfahren legte sie sich über den Inhalt; ein Streifen verschwand jedes Mal, und das las sich wie ein Fehler. Neu ist der ausgefahrene Zustand optisch identisch mit dem angepinnten – das Anpinnen entscheidet nur noch, ob es so BLEIBT. (2) **Suchen und Anpinnen stehen direkt unter den Systemparametern** statt am Fuss der Leiste. Die Leiste ist so hoch wie die Seite, und mit einer aufgeklappten Karte wird die sehr lang – am Fuss waren die beiden ausserhalb des Blickfelds. Zusätzlich klebt der Inhalt beider Leisten neu am oberen Bildschirmrand (`sticky`), sonst scrollt die Steuerung beim Arbeiten weg. (3) **Die Karte nutzt nicht mehr die volle Breite**, sondern höchstens 46 rem. Eine Zeile aus 1300 px liest sich schlecht: Das Auge verliert beim Zeilenwechsel den Anschluss, und Beschriftung und Wert driften so weit auseinander, dass man sie nicht mehr zusammenbringt. Die frei werdende Luft links und rechts trägt zwei **grosse Pfeile** zur Nachbarphase – ein Bedienelement, das keinen zusätzlichen Platz kostet. (4) **Die drei Akte sind sichtbar getrennt.** Vorher schied sie nur eine Haarlinie, und man las die Karte als eine lange Liste statt als drei Schritte. Neu trägt jeder Akt einen getönten Kopfstreifen über die volle Breite mit einer **Nummer im Kreis**; «Ergebnis» ist durchgehend getönt und trägt die Nummer im Akzent – es ist der Schlusspunkt, nicht ein weiterer Abschnitt. (5) **Die Zeitachse neu gezeichnet**: kein Kasten mit Überschrift, keine Legende, keine Fusszeile. Stattdessen abgesetzte Kacheln, deren Abstand die Phasengrenze zeigt, dazwischen ein Pfeil für den Übergang, und die Marker (Pensionierung, Ruinalter, erfasste Ist-Jahre) sitzen als Pillen direkt an der Leiste statt darüber zu schweben. (6) **Cash verhält sich wie jede andere Zeile.** Es war der einzige Eintritts-Punkt, der das rechte Panel öffnete statt aufzuklappen – auf einer Karte, die genau davon wegwollte, ein Fremdkörper. Neu klappt es inline auf, mit denselben Feldern (`CashTransitionFields`) und eigenem Speichern. | | 0.42.1 | 2026-08-17 | Claude (Opus 5) | **Memo 2026081702** – vier Befunde aus der ersten Testrunde der neuen Oberfläche. (1) **Die Kartenansicht war überhaupt nicht erreichbar** – der Umschalter dauerhaft ausgegraut. Ursache: Die Bedingung lautete `forceMatrix = !!diff`, aber `computeScenarioDiff` liefert **immer** ein Objekt (bei Gleichheit ein leeres). Auch `diff.total > 0` wäre falsch gewesen: Ein Kind-Szenario weicht nach der ersten Änderung immer von seiner Vorlage ab, Karten wären dort für immer gesperrt. Die Diff-Markierungen sind eine **Verzierung** der Matrix, kein Modus. Neu erzwingt nur die **Ist-Ansicht** die Matrix (das ist ein Modus, in den man bewusst wechselt); bei Abweichungen zur Vorlage steht in der Kartenansicht ein Hinweis mit dem Weg dorthin. (2) **Die Menüleiste wechselte beim Überfahren die Darstellung** – eingeklappt Icons, ausgefahren ein Plan-Baum. Das war kein Übergang, sondern ein Sprung. Neu ist es **eine Komponente in zwei Breiten**: Die Symbole sitzen in einer festen 3.5-rem-Spalte und bleiben exakt an ihrem Platz, rechts daneben fährt nur die Beschriftung aus. Damit entfällt der Baum aller Pläne; er wird nicht vermisst, weil der Plan über den Wähler oben gewechselt wird und die vier Bereiche sich immer auf den **aktiven** Plan beziehen. Plan anlegen und löschen sind in den Wähler gewandert, der Szenario-Baum hängt aufklappbar unter «Szenarien». (3) **Die Matrix schob sich vor die ausgefahrene Leiste.** Ihre sticky Köpfe tragen `z-40` und konkurrierten damit global; die Ecke oben links gewann. Die Matrix ist neu ein eigener **Stapel-Kontext** (`relative z-0`) – ihre Köpfe stapeln sich nur noch untereinander. (4) **Die Kachel «Offene Punkte» zog sich über den ganzen Bildschirm**, auch mit einem einzigen Eintrag: ein `h-full` aus der Zeit, als die vier Kacheln in einem Raster gleich hoch sein mussten. In der rechten Leiste ist das falsch – sie ist jetzt so hoch wie ihr Inhalt. | | 0.42 | 2026-08-17 | Claude (Opus 5) | **Kartenansicht und Drei-Spalten-Shell** (neues Kapitel 3.15). Der grösste Eingriff in die Oberfläche seit 0.36 – und er behebt eine Ursache statt Symptome. Ausgemessen war die Lage eindeutig: Der Phasenkopf trug 220 px an Kennzahlen, dauerhaft fixiert; von 675 px Matrixhöhe blieben 430 px zum Arbeiten. Fünf Phasen brauchten 1760 px Breite, sichtbar waren mit offenem Panel 1024 px. Und das Bearbeitungs-Panel (`fixed right-0`, 416 px) legte sich ausgerechnet über die Spalte, zu der man gerade gescrollt hatte. (1) **Eine Karte je Lebensphase** ersetzt die Matrix als Arbeitsansicht. Sie erzählt die Phase als Zeitablauf: **Eintritt** (der Übergang aus der Vorphase; bei Phase 1 der Bestand), **Laufend** (die Elemente mit ihren Annahmen und die Quote), **Ergebnis** (Vermögen und Cash am Phasenende). Horizontales Scrollen entfällt vollständig. Der Übergang gehört bewusst zur FOLGEphase – dort wird das frei werdende Kapital verteilt, konsistent mit 0.41. (2) **Bearbeitet wird IN der Karte.** Ein Klick klappt die Zeile auf, die Felder stehen darunter. Damit kann nichts mehr verdecken, woran man arbeitet – das Panel bleibt nur für die Matrix. Ein Knopf im Kartenkopf klappt **alle** Zeilen auf oder zu; bei acht Elementen ist das der Unterschied zwischen einmal durchsehen und acht Klicks. (3) **Die Zeitachse wird zum Navigator**: Das Segment der offenen Karte ist hervorgehoben, ein Klick springt hin. Dazu Pfeilknöpfe unten und die **Pfeiltasten** (ausser in Eingabefeldern – sonst springt die Karte beim Tippen weg). (4) **Die Matrix bleibt als Vergleichsansicht.** Umschalter oben rechts; die Wahl gehört zum Benutzer und überlebt die Sitzung. Ein Szenario-Diff oder eine Ist-Ansicht **erzwingt** die Matrix: Vergleich über alle Phasen kann eine einzelne Karte prinzipiell nicht leisten, und stillschweigend die falsche Darstellung anzubieten wäre schlechter als der Wechsel. (5) **Drei-Spalten-Shell.** Die Menüleiste links ist eingeklappt eine **Icon-Schiene** (56 statt 256 px); beim Überfahren fährt sie als Overlay aus, ein **Pin** hält sie breit. Die vier Kacheln wandern von oben in eine **rechte Leiste** mit aufklappbaren Abschnitten. Das ist der entscheidende Tausch: Sie kosteten oben **vertikalen** Platz, rechts kosten sie horizontalen – und Höhe ist auf einem Breitbildschirm die knappe Grösse. Eingeklappt bleibt die Zahl der offenen Punkte am Knopf sichtbar. Zusammen: statt 1184 × 574 rund **1328 × 804** für den Inhalt, also +12 % Breite und **+40 % Höhe**. (6) Der Anzeige-Umschalter nominal/beide/real steht neu auch in der Werkzeugleiste (`ValueModeSwitch`, eine Implementierung für beide Orte). Neue Komponente `PhaseCards`; `ElementDetail` bekommt eine `compact`-Variante, `Timeline` die Navigator-Rolle, `Tile` eine rahmenlose Variante. Kein Eingriff in den Rechenkern; 337 Tests unverändert grün. | | 0.41 | 2026-08-17 | Claude (Opus 5) | **Memo 2026081701** – zehn Punkte aus einer Testrunde, mehrheitlich Feinschliff, zwei davon inhaltlich. (1) **Die Kapitalverwendung heisst neu Schuldentilgung · Investition · Cash, und die Tilgung hat ein wählbares Ziel** (`capitalUseDebtTargetElementId`): eine Immobilie **oder** eine sonstige Schuld. Bisher floss die Quote stur in die erstbeste Immobilie – wer neben einer Hypothek zu 1,5 % einen Konsumkredit zu 6 % trägt, konnte den Kredit gar nicht zuerst tilgen. Ohne Wahl bleibt es beim alten Verhalten, damit bestehende Pläne unverändert rechnen. **Cash ist neu eine gleichrangige Zeile** statt einer blassen Fussnote: «ich lasse es liegen» ist ein legitimer Entscheid. Rechnerisch bleibt es der Rest – alle drei frei eintippbar zu machen hiesse, dass beim Tippen still eine andere Zahl wandert. (2) **Die Maske gibt es neu auch bei der Säule 3a.** Dort stellt sich die Frage sogar zwingender als bei der PK: Ein 3a-Konto wird IMMER vollständig bezogen, es fliesst also in jedem Fall ein grosser Betrag – der bis 0.40 stumm auf dem Cash landete. (3) **Je Person entsteht beim Abschluss der Bestandsaufnahme automatisch ein AHV-Element**, idempotent (wer die Bestandsaufnahme später korrigiert, bekommt kein zweites). Die AHV ist die einzige Kategorie ohne Bestand – ein Plus-Knopf mit leerer Karte wäre sinnlos, das Element wegzulassen aber auch: Ohne es rechnet der Plan ab der Pensionierung mit einer AHV-Rente von 0. Die Karte in der Bestandsaufnahme sagt neu, warum dort nichts zu erfassen ist. (4) **Farben folgen der Bedeutung, nicht dem Zustand.** Ein einmaliger Cash-Zufluss am Übergang trug die Akzentfarbe – im warmen Schema ein Orangerot, das eine Erbschaft wie einen Fehler aussehen liess; neu ist er grün, ein Abfluss neutral. Die Knöpfe «Kapital verteilen» und «Sparquote verteilen» sind **grün mit Haken, sobald erledigt** – vorher sah man einer vollständig verteilten Phase nicht an, dass sie fertig war. (5) **Sechs Stellen mit unlesbarer Schrift behoben:** `text-attention-fg` ist **weiss** und für vollflächigen Attention-Grund gedacht; auf hellem oder 10-%-Grund war der Text im warmen und im hellen Schema praktisch unsichtbar (PK-Einkaufswarnung, 3a-Kollision, fehlendes Anlageziel, zwei Stellen in der Kachel «Offene Punkte»). (6) **Der Kapitalanteil-Regler hatte keine sichtbare Schiene**: `appearance-none` schaltet die native Darstellung ab, womit auch `accent-color` nicht mehr greift – übrig blieb der blosse Knopf. (7) **Der Umwandlungssatz verschwindet bei 100 % Kapital**, spiegelbildlich zur Kapitalbezugssteuer bei 0 %. Bei vollem Kapitalbezug wird nichts verrentet. (8) **Der Dialog «Neue Lebensphase» erklärt die Dauer-Kappung** – welches Ereignis sie setzt und warum (die Rechnung leitet Erwerbsstatus und Bezüge am Phasen**beginn** ab). Vorher stand dort nur «max. N». (9) **Zustand statt Regel nach der Pensionierung:** Die Zellen von PK und 3a beschrieben in der Pensionsphase die Regel im Futur («wird berechnet», «wird bezogen»), obwohl der Bezug längst geschehen war. Neu steht dort der gerechnete Stand – bei der PK die Rente in Franken oder «Vollständig bezogen», bei der 3a «Vollständig bezogen». (10) **Eine Vokabel für einen Gedanken:** Die Bestätigung der Pensionsentscheide heisst neu «angeschaut» wie die der Phasenzellen, und der Erklärtext sagt ausdrücklich, dass der Haken **keine Zahl ändert**. Zwei Wörter für dieselbe Sache hatten mehr verwirrt als geholfen. Die Fixpunkt-Kappung um AHV-, PK- und 3a-Bezugsalter zu erweitern wurde **bewusst zurückgestellt** – im Basisszenario ist das Pensionsalter fest 65, das Thema gehört zur Szenario-Art «Frühpensionierung» (Roadmap Nr. 48). 3 Tests ergänzt (334 → 337). | @@ -2529,18 +2530,40 @@ Sonderamortisation und Sofort-Tilgung eingeführt hat ([3.12.5](#3125-punkt-c-ve Der Preis ist bekannt: Wer den Hausverkauf gedanklich am Ende von Phase N trifft, findet ihn auf Karte N+1. Bewusst in Kauf genommen, weil dort die **Folgen** stehen. +**Die Karte ist auf 46 rem begrenzt** und steht zentriert. Die volle Breite auszunutzen war +verlockend und falsch: Eine Zeile aus 1300 px liest sich schlecht, weil das Auge beim +Zeilenwechsel den Anschluss verliert und Beschriftung und Wert so weit auseinanderdriften, dass +man sie nicht mehr zusammenbringt. Die Luft links und rechts ist kein Verlust – sie trägt die +beiden **grossen Pfeile** zur Nachbarphase, ein Bedienelement ohne eigenen Platzbedarf. + +**Die drei Akte sind sichtbar getrennt.** Jeder trägt einen getönten Kopfstreifen über die +volle Breite mit einer Nummer im Kreis; «Ergebnis» ist durchgehend getönt und trägt die Nummer +im Akzent – es ist der Schlusspunkt, nicht ein weiterer Abschnitt. Der erste Anlauf trennte sie +nur mit einer Haarlinie, und man las die Karte als eine lange Liste statt als drei Schritte. + **Bearbeitet wird in der Karte.** Ein Klick klappt die Zeile auf, die Felder stehen darunter – dieselben wie im Panel (`ElementDetail` mit `compact`), also keine zweite Implementierung. Damit kann nichts mehr verdecken, woran man arbeitet; das Panel bleibt der Matrix vorbehalten. Ein Knopf im Kartenkopf klappt **alle** Zeilen auf oder zu: Bei acht Elementen ist das der Unterschied zwischen einmal durchsehen und acht Klicks. +Das gilt **ausnahmslos**, auch für den Cash-Übergang. Er öffnete bis 0.42.1 als einziger das +rechte Panel – auf einer Karte, die genau davon wegwollte, ein Fremdkörper. Die Felder sind +dieselben wie im Panel (`CashTransitionFields`); zwei Implementierungen wären garantiert +auseinandergelaufen. + ### 3.15.3 Die Zeitachse ist der Navigator Sie war bis 0.41 Dekoration. Neu ist das Segment der offenen Karte hervorgehoben, und ein Klick springt hin. Das ist der Punkt, an dem sich Aussehen und Verständlichkeit treffen: Zeit läuft von links nach rechts, das braucht keine Erklärung. +**Gezeichnet ist sie als Reihe abgesetzter Kacheln** (0.42.2). Der Abstand dazwischen zeigt die +Phasengrenze, ohne dass es dafür eine Trennlinie braucht; im Zwischenraum steht ein Pfeil für +den Übergang. Die Marker – Pensionierung je Person, Ruinalter, erfasste Ist-Jahre – sitzen als +Pillen direkt an der Leiste, statt als Fähnchen darüber zu schweben. Entfallen sind die +Überschrift (eine Zeitachse erkennt man), der Rahmen und die Legende. + Drei Wege durch die Phasen, weil verschiedene Leute verschieden arbeiten: * **Klick auf die Zeitachse** – gezielt zu einer bestimmten Phase. @@ -2581,8 +2604,19 @@ Der Umschalter steht oben rechts; die Wahl gehört zum **Benutzer** und überleb ``` **Links** die Menüleiste: Haus, Plan-Wähler und die vier Bereiche des aktiven Plans, darunter -das Wissen. Beim Überfahren fährt sie als **Overlay** aus – sie kostet dann keinen Platz –, ein -**Pin** hält sie breit und schiebt den Inhalt. +das Wissen sowie Suchen und Anpinnen. Beim Überfahren fährt sie aus und **schiebt** den Inhalt; +der **Pin** entscheidet, ob sie so bleibt. + +> **Ausfahren heisst schieben, nicht überlagern** (korrigiert in 0.42.2). Der erste Anlauf +> liess sie als Overlay ausfahren, damit sie im Ruhezustand keinen Platz kostet. Dabei +> verschwand aber jedes Mal ein Streifen des Inhalts, und das las sich wie ein Fehler. +> Aufgeklappt sieht es jetzt genau so aus wie angepinnt – der einzige Unterschied ist, ob es +> so bleibt. + +**Suchen und Anpinnen stehen direkt unter den Systemparametern**, nicht am Fuss der Leiste. Die +Leiste ist so hoch wie die Seite, und mit einer aufgeklappten Karte wird die sehr lang – am +Fuss wären die beiden ausserhalb des Blickfelds. Der Inhalt beider Leisten klebt zudem am +oberen Bildschirmrand (`sticky`): Steuerung, die beim Arbeiten wegscrollt, ist keine. > **Eine Komponente in zwei Breiten, nicht zwei Darstellungen** (korrigiert in 0.42.1). Die > Symbole sitzen in einer **festen 3.5-rem-Spalte** und bleiben beim Ausfahren exakt an ihrem diff --git a/src/components/AppShell.tsx b/src/components/AppShell.tsx index a5941e9..568b325 100644 --- a/src/components/AppShell.tsx +++ b/src/components/AppShell.tsx @@ -113,10 +113,14 @@ function AppShellInner({ username }: { username: string }) { // Erhoehen erzwingt ein Neuladen der Szenario-Liste (bleibt bei einer Loeschung montiert). const [scenarioListKey, setScenarioListKey] = useState(0); - // Menueleiste links: eingeklappt auf eine Icon-Schiene (56 px) statt 256 px. Angepinnt - // bleibt sie breit und schiebt den Inhalt; nicht angepinnt faehrt sie beim Ueberfahren als - // Overlay aus und legt sich UEBER den Inhalt -- so kostet sie im Ruhezustand nichts. - // Die Wahl gehoert zum Benutzer, nicht zum Plan, und ueberlebt deshalb die Sitzung. + // Menueleiste links: eingeklappt auf eine Icon-Schiene (56 px) statt 240 px. + // + // Beim Ueberfahren faehrt sie aus und SCHIEBT den Inhalt -- sie legt sich nicht darueber. + // Der erste Anlauf (0.42) liess sie als Overlay ausfahren, um im Ruhezustand keinen Platz + // zu kosten; dabei verschwand aber jedes Mal ein Streifen des Inhalts, und das las sich wie + // ein Fehler. Aufgeklappt sieht es damit genau so aus wie angepinnt, und das Anpinnen + // entscheidet nur noch, ob es so BLEIBT. Die Wahl gehoert zum Benutzer und ueberlebt die + // Sitzung. const [railPinned, setRailPinned] = useState(false); const [railHover, setRailHover] = useState(false); const [planMenuOpen, setPlanMenuOpen] = useState(false); @@ -354,7 +358,7 @@ function AppShellInner({ username }: { username: string }) { hat sich falsch angefuehlt. */}
setRailHover(true)} onMouseLeave={() => { setRailHover(false); @@ -1136,10 +1140,13 @@ function Rail({ className={`${ mobile ? "relative h-full w-full" : "absolute inset-y-0 left-0 z-40" } flex flex-col overflow-hidden border-r border-border bg-surface transition-[width] duration-200 ${ - mobile ? "" : wide ? "w-60 shadow-xl" : "w-14" - } ${pinned && !mobile ? "shadow-none" : ""}`} + mobile ? "" : wide ? "w-60" : "w-14" + }`} > -
+ {/* Klebt am oberen Bildschirmrand: Die Leiste ist so hoch wie die SEITE, und mit einer + aufgeklappten Karte wird die sehr lang -- ohne sticky waeren die Knoepfe nach ein + wenig Scrollen ausserhalb des Blickfelds. */} +
} iconBox="bg-accent" label="FPT" />
@@ -1282,9 +1289,13 @@ function Rail({ onClick={onParams} icon={} /> -
-
+ {/* Suchen und Anpinnen stehen DIREKT hier, nicht am unteren Rand. Die Leiste ist so + hoch wie die Seite -- und mit einer aufgeklappten Karte wird die sehr lang. Am Fuss + waeren die beiden dann ausserhalb des Blickfelds, obwohl sie zu den am haeufigsten + gebrauchten Knoepfen gehoeren. */} +
+ + {/* Die Karte laeuft NICHT ueber die volle Breite. Eine Zeile aus 1300 px liest sich + schlecht -- das Auge verliert beim Zeilenwechsel den Anschluss, und Beschriftung und + Wert driften so weit auseinander, dass man sie nicht mehr zusammenbringt. Links und + rechts bleibt Luft, und die traegt die beiden grossen Pfeile. */} +
+ index > 0 && onSelectPhase(phases[index - 1].id)} + /> +
+
+ index < phases.length - 1 && onSelectPhase(phases[index + 1].id)} + /> +
+ ); +} + // Eine aufklappbare Zeile. Zugeklappt ist sie eine Zusammenfassung, aufgeklappt der ganze // Editor -- und zwar IN der Karte. Kein Panel legt sich mehr ueber das, was man bearbeitet. function Row({ @@ -530,37 +607,50 @@ function Row({ ); } -// Zeile ohne Editor -- sie fuehrt in einen eigenen Dialog (Cash-Uebergang). -function RowShell({ - icon, - name, - meta, - right, - open, - onClick, +// Der Cash-Uebergang in der Karte. Dieselben Felder wie im Panel (`CashTransitionFields`), +// nur mit eigenem Speichern -- eine zweite Implementierung der Felder waere garantiert +// auseinandergelaufen. +function CashTransitionEditor({ + fromPhaseId, + initial, + deflatorEnd, + onSaved, }: { - icon: React.ReactNode; - name: string; - meta: string; - right: React.ReactNode; - open?: boolean; - onClick: () => void; + fromPhaseId: string; + initial: CashTransitionData; + deflatorEnd: number; + onSaved: () => void; }) { + // Vorbelegen, damit ein blosses Speichern den sichtbaren Default (1:1) festhaelt. + const [ct, setCt] = useState(() => withCashTransitionDefaults(initial)); + const [saving, setSaving] = useState(false); + const [error, setError] = useState(null); + + async function save() { + setSaving(true); + setError(null); + try { + await api.put(`/api/phases/${fromPhaseId}/cash-transition`, ct); + onSaved(); + } catch (e) { + setError(e instanceof Error ? e.message : "Speichern fehlgeschlagen."); + } finally { + setSaving(false); + } + } + return ( - +
+
+ setCt((prev) => ({ ...prev, ...patch }))} deflatorEnd={deflatorEnd} /> +
+ {error &&

{error}

} +
+ +
+
); } diff --git a/src/components/PlanView.tsx b/src/components/PlanView.tsx index 1cc0c9d..6f97532 100644 --- a/src/components/PlanView.tsx +++ b/src/components/PlanView.tsx @@ -1075,7 +1075,8 @@ Erste Lebensphase anlegen Eingeklappt bleibt die Zahl am Knopf sichtbar -- sonst klappt man die Leiste zu und vergisst den halben Plan. */} {railOpen && ( -