diff --git a/docs/ui-rework-sollmodell.md b/docs/ui-rework-sollmodell.md new file mode 100644 index 0000000..53b1d83 --- /dev/null +++ b/docs/ui-rework-sollmodell.md @@ -0,0 +1,74 @@ +# UI-Sollmodell – Control Plane + +## Zielbild +- **Operator-first**: Das UI muss schnell erfassbar sein, ohne verschwenderischen Glanz. Klar strukturierte Oberflächen mit nordisch-kühlen Tönen, typografischer Klarheit und ausreichend Weißraum ermöglichen fokussiertes Arbeiten ohne Ablenkung. +- **Helles Farbschema**: Weiß- und Graustufen dominieren, Akzente bleiben zurückhaltend (tiefe Blau- oder Grünwerte für Aktionen/Status). Kein Neon, kein Cyber-Punk-Glanz, keine animierten Nebel. +- **Vertrauensein: Live-Status & Kontrolle auf einen Blick**: Wichtigste Telemetrie und Schalter werden ohne Scrollen sichtbar. Historien und Auditdaten leben in eigenen, abrufbaren Tabs. + +## Informationsarchitektur & Tabs +Statt des current long-scroll Layouts treten klar abgegrenzte Top-Level-Tabs. Jeder Tab bekommt eine eindeutige Verantwortung. + +### 1. Overview & Status +**Zweck**: Schnellcheck, ob Sender/Control Plane gesund ist. Live-Hero, Status-Zustand, Aktivitäts-Metriken. +**Inhalte**: +- Hero-Panel mit Frequenz, TX-Status, Connection-LED, Zustandshinweis +- Schnellmetriken (Chunks, Samples, Underruns, Uptime, Rate) +- Visuelle Health-Sparkbars (Audio Buffer, Stream Health, TX Activity) +- Kurznotizen zum letzten Fehler/Runtime-State (z.B. Bullet unter Hero) +- Kompaktes „Last Update / Runtime Age“-Widget +> Alles bleibt hier; nichts anderes. + +### 2. Transmission Control +**Zweck**: Alle live-änderbaren Controls bündeln, damit ein Operator schnell Eingriffe macht. +**Inhalte**: +- TX Buttons (Start/Stop/Refresh) + große Hinweisfläche („Danger“-Status nur hier sichtbar, mit klarer Trennung) +- Frequency Panel (Slider, Eingabe, Presets, Apply/Reset) +- RDS Text Panel (PS/RT, Char-Counter, Presets) +- Switches (Stereo, RDS, Limiter) +- Optional: Danger Zone (Reset Fault / Hard Refresh) als separater Sub-Panel innerhalb des Tabs + +### 3. Diagnostics & Health +**Zweck**: Tiefere Einblicke, wenn etwas nicht stimmt. +**Inhalte**: +- Health-Dashboard (HTTP/Runtime/Queue/Buffer, Zeit seit Update) als strukturierte Key-Value-Liste +- Meter + Trend-Sparklines (High Watermark, Queue Fill) +- Control Audit (Reject Counts) +- Transition History + Fault History (pflege kurzer Listen) +> Diese Inhalte verschwinden vom Overview, sitzen gebündelt im Diagnostics-Tab. + +### 4. Activity & Logs +**Zweck**: Chronologische Einblicke und Auditierung. +**Inhalte**: +- Activity Log (komprimiert + scrollbar) +- Keyboard Shortcuts / Cheatsheet (ggf. als Suchleiste im Tab) +- Optional: kleine Info-Karte über Backend-Version, Live Config + +### Tab-Wechsel & Mobile +- Tabs als saturated horizontal/vertical nav mit Indikatoren (keine unwichtigen Animationen). +- Mobile: Tab-Inhalte untereinander, Tab-Bar sticky oben, Panels innerhalb Tabs collapsible. + +## Auch weiterhin auf Overview +- Hero mit Frequenz & TX-Status +- Schnellmetriken + Hauptstatus-Messwerte +- Kompaktes Toast/Status-Fenster +> Diagnosen, Logs, Toggels und History wandern in eigene Tabs. + +## Visuelle Stilprinzipien +1. **Palette**: Hintergrund `#f7f8fb`, Flächen `#ffffff`, `#eef0f3`, `#d7dcdf`; Text `#111724`/`#3b3f45`; Akzente `#1f4d9d`, `#0d944a` für positive Aktionen, `#b03030` für Fehler. +2. **Typografie**: Sans-Serif (z. B. `Inter` oder `Libre Franklin`), Gewichtung durch Größe statt Glow. Monospaced nur für Messwerte/Logs. +3. **Container**: Schatten weich (z. B. `0 8px 24px rgba(15,23,42,0.08)`), Ecken leicht gerundet (`8px`). +4. **Tabs/Navigation**: Prägnante Tab-Bar mit Underline/Border-Highlight. Klarer Fokuszustand, deutliche Hover/Active, keine Glüh-Effekte. +5. **Buttons**: Volume-sichere Farbflächen (z. B. `#0d944a`) auf weißem Hintergrund, sekundäre Buttons Outlines, Danger red minimal. +6. **Status-Indikatoren**: Nicht mehr „glow“; statische Icons oder leichte Capsules, ggf. Label (LIVE/IDLE) in Kapitälchen. +7. **Spacing**: Gitter (max-width 1200px) mit konsistentem `24px`-Gutter, `14px` Zwischenräume. + +## Nächste Schritte +1. **Tab-Start**: Wrapper für Tabs + Content-Sektionen in `internal/control/ui.html`. Beginn mit statischem Tab-Layout (z. B. `nav` + `section`s) und Platzhalter für Inhalte. +2. **Palette-Refactoring**: CSS-Variablen neu definieren (heller Hintergrund, neue Akzentfarben) und Grundflächen anpassen. +3. **Menu-State**: Simplify hero/medicine to new layout, move quick-grid + signal cards into Review `Overview` tab. +4. **Logik**: Tab-Switching via minimal JS (klassische `data-tab`), keine komplette re-rendering. + +## Offene Fragen +- Welche Panels bleiben collapsible in den Tabs (z. B. Danger Zone vs separate CTA)? +- Soll es ein persistentes „Status banner“ (z. B. oben) über allen Tabs geben? +- Wie viel Redundanz darf es zwischen Overview und Control geben (z. B. TX-Buttons)?