feat(mqtt): improve device filtering and settings flow by SanderElias · Pull Request #114 · SanderElias/Samples

SanderElias · 2026-03-18T10:28:04Z

Summary

This PR improves the MQTT device experience by expanding filtering capabilities, refining settings/types handling, and fixing small-screen filter behavior.

What Changed

Added and iterated search/filter options for MQTT device views.
Updated MQTT settings/services/types to better model and process device settings.
Refined MQTT component structure and related types.
Updated pair/power-meter related MQTT components to align with the new settings/filter flow.
Fixed responsive behavior for the filter UI on small viewports.

Scope

Primary area: src/app/mqtt/**
Supporting updates in app boot/config and a few related services/components.
Repository/meta updates include lockfile/config/documentation changes made in the branch.

Notable Technical Details

Introduced/updated MQTT-specific type definitions to reduce implicit shape assumptions.
Consolidated filter/search state handling to improve readability and maintainability.
Improved mobile filter UX so controls are easier to access/use on narrower screens.

Testing

Manual verification focused on MQTT screens, including filter behavior and small-screen layout.
No additional automated test suite was run as part of this PR update.

Notes For Reviewers

Most meaningful review value is in src/app/mqtt/ where functional behavior changed.
Please pay extra attention to filter/search interactions and settings mapping edge cases.

cloudflare-workers-and-pages · 2026-03-18T10:28:09Z

Deploying samples with Cloudflare Pages

Latest commit:	`655e100`
Status:	🚫 Build failed.

View logs

Copilot

Pull request overview

This PR is a WIP refactor/feature set around the MQTT/Zigbee UI: introducing persisted search/filter options, centralizing Zigbee prefix types, and improving device settings/state handling (including bulk CouchDB fetch + SSR guards).

Changes:

Added persisted search UI (text + boolean options) and filtering pipeline for power meters.
Introduced shared Zigbee prefix types and expanded device status/settings typing + bulk settings fetch.
Updated MQTT/CouchDB services for SSR awareness, revision handling, and conflict mitigation; plus some styling and docs.

Reviewed changes

Copilot reviewed 27 out of 28 changed files in this pull request and generated 14 comments.

Show a summary per file

File	Description
src/bootspa.ts	Tweaks production bootstrap behavior (prod mode currently disabled).
src/app/mqtt/zigbee.service.ts	Adds subgroup derivation + status mapping updates.
src/app/mqtt/zigbee-prefixes.types.ts	New shared Zigbee prefix constants/types.
src/app/mqtt/power-meter/power-meter.component.ts	Power meter UI now reads settings/options and updates max power; refresh retry logic added.
src/app/mqtt/power-meter/dialog/power-meter-dialog.component.ts	Dialog now composes model from settings options and persists options on submit.
src/app/mqtt/power-meter/dialog/power-meter-dialog.component.css	Layout adjustments + checkbox label grid tweaks.
src/app/mqtt/pair-button/pair-button.component.ts	Updates Zigbee prefix type import location.
src/app/mqtt/mqtt.types.ts	Refines Zigbee device typing (Record/unknown) and renames some enums/interfaces.
src/app/mqtt/mqtt.service.types.ts	New extracted MQTT message type.
src/app/mqtt/mqtt.service.ts	Adds platform detection guard (but client init still unconditional).
src/app/mqtt/mqtt.component.types.ts	New extracted types for bulk get + search state + device composite models.
src/app/mqtt/mqtt.component.ts	Implements persisted search state, bulk CouchDB settings fetch, and filtered device list.
src/app/mqtt/mqtt.component.html	Adds filter UI and wires it to new computed filters.
src/app/mqtt/mqtt.component.css	Styles for new filter/search UI and responsive behavior.
src/app/mqtt/mqtt-device-settings.types.ts	New extracted settings/options types.
src/app/mqtt/mqtt-device-settings.service.ts	Revision-aware reads, safer DB creation attempts, conflict merge strategy, and options extraction helpers.
src/app/metered-view/gauge/gauge.component.ts	Adjusts SVG sizing approach (removes width/height attrs; rect size updated).
src/app/metered-view/gauge/gauge.component.css	Migrates to CSS logical sizing props (inline-size/block-size).
src/app/grid-play/logged-in-user.service.ts	SSR guard: user computed returns undefined on non-browser.
src/app/crud-stuff/utils/earlyread-undefined.ts	Expands helper to accept Signal or function getter.
src/app/crud-stuff/relations.service.ts	Adds guard against repeated CouchDB DB creation attempts.
sec-issues.md	New security issues report document (currently includes plaintext credentials).
logprops.md	New CSS logical properties migration plan document.
angular.json	Alters build/serve configurations (currently invalid JSON + production optimization disabled).
package.json	Bumps Angular next versions + tooling deps.
pnpm-lock.yaml	Lockfile updates to match dependency bumps.

Comments suppressed due to low confidence (1)

src/app/mqtt/mqtt.service.ts:27

client is initialized unconditionally (import('mqtt') + connectAsync(...)). On SSR/non-browser platforms this still triggers the dynamic import and connection attempt even though messages$ is guarded. Make the client creation lazy/conditional on #isBrowser (e.g., only create/connect inside messages$/listenFor when running in the browser).

  #isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
  mqtt = import('mqtt');
  client = this.mqtt.then(m =>
    m.default.connectAsync(`wss://mqtt.eliasweb.nl`)
  );

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

You can also share your feedback on Copilot code review. Take the survey.

+const apiKey = `RSIq08oTL7lA1DyETOmqujDSph7rvP4akG8NRPz9os6ywJjBhE`;
+const clientId = 'e972ca06cc4b961';


  constructor() {
    setTimeout(() => {
+      if (!this.user()) return; // don't set up the listener if we don't know the user (e.g. not logged in)
      const s = couchEventLister(this.base(), 'mqtt_device_settings').subscribe(


+      tries++;
+      this.refresh();
+      // console.log(`Attempt ${tries}: Refreshing device status for ${this.name()}`);
+      setTimeout(attemptRefresh, randomDelay());
+    };


                }
              ],
-              "optimization": true,
+              "optimization": false,


            }
-          }
+            ,
+            "development": {


Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

- Keep HEAD's Angular 22.0.0-next.5 versions in package.json - Keep MqttMessage interface in mqtt.types.ts - Take PR's httpResource/MqttDeviceSettingsService/undefinedWhenEmpty imports - Drop unused MqttService import - Regenerate pnpm-lock.yaml Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

SanderElias added 9 commits March 9, 2026 10:29

working on pmdialog

ceaa533

working on better mqtt stuff

8d7a49e

working on better mqtt stuff

5c6f3c3

WIP

40d9562

Merge branch 'main' into feat_add_setting_mqtt-2

03402b1

feat: search options

8dec502

feat: search options

9e02f52

feat: search options

5db2fba

fix: small screen filter options

011d3c3

SanderElias requested a review from Copilot March 18, 2026 10:29

Copilot started reviewing on behalf of SanderElias March 18, 2026 10:29 View session

Copilot AI reviewed Mar 18, 2026

View reviewed changes

SanderElias and others added 5 commits March 18, 2026 14:00

Potential fix for pull request finding

c186d5a

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

Potential fix for pull request finding

30cae57

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

Potential fix for pull request finding

a3ab3cb

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

Potential fix for pull request finding

a3a218c

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

Potential fix for pull request finding

3542999

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

SanderElias changed the title ~~feat add setting mqtt 2~~ feat(mqtt): improve device filtering and settings flow Mar 18, 2026

SanderElias added 5 commits March 22, 2026 07:57

chore: upgrade ng

4c5805e

feat: debouncedSignal proxy updates

95d38c7

feat: debouncedSignal updated

36c3f4d

fix: edgecases in awaitSignal

e93f69d

feat: prep for ts6

655e100

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(mqtt): improve device filtering and settings flow#114

feat(mqtt): improve device filtering and settings flow#114
SanderElias wants to merge 19 commits intomainfrom
feat_add_setting_mqtt-2

SanderElias commented Mar 18, 2026 •

edited

Loading

Uh oh!

cloudflare-workers-and-pages Bot commented Mar 18, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

		const apiKey = `RSIq08oTL7lA1DyETOmqujDSph7rvP4akG8NRPz9os6ywJjBhE`;
		const clientId = 'e972ca06cc4b961';

Conversation

SanderElias commented Mar 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

What Changed

Scope

Notable Technical Details

Testing

Notes For Reviewers

Uh oh!

cloudflare-workers-and-pages Bot commented Mar 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Deploying samples with Cloudflare Pages

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

SanderElias commented Mar 18, 2026 •

edited

Loading

cloudflare-workers-and-pages Bot commented Mar 18, 2026 •

edited

Loading