feed: add public popularity (views-over-time) chart in the ⋯ menu (#26)

A "Popularity" item in the video ⋯ menu opens a public views-over-time chart
(view data is public). Builds on the now-trustworthy view counts (#4).

- buildViewCountTimeSeries buckets raw kind-30079 view events by the counter's
  dedupe window (one view per viewer per day) into a cumulative series.
- buildViewCountChartSvg renders a token-colored (currentColor / text-accent)
  SVG area+line chart — no charting library, no raw colors.
- The modal fetches via listVideoViewEventsWithDefaultClient, shows the total,
  and updates LIVE by subscribing to view events (debounced re-render); cleans
  up on close (Esc / backdrop / ✕). Lazy-loaded from the menu handler so it
  only ships when opened.

New size tokens for the modal; reuses .ds-overlay-backdrop for the scrim.

Tests: tests/view-count-chart.test.mjs (cumulative dedupe, junk filtering,
SVG line/area + empty/single-point).

Co-Authored-By: Claude Opus 4.8 <[email protected]>

js/viewCountChart.js

@@ -0,0 +1,302 @@
+// js/viewCountChart.js
+//
+// Public "Popularity" view: a views-over-time chart for a video, opened from the
+// ⋯ menu. View data is public (kind-30079 events), so any viewer can see it.
+// The chart buckets view events by the same dedupe window the counter uses (one
+// view per viewer per day), and updates live as more view events stream in.
+
+import {
+  listVideoViewEventsWithDefaultClient,
+  subscribeVideoViewEventsWithDefaultClient,
+} from "./nostrViewEventsFacade.js";
+import { resolveVideoPointer } from "./utils/videoPointer.js";
+import { formatViewCount } from "./viewCounter.js";
+import { devLogger } from "./utils/logger.js";
+
+export const VIEW_CHART_WINDOW_SECONDS = 86400; // 1 day, matches the counter dedupe window
+const SVG_NS = "http://www.w3.org/2000/svg";
+
+// ---- Pure data ---------------------------------------------------------------
+
+// Bucket raw view events into a cumulative time series. Dedupes by
+// (viewer pubkey, day bucket) so it reflects the same "one view per viewer per
+// window" semantics the counter displays. Returns ordered buckets + the total.
+export function buildViewCountTimeSeries(
+  events,
+  { windowSeconds = VIEW_CHART_WINDOW_SECONDS } = {},
+) {
+  const w = Math.max(1, Number(windowSeconds) || VIEW_CHART_WINDOW_SECONDS);
+  const seen = new Set();
+  const perBucket = new Map();
+  for (const event of Array.isArray(events) ? events : []) {
+    const createdAt = Number(event?.created_at);
+    const pubkey = typeof event?.pubkey === "string" ? event.pubkey : "";
+    if (!Number.isFinite(createdAt) || createdAt <= 0 || !pubkey) {
+      continue;
+    }
+    const bucket = Math.floor(createdAt / w);
+    const key = `${pubkey}:${bucket}`;
+    if (seen.has(key)) {
+      continue;
+    }
+    seen.add(key);
+    perBucket.set(bucket, (perBucket.get(bucket) || 0) + 1);
+  }
+  const buckets = Array.from(perBucket.keys()).sort((a, b) => a - b);
+  const series = [];
+  let cumulative = 0;
+  for (const bucket of buckets) {
+    const count = perBucket.get(bucket) || 0;
+    cumulative += count;
+    series.push({ bucketStart: bucket * w, count, cumulative });
+  }
+  return { series, total: cumulative };
+}
+
+function formatDay(seconds) {
+  try {
+    return new Date(seconds * 1000).toLocaleDateString(undefined, {
+      month: "short",
+      day: "numeric",
+    });
+  } catch (error) {
+    return "";
+  }
+}
+
+// ---- SVG chart ---------------------------------------------------------------
+
+// Cumulative views-over-time as a token-colored SVG area+line chart. Uses
+// currentColor (set via a text-* utility on the container) so it honors theme
+// tokens — no raw colors.
+export function buildViewCountChartSvg(doc, series, { width = 320, height = 120 } = {}) {
+  const pad = { top: 8, right: 8, bottom: 18, left: 8 };
+  const svg = doc.createElementNS(SVG_NS, "svg");
+  svg.setAttribute("viewBox", `0 0 ${width} ${height}`);
+  svg.setAttribute("width", "100%");
+  svg.setAttribute("role", "img");
+  svg.setAttribute("preserveAspectRatio", "none");
+  svg.classList.add("text-accent");
+
+  const points = Array.isArray(series) ? series : [];
+  if (points.length === 0) {
+    svg.setAttribute("aria-label", "No views yet");
+    return svg;
+  }
+
+  const innerW = Math.max(1, width - pad.left - pad.right);
+  const innerH = Math.max(1, height - pad.top - pad.bottom);
+  const maxY = points[points.length - 1].cumulative || 1;
+  const minX = points[0].bucketStart;
+  const maxX = points[points.length - 1].bucketStart;
+  const spanX = maxX - minX || 1;
+
+  const x = (bucketStart) => pad.left + ((bucketStart - minX) / spanX) * innerW;
+  const y = (cumulative) => pad.top + (1 - cumulative / maxY) * innerH;
+
+  // A single bucket can't draw a line — draw a flat baseline to its value.
+  const coords =
+    points.length === 1
+      ? [
+          [pad.left, y(points[0].cumulative)],
+          [pad.left + innerW, y(points[0].cumulative)],
+        ]
+      : points.map((p) => [x(p.bucketStart), y(p.cumulative)]);
+
+  const linePoints = coords.map(([px, py]) => `${px.toFixed(1)},${py.toFixed(1)}`).join(" ");
+  const baseY = pad.top + innerH;
+  const areaPoints =
+    `${coords[0][0].toFixed(1)},${baseY.toFixed(1)} ` +
+    linePoints +
+    ` ${coords[coords.length - 1][0].toFixed(1)},${baseY.toFixed(1)}`;
+
+  const area = doc.createElementNS(SVG_NS, "polygon");
+  area.setAttribute("points", areaPoints);
+  area.setAttribute("fill", "currentColor");
+  area.setAttribute("fill-opacity", "0.15");
+  area.setAttribute("stroke", "none");
+  svg.appendChild(area);
+
+  const line = doc.createElementNS(SVG_NS, "polyline");
+  line.setAttribute("points", linePoints);
+  line.setAttribute("fill", "none");
+  line.setAttribute("stroke", "currentColor");
+  line.setAttribute("stroke-width", "2");
+  line.setAttribute("stroke-linejoin", "round");
+  line.setAttribute("stroke-linecap", "round");
+  svg.appendChild(line);
+
+  svg.setAttribute(
+    "aria-label",
+    `${maxY} total views from ${formatDay(minX)} to ${formatDay(maxX)}`,
+  );
+  return svg;
+}
+
+// ---- Modal -------------------------------------------------------------------
+
+function pointerForVideo(video) {
+  if (!video || typeof video !== "object") {
+    return null;
+  }
+  const tags = Array.isArray(video.tags) ? video.tags : [];
+  const dTag = tags.find((t) => Array.isArray(t) && t[0] === "d");
+  const dValue = dTag && typeof dTag[1] === "string" ? dTag[1] : "";
+  return resolveVideoPointer({
+    kind: video.kind,
+    pubkey: video.pubkey,
+    videoRootId: video.videoRootId,
+    dTag: dValue,
+    fallbackEventId: video.id,
+    relay: video.relay,
+  });
+}
+
+function el(doc, tag, className, text) {
+  const node = doc.createElement(tag);
+  if (className) node.className = className;
+  if (typeof text === "string") node.textContent = text;
+  return node;
+}
+
+// Opens the popularity modal for a video. Dependencies are injectable for tests.
+export function openPopularityModal({
+  document: doc = typeof document !== "undefined" ? document : null,
+  video,
+  listViewEvents = listVideoViewEventsWithDefaultClient,
+  subscribeViewEvents = subscribeVideoViewEventsWithDefaultClient,
+  mount = null,
+} = {}) {
+  if (!doc) return null;
+  const pointerInfo = pointerForVideo(video);
+  if (!pointerInfo?.pointer) {
+    return null;
+  }
+  const pointer = pointerInfo.pointer;
+
+  const root = mount || doc.getElementById("uiOverlay") || doc.body;
+  const backdrop = el(doc, "div", "ds-overlay-backdrop popularity-modal__backdrop");
+  const dialog = el(doc, "div", "popularity-modal card p-md");
+  dialog.setAttribute("role", "dialog");
+  dialog.setAttribute("aria-modal", "true");
+  dialog.setAttribute("aria-label", "Video popularity");
+
+  const header = el(doc, "div", "flex items-center justify-between gap-3 mb-2");
+  header.appendChild(el(doc, "h2", "text-lg font-semibold text-text", "Popularity"));
+  const closeBtn = el(doc, "button", "icon-button", "");
+  closeBtn.type = "button";
+  closeBtn.setAttribute("aria-label", "Close");
+  closeBtn.textContent = "✕";
+  header.appendChild(closeBtn);
+  dialog.appendChild(header);
+
+  const totalLine = el(doc, "p", "text-sm text-muted mb-3", "Loading views…");
+  dialog.appendChild(totalLine);
+
+  const chartHost = el(doc, "div", "popularity-modal__chart");
+  dialog.appendChild(chartHost);
+
+  const note = el(
+    doc,
+    "p",
+    "text-2xs text-muted mt-2",
+    "Public view data · updates as more views load.",
+  );
+  dialog.appendChild(note);
+
+  backdrop.appendChild(dialog);
+  root.appendChild(backdrop);
+
+  // ---- data + render ----
+  const eventsById = new Map();
+  let closed = false;
+  let unsubscribe = null;
+  let rerenderTimer = null;
+
+  const addEvent = (event) => {
+    const id = typeof event?.id === "string" ? event.id : "";
+    if (!id || eventsById.has(id)) return false;
+    eventsById.set(id, event);
+    return true;
+  };
+
+  const render = () => {
+    if (closed) return;
+    const { series, total } = buildViewCountTimeSeries([...eventsById.values()]);
+    totalLine.textContent =
+      total > 0
+        ? `${formatViewCount(total)} ${total === 1 ? "view" : "views"}`
+        : "No views recorded yet.";
+    chartHost.textContent = "";
+    chartHost.appendChild(buildViewCountChartSvg(doc, series));
+  };
+
+  const scheduleRender = () => {
+    if (rerenderTimer) return;
+    rerenderTimer = setTimeout(() => {
+      rerenderTimer = null;
+      render();
+    }, 250);
+  };
+
+  const close = () => {
+    if (closed) return;
+    closed = true;
+    if (rerenderTimer) {
+      clearTimeout(rerenderTimer);
+      rerenderTimer = null;
+    }
+    if (typeof unsubscribe === "function") {
+      try {
+        unsubscribe();
+      } catch (error) {
+        // best effort
+      }
+    }
+    doc.removeEventListener("keydown", onKeydown, true);
+    backdrop.remove();
+  };
+
+  function onKeydown(event) {
+    if (event.key === "Escape") {
+      event.stopPropagation();
+      close();
+    }
+  }
+
+  closeBtn.addEventListener("click", close);
+  backdrop.addEventListener("click", (event) => {
+    if (event.target === backdrop) close();
+  });
+  doc.addEventListener("keydown", onKeydown, true);
+
+  // Initial fetch + live subscription.
+  Promise.resolve()
+    .then(() => listViewEvents(pointer, {}))
+    .then((events) => {
+      if (closed) return;
+      (Array.isArray(events) ? events : []).forEach(addEvent);
+      render();
+    })
+    .catch((error) => {
+      devLogger.warn("[popularity] Failed to load view events:", error);
+      if (!closed) {
+        totalLine.textContent = "Couldn’t load view data.";
+      }
+    });
+
+  try {
+    unsubscribe = subscribeViewEvents(pointer, {
+      onEvent: (event) => {
+        if (closed) return;
+        if (addEvent(event)) {
+          scheduleRender();
+        }
+      },
+    });
+  } catch (error) {
+    devLogger.warn("[popularity] Failed to subscribe to view events:", error);
+  }
+
+  return { close };
+}