From 6aa4b6517a396fb825dd3ec6f1c7c8f24189fc9c Mon Sep 17 00:00:00 2001
From: thePR0M3TH3AN <53631862+PR0M3TH3AN@users.noreply.github.com>
Date: Thu, 9 Oct 2025 22:31:46 -0400
Subject: [PATCH] Surface audience flags in revert modal

---
 components/revert-video-modal.html | 18 ++++++++-
 js/ui/components/RevertModal.js    | 61 ++++++++++++++++++++++++++++++
 2 files changed, 78 insertions(+), 1 deletion(-)

diff --git a/components/revert-video-modal.html b/components/revert-video-modal.html
index cedd0daa..151d7bfd 100644
--- a/components/revert-video-modal.html
+++ b/components/revert-video-modal.html
@@ -62,7 +62,7 @@
           <p class="mt-2 text-xs text-gray-400">
             Versions are grouped by their <code class="px-1 py-0.5 bg-gray-900/60 rounded border border-gray-700 text-[0.7rem]">d</code>
             tag or shared <code class="px-1 py-0.5 bg-gray-900/60 rounded border border-gray-700 text-[0.7rem]">videoRootId</code>. This ensures legacy
-            clients see consistent history when multiple edits were published.
+            clients see consistent history when multiple edits were published, and keeps audience flags (NSFW / for kids) aligned with the Upload modal.
           </p>
         </div>
 
@@ -117,6 +117,22 @@
                 </dl>
               </section>
 
+              <section class="space-y-2">
+                <h4 class="text-xs font-semibold uppercase tracking-wide text-gray-400">
+                  Audience flags
+                </h4>
+                <dl class="grid gap-2 text-xs text-gray-400 sm:grid-cols-2">
+                  <div>
+                    <dt class="font-semibold text-gray-300">NSFW flag</dt>
+                    <dd class="mt-1 text-gray-500">Awaiting selection</dd>
+                  </div>
+                  <div>
+                    <dt class="font-semibold text-gray-300">For kids flag</dt>
+                    <dd class="mt-1 text-gray-500">Awaiting selection</dd>
+                  </div>
+                </dl>
+              </section>
+
               <section class="space-y-2">
                 <h4 class="text-xs font-semibold uppercase tracking-wide text-gray-400">
                   NIP-71 event metadata
diff --git a/js/ui/components/RevertModal.js b/js/ui/components/RevertModal.js
index 5e287b69..3d9dee6b 100644
--- a/js/ui/components/RevertModal.js
+++ b/js/ui/components/RevertModal.js
@@ -571,6 +571,9 @@ export class RevertModal {
     }
 
     const chips = [];
+    const nsfwFlag = version.isNsfw === true;
+    const forKidsFlag = version.isForKids === true;
+    const conflictingAudienceFlags = nsfwFlag && forKidsFlag;
     if (version.deleted) {
       chips.push(
         '<span class="inline-flex items-center rounded-full border border-red-700/70 bg-red-900/40 px-2 py-0.5 text-xs text-red-200/90">Marked deleted</span>'
@@ -581,6 +584,22 @@ export class RevertModal {
         '<span class="inline-flex items-center rounded-full border border-purple-600/60 bg-purple-900/40 px-2 py-0.5 text-xs text-purple-200/90">Private</span>'
       );
     }
+    if (conflictingAudienceFlags) {
+      chips.push(
+        '<span class="inline-flex items-center rounded-full border border-amber-700/70 bg-amber-900/40 px-2 py-0.5 text-xs text-amber-200/90">NSFW + For kids conflict</span>'
+      );
+    } else {
+      if (nsfwFlag) {
+        chips.push(
+          '<span class="inline-flex items-center rounded-full border border-red-700/70 bg-red-900/40 px-2 py-0.5 text-xs text-red-200/90">Marked NSFW</span>'
+        );
+      }
+      if (forKidsFlag) {
+        chips.push(
+          '<span class="inline-flex items-center rounded-full border border-emerald-700/70 bg-emerald-900/40 px-2 py-0.5 text-xs text-emerald-200/90">For kids</span>'
+        );
+      }
+    }
     if (version.version !== undefined) {
       chips.push(
         `<span class="inline-flex items-center rounded-full border border-gray-700 bg-gray-800/80 px-2 py-0.5 text-xs text-gray-200">Schema v${escape(
@@ -589,6 +608,35 @@ export class RevertModal {
       );
     }
 
+    const renderFlagStatus = (value, {
+      yesLabel = "Yes",
+      noLabel = "No",
+      unspecifiedLabel = "Not specified",
+    } = {}) => {
+      if (value === true) {
+        return `<span class="text-gray-200">${escape(yesLabel)}</span>`;
+      }
+      if (value === false) {
+        return `<span class="text-gray-200">${escape(noLabel)}</span>`;
+      }
+      return this.renderPlaceholder(unspecifiedLabel);
+    };
+
+    const nsfwStatusHtml = renderFlagStatus(version.isNsfw, {
+      yesLabel: "Yes — marked NSFW",
+      noLabel: "No — not flagged as NSFW",
+      unspecifiedLabel: "Not specified",
+    });
+    const kidsStatusHtml = renderFlagStatus(version.isForKids, {
+      yesLabel: "Yes — marked for kids",
+      noLabel: "No — not marked for kids",
+      unspecifiedLabel: "Not specified",
+    });
+
+    const audienceConflictNotice = conflictingAudienceFlags
+      ? '<p class="text-xs text-amber-300">Conflicting flags detected — this revision is marked both NSFW and for kids. Review before reverting.</p>'
+      : "";
+
     const descriptionHtml = description
       ? `<p class="whitespace-pre-wrap text-gray-200">${escape(description)}</p>`
       : '<p class="text-gray-500">No description provided.</p>';
@@ -718,6 +766,11 @@ export class RevertModal {
       definition("Alt text", altHtml, { span: 2 }),
     ].join("");
 
+    const audienceRows = [
+      definition("NSFW flag", nsfwStatusHtml),
+      definition("For kids flag", kidsStatusHtml),
+    ].join("");
+
     this.details.innerHTML = `
       <div class="space-y-6">
         <div class="flex flex-col gap-4 lg:flex-row lg:items-start">
@@ -759,6 +812,14 @@ export class RevertModal {
           ${descriptionHtml}
         </section>
 
+        <section class="space-y-2">
+          <h4 class="text-sm font-semibold text-gray-200">Audience flags</h4>
+          <dl class="grid gap-3 sm:grid-cols-2 text-xs text-gray-300">
+            ${audienceRows}
+          </dl>
+          ${audienceConflictNotice}
+        </section>
+
         <section class="space-y-2">
           <h4 class="text-sm font-semibold text-gray-200">NIP-71 event metadata</h4>
           <dl class="grid gap-3 sm:grid-cols-2 text-xs text-gray-300">