# ALICIA.md — NOVA Control Reparatur

**Auftrag:** Behebe 26 binäre Gates in `index.html`. Jedes Gate ist ein klares Ja/Nein-Kriterium — erst erfüllt, wenn nachweisbar wahr.

**Repo:** `git@git.datenhimmel.work:danielkrause/nova-control.git`
**Branch:** `master`
**Datei:** Nur `index.html` — eine Datei, kein Framework, keine Libs, kein CDN, offline.

---

## Arbeitsweise

1. **Gate für Gate.** Nicht mehrere auf einmal. Ein Gate → implementieren → testen → commit.
2. **Vor jedem Commit:** `index.html` im Browser öffnen und das Gate manuell verifizieren.
3. **Commit-Message:** `fix: P0.1 Datei-Dialog entfernt` o.ä.
4. **Push nach jeder Phase** (P0, P1, P2) — nicht nach jedem einzelnen Gate.

## Reihenfolge (P0 → P1 → P2)

### P0 — BLOCKER (zuerst, weil App sonst beim Start kaputt)

**P0.1 — Datei-Dialog**
- Zeile mit `document.getElementById('imp').click();` **löschen**
- Test: Seite laden → KEIN Datei-Dialog

**P0.2 — Command-Palette**
- `rp()` wird nie aufgerufen → `cmds` bleibt `[]`
- `rp()` auf ≥8 Befehle erweitern: Board, Streaks, Insights, Neues Task, Import, Export, Reset/Demo, 500 Tasks
- `ld()` ruft am Ende `rp()` auf, dann `inipal()` beim Öffnen der Palette
- Tasks dynamisch als anspringbare Einträge in die Liste
- Test: Cmd+K → Liste zeigt ≥8 Einträge

**P0.3 — Dark Mode**
- `:root` hat nur Hell-Werte, `[data-theme="dark"]`-Block fehlt
- CSS: `[data-theme="dark"]` mit `--bg`, `--surface`, `--text`, `--border`
- `at()`: `matchMedia('(prefers-color-scheme:dark)').addEventListener('change', ...)` für Live-Reaktion
- `localStorage` für Persistenz (existiert via `sv()`)
- Test: 🌙 klicken → Hintergrund dunkel. Reload → bleibt dunkel.

### P1 — KERN-FEATURES

**P1.1 — Maus-Drag & Drop**
- HTML5 DnD API: `draggable="true"` auf `.task`
- `dragstart`/`dragover`/`drop` Events
- Drop-Indikator (gestrichelter Rahmen oder Platzhalter)
- Inter-Spalte (Status wechselt) + Intra-Spalte (Reihenfolge)
- Nach Drop: `sv()` + `rv()`
- Test: Task von Backlog nach Aktiv ziehen. Nach Reload noch da.

**P1.2 — Tastatur-DnD**
- Fokussiertes Task: Ctrl+Alt+Pfeiltasten
- ←→: Spalte wechseln | ↑↓: Position in Spalte
- `<div aria-live="polite">` für Status-Ansagen
- Test: Nur Tastatur, Task durch alle 4 Spalten bewegen.

**P1.3 — Feld-Schema**
- `op()`-Create speichert Fälligkeit als `du`, Board liest `d`
- `du` → `d` vereinheitlichen (in Create + Edit)
- `ldDemo()` und Render prüfen: benutzen die `d`?
- Test: Task mit Datum anlegen → Reload → Datum noch da.

**P1.4 — Streak-Berechnung**
- Pro Habit: aktuelle Serie + längste Serie
- Regeln: Wert > 0 = erfüllt. Tag mit 0 = Bruch. Heute noch nicht erfüllt = kein Bruch.
- Anzeige im Streak-View
- Test: Serie bricht bei 0, läuft weiter wenn heute noch kein Wert.

**P1.5 — Export**
- `exportData()`: `{version:1, tasks, habits, theme}` als JSON-Blob → Download
- Command "Export" in Palette
- Import validiert `version` + `tasks` Array
- Test: Export → localStorage löschen → Import → identischer Zustand.

**P1.6 — Zweiter Chart + Trend-Wochen**
- `<canvas id="chart2">` für Donut (Prioritätsverteilung)
- Trend-Chart: Monate → Wochen umstellen
- Datenbasis Trend: `df` (Abschlussdatum)
- Legende, Labels, Empty-State
- Test: Insights zeigt 2 Charts. Trend in Wochen.

**P1.7 — Listener-Leak + Fokusverlust**
- `rb()`: KEIN `innerHTML` = Toolbar + alles neu
- Toolbar (Suche + Filter) EINMAL im HTML, nicht pro `rb()`
- Event-Delegation auf `#board-section` EINMAL binden
- Suche: `display:none` statt DOM-Neuaufbau
- Test: 10× Views wechseln → Modal öffnet 1×. Tippen in Suche → Fokus bleibt.

### P2 — POLITUR

**P2.1 — Heatmap 26 Wochen**
- Spalten=Wochen, Zeilen=Mo..So, 26 Wochen zurück
- Hover-Tooltip mit Datum + Wert
- Test: Kein 28-Tage-Streifen mehr, Wochen-Grid sichtbar.

**P2.2 — Responsive**
- `@media (max-width: 768px)`: Layout einspaltig
- `@media (max-width: 480px)`: Board untereinander
- `overflow-x: auto` NUR auf `.board`, nicht `body`
- Test: 360px Breite → kein Body-Scroll.

**P2.3 — prefers-reduced-motion**
- `@media (prefers-reduced-motion: reduce) { ... }`
- Animationen deaktivieren (Toast, Drag-Transitions)
- Test: OS-Einstellung "Reduzierte Bewegung" → keine Animationen.

**P2.4 — Focus-Trap**
- Modal + Palette: Tab/Shift+Tab zyklisch im Dialog
- ESC schließt + Fokus zurück auf Auslöser
- Test: Modal offen → Tab kreist. ESC → Fokus auf Button davor.

**P2.5 — Palette-Tastatur**
- Keydown auf `#pal-q` (Eingabefeld) statt `#pal-list`
- ↑/↓ navigieren Liste, Enter führt aus
- Fokus bleibt im Eingabefeld
- Test: Pfeiltasten bei Fokus im Suchfeld.

**P2.6 — Hash-Routing**
- Navigation setzt `location.hash = '#/' + view`
- `hashchange`-Event schaltet View
- Beim Laden: View aus Hash setzen
- Test: `#/insights` → Insights-View. Reload bleibt. Zurück-Button.

**P2.7 — 500 Tasks**
- `gen500()`: 500 Tasks generieren
- Command in Palette
- Performance: Batch-Rendering, kein 500× Einzel-Push
- Test: 500 Tasks → Board flüssig, Suche filtert sofort.

**P2.8 — Robustheit**
- `ld()`: `nv_t` validieren → `Array.isArray()` + try/catch → Fallback `[]`
- Import: Jeden Task auf `id`, `tl`, `st` prüfen
- Fehlerhafte Einträge → Meldung, bestehende Daten bleiben
- Test: Kaputtes JSON importieren → Fehlermeldung, keine Daten verloren.

---

## Git-Workflow

```bash
git clone git@git.datenhimmel.work:danielkrause/nova-control.git
cd nova-control

# Gate bearbeiten...
git add index.html
git commit -m "fix: P0.1 Datei-Dialog entfernt"

# Nach jeder Phase:
git push

# Nach Abschluss:
git tag v1.0  # alle 26 Gates geschlossen
git push --tags
```

---

## Constraints (unveränderlich)

### Technisch
- ❌ Keine zweite Datei (kein .css, kein .js)
- ❌ Keine externen Libs/CDNs (kein jQuery, kein React, kein Bootstrap)
- ❌ Kein Build-Step, kein npm
- ✅ CSS `<style>` im `<head>`
- ✅ JS `<script>` am Ende von `<body>`
- ✅ `localStorage` für Persistenz
- ✅ Eine HTML-Datei, die im Browser per `file://` läuft

### Coding-Regeln (bindend!)

**Variablen & Funktionen — lesbare Namen**
- ❌ `C`, `ts`, `fm`, `sv`, `ld`, `at`, `rv`, `rb`, `op`, `cl`, `rs`, `ri`, `rp`, `pf`, `ie`
- ✅ `COLUMNS`, `showToast`, `formatDate`, `saveState`, `loadState`, `applyTheme`, `renderView`, `renderBoard`, `openModal`, `closeModal`, `renderStreaks`, `renderInsights`, `registerPalette`, `previousFocus`, `isEditing`
- **Jede Variable und Funktion MUSS einen selbsterklärenden Namen haben.** Keine Abkürzungen unter 4 Zeichen.

**JavaScript**
- ✅ `const`/`let` — NIE `var`
- ✅ `===` statt `==`
- ✅ Template-Literals `` `Hallo ${name}` `` statt `'Hallo ' + name`
- ✅ Arrow-Funktionen `() => {}` wo sinnvoll
- ✅ `for...of` statt `for(var i=0;...)` wo möglich
- ❌ Kein `eval()`, kein `innerHTML` mit ungeprüftem Input
- ❌ Keine globalen Variablen (alles in IIFE oder Modul-Scope)

**CSS**
- ✅ CSS-Variablen (`var(--bg)`) nutzen — NIEMALS Farben hartkodieren
- ✅ Dark Mode NUR über `[data-theme="dark"]` und `prefers-color-scheme`
- ✅ `rem`/`em` für Schrift, `px` nur für Borders, `%`/`fr`/`vh`/`vw` für Layout
- ❌ Kein `!important`
- ❌ Keine Inline-Styles im HTML (alles im `<style>`-Block)

**HTML**
- ✅ Semantisch: `<aside>`, `<nav>`, `<main>`, `<section>`, `<dialog>` wo passend
- ✅ ARIA-Labels für interaktive Elemente ohne sichtbaren Text
- ✅ `tabindex` nur wo nötig, korrekte Reihenfolge
- ❌ Kein `<div onclick="...">` — immer `addEventListener` in JS

**Kommentare**
- ✅ Jede Funktion hat EINEN Satz darüber, was sie tut
- ✅ Komplexe Logik (Streak, DnD, Chart) hat 2-3 Zeilen Erklärung
- ❌ Keine auskommentierten Code-Blöcke