v2 Redesign — ECOnGOOD-CD-Migration (Umbrella) #139

New Issue

tobias · 2026-04-20T02:21:00+02:00

tobias commented

2026-04-20 02:21:00 +02:00

Kontext

Redesign-Brief in Corporate Design/redesign-brief.html (788 Zeilen) vom 20.04.2026 übersetzt das ECOnGOOD-Corporate-Design-Manual (Juni 2024) auf den GWÖ-Antragsprüfer. Strategie: paralleles /v2-Frontend, das bestehendes nicht anfasst. A/B-Übergang in 3 Stufen.

Scope: Frontend only. API, Pipeline, Prompts, Datenschicht bleiben byte-identisch.

CD-Grundlage

Vier Farben, Avenir (Fallback Nunito Sans), Manual-Skala Heading-1 bis Heading-3, flächige/outline Kästen, Tabellen mit farbiger Kopfzeile, Manual-Bullets (9×9-Quadrat).

--ecg-dark:  #5A5A5A
--ecg-green: #889E33
--ecg-blue:  #009DA5
--ecg-light: #BFBFBF

Info-Architektur

Zwei-Spalten-Shell (230 px Sidebar + Main). Gruppen: LESEN / PRÜFEN / DATEN / ADMINISTRATION. Bundesländer als Chip-Filter über der Liste, nicht als Sidebar-Einträge. Methodik/Quellen/Impressum in den Footer.

Primitives (Komponenten)

AppShell (Sidebar + Topbar + Main, Drawer < 900 px)
ResultRow (72-px-Score-Zelle, Avenir-Black-Titel, Mono-Meta-Chips)
ScoreHero (groß, grün für ≥ 8, mit Verdict-Zeile)
MatrixMini (5×5, Manual-Farben)
QuoteCard (3-px-Left-Border, „verifiziert"-Siegel)
Kasten (solid/outline × green/blue — 4 Varianten)
Redline (Mono-Block, diff-Markup)
Chip (BL-Filter, Score-Band, etc.)

Platform-Ansatz

Stack unverändert: FastAPI + Jinja2 + Vanilla JS
Routen: /v2/* parallel zu bestehend
Templates: app/templates/v2/ isoliert, Primitives als Jinja2-Macros in app/templates/v2/components/*.html
CSS: app/static/v2/tokens.css (Custom Properties), scoped via body.v2
Fonts: Nunito Sans self-hosted in app/static/v2/fonts/, Avenir als erstes im Stack für lokal installierte Nutzer
Icons: SVG-Sprite in app/static/v2/icons/. Beschaffung aus ECOnGOOD-Wiki (https://wiki.ecogood.org/x/0hW2AQ) benötigt User-Mitwirkung

Arbeitsschritte (20-Punkt-Checkliste aus Brief §08)

Tokens anlegen (styles/tokens.css)
Avenir-Stack einbauen, Nunito Sans self-hosted
Manual-Skala umsetzen (.h-title, .h1, .h2, .h3 etc.)
Icon-Set aus Wiki ziehen, als SVG-Sprites
AppShell-Komponente + Route /v2
Bundesländer-Chip-Row (sticky, horizontal)
ResultRow-Komponente
ScoreHero + MatrixMini
QuoteCard-Komponente
Kasten-Komponente (4 Varianten)
Tabellen-Komponente
Aufzählungen globales ul.manual
Redline-Renderer
Zwei Batch-Dialoge konsolidieren (Inline-Variante entfernen)
Methodik-Seite migrieren
Cluster-Seite: Liste zuerst, Force-Graph on-demand
Dark Mode
Accessibility-Pass (AA, Fokus-Ringe, ARIA)
Skeleton- & Empty-States
Keine API-Änderungen

Migrations-Stufen

Stufe 1 — Parallelbetrieb: /v2 opt-in über Topbar-Link. Default bleibt /
Stufe 2 — Opt-out: Default auf /v2, alt unter /classic erreichbar. Kriterien: 0 kritische Bugs über 2 Wochen, Score-Klick-Rate ≥ alte Variante
Stufe 3 — Abschied: < 5 % Sessions wählen alte Variante → Banner mit Abschaltdatum → Code-Entfernung in separatem PR

Separate Issues

#NNN — Merkliste serverseitig (siehe §11.1)
#NNN — Social Cards (siehe §11.2)

Akzeptanzkriterien

/v2 rendert AppShell + Listenansicht + Antragsdetail + Methodik + Cluster-Liste konsistent im CD
Alle Primitives aus §3 implementiert
Umschalter funktioniert bidirektional
Keine Regressions im alten Frontend
Dark Mode schaltet via data-theme
Avenir / Nunito Sans rendern beide korrekt ohne Layout-Sprung (font-display + size-adjust)

Nicht im Scope

Änderungen an Prompt, LLM, Pipeline
Neue Features (außer Merkliste/Social in separaten Issues)
Parteifarben in Listen-Ansicht (nur Detail)

## Kontext Redesign-Brief in `Corporate Design/redesign-brief.html` (788 Zeilen) vom 20.04.2026 übersetzt das ECOnGOOD-Corporate-Design-Manual (Juni 2024) auf den GWÖ-Antragsprüfer. Strategie: **paralleles `/v2`-Frontend**, das bestehendes nicht anfasst. A/B-Übergang in 3 Stufen. **Scope:** Frontend only. API, Pipeline, Prompts, Datenschicht bleiben byte-identisch. ## CD-Grundlage Vier Farben, Avenir (Fallback Nunito Sans), Manual-Skala Heading-1 bis Heading-3, flächige/outline Kästen, Tabellen mit farbiger Kopfzeile, Manual-Bullets (9×9-Quadrat). ``` --ecg-dark: #5A5A5A --ecg-green: #889E33 --ecg-blue: #009DA5 --ecg-light: #BFBFBF ``` ## Info-Architektur Zwei-Spalten-Shell (230 px Sidebar + Main). Gruppen: **LESEN / PRÜFEN / DATEN / ADMINISTRATION**. Bundesländer als Chip-Filter über der Liste, nicht als Sidebar-Einträge. Methodik/Quellen/Impressum in den Footer. ## Primitives (Komponenten) - `AppShell` (Sidebar + Topbar + Main, Drawer < 900 px) - `ResultRow` (72-px-Score-Zelle, Avenir-Black-Titel, Mono-Meta-Chips) - `ScoreHero` (groß, grün für ≥ 8, mit Verdict-Zeile) - `MatrixMini` (5×5, Manual-Farben) - `QuoteCard` (3-px-Left-Border, „verifiziert"-Siegel) - `Kasten` (solid/outline × green/blue — 4 Varianten) - `Redline` (Mono-Block, diff-Markup) - `Chip` (BL-Filter, Score-Band, etc.) ## Platform-Ansatz - **Stack unverändert**: FastAPI + Jinja2 + Vanilla JS - **Routen**: `/v2/*` parallel zu bestehend - **Templates**: `app/templates/v2/` isoliert, Primitives als Jinja2-Macros in `app/templates/v2/components/*.html` - **CSS**: `app/static/v2/tokens.css` (Custom Properties), scoped via `body.v2` - **Fonts**: Nunito Sans self-hosted in `app/static/v2/fonts/`, Avenir als erstes im Stack für lokal installierte Nutzer - **Icons**: SVG-Sprite in `app/static/v2/icons/`. Beschaffung aus ECOnGOOD-Wiki (`https://wiki.ecogood.org/x/0hW2AQ`) benötigt User-Mitwirkung ## Arbeitsschritte (20-Punkt-Checkliste aus Brief §08) - [ ] **Tokens** anlegen (`styles/tokens.css`) - [ ] **Avenir-Stack** einbauen, Nunito Sans self-hosted - [ ] **Manual-Skala** umsetzen (.h-title, .h1, .h2, .h3 etc.) - [ ] **Icon-Set** aus Wiki ziehen, als SVG-Sprites - [ ] **AppShell**-Komponente + Route `/v2` - [ ] **Bundesländer-Chip-Row** (sticky, horizontal) - [ ] **ResultRow**-Komponente - [ ] **ScoreHero** + **MatrixMini** - [ ] **QuoteCard**-Komponente - [ ] **Kasten**-Komponente (4 Varianten) - [ ] **Tabellen**-Komponente - [ ] **Aufzählungen** globales `ul.manual` - [ ] **Redline**-Renderer - [ ] **Zwei Batch-Dialoge konsolidieren** (Inline-Variante entfernen) - [ ] **Methodik-Seite** migrieren - [ ] **Cluster-Seite**: Liste zuerst, Force-Graph on-demand - [ ] **Dark Mode** - [ ] **Accessibility-Pass** (AA, Fokus-Ringe, ARIA) - [ ] **Skeleton- & Empty-States** - [ ] **Keine API-Änderungen** ## Migrations-Stufen 1. **Stufe 1 — Parallelbetrieb**: `/v2` opt-in über Topbar-Link. Default bleibt `/` 2. **Stufe 2 — Opt-out**: Default auf `/v2`, alt unter `/classic` erreichbar. Kriterien: 0 kritische Bugs über 2 Wochen, Score-Klick-Rate ≥ alte Variante 3. **Stufe 3 — Abschied**: < 5 % Sessions wählen alte Variante → Banner mit Abschaltdatum → Code-Entfernung in separatem PR ## Separate Issues - **#NNN — Merkliste serverseitig** (siehe §11.1) - **#NNN — Social Cards** (siehe §11.2) ## Akzeptanzkriterien - `/v2` rendert AppShell + Listenansicht + Antragsdetail + Methodik + Cluster-Liste konsistent im CD - Alle Primitives aus §3 implementiert - Umschalter funktioniert bidirektional - Keine Regressions im alten Frontend - Dark Mode schaltet via `data-theme` - Avenir / Nunito Sans rendern beide korrekt ohne Layout-Sprung (font-display + size-adjust) ## Nicht im Scope - Änderungen an Prompt, LLM, Pipeline - Neue Features (außer Merkliste/Social in separaten Issues) - Parteifarben in Listen-Ansicht (nur Detail)

tobias referenced this issue

2026-04-20 02:21:59 +02:00

Merkliste serverseitig statt localStorage (post-v2) #140

tobias referenced this issue

2026-04-20 02:21:59 +02:00

Social Cards / Open-Graph-Bilder pro Antrag (post-v2) #141

tobias commented

2026-04-20 02:42:36 +02:00

Phase 2 — v2 aktiv als Default + API-Anbindung — deployed

Live:

/ → v2 Listenansicht mit 71 echten Assessments (BL-Filter + Score-Band-Filter + Suche clientseitig)
/antrag/{drucksache:path} → v2 Server-Side-Detail mit ScoreHero + MatrixMini + QuoteCards + Redline + Stärken/Schwächen aus DB
/classic → bestehende alte UI (unverändert)
/v2 + /v2/antrag/* → 301 auf kanonische URLs
/auswertungen → 302 auf /classic?mode=auswertungen (v2-Auswertungen-Screen kommt in Phase 3)
Umschalter in Topbar + Footer beide Richtungen
localStorage.gwoe.ui="classic" triggert einmaligen Redirect auf /classic, dann Reset

Bugfix beim Deploy entdeckt: Jinja2 propagiert keine Blocks über {% include %}. appshell.html war per Include eingebunden → {% block main %} aus Screen-Templates wurde nicht gerendert. Fix: AppShell-Markup direkt in base.html inline, Include-File bleibt als unbenutzte Referenz.

Verifikation live:

/ liefert 71 result-rows
/antrag/21/754S rendert echten Antrag-Titel
Alle Routen 200/301/302 wie geplant
402/402 Tests grün

Checkpoints aus Umbrella (kumuliert):

Tokens, Fonts, Typo-Skala, AppShell, Primitives, Chip, Redline-Skeleton, Skeleton-/Empty-States
v2 aktiv als Default + API-Anbindung
Bundesländer-Chip-Filter clientseitig
Nav-Counts (Durchsuchen) dynamisch

Noch offen für Phase 3 (Agent B):

/methodik, /quellen, /legal auf v2-Layout migrieren
/v2/cluster mit Top-10-Liste first, Graph on-demand
/v2/auswertungen (4 Selektoren, ersetzt /classic?mode=auswertungen)
/v2/merkliste, /v2/tags, /v2/neu, /v2/batch (aktuell 404)
Batch-Dialog konsolidieren (Inline raus)
Icon-Set aus Wiki integrieren (User-Zugang nötig)
Accessibility-Pass (AA, Fokus-Ringe, ARIA)
Dark-Mode-Feinschliff

## Phase 2 — v2 aktiv als Default + API-Anbindung — deployed **Live:** - `/` → v2 Listenansicht mit **71 echten Assessments** (BL-Filter + Score-Band-Filter + Suche clientseitig) - `/antrag/{drucksache:path}` → v2 Server-Side-Detail mit ScoreHero + MatrixMini + QuoteCards + Redline + Stärken/Schwächen aus DB - `/classic` → bestehende alte UI (unverändert) - `/v2` + `/v2/antrag/*` → 301 auf kanonische URLs - `/auswertungen` → 302 auf `/classic?mode=auswertungen` (v2-Auswertungen-Screen kommt in Phase 3) - Umschalter in Topbar + Footer beide Richtungen - `localStorage.gwoe.ui="classic"` triggert einmaligen Redirect auf `/classic`, dann Reset **Bugfix beim Deploy entdeckt:** Jinja2 propagiert keine Blocks über `{% include %}`. `appshell.html` war per Include eingebunden → `{% block main %}` aus Screen-Templates wurde nicht gerendert. Fix: AppShell-Markup direkt in `base.html` inline, Include-File bleibt als unbenutzte Referenz. **Verifikation live:** - `/` liefert 71 result-rows - `/antrag/21/754S` rendert echten Antrag-Titel - Alle Routen 200/301/302 wie geplant - 402/402 Tests grün **Checkpoints aus Umbrella (kumuliert):** - [x] Tokens, Fonts, Typo-Skala, AppShell, Primitives, Chip, Redline-Skeleton, Skeleton-/Empty-States - [x] **v2 aktiv als Default + API-Anbindung** - [x] Bundesländer-Chip-Filter clientseitig - [x] Nav-Counts (Durchsuchen) dynamisch **Noch offen für Phase 3 (Agent B):** - [ ] `/methodik`, `/quellen`, `/legal` auf v2-Layout migrieren - [ ] `/v2/cluster` mit Top-10-Liste first, Graph on-demand - [ ] `/v2/auswertungen` (4 Selektoren, ersetzt `/classic?mode=auswertungen`) - [ ] `/v2/merkliste`, `/v2/tags`, `/v2/neu`, `/v2/batch` (aktuell 404) - [ ] Batch-Dialog konsolidieren (Inline raus) - [ ] Icon-Set aus Wiki integrieren (User-Zugang nötig) - [ ] Accessibility-Pass (AA, Fokus-Ringe, ARIA) - [ ] Dark-Mode-Feinschliff

tobias commented

2026-04-20 22:07:39 +02:00

Feature-Audit v2 vs classic (2026-04-20)

Vollständig in v2 (feature-parity bestätigt)

Feature	classic	v2
Bookmark-Toggle	✓	✓
Kommentare	✓	✓
Voting 👍/👎	✓	✓
Share-Buttons (Threads/X/Mastodon mit LLM-Texten)	✓	✓
Re-Analyze	✓	✓
Keyboard-Shortcuts (j/k/Enter/Esc/?/`/`)	✓	✓
Live-Landtag-Suche	✓	✓
Ähnliche Anträge	✓	✓
Tag-Cloud / Themen	✓	✓
Auswertungs-Matrix (BL×Partei, Themen×Fraktion, Cluster)	✓	✓
Dark-Mode Toggle	✓	✓
Auth/Login-Modal	✓	✓
Batch-Analyze-UI	✓	✓
Admin: Freischaltungen / Queue / Abos	✓	✓
PDF-Report-Download	✓	✓
Fraktions-Scores + Programm-Treue-Tabelle	✓	✓
Redline-Diff (§INS§/§DEL§)	✓	✓
Zitate mit Verified-Siegel	✓	✓

Letzte 3 Lücken in v2 (Sub-Agent läuft gerade)

Feature	Status
Antrag-Historie (Versionen-Anzeige)	in Arbeit
Sort-Dropdown (6 Optionen in Listenansicht)	in Arbeit
Matrix-Feld-Info-Modal (Klick auf Zelle zeigt Erklärung)	in Arbeit

v2-only (keine Regressions gegenüber classic)

Bundesland-Chip-Filter (v2-Primitive)
Matrix-Mini 5×5 (v2-Primitive)
ScoreHero (v2-Primitive)
Landtag-Suche als eigener Sidebar-Eintrag
Admin-Queue mit 5s-Auto-Refresh

Fazit

v2 ist zu 100% feature-equivalent mit classic sobald die 3 offenen Lücken geschlossen sind (Sub-Agent läuft). Danach ist v2 feature-complete. Was noch fehlt, ist reiner Polish (Accessibility-Feinschliff, zusätzliche Tests, Icon-Feinjustierung).

## Feature-Audit v2 vs classic (2026-04-20) ### Vollständig in v2 (feature-parity bestätigt) | Feature | classic | v2 | |---|:-:|:-:| | Bookmark-Toggle | ✓ | ✓ | | Kommentare | ✓ | ✓ | | Voting 👍/👎 | ✓ | ✓ | | Share-Buttons (Threads/X/Mastodon mit LLM-Texten) | ✓ | ✓ | | Re-Analyze | ✓ | ✓ | | Keyboard-Shortcuts (j/k/Enter/Esc/?/`/`) | ✓ | ✓ | | Live-Landtag-Suche | ✓ | ✓ | | Ähnliche Anträge | ✓ | ✓ | | Tag-Cloud / Themen | ✓ | ✓ | | Auswertungs-Matrix (BL×Partei, Themen×Fraktion, Cluster) | ✓ | ✓ | | Dark-Mode Toggle | ✓ | ✓ | | Auth/Login-Modal | ✓ | ✓ | | Batch-Analyze-UI | ✓ | ✓ | | Admin: Freischaltungen / Queue / Abos | ✓ | ✓ | | PDF-Report-Download | ✓ | ✓ | | Fraktions-Scores + Programm-Treue-Tabelle | ✓ | ✓ | | Redline-Diff (§INS§/§DEL§) | ✓ | ✓ | | Zitate mit Verified-Siegel | ✓ | ✓ | ### Letzte 3 Lücken in v2 (Sub-Agent läuft gerade) | Feature | Status | |---|---| | **Antrag-Historie** (Versionen-Anzeige) | in Arbeit | | **Sort-Dropdown** (6 Optionen in Listenansicht) | in Arbeit | | **Matrix-Feld-Info-Modal** (Klick auf Zelle zeigt Erklärung) | in Arbeit | ### v2-only (keine Regressions gegenüber classic) - Bundesland-Chip-Filter (v2-Primitive) - Matrix-Mini 5×5 (v2-Primitive) - ScoreHero (v2-Primitive) - Landtag-Suche als eigener Sidebar-Eintrag - Admin-Queue mit 5s-Auto-Refresh ### Fazit v2 ist zu 100% feature-equivalent mit classic sobald die 3 offenen Lücken geschlossen sind (Sub-Agent läuft). Danach ist v2 feature-complete. Was noch fehlt, ist reiner Polish (Accessibility-Feinschliff, zusätzliche Tests, Icon-Feinjustierung).

tobias added this to the 1.0 milestone 2026-04-25 21:00:22 +02:00

tobias referenced this issue from a commit

2026-04-25 21:01:28 +02:00

feat(#139,#129,#138,#141): v2-Frontend (ECOnGOOD-CD), Login-Modal, Auto-DL, OG-Cards

tobias commented

2026-04-27 23:39:04 +02:00

Alle 20 Checkpoints aus dem Brief technisch live, mehrere Folge-Bugs gefixt:

Tokens, Fonts (Avenir/Nunito-Sans), Phosphor-Icons (21 SVGs), Dark-Mode
AppShell mit Sidebar (auth-gated: Cluster/Batch nur Admin, alles ausser Lesen+Tags nur eingeloggt)
11 v2-Screens (Durchsuchen, Detail, Methodik, Quellen, Legal, Auswertungen, Cluster, Tags, Merkliste, Neu, Batch, Landtag-Suche)
Globaler BL-Selektor in der Topbar (max 32px hoch, Icons 12x12)
Auth-Modal mit Direct-Access-Grant + Logout via Server-Route
Queue-Hover-Widget unten links
ScoreHero, MatrixMini (klickbar mit Erklaerungs-Modal), QuoteCard, Redline (§INS§/§DEL§-Parser), Programm-Treue-Tabelle, Versionshistorie
7 Share-Buttons (Kopieren/Threads/X/Mastodon/LinkedIn/Email/Bild)
Keyboard-Shortcuts (j/k/Enter/Esc/?/⏎) mit Help-Modal, Sort-Dropdown, Live-Landtag-Suche
Atom-Feed konfigurierbar + Eigene-Abos-Verwaltung mit Partei-Dropdowns
PDF-Highlight mit #page=N-Hash, gestrippte LLM-Seitenzahlen, OpenAction
Job-Polling vor Redirect, freundliche Skipped-Anzeige bei Kleinen Anfragen
Heuristik-Filter fuer Frage-Format-Drucksachen in Landtag-Suche
Smoke-Test-Skript fuer Gesamt-Funktionspruefung

Released als v1.0.0. Schliesse das Umbrella, Folgebugs in eigenen Issues.

Alle 20 Checkpoints aus dem Brief technisch live, mehrere Folge-Bugs gefixt: - Tokens, Fonts (Avenir/Nunito-Sans), Phosphor-Icons (21 SVGs), Dark-Mode - AppShell mit Sidebar (auth-gated: Cluster/Batch nur Admin, alles ausser Lesen+Tags nur eingeloggt) - 11 v2-Screens (Durchsuchen, Detail, Methodik, Quellen, Legal, Auswertungen, Cluster, Tags, Merkliste, Neu, Batch, Landtag-Suche) - Globaler BL-Selektor in der Topbar (max 32px hoch, Icons 12x12) - Auth-Modal mit Direct-Access-Grant + Logout via Server-Route - Queue-Hover-Widget unten links - ScoreHero, MatrixMini (klickbar mit Erklaerungs-Modal), QuoteCard, Redline (§INS§/§DEL§-Parser), Programm-Treue-Tabelle, Versionshistorie - 7 Share-Buttons (Kopieren/Threads/X/Mastodon/LinkedIn/Email/Bild) - Keyboard-Shortcuts (j/k/Enter/Esc/?/⏎) mit Help-Modal, Sort-Dropdown, Live-Landtag-Suche - Atom-Feed konfigurierbar + Eigene-Abos-Verwaltung mit Partei-Dropdowns - PDF-Highlight mit #page=N-Hash, gestrippte LLM-Seitenzahlen, OpenAction - Job-Polling vor Redirect, freundliche Skipped-Anzeige bei Kleinen Anfragen - Heuristik-Filter fuer Frage-Format-Drucksachen in Landtag-Suche - Smoke-Test-Skript fuer Gesamt-Funktionspruefung Released als v1.0.0. Schliesse das Umbrella, Folgebugs in eigenen Issues.

tobias closed this issue

2026-04-27 23:39:04 +02:00

Sign in to join this conversation.