Shortlist shows what the set owes; copy a link to the view; download the results (#110)

- owes.mjs owesGroups(): the stack page's obligations as short groups;
  the shortlist panel lists them under the entries (credits, notices,
  per-file checks, open questions, unclear, no credit needed)
- beside the result count: Copy link to this view, and Download these as
  CSV (the same catalogCsv as catalog.csv, served as exports.js) or JSON

Checked in a browser: with ?licence=cc-by, 23 shown and 23 rows in each
download, the link copies, and the owes groups render.

Closes #110

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

@@ -2381,6 +2381,23 @@ await section("entry check registry and validateRepo (#255)", async () => {
   eq("validateRepo: it counts the entries", run.entryCount > 400, true);
 });
 
+/* shortlist owes and view actions (#110) ----------------------------------- */
+await section("shortlist owes and view actions (#110)", async () => {
+  const { owes, owesGroups } = await import("./owes.mjs");
+  const e = (id, over) => ({ id, name: id.toUpperCase(), status: "active", attribution_required: false, commercial: true, ...over });
+  const groups = owesGroups(owes([
+    { need: "shortlist", entry: e("a", { attribution_required: true, attribution_string: "Art by A" }) },
+    { need: "shortlist", entry: e("b", { commercial: "varies" }) },
+    { need: "shortlist", entry: e("c", { status: "needs-review" }) },
+  ]));
+  eq("owes groups: only kinds with entries, in order", groups.map((g) => g.key).join(), "credits,perFile,openQuestions,noCredit");
+  eq("owes groups: entries listed under each", groups.find((g) => g.key === "noCredit").entries.map((x) => x.id).join(), "b,c");
+  eq("owes groups: nothing picked, nothing owed", owesGroups(owes([])).length, 0);
+  const fsm = (await import("node:fs")).default;
+  const tpl = fsm.readFileSync(new URL("../public/index.html", import.meta.url), "utf8");
+  for (const id of ["shortlist-owes", "view-actions", "copy-view-link"]) has(`homepage has #${id}`, tpl, `id="${id}"`);
+});
+
 /* report (keep last) ------------------------------------------------------ */
 if (failures.length) {
   console.error(`lib.test failed (${failures.length}):`);

site/lib/owes.mjs

@@ -29,6 +29,24 @@ export function owes(picked) {
   };
 }
 
+/**
+ * The owes() result as short groups for the shortlist panel (#110): one per
+ * kind of obligation that has entries, in the stack page's order, each with
+ * the entries it covers. Empty groups are left out.
+ */
+export function owesGroups(owed) {
+  return [
+    ["credits", "Credits to ship", owed.credits],
+    ["notices", "Notices to keep with the files", owed.notices],
+    ["perFile", "Check each file", owed.perFile],
+    ["openQuestions", "Open questions", owed.openQuestions],
+    ["unclear", "Unclear credit: read the Notes", owed.unclear],
+    ["noCredit", "No credit needed", owed.noCredit],
+  ]
+    .filter(([, , items]) => items.length)
+    .map(([key, heading, items]) => ({ key, heading, entries: items.map((i) => i.entry) }));
+}
+
 /**
  * A templated credit line marks each part the reader fills in with braces:
  * `"{title}" by Kevin MacLeod`. The validator (V35) refuses other

site/lib/shared.mjs

@@ -291,6 +291,7 @@ export const BROWSER_MODULES = {
   "cards.mjs": "cards.mjs", // the entry card template, for app.js and the category pages
   "shared.mjs": "shared.mjs",
   "client-state.js": "client-state.mjs", // shortlist parsing, escaping and the entry back link
+  "exports.js": "exports.mjs", // "Download these" on the catalog: the same CSV as catalog.csv
 };
 
 /**
@@ -300,7 +301,7 @@ export const BROWSER_MODULES = {
  * lib.test.mjs walks the real import graph and fails if a list drifts.
  */
 export const PAGE_MODULES = {
-  home: ["app.js", "search.js", "cards.mjs", "shared.mjs", "views.js", "shortlist.js", "owes.js", "client-state.js"],
+  home: ["app.js", "search.js", "cards.mjs", "shared.mjs", "views.js", "shortlist.js", "owes.js", "client-state.js", "exports.js"],
   entry: ["shortlist.js", "owes.js", "client-state.js"],
   category: ["category.js", "views.js", "shortlist.js", "owes.js", "client-state.js"],
   notFound: ["not-found.js", "search.js", "shared.mjs"],

site/public/app.js

@@ -1,6 +1,7 @@
 import { activeFilterChips, FILTER_DEFAULTS, FILTERS, gapIssueUrl, closestEntries, computeResults as computeResultsFor, passesFilters as passes, placementKey, queryTests as compileQuery, readState, scoreFields, searchFields, shouldGroup as shouldGroupFor, slugOf, sorterFor, SORTS, stateQuery, ENGINES } from "./search.js";
 import { CARD_LIMIT, LIST_LIMIT, entryCardHtml, escapeHtml, groupHeadingHtml, groupMoreHtml, PERSPECTIVE_LABELS } from "./cards.mjs";
 import { installViewToggles } from "./views.js";
+import { catalogCsv } from "./exports.js";
 import { isListed, PERSPECTIVES } from "./shared.mjs";
 
 (() => {
@@ -524,9 +525,13 @@ import { isListed, PERSPECTIVES } from "./shared.mjs";
   const SEARCH_DELAY = 120;
   let searchTimer = 0;
 
+  // The entries the current view shows, for "Download these" (#110).
+  let lastList = [];
+
   function apply({ push = false } = {}) {
     clearTimeout(searchTimer);
     const results = computeResults();
+    lastList = results.list;
     syncCategoryChips(results);
     renderActiveFilters();
     renderGrid(results);
@@ -580,6 +585,39 @@ import { isListed, PERSPECTIVES } from "./shared.mjs";
 
   /* ----------------------------------------------------------- controls */
 
+  /** "Copy link to this view" and "Download these" beside the result count (#110). */
+  function bindViewActions() {
+    const host = $("#view-actions");
+    if (!host) return;
+    host.hidden = false;
+    const status = $("#view-actions-status");
+    $("#copy-view-link").addEventListener("click", async () => {
+      const url = location.href.split("#")[0] + "#catalog";
+      try {
+        await navigator.clipboard.writeText(url);
+        status.textContent = "Link copied";
+      } catch {
+        // Clipboard refused: show the link so it can be copied by hand.
+        status.textContent = url;
+      }
+    });
+    for (const btn of $$("[data-results-export]", host)) {
+      btn.addEventListener("click", () => {
+        const csv = btn.getAttribute("data-results-export") === "csv";
+        const text = csv ? catalogCsv(lastList, data.site?.siteUrl || "") : `${JSON.stringify(lastList, null, 2)}\n`;
+        const url = URL.createObjectURL(new Blob([text], { type: csv ? "text/csv" : "application/json" }));
+        const link = document.createElement("a");
+        link.href = url;
+        link.download = csv ? "free-game-dev-assets.csv" : "free-game-dev-assets.json";
+        document.body.append(link);
+        link.click();
+        link.remove();
+        setTimeout(() => URL.revokeObjectURL(url), 1000);
+        status.textContent = `Downloaded ${lastList.length} ${lastList.length === 1 ? "entry" : "entries"}`;
+      });
+    }
+  }
+
   function bindControls() {
     const search = $("#search");
     search.value = state.q;
@@ -808,6 +846,7 @@ import { isListed, PERSPECTIVES } from "./shared.mjs";
   adoptNodes();
   renderCategoryFilters();
   bindControls();
+  bindViewActions();
   syncControls();
   apply();
   restoreScroll();

site/public/index.html

@@ -162,6 +162,12 @@ <h2 id="catalog-title">Catalog</h2>
               </select>
             </label>
             <p class="result-count" id="result-count" aria-live="polite" tabindex="-1"><!--RESULT_COUNT--></p>
+            <p class="view-actions" id="view-actions" hidden>
+              <button type="button" class="link-button" id="copy-view-link">Copy link to this view</button>
+              <button type="button" class="link-button" data-results-export="csv">Download these (CSV)</button>
+              <button type="button" class="link-button" data-results-export="json">Download these (JSON)</button>
+              <span class="copy-status" id="view-actions-status" role="status"></span>
+            </p>
             <p class="current-group" id="current-group"></p>
           </div>
 
@@ -183,6 +189,7 @@ <h2 id="catalog-title">Catalog</h2>
           <h3 id="shortlist-title">Your shortlist (<span id="shortlist-count">0</span>)</h3>
           <p class="filter-note">Kept in this browser only. The CREDITS file lists what these entries owe: credit lines, notices to keep, files to check one by one, and open questions.</p>
           <ul class="shortlist-items" id="shortlist-items"></ul>
+          <div class="shortlist-owes" id="shortlist-owes" aria-label="What these entries owe"></div>
           <p class="shortlist-actions">
             <button type="button" class="btn-ghost" data-shortlist-action="md">Download CREDITS.md</button>
             <button type="button" class="btn-ghost" data-shortlist-action="txt">Download CREDITS.txt</button>

site/public/shortlist.js

@@ -3,7 +3,7 @@
  * kept in this browser only, and exported as one CREDITS file built by the
  * same code as the stack pages' "What this stack owes" (owes.js).
  */
-import { creditsFile, owes } from "./owes.js";
+import { creditsFile, owes, owesGroups } from "./owes.js";
 import { escapeHtml, parseShortlist } from "./client-state.js";
 
 const KEY = "fgda:shortlist";
@@ -114,6 +114,13 @@ function renderPanel() {
         <button type="button" class="link-button" data-shortlist-remove="${escapeHtml(id)}">Remove<span class="sr-only"> ${escapeHtml(e.name)}</span></button></li>`;
     })
     .join("");
+  // What the set owes, as on a stack page (#110).
+  const owed = document.getElementById("shortlist-owes");
+  if (owed) {
+    owed.innerHTML = owesGroups(owes(ids.map((id) => ({ need: "shortlist", entry: byId[id] }))))
+      .map((g) => `<p><strong>${escapeHtml(g.heading)} (${g.entries.length}):</strong> ${g.entries.map((e) => escapeHtml(e.name)).join(", ")}</p>`)
+      .join("");
+  }
 }
 
 function update(next) {

site/public/styles.css

@@ -2284,3 +2284,17 @@ body.card-focus .to-top {
     min-height: 44px;
   }
 }
+
+/* What the shortlist owes, and the actions beside the result count (#110). */
+.shortlist-owes p {
+  margin: 0.25rem 0;
+  font-size: 0.9rem;
+}
+.view-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.25rem 1rem;
+  align-items: baseline;
+  margin: 0.25rem 0 0;
+  font-size: 0.9rem;
+}