Web UI: linked views link to their zones; pick views to link one per row, none ticked

The "linked with" badge links each view's zone (the API's zones carry links: id and view). The Link dialog lists the views one per row, with record count and any link they already have; nothing is ticked, Link waits for a choice and names every zone that will join.

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

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

@@ -34,7 +34,8 @@ export async function render(el, params, query) {
           zone.view ? ["view ", viewLink(view, zone.view, "#/zones/" + id + (params.tab ? "/" + params.tab : "")), " · "] : null,
           zone.type === "primary" ? "serial " + zone.soa.serial + " · " : null,
           zone.dnssec_policy ? [h("a", { href: "#/zones/" + id + "/dnssec" }, badge(zone.dnssec_policy === "insecure" ? "DNSSEC: turning off" : "DNSSEC", zone.dnssec_policy === "insecure" ? "warn" : "ok")), " "] : null,
-          zone.linked_with ? [badge("linked with " + zone.linked_with.join(", "), "accent"), " "] : null,
+          zone.links ? [h("span", { class: "badge accent" }, "linked with ",
+            zone.links.map((l, i) => [i ? ", " : "", h("a", { href: "#/zones/" + l.id + (params.tab ? "/" + params.tab : ""), title: "The zone in view " + l.view }, l.view)])), " "] : null,
           zone.zone_file ? h("span", { class: "mono small" }, zone.zone_file) : null)),
       h("div", { class: "actions" },
         zone.disabled
@@ -94,25 +95,53 @@ async function linkDialog(zone) {
     await modal("Link zone", h("p", null, "No other view has a zone " + zone.display_name + ". Create it there linked: New zone, the same name, \"Copy records from\" this one with \"Keep them linked\" ticked."));
     return;
   }
-  const boxes = others.map((z) => { const c = checkbox("view " + z.view, true); c.view = z.view; return c; });
+  const picked = new Set();
   const err = h("div");
-  await modal("Link " + zone.display_name, h("div", null,
+  let linkBtn = null;
+  const rows = others.map((z) => {
+    const box = h("input", { type: "checkbox", "aria-label": "Link with view " + z.view });
+    box.addEventListener("change", () => {
+      if (box.checked) picked.add(z.view); else picked.delete(z.view);
+      tr.classList.toggle("selected", box.checked);
+      if (linkBtn) {
+        linkBtn.disabled = picked.size === 0;
+        // Zones already linked with a picked one join too: name them.
+        const all = new Set(picked);
+        for (const o of others) if (picked.has(o.view)) (o.linked_with || []).forEach((v) => all.add(v));
+        all.delete(zone.view);
+        linkBtn.textContent = picked.size ? "Link with " + [...all].join(", ") : "Link";
+      }
+    });
+    const tr = h("tr", { class: "pick", onclick: (e) => { if (e.target !== box) { box.checked = !box.checked; box.dispatchEvent(new Event("change")); } } },
+      h("td", null, box),
+      h("td", null, h("strong", null, z.view)),
+      h("td", { class: "muted" }, z.record_count + " records"),
+      h("td", { class: "small" }, z.linked_with ? "already linked with " + z.linked_with.join(", ") + " (joins too)" : ""));
+    return tr;
+  });
+  const body = h("div", null,
     h("p", null, "Linked zones keep their shared records in step: a change in one view reaches the others in the same change. Each view can still have records of its own, which override the shared ones of that name and type there, and keeps its own options."),
     h("p", { class: "muted small" }, "Linking changes no answer: records that are the same in every view become shared; anything that differs stays local to each view. Share one later from the view whose version is right."),
-    field("Link view " + zone.view + " with", h("div", null, boxes)), err), [
+    h("h3", null, "Link view " + zone.view + " with"),
+    h("div", { class: "table-wrap" }, h("table", { class: "pick-list" }, h("tbody", null, rows))),
+    err);
+  const open = modal("Link " + zone.display_name, body, [
     { label: "Cancel", value: null },
     { label: "Link", kind: "primary", onclick: async () => {
-      const w = boxes.filter((b) => b.input.checked).map((b) => b.view);
-      if (!w.length) { mount(err, h("div", { class: "msg err" }, "Pick at least one view.")); return false; }
+      if (!picked.size) return false;
       try {
-        const r = await change("POST", "/zones/" + zone.id + "/link", { with: w });
+        const r = await change("POST", "/zones/" + zone.id + "/link", { with: [...picked] });
         toast(describeResult(r));
         (r.warnings || []).forEach((m) => toast(m, "warn", 12000));
         rerender();
         return true;
       } catch (e) { mount(err, errorBox(e)); return false; }
     } },
-  ]);
+  ], { wide: true });
+  // Nothing is ticked at first: Link waits for a choice.
+  linkBtn = [...document.querySelectorAll(".modal .buttons button.primary")].pop();
+  if (linkBtn) linkBtn.disabled = true;
+  await open;
 }
 
 // ---- name servers: serials on the other servers, and the delegation

internal/web/static/assets/style.css

@@ -513,3 +513,8 @@ td textarea.code { min-width: min(72ch, 50vw); }
 /* Certificates: the "check the names" result under the ACME fields. */
 .check-names { margin: 6px 0 14px; }
 .check-names .table-wrap { margin-top: 8px; }
+
+/* A list to pick rows from (linking zones): the whole row toggles. */
+table.pick-list tr.pick { cursor: pointer; }
+table.pick-list tr.pick td:first-child { width: 2em; }
+table.pick-list tr.pick.selected { background: var(--accent-soft); }