From cf4ce5c3b8efff98b31a8b5f842498155fc1bc28 Mon Sep 17 00:00:00 2001
From: thePR0M3TH3AN <53631862+PR0M3TH3AN@users.noreply.github.com>
Date: Wed, 1 Jul 2026 10:56:38 -0400
Subject: [PATCH] [admin] Add sub-tab toolbar + Blocked-videos tool to the
 admin pane (#25 follow-up)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The admin pane stacked every list (Moderators / Whitelist / Blacklist) in one
scroll, and the per-event block list had no admin UI (block-only via the ⋯ menu,
no view/unblock). This reorganizes the pane into a sub-tab toolbar and adds the
missing Blocked-videos tool.

- Sub-tabs: a role="tablist" toolbar in #profilePaneAdmin switches between
  Whitelist (default), Blacklist, Blocked videos, and Moderators. Moderators is
  super-admin-only — its tab button is hidden otherwise. selectAdminSubtab()
  shows one section at a time (ARIA + data-state), falling back to the default
  when a hidden tab is requested.
- Blocked videos: view the per-event admin block list, unblock per row (confirm
  → removeFromEventBlacklist), and add by nevent/hex id. Rows show the video
  title+author when it's in the local cache, else the shortened id. Reuses the
  existing accessControl event-blacklist API + onEventBlacklistChange (live
  re-render) and refreshes the grids on change. No backend changes.
- Row-building/render logic in js/ui/profileModal/blockedVideosSection.js
  (keeps ProfileAdminController under its size cap; unit-testable without a DOM).

Spec correction: profile-modal-controller.test's admin assertion updated for the
sub-tab layout (Moderators section now hidden until its tab is active; its tab
button is shown to a super admin; selecting it reveals the section).

Tests: tests/profile-blocked-videos.test.mjs (7 — rows dedupe/enrich/fallback,
render, unblock wiring); profile-modal-controller admin test updated.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 components/profile-modal.html                | 102 ++++++-
 js/ui/profileModal/ProfileAdminController.js | 278 ++++++++++++++++++-
 js/ui/profileModal/blockedVideosSection.js   | 136 +++++++++
 tests/profile-blocked-videos.test.mjs        | 124 +++++++++
 tests/profile-modal-controller.test.mjs      |  21 +-
 5 files changed, 652 insertions(+), 9 deletions(-)
 create mode 100644 js/ui/profileModal/blockedVideosSection.js
 create mode 100644 tests/profile-blocked-videos.test.mjs

diff --git a/components/profile-modal.html b/components/profile-modal.html
index f6a268a9..198f88d8 100644
--- a/components/profile-modal.html
+++ b/components/profile-modal.html
@@ -1693,6 +1693,59 @@
                 </p>
               </div>
 
+              <div
+                id="adminSubtabBar"
+                class="flex flex-wrap gap-2 border-b border-border/60 pb-3"
+                role="tablist"
+                aria-label="Admin tools"
+              >
+                <button
+                  id="adminSubtabWhitelist"
+                  type="button"
+                  role="tab"
+                  data-admin-subtab="whitelist"
+                  aria-controls="adminWhitelistSection"
+                  aria-selected="true"
+                  data-state="active"
+                  class="btn-ghost focus-ring px-3 py-1.5 text-sm font-medium"
+                >
+                  Whitelist
+                </button>
+                <button
+                  id="adminSubtabBlacklist"
+                  type="button"
+                  role="tab"
+                  data-admin-subtab="blacklist"
+                  aria-controls="adminBlacklistSection"
+                  aria-selected="false"
+                  class="btn-ghost focus-ring px-3 py-1.5 text-sm font-medium"
+                >
+                  Blacklist
+                </button>
+                <button
+                  id="adminSubtabBlockedVideos"
+                  type="button"
+                  role="tab"
+                  data-admin-subtab="blockedVideos"
+                  aria-controls="adminBlockedVideosSection"
+                  aria-selected="false"
+                  class="btn-ghost focus-ring px-3 py-1.5 text-sm font-medium"
+                >
+                  Blocked videos
+                </button>
+                <button
+                  id="adminSubtabModerators"
+                  type="button"
+                  role="tab"
+                  data-admin-subtab="moderators"
+                  aria-controls="adminModeratorsSection"
+                  aria-selected="false"
+                  class="btn-ghost focus-ring px-3 py-1.5 text-sm font-medium hidden"
+                >
+                  Moderators
+                </button>
+              </div>
+
               <div id="adminModeratorsSection" class="space-y-4 hidden" aria-hidden="true">
                 <div class="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
                   <div class="flex items-center gap-2">
@@ -1790,7 +1843,7 @@
                 <ul id="adminWhitelistList" class="grid-stack" data-orientation="vertical"></ul>
               </div>
 
-              <div id="adminBlacklistSection" class="space-y-4">
+              <div id="adminBlacklistSection" class="space-y-4 hidden" aria-hidden="true">
                 <div class="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
                   <div class="flex items-center gap-2">
                     <h4 class="text-base font-semibold text-text">Blacklist</h4>
@@ -1836,6 +1889,53 @@
                 </div>
                 <ul id="adminBlacklistList" class="grid-stack" data-orientation="vertical"></ul>
               </div>
+
+              <div id="adminBlockedVideosSection" class="space-y-4 hidden" aria-hidden="true">
+                <div class="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
+                  <div class="flex items-center gap-2">
+                    <h4 class="text-base font-semibold text-text">Blocked videos</h4>
+                    <button
+                      id="adminBlockedVideosRefreshBtn"
+                      type="button"
+                      class="btn-ghost btn-icon"
+                      data-size="sm"
+                      aria-label="Refresh blocked videos"
+                    >
+                      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 0 0-9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"></path><path d="M3 3v5h5"></path><path d="M3 12a9 9 0 0 0 9 9 9.75 9.75 0 0 0 6.74-2.74L21 16"></path><path d="M16 21h5v-5"></path></svg>
+                    </button>
+                  </div>
+                </div>
+                <p class="text-sm text-muted">
+                  Individual videos hidden everywhere on bitvid without blocking their creator. Block a video from its ⋯ menu, or paste an event id / nevent below.
+                </p>
+                <div class="flex flex-col gap-3 sm:flex-row sm:items-end">
+                  <label class="flex-1 text-sm text-muted-strong" for="adminBlockedVideoInput">
+                    <span class="mb-2 block font-medium">Event id or nevent</span>
+                    <input
+                      id="adminBlockedVideoInput"
+                      type="text"
+                      inputmode="text"
+                      autocomplete="off"
+                      class="input"
+                      placeholder="nevent1… or hex event id"
+                    />
+                  </label>
+                  <button
+                    id="adminAddBlockedVideoBtn"
+                    type="button"
+                    class="btn focus-ring"
+                  >
+                    Block video
+                  </button>
+                </div>
+                <div
+                  id="adminBlockedVideosEmpty"
+                  class="card border border-dashed border-border/60 p-4 text-center text-sm text-muted"
+                >
+                  No videos are individually blocked yet.
+                </div>
+                <ul id="adminBlockedVideosList" class="grid-stack" data-orientation="vertical"></ul>
+              </div>
             </section>
           </div>
         </div>
diff --git a/js/ui/profileModal/ProfileAdminController.js b/js/ui/profileModal/ProfileAdminController.js
index 11811c49..b654184c 100644
--- a/js/ui/profileModal/ProfileAdminController.js
+++ b/js/ui/profileModal/ProfileAdminController.js
@@ -1,9 +1,20 @@
 import { devLogger, userLogger } from "../../utils/logger.js";
 import { isDevMode } from "../../config.js";
 import { ProfileAdminRenderer } from "./ProfileAdminRenderer.js";
+import { getApplication } from "../../applicationContext.js";
+import {
+  buildBlockedVideoRows,
+  renderBlockedVideosList,
+} from "./blockedVideosSection.js";
+import { showConfirm } from "../confirmDialog.js";
 
 const noop = () => {};
 
+// Admin pane sub-tabs, in toolbar order. "moderators" is only shown to the
+// super admin (its tab button is hidden otherwise).
+const ADMIN_SUBTABS = ["whitelist", "blacklist", "blockedVideos", "moderators"];
+const DEFAULT_ADMIN_SUBTAB = "whitelist";
+
 export class ProfileAdminController {
   constructor(mainController) {
     this.mainController = mainController;
@@ -27,6 +38,21 @@ export class ProfileAdminController {
     this.addBlacklistButton = null;
     this.blacklistInput = null;
     this.adminBlacklistRefreshBtn = null;
+
+    // Blocked videos (per-event admin block list) sub-tab.
+    this.blockedVideosSection = null;
+    this.blockedVideosEmpty = null;
+    this.blockedVideosList = null;
+    this.addBlockedVideoButton = null;
+    this.blockedVideoInput = null;
+    this.blockedVideosRefreshBtn = null;
+
+    // Sub-tab toolbar.
+    this.subtabBar = null;
+    this.subtabButtons = {};
+    this.subtabSections = {};
+    this.activeSubtab = DEFAULT_ADMIN_SUBTAB;
+    this.eventBlacklistUnsub = null;
   }
 
   cacheDomReferences() {
@@ -50,6 +76,27 @@ export class ProfileAdminController {
     this.addBlacklistButton = document.getElementById("adminAddBlacklistBtn") || null;
     this.blacklistInput = document.getElementById("adminBlacklistInput") || null;
     this.adminBlacklistRefreshBtn = document.getElementById("adminBlacklistRefreshBtn") || null;
+
+    this.blockedVideosSection = document.getElementById("adminBlockedVideosSection") || null;
+    this.blockedVideosEmpty = document.getElementById("adminBlockedVideosEmpty") || null;
+    this.blockedVideosList = document.getElementById("adminBlockedVideosList") || null;
+    this.addBlockedVideoButton = document.getElementById("adminAddBlockedVideoBtn") || null;
+    this.blockedVideoInput = document.getElementById("adminBlockedVideoInput") || null;
+    this.blockedVideosRefreshBtn = document.getElementById("adminBlockedVideosRefreshBtn") || null;
+
+    this.subtabBar = document.getElementById("adminSubtabBar") || null;
+    this.subtabButtons = {
+      whitelist: document.getElementById("adminSubtabWhitelist") || null,
+      blacklist: document.getElementById("adminSubtabBlacklist") || null,
+      blockedVideos: document.getElementById("adminSubtabBlockedVideos") || null,
+      moderators: document.getElementById("adminSubtabModerators") || null,
+    };
+    this.subtabSections = {
+      whitelist: this.whitelistSection,
+      blacklist: this.blacklistSection,
+      blockedVideos: this.blockedVideosSection,
+      moderators: this.moderatorSection,
+    };
   }
 
   registerEventListeners() {
@@ -155,6 +202,87 @@ export class ProfileAdminController {
         }
       });
     }
+
+    ensureAriaLabel(this.blockedVideosRefreshBtn, "Refresh blocked videos");
+
+    for (const name of ADMIN_SUBTABS) {
+      const button = this.subtabButtons?.[name];
+      if (button instanceof HTMLElement) {
+        button.addEventListener("click", () => this.selectAdminSubtab(name));
+      }
+    }
+
+    if (this.addBlockedVideoButton instanceof HTMLElement) {
+      this.addBlockedVideoButton.addEventListener("click", () => {
+        void this.handleAddBlockedVideo();
+      });
+    }
+
+    if (this.blockedVideoInput instanceof HTMLElement) {
+      this.blockedVideoInput.addEventListener("keydown", (event) => {
+        if (event.key === "Enter") {
+          event.preventDefault();
+          void this.handleAddBlockedVideo();
+        }
+      });
+    }
+
+    if (this.blockedVideosRefreshBtn instanceof HTMLElement) {
+      this.blockedVideosRefreshBtn.addEventListener("click", () => {
+        const service = this.mainController.services.accessControl;
+        if (!service || typeof service.refresh !== "function") {
+          return;
+        }
+        void service
+          .refresh()
+          .then(() => this.populateBlockedVideos())
+          .catch((error) => {
+            devLogger.warn("[profileModal] Failed to refresh blocked videos:", error);
+          });
+      });
+    }
+
+    // Re-render the blocked-videos list whenever the published list changes
+    // (e.g. an admin blocks a video from the ⋯ menu while this pane is open).
+    const accessControl = this.mainController.services?.accessControl;
+    if (accessControl && typeof accessControl.onEventBlacklistChange === "function") {
+      if (typeof this.eventBlacklistUnsub === "function") {
+        this.eventBlacklistUnsub();
+      }
+      this.eventBlacklistUnsub = accessControl.onEventBlacklistChange(() => {
+        this.populateBlockedVideos();
+      });
+    }
+  }
+
+  // Show one admin sub-tab's section and hide the rest, syncing button state.
+  // Falls back to the default tab when asked for a hidden one (e.g. Moderators
+  // for a non-super-admin).
+  selectAdminSubtab(name) {
+    let target = ADMIN_SUBTABS.includes(name) ? name : DEFAULT_ADMIN_SUBTAB;
+    const button = this.subtabButtons?.[target];
+    if (button instanceof HTMLElement && button.classList.contains("hidden")) {
+      target = DEFAULT_ADMIN_SUBTAB;
+    }
+    this.activeSubtab = target;
+
+    for (const key of ADMIN_SUBTABS) {
+      const isActive = key === target;
+      const tabButton = this.subtabButtons?.[key];
+      const section = this.subtabSections?.[key];
+      if (tabButton instanceof HTMLElement) {
+        tabButton.setAttribute("aria-selected", isActive ? "true" : "false");
+        if (isActive) {
+          tabButton.dataset.state = "active";
+        } else {
+          delete tabButton.dataset.state;
+        }
+      }
+      if (section instanceof HTMLElement) {
+        section.classList.toggle("hidden", !isActive);
+        section.setAttribute("aria-hidden", (!isActive).toString());
+      }
+    }
   }
 
   populateAdminLists() {
@@ -228,6 +356,137 @@ export class ProfileAdminController {
     );
   }
 
+  // Best-effort lookup of a blocked video from the shared feed cache so rows can
+  // show a title/author; returns null when the video isn't cached (id-only row).
+  resolveBlockedVideo(id) {
+    try {
+      const app = getApplication();
+      const service = app?.nostrService || null;
+      if (service && typeof service.getVideoByEventId === "function") {
+        const video = service.getVideoByEventId(id);
+        if (video) return video;
+      }
+      const client = service?.nostrClient || null;
+      if (client?.allEvents && typeof client.allEvents.get === "function") {
+        return client.allEvents.get(id) || null;
+      }
+    } catch (error) {
+      // Non-fatal — fall back to an id-only row.
+    }
+    return null;
+  }
+
+  populateBlockedVideos() {
+    if (!(this.blockedVideosList instanceof HTMLElement)) {
+      return;
+    }
+    const actorNpub = this.mainController.services.getCurrentUserNpub();
+    const accessControl = this.mainController.services.accessControl;
+    if (!actorNpub || !accessControl?.canEditAdminLists?.(actorNpub)) {
+      renderBlockedVideosList(this.blockedVideosList, this.blockedVideosEmpty, []);
+      return;
+    }
+    const ids =
+      typeof accessControl.getEventBlacklist === "function"
+        ? accessControl.getEventBlacklist()
+        : [];
+    const rows = buildBlockedVideoRows(ids, (id) => this.resolveBlockedVideo(id));
+    renderBlockedVideosList(this.blockedVideosList, this.blockedVideosEmpty, rows, {
+      onUnblock: (id, button) => this.handleRemoveBlockedVideo(id, button),
+      formatAuthor: (hex) =>
+        typeof hex === "string" && hex.length > 12
+          ? `by ${hex.slice(0, 10)}…`
+          : "",
+    });
+  }
+
+  async handleAddBlockedVideo() {
+    const input = this.blockedVideoInput || null;
+    const rawValue = typeof input?.value === "string" ? input.value.trim() : "";
+    if (!rawValue) {
+      this.mainController.showError("Enter an event id or nevent to block.");
+      return;
+    }
+    const actorNpub = this.ensureAdminActor();
+    if (!actorNpub) {
+      return;
+    }
+    const accessControl = this.mainController.services.accessControl;
+    try {
+      const result = await accessControl.addToEventBlacklist(actorNpub, rawValue);
+      if (result?.ok) {
+        if (input) input.value = "";
+        this.mainController.showSuccess("Video added to the block list.");
+        this.populateBlockedVideos();
+        this.refreshGridsAfterEventBlacklistChange();
+      } else {
+        this.mainController.showError(
+          result?.error === "forbidden"
+            ? "You do not have permission to block videos."
+            : result?.error === "invalid event id"
+            ? "That doesn't look like a valid event id or nevent."
+            : "Failed to block the video. Please try again.",
+        );
+      }
+    } catch (error) {
+      userLogger.error("[profileModal] Failed to add blocked video:", error);
+      this.mainController.showError("Failed to block the video. Please try again.");
+    }
+  }
+
+  async handleRemoveBlockedVideo(id, button) {
+    const actorNpub = this.ensureAdminActor();
+    if (!actorNpub) {
+      return;
+    }
+    const confirmed = await showConfirm(
+      "Unblock this video? It will become visible across bitvid again.",
+      { title: "Unblock video", confirmLabel: "Unblock", cancelLabel: "Cancel" },
+    );
+    if (!confirmed) {
+      return;
+    }
+    if (button instanceof HTMLElement) {
+      button.disabled = true;
+    }
+    const accessControl = this.mainController.services.accessControl;
+    try {
+      const result = await accessControl.removeFromEventBlacklist(actorNpub, id);
+      if (result?.ok) {
+        this.mainController.showSuccess("Video unblocked.");
+        this.populateBlockedVideos();
+        this.refreshGridsAfterEventBlacklistChange();
+      } else {
+        if (button instanceof HTMLElement) button.disabled = false;
+        this.mainController.showError(
+          result?.error === "forbidden"
+            ? "You do not have permission to unblock videos."
+            : "Failed to unblock the video. Please try again.",
+        );
+      }
+    } catch (error) {
+      if (button instanceof HTMLElement) button.disabled = false;
+      userLogger.error("[profileModal] Failed to remove blocked video:", error);
+      this.mainController.showError("Failed to unblock the video. Please try again.");
+    }
+  }
+
+  refreshGridsAfterEventBlacklistChange() {
+    try {
+      const app = getApplication();
+      if (app && typeof app.refreshAllVideoGrids === "function") {
+        void app
+          .refreshAllVideoGrids({
+            reason: "admin-event-blacklist-update",
+            forceMainReload: true,
+          })
+          .catch(() => {});
+      }
+    } catch (error) {
+      // Non-fatal.
+    }
+  }
+
   async refreshAdminPaneState() {
     const adminNav = this.mainController.navButtons.admin;
     const adminPane = this.mainController.panes.admin;
@@ -297,14 +556,21 @@ export class ProfileAdminController {
       return;
     }
 
-    if (this.moderatorSection instanceof HTMLElement) {
-      this.moderatorSection.classList.toggle("hidden", !isSuperAdmin);
-      this.moderatorSection.setAttribute(
-        "aria-hidden",
-        (!isSuperAdmin).toString(),
-      );
+    // Moderators is super-admin-only: hide its sub-tab button entirely for
+    // everyone else (its section visibility is then governed by selectAdminSubtab).
+    const moderatorsTab = this.subtabButtons?.moderators;
+    if (moderatorsTab instanceof HTMLElement) {
+      moderatorsTab.classList.toggle("hidden", !isSuperAdmin);
+      if (!isSuperAdmin) {
+        moderatorsTab.setAttribute("aria-selected", "false");
+      }
     }
+
     this.populateAdminLists();
+    this.populateBlockedVideos();
+    // Re-apply the current sub-tab so exactly one section is visible (and so a
+    // now-hidden Moderators tab falls back to the default).
+    this.selectAdminSubtab(this.activeSubtab);
     this.mainController.showStatus(null);
     this.renderer.setAdminLoading(this, false);
   }
diff --git a/js/ui/profileModal/blockedVideosSection.js b/js/ui/profileModal/blockedVideosSection.js
new file mode 100644
index 00000000..37da0b6a
--- /dev/null
+++ b/js/ui/profileModal/blockedVideosSection.js
@@ -0,0 +1,136 @@
+// Helpers for the admin pane's "Blocked videos" sub-tab (#25 follow-up): render
+// the per-event admin block list with an unblock control, and add-by-id. Kept
+// separate from ProfileAdminController so that controller stays under its size
+// cap and the row-building logic is unit-testable without a DOM.
+
+// Shorten a 64-char hex event id (or any long token) for compact display.
+export function shortenEventId(id) {
+  const value = typeof id === "string" ? id.trim() : "";
+  if (value.length <= 18) {
+    return value;
+  }
+  return `${value.slice(0, 10)}…${value.slice(-6)}`;
+}
+
+// Pure: turn the raw blocked-id list into display rows, enriching with a video's
+// title/author when `resolveVideo(id)` can find it in the local cache (falls
+// back to the shortened id). De-dupes and drops blanks so the UI can't render a
+// ghost row for a malformed entry.
+export function buildBlockedVideoRows(ids, resolveVideo) {
+  const list = Array.isArray(ids) ? ids : [];
+  const seen = new Set();
+  const rows = [];
+  for (const raw of list) {
+    const id = typeof raw === "string" ? raw.trim().toLowerCase() : "";
+    if (!id || seen.has(id)) {
+      continue;
+    }
+    seen.add(id);
+
+    let title = "";
+    let author = "";
+    if (typeof resolveVideo === "function") {
+      try {
+        const video = resolveVideo(id);
+        if (video && typeof video === "object") {
+          title = typeof video.title === "string" ? video.title.trim() : "";
+          author = typeof video.pubkey === "string" ? video.pubkey.trim() : "";
+        }
+      } catch (error) {
+        // Best-effort enrichment; fall back to the id.
+      }
+    }
+
+    rows.push({
+      id,
+      title,
+      author,
+      // Primary line: the video title when known, else the shortened id.
+      label: title || shortenEventId(id),
+      // Secondary line: the shortened id, only when the title is the primary.
+      sublabel: title ? shortenEventId(id) : "",
+    });
+  }
+  return rows;
+}
+
+// Thin DOM render for the blocked-videos <ul>. Mirrors the admin list card
+// styling. `onUnblock(id, button)` handles confirm + removal in the controller.
+export function renderBlockedVideosList(
+  listEl,
+  emptyEl,
+  rows,
+  { onUnblock, formatAuthor } = {},
+) {
+  if (!(listEl instanceof HTMLElement) || !(emptyEl instanceof HTMLElement)) {
+    return;
+  }
+
+  listEl.textContent = "";
+
+  const setHidden = (element, hidden) => {
+    if (!(element instanceof HTMLElement)) {
+      return;
+    }
+    element.classList.toggle("hidden", hidden);
+    if (hidden) {
+      element.setAttribute("hidden", "");
+    } else {
+      element.removeAttribute("hidden");
+    }
+  };
+
+  if (!Array.isArray(rows) || rows.length === 0) {
+    setHidden(emptyEl, false);
+    setHidden(listEl, true);
+    return;
+  }
+
+  setHidden(emptyEl, true);
+  setHidden(listEl, false);
+
+  for (const row of rows) {
+    const item = document.createElement("li");
+    item.className =
+      "card flex flex-col gap-3 p-4 sm:flex-row sm:items-center sm:justify-between";
+    item.dataset.eventId = row.id;
+
+    const info = document.createElement("div");
+    info.className = "min-w-0 space-y-1";
+
+    const label = document.createElement("p");
+    label.className = "truncate font-medium text-text";
+    label.textContent = row.label;
+    label.title = row.id;
+    info.appendChild(label);
+
+    const authorText =
+      row.author && typeof formatAuthor === "function"
+        ? formatAuthor(row.author)
+        : "";
+    const secondaryText = [row.sublabel, authorText].filter(Boolean).join(" · ");
+    if (secondaryText) {
+      const sub = document.createElement("p");
+      sub.className = "truncate text-xs text-muted";
+      sub.textContent = secondaryText;
+      info.appendChild(sub);
+    }
+
+    item.appendChild(info);
+
+    const button = document.createElement("button");
+    button.type = "button";
+    button.className = "btn-ghost focus-ring";
+    button.dataset.variant = "danger";
+    button.textContent = "Unblock";
+    button.setAttribute("aria-label", `Unblock video ${row.label}`);
+    button.addEventListener("click", () => {
+      if (typeof onUnblock === "function") {
+        onUnblock(row.id, button);
+      }
+    });
+
+    item.appendChild(button);
+    listEl.appendChild(item);
+  }
+}
diff --git a/tests/profile-blocked-videos.test.mjs b/tests/profile-blocked-videos.test.mjs
new file mode 100644
index 00000000..0fc0a992
--- /dev/null
+++ b/tests/profile-blocked-videos.test.mjs
@@ -0,0 +1,124 @@
+// Admin pane "Blocked videos" sub-tab (#25 follow-up): the per-event admin block
+// list is now viewable/removable in the UI. These cover the row-building (pure)
+// and the list rendering + unblock wiring (jsdom).
+//
+// test_integrity_note:
+//   change_type: ["new_tests"]
+//   scenarios:
+//     - id: SCN-blocked-videos-rows
+//       given: "a raw blocked-id list and an optional cache resolver"
+//       when: "buildBlockedVideoRows / renderBlockedVideosList run"
+//       then: "rows dedupe + enrich, the list renders, and Unblock invokes the callback"
+//   observable_outcomes:
+//     - "id-only rows when the video isn't cached; title+id rows when it is"
+//     - "empty list shows the empty state and hides the <ul>"
+//     - "clicking Unblock calls onUnblock with the event id"
+//   determinism_controls:
+//     - "pure fn for row building; jsdom for render; no network/clock"
+//   anti_cheat_rationale:
+//     prevents: ["hard-coded return value", "snapshot rubber-stamping"]
+//   relaxation:
+//     did_relax_any_assertion: false
+
+import test, { beforeEach, afterEach } from "node:test";
+import { strict as assert } from "node:assert";
+import { JSDOM } from "jsdom";
+import {
+  buildBlockedVideoRows,
+  renderBlockedVideosList,
+  shortenEventId,
+} from "../js/ui/profileModal/blockedVideosSection.js";
+
+const HEX = "a".repeat(64);
+const HEX2 = "b".repeat(64);
+
+test("buildBlockedVideoRows: id-only row when the video isn't cached", () => {
+  const rows = buildBlockedVideoRows([HEX], () => null);
+  assert.equal(rows.length, 1);
+  assert.equal(rows[0].id, HEX);
+  assert.equal(rows[0].title, "");
+  assert.equal(rows[0].label, shortenEventId(HEX), "label falls back to shortened id");
+  assert.equal(rows[0].sublabel, "", "no sublabel without a title");
+});
+
+test("buildBlockedVideoRows: enriches with title + author when cached", () => {
+  const rows = buildBlockedVideoRows([HEX], (id) =>
+    id === HEX ? { title: "My Clip", pubkey: HEX2 } : null,
+  );
+  assert.equal(rows[0].title, "My Clip");
+  assert.equal(rows[0].label, "My Clip", "title becomes the primary label");
+  assert.equal(rows[0].sublabel, shortenEventId(HEX), "id demoted to sublabel");
+  assert.equal(rows[0].author, HEX2);
+});
+
+test("buildBlockedVideoRows: dedupes, lowercases, and drops blanks", () => {
+  const rows = buildBlockedVideoRows(
+    [HEX, HEX.toUpperCase(), "", "   ", HEX2],
+    () => null,
+  );
+  assert.deepEqual(
+    rows.map((r) => r.id),
+    [HEX, HEX2],
+    "one row per distinct id, blanks removed",
+  );
+});
+
+test("buildBlockedVideoRows: a throwing resolver degrades to an id-only row", () => {
+  const rows = buildBlockedVideoRows([HEX], () => {
+    throw new Error("cache miss");
+  });
+  assert.equal(rows.length, 1);
+  assert.equal(rows[0].label, shortenEventId(HEX));
+});
+
+describe_render();
+
+function describe_render() {
+  let dom;
+  beforeEach(() => {
+    dom = new JSDOM("<!doctype html><html><body></body></html>");
+    globalThis.document = dom.window.document;
+    globalThis.HTMLElement = dom.window.HTMLElement;
+  });
+  afterEach(() => {
+    delete globalThis.document;
+    delete globalThis.HTMLElement;
+  });
+
+  const mount = () => {
+    const list = dom.window.document.createElement("ul");
+    const empty = dom.window.document.createElement("div");
+    dom.window.document.body.append(list, empty);
+    return { list, empty };
+  };
+
+  test("renderBlockedVideosList: empty shows the empty state and hides the list", () => {
+    const { list, empty } = mount();
+    renderBlockedVideosList(list, empty, []);
+    assert.equal(empty.classList.contains("hidden"), false, "empty state visible");
+    assert.equal(list.classList.contains("hidden"), true, "list hidden");
+    assert.equal(list.children.length, 0);
+  });
+
+  test("renderBlockedVideosList: renders one row per blocked video", () => {
+    const { list, empty } = mount();
+    const rows = buildBlockedVideoRows([HEX, HEX2], () => null);
+    renderBlockedVideosList(list, empty, rows, { onUnblock: () => {} });
+    assert.equal(empty.classList.contains("hidden"), true, "empty hidden");
+    assert.equal(list.children.length, 2, "two rows rendered");
+    assert.equal(list.children[0].dataset.eventId, HEX);
+  });
+
+  test("renderBlockedVideosList: clicking Unblock calls onUnblock with the id", () => {
+    const { list, empty } = mount();
+    const rows = buildBlockedVideoRows([HEX], () => null);
+    const calls = [];
+    renderBlockedVideosList(list, empty, rows, {
+      onUnblock: (id) => calls.push(id),
+    });
+    const button = list.querySelector("button");
+    assert.ok(button, "row has an Unblock button");
+    button.click();
+    assert.deepEqual(calls, [HEX], "onUnblock invoked with the blocked id");
+  });
+}
diff --git a/tests/profile-modal-controller.test.mjs b/tests/profile-modal-controller.test.mjs
index 8c8df906..6f1487f9 100644
--- a/tests/profile-modal-controller.test.mjs
+++ b/tests/profile-modal-controller.test.mjs
@@ -1158,9 +1158,26 @@ test('admin mutations invoke accessControl stubs and update admin DOM', async ()
 
   assert.ok(controller.navButtons.admin);
   assert.equal(controller.navButtons.admin.classList.contains('hidden'), false);
-  assert.equal(controller.moderatorSection.classList.contains('hidden'), false);
+  // The admin pane is now organized into sub-tabs: Whitelist is the default tab
+  // (visible), while Moderators/Blacklist/Blocked-videos sections are hidden
+  // until their tab is selected. The Moderators *tab button* is shown to a
+  // super admin. (Previously every section was stacked and visible at once.)
+  const admin = controller.adminController;
+  assert.equal(admin.whitelistSection.classList.contains('hidden'), false);
+  assert.equal(admin.moderatorSection.classList.contains('hidden'), true);
+  assert.equal(
+    admin.subtabButtons.moderators.classList.contains('hidden'),
+    false,
+    'moderators sub-tab is available to a super admin',
+  );
+  // Content still populates behind the inactive tab.
   assert.equal(controller.adminModeratorList.querySelectorAll('li').length, 1);
-  assert.equal(controller.adminModeratorList.hasAttribute('hidden'), false);
+  // Selecting the Moderators sub-tab reveals its section and hides Whitelist.
+  admin.selectAdminSubtab('moderators');
+  assert.equal(admin.moderatorSection.classList.contains('hidden'), false);
+  assert.equal(admin.whitelistSection.classList.contains('hidden'), true);
+  // Back to Whitelist for the remaining assertions.
+  admin.selectAdminSubtab('whitelist');
   assert.equal(
     controller.whitelistList.querySelectorAll('button').length > 0,
     true,