Entity picker in PropertiesPanel + selected-entities room state (slice of #5) #9

New issue

Closed

opened 2026-09-18 16:24:11 +00:00 by Mark · 0 comments

Mark commented

2026-09-18 16:24:11 +00:00

Owner

Parent-Issue: #5

Slice 4 + 5 of issue #5 decomposition. Once the user is connected to HA (via the hook/Settings dialog from the sibling child issue), the editor needs to browse real entities and let the user pick which lights/climate/sensors/media_players/switches belong to a room.

Scope (one PR):

Add a picker UI inside src/components/editor/PropertiesPanel.tsx (when a room is selected) that fetches entities from HA via the existing useHomeAssistant hook.
Group entities by domain: light, climate, sensor, media_player, switch (the five domains called out in #5 acceptance criteria).
Persist selected entities in room state (extend the existing room-state shape; e.g. room.haEntities: string[] storing entity_id values).
Show selection checkboxes per entity; show a search/filter input above the list.
If the HA connection is not established, show a placeholder that directs the user to Settings.

Acceptance criteria:

Selecting a room with an active HA connection shows a scrollable list of entities from the picker.
Check/uncheck persists across room selection, page reload, and YAML export (deferred to the next sibling issue; this issue only needs to round-trip selected entities through state).
Search/filter reduces the list client-side; empty result state is shown cleanly.
Failed fetch (network down, token revoked, etc.) surfaces an error banner inside the panel with a Retry button.
npm run build, npm run lint, npm run typecheck (tsc -b) all pass.

Out of scope:

YAML export format change (separate child issue).
CORS / proxy tooling for local development (separate child issue).
Editing or removing src/lib/ha-api.ts (already landed for #5 Slice 1).

**Parent-Issue:** #5 Slice 4 + 5 of issue #5 decomposition. Once the user is connected to HA (via the hook/Settings dialog from the sibling child issue), the editor needs to browse real entities and let the user pick which lights/climate/sensors/media_players/switches belong to a room. **Scope (one PR):** - Add a picker UI inside `src/components/editor/PropertiesPanel.tsx` (when a room is selected) that fetches entities from HA via the existing `useHomeAssistant` hook. - Group entities by domain: `light`, `climate`, `sensor`, `media_player`, `switch` (the five domains called out in #5 acceptance criteria). - Persist selected entities in room state (extend the existing room-state shape; e.g. `room.haEntities: string[]` storing `entity_id` values). - Show selection checkboxes per entity; show a search/filter input above the list. - If the HA connection is not established, show a placeholder that directs the user to Settings. **Acceptance criteria:** - Selecting a room with an active HA connection shows a scrollable list of entities from the picker. - Check/uncheck persists across room selection, page reload, and YAML export (deferred to the next sibling issue; this issue only needs to round-trip selected entities through state). - Search/filter reduces the list client-side; empty result state is shown cleanly. - Failed fetch (network down, token revoked, etc.) surfaces an error banner inside the panel with a Retry button. - `npm run build`, `npm run lint`, `npm run typecheck` (`tsc -b`) all pass. **Out of scope:** - YAML export format change (separate child issue). - CORS / proxy tooling for local development (separate child issue). - Editing or removing `src/lib/ha-api.ts` (already landed for #5 Slice 1).