US09-04: Write the User Manual with Generated Screenshots (#110)

frontend/js/dom.js

@@ -21,6 +21,19 @@ export function errorBanner(message) {
   return el("div", { class: "alert", role: "alert" }, message);
 }
 
+/**
+ * Replace a container's contents, dropping the absent ones.
+ *
+ * `el` already ignores null children, but `replaceChildren` does not: it stringifies
+ * them, so an optional node that is not there renders the word "null" on the page.
+ * Every view builds optional nodes — a banner only while a job runs, a conflict only
+ * after a 409 — so the filter belongs here rather than in each caller. It was missing
+ * from one of them, and a documentation screenshot is where that turned up (US09-04).
+ */
+export function show(root, ...nodes) {
+  root.replaceChildren(...nodes.flat().filter((node) => node != null && node !== false));
+}
+
 export function setActiveNav(view) {
   document.querySelectorAll("nav a[data-nav]").forEach((a) => {
     if (a.dataset.nav === view) a.setAttribute("aria-current", "page");