docs: three visual refresh concepts for the web UI - #91
Draft
dougrathbone wants to merge 1 commit into
Draft
Conversation
The web UI has grown feature by feature and its visual language has not been revisited since it was a single labels table. Rather than argue about a refresh in the abstract, this adds three static prototypes that can be opened in a browser and compared side by side, each answering the same brief in a different way: token-level polish that keeps the DOM, a Home Assistant-native re-layout so the ingress panel stops looking like a separate product, and a density-first operator console aimed at the 400-group installs. The README records what each concept costs to implement, what it gives up, and the constraints any refresh has to respect - single file with no build step, no CDN for fonts or icons, an ingress iframe that cannot read the HA theme, and the iOS zoom and touch-target rules already in the shipped CSS. No production code is touched; public/index.html is unchanged. Co-authored-by: Doug Rathbone <dougrathbone@users.noreply.github.com>
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.
Summary
Exploration of what a visual refresh to the web UI (
public/index.html) could look like, as three viewable static prototypes rather than a written proposal. Each opens in a browser with fake data and supports?theme=dark|lightand?tab=status|labels|events|import.No production code is touched.
public/index.htmlis unchanged.The problems all three are aimed at: connection state on the Status tab renders at the same size and weight as the version string, so health takes a read rather than a glance; health is only visible on one tab; the palette is Mantine's default blue rather than HA's, so the ingress panel looks like a separate product; and the device table combines zebra striping, row hairlines and a header underline while giving addresses no visual distinction from labels.
A - "Refined": same DOM, new tokens
Segmented tabs, elevation instead of borders, state dots on the status tiles, monospace address chips, pill badges, and a real button hierarchy. Costs the
<style>block only - no markup, no JS, no API change - and the mobilenth-childcolumn-hiding rules keep working because column order does not move. Rows grow 31px → 35px, so it buys legibility with a little density.B - "Home Assistant Native": looks like part of HA
Primary-coloured app bar,
ha-cardsurfaces, HA blue and dark palettes, entity rows with icon plus primary/secondary text, and devices grouped by area with excluded ones under "Not exposed to Home Assistant". Live Events becomes a logbook feed. Best phone experience of the three, lowest density;renderTable()becomes a grouped-list renderer and inline editing needs new affordances.C - "Operator Console": density first, dark first
Icon rail instead of tabs, a health strip in the top bar on every view, and a 24px-row data grid (about a third more devices per screen). Selecting a row opens an inspector with the full record plus live level, last-seen, and the four MQTT topics for that group - information that currently only exists in the docs. Largest change of the three, and some of it wants data the API does not expose yet.
Changes
docs/design/web-ui-refresh/variation-{a,b,c}-*.html- three static prototypes, self-contained, no external fonts or icon CDNsdocs/design/web-ui-refresh/README.md- what each concept costs, what it gives up, the constraints any refresh must respect, and a suggested pathdocs/design/web-ui-refresh/screenshots/- reference renders used by the READMETest plan
tests/webServer.test.jsonly checks thatindex.htmlis served), so nothing here is blocked by the suiteChecklist