Replace breadcrumbs with back links; keep the zone header on tab switches

The zone page's breadcrumb (Zones › view) linked the view to a filtered
zone list while the view link below it opened the view. It is now a
single "← Zones" link back to the list with its filters, and a changeset
has "← History". View links carry where they came from, so the views page
offers "← example.org (external)" or "← Zones" (only the UI's own #/
addresses are accepted).

Switching a zone's tabs no longer blanks the page: the header and tabs
show at once and the previous tab stays, faded, until the next has
loaded. The router shows "Loading…" only for pages that take a while.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
abrown38andClaude Opus 5.5 committed 2026-10-09 15:07:55 +00:00
1 parent db9ebb14dd
commit 4b79abf296
8 files changed
+86 -40

No files matched your search

+11 -3
View File
@@ -49,7 +49,7 @@ const navItems = [
];
const app = document.getElementById("app");
let mainEl, navEl, barEl, current = { key: "" };
let mainEl, navEl, barEl, current = { key: "" }, routeGen = 0;
function parseHash() {
const raw = location.hash.replace(/^#\/?/, "");
@@ -162,11 +162,19 @@ async function route() {
current = { key: path, nav: r.nav, page: r.page, params, query };
if (!r.params && r.nav) lastList[r.nav] = location.hash;
renderNav();
mount(mainEl, h("div", { class: "muted" }, "Loading…"));
// Keep the old page until the new one is drawn (switching a zone's
// tabs shouldn't blank the page); say "Loading…" only when it's slow.
// (Only while the new page has drawn nothing yet: pages that draw
// their frame first fill it in afterwards.)
const gen = ++routeGen;
const old = mainEl.firstChild;
const slow = setTimeout(() => { if (gen === routeGen && mainEl.firstChild === old) mount(mainEl, h("div", { class: "muted" }, "Loading…")); }, 300);
try {
await r.page.render(mainEl, params, query);
} catch (e) {
mount(mainEl, h("h1", null, "Something went wrong"), errorBox(e));
if (gen === routeGen) mount(mainEl, h("h1", null, "Something went wrong"), errorBox(e));
} finally {
clearTimeout(slow);
}
return;
}