new ui 1

apps/ui/redesign_ui.txt

@@ -0,0 +1,188 @@
+/**
+Copilot-Aufgabe: Erzeuge eine neue Home-Dashboard-Seite mit Raum-Kacheln.
+
+Ziel:
+Die Seite soll alle Räume als kleine Kacheln darstellen. Auf dem iPhone
+sollen immer zwei Kacheln nebeneinander passen. Jede Kachel zeigt:
+- Raumname
+- Icon (z. B. Wohnzimmer, Küche, Bad, etc.) basierend auf room_id oder einem Mapping
+- Anzahl der Geräte im Raum
+- Optional: Zusammenfassung wichtiger States (z.B. Anzahl offener Fenster, aktive Lichter)
+
+Datenquelle:
+- GET /layout → { "rooms": [{ "name": "...", "devices": [...] }] }
+  (Achtung: rooms ist ein Array, kein Dictionary!)
+- GET /devices → Geräteliste für Feature-Checks
+
+Interaktion:
+- Beim Klick/Touch auf eine Raum-Kachel → Navigation zu /room/{room_name}
+
+Layout-Anforderungen:
+- 2-Spalten-Grid auf kleinen Screens (max-width ~ 600px)
+- 3–4 Spalten auf größeren Screens
+- Kachelgröße kompakt (ca. 140px x 110px)
+- Icon ~32px
+- Text ~14–16px
+- Responsive via CSS-Grid oder Flexbox
+- Minimaler Einsatz von Tailwind (bevorzugt vanilla CSS)
+
+Akzeptanzkriterien:
+- Die Seite lädt alle Räume über die API (fetch).
+- Räume werden in der Reihenfolge aus layout.yaml angezeigt.
+- Jede Kachel zeigt: Icon + Raumname + Geräteanzahl.
+- iPhone-Darstellung verifiziert: zwei Kacheln nebeneinander.
+- Funktionierende Navigation zu /room/{room_name}.
+- Die Komponente ist vollständig lauffähig.
+- Fehlerbehandlung bei API-Fehlern implementiert.
+*/
+
+/**
+Copilot-Aufgabe: Erzeuge eine Geräte-Grid-Ansicht für einen Raum.
+
+Ziel:
+Die Seite zeigt alle Geräte, die in diesem Raum laut layout.yaml liegen.
+Die Darstellung erfolgt als kompakte Kacheln, ebenfalls 2 Spalten auf iPhone.
+
+Datenquelle:
+- GET /layout → Räume + device_id + title
+- GET /devices → Typ + Features
+- GET /devices/{id}/state (optional zur Initialisierung)
+- Live-Updates: SSE /realtime
+
+Auf einer Gerät-Kachel sollen erscheinen:
+- passendes Icon (abhängig von type)
+- title (aus layout)
+- wichtigste Eigenschaft aus dem State:
+  - light: power on/off oder brightness in %
+  - thermostat: current temperature
+  - contact: open/closed
+  - temp_humidity: temperature und/oder humidity
+  - outlet: on/off
+  - cover: position %
+
+Interaktion:
+- Klick/Touch → Navigation zu /device/{device_id}
+
+Akzeptanzkriterien:
+- Der Raum wird anhand room_id aus der URL geladen.
+- Geräte werden über Join(layout, devices) des Raums selektiert.
+- Kacheln sind 2-spaltig auf iPhone.
+- State wird initial geladen und per SSE aktualisiert.
+- Navigation zu /device/{id} funktioniert.
+- Icons passend zum Typ generiert.
+*/
+
+/**
+Copilot-Aufgabe: Erzeuge eine Detailansicht für ein einzelnes Gerät.
+
+Ziel:
+Die Seite zeigt:
+- Titel des Geräts (title aus layout)
+- Raumname
+- Gerätetyp
+- State-Werte aus GET /devices/{id}/state
+- Live-Updates via SSE
+- Steuer-Elemente abhängig vom type + features:
+    - light: toggle, brightness-slider, optional color-picker
+    - thermostat: target-temp-slider
+    - outlet: toggle
+    - contact: nur Anzeige
+    - temp_humidity: nur Anzeigen von Temperatur/Humidity
+    - cover: position-slider und open/close/stop Buttons
+
+API-Integration:
+- Set-Kommandos senden via POST /devices/{id}/set
+- Validierung: Nur unterstützte Features sichtbar machen
+
+UI-Vorgaben:
+- Kompakt, aber komplett
+- Buttons gut für Touch erreichbar
+- Slider in voller Breite
+- Werte (temperature, humidity, battery) übersichtlich gruppiert
+
+Akzeptanzkriterien:
+- Device wird korrekt geladen (layout + devices + state).
+- Steuerung funktioniert (light on/off, brightness, target temp etc.).
+- SSE aktualisiert alle angezeigten Werte live.
+- Fehler (z. B. POST /set nicht erreichbar) werden UI-seitig angezeigt.
+*/
+
+/**
+Copilot-Aufgabe: Erzeuge einen API-Client für das UI.
+
+Der Client soll bereitstellen:
+- getLayout(): Layout-Daten
+- getDevices(): Device-Basisdaten
+- getDeviceState(device_id)
+- setDeviceState(device_id, type, payload)
+- connectRealtime(onEvent): SSE-Listener
+
+Anforderungen:
+- API_BASE aus .env oder UI-Konfiguration
+- Fehlerbehandlung
+- Timeout optional
+- Types für:
+    - Room
+    - Device
+    - DeviceState
+    - RealtimeEvent
+
+Akzeptanzkriterien:
+- Der Client ist voll funktionsfähig und wird im UI genutzt.
+- Ein Hook useRealtime(device_id) wird erzeugt.
+- Ein Hook useRooms() and useDevices() existieren.
+*/
+
+/**
+Copilot-Aufgabe: Erzeuge das UI-Routing.
+
+Routen:
+- "/"                    → Home (Räume)
+- "/room/:roomId"       → RoomView
+- "/device/:deviceId"   → DeviceView
+
+Anforderungen:
+- React Router v6 oder v7
+- Layout-Komponente optional
+- Loading/Fehlerzustände
+- Responsive Verhalten beibehalten
+
+Akzeptanzkriterien:
+- Navigation funktioniert zwischen allen Seiten.
+- Browser-Back funktioniert erwartungsgemäß.
+- Routes unterstützen Refresh ohne Fehler.
+*/
+
+/**
+Copilot-Aufgabe: Implementiere einen React-Hook useRealtime(deviceId: string | null).
+
+Ziel:
+- SSE-Stream /realtime abonnieren
+- Nur Events für deviceId liefern
+- onMessage → setState
+- automatische Reconnects
+- Fehlerlogging
+
+Akzeptanz:
+- Der Hook kann in RoomView & DeviceView genutzt werden.
+- Live-Updates werden korrekt gemerged.
+- Disconnect/Reload funktioniert sauber.
+*/
+
+/**
+Copilot-Aufgabe: Erzeuge eine Icon-Komponente.
+
+Ziel:
+Basierend auf device.type und ggf. features ein passendes SVG ausliefern:
+- light → Lightbulb
+- thermostat → Thermostat
+- contact → Door/Window-Sensor
+- temp_humidity → Thermometer+Droplet
+- outlet → Power-Plug
+- cover → Blinds/Rollershutter
+
+Akzeptanz:
+- Icons skalieren sauber
+- funktionieren in allen Kachel-Komponenten
+*/
+