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>

internal/web/static/assets/pages/views.js

@@ -1,4 +1,4 @@
-import { h, mount, table, field, input, select, textarea, toast, errorBox, confirmDialog, modal, lines, checkbox, colorPicker } from "../ui.js";
+import { h, mount, table, field, input, select, textarea, toast, errorBox, confirmDialog, modal, lines, checkbox, colorPicker, backLink, safeBack, viewHref } from "../ui.js";
 import { amlContext, suggestions } from "../aml.js";
 import { api, get, change, describeResult } from "../api.js";
 import { rerender } from "../app.js";
@@ -9,6 +9,9 @@ export async function render(el, params, query) {
   const viewless = zones.filter((z) => !z.view_id);
   const optsEl = h("div");
   const selected = query.get("view") ? views.find((v) => String(v.id) === query.get("view")) : null;
+  // Opened from a view link on a zone or the zone list: offer the way back
+  // (kept while picking other views here).
+  const back = safeBack(query.get("back"));
   const move = async (i, d) => {
     const ids = views.map((v) => v.id);
     [ids[i], ids[i + d]] = [ids[i + d], ids[i]];
@@ -20,14 +23,14 @@ export async function render(el, params, query) {
   };
   mount(el,
     h("div", { class: "page-head" },
-      h("div", { class: "grow" }, h("h1", null, "Views"),
+      h("div", { class: "grow" }, back ? backLink(backLabel(back, zones), back) : null, h("h1", null, "Views"),
         h("div", { class: "muted" }, "A client sees the first view it matches (by source address, destination address or TSIG key). Order matters.")),
       h("div", { class: "actions" }, h("button", { class: "primary", onclick: () => viewDialog(null, viewless) }, "New view"))),
     views.length === 0 ? h("div", { class: "msg info" },
       "No views: every client sees the same zones. Views let you serve different answers to different clients, for example an internal view with private records and recursion for your LAN, and an external view with only public records.") : null,
     h("div", { class: "panel" }, table([
       { label: "#", render: (v, i) => String(i + 1) },
-      { label: "View", render: (v) => h("a", { href: "#/views?view=" + v.id, class: v.color ? "vc-" + v.color : null }, h("strong", null, v.name)) },
+      { label: "View", render: (v) => h("a", { href: viewHref(v.id, back), class: v.color ? "vc-" + v.color : null }, h("strong", null, v.name)) },
       { label: "Match clients", render: (v) => (v.match_clients || []).join("; ") || h("span", { class: "muted" }, "any"), tdClass: "data" },
       { label: "Match destinations", render: (v) => (v.match_destinations || []).join("; ") || h("span", { class: "muted" }, "any"), tdClass: "data" },
       { label: "Zones", render: (v) => h("a", { href: "#/zones?view=" + encodeURIComponent(v.name) }, String(v.zone_count)) },
@@ -47,6 +50,16 @@ export async function render(el, params, query) {
   }
 }
 
+// backLabel names the page a back address leads to.
+function backLabel(back, zones) {
+  const m = back.match(/^#\/zones\/(\d+)/);
+  if (m) {
+    const z = zones.find((z) => String(z.id) === m[1]);
+    return z ? z.display_name + (z.view ? " (" + z.view + ")" : "") : "Zone";
+  }
+  return /^#\/zones(\?|$)/.test(back) ? "Zones" : "Back";
+}
+
 async function viewDialog(v, viewless) {
   const err = h("div");
   const ctx = await amlContext();