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/pages/views.js

@@ -1,6 +1,6 @@
-import { h, mount, table, field, input, select, textarea, toast, errorBox, confirmDialog, modal, lines, checkbox } from "../ui.js";
+import { h, mount, table, field, input, select, textarea, toast, errorBox, confirmDialog, modal, lines, checkbox, colorPicker } from "../ui.js";
 import { amlContext, suggestions } from "../aml.js";
-import { get, change, describeResult } from "../api.js";
+import { api, get, change, describeResult } from "../api.js";
 import { rerender } from "../app.js";
 import { optionsEditor } from "./options.js";
 
@@ -27,7 +27,7 @@ export async function render(el, params, query) {
       "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 }, h("strong", null, v.name)) },
+      { label: "View", render: (v) => h("a", { href: "#/views?view=" + v.id, 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)) },
@@ -37,10 +37,14 @@ export async function render(el, params, query) {
         h("button", { class: "small", disabled: i === views.length - 1, title: "Move down", onclick: () => move(i, 1) }, "↓"), " ",
         h("button", { class: "small", onclick: () => viewDialog(v, viewless) }, "Edit"), " ",
         h("button", { class: "small danger", onclick: () => deleteView(v) }, "Delete")), tdClass: "actions-cell" },
-    ], views, { empty: "No views." })),
+    ], views, { empty: "No views.", rowClass: (v) => selected && v.id === selected.id ? "selected" : "" })),
     selected ? optsEl : (views.length ? h("p", { class: "muted" }, "Select a view to see its options.") : null));
-  if (selected) await optionsEditor(optsEl, { scope: "view", scope_id: selected.id, catalogScope: "view", title: "Options of view " + selected.name,
-    intro: "View options override the server options for clients in this view (for example recursion and allow-recursion)." });
+  if (selected) {
+    await optionsEditor(optsEl, { scope: "view", scope_id: selected.id, catalogScope: "view", title: "Options of view " + selected.name,
+      intro: "View options override the server options for clients in this view (for example recursion and allow-recursion)." });
+    // With a long list, scroll to the selected view's options.
+    if (views.length > 3) optsEl.scrollIntoView({ block: "start" });
+  }
 }
 
 async function viewDialog(v, viewless) {
@@ -51,13 +55,15 @@ async function viewDialog(v, viewless) {
   const md = textarea(v ? (v.match_destinations || []).join("\n") : "", { class: "mono", rows: 2, placeholder: "(empty = any)" });
   const mro = select([["", "(default: no)"], ["true", "yes"], ["false", "no"]], v && v.match_recursive_only !== undefined && v.match_recursive_only !== null ? String(v.match_recursive_only) : "");
   const comment = input({ value: v ? v.comment : "" });
+  const color = colorPicker(v ? v.color : "");
   const adopt = checkbox("Move the " + viewless.length + " zone(s) that are not in a view into this view", true);
   const body = h("div", null, h("div", { class: "form-grid" },
     field("Name", name),
     field("Match clients", h("div", null, mc, suggestions(mc, ctx)), "One element per line: addresses, prefixes, ACL names, key NAME, any/none/localhost/localnets; !negates. First match wins."),
     field("Match destinations", h("div", null, md, suggestions(md, ctx)), "Server addresses this view answers on (optional)."),
     field("Recursive only", mro, "If yes, only recursive queries match this view."),
-    field("Comment", comment)),
+    field("Comment", comment),
+    field("Colour", color, "How the web UI shows this view, so zones of the same view are easy to spot. Only changes the web UI: it applies at once, with no deploy.")),
     !v && viewless.length ? h("div", { class: "msg warn" }, "Once views exist, named requires every zone to be inside a view. ", adopt) : null,
     err);
   await modal(v ? "Edit view " + v.name : "New view", body, [
@@ -66,9 +72,16 @@ async function viewDialog(v, viewless) {
       const data = { name: name.value.trim(), match_clients: lines(mc.value), match_destinations: lines(md.value), comment: comment.value };
       data.match_recursive_only = mro.value === "" ? null : mro.value === "true";
       if (!v && viewless.length && adopt.input.checked) data.adopt_zones = true;
+      const colorChanged = color.value !== ((v && v.color) || "");
       try {
-        const r = v ? await change("PATCH", "/views/" + v.id, data) : await change("POST", "/views", data);
-        toast(describeResult(r));
+        let r = null;
+        if (!v || configChanged(v, data)) r = v ? await change("PATCH", "/views/" + v.id, data) : await change("POST", "/views", data);
+        const id = v ? v.id : (r.object && r.object.id) || ((r.added || [])[0] || {}).id;
+        if (colorChanged && id) {
+          // A view created in a draft only exists in that draft so far.
+          await api("PUT", "/views/" + id + "/color", { body: { color: color.value }, stage: r && r.staged ? r.changeset_id : undefined });
+        }
+        toast(r ? describeResult(r) : "Colour saved");
         rerender();
         return true;
       } catch (e) { mount(err, errorBox(e)); return false; }
@@ -76,6 +89,15 @@ async function viewDialog(v, viewless) {
   ], { wide: true, sticky: true });
 }
 
+// configChanged tells whether the dialog changed the view's configuration
+// (not just its colour), so a colour change alone stages nothing.
+function configChanged(v, data) {
+  const same = (a, b) => JSON.stringify(a || []) === JSON.stringify(b || []);
+  const mro = v.match_recursive_only === undefined ? null : v.match_recursive_only;
+  return data.name !== v.name || !same(data.match_clients, v.match_clients) || !same(data.match_destinations, v.match_destinations) ||
+    data.match_recursive_only !== mro || data.comment !== (v.comment || "");
+}
+
 async function deleteView(v) {
   let cascade = false;
   if (v.zone_count > 0) {