Skip to content

#174 MQTT screen mobile view#550

Draft
bracyw wants to merge 4 commits intodevelopfrom
174-mqtt-screen-mobile-view
Draft

#174 MQTT screen mobile view#550
bracyw wants to merge 4 commits intodevelopfrom
174-mqtt-screen-mobile-view

Conversation

@bracyw
Copy link
Copy Markdown
Collaborator

@bracyw bracyw commented Mar 29, 2026 •
edited
Loading

Changes

Replaced the MQTT mobile tab with an integrated approach: PrimeNG Sidebar + Tree for topic selection with live values, a new LiveValueStrip showing current values above the graph, and a responsive toolbar. Extracted shared tree utilities to deduplicate sidebar logic.

  • PrimeNG Sidebar + Tree replaces custom popup in graph-sidebar-mobile
  • LiveValueStripComponent shows live topic values on mobile graph page
  • Shared tree.utils.ts eliminates ~50 lines duplicated between desktop/mobile sidebars
  • Fixed desktop sidebar subscription leak and stale value reads
  • Responsive graph page toolbar with 44px touch targets
  • Removed mqtt-mobile-view component and landing page tab switcher

Notes

  • Desktop sidebar was cleaned up alongside mobile: fixed subscription leak, removed dead code (filterForm, selectedDataTypesList, transformDataTypeName)
  • Live value strip uses no-op guard to skip signal updates when values are unchanged

Test Cases

  • Mobile landing page renders without MQTT tab
  • Sidebar opens with tree, search filter, and live values on leaf nodes
  • Selecting topics shows live values in strip above graph; deselecting hides it
  • Strip scrolls horizontally with 3+ topics; hidden on desktop
  • Desktop sidebar still works after shared utils refactor

Screenshots

Sidebar

mobile-sidebar-open with live values

Graph with live value strip

mobile-graph-with-strip

Checklist

  • All commits are tagged with the ticket number
  • No linting errors / newline at end of file warnings
  • All code follows repository-configured prettier formatting
  • No merge conflicts
  • All checks passing
  • Screenshots of UI changes (see Screenshots section)
  • Remove any non-applicable sections of this template
  • Assign the PR to yourself
  • No package-lock.json changes (unless dependencies have changed)
  • Request reviewers & ping on Slack
  • PR is linked to the ticket

Closes #174

bracyw and others added 4 commits March 28, 2026 20:29
@bracyw @claude
#174 Add MQTT mobile view with tab switching on landing page
89323f3 
Add a scrollable MQTT values list for mobile users and a tab bar
to switch between the existing Dashboard view and the new MQTT Values view.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@bracyw
#174 - PrimeNG sidebar, live value strip, responsive graph page
22f782e
@bracyw
#174 - apply prettier formatting
19c69ad
@bracyw
#174 - extract shared tree utils, fix desktop sidebar bugs
ada30f4
@bracyw bracyw self-assigned this Mar 29, 2026
@bracyw
Copy link
Copy Markdown
Collaborator Author

bracyw commented Mar 29, 2026

Screenshots

Mobile landing page (no MQTT tab)

See attached images

Uploading screenshots as individual comments with images...

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

@bracyw bracyw

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

[MQTT Screen] - Mobile View

1 participant

@bracyw