feat(idlewatcher): restyle loading page and style SSE log levels

Restyle the idle watcher loading UI with design tokens, light and dark
variants via `prefers-color-scheme`, and system font stacks (drop
Google Fonts). Tighten layout, animations, and console presentation.

In `loading.js`, pass event `level` into `addConsoleLine` and apply
`level-*` classes so log lines can reflect debug, info, warn, and
error. On the HTML side, set `color-scheme`, add an empty `alt` on the
logo, and mark the loading dots as `aria-hidden` for assistive
technology.
This commit is contained in:
yusing
2026-04-23 10:05:28 +08:00
parent 01ca378bce
commit 5dc286f4a9
3 changed files with 224 additions and 125 deletions

View File

@@ -48,10 +48,20 @@ window.onload = async () => {
* @param {string} type - Console line type (e.g. ready, error, or WakeEventType)
* @param {string} message
* @param {string} timestamp - ISO timestamp string
* @param {EventLevel} [level]
*/
function addConsoleLine(type, message, timestamp) {
function addConsoleLine(type, message, timestamp, level) {
const lvl =
level === "debug" ||
level === "info" ||
level === "warn" ||
level === "error"
? level
: type === "error"
? "error"
: "info";
const line = document.createElement("div");
line.className = `console-line ${type}`;
line.className = `console-line ${type} level-${lvl}`;
const timestampEl = document.createElement("span");
timestampEl.className = "console-timestamp";
@@ -113,20 +123,25 @@ window.onload = async () => {
ready = true;
// Container is ready, hide loading dots and refresh
loadingDotsEl.style.display = "none";
addConsoleLine(type, "Container is ready, refreshing...", timestamp);
addConsoleLine(
type,
"Container is ready, refreshing...",
timestamp,
evt.level,
);
setTimeout(() => {
window.location.reload();
}, 200);
} else if (type === "error" || evt.level === "error") {
// Show error message and hide loading dots
const errorMessage = payload.error || payload.message || "Unknown error";
addConsoleLine(type, errorMessage, timestamp);
addConsoleLine(type, errorMessage, timestamp, evt.level);
loadingDotsEl.style.display = "none";
eventSource.close();
} else {
// Show other message types
const message = payload.message;
addConsoleLine(type, message, timestamp);
addConsoleLine(type, message, timestamp, evt.level);
}
};