Separate record groups with lines instead of greying repeated names

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
adamandClaude Opus 5.5 committed 2026-10-09 22:09:55 +00:00
1 parent c9590cc3d4
commit 5f04ab523b
3 files changed
+15 -4

No files matched your search

+7 -3
View File
@@ -446,9 +446,8 @@ async function recordsTab(el, zone, query) {
const draw = () => {
const q = filter.value.trim().toLowerCase();
const rows = current.filter((r) => (!q || r.name.includes(q) || r.data.toLowerCase().includes(q) || (r.comment || "").toLowerCase().includes(q)) && (!typeFilter.value || r.type === typeFilter.value));
let prevName = null;
mount(list, table([
{ label: "Name", render: (r) => reverse && addressOf(r.name) ? [r.relative_name, " ", h("span", { class: "muted small" }, addressOf(r.name))] : r.relative_name, tdClass: (r) => { const rep = r.name === prevName; prevName = r.name; return "name" + (rep ? " repeat" : ""); } },
{ label: "Name", render: (r) => reverse && addressOf(r.name) ? [r.relative_name, " ", h("span", { class: "muted small" }, addressOf(r.name))] : r.relative_name, tdClass: "name" },
{ label: "TTL", render: (r) => r.ttl !== undefined && r.ttl !== null ? String(r.ttl) : h("span", { class: "muted", title: "zone default" }, String(r.effective_ttl)), tdClass: "mono" },
{ label: "Type", render: (r) => h("strong", null, r.type) },
{ label: "Data", render: (r) => r.data, tdClass: "data" },
@@ -456,7 +455,12 @@ async function recordsTab(el, zone, query) {
{ label: "", render: (r) => r.pending === "delete" ? "" : h("span", null,
h("button", { class: "small", title: "Edit", onclick: () => edit(r) }, "Edit"), " ",
h("button", { class: "small danger", title: "Delete", onclick: () => del(r) }, "Delete")), tdClass: "actions-cell" },
], rows, { empty: current.length ? "No records match." : "No records yet.", rowClass: (r) => r.pending ? "pending-" + r.pending : "" }));
], rows, { empty: current.length ? "No records match." : "No records yet.", rowClass: (r, i) => [
r.pending ? "pending-" + r.pending : "",
// A record followed by more of the same name: a faint line, so the
// full line marks where the next name starts.
rows[i + 1] && rows[i + 1].name === r.name ? "same-name-next" : "",
].filter(Boolean).join(" ") }));
if (editing) mountEdit();
};
const del = async (r) => {
+1 -1
View File
@@ -141,7 +141,7 @@ th { font-size: 12px; color: var(--muted); font-weight: 600; text-transform: upp
tr:hover td { background: var(--info-soft); }
td.data { font-family: var(--mono); font-size: 13px; word-break: break-all; }
td.name { font-family: var(--mono); font-size: 13px; white-space: nowrap; }
td.name.repeat { color: var(--muted); }
tr.same-name-next td { border-bottom-color: color-mix(in srgb, var(--border) 40%, transparent); }
td.actions-cell { white-space: nowrap; text-align: right; width: 1%; }
tr.editing td { background: var(--accent-soft); }
tr.pending-add td { background: var(--add); }