Give each view its own page, and add a CNAME from an A record

Views open a page like a zone's, with Settings, Options and Zones tabs
(and New zone in that view); the Views page lists and orders them. A
and AAAA records get a + CNAME button that fills in the add form.

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

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

@@ -402,6 +402,20 @@ async function recordsTab(el, zone, query) {
     }
   };
   for (const f of [fName, fData, fTTL]) f.addEventListener("input", preview);
+  // aliasTo fills the add form with a CNAME to a record's name: only the
+  // alias's name is left to type.
+  const aliasTo = (r) => {
+    fType.value = "CNAME";
+    showHint();
+    fData.value = r.relative_name === "@" ? "@" : r.relative_name;
+    fName.value = "";
+    fTTL.value = "";
+    fComment.value = "";
+    preview();
+    form.scrollIntoView({ block: "nearest", behavior: "smooth" });
+    fName.placeholder = "alias for " + r.name.replace(/\.$/, "");
+    fName.focus();
+  };
   const add = async (e) => {
     e.preventDefault();
     mount(err);
@@ -419,6 +433,7 @@ async function recordsTab(el, zone, query) {
       // Start the next record from scratch (the type stays, as records
       // are often added several of a kind at a time).
       fName.value = "";
+      fName.placeholder = reverse && rinfo ? rinfo.example : "@ or www";
       fData.value = "";
       fTTL.value = "";
       fComment.value = "";
@@ -466,6 +481,8 @@ async function recordsTab(el, zone, query) {
       { label: "Data", render: (r) => r.data, tdClass: "data" },
       { label: "Comment", render: (r) => [r.pending ? [pendingBadge(r.pending), " "] : null, h("span", { class: "muted" }, r.comment || "")] },
       { label: "", render: (r) => r.pending === "delete" ? "" : h("span", null,
+        !reverse && (r.type === "A" || r.type === "AAAA") && !r.disabled
+          ? [h("button", { class: "small", title: "Add a CNAME record that points to " + r.name.replace(/\.$/, ""), onclick: () => aliasTo(r) }, "+ CNAME"), " "] : null,
         h("button", { class: "small", title: "Edit", onclick: () => edit(r) }, "Edit"), " ",
         r.disabled
           ? h("button", { class: "small toggle", title: "Put the record back in the zone", onclick: () => toggle(r) }, "Enable")