grotti/docs/internal/Features-UI.md

Grotti: Alltag und Oberfläche

Stand 18.10.2026, v3.2.0.

Design

• Dunkles UI mit Orange-Akzent; Light-Theme über dieselben Tokens (html[data-theme]).
• Schrift Inter (variable, lokal unter web/static/fonts/).
• Icons: Lucide als Sprite web/static/icons.svg (bauen mit python scripts/build_icons.py), IDs i-<name>.
• Komponenten: Toolbar, Card-Head, KPI-Karten, Chips (Zustände + Queue + Urteile), Dialog-Kopf/Fuß, Empty-States, Skeleton.
• Primär: btn-primary / go-btn; Danger: btn-danger / warn; Icon-Buttons mit title/aria-label.
• Anzeige pro Browser: Desktop oder Regal (Touch); Zeitzone; Nav einklappbar.
• PWA: manifest.webmanifest + Service-Worker (Shell-Cache inkl. Icons/Font).
• Live: SSE /api/v1/stream plus Poll-Fallback; Verbindungsbanner.
• Ctrl+K: globale Suche (/api/v1/suche); Knopf in der Topbar.
• Kamera: Snapshot (gecacht) oder MJPEG-Stream (/api/v1/kamera/stream), Browser-Einstellung grotti-camera.

Seitenleiste und Topbar

• Sidebar: Abschnittslabels Live / Rückschau / Verwalten (ohne Live-Panel).
• Topbar-Live-Chips (Jetzt · Läufe · Senden · Meldungen) mit Popover; Farm-ETA nur bei mehreren Läufen.
• Mobile: Tab Jetzt (/jetzt) statt Aktivität in der unteren Leiste; Aktivität unter Mehr.
• Topbar: Suche, Einstellungen, Doku, Benutzer-Menü (Avatar → Abmelden, Version, Copyright).
• Mobile: Bottom-Nav Drucker · Dateien · Warteschlange · Aktivität · Mehr (Sheet inkl. Abmelden); Topbar ausgeblendet, Suche als Icon in der Brand-Zeile.

Wand und Abräumen

• Karten + Cockpit; Technik-Fold mit Icons je Abschnitt.
• Platte geräumt öffnet Dialog: gut/Ausschuss, Grund, Stückzahlen.

Aufträge und Wartung

• /auftraege: Kunden, Positionen, Einreihen, Lieferschein. Status als Chip.
• /wartung: Stunden/Meter und Verschleißteile.

Dateien, Material, Statistik

• Bibliothek mit Toolbar/Suche; Senden-Schritte nummeriert.
• Material: Spulen/Sorten-Tabs, Filter-Toolbar.
• Statistik: KPI-Karten mit Icons.