Stack pages: add every pick to the shortlist in one click (#272)

A button under the stack's lead merges the pick ids into the shortlist's
storage key without duplicates and says how many it added. The catalog
and other tabs read the change from storage. Checked in a browser: 11
picks added, a second click adds none, the catalog shows 11.

Closes #272

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01LpkeXQPaUhxjgqdqnk6BrJ

Author: TMHSDigital

site/lib/lib.test.mjs

@@ -452,6 +452,9 @@ has("stack title escaped", spage, "<title>Make a &quot;thing&quot; &lt;/script&g
 has("stack canonical", spage, '<link rel="canonical" href="https://x.test/s/stack/s1/" />');
 eq("stack one h1", (spage.match(/<h1[\s>]/g) || []).length, 1);
 has("stack pick links its entry page", spage, 'href="../../entry/a/"');
+has("stack: add-all carries every pick once (#272)", sp({ sections: [{ name: "Art", rows: [{ need: "Tiles", entry: eA, whyHtml: "" }, { need: "More", entry: eA, whyHtml: "" }, { need: "Sounds", entry: eC, whyHtml: "" }] }] }), `data-shortlist-all="${eA.id},${eC.id}"`);
+has("stack: add-all names the count", spage, "Add all 2 picks to my shortlist");
+has("stack: loads stack.js for the button", sp({ owed: owes([]) }), 'src="../../stack.js"');
 has("stack credit line escaped", spage, "Art by &quot;A&quot; &lt;x&gt;");
 has("copy all carries every canned line", spage, 'data-copy="Art by &quot;A&quot; &lt;x&gt;\nMusic by B"');
 has("no canned line note", spage, "No canned credit line: see the entry.");
@@ -460,7 +463,7 @@ has("needs-review flag on the pick", spage, 'class="pick-flag"');
 has("gaps rendered", spage, "<li>No parallax.</li>");
 has("walked line", spage, "Stack walked 2026-09-20. Each licence is only as current as its entry's verified date.");
 has("copy script with canned lines", spage, '<script src="../../stack.js" defer></script>');
-lacks("no copy script without canned lines", sp({ owed: owes([{ need: "Sounds", entry: eC }]) }), "stack.js");
+lacks("no script without canned lines or picks", sp({ owed: owes([{ need: "Sounds", entry: eC }]), sections: [] }), "stack.js");
 const sld = spage.match(/<script type="application\/ld\+json">([\s\S]*?)<\/script>/)[1];
 lacks("stack json-ld cannot close its script", sld, "</script");
 eq("stack json-ld lists the picks", JSON.parse(sld).itemListElement[0].url, "https://x.test/s/entry/a/");

site/lib/stack-page.mjs

@@ -113,7 +113,12 @@ export function stackPageHtml({ stack, sections, gapsHtml, leadHtml, owed, site,
         <ul class="gap-list">${gapsHtml.map((g) => `<li>${g}</li>`).join("")}</ul>
       </section>`
     : "";
-  const script = copyAllText(owed) ? '<script src="../../stack.js" defer></script>' : "";
+  // Every pick's id, once, for "Add all to shortlist" (stack.js; #272).
+  const pickIds = [...new Set(sections.flatMap((s) => s.rows.map((r) => r.entry.id)))];
+  const shortlistAll = pickIds.length
+    ? `<p class="copy-all shortlist-all"><button type="button" class="btn-ghost" data-shortlist-all="${esc(pickIds.join(","))}" hidden>Add all ${pickIds.length} picks to my shortlist</button> <span class="copy-status" role="status"></span></p>`
+    : "";
+  const script = copyAllText(owed) || pickIds.length ? '<script src="../../stack.js" defer></script>' : "";
   return `<!DOCTYPE html>
 <html lang="en">
   <head>
@@ -136,6 +141,7 @@ export function stackPageHtml({ stack, sections, gapsHtml, leadHtml, owed, site,
       </nav>
       <h1>${esc(meta.title)}</h1>
       <div class="entry-lead"><p>${esc(meta.task)}</p>${leadHtml}</div>
+      ${shortlistAll}
       <section class="owes" aria-labelledby="owes-title">
         <h2 id="owes-title">What this stack owes</h2>
         ${owesHtml(owed)}

site/public/stack.js

@@ -1,4 +1,4 @@
-/** Copy buttons on a stack page. The page works without them. */
+/** Copy buttons and "Add all to shortlist" on a stack page. The page works without them. */
 (() => {
   for (const btn of document.querySelectorAll("button[data-copy]")) {
     btn.hidden = false;
@@ -23,4 +23,27 @@
       }
     });
   }
+
+  // Every pick into the shortlist (#272), under shortlist.js's storage key;
+  // the catalog and other open tabs pick the change up from storage.
+  const KEY = "fgda:shortlist";
+  for (const btn of document.querySelectorAll("button[data-shortlist-all]")) {
+    btn.hidden = false;
+    btn.addEventListener("click", () => {
+      const status = btn.parentElement.querySelector(".copy-status");
+      const picks = btn.getAttribute("data-shortlist-all").split(",").filter(Boolean);
+      try {
+        let ids = JSON.parse(localStorage.getItem(KEY) || "[]");
+        if (!Array.isArray(ids)) ids = [];
+        ids = ids.filter((id) => typeof id === "string");
+        const added = picks.filter((id) => !ids.includes(id));
+        localStorage.setItem(KEY, JSON.stringify([...ids, ...added]));
+        status.textContent = added.length
+          ? `Added ${added.length} of ${picks.length} to your shortlist (${ids.length + added.length} in all).`
+          : `All ${picks.length} are already on your shortlist.`;
+      } catch {
+        status.textContent = "This browser is not keeping site data, so the shortlist cannot be saved.";
+      }
+    });
+  }
 })();