esh-pfi-infrastructure/stacks/news-digest/templates/app.js

// news-digest — per-item × button + hidden tray.
//
// State lives server-side at /api/hidden (a JSON array of item IDs the
// user has hidden). Same set is shared across every device the user
// opens the digest from. Each item has a stable `data-id` (12-char sha1
// prefix computed by digest.py at render time).
//
// Lifecycle:
//   1. On load, GET /api/hidden — apply `is-hidden` to matching items
//      pre-paint by hiding the <main>, then revealing it on the next
//      animation frame after the class-toggle pass. (Avoids a flash of
//      hide-then-show.)
//   2. × button click → POST /api/hide {id}, animate the item out, add
//      a row to the hidden tray, optimistically commit (rollback on
//      network error).
//   3. Tray "restore" click → POST /api/restore {id}, animate item back,
//      remove tray row.
//
// Tray semantics: shows only items hidden FROM THE CURRENT PAGE, since
// titles/urls come from the DOM. Older hidden IDs not on this page just
// sit silently in /api/hidden and continue to filter future pages that
// happen to include the same article.

(function () {
  "use strict";

  const HIDE_CLASS = "is-hidden";
  const TRAY = document.getElementById("hidden-tray");
  const TRAY_LIST = document.getElementById("hidden-tray-list");
  const TRAY_COUNT = document.getElementById("hidden-tray-count");
  const TRAY_TOGGLE = TRAY && TRAY.querySelector(".hidden-tray-toggle");

  /** Map<id, HTMLElement>  — every .item on this page, keyed by data-id */
  const itemsById = new Map();
  document.querySelectorAll(".item[data-id]").forEach((el) => {
    itemsById.set(el.dataset.id, el);
  });

  /* ── network ────────────────────────────────────────────────────── */

  async function apiGetHidden() {
    try {
      const r = await fetch("/api/hidden", { credentials: "same-origin" });
      if (!r.ok) throw new Error(`GET /api/hidden ${r.status}`);
      return new Set(await r.json());
    } catch (e) {
      console.warn("[digest] failed to fetch hidden state:", e);
      return new Set();
    }
  }

  async function apiHide(id, hide) {
    const path = hide ? "/api/hide" : "/api/restore";
    const r = await fetch(path, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      credentials: "same-origin",
      body: JSON.stringify({ id }),
    });
    if (!r.ok) throw new Error(`POST ${path} ${r.status}`);
    return r.json();
  }

  /* ── tray rendering ─────────────────────────────────────────────── */

  function refreshTrayVisibility() {
    if (!TRAY) return;
    const n = TRAY_LIST.children.length;
    TRAY_COUNT.textContent = String(n);
    if (n > 0) {
      TRAY.hidden = false;
    } else {
      TRAY.hidden = true;
      // Also collapse so that re-hiding starts collapsed-with-content.
      setTrayExpanded(false);
    }
  }

  function setTrayExpanded(expanded) {
    if (!TRAY_LIST || !TRAY_TOGGLE) return;
    TRAY_LIST.hidden = !expanded;
    TRAY_TOGGLE.setAttribute("aria-expanded", String(expanded));
    TRAY.classList.toggle("is-expanded", expanded);
  }

  function addTrayRow(id, title) {
    if (!TRAY_LIST) return;
    if (TRAY_LIST.querySelector(`[data-id="${CSS.escape(id)}"]`)) return;
    const li = document.createElement("li");
    li.className = "hidden-tray-item";
    li.dataset.id = id;
    li.innerHTML =
      `<span class="hidden-tray-title"></span>` +
      `<button class="hidden-tray-restore" type="button" title="Restore" aria-label="Restore">↺</button>`;
    li.querySelector(".hidden-tray-title").textContent = title;
    li.querySelector(".hidden-tray-restore").addEventListener("click", () => {
      restoreItem(id);
    });
    TRAY_LIST.appendChild(li);
    refreshTrayVisibility();
  }

  function removeTrayRow(id) {
    if (!TRAY_LIST) return;
    const row = TRAY_LIST.querySelector(`[data-id="${CSS.escape(id)}"]`);
    if (row) row.remove();
    refreshTrayVisibility();
  }

  function titleOf(el) {
    const t = el.querySelector(".item-title");
    return (t && t.textContent.trim()) || "(untitled)";
  }

  /* ── hide / restore ─────────────────────────────────────────────── */

  async function hideItem(id) {
    const el = itemsById.get(id);
    if (!el) return;
    if (el.classList.contains(HIDE_CLASS)) return;

    // Optimistic — flip class first, talk to server next.
    el.classList.add(HIDE_CLASS);
    addTrayRow(id, titleOf(el));

    try {
      await apiHide(id, true);
    } catch (e) {
      console.warn("[digest] hide failed, rolling back:", e);
      el.classList.remove(HIDE_CLASS);
      removeTrayRow(id);
    }
  }

  async function restoreItem(id) {
    const el = itemsById.get(id);
    if (!el) {
      // Item is in tray but not in DOM — happens if the tray was rendered
      // from the API set for an item not on this page. Just clear it
      // server-side and remove the row.
      try { await apiHide(id, false); } catch (_) {}
      removeTrayRow(id);
      return;
    }
    el.classList.remove(HIDE_CLASS);
    removeTrayRow(id);
    try {
      await apiHide(id, false);
    } catch (e) {
      console.warn("[digest] restore failed, re-hiding:", e);
      el.classList.add(HIDE_CLASS);
      addTrayRow(id, titleOf(el));
    }
  }

  /* ── wiring ─────────────────────────────────────────────────────── */

  // × button — single delegated handler at the document level so we don't
  // need to attach to each .item-hide individually (cheaper, also handles
  // dynamically-rendered items if we ever add them).
  document.addEventListener("click", (ev) => {
    const btn = ev.target.closest(".item-hide");
    if (!btn) return;
    const item = btn.closest(".item[data-id]");
    if (!item) return;
    ev.preventDefault();
    hideItem(item.dataset.id);
  });

  if (TRAY_TOGGLE) {
    TRAY_TOGGLE.addEventListener("click", () => {
      const wasExpanded = TRAY.classList.contains("is-expanded");
      setTrayExpanded(!wasExpanded);
    });
  }

  /* ── initial paint ──────────────────────────────────────────────── */

  apiGetHidden().then((hidden) => {
    let trayHadAdditions = false;
    hidden.forEach((id) => {
      const el = itemsById.get(id);
      if (el) {
        el.classList.add(HIDE_CLASS);
        addTrayRow(id, titleOf(el));
        trayHadAdditions = true;
      }
    });
    if (trayHadAdditions) refreshTrayVisibility();
  });
})();