Fix the Stage 1 Dashboard UX defects found in assembled review
CI / verify (pull_request) Successful in 1m13s
CI / infrastructure-smoke (pull_request) Successful in 34s
CI / package-release (pull_request) Successful in 48s
CI / migration-smoke (pull_request) Successful in 2m22s
CI / image-build (pull_request) Successful in 1m8s
CI / deploy-smoke (same-origin) (pull_request) Successful in 49s
CI / package-publication (pull_request) Successful in 57s
CI / deploy-smoke (split) (pull_request) Successful in 3m38s
CI / verify (pull_request) Successful in 1m13s
CI / infrastructure-smoke (pull_request) Successful in 34s
CI / package-release (pull_request) Successful in 48s
CI / migration-smoke (pull_request) Successful in 2m22s
CI / image-build (pull_request) Successful in 1m8s
CI / deploy-smoke (same-origin) (pull_request) Successful in 49s
CI / package-publication (pull_request) Successful in 57s
CI / deploy-smoke (split) (pull_request) Successful in 3m38s
The assembled Stage 1 Dashboard was reviewed by hand on a desktop, with the sidebar collapsed, and on an iPhone. This fixes what that review found, and records the decisions in ADR 0064: - Discover is its own page at /settings/discover, with Installed and Updates beneath it as children. There is no Browse item any more. /settings/discover/browse is still read, as an alias, and is respelled in place. Parents and children now read as a hierarchy: a guide line, text-only children, a disclosure chevron, and parent and current states that look different. - The sidebar is navigation only. Display pairing moves from the sidebar and drawer to Settings -> Displays: the paired displays, a deliberate Add display dialog, and revocation. Nothing takes focus on arrival; the code field is focused only once Add display is chosen. - Collapsed icons are centred. Nav-link layout moves from inline styles to the shell stylesheet, and every collapsed item is one square centred on the rail. - /settings is an overview of the installation: displays paired, modules installed and running, and a line for each other area. It reads only existing endpoints. - Phones get a sticky, safe-area-aware header holding the menu trigger and the page name. New pages start at the top, and focus no longer scrolls content under the header. - @ekklesia/ui draws checkbox and radio indicators from tokens rather than accent-color, so the selected state is the strong accent in Light and Dark alike. Co-Authored-By: Claude Opus 5.5 <[email protected]>
This commit is contained in:
co-authored by
Claude Opus 5.5
parent
186668915b
commit
405e509bcb
@@ -574,7 +574,8 @@ if (openedModuleId) {
|
||||
}
|
||||
}
|
||||
|
||||
// --- Settings (ADR 0061): a deep link, a refresh, Discover, a module's settings, the drawer -------
|
||||
// --- Settings (ADR 0061, ADR 0064): a deep link, a refresh, Displays, Discover, a module's settings,
|
||||
// the drawer ----------------------------------------------------------------------------------------
|
||||
await navigate(`${dashboardOrigin}/settings`);
|
||||
check(
|
||||
await waitFor(
|
||||
@@ -593,13 +594,37 @@ check(
|
||||
),
|
||||
"refreshing a Settings page stays on it, marked in the navigation",
|
||||
);
|
||||
check(
|
||||
await evaluate(
|
||||
`!${selector("host-sidebar")}.querySelector("input, form") && document.activeElement?.tagName !== "INPUT"`,
|
||||
),
|
||||
"the sidebar is navigation only, and arriving at Displays focuses no field",
|
||||
);
|
||||
await evaluate(`${selector("add-display")}.click()`);
|
||||
check(
|
||||
await waitFor(
|
||||
`${selector("add-display-dialog")} && document.activeElement === ${selector("device-pairing-code-input")}`,
|
||||
"the Add display dialog with its code field focused",
|
||||
),
|
||||
"Add display opens a dialog that focuses the pairing code only once asked",
|
||||
);
|
||||
await evaluate(`${selector("add-display-cancel")}.click()`);
|
||||
await waitFor(`!${selector("add-display-dialog")}`, "the Add display dialog closing");
|
||||
await navigate(`${dashboardOrigin}/settings/discover`);
|
||||
check(
|
||||
await waitFor(
|
||||
`location.pathname === "/settings/discover/browse" && ${selector("settings-discover-browse")}`,
|
||||
"Discover opening at Browse",
|
||||
`location.pathname === "/settings/discover" && ${selector("settings-discover-browse")} && ${selector("select-settings-discover")}?.getAttribute("aria-current") === "page"`,
|
||||
"Discover's own page",
|
||||
),
|
||||
"entering Discover opens Browse at its one canonical address",
|
||||
"Discover is its own page at /settings/discover",
|
||||
);
|
||||
await navigate(`${dashboardOrigin}/settings/discover/browse`);
|
||||
check(
|
||||
await waitFor(
|
||||
`location.pathname === "/settings/discover" && ${selector("settings-discover-browse")}`,
|
||||
"the earlier Browse address respelled",
|
||||
),
|
||||
"the earlier /settings/discover/browse respells to /settings/discover",
|
||||
);
|
||||
if (openedModuleId) {
|
||||
await navigate(`${dashboardOrigin}/settings/${openedModuleId}`);
|
||||
@@ -619,6 +644,14 @@ await send("Emulation.setDeviceMetricsOverride", {
|
||||
});
|
||||
await navigate(`${dashboardOrigin}/settings`);
|
||||
await waitFor(selector("mobile-navigation-trigger"), "the phone navigation trigger in Settings");
|
||||
await evaluate("window.scrollTo(0, document.documentElement.scrollHeight)");
|
||||
check(
|
||||
await waitFor(
|
||||
`${selector("mobile-header")} && ${selector("mobile-navigation-trigger")}.getBoundingClientRect().top >= 0 && document.documentElement.scrollWidth <= innerWidth`,
|
||||
"the phone header after scrolling",
|
||||
),
|
||||
"the phone header keeps the menu in reach after scrolling, with no horizontal overflow",
|
||||
);
|
||||
await evaluate(`${selector("mobile-navigation-trigger")}.click()`);
|
||||
await waitFor(
|
||||
`${selector("navigation-drawer")}?.querySelector('[data-testid="select-settings-system"]')`,
|
||||
|
||||
Reference in New Issue
Block a user