Add per-feed visibility settings panel

Visitors can hide individual feeds via a gear-icon panel in the header.
Preferences live in localStorage; the server ships the full source list
(name + channel) as window.PETE_SOURCES so the panel lists every feed,
grouped by channel, regardless of what's on the current page.

internal/web/static/js/settings.js

@@ -0,0 +1,144 @@
+// Per-feed visibility, stored in localStorage. Server still ships every story;
+// we just hide cards whose data-source is in the disabled set.
+(function () {
+  var KEY = "pete.disabledSources.v1";
+
+  function load() {
+    try {
+      var raw = localStorage.getItem(KEY);
+      if (!raw) return {};
+      var obj = JSON.parse(raw);
+      return obj && typeof obj === "object" ? obj : {};
+    } catch (e) { return {}; }
+  }
+  function save(set) {
+    try { localStorage.setItem(KEY, JSON.stringify(set)); } catch (e) {}
+  }
+
+  var disabled = load();
+
+  function apply() {
+    var cards = document.querySelectorAll("[data-story-card]");
+    cards.forEach(function (c) {
+      var src = c.getAttribute("data-source") || "";
+      c.style.display = disabled[src] ? "none" : "";
+    });
+  }
+
+  function knownSources() {
+    // Prefer the server-provided full list (grouped by channel below).
+    var server = Array.isArray(window.PETE_SOURCES) ? window.PETE_SOURCES : [];
+    if (server.length > 0) {
+      var copy = server.slice();
+      // Surface any persisted-disabled sources that aren't in the config anymore.
+      var present = Object.create(null);
+      copy.forEach(function (s) { present[s.name] = true; });
+      Object.keys(disabled).forEach(function (n) {
+        if (!present[n]) copy.push({ name: n, channel: "" });
+      });
+      copy.sort(function (a, b) {
+        var ca = (a.channel || "~").toLowerCase();
+        var cb = (b.channel || "~").toLowerCase();
+        if (ca !== cb) return ca.localeCompare(cb);
+        return a.name.toLowerCase().localeCompare(b.name.toLowerCase());
+      });
+      return copy;
+    }
+    // Fallback: derive from DOM if the server didn't ship a list.
+    var seen = Object.create(null);
+    document.querySelectorAll("[data-story-card]").forEach(function (c) {
+      var src = c.getAttribute("data-source");
+      var ch = c.getAttribute("data-channel") || "";
+      if (src && !seen[src]) seen[src] = { name: src, channel: ch };
+    });
+    Object.keys(disabled).forEach(function (s) {
+      if (!seen[s]) seen[s] = { name: s, channel: "" };
+    });
+    return Object.keys(seen).map(function (k) { return seen[k]; }).sort(function (a, b) {
+      return a.name.toLowerCase().localeCompare(b.name.toLowerCase());
+    });
+  }
+
+  function render() {
+    var list = document.querySelector("[data-settings-list]");
+    var meta = document.querySelector("[data-settings-meta]");
+    if (!list) return;
+    var sources = knownSources();
+    list.innerHTML = "";
+    if (sources.length === 0) {
+      list.innerHTML = '<p class="px-2 py-4 text-sm text-center text-[color:var(--ink)]/50">No feeds configured.</p>';
+    } else {
+      var lastChannel = null;
+      sources.forEach(function (src) {
+        if (src.channel !== lastChannel) {
+          lastChannel = src.channel;
+          var hdr = document.createElement("div");
+          hdr.className = "px-3 pt-3 pb-1 text-[11px] uppercase tracking-wider text-[color:var(--ink)]/40 font-bold";
+          hdr.textContent = src.channel || "other";
+          list.appendChild(hdr);
+        }
+        var id = "pete-feed-" + btoa(src.name).replace(/=/g, "");
+        var row = document.createElement("label");
+        row.setAttribute("for", id);
+        row.className = "flex items-center justify-between gap-3 rounded-2xl px-3 py-2 hover:bg-[color:var(--ink)]/5 cursor-pointer";
+        var nameEl = document.createElement("span");
+        nameEl.className = "text-sm font-semibold truncate";
+        nameEl.textContent = src.name;
+        var box = document.createElement("input");
+        box.type = "checkbox";
+        box.id = id;
+        box.className = "h-4 w-4 shrink-0 accent-[color:var(--accent)]";
+        box.checked = !disabled[src.name];
+        box.addEventListener("change", function () {
+          if (box.checked) delete disabled[src.name];
+          else disabled[src.name] = true;
+          save(disabled);
+          apply();
+          updateMeta();
+        });
+        row.appendChild(nameEl);
+        row.appendChild(box);
+        list.appendChild(row);
+      });
+    }
+    updateMeta();
+
+    function updateMeta() {
+      if (!meta) return;
+      var off = Object.keys(disabled).length;
+      meta.textContent = off === 0 ? "All feeds enabled" : off + " hidden";
+    }
+  }
+
+  function open() {
+    render();
+    var dlg = document.getElementById("pete-settings");
+    if (dlg) dlg.classList.remove("hidden");
+  }
+  function close() {
+    var dlg = document.getElementById("pete-settings");
+    if (dlg) dlg.classList.add("hidden");
+  }
+
+  document.addEventListener("DOMContentLoaded", function () {
+    apply();
+    var trigger = document.querySelector("[data-settings-trigger]");
+    if (trigger) trigger.addEventListener("click", open);
+    var closeBtn = document.querySelector("[data-settings-close]");
+    if (closeBtn) closeBtn.addEventListener("click", close);
+    var dlg = document.getElementById("pete-settings");
+    if (dlg) dlg.addEventListener("click", function (e) {
+      if (e.target === dlg) close();
+    });
+    var reset = document.querySelector("[data-settings-reset]");
+    if (reset) reset.addEventListener("click", function () {
+      disabled = {};
+      save(disabled);
+      apply();
+      render();
+    });
+    document.addEventListener("keydown", function (e) {
+      if (e.key === "Escape") close();
+    });
+  });
+})();