HA connection hook + Settings UI for URL + token (slice of #5) #8

New issue

Closed

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

Mark commented

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

Owner

Parent-Issue: #5

Slice 2 + 3 of issue #5 decomposition. The Home Assistant integration needs two layers before entity browsing is possible: a hook that wraps src/lib/ha-api.ts and exposes connection state, and a UI where the user enters HA URL + Long-Lived Access Token.

Scope (one PR):

Add src/hooks/useHomeAssistant.ts exporting useHomeAssistant() returning { connected, connecting, error, config, connect(url, token), disconnect(), refetch() }.
Persist url + token in localStorage so the connection survives reload.
Add a Settings dialog/sheet (src/components/editor/SettingsDialog.tsx) with HA URL field, token field (password input), Test Connection button, last-error display.
Wire the dialog entry point into the existing Toolbar.
Surface connection errors in the toolbar (e.g. red dot when disconnected).

Acceptance criteria:

User can open Settings, enter URL + token, click Test Connection, see success/failure.
After reload, connection state is restored; HA /api/ is pinged on mount to verify.
Failed connection shows the underlying error in the dialog and on the toolbar indicator.
npm run build, npm run lint, npm run typecheck (tsc -b) all pass.
src/lib/ha-api.ts (the API client already in the local commit for #5) is the only HTTP dependency; no new fetch code paths.

Out of scope:

Entity browsing / PropertiesPanel picker (separate child issue).
Room state storage of selected entities (separate child issue).
YAML export wiring (separate child issue).

**Parent-Issue:** #5 Slice 2 + 3 of issue #5 decomposition. The Home Assistant integration needs two layers before entity browsing is possible: a hook that wraps `src/lib/ha-api.ts` and exposes connection state, and a UI where the user enters HA URL + Long-Lived Access Token. **Scope (one PR):** - Add `src/hooks/useHomeAssistant.ts` exporting `useHomeAssistant()` returning `{ connected, connecting, error, config, connect(url, token), disconnect(), refetch() }`. - Persist `url` + `token` in `localStorage` so the connection survives reload. - Add a Settings dialog/sheet (`src/components/editor/SettingsDialog.tsx`) with HA URL field, token field (password input), Test Connection button, last-error display. - Wire the dialog entry point into the existing Toolbar. - Surface connection errors in the toolbar (e.g. red dot when disconnected). **Acceptance criteria:** - User can open Settings, enter URL + token, click Test Connection, see success/failure. - After reload, connection state is restored; HA `/api/` is pinged on mount to verify. - Failed connection shows the underlying error in the dialog and on the toolbar indicator. - `npm run build`, `npm run lint`, `npm run typecheck` (`tsc -b`) all pass. - `src/lib/ha-api.ts` (the API client already in the local commit for #5) is the only HTTP dependency; no new fetch code paths. **Out of scope:** - Entity browsing / PropertiesPanel picker (separate child issue). - Room state storage of selected entities (separate child issue). - YAML export wiring (separate child issue).