From 383a77d6da7007f307ee86639ea895acf4cf2e7f Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Tue, 20 Jan 2026 01:58:02 +0000
Subject: [PATCH] feat: move moderation and link preview settings to new Safety
 tab in Profile modal

- Added 'Safety' tab to `components/profile-modal.html`, positioned before 'Blocked'
- Moved `profileModerationSettings` and `profileLinkPreviewSettings` panels to the new tab
- Updated `ProfileModalController.js` to manage the new tab and initialize settings when selected
- Renamed 'Safety & Moderation' panel header to 'Safety'
---
 components/profile-modal.html   | 368 +++++++++++++++++---------------
 js/ui/profileModalController.js |   7 +
 2 files changed, 199 insertions(+), 176 deletions(-)

diff --git a/components/profile-modal.html b/components/profile-modal.html
index 6bd046b5..b496f4cf 100644
--- a/components/profile-modal.html
+++ b/components/profile-modal.html
@@ -136,6 +136,15 @@
               >
                 Friends
               </button>
+              <button
+                id="profileNavSafety"
+                type="button"
+                class="btn-ghost focus-ring w-full justify-start gap-2 px-3 py-2 text-xs font-medium"
+                aria-controls="profilePaneSafety"
+                aria-selected="false"
+              >
+                Safety
+              </button>
               <button
                 id="profileNavBlocked"
                 type="button"
@@ -292,182 +301,6 @@
                   Profiles you add here will stay on this device so you can quickly switch before posting or moderating.
                 </p>
               </div>
-
-              <div id="profileModerationSettings" class="card space-y-5 p-5">
-                <div class="space-y-2">
-                  <h3 class="text-base font-semibold text-text">Safety & Moderation</h3>
-                  <p class="text-sm text-muted">
-                    Choose how many trusted reports or mutes it takes to blur thumbnails, block autoplay previews, or hide videos entirely.
-                    Lower numbers are stricter.
-                  </p>
-                  <div class="rounded-lg border border-border bg-bg-muted p-3 text-xs text-muted">
-                    <p>
-                      Trusted counts include your first-degree follows (F1) plus seeded moderators.
-                    </p>
-                    <dl class="mt-2 grid gap-1">
-                      <div class="flex items-center justify-between gap-3">
-                        <dt>Trusted contacts</dt>
-                        <dd id="profileModerationTrustedContactsCount" class="font-semibold text-text">0</dd>
-                      </div>
-                      <div class="flex items-center justify-between gap-3">
-                        <dt>Active trusted mute contributors</dt>
-                        <dd id="profileModerationTrustedMuteCount" class="font-semibold text-text">0</dd>
-                      </div>
-                      <div class="flex items-center justify-between gap-3">
-                        <dt>Active trusted report contributors</dt>
-                        <dd id="profileModerationTrustedReportCount" class="font-semibold text-text">0</dd>
-                      </div>
-                    </dl>
-                    <p
-                      id="profileModerationSeedOnlyIndicator"
-                      class="mt-2 flex items-center gap-1 text-xs text-warning-strong"
-                      hidden
-                    >
-                      <span aria-hidden="true">●</span>
-                      <span>Seeded moderators only</span>
-                    </p>
-                  </div>
-                </div>
-                <div class="grid gap-4 sm:grid-cols-2">
-                  <label
-                    class="block text-sm text-muted-strong"
-                    for="profileModerationBlurThreshold"
-                  >
-                    <span class="mb-2 block font-medium">Blur after trusted reports</span>
-                    <input
-                      id="profileModerationBlurThreshold"
-                      type="number"
-                      inputmode="numeric"
-                      min="0"
-                      step="1"
-                      class="input"
-                    />
-                    <span class="mt-1 block text-xs text-muted">
-                      Thumbnails blur when trusted contacts report nudity at or above this count.
-                    </span>
-                  </label>
-                  <label
-                    class="block text-sm text-muted-strong"
-                    for="profileModerationAutoplayThreshold"
-                  >
-                    <span class="mb-2 block font-medium">Block autoplay after reports</span>
-                    <input
-                      id="profileModerationAutoplayThreshold"
-                      type="number"
-                      inputmode="numeric"
-                      min="0"
-                      step="1"
-                      class="input"
-                    />
-                    <span class="mt-1 block text-xs text-muted">
-                      Autoplay previews pause once trusted reports meet this threshold.
-                    </span>
-                  </label>
-                </div>
-                <div
-                  class="grid gap-4 sm:grid-cols-2"
-                  data-role="trusted-hide-controls"
-                >
-                  <label
-                    class="block text-sm text-muted-strong"
-                    for="profileModerationMuteHideThreshold"
-                    data-role="trusted-hide-control"
-                  >
-                    <span class="mb-2 block font-medium">Hide after trusted mutes</span>
-                    <input
-                      id="profileModerationMuteHideThreshold"
-                      type="number"
-                      inputmode="numeric"
-                      min="0"
-                      step="1"
-                      class="input"
-                    />
-                    <span class="mt-1 block text-xs text-muted">
-                      Hide videos when this many trusted contacts add the author to their mute list.
-                    </span>
-                  </label>
-                  <label
-                    class="block text-sm text-muted-strong"
-                    for="profileModerationSpamHideThreshold"
-                    data-role="trusted-hide-control"
-                  >
-                    <span class="mb-2 block font-medium">Hide after trusted spam reports</span>
-                    <input
-                      id="profileModerationSpamHideThreshold"
-                      type="number"
-                      inputmode="numeric"
-                      min="0"
-                      step="1"
-                      class="input"
-                    />
-                    <span class="mt-1 block text-xs text-muted">
-                      Hide videos entirely once trusted contacts report spam at or above this count.
-                    </span>
-                  </label>
-                </div>
-                <div class="flex flex-wrap items-center gap-3">
-                  <button
-                    id="profileModerationSave"
-                    type="button"
-                    class="btn focus-ring"
-                    disabled
-                  >
-                    Save moderation settings
-                  </button>
-                  <button
-                    id="profileModerationReset"
-                    type="button"
-                    class="btn-ghost focus-ring"
-                  >
-                    Restore defaults
-                  </button>
-                </div>
-                <p
-                  id="profileModerationStatus"
-                  class="text-sm text-muted"
-                  role="status"
-                  aria-live="polite"
-                ></p>
-                <div class="space-y-3 border-t border-border/60 pt-4">
-                  <div class="space-y-1">
-                    <h4 class="text-sm font-semibold text-text">Active overrides</h4>
-                    <p class="text-xs text-muted">
-                      Videos you unblocked with “Show anyway” stay listed here until reset.
-                    </p>
-                  </div>
-                  <div
-                    id="profileModerationOverridesEmpty"
-                    class="card border border-dashed border-border/60 p-4 text-center text-xs text-muted"
-                  >
-                    No moderation overrides yet.
-                  </div>
-                  <ul
-                    id="profileModerationOverridesList"
-                    class="grid-stack hidden"
-                    data-orientation="vertical"
-                  ></ul>
-                </div>
-              </div>
-
-              <div id="profileLinkPreviewSettings" class="card space-y-4 p-5">
-                <div class="space-y-2">
-                  <h3 class="text-base font-semibold text-text">Link previews</h3>
-                  <p class="text-sm text-muted">
-                    Control when bitvid fetches link preview metadata. Disable auto-fetch to review new domains before previews load.
-                  </p>
-                </div>
-                <label
-                  for="profileLinkPreviewAutoToggle"
-                  class="inline-flex items-center gap-2 text-xs font-medium text-muted-strong"
-                >
-                  <input
-                    id="profileLinkPreviewAutoToggle"
-                    type="checkbox"
-                    class="checkbox"
-                  />
-                  Auto-fetch previews from new domains
-                </label>
-              </div>
             </section>
 
             <section
@@ -1028,6 +861,189 @@
               <ul id="friendsList" class="grid-stack" data-orientation="vertical"></ul>
             </section>
 
+            <section
+              id="profilePaneSafety"
+              class="profile-pane hidden space-y-6"
+              role="tabpanel"
+              aria-labelledby="profileNavSafety"
+            >
+              <div id="profileModerationSettings" class="card space-y-5 p-5">
+                <div class="space-y-2">
+                  <h3 class="text-base font-semibold text-text">Safety</h3>
+                  <p class="text-sm text-muted">
+                    Choose how many trusted reports or mutes it takes to blur thumbnails, block autoplay previews, or hide videos entirely.
+                    Lower numbers are stricter.
+                  </p>
+                  <div class="rounded-lg border border-border bg-bg-muted p-3 text-xs text-muted">
+                    <p>
+                      Trusted counts include your first-degree follows (F1) plus seeded moderators.
+                    </p>
+                    <dl class="mt-2 grid gap-1">
+                      <div class="flex items-center justify-between gap-3">
+                        <dt>Trusted contacts</dt>
+                        <dd id="profileModerationTrustedContactsCount" class="font-semibold text-text">0</dd>
+                      </div>
+                      <div class="flex items-center justify-between gap-3">
+                        <dt>Active trusted mute contributors</dt>
+                        <dd id="profileModerationTrustedMuteCount" class="font-semibold text-text">0</dd>
+                      </div>
+                      <div class="flex items-center justify-between gap-3">
+                        <dt>Active trusted report contributors</dt>
+                        <dd id="profileModerationTrustedReportCount" class="font-semibold text-text">0</dd>
+                      </div>
+                    </dl>
+                    <p
+                      id="profileModerationSeedOnlyIndicator"
+                      class="mt-2 flex items-center gap-1 text-xs text-warning-strong"
+                      hidden
+                    >
+                      <span aria-hidden="true">●</span>
+                      <span>Seeded moderators only</span>
+                    </p>
+                  </div>
+                </div>
+                <div class="grid gap-4 sm:grid-cols-2">
+                  <label
+                    class="block text-sm text-muted-strong"
+                    for="profileModerationBlurThreshold"
+                  >
+                    <span class="mb-2 block font-medium">Blur after trusted reports</span>
+                    <input
+                      id="profileModerationBlurThreshold"
+                      type="number"
+                      inputmode="numeric"
+                      min="0"
+                      step="1"
+                      class="input"
+                    />
+                    <span class="mt-1 block text-xs text-muted">
+                      Thumbnails blur when trusted contacts report nudity at or above this count.
+                    </span>
+                  </label>
+                  <label
+                    class="block text-sm text-muted-strong"
+                    for="profileModerationAutoplayThreshold"
+                  >
+                    <span class="mb-2 block font-medium">Block autoplay after reports</span>
+                    <input
+                      id="profileModerationAutoplayThreshold"
+                      type="number"
+                      inputmode="numeric"
+                      min="0"
+                      step="1"
+                      class="input"
+                    />
+                    <span class="mt-1 block text-xs text-muted">
+                      Autoplay previews pause once trusted reports meet this threshold.
+                    </span>
+                  </label>
+                </div>
+                <div
+                  class="grid gap-4 sm:grid-cols-2"
+                  data-role="trusted-hide-controls"
+                >
+                  <label
+                    class="block text-sm text-muted-strong"
+                    for="profileModerationMuteHideThreshold"
+                    data-role="trusted-hide-control"
+                  >
+                    <span class="mb-2 block font-medium">Hide after trusted mutes</span>
+                    <input
+                      id="profileModerationMuteHideThreshold"
+                      type="number"
+                      inputmode="numeric"
+                      min="0"
+                      step="1"
+                      class="input"
+                    />
+                    <span class="mt-1 block text-xs text-muted">
+                      Hide videos when this many trusted contacts add the author to their mute list.
+                    </span>
+                  </label>
+                  <label
+                    class="block text-sm text-muted-strong"
+                    for="profileModerationSpamHideThreshold"
+                    data-role="trusted-hide-control"
+                  >
+                    <span class="mb-2 block font-medium">Hide after trusted spam reports</span>
+                    <input
+                      id="profileModerationSpamHideThreshold"
+                      type="number"
+                      inputmode="numeric"
+                      min="0"
+                      step="1"
+                      class="input"
+                    />
+                    <span class="mt-1 block text-xs text-muted">
+                      Hide videos entirely once trusted contacts report spam at or above this count.
+                    </span>
+                  </label>
+                </div>
+                <div class="flex flex-wrap items-center gap-3">
+                  <button
+                    id="profileModerationSave"
+                    type="button"
+                    class="btn focus-ring"
+                    disabled
+                  >
+                    Save moderation settings
+                  </button>
+                  <button
+                    id="profileModerationReset"
+                    type="button"
+                    class="btn-ghost focus-ring"
+                  >
+                    Restore defaults
+                  </button>
+                </div>
+                <p
+                  id="profileModerationStatus"
+                  class="text-sm text-muted"
+                  role="status"
+                  aria-live="polite"
+                ></p>
+                <div class="space-y-3 border-t border-border/60 pt-4">
+                  <div class="space-y-1">
+                    <h4 class="text-sm font-semibold text-text">Active overrides</h4>
+                    <p class="text-xs text-muted">
+                      Videos you unblocked with “Show anyway” stay listed here until reset.
+                    </p>
+                  </div>
+                  <div
+                    id="profileModerationOverridesEmpty"
+                    class="card border border-dashed border-border/60 p-4 text-center text-xs text-muted"
+                  >
+                    No moderation overrides yet.
+                  </div>
+                  <ul
+                    id="profileModerationOverridesList"
+                    class="grid-stack hidden"
+                    data-orientation="vertical"
+                  ></ul>
+                </div>
+              </div>
+
+              <div id="profileLinkPreviewSettings" class="card space-y-4 p-5">
+                <div class="space-y-2">
+                  <h3 class="text-base font-semibold text-text">Link previews</h3>
+                  <p class="text-sm text-muted">
+                    Control when bitvid fetches link preview metadata. Disable auto-fetch to review new domains before previews load.
+                  </p>
+                </div>
+                <label
+                  for="profileLinkPreviewAutoToggle"
+                  class="inline-flex items-center gap-2 text-xs font-medium text-muted-strong"
+                >
+                  <input
+                    id="profileLinkPreviewAutoToggle"
+                    type="checkbox"
+                    class="checkbox"
+                  />
+                  Auto-fetch previews from new domains
+                </label>
+              </div>
+            </section>
+
             <section
               id="profilePaneBlocked"
               class="profile-pane hidden space-y-4"
diff --git a/js/ui/profileModalController.js b/js/ui/profileModalController.js
index e5a78276..5a15e4f0 100644
--- a/js/ui/profileModalController.js
+++ b/js/ui/profileModalController.js
@@ -1225,6 +1225,7 @@ export class ProfileModalController {
       messages: null,
       history: null,
       admin: null,
+      safety: null,
     };
     this.panes = {
       account: null,
@@ -1238,6 +1239,7 @@ export class ProfileModalController {
       messages: null,
       history: null,
       admin: null,
+      safety: null,
     };
     this.relayList = null;
     this.relayInput = null;
@@ -1512,6 +1514,7 @@ export class ProfileModalController {
     this.navButtons.history =
       document.getElementById("profileNavHistory") || null;
     this.navButtons.admin = document.getElementById("profileNavAdmin") || null;
+    this.navButtons.safety = document.getElementById("profileNavSafety") || null;
 
     this.profileEditBtn = document.getElementById("profileEditBtn") || null;
     this.profileEditBackBtn = document.getElementById("profileEditBackBtn") || null;
@@ -1529,6 +1532,7 @@ export class ProfileModalController {
     this.panes.messages = document.getElementById("profilePaneMessages") || null;
     this.panes.history = document.getElementById("profilePaneHistory") || null;
     this.panes.admin = document.getElementById("profilePaneAdmin") || null;
+    this.panes.safety = document.getElementById("profilePaneSafety") || null;
 
     this.relayList = document.getElementById("relayList") || null;
     this.relayInput = document.getElementById("relayInput") || null;
@@ -6745,6 +6749,9 @@ export class ProfileModalController {
       void this.populateSubscriptionsList();
     } else if (target === "blocked") {
       this.populateBlockedList();
+    } else if (target === "safety") {
+      this.refreshModerationSettingsUi();
+      this.syncLinkPreviewSettingsUi();
     }
 
     this.callbacks.onSelectPane(target, { controller: this });