Link views from the zone list, add breadcrumbs and view colours

The view shown in the zone list and on the zone page now links to that
view. The zone page and changeset page get breadcrumbs, and the zone list
keeps its filters in the address so going back restores them. Views can
be given a colour (Views > Edit, `jarl view color`, PUT /views/{id}/color)
so zones of the same view are easy to spot; the colour is UI-only, kept
outside changesets, and needs no deploy.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

internal/web/static/assets/ui.js

@@ -247,3 +247,43 @@ export function debounce(fn, ms = 250) {
   let t;
   return (...args) => { clearTimeout(t); t = setTimeout(() => fn(...args), ms); };
 }
+
+// Where each list page was last left (with its filters), so a breadcrumb
+// back to it restores them. The router and list pages fill it in.
+export const lastList = {};
+
+// crumbs is a breadcrumb trail above a detail page's heading: the pages
+// it belongs to, as [label, href] pairs (the heading names the page).
+export function crumbs(...items) {
+  const out = [];
+  items.forEach(([label, href], i) => {
+    if (i > 0) out.push(h("span", { class: "sep", "aria-hidden": "true" }, "›"));
+    out.push(h("a", { href }, label));
+  });
+  return h("nav", { class: "crumbs", "aria-label": "Breadcrumb" }, out);
+}
+
+// The colours a view can be shown in (besides the default, the link
+// colour). Keep in step with model.ViewColors.
+export const viewColors = ["green", "teal", "purple", "pink", "orange", "yellow", "red", "grey"];
+
+// viewLink links to a view's page, in the view's colour. v is a view
+// from /views; name is shown when the view is unknown.
+export function viewLink(v, name) {
+  if (!v) return name ? h("span", null, name) : h("span", { class: "muted" }, "–");
+  return h("a", { href: "#/views?view=" + v.id, class: v.color ? "vc-" + v.color : null, title: "View " + v.name }, v.name);
+}
+
+// colorPicker picks a view colour; its value is "" for the default.
+export function colorPicker(value) {
+  const el = h("div", { class: "swatches", role: "radiogroup" });
+  const draw = () => mount(el, ["", ...viewColors].map((c) => h("button", {
+    type: "button", role: "radio", "aria-checked": String(c === el.value),
+    class: "swatch" + (c ? " vc-" + c : " vc-default") + (c === el.value ? " selected" : ""),
+    title: c || "default (link colour)", "aria-label": c || "default",
+    onclick: () => { el.value = c; draw(); },
+  })));
+  el.value = value || "";
+  draw();
+  return el;
+}