From fb07d706b1474ef15a5e4747ed3f94cbf1f87857 Mon Sep 17 00:00:00 2001
From: thePR0M3TH3AN <53631862+PR0M3TH3AN@users.noreply.github.com>
Date: Wed, 8 Oct 2025 10:07:19 -0400
Subject: [PATCH] Add visibility toggle to edit modal

---
 components/edit-video-modal.html |  55 ++++++++++
 css/style.css                    |  51 +++++++++
 js/ui/components/EditModal.js    | 171 ++++++++++++++++++++++++++++++-
 3 files changed, 276 insertions(+), 1 deletion(-)

diff --git a/components/edit-video-modal.html b/components/edit-video-modal.html
index a3541d9c..9b2d9545 100644
--- a/components/edit-video-modal.html
+++ b/components/edit-video-modal.html
@@ -199,6 +199,59 @@
             </div>
           </div>
 
+          <div class="space-y-1">
+            <span id="editVideoVisibilityLabel" class="block text-sm font-medium text-gray-200">
+              Visibility
+            </span>
+            <div
+              class="space-y-3 rounded-md border border-gray-800 bg-black/30 p-3"
+              role="group"
+              aria-labelledby="editVideoVisibilityLabel"
+              data-visibility-toggle
+            >
+              <div class="flex flex-wrap items-center gap-2 sm:justify-between">
+                <div
+                  class="video-visibility-toggle"
+                  data-visibility-options
+                >
+                  <button
+                    type="button"
+                    class="video-visibility-toggle__option"
+                    data-visibility-option="public"
+                    aria-pressed="false"
+                  >
+                    Public
+                  </button>
+                  <button
+                    type="button"
+                    class="video-visibility-toggle__option"
+                    data-visibility-option="private"
+                    aria-pressed="false"
+                  >
+                    Private
+                  </button>
+                </div>
+                <input
+                  type="checkbox"
+                  id="editVideoIsPrivate"
+                  class="hidden"
+                  data-default-checked="false"
+                  aria-hidden="true"
+                />
+              </div>
+              <p class="text-xs text-gray-400" data-visibility-helper>
+                Private notes stay visible only to you. Switch back to public when you're ready to share.
+              </p>
+              <button
+                type="button"
+                class="edit-field-button hidden"
+                data-edit-target="editVideoIsPrivate"
+              >
+                Edit field
+              </button>
+            </div>
+          </div>
+
           <div class="space-y-1">
             <label for="editEnableComments" class="block text-sm font-medium text-gray-200">
               Enable comments
@@ -211,6 +264,8 @@
                   type="checkbox"
                   id="editEnableComments"
                   class="h-5 w-5 rounded border-gray-600 bg-gray-800 text-blue-500 focus:ring-blue-500"
+                  data-default-checked="true"
+                  checked
                 />
                 <span class="text-sm text-gray-300">
                   Allow replies once comment threads are available.
diff --git a/css/style.css b/css/style.css
index 5b7818a4..9cf34828 100644
--- a/css/style.css
+++ b/css/style.css
@@ -177,6 +177,57 @@ header img {
   box-shadow: 0 0 0 0.125rem rgba(192, 132, 252, 0.65), var(--shadow-lg);
 }
 
+.video-visibility-toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  border-radius: 9999px;
+  border: 1px solid rgba(30, 41, 59, 0.7);
+  background-color: rgba(15, 23, 42, 0.55);
+  padding: 0.35rem;
+}
+
+.video-visibility-toggle__option {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 9999px;
+  border: 1px solid transparent;
+  background-color: rgba(15, 23, 42, 0.6);
+  color: rgba(203, 213, 225, 0.78);
+  font-size: 0.75rem;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  min-width: 5.5rem;
+  padding: 0.4rem 0.95rem;
+  text-transform: uppercase;
+  cursor: pointer;
+  transition: background-color 0.18s ease, color 0.18s ease,
+    border-color 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
+}
+
+.video-visibility-toggle__option:not(.is-disabled):hover {
+  background-color: rgba(148, 163, 184, 0.16);
+  color: rgba(226, 232, 240, 0.88);
+}
+
+.video-visibility-toggle__option[data-active="true"] {
+  background: linear-gradient(135deg, rgba(129, 140, 248, 0.4), rgba(192, 132, 252, 0.32));
+  color: #f8fafc;
+  border-color: rgba(129, 140, 248, 0.6);
+  box-shadow: 0 0 0 1px rgba(129, 140, 248, 0.4) inset,
+    0 6px 14px -6px rgba(129, 140, 248, 0.55);
+}
+
+.video-visibility-toggle__option.is-disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
+.video-visibility-toggle__option.is-disabled[data-active="true"] {
+  opacity: 0.65;
+}
+
 .video-card[data-owner-is-viewer="false"][data-url-health-state="offline"][data-stream-health-state="unhealthy"] {
   display: none;
 }
diff --git a/js/ui/components/EditModal.js b/js/ui/components/EditModal.js
index 069d695f..73e8eec8 100644
--- a/js/ui/components/EditModal.js
+++ b/js/ui/components/EditModal.js
@@ -48,6 +48,10 @@ export class EditModal {
     this.submitButton = null;
     this.fieldButtons = [];
     this.fields = {};
+    this.visibility = {
+      container: null,
+      buttons: [],
+    };
 
     this.activeVideo = null;
     this.isVisible = false;
@@ -126,8 +130,22 @@ export class EditModal {
       xs: context.querySelector("#editVideoXs") || null,
       thumbnail: context.querySelector("#editVideoThumbnail") || null,
       description: context.querySelector("#editVideoDescription") || null,
+      isPrivate: context.querySelector("#editVideoIsPrivate") || null,
       enableComments: context.querySelector("#editEnableComments") || null,
     };
+
+    this.visibility = {
+      container: context.querySelector("[data-visibility-toggle]") || null,
+      buttons: Array.from(
+        context.querySelectorAll("[data-visibility-option]") || []
+      ),
+      helper: context.querySelector("[data-visibility-helper]") || null,
+      helperDefault: "",
+    };
+
+    if (this.visibility.helper) {
+      this.visibility.helperDefault = this.visibility.helper.textContent || "";
+    }
   }
 
   bindEvents() {
@@ -163,6 +181,24 @@ export class EditModal {
       });
     }
 
+    if (Array.isArray(this.visibility?.buttons)) {
+      this.visibility.buttons.forEach((button) => {
+        button.addEventListener("click", (event) => {
+          const option = event?.currentTarget?.dataset?.visibilityOption;
+          if (!option) {
+            return;
+          }
+          this.setVisibility(option);
+        });
+      });
+    }
+
+    if (this.fields.isPrivate) {
+      this.fields.isPrivate.addEventListener("change", () => {
+        this.handleIsPrivateChange({ emit: true });
+      });
+    }
+
     if (this.fields.enableComments) {
       this.fields.enableComments.addEventListener("change", (event) => {
         const target = event.currentTarget;
@@ -189,7 +225,14 @@ export class EditModal {
         return;
       }
       if (input.type === "checkbox") {
-        input.checked = true;
+        const defaultAttr = input.dataset?.defaultChecked;
+        const defaultChecked =
+          defaultAttr === "true"
+            ? true
+            : defaultAttr === "false"
+            ? false
+            : input.defaultChecked;
+        input.checked = defaultChecked;
         input.disabled = false;
       } else {
         input.value = "";
@@ -207,6 +250,8 @@ export class EditModal {
       });
     }
 
+    this.handleIsPrivateChange({ emit: false });
+
     this.activeVideo = null;
   }
 
@@ -225,12 +270,14 @@ export class EditModal {
     const effectiveXs = video.xs || magnetHints.xs || "";
     const enableCommentsValue =
       typeof video.enableComments === "boolean" ? video.enableComments : true;
+    const isPrivateValue = video.isPrivate === true;
 
     const editContext = {
       ...video,
       ws: effectiveWs,
       xs: effectiveXs,
       enableComments: enableCommentsValue,
+      isPrivate: isPrivateValue,
     };
 
     this.applyVideoToForm(editContext);
@@ -258,6 +305,7 @@ export class EditModal {
       xs: editContext.xs || "",
       thumbnail: editContext.thumbnail || "",
       description: editContext.description || "",
+      isPrivate: editContext.isPrivate,
       enableComments: editContext.enableComments,
     };
 
@@ -327,6 +375,8 @@ export class EditModal {
         }
       }
     });
+
+    this.handleIsPrivateChange({ emit: false });
   }
 
   fieldIdForKey(key) {
@@ -345,6 +395,8 @@ export class EditModal {
         return "editVideoThumbnail";
       case "description":
         return "editVideoDescription";
+      case "isPrivate":
+        return "editVideoIsPrivate";
       case "enableComments":
         return "editEnableComments";
       default:
@@ -408,6 +460,9 @@ export class EditModal {
           }
         }
       }
+      if (input === this.fields.isPrivate) {
+        this.updateVisibilityToggleUI();
+      }
       return;
     }
 
@@ -418,6 +473,9 @@ export class EditModal {
       input.disabled = true;
       button.dataset.mode = "locked";
       button.textContent = "Edit field";
+      if (input === this.fields.isPrivate) {
+        this.updateVisibilityToggleUI();
+      }
       return;
     }
 
@@ -437,6 +495,105 @@ export class EditModal {
     }
   }
 
+  setVisibility(option, { emit = true } = {}) {
+    const checkbox = this.fields.isPrivate;
+    if (!checkbox) {
+      return;
+    }
+
+    const normalized = typeof option === "string" ? option.toLowerCase() : "";
+    if (normalized !== "public" && normalized !== "private") {
+      return;
+    }
+
+    if (checkbox.disabled) {
+      this.updateVisibilityToggleUI();
+      return;
+    }
+
+    const wantPrivate = normalized === "private";
+    if (checkbox.checked === wantPrivate) {
+      this.updateVisibilityToggleUI();
+      return;
+    }
+
+    checkbox.checked = wantPrivate;
+    this.handleIsPrivateChange({ emit });
+  }
+
+  updateVisibilityToggleUI() {
+    const checkbox = this.fields.isPrivate;
+    const buttons = Array.isArray(this.visibility?.buttons)
+      ? this.visibility.buttons
+      : [];
+    if (!checkbox) {
+      return;
+    }
+
+    const isPrivate = checkbox.checked === true;
+    const disabled = checkbox.disabled === true;
+
+    buttons.forEach((button) => {
+      if (!button) {
+        return;
+      }
+      const option = button.dataset?.visibilityOption || "";
+      const normalized = option.toLowerCase();
+      const isActive =
+        (normalized === "private" && isPrivate) ||
+        (normalized === "public" && !isPrivate);
+      button.dataset.active = isActive ? "true" : "false";
+      button.setAttribute("aria-pressed", isActive ? "true" : "false");
+      if (disabled) {
+        button.classList.add("is-disabled");
+        button.setAttribute("aria-disabled", "true");
+        button.tabIndex = -1;
+      } else {
+        button.classList.remove("is-disabled");
+        button.removeAttribute("aria-disabled");
+        button.tabIndex = 0;
+      }
+    });
+
+    if (this.visibility?.container) {
+      this.visibility.container.dataset.state = isPrivate ? "private" : "public";
+      if (disabled) {
+        this.visibility.container.dataset.disabled = "true";
+      } else {
+        delete this.visibility.container.dataset.disabled;
+      }
+    }
+
+    const helper = this.visibility?.helper;
+    if (helper) {
+      const privateCopy = this.visibility.helperDefault || helper.textContent;
+      const publicCopy =
+        "Public notes appear in feeds for everyone who can view your channel.";
+      helper.textContent = isPrivate ? privateCopy : publicCopy;
+    }
+  }
+
+  handleIsPrivateChange({ emit = true } = {}) {
+    const checkbox = this.fields.isPrivate;
+    if (!checkbox) {
+      return;
+    }
+
+    this.updateVisibilityToggleUI();
+
+    if (!emit) {
+      return;
+    }
+
+    const value = this.sanitizers.checkbox(checkbox.checked);
+    const detail = {
+      field: "isPrivate",
+      value,
+      videoId: this.escapeHtml(this.activeVideo?.id || ""),
+    };
+    this.emit("video:edit-visibility-change", detail);
+  }
+
   submit() {
     if (!this.activeVideo || !this.root) {
       this.showError("No video selected for editing.");
@@ -467,6 +624,7 @@ export class EditModal {
     const thumbnailInput = this.fields.thumbnail;
     const descriptionInput = this.fields.description;
     const commentsInput = this.fields.enableComments;
+    const privateInput = this.fields.isPrivate;
 
     const newTitle = fieldValue("title");
     const newUrl = fieldValue("url");
@@ -497,6 +655,7 @@ export class EditModal {
       : original.description || "";
     const originalEnableComments =
       typeof original.enableComments === "boolean" ? original.enableComments : true;
+    const originalIsPrivate = original.isPrivate === true;
 
     let finalEnableComments = originalEnableComments;
     if (commentsInput) {
@@ -507,6 +666,15 @@ export class EditModal {
       }
     }
 
+    let finalIsPrivate = originalIsPrivate;
+    if (privateInput) {
+      if (privateInput.disabled) {
+        finalIsPrivate = privateInput.dataset.originalValue === "true";
+      } else {
+        finalIsPrivate = this.sanitizers.checkbox(privateInput.checked);
+      }
+    }
+
     if (!finalTitle || (!finalUrl && !finalMagnet)) {
       this.showError("Title and at least one of URL or Magnet is required.");
       return;
@@ -546,6 +714,7 @@ export class EditModal {
       urlEdited: urlWasEdited,
       magnetEdited: magnetWasEdited,
       enableComments: finalEnableComments,
+      isPrivate: finalIsPrivate,
     };
 
     const originalEvent = {