Tech Debt: Frontend-Updates aus PR #15 aufräumen

[raifdmueller]

Kontext

PR #15 (Frontend-Animationen von @RiaVirk) wurde gemerged. Die UX-Verbesserungen funktionieren, aber es gibt technische Schulden, die aufgeräumt werden sollten.

Aufgaben

Muss (Code-Hygiene)

• Auskommentierten Code entfernen (src/constants.js Z.11-19, src/utils.js Z.18-31)
• Unbenutzte Funktion getOffsetPosition() aus src/utils.js entfernen
• Hardcoded englische Strings internationalisieren:
  • "Unlocks at Tier ${group.tier}" in MitigationCard.jsx
  • "locked" in RiskRadar.jsx

Sollte (Code-Qualität)

• Hardcoded Farben (#1e293b, #94a3b8, #475569) im Tooltip durch CSS-Variablen ersetzen
• !important in MitigationCard.module.css entfernen
• max-height: 600px in measuresWrapper durch robustere Lösung ersetzen
• 3x eslint-disable-next-line react-hooks/exhaustive-deps prüfen und ggf. Dependencies korrekt angeben
• maxR = 130 aus size berechnen statt hardcoded

Könnte (Architektur)

• Prüfen ob CSS-Transitions statt imperativer requestAnimationFrame-Animation in RadarChart.jsx ausreichen (~130 Zeilen Animation-Code)
• registerUpdater-Pattern zwischen RiskRadar↔RadarChart überdenken (umgeht Reacts Datenfluss)

Referenz

• PR Hi Mr. Ralf, here is the updated frontend design! #15
• Review-Analyse: auskommentierter Code, fehlende i18n, imperative DOM-Manipulation

[raifdmueller]

Umsetzungsplan (Muss + Sollte)

1. Toter Code entfernen

• src/constants.js Z.16-24: Auskommentierte Duplikate löschen
• src/utils.js Z.26-39: Auskommentierte Duplikate löschen
• src/utils.js Z.11-19: Unbenutzte Funktion getOffsetPosition() löschen (wird nirgends importiert)

2. Strings internationalisieren

• MitigationCard.jsx Z.38: "Unlocks at Tier ${group.tier}" → t.unlocksAtTier(group.tier)
• RiskRadar.jsx Z.262: "locked" → t.locked
• src/i18n.js: Neue Keys in DE und EN hinzufügen:
  • unlocksAtTier: (tier) => "Verfügbar ab Tier ${tier}" / "Unlocks at Tier ${tier}"
  • locked: "gesperrt" / "locked"

3. Hardcoded Tooltip-Farben durch CSS-Variablen ersetzen

• RadarChart.jsx Z.410,416,421,428,434: #1e293b → var(--bg-card), #94a3b8 → var(--text-secondary), #475569 → var(--text-muted)
• Problem: SVG fill/stroke akzeptiert keine CSS-Variablen direkt in JSX. Lösung: Farben aus theme.js Palette referenzieren oder CSS-Variablen über style setzen.

4. !important entfernen

• MitigationCard.module.css Z.14: border-width: 2px !important → Border-Breite über Padding-Kompensation lösen (card hat 1px border, hover setzt 2px → 1px padding-differenz kompensiert den Shift)

5. max-height: 600px robuster machen

• MitigationCard.module.css Z.78: max-height: 600px → max-height: 2000px (sicherer Wert, der nie abschneidet, aber immer noch animiert)

6. eslint-disable Kommentare prüfen

• RadarChart.jsx Z.182,245,281: Drei eslint-disable-next-line react-hooks/exhaustive-deps
  • Z.182 ([registerUpdater]): OK — registerUpdater ist die einzige echte Dependency
  • Z.245 ([]): Mount-only Effect — Dependencies absichtlich leer, OK
  • Z.281 ([riskPointsStr, tc]): OK — restliche Werte sind refs/stabile Referenzen
  • Fazit: Alle drei sind bewusst gesetzt und korrekt → keine Änderung nötig

7. maxR aus size berechnen

• RadarChart.jsx Z.128: maxR = 130 → maxR = size / 2 - 100 (bei size=460 ergibt das 130, aber passt sich an)

Reihenfolge

1 → 2 → 3 → 4 → 5 → 7, ein Commit pro logischen Block