# Einführung in bestehende und neue Apps

## Empfohlene Reihenfolge

### Phase 1 — Fundament

1. `src/index.css` einbinden.
2. App-Hintergrund, Schrift und Fokus übernehmen.
3. bestehende Farben auf semantische Tokens abbilden.
4. individuelle Rot-, Grau- und Statuswerte entfernen.

### Phase 2 — Shell und Navigation

1. gemeinsame Sidebar und Topbar einführen;
2. aufgabenbezogene Navigation ordnen;
3. globalen Verbindungs- und Synchronisationszustand anzeigen;
4. responsive Navigation testen.

### Phase 3 — Kernkomponenten

Priorität:

1. Buttons und Formulare;
2. Status und Hinweise;
3. Tabellen und Karten;
4. Dialoge und Bestätigungen;
5. Lade-, Leer- und Fehlerzustände.

### Phase 4 — Fachliche Muster

1. Lagekopf;
2. Quellenzeilen;
3. Blocker-Checkliste;
4. Zeitverlauf;
5. Entscheidungsleiste.

## Token-Migration

| App-spezifischer Wert | Ziel |
|---|---|
| Hintergrundgrau | `--gev-color-canvas` |
| Kartenweiß | `--gev-color-surface` |
| Haupttext | `--gev-color-text` |
| Sekundärtext | `--gev-color-text-muted` |
| Trennlinie | `--gev-color-border` |
| primäre Aktion | `--gev-color-brand` |
| Fehler/Blocker | `--gev-status-danger` |
| Warnung/Prüfung | `--gev-status-warning` |
| Bestätigung | `--gev-status-success` |

Keine App legt eigene Werte für `P0`, `Blockiert`, `Bestätigt` oder `Nicht bestätigt` fest.

## React-Beispiel

Das System benötigt keine React-Laufzeit. Klassen können direkt verwendet werden:

```tsx
export function Status({
  state,
  children,
}: {
  state: "success" | "warning" | "danger" | "unknown";
  children: React.ReactNode;
}) {
  return (
    <span className={`gev-status gev-status--${state}`}>
      {children}
    </span>
  );
}
```

Die App-Komponente darf die Bedeutung einschränken, aber nicht das visuelle Vertragsmodell neu erfinden.

## Definition of Done

Eine migrierte Ansicht ist fertig, wenn:

- sie ausschließlich freigegebene Tokens verwendet;
- alle fachlichen Zustände Text enthalten;
- die Hauptaufgabe per Tastatur funktioniert;
- riskante Aktionen eine Prüf- und Freigabestufe haben;
- Lade-, Leer-, Fehler- und Offlinezustand umgesetzt sind;
- UTC-Zeit und Datenstand sichtbar sind;
- Hell- und Dunkelansicht funktionieren;
- die Ansicht bei 320 px und 200 % Zoom nutzbar bleibt;
- neue Muster im Design System dokumentiert wurden.

## Governance

Neue gemeinsame Komponente:

1. Problem und mehrere App-Verwendungen belegen.
2. Semantik und Zustände definieren.
3. barrierearme HTML-Struktur festlegen.
4. Referenzansicht ergänzen.
5. Token statt Rohwerte verwenden.
6. Änderung im Changelog und in der Versionsnummer festhalten.

Ein einmaliger App-Sonderfall bleibt zunächst in der App. Ab zwei belastbaren Verwendungen wird geprüft, ob daraus ein gemeinsames Muster wird.