Skip to content

feat(portal): full-width smart-home dashboard redesign - #216

Merged
CallMeTechie merged 9 commits into
masterfrom
feat/portal-redesign
Jul 4, 2026
Merged

feat(portal): full-width smart-home dashboard redesign#216
CallMeTechie merged 9 commits into
masterfrom
feat/portal-redesign

Conversation

@CallMeTechie

Copy link
Copy Markdown
Owner

Vollbreites „Smart-Home-Zentrale"-Redesign der Portalseite. Umgesetzt via Spec → Plan → subagent-getriebene TDD-Tasks; jeder Task einzeln reviewt, plus finaler Whole-Branch-Review (GO).

Mockup (Design-Referenz): https://claude.ai/code/artifact/07f1d9f7-c768-4b40-ab9a-482c37bad1b4

Was sich ändert

  • Volle Breite: Wrapper 1120 → 1560 px, 12-Spalten-Grid, responsiv (Breakpoints 1040/620, kein horizontales Scrollen).
  • Steuerung zuerst: Reihenfolge Status-Leiste → Klima + SmartHomePi-hole + TrafficDienste.
  • Status-Leiste statt großer Geräte-Karte (schlank; behält .c-device-Guard + IDs; sichtbarer Fallback im Degraded-State).
  • Klima: Temperatur-Ring + Stepper + Modus-Segment. Alle ausgelieferten Features erhalten (Lüfter/Turbo/Eco/Außentemp, data-act-Marker).
  • Pi-hole: Block-Raten-Donut (aus d.blockedPct) + Kennzahlen; 3-fach-Scope + IDs erhalten.
  • Smart Home: Toggle-Kacheln (role="switch" + aria-checked + aria-label) + Sensor-Reihe.
  • Dienste: kompakte Icon-Startleiste statt seitenfüllender Kacheln.
  • A11y: globaler :focus-visible-Ring; aria-pressed/aria-checked je Rolle korrekt.

Sicherheit / Kompatibilität

  • Alle geräte-/dienst-/sensor-gelieferten Strings via escHtml()/textContent; SH_ICONS-innerHTML ist enum-bounded (verifiziert).
  • Alle DOM-IDs/data-act-Marker, die portal.js + bestehende Widget-Tests nutzen, bleiben erhalten; kein toter Code (piBar/alte Kacheln/alte SH-Klassen entfernt).
  • Widget-Toggles + Owner-Scoping/Redaktion unverändert (kein Backend/Endpoint/Datenmodell berührt).
  • i18n: neue portal.*-Keys in de+en + PT-Block (kein GC.t-Whitelist nötig).

Tests

  • Neue tests/portal_redesign_layout.test.js (Reihenfolge, Strip, Donut, Toggle-Rolle, kompakte Dienste).
  • tests/portal_css_smoke.test.js angepasst (negative .donut-Assertion → positiv).
  • Volle Portal-Suite lokal 32/32 grün (portal_api, css_smoke, redesign_layout, midea/pihole/smarthome widget-ui).

Backlog (nicht blockierend, aus finalem Review)

  • Distinkte SmartHome-Icons für scene/switch.
  • Loading-Skeleton für die Status-Leiste.

🤖 Generated with Claude Code

…erved

Target-temp SVG ring (r=52, 16-30 range) + text mode-segment + i18n
stepper aria-labels, replacing the old conic-gradient ring and icon
mode buttons. All existing data-act/data-mode controls (fan, fan-auto,
turbo, eco, outdoor) keep their markup and event wiring unchanged.
Restyle the SmartHome widget markup to the mockup's .sh-tile/.toggle/
.sh-sensors/.sensor language (device toggles as role=switch pills,
sensors as a plain tile row) while keeping container IDs, data
fields, and the control/state endpoints unchanged.
@CallMeTechie
CallMeTechie merged commit f06d54e into master Jul 4, 2026
8 checks passed
@CallMeTechie
CallMeTechie deleted the feat/portal-redesign branch July 4, 2026 16:59
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant