Dashboard UI Improvements. - #121
Open
3735943886 wants to merge 3 commits into
Open
Conversation
Pressing Back from the device monitor landed on a management panel with no device list and a red status, for five seconds. The browser closes a page's WebSocket when it puts the page in the back/forward cache, so the close handler runs on the way back in, hides everything behind .hide-when-offline, and waits out the retry timer before anything reappears. Both pages reconnect on a persisted pageshow now. Not conditional on the socket reading as CLOSED, which was the first thing tried and did nothing: a page coming back from the cache can still report OPEN at pageshow time and only fire its close a moment later, so the check fell through and the close then queued the same five-second wait. The old socket is detached first, so that close cannot queue a second reconnect on top of this one. The retry runs at 250 ms the first time and backs off to five seconds only if that fails too, which also covers rethink being restarted underneath an open page. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
The panel listed a UUID and a model id, which is everything rethink knows and nothing a person uses. Four identical ceiling cassettes were four rows that differed only in the first eight characters of a UUID, and telling which one was the bedroom meant opening the monitor and turning something on. The ThinQ account already holds the answer, and the bridge already reads it - registrationPlan looks up the alias precisely so that registering an appliance does not rename it. It just never went anywhere else. Keep the list, hand it to the panel, and refresh it when the account changes: at startup, after logging in, after registering an appliance, and on logout, which clears it by the same path. Best-effort, and it costs nothing to an installation that does not use the bridge: the names are what an account has to offer, so with no account linked - or none configured at all - no row has one and the column is not drawn. An appliance the account happens not to cover still shows a dash beside the ones that do have names, where the column means something. A cloud that will not answer costs a log line and leaves the names already on screen alone. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
…hone Six columns, one of them a 36-character UUID, meant the panel scrolled sideways on a phone - and the centred title in the navigation bar, which Materialize lets run past the edge of a narrow screen, was pushing it further. Below the width where the columns stop fitting, each row becomes a card instead: the name, model, platform and id stack in one column, and the bridge switch and the monitor button stay pinned to the right, where a thumb can reach them without a horizontal scroll first. Nothing is dropped. The name and the id are cut off with an ellipsis rather than wrapped - a UUID across three lines is no more readable than a truncated one - and both carry their full text as a title, with the monitor page still showing the id in full. The monitor page had the same shape of problem one level down. Auto-scroll was floated inside the "Messages" heading, which made the heading a layout container, so a narrow screen dropped the float below it and split the switch: its name on one line and its lever on the next. It sits in a row of its own now, as an inline-flex unit that cannot be split, and the Off/On words either side of the lever are gone - the lever's position already says which it is, and the words doubled the width. Checked by rendering both pages against a stub at 390, 768 and 1200 pixels: the document is exactly as wide as the viewport at each of them. The charset neither page declared came out of the same exercise, where an em dash arrived as three characters of mojibake. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Owner
|
Contributor
Author
|
Thanks for reviewing this. Regarding the names (2): I expect most people will rename them. Anyone turning the bridge on is doing so to use the app, and the app is where the name needs to be readable. (I renamed all of mine too back when I used the upstream repo). Regarding refreshing only at startup: Fair point, and I'd like to fix it in this PR if you don't mind. My preference is to trigger a refresh when the management panel is opened, or alternatively, we could add an explicit sync button with no auto-refresh, or simply drop the name feature altogether. Let me know your thoughts. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Show the ThinQ name for each appliance. The panel listed a UUID and a model id;
The bridge already reads the account's aliases for registration — this keeps the list and
hands it to the panel, refreshed on login, register and logout. Costs nothing to an
installation without an account: no row has a name, so the column is not drawn.
Reconnect a page restored from the back/forward cache. Back from the monitor landed
on an empty panel for five seconds: the browser closes the socket when it caches the
page, so the close handler ran on the way back in.
Fit the device list on a phone. Six columns, one a 36-character UUID, scrolled
sideways. Below the breakpoint each row becomes a card, with the bridge switch and
monitor button pinned right. Nothing is dropped — name and id ellipsize and carry their
full text as
title. Auto-scroll also moves out of the "Messages" heading, which wasacting as a float container and splitting the switch across a wrap.