From 2a2175684229a6f983b098348d6ba7f5d9a8613c Mon Sep 17 00:00:00 2001
From: thePR0M3TH3AN <53631862+PR0M3TH3AN@users.noreply.github.com>
Date: Mon, 6 Jul 2026 20:40:06 -0400
Subject: [PATCH] submissions(#23): admin "Submissions" sub-tab (approve/deny)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The headline: an admin surface to triage the structured submissions.
- profile-modal.html: "Submissions" sub-tab button + #adminSubmissionsSection
  (refresh + loading/empty + list), alongside Whitelist/Blacklist/Blocked
  videos/Moderators.
- ProfileAdminController: adds "submissions" to the sub-tab machinery (button +
  section maps, selectAdminSubtab dispatch, refreshAdminPaneState populate), gates
  the tab on FEATURE_SUBMISSIONS, and wires the list/refresh listeners.
- js/ui/profileModal/submissionsSection.js (extracted to keep the controller under
  the 1200-line cap, like blockedVideosSection.js): populate/render + approve/deny.
  Approve (applications only) → accessControl.addToWhitelist(actor, applicant) +
  markSubmissionResolved(approved) + refresh the whitelist; Deny/Dismiss →
  markSubmissionResolved(denied). Optimistic remove; re-sync on failure. Cards show
  the type badge + claimed applicant + body.
- tailwind.source.css: .submission-card* (token-only).

Gated by FEATURE_SUBMISSIONS (tab hidden when off). Lint + build clean;
profile-modal-controller tests 26/26.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 components/profile-modal.html                |  71 +++++++
 css/tailwind.source.css                      |  54 +++++
 js/ui/profileModal/ProfileAdminController.js |  51 ++++-
 js/ui/profileModal/submissionsSection.js     | 204 +++++++++++++++++++
 4 files changed, 378 insertions(+), 2 deletions(-)
 create mode 100644 js/ui/profileModal/submissionsSection.js

diff --git a/components/profile-modal.html b/components/profile-modal.html
index dcf9b2c7..ba70415b 100644
--- a/components/profile-modal.html
+++ b/components/profile-modal.html
@@ -1877,6 +1877,77 @@
                 >
                   Moderators
                 </button>
+                <button
+                  id="adminSubtabSubmissions"
+                  type="button"
+                  role="tab"
+                  data-admin-subtab="submissions"
+                  aria-controls="adminSubmissionsSection"
+                  aria-selected="false"
+                  class="btn-ghost focus-ring px-3 py-1.5 text-sm font-medium hidden"
+                >
+                  Submissions
+                </button>
+              </div>
+
+              <div
+                id="adminSubmissionsSection"
+                class="space-y-4 hidden"
+                aria-hidden="true"
+              >
+                <div class="flex items-center justify-between gap-3">
+                  <div>
+                    <h4 class="text-base font-semibold text-text">Submissions</h4>
+                    <p class="text-2xs text-muted">
+                      Applications, appeals, and reports from the public forms.
+                      Approve an application to add it to the whitelist.
+                    </p>
+                  </div>
+                  <button
+                    id="adminSubmissionsRefreshBtn"
+                    type="button"
+                    class="btn-ghost btn-icon"
+                    data-size="sm"
+                    aria-label="Refresh submissions"
+                  >
+                    <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>
+                <p
+                  id="adminSubmissionsLoading"
+                  class="text-sm text-muted hidden"
+                  role="status"
+                  aria-live="polite"
+                >
+                  Loading submissions…
+                </p>
+                <p id="adminSubmissionsEmpty" class="text-sm text-muted hidden">
+                  No pending submissions.
+                </p>
+                <ul
+                  id="adminSubmissionsList"
+                  class="grid-stack"
+                  data-orientation="vertical"
+                ></ul>
               </div>
 
               <div id="adminModeratorsSection" class="space-y-4 hidden" aria-hidden="true">
diff --git a/css/tailwind.source.css b/css/tailwind.source.css
index 69b182c5..2143db6e 100644
--- a/css/tailwind.source.css
+++ b/css/tailwind.source.css
@@ -3168,6 +3168,60 @@
     flex-shrink: 0;
   }
 
+  /* #23: admin Submissions cards. */
+  .submission-card {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-2xs);
+    padding: var(--space-sm);
+    border: var(--border-width-hairline) solid var(--color-border-subtle);
+    border-radius: var(--radius-md);
+    background-color: var(--color-page-alt);
+  }
+
+  .submission-card + .submission-card {
+    margin-block-start: var(--space-2xs);
+  }
+
+  .submission-card__head {
+    display: flex;
+    align-items: center;
+    gap: var(--space-sm);
+    flex-wrap: wrap;
+  }
+
+  .submission-card__type {
+    padding-block: var(--space-3xs);
+    padding-inline: var(--space-2xs);
+    border-radius: var(--radius-full);
+    font-size: var(--font-size-2xs);
+    font-weight: 600;
+    color: var(--color-white);
+    background-color: var(--color-accent-strong);
+  }
+
+  .submission-card__applicant {
+    min-inline-size: 0;
+    font-size: var(--font-size-2xs);
+    color: var(--color-text-muted);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .submission-card__body {
+    margin: 0;
+    font-size: var(--font-size-sm);
+    color: var(--color-text);
+    white-space: pre-wrap;
+    word-break: break-word;
+  }
+
+  .submission-card__actions {
+    display: flex;
+    gap: var(--space-2xs);
+  }
+
   /* #43: always-visible active-identity pill. Rendered after the header in
      flow and pulled up with a negative block-start margin so it sits half-on /
      half-off the header divider — every pane shows who you're acting as. */
diff --git a/js/ui/profileModal/ProfileAdminController.js b/js/ui/profileModal/ProfileAdminController.js
index b654184c..768c00de 100644
--- a/js/ui/profileModal/ProfileAdminController.js
+++ b/js/ui/profileModal/ProfileAdminController.js
@@ -7,12 +7,23 @@ import {
   renderBlockedVideosList,
 } from "./blockedVideosSection.js";
 import { showConfirm } from "../confirmDialog.js";
+import { FEATURE_SUBMISSIONS } from "../../constants.js";
+import {
+  populateSubmissions,
+  handleSubmissionsClick,
+} from "./submissionsSection.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"];
+// super admin; "submissions" only when FEATURE_SUBMISSIONS is on.
+const ADMIN_SUBTABS = [
+  "whitelist",
+  "blacklist",
+  "blockedVideos",
+  "moderators",
+  "submissions",
+];
 const DEFAULT_ADMIN_SUBTAB = "whitelist";
 
 export class ProfileAdminController {
@@ -84,18 +95,27 @@ export class ProfileAdminController {
     this.blockedVideoInput = document.getElementById("adminBlockedVideoInput") || null;
     this.blockedVideosRefreshBtn = document.getElementById("adminBlockedVideosRefreshBtn") || null;
 
+    this.submissionsSection = document.getElementById("adminSubmissionsSection") || null;
+    this.submissionsList = document.getElementById("adminSubmissionsList") || null;
+    this.submissionsEmpty = document.getElementById("adminSubmissionsEmpty") || null;
+    this.submissionsLoading = document.getElementById("adminSubmissionsLoading") || null;
+    this.submissionsRefreshBtn = document.getElementById("adminSubmissionsRefreshBtn") || null;
+    this.pendingSubmissions = [];
+
     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,
+      submissions: document.getElementById("adminSubtabSubmissions") || null,
     };
     this.subtabSections = {
       whitelist: this.whitelistSection,
       blacklist: this.blacklistSection,
       blockedVideos: this.blockedVideosSection,
       moderators: this.moderatorSection,
+      submissions: this.submissionsSection,
     };
   }
 
@@ -212,6 +232,17 @@ export class ProfileAdminController {
       }
     }
 
+    if (this.submissionsRefreshBtn instanceof HTMLElement) {
+      this.submissionsRefreshBtn.addEventListener("click", () => {
+        void populateSubmissions(this);
+      });
+    }
+    if (this.submissionsList instanceof HTMLElement) {
+      this.submissionsList.addEventListener("click", (event) =>
+        handleSubmissionsClick(this, event),
+      );
+    }
+
     if (this.addBlockedVideoButton instanceof HTMLElement) {
       this.addBlockedVideoButton.addEventListener("click", () => {
         void this.handleAddBlockedVideo();
@@ -283,6 +314,10 @@ export class ProfileAdminController {
         section.setAttribute("aria-hidden", (!isActive).toString());
       }
     }
+
+    if (target === "submissions") {
+      void populateSubmissions(this);
+    }
   }
 
   populateAdminLists() {
@@ -566,8 +601,20 @@ export class ProfileAdminController {
       }
     }
 
+    // Submissions tab is only shown when the feature is enabled.
+    const submissionsTab = this.subtabButtons?.submissions;
+    if (submissionsTab instanceof HTMLElement) {
+      submissionsTab.classList.toggle("hidden", !FEATURE_SUBMISSIONS);
+      if (!FEATURE_SUBMISSIONS) {
+        submissionsTab.setAttribute("aria-selected", "false");
+      }
+    }
+
     this.populateAdminLists();
     this.populateBlockedVideos();
+    if (FEATURE_SUBMISSIONS) {
+      void populateSubmissions(this);
+    }
     // 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);
diff --git a/js/ui/profileModal/submissionsSection.js b/js/ui/profileModal/submissionsSection.js
new file mode 100644
index 00000000..9a823d29
--- /dev/null
+++ b/js/ui/profileModal/submissionsSection.js
@@ -0,0 +1,204 @@
+// js/ui/profileModal/submissionsSection.js
+//
+// The admin pane's "Submissions" sub-tab (#23) logic, extracted from
+// ProfileAdminController to keep that file under the size cap (mirrors
+// blockedVideosSection.js). Each function takes the ProfileAdminController as
+// `controller` and uses its cached DOM refs + services. Gated by
+// FEATURE_SUBMISSIONS.
+
+import {
+  fetchPendingSubmissions,
+  markSubmissionResolved,
+} from "../../submissions/submissionFacade.js";
+import { SUBMISSION_TYPE_LABELS } from "../../submissions/submissionService.js";
+import { FEATURE_SUBMISSIONS } from "../../constants.js";
+import { safeDecodeNpub } from "../../utils/nostrHelpers.js";
+import { showConfirm } from "../confirmDialog.js";
+import { devLogger } from "../../utils/logger.js";
+
+function setLoading(controller, value) {
+  if (controller.submissionsLoading) {
+    controller.submissionsLoading.classList.toggle("hidden", !value);
+  }
+}
+
+export async function populateSubmissions(controller) {
+  if (!FEATURE_SUBMISSIONS || !controller.submissionsList) {
+    return;
+  }
+  const services = controller.mainController.services;
+  const accessControl = services?.accessControl;
+  const actorNpub = services?.getCurrentUserNpub?.() || "";
+  if (!actorNpub || !accessControl?.canEditAdminLists?.(actorNpub)) {
+    controller.pendingSubmissions = [];
+    renderSubmissions(controller);
+    return;
+  }
+
+  const adminHex = safeDecodeNpub(controller.mainController.adminSuperNpub);
+  const editorHexes = (accessControl.getEditors?.() || [])
+    .map((npub) => safeDecodeNpub(npub))
+    .filter(Boolean);
+
+  setLoading(controller, true);
+  let pending = [];
+  try {
+    pending = await fetchPendingSubmissions({ adminHex, editorHexes });
+  } catch (error) {
+    devLogger.warn("[profileModal] Failed to load submissions:", error);
+  }
+  controller.pendingSubmissions = pending;
+  setLoading(controller, false);
+  renderSubmissions(controller);
+}
+
+export function renderSubmissions(controller) {
+  if (!controller.submissionsList) {
+    return;
+  }
+  controller.submissionsList.replaceChildren();
+  const list = Array.isArray(controller.pendingSubmissions)
+    ? controller.pendingSubmissions
+    : [];
+  if (controller.submissionsEmpty) {
+    controller.submissionsEmpty.classList.toggle("hidden", list.length > 0);
+  }
+  for (const submission of list) {
+    controller.submissionsList.appendChild(renderSubmissionRow(submission));
+  }
+}
+
+function renderSubmissionRow(submission) {
+  const li = document.createElement("li");
+  li.className = "submission-card";
+  li.dataset.submissionId = submission.eventId;
+
+  const head = document.createElement("div");
+  head.className = "submission-card__head";
+  const badge = document.createElement("span");
+  badge.className = "submission-card__type";
+  badge.textContent =
+    SUBMISSION_TYPE_LABELS[submission.type] || SUBMISSION_TYPE_LABELS.other;
+  head.appendChild(badge);
+  if (submission.applicant) {
+    const who = document.createElement("span");
+    who.className = "submission-card__applicant";
+    who.textContent = submission.applicant;
+    head.appendChild(who);
+  }
+  li.appendChild(head);
+
+  if (submission.content) {
+    const body = document.createElement("p");
+    body.className = "submission-card__body";
+    body.textContent = submission.content;
+    li.appendChild(body);
+  }
+
+  const actions = document.createElement("div");
+  actions.className = "submission-card__actions";
+  // Approve (add to whitelist) only applies to whitelist applications.
+  if (submission.type === "application" && submission.applicant) {
+    const approve = document.createElement("button");
+    approve.type = "button";
+    approve.className = "btn focus-ring";
+    approve.dataset.size = "sm";
+    approve.dataset.submissionAction = "approve";
+    approve.textContent = "Approve";
+    actions.appendChild(approve);
+  }
+  const deny = document.createElement("button");
+  deny.type = "button";
+  deny.className = "btn-ghost focus-ring";
+  deny.dataset.size = "sm";
+  deny.dataset.submissionAction = "deny";
+  deny.textContent = submission.type === "application" ? "Deny" : "Dismiss";
+  actions.appendChild(deny);
+  li.appendChild(actions);
+
+  return li;
+}
+
+export function handleSubmissionsClick(controller, event) {
+  const button =
+    event.target instanceof Element
+      ? event.target.closest("[data-submission-action]")
+      : null;
+  if (!button) {
+    return;
+  }
+  const card = button.closest("[data-submission-id]");
+  const id = card?.dataset?.submissionId || "";
+  const submission = (controller.pendingSubmissions || []).find(
+    (s) => s.eventId === id,
+  );
+  if (!submission) {
+    return;
+  }
+  if (button.dataset.submissionAction === "approve") {
+    void approveSubmission(controller, submission);
+  } else {
+    void denySubmission(controller, submission);
+  }
+}
+
+async function approveSubmission(controller, submission) {
+  const services = controller.mainController.services;
+  const accessControl = services?.accessControl;
+  const actorNpub = services?.getCurrentUserNpub?.() || "";
+  const applicant = submission.applicant;
+  if (!actorNpub || !accessControl || !applicant) {
+    return;
+  }
+  const ok = await showConfirm(
+    `Approve ${applicant}? They'll be added to the whitelist.`,
+    { title: "Approve application", confirmLabel: "Approve" },
+  );
+  if (!ok) {
+    return;
+  }
+  controller.pendingSubmissions = (controller.pendingSubmissions || []).filter(
+    (s) => s.eventId !== submission.eventId,
+  );
+  renderSubmissions(controller);
+  try {
+    await accessControl.addToWhitelist(actorNpub, applicant);
+    await markSubmissionResolved({
+      submission,
+      status: "approved",
+      actingHex: safeDecodeNpub(actorNpub),
+    });
+    controller.mainController.showSuccess?.(
+      `Approved — ${applicant} added to the whitelist.`,
+    );
+    controller.populateAdminLists();
+  } catch (error) {
+    devLogger.warn("[profileModal] Approve submission failed:", error);
+    controller.mainController.showError?.("Couldn't approve — please try again.");
+    void populateSubmissions(controller);
+  }
+}
+
+async function denySubmission(controller, submission) {
+  const actorNpub =
+    controller.mainController.services?.getCurrentUserNpub?.() || "";
+  if (!actorNpub) {
+    return;
+  }
+  controller.pendingSubmissions = (controller.pendingSubmissions || []).filter(
+    (s) => s.eventId !== submission.eventId,
+  );
+  renderSubmissions(controller);
+  try {
+    await markSubmissionResolved({
+      submission,
+      status: "denied",
+      actingHex: safeDecodeNpub(actorNpub),
+    });
+    controller.mainController.showSuccess?.("Submission dismissed.");
+  } catch (error) {
+    devLogger.warn("[profileModal] Deny submission failed:", error);
+    controller.mainController.showError?.("Couldn't dismiss — please try again.");
+    void populateSubmissions(controller);
+  }
+}