From f5a1b6471beb22c853ddbdb087bde06933790a00 Mon Sep 17 00:00:00 2001
From: Keep Creating Online <53631862+PR0M3TH3AN@users.noreply.github.com>
Date: Sat, 1 Feb 2025 14:01:48 -0500
Subject: [PATCH 1/5] added login menu for further login options in the future

---
 src/components/application-form.html | 105 +++++++++++++++++++++++++++
 src/components/login-modal.html      |  67 +++++++++++++++++
 src/components/profile-modal.html    |  21 +++++-
 src/components/upload-modal.html     |  21 +++++-
 src/css/Responses for bi....xlsx     | Bin 0 -> 15795 bytes
 src/css/style.css                    |  11 ++-
 src/index.html                       |  95 +++++++++++++-----------
 src/js/app.js                        | 102 ++++++++++++++++++--------
 whitelistform.txt                    |   1 +
 9 files changed, 343 insertions(+), 80 deletions(-)
 create mode 100644 src/components/application-form.html
 create mode 100644 src/components/login-modal.html
 create mode 100644 src/css/Responses for bi....xlsx
 create mode 100644 whitelistform.txt
diff --git a/src/components/application-form.html b/src/components/application-form.html
new file mode 100644
index 0000000..79e69bf
--- /dev/null
+++ b/src/components/application-form.html
@@ -0,0 +1,105 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Application Form</title>
+    <!-- Include Tailwind CSS -->
+    <link href="css/tailwind.min.css" rel="stylesheet" />
+  </head>
+  <body class="bg-gray-900 text-gray-100">
+    <!-- Button to open the modal -->
+    <div class="p-4">
+      <button
+        id="openNostrForm"
+        class="bg-blue-500 px-4 py-2 rounded hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500"
+      >
+        Open Nostr Form
+      </button>
+    </div>
+
+    <!-- Modal Container -->
+    <div
+      id="nostrFormModal"
+      class="fixed inset-0 z-50 hidden"
+      style="background: transparent"
+    >
+      <!-- Overlay Layer with dark background and blur -->
+      <div
+        class="absolute inset-0 z-10"
+        style="
+          background-color: rgba(0, 0, 0, 0.9);
+          backdrop-filter: blur(10px);
+          -webkit-backdrop-filter: blur(10px);
+        "
+      ></div>
+
+      <!-- Modal Container -->
+      <div
+        class="relative modal-container h-full w-full flex items-center justify-center overflow-y-auto z-20"
+      >
+        <div
+          class="modal-content bg-gray-900 w-full max-w-lg md:max-w-2xl my-0 rounded-lg overflow-hidden relative max-h-[90vh]"
+        >
+          <!-- Top Bar -->
+          <div
+            class="sticky top-0 bg-gradient-to-b from-black/80 to-transparent transition-transform duration-300 p-4 flex items-center justify-between"
+          >
+            <h2 class="text-xl font-bold text-white">My Nostr Form</h2>
+            <button
+              id="closeNostrFormModal"
+              class="flex items-center justify-center w-10 h-10 rounded-full bg-black/50 hover:bg-black/70 transition-all duration-200 backdrop-blur focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-black focus:ring-blue-500"
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                class="w-6 h-6 text-gray-300"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  d="M6 18L18 6M6 6l12 12"
+                />
+              </svg>
+            </button>
+          </div>
+
+          <!-- Modal Content -->
+          <div class="p-6">
+            <div class="flex justify-center">
+              <iframe
+                src="https://formstr.app/#/f/naddr1qvzqqqr4mqpzphm2csv2s3ehude2dc0yd0t06psy6kkek0gcpddputetum4yfxnsqythwumn8ghj7un9d3shjtnwdaehgu3wvfskuep0qqsky6t5we5kggzhdp5hgetvd9ehggzpwpcxc6trv96xjmmwyprx7und8lh48n"
+                height="700px"
+                width="480px"
+                frameborder="0"
+                style="
+                  border-style: none;
+                  box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, 0.2);
+                "
+                cellspacing="0"
+              ></iframe>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Script to toggle modal -->
+    <script>
+      const openBtn = document.getElementById("openNostrForm");
+      const modal = document.getElementById("nostrFormModal");
+      const closeBtn = document.getElementById("closeNostrFormModal");
+
+      openBtn.addEventListener("click", () => {
+        modal.classList.remove("hidden");
+      });
+
+      closeBtn.addEventListener("click", () => {
+        modal.classList.add("hidden");
+      });
+    </script>
+  </body>
+</html>
diff --git a/src/components/login-modal.html b/src/components/login-modal.html
new file mode 100644
index 0000000..e179da8
--- /dev/null
+++ b/src/components/login-modal.html
@@ -0,0 +1,67 @@
+<div
+  id="loginModal"
+  class="fixed inset-0 z-50 hidden"
+  style="background: transparent"
+>
+  <!-- Dark overlay -->
+  <div
+    class="absolute inset-0 z-10"
+    style="
+      background-color: rgba(0, 0, 0, 0.9);
+      backdrop-filter: blur(10px);
+      -webkit-backdrop-filter: blur(10px);
+    "
+  ></div>
+
+  <!-- Modal container -->
+  <div
+    class="relative modal-container h-full w-full flex items-center justify-center overflow-y-auto z-20"
+  >
+    <div
+      class="modal-content bg-gray-900 w-full max-w-md my-0 rounded-lg overflow-hidden relative max-h-[90vh]"
+    >
+      <!-- Header -->
+      <div
+        class="sticky top-0 bg-gradient-to-b from-black/80 to-transparent p-4 flex items-center justify-between"
+      >
+        <h2 class="text-xl font-bold text-white">Login Options</h2>
+        <button
+          id="closeLoginModal"
+          class="flex items-center justify-center w-10 h-10 rounded-full bg-black/50 hover:bg-black/70 transition-all duration-200 backdrop-blur focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-black focus:ring-blue-500"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            class="w-6 h-6 text-gray-300"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M6 18L18 6M6 6l12 12"
+            />
+          </svg>
+        </button>
+      </div>
+
+      <!-- Body with login buttons -->
+      <div class="p-6 space-y-4">
+        <button
+          id="loginNIP07"
+          class="w-full bg-blue-500 text-white px-4 py-2 rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
+        >
+          Login with Extension (NIP-07)
+        </button>
+        <button
+          id="loginNSEC"
+          class="w-full bg-gray-500 text-white px-4 py-2 rounded-md cursor-not-allowed"
+          disabled
+        >
+          Login with NSEC (Coming Soon)
+        </button>
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/src/components/profile-modal.html b/src/components/profile-modal.html
index 6b3e2ee..c626888 100644
--- a/src/components/profile-modal.html
+++ b/src/components/profile-modal.html
@@ -1,10 +1,25 @@
 <!-- components/profile-modal.html -->
-<div id="profileModal" class="fixed inset-0 bg-black/90 z-50 hidden">
+<div
+  id="profileModal"
+  class="fixed inset-0 z-50 hidden"
+  style="background: transparent"
+>
+  <!-- Overlay Layer with dark background and blur -->
   <div
-    class="modal-container h-full w-full flex items-start justify-center overflow-y-auto"
+    class="absolute inset-0 z-10"
+    style="
+      background-color: rgba(0, 0, 0, 0.9);
+      backdrop-filter: blur(10px);
+      -webkit-backdrop-filter: blur(10px);
+    "
+  ></div>
+
+  <!-- Modal Container -->
+  <div
+    class="relative modal-container h-full w-full flex items-start md:items-center justify-center overflow-y-auto z-20"
   >
     <div
-      class="modal-content bg-gray-900 w-full max-w-sm my-8 rounded-lg overflow-hidden relative flex flex-col"
+      class="modal-content bg-gray-900 w-full max-w-sm md:max-w-md my-0 rounded-lg overflow-hidden relative flex flex-col max-h-[90vh]"
     >
       <!-- Modal Header -->
       <div
diff --git a/src/components/upload-modal.html b/src/components/upload-modal.html
index 4ce577c..c467d70 100644
--- a/src/components/upload-modal.html
+++ b/src/components/upload-modal.html
@@ -1,10 +1,25 @@
 <!-- components/upload-modal.html -->
-<div id="uploadModal" class="fixed inset-0 bg-black/90 z-50 hidden">
+<div
+  id="uploadModal"
+  class="fixed inset-0 z-50 hidden"
+  style="background: transparent"
+>
+  <!-- Overlay Layer with dark background and blur -->
   <div
-    class="modal-container h-full w-full flex items-start justify-center overflow-y-auto"
+    class="absolute inset-0 z-10"
+    style="
+      background-color: rgba(0, 0, 0, 0.9);
+      backdrop-filter: blur(10px);
+      -webkit-backdrop-filter: blur(10px);
+    "
+  ></div>
+
+  <!-- Modal Container -->
+  <div
+    class="relative modal-container h-full w-full flex items-start md:items-center justify-center overflow-y-auto z-20"
   >
     <div
-      class="modal-content bg-gray-900 w-full max-w-lg my-8 rounded-lg overflow-hidden relative"
+      class="modal-content bg-gray-900 w-full max-w-lg md:max-w-2xl my-0 rounded-lg overflow-hidden relative max-h-[90vh]"
     >
       <!-- Top Bar (similar to video-modal) -->
       <div
diff --git a/src/css/Responses for bi....xlsx b/src/css/Responses for bi....xlsx
new file mode 100644
index 0000000000000000000000000000000000000000..0ef02b326e2201fc8d355b74e6470728a86bf764
GIT binary patch
literal 15795
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

literal 0
HcmV?d00001

diff --git a/src/css/style.css b/src/css/style.css
index a54a046..afa65a4 100644
--- a/src/css/style.css
+++ b/src/css/style.css
@@ -89,12 +89,21 @@ header img {
 #playerModal {
   position: fixed;
   inset: 0;
-  background-color: rgb(0 0 0 / 0.9);
+  background-color: rgb(0 0 0 / 0.9); /* You can adjust opacity if needed */
   z-index: 50;
   display: none; /* Hidden by default */
   flex-direction: column;
   overflow-y: auto;
   overscroll-behavior: contain;
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px); /* For Safari support */
+}
+
+#nostrFormModal,
+#profileModal,
+#uploadModal {
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px); /* For Safari */
 }
 
 /* If you ever want to show it, add ".flex" class dynamically */
diff --git a/src/index.html b/src/index.html
index 5a4c67c..9d81fb3 100644
--- a/src/index.html
+++ b/src/index.html
@@ -38,7 +38,6 @@
     <link href="css/tailwind.min.css" rel="stylesheet" />
     <link href="css/style.css" rel="stylesheet" />
   </head>
-
   <body class="bg-gray-100">
     <div
       id="app"
@@ -59,26 +58,26 @@
           <button
             id="loginButton"
             style="background-color: #fe0032"
-            class="inline-flex items-center justify-center w-12 h-12 rounded-full text-white text-sm font-bold leading-none whitespace-nowrap appearance-none hover:bg-[#e6002c] focus:outline-none focus:ring-2 focus:ring-black focus:ring-offset-2"
+            class="inline-flex items-center justify-center w-12 h-12 rounded-full text-white text-sm font-bold leading-none hover:bg-[#e6002c] focus:outline-none focus:ring-2 focus:ring-black focus:ring-offset-2"
           >
-            NIP-07
+            login
           </button>
 
-          <!-- Upload (Add Video) Button -->
+          <!-- Upload Button (hidden by default) -->
           <button
             id="uploadButton"
             style="background-color: #fe0032"
-            class="inline-flex items-center justify-center w-12 h-12 rounded-full text-white text-xl font-bold leading-none whitespace-nowrap appearance-none hover:bg-[#e6002c] focus:outline-none focus:ring-2 focus:ring-black focus:ring-offset-2 hidden"
+            class="hidden inline-flex items-center justify-center w-12 h-12 rounded-full text-white text-xl font-bold leading-none hover:bg-[#e6002c] focus:outline-none focus:ring-2 focus:ring-black focus:ring-offset-2"
           >
             +
           </button>
 
-          <!-- Profile Button -->
+          <!-- Profile Button (hidden by default) -->
           <button
             id="profileButton"
-            class="inline-flex items-center justify-center w-12 h-12 rounded-full bg-black text-white text-sm leading-none hover:bg-neutral-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-black hidden"
+            class="hidden inline-flex items-center justify-center w-12 h-12 rounded-full bg-black text-white text-sm leading-none hover:bg-neutral-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-black"
           >
-            <!-- Ensures a border around the smaller avatar -->
+            <!-- This inner DIV is just an avatar container, if you like -->
             <div class="w-10 h-10 rounded-full overflow-hidden">
               <img
                 id="profileAvatar"
@@ -95,24 +94,17 @@
       <div
         id="errorContainer"
         class="hidden bg-red-100 text-red-900 p-4 rounded-md mb-4"
-      >
-        <!-- Error messages will appear here -->
-      </div>
-
+      ></div>
       <!-- Success Container -->
       <div
         id="successContainer"
         class="hidden bg-green-100 text-green-900 p-4 rounded-md mb-4"
-      >
-        <!-- Success messages will appear here -->
-      </div>
+      ></div>
 
-      <!-- Main container for dynamic views -->
-      <main id="viewContainer" class="flex-grow mb-8">
-        <!-- We'll load "most-recent-videos.html" or other views here -->
-      </main>
+      <!-- Main container for dynamic views (most-recent-videos.html, etc.) -->
+      <main id="viewContainer" class="flex-grow mb-8"></main>
 
-      <!-- Imported Video Player Modal (goes into modalContainer) -->
+      <!-- Modal Container (external modals will be injected here) -->
       <div id="modalContainer"></div>
 
       <!-- Tagline / Slogan -->
@@ -122,7 +114,7 @@
         </h2>
       </div>
 
-      <!-- Disclaimer Modal -->
+      <!-- Disclaimer Modal (inline markup; adjust as needed) -->
       <div id="disclaimerModal" class="hidden">
         <div class="modal-content">
           <div class="modal-scroll">
@@ -133,11 +125,9 @@
                 class="h-16"
               />
             </div>
-
             <h2 class="text-2xl font-bold mb-4 text-center text-white">
               Welcome to bitvid
             </h2>
-
             <!-- Warning Alert -->
             <div
               class="bg-yellow-900/20 border border-yellow-700/50 rounded-lg p-4 mb-6 flex items-start"
@@ -163,14 +153,12 @@
                 load initially.
               </p>
             </div>
-
             <div class="space-y-6 text-gray-300">
               <p>
                 bitvid is a decentralized video platform where content is shared
                 directly between users. We want you to understand a few
                 important points before you continue:
               </p>
-
               <div class="space-y-4">
                 <div class="bg-gray-800 rounded-lg p-4">
                   <h3 class="text-white font-semibold mb-2">
@@ -183,7 +171,6 @@
                     maintain quality content during our early stages.
                   </p>
                 </div>
-
                 <div class="bg-gray-800 rounded-lg p-4">
                   <h3 class="text-white font-semibold mb-2">
                     Content Responsibility & Moderation
@@ -195,7 +182,6 @@
                     content must follow local laws and platform guidelines.
                   </p>
                 </div>
-
                 <div class="bg-gray-800 rounded-lg p-4">
                   <h3 class="text-white font-semibold mb-2">Platform Status</h3>
                   <p class="text-gray-400">
@@ -204,7 +190,6 @@
                     patience help us build a better platform.
                   </p>
                 </div>
-
                 <div class="bg-gray-800 rounded-lg p-4">
                   <h3 class="text-white font-semibold mb-2">Get Involved</h3>
                   <p class="text-gray-400">
@@ -216,7 +201,6 @@
               </div>
             </div>
           </div>
-
           <div class="button-container">
             <button
               id="acceptDisclaimer"
@@ -339,20 +323,45 @@
           </a>
         </p>
       </footer>
-
-      <!-- Scripts -->
-      <script src="js/libs/nostr.bundle.js"></script>
-      <script type="module" src="js/config.js"></script>
-      <script type="module" src="js/lists.js"></script>
-      <script type="module" src="js/accessControl.js"></script>
-      <script type="module" src="js/webtorrent.js"></script>
-      <script type="module" src="js/nostr.js"></script>
-
-      <!-- Optional: a separate manager for view loading -->
-      <script type="module" src="js/viewManager.js"></script>
-
-      <!-- Main app script -->
-      <script type="module" src="js/app.js"></script>
     </div>
+
+    <!-- Load external modal components -->
+    <script>
+      async function loadModal(url) {
+        try {
+          const response = await fetch(url);
+          if (!response.ok) {
+            throw new Error("Failed to load " + url);
+          }
+          const html = await response.text();
+          document
+            .getElementById("modalContainer")
+            .insertAdjacentHTML("beforeend", html);
+          console.log(url, "loaded");
+        } catch (err) {
+          console.error(err);
+        }
+      }
+
+      // Just load the login modal (or any others), without adding event listeners here.
+      // The logic to open/close the modal is all in app.js now.
+      Promise.all([
+        loadModal("components/login-modal.html"),
+        // e.g. loadModal("components/upload-modal.html"),
+        // loadModal("components/profile-modal.html"),
+      ]).then(() => {
+        console.log("Modals loaded (login-modal.html, etc.)");
+      });
+    </script>
+
+    <!-- Scripts -->
+    <script src="js/libs/nostr.bundle.js"></script>
+    <script type="module" src="js/config.js"></script>
+    <script type="module" src="js/lists.js"></script>
+    <script type="module" src="js/accessControl.js"></script>
+    <script type="module" src="js/webtorrent.js"></script>
+    <script type="module" src="js/nostr.js"></script>
+    <script type="module" src="js/viewManager.js"></script>
+    <script type="module" src="js/app.js"></script>
   </body>
 </html>
diff --git a/src/js/app.js b/src/js/app.js
index d3f088b..8dd4f2b 100644
--- a/src/js/app.js
+++ b/src/js/app.js
@@ -70,17 +70,18 @@ class bitvidApp {
 
     // Auth state
     this.pubkey = null;
-    // Currently playing magnet
     this.currentMagnetUri = null;
-    // The active video object
     this.currentVideo = null;
-    // Subscription reference (for unsubscribing)
     this.videoSubscription = null;
 
     // Videos stored as a Map (key=event.id)
     this.videosMap = new Map();
     // Simple cache for user profiles
     this.profileCache = new Map();
+
+    // NEW: reference to the login modal's close button
+    this.closeLoginModalBtn =
+      document.getElementById("closeLoginModal") || null;
   }
 
   async init() {
@@ -107,7 +108,7 @@ class bitvidApp {
       this.setupEventListeners();
       disclaimerModal.show();
 
-      // 6. Load the default view
+      // 6. Load the default view (most-recent-videos.html)
       await loadView("views/most-recent-videos.html");
 
       // 7. Once loaded, get a reference to #videoList
@@ -119,8 +120,7 @@ class bitvidApp {
       // 9. Check URL ?v= param
       this.checkUrlParams();
 
-      // (Recommended) Keep an array of active interval IDs
-      // so we can clear them when the modal closes:
+      // Keep an array of active interval IDs so we can clear them on modal close
       this.activeIntervals = [];
     } catch (error) {
       console.error("Init failed:", error);
@@ -143,9 +143,13 @@ class bitvidApp {
       if (!modalContainer) {
         throw new Error("Modal container element not found!");
       }
-      modalContainer.innerHTML = html;
 
-      // Confirm we have a close button, etc.
+      // Instead of overwriting, we append a new DIV with the fetched HTML
+      const wrapper = document.createElement("div");
+      wrapper.innerHTML = html; // set the markup
+      modalContainer.appendChild(wrapper); // append the markup
+
+      // Now we can safely find elements inside:
       const closeButton = document.getElementById("closeModal");
       if (!closeButton) {
         throw new Error("Close button not found in video-modal!");
@@ -353,29 +357,17 @@ class bitvidApp {
   }
 
   /**
-   * Setup general event listeners for login, logout, modals, etc.
+   * Setup general event listeners for logout, modals, etc.
    */
   setupEventListeners() {
-    // Login
-    if (this.loginButton) {
-      this.loginButton.addEventListener("click", async () => {
-        try {
-          const pubkey = await nostrClient.login();
-          this.login(pubkey, true);
-        } catch (err) {
-          this.showError("Failed to login. Please try again.");
-        }
-      });
-    }
-
-    // Logout
+    // 1) Logout button
     if (this.logoutButton) {
       this.logoutButton.addEventListener("click", () => {
         this.logout();
       });
     }
 
-    // Profile button (if used)
+    // 2) Profile button
     if (this.profileButton) {
       this.profileButton.addEventListener("click", () => {
         if (this.profileModal) {
@@ -384,7 +376,7 @@ class bitvidApp {
       });
     }
 
-    // Upload button => show upload modal
+    // 3) Upload button => show upload modal
     if (this.uploadButton) {
       this.uploadButton.addEventListener("click", () => {
         if (this.uploadModal) {
@@ -393,12 +385,58 @@ class bitvidApp {
       });
     }
 
-    // Cleanup on page unload
+    // 4) Login button => show the login modal
+    if (this.loginButton) {
+      this.loginButton.addEventListener("click", () => {
+        console.log("Login button clicked!");
+        const loginModal = document.getElementById("loginModal");
+        if (loginModal) {
+          loginModal.classList.remove("hidden");
+        }
+      });
+    }
+
+    // 5) Close login modal button => hide modal
+    if (this.closeLoginModalBtn) {
+      this.closeLoginModalBtn.addEventListener("click", () => {
+        console.log("[app.js] closeLoginModal button clicked!");
+        const loginModal = document.getElementById("loginModal");
+        if (loginModal) {
+          loginModal.classList.add("hidden");
+        }
+      });
+    }
+
+    // 6) NIP-07 button inside the login modal => call the extension & login
+    const nip07Button = document.getElementById("loginNIP07");
+    if (nip07Button) {
+      nip07Button.addEventListener("click", async () => {
+        console.log(
+          "[app.js] loginNIP07 clicked! Attempting extension login..."
+        );
+        try {
+          const pubkey = await nostrClient.login(); // call the extension
+          console.log("[NIP-07] login returned pubkey:", pubkey);
+          this.login(pubkey, true);
+
+          // Hide the login modal
+          const loginModal = document.getElementById("loginModal");
+          if (loginModal) {
+            loginModal.classList.add("hidden");
+          }
+        } catch (err) {
+          console.error("[NIP-07 login error]", err);
+          this.showError("Failed to login with NIP-07. Please try again.");
+        }
+      });
+    }
+
+    // 7) Cleanup on page unload
     window.addEventListener("beforeunload", async () => {
       await this.cleanup();
     });
 
-    // Handle back/forward navigation => hide video modal
+    // 8) Handle back/forward nav => hide video modal
     window.addEventListener("popstate", async () => {
       console.log("[popstate] user navigated back/forward; cleaning modal...");
       await this.hideModal();
@@ -496,13 +534,16 @@ class bitvidApp {
    * Called upon successful login.
    */
   login(pubkey, saveToStorage = true) {
+    console.log("[app.js] login() called with pubkey =", pubkey);
+
     this.pubkey = pubkey;
 
-    // Hide login button if present
+    // Hide the login button if present
     if (this.loginButton) {
       this.loginButton.classList.add("hidden");
     }
-    // We can hide logout or userStatus if we want (or they might not exist)
+
+    // Hide logout / userStatus if you’re not using them
     if (this.logoutButton) {
       this.logoutButton.classList.add("hidden");
     }
@@ -510,7 +551,7 @@ class bitvidApp {
       this.userStatus.classList.add("hidden");
     }
 
-    // Show the upload button, profile button, etc.
+    // IMPORTANT: Unhide the Upload & Profile buttons
     if (this.uploadButton) {
       this.uploadButton.classList.remove("hidden");
     }
@@ -518,9 +559,10 @@ class bitvidApp {
       this.profileButton.classList.remove("hidden");
     }
 
-    // If you want to fetch your own profile to update UI
+    // Optionally load the user's own profile
     this.loadOwnProfile(pubkey);
 
+    // Save pubkey in localStorage (if desired)
     if (saveToStorage) {
       localStorage.setItem("userPubKey", pubkey);
     }
diff --git a/whitelistform.txt b/whitelistform.txt
new file mode 100644
index 0000000..a469d43
--- /dev/null
+++ b/whitelistform.txt
@@ -0,0 +1 @@
+<iframe src="https://formstr.app/#/f/naddr1qvzqqqr4mqpzpkha64cj06g8sk2hqgq0yn4gqalgxxsta7x8lmvy8jr7pqfm5l9yqy2hwumn8ghj7un9d3shjtnyv9kh2uewd9hj7qppvf5hganfvss9w6rfw3jkc6tnwssyzursd35kxct5d9hkugzxdaex6udmmth" height="700px" width="480px" frameborder="0" style="border-style:none;box-shadow:0px 0px 2px 2px rgba(0,0,0,0.2);" cellspacing="0" ></iframe>
\ No newline at end of file

From c0b2388b0ca2e3d9c9b0c319f39a906b5759bc7d Mon Sep 17 00:00:00 2001
From: Keep Creating Online <53631862+PR0M3TH3AN@users.noreply.github.com>
Date: Sat, 1 Feb 2025 18:41:55 -0500
Subject: [PATCH 2/5] added revert video function and delete all previous
 version functions and added better fetching for profile images and names

---
 src/js/app.js   | 349 +++++++++++++++++++++++++++++++++---------------
 src/js/nostr.js | 219 +++++++++++++++++++-----------
 2 files changed, 377 insertions(+), 191 deletions(-)

diff --git a/src/js/app.js b/src/js/app.js
index 8dd4f2b..9821278 100644
--- a/src/js/app.js
+++ b/src/js/app.js
@@ -84,6 +84,19 @@ class bitvidApp {
       document.getElementById("closeLoginModal") || null;
   }
 
+  forceRefreshAllProfiles() {
+    // 1) Grab the newest set of videos from nostrClient
+    const activeVideos = nostrClient.getActiveVideos();
+
+    // 2) Build a unique set of pubkeys
+    const uniqueAuthors = new Set(activeVideos.map((v) => v.pubkey));
+
+    // 3) For each author, fetchAndRenderProfile with forceRefresh = true
+    for (const authorPubkey of uniqueAuthors) {
+      this.fetchAndRenderProfile(authorPubkey, true);
+    }
+  }
+
   async init() {
     try {
       // 1. Initialize the video modal (components/video-modal.html)
@@ -521,7 +534,7 @@ class bitvidApp {
         this.uploadModal.classList.add("hidden");
       }
 
-      // Refresh the video list
+      // *** Refresh to show the newly uploaded video in the grid ***
       await this.loadVideos();
       this.showSuccess("Video shared successfully!");
     } catch (err) {
@@ -533,17 +546,16 @@ class bitvidApp {
   /**
    * Called upon successful login.
    */
-  login(pubkey, saveToStorage = true) {
+  async login(pubkey, saveToStorage = true) {
     console.log("[app.js] login() called with pubkey =", pubkey);
 
     this.pubkey = pubkey;
 
-    // Hide the login button if present
+    // Hide login button if present
     if (this.loginButton) {
       this.loginButton.classList.add("hidden");
     }
-
-    // Hide logout / userStatus if you’re not using them
+    // Optionally hide logout or userStatus
     if (this.logoutButton) {
       this.logoutButton.classList.add("hidden");
     }
@@ -551,7 +563,7 @@ class bitvidApp {
       this.userStatus.classList.add("hidden");
     }
 
-    // IMPORTANT: Unhide the Upload & Profile buttons
+    // Show the upload button, profile button, etc.
     if (this.uploadButton) {
       this.uploadButton.classList.remove("hidden");
     }
@@ -559,25 +571,33 @@ class bitvidApp {
       this.profileButton.classList.remove("hidden");
     }
 
-    // Optionally load the user's own profile
+    // (Optional) load the user's own Nostr profile
     this.loadOwnProfile(pubkey);
 
-    // Save pubkey in localStorage (if desired)
+    // Save pubkey locally if requested
     if (saveToStorage) {
       localStorage.setItem("userPubKey", pubkey);
     }
+
+    // Refresh the video list so the user sees any private videos, etc.
+    await this.loadVideos();
+
+    // Force a fresh fetch of all profile pictures/names
+    this.forceRefreshAllProfiles();
   }
 
   /**
    * Logout logic
    */
-  logout() {
+  async logout() {
     nostrClient.logout();
     this.pubkey = null;
-    // Show login again (if it exists)
+
+    // Show the login button again
     if (this.loginButton) {
       this.loginButton.classList.remove("hidden");
     }
+
     // Hide logout or userStatus
     if (this.logoutButton) {
       this.logoutButton.classList.add("hidden");
@@ -588,6 +608,7 @@ class bitvidApp {
     if (this.userPubKey) {
       this.userPubKey.textContent = "";
     }
+
     // Hide upload & profile
     if (this.uploadButton) {
       this.uploadButton.classList.add("hidden");
@@ -595,8 +616,15 @@ class bitvidApp {
     if (this.profileButton) {
       this.profileButton.classList.add("hidden");
     }
+
     // Clear localStorage
     localStorage.removeItem("userPubKey");
+
+    // Refresh the video list so user sees only public videos again
+    await this.loadVideos();
+
+    // Force a fresh fetch of all profile pictures/names (public ones in this case)
+    this.forceRefreshAllProfiles();
   }
 
   /**
@@ -653,15 +681,15 @@ class bitvidApp {
   // js/app.js
 
   async loadVideos() {
-    console.log("Starting loadVideos (subscription approach)...");
+    console.log("Starting loadVideos...");
 
-    // If you had an existing subscription, unsubscribe first:
+    // 1) If there's an existing subscription, unsubscribe it
     if (this.videoSubscription) {
       this.videoSubscription.unsub();
       this.videoSubscription = null;
     }
 
-    // Optionally show "loading videos..." message
+    // 2) Show "Loading..." message
     if (this.videoList) {
       this.videoList.innerHTML = `
       <p class="text-center text-gray-500">
@@ -669,41 +697,24 @@ class bitvidApp {
       </p>`;
     }
 
-    // Clear your local map
-    this.videosMap.clear();
-
     try {
-      // Subscribe to new events from nostrClient
+      // 3) Force a bulk fetch
+      await nostrClient.fetchVideos();
+
+      // 4) Instead of reusing the entire fetched array,
+      //    use getActiveVideos() for the final display:
+      const newestActive = nostrClient.getActiveVideos();
+      this.renderVideoList(newestActive);
+
+      // 5) Subscribe for updates
       this.videoSubscription = nostrClient.subscribeVideos((video) => {
-        // If the video is marked deleted, remove it from your local collection
-        if (video.deleted) {
-          if (this.videosMap.has(video.id)) {
-            this.videosMap.delete(video.id);
-            // Now rebuild the list
-            const allVideos = Array.from(this.videosMap.values());
-            const newestPerRoot = dedupeToNewestByRoot(allVideos);
-            this.renderVideoList(newestPerRoot);
-          }
-          return;
-        }
-
-        // Skip private videos if they do not belong to the current user
-        if (video.isPrivate && video.pubkey !== this.pubkey) {
-          return;
-        }
-
-        // Only add if it's not in the map
-        if (!this.videosMap.has(video.id)) {
-          this.videosMap.set(video.id, video);
-          // Re-run the dedupe logic
-          const allVideos = Array.from(this.videosMap.values());
-          const newestPerRoot = dedupeToNewestByRoot(allVideos);
-          this.renderVideoList(newestPerRoot);
-        }
+        // Whenever we get a new or updated event, re-render the newest set:
+        const activeAll = nostrClient.getActiveVideos();
+        this.renderVideoList(activeAll);
       });
     } catch (err) {
-      console.error("Subscription error:", err);
-      this.showError("Could not load videos via subscription.");
+      console.error("Could not load videos:", err);
+      this.showError("Could not load videos from relays.");
       if (this.videoList) {
         this.videoList.innerHTML = `
         <p class="text-center text-gray-500">
@@ -714,22 +725,40 @@ class bitvidApp {
   }
 
   /**
-   * Build the DOM for the video list.
+   * Returns true if there's at least one strictly older version
+   * (same videoRootId, created_at < current) which is NOT deleted.
    */
+  hasOlderVersion(video, allEvents) {
+    if (!video || !video.videoRootId) return false;
+
+    const rootId = video.videoRootId;
+    const currentTs = video.created_at;
+
+    // among ALL known events (including overshadowed), find older, not deleted
+    const olderMatches = allEvents.filter(
+      (v) => v.videoRootId === rootId && v.created_at < currentTs && !v.deleted
+    );
+    return olderMatches.length > 0;
+  }
+
+  // 4) Build the DOM for each video in newestActive
   async renderVideoList(videos) {
     if (!this.videoList) return;
 
     if (!videos || videos.length === 0) {
       this.videoList.innerHTML = `
-        <p class="text-center text-gray-500">
-          No public videos available yet. Be the first to upload one!
-        </p>`;
+      <p class="text-center text-gray-500">
+        No public videos available yet. Be the first to upload one!
+      </p>`;
       return;
     }
 
     // Sort newest first
     videos.sort((a, b) => b.created_at - a.created_at);
 
+    // <-- NEW: Convert allEvents map => array to check older overshadowed events
+    const fullAllEventsArray = Array.from(nostrClient.allEvents.values());
+
     const htmlList = videos.map((video, index) => {
       if (!video.id || !video.title) {
         console.error("Video missing ID/title:", video);
@@ -747,45 +776,64 @@ class bitvidApp {
           : "border-none";
       const timeAgo = this.formatTimeAgo(video.created_at);
 
-      // Gear menu if canEdit
-      const gearMenu = canEdit
+      // 1) Do we have an older version?
+      let hasOlder = false;
+      if (canEdit && video.videoRootId) {
+        hasOlder = this.hasOlderVersion(video, fullAllEventsArray);
+      }
+
+      // 2) If we do => show revert button
+      const revertButton = hasOlder
         ? `
-          <div class="relative inline-block ml-3 overflow-visible">
-            <button
-              type="button"
-              class="inline-flex items-center p-2 rounded-full text-gray-400 hover:text-gray-200 hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-blue-500"
-              onclick="document.getElementById('settingsDropdown-${index}').classList.toggle('hidden')"
-            >
-              <img
-                src="assets/svg/video-settings-gear.svg"
-                alt="Settings"
-                class="w-5 h-5"
-              />
-            </button>
-            <div
-              id="settingsDropdown-${index}"
-              class="hidden absolute right-0 bottom-full mb-2 w-32 rounded-md shadow-lg bg-gray-800 ring-1 ring-black ring-opacity-5 z-50"
-            >
-              <div class="py-1">
-                <button
-                  class="block w-full text-left px-4 py-2 text-sm text-gray-100 hover:bg-gray-700"
-                  onclick="app.handleEditVideo(${index}); document.getElementById('settingsDropdown-${index}').classList.add('hidden');"
-                >
-                  Edit
-                </button>
-                <button
-                  class="block w-full text-left px-4 py-2 text-sm text-red-400 hover:bg-red-700 hover:text-white"
-                  onclick="app.handleDeleteVideo(${index}); document.getElementById('settingsDropdown-${index}').classList.add('hidden');"
-                >
-                  Delete
-                </button>
-              </div>
-            </div>
-          </div>
+          <button
+            class="block w-full text-left px-4 py-2 text-sm text-red-400 hover:bg-red-700 hover:text-white"
+            onclick="app.handleRevertVideo(${index}); document.getElementById('settingsDropdown-${index}').classList.add('hidden');"
+          >
+            Revert
+          </button>
         `
         : "";
 
-      // Build card
+      // 3) Gear menu
+      const gearMenu = canEdit
+        ? `
+        <div class="relative inline-block ml-3 overflow-visible">
+          <button
+            type="button"
+            class="inline-flex items-center p-2 rounded-full text-gray-400 hover:text-gray-200 hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-blue-500"
+            onclick="document.getElementById('settingsDropdown-${index}').classList.toggle('hidden')"
+          >
+            <img
+              src="assets/svg/video-settings-gear.svg"
+              alt="Settings"
+              class="w-5 h-5"
+            />
+          </button>
+          <div
+            id="settingsDropdown-${index}"
+            class="hidden absolute right-0 bottom-full mb-2 w-32 rounded-md shadow-lg bg-gray-800 ring-1 ring-black ring-opacity-5 z-50"
+          >
+            <div class="py-1">
+              <button
+                class="block w-full text-left px-4 py-2 text-sm text-gray-100 hover:bg-gray-700"
+                onclick="app.handleEditVideo(${index}); document.getElementById('settingsDropdown-${index}').classList.add('hidden');"
+              >
+                Edit
+              </button>
+              ${revertButton}
+              <button
+                class="block w-full text-left px-4 py-2 text-sm text-red-400 hover:bg-red-700 hover:text-white"
+                onclick="app.handleFullDeleteVideo(${index}); document.getElementById('settingsDropdown-${index}').classList.add('hidden');"
+              >
+                Delete All
+              </button>
+            </div>
+          </div>
+        </div>
+      `
+        : "";
+
+      // 4) Build the card markup...
       const cardHtml = `
       <div class="video-card bg-gray-900 rounded-lg overflow-hidden shadow-lg hover:shadow-2xl transition-all duration-300 ${highlightClass}">
         <a
@@ -850,34 +898,44 @@ class bitvidApp {
           </div>
         </div>
       </div>
-      `;
+    `;
 
-      // Kick off a background fetch for the profile
+      // Fire off a background fetch for the author's profile
       this.fetchAndRenderProfile(video.pubkey);
 
       return cardHtml;
     });
 
+    // Filter out any empty strings
     const valid = htmlList.filter((x) => x.length > 0);
     if (valid.length === 0) {
       this.videoList.innerHTML = `
-        <p class="text-center text-gray-500">
-          No valid videos to display.
-        </p>`;
+      <p class="text-center text-gray-500">
+        No valid videos to display.
+      </p>`;
       return;
     }
 
+    // Finally inject into DOM
     this.videoList.innerHTML = valid.join("");
   }
 
   /**
    * Retrieve the profile for a given pubkey (kind:0) and update the DOM.
    */
-  async fetchAndRenderProfile(pubkey) {
-    if (this.profileCache.has(pubkey)) {
-      this.updateProfileInDOM(pubkey, this.profileCache.get(pubkey));
+  async fetchAndRenderProfile(pubkey, forceRefresh = false) {
+    const now = Date.now();
+
+    // Check if we already have a cached entry for this pubkey:
+    const cacheEntry = this.profileCache.get(pubkey);
+
+    // If not forcing refresh, and we have a cache entry less than 60 sec old, use it:
+    if (!forceRefresh && cacheEntry && now - cacheEntry.timestamp < 60000) {
+      this.updateProfileInDOM(pubkey, cacheEntry.profile);
       return;
     }
+
+    // Otherwise, go fetch from the relay
     try {
       const userEvents = await nostrClient.pool.list(nostrClient.relays, [
         { kinds: [0], authors: [pubkey], limit: 1 },
@@ -888,11 +946,18 @@ class bitvidApp {
           name: data.name || data.display_name || "Unknown",
           picture: data.picture || "assets/jpg/default-profile.jpg",
         };
-        this.profileCache.set(pubkey, profile);
+
+        // Store into the cache with a timestamp
+        this.profileCache.set(pubkey, {
+          profile,
+          timestamp: now,
+        });
+
+        // Now update the DOM elements
         this.updateProfileInDOM(pubkey, profile);
       }
     } catch (err) {
-      console.error("Profile fetch error:", err);
+      console.error("Profile fetch error for pubkey:", pubkey, err);
     }
   }
 
@@ -1027,8 +1092,11 @@ class bitvidApp {
    */
   async handleEditVideo(index) {
     try {
+      // 1) Fetch the current list of videos (the newest versions)
       const all = await nostrClient.fetchVideos();
       const video = all[index];
+
+      // 2) Basic ownership checks
       if (!this.pubkey) {
         this.showError("Please login to edit videos.");
         return;
@@ -1038,7 +1106,7 @@ class bitvidApp {
         return;
       }
 
-      // Prompt for updated fields
+      // 3) Prompt the user for updated fields
       const newTitle = prompt("New Title? (blank=keep existing)", video.title);
       const newMagnet = prompt(
         "New Magnet? (blank=keep existing)",
@@ -1054,7 +1122,7 @@ class bitvidApp {
       );
       const wantPrivate = confirm("Make this video private? OK=Yes, Cancel=No");
 
-      // Build updated data, falling back to old values
+      // 4) Build final updated fields (or fallback to existing)
       const title =
         !newTitle || !newTitle.trim() ? video.title : newTitle.trim();
       const magnet =
@@ -1064,6 +1132,7 @@ class bitvidApp {
       const description =
         !newDesc || !newDesc.trim() ? video.description : newDesc.trim();
 
+      // 5) Create an object with the new data
       const updatedData = {
         version: video.version || 2,
         isPrivate: wantPrivate,
@@ -1074,27 +1143,81 @@ class bitvidApp {
         mode: isDevMode ? "dev" : "live",
       };
 
-      // IMPORTANT: we only pass id and pubkey to avoid reusing the old d-tag
-      // (Do NOT pass video.tags!)
-      const originalEvent = video;
+      // 6) Build the originalEvent stub, now including videoRootId to avoid extra fetch
+      const originalEvent = {
+        id: video.id,
+        pubkey: video.pubkey,
+        videoRootId: video.videoRootId, // <-- pass this if it exists
+      };
 
+      // 7) Call the editVideo method
       await nostrClient.editVideo(originalEvent, updatedData, this.pubkey);
 
-      this.showSuccess("Video updated successfully!");
+      // 8) Refresh local UI
       await this.loadVideos();
+      this.showSuccess("Video updated successfully!");
+
+      // 9) Also refresh all profile caches so any new name/pic changes are reflected
+      this.forceRefreshAllProfiles();
     } catch (err) {
-      this.log("Failed to edit video:", err.message);
+      console.error("Failed to edit video:", err);
       this.showError("Failed to edit video. Please try again.");
     }
   }
 
+  async handleRevertVideo(index) {
+    try {
+      // 1) Still use fetchVideos to get the video in question
+      const activeVideos = await nostrClient.fetchVideos();
+      const video = activeVideos[index];
+
+      if (!this.pubkey) {
+        this.showError("Please login to revert.");
+        return;
+      }
+      if (!video || video.pubkey !== this.pubkey) {
+        this.showError("You do not own this video.");
+        return;
+      }
+
+      // 2) Grab all known events so older overshadowed ones are included
+      const allEvents = Array.from(nostrClient.allEvents.values());
+
+      // 3) Check for older versions among *all* events, not just the active ones
+      if (!this.hasOlderVersion(video, allEvents)) {
+        this.showError("No older version exists to revert to.");
+        return;
+      }
+
+      if (!confirm(`Revert current version of "${video.title}"?`)) {
+        return;
+      }
+
+      const originalEvent = {
+        id: video.id,
+        pubkey: video.pubkey,
+        tags: video.tags,
+      };
+
+      await nostrClient.revertVideo(originalEvent, this.pubkey);
+
+      await this.loadVideos();
+      this.showSuccess("Current version reverted successfully!");
+      this.forceRefreshAllProfiles();
+    } catch (err) {
+      console.error("Failed to revert video:", err);
+      this.showError("Failed to revert video. Please try again.");
+    }
+  }
+
   /**
    * Handle "Delete Video" from gear menu.
    */
-  async handleDeleteVideo(index) {
+  async handleFullDeleteVideo(index) {
     try {
       const all = await nostrClient.fetchVideos();
       const video = all[index];
+
       if (!this.pubkey) {
         this.showError("Please login to delete videos.");
         return;
@@ -1103,23 +1226,27 @@ class bitvidApp {
         this.showError("You do not own this video.");
         return;
       }
-      if (!confirm(`Delete "${video.title}"? This can't be undone.`)) {
+      // Make sure the user is absolutely sure:
+      if (
+        !confirm(
+          `Delete ALL versions of "${video.title}"? This action is permanent.`
+        )
+      ) {
         return;
       }
 
-      // Only id and pubkey (omit old tags), so that delete doesn't overshadow the old d-tag
-      const originalEvent = {
-        id: video.id,
-        pubkey: video.pubkey,
-      };
+      // We assume video.videoRootId is not empty, or fallback to video.id if needed
+      const rootId = video.videoRootId || video.id;
 
-      await nostrClient.deleteVideo(originalEvent, this.pubkey);
+      await nostrClient.deleteAllVersions(rootId, this.pubkey);
 
-      this.showSuccess("Video deleted successfully!");
+      // Reload
       await this.loadVideos();
+      this.showSuccess("All versions deleted successfully!");
+      this.forceRefreshAllProfiles();
     } catch (err) {
-      this.log("Failed to delete video:", err.message);
-      this.showError("Failed to delete video. Please try again.");
+      console.error("Failed to delete all versions:", err);
+      this.showError("Failed to delete all versions. Please try again.");
     }
   }
 
diff --git a/src/js/nostr.js b/src/js/nostr.js
index 46f4cb3..70119b1 100644
--- a/src/js/nostr.js
+++ b/src/js/nostr.js
@@ -269,55 +269,79 @@ class NostrClient {
   /**
    * Edits a video by creating a *new event* with a brand-new d tag,
    * but reuses the same videoRootId as the original.
+   *
    * => old link remains pinned to the old event, new link is a fresh ID.
+   * => older version is overshadowed if your dedupe logic only shows newest.
    */
-  async editVideo(originalVideo, updatedData, pubkey) {
-    if (!pubkey) throw new Error("Not logged in to edit.");
-    if (originalVideo.pubkey !== pubkey) {
-      throw new Error("You do not own this video (different pubkey).");
+  async editVideo(originalEventStub, updatedData, pubkey) {
+    if (!pubkey) {
+      throw new Error("Not logged in to edit.");
+    }
+    if (!originalEventStub.pubkey || originalEventStub.pubkey !== pubkey) {
+      throw new Error("You do not own this video (pubkey mismatch).");
     }
 
-    // Use the videoRootId directly from the converted video
-    const rootId = originalVideo.videoRootId || null;
+    // 1) Attempt to get the FULL old event details (especially videoRootId)
+    let baseEvent = originalEventStub;
+    // If the caller didn't pass .videoRootId, fetch from local or relay:
+    if (!baseEvent.videoRootId) {
+      const fetched = await this.getEventById(originalEventStub.id);
+      if (!fetched) {
+        throw new Error("Could not retrieve the original event to edit.");
+      }
+      baseEvent = fetched;
+    }
+
+    // 2) We now have baseEvent.videoRootId if it existed
+    let oldRootId = baseEvent.videoRootId || null;
 
     // Decrypt the old magnet if it was private
-    let oldPlainMagnet = originalVideo.magnet || "";
-    if (originalVideo.isPrivate && oldPlainMagnet) {
+    let oldPlainMagnet = baseEvent.magnet || "";
+    if (baseEvent.isPrivate && oldPlainMagnet) {
       oldPlainMagnet = fakeDecrypt(oldPlainMagnet);
     }
 
-    // Determine new privacy setting
-    const wantPrivate =
-      updatedData.isPrivate ?? originalVideo.isPrivate ?? false;
+    // 3) Decide new privacy
+    const wantPrivate = updatedData.isPrivate ?? baseEvent.isPrivate ?? false;
 
-    // Fallback to old magnet if none provided
+    // 4) Fallback to old magnet if none was provided
     let finalPlainMagnet = (updatedData.magnet || "").trim();
     if (!finalPlainMagnet) {
       finalPlainMagnet = oldPlainMagnet;
     }
 
-    // Re-encrypt if user wants private
+    // 5) Re-encrypt if user wants private
     let finalMagnet = finalPlainMagnet;
     if (wantPrivate) {
       finalMagnet = fakeEncrypt(finalPlainMagnet);
     }
 
-    // If there's no root yet (legacy), generate it
-    const newRootId =
-      rootId || `${Date.now()}-${Math.random().toString(36).slice(2)}`;
+    // 6) If there's no root yet (legacy), use the old event's own ID.
+    // Otherwise keep the existing rootId.
+    if (!oldRootId) {
+      oldRootId = baseEvent.id;
+      if (isDevMode) {
+        console.log(
+          "No existing root => using baseEvent.id as root:",
+          oldRootId
+        );
+      }
+    }
+
+    // Generate a brand-new d-tag so it doesn't overshadow the old share link
     const newD = `${Date.now()}-edit-${Math.random().toString(36).slice(2)}`;
 
-    // Build updated content
+    // 7) Build updated content
     const contentObject = {
-      videoRootId: newRootId,
-      version: updatedData.version ?? originalVideo.version ?? 1,
+      videoRootId: oldRootId,
+      version: updatedData.version ?? baseEvent.version ?? 1,
       deleted: false,
       isPrivate: wantPrivate,
-      title: updatedData.title ?? originalVideo.title,
+      title: updatedData.title ?? baseEvent.title,
       magnet: finalMagnet,
-      thumbnail: updatedData.thumbnail ?? originalVideo.thumbnail,
-      description: updatedData.description ?? originalVideo.description,
-      mode: updatedData.mode ?? originalVideo.mode ?? "live",
+      thumbnail: updatedData.thumbnail ?? baseEvent.thumbnail,
+      description: updatedData.description ?? baseEvent.description,
+      mode: updatedData.mode ?? baseEvent.mode ?? "live",
     };
 
     const event = {
@@ -332,16 +356,24 @@ class NostrClient {
     };
 
     if (isDevMode) {
-      console.log("Creating edited event with root ID:", newRootId);
+      console.log("Creating edited event with root ID:", oldRootId);
       console.log("Event content:", event.content);
     }
 
+    // 8) Sign and publish the new event
     try {
       const signedEvent = await window.nostr.signEvent(event);
+      if (isDevMode) {
+        console.log("Signed edited event:", signedEvent);
+      }
+
       await Promise.all(
         this.relays.map(async (url) => {
           try {
             await this.pool.publish([url], signedEvent);
+            if (isDevMode) {
+              console.log(`Edited video published to ${url}`);
+            }
           } catch (err) {
             if (isDevMode) {
               console.error(`Publish failed to ${url}`, err);
@@ -357,28 +389,26 @@ class NostrClient {
   }
 
   /**
-   * "Deleting" => we just mark content as {deleted:true} and blank out magnet/desc
+   * "Reverting" => we just mark the most recent content as {deleted:true} and blank out magnet/desc
    */
-  async deleteVideo(originalEvent, pubkey) {
+  async revertVideo(originalEvent, pubkey) {
     if (!pubkey) {
-      throw new Error("Not logged in to delete.");
+      throw new Error("Not logged in to revert.");
     }
     if (originalEvent.pubkey !== pubkey) {
       throw new Error("Not your event (pubkey mismatch).");
     }
 
-    // If front-end didn't pass the tags array, load the full event from local or from the relay:
+    // If front-end didn't pass the tags array, load the full event:
     let baseEvent = originalEvent;
     if (!baseEvent.tags || !Array.isArray(baseEvent.tags)) {
       const fetched = await this.getEventById(originalEvent.id);
       if (!fetched) {
-        throw new Error("Could not fetch the original event for deletion.");
+        throw new Error("Could not fetch the original event for reverting.");
       }
-      // Rebuild baseEvent as a raw Nostr event that includes .tags and .content
       baseEvent = {
         id: fetched.id,
         pubkey: fetched.pubkey,
-        // put the raw JSON content back into string form:
         content: JSON.stringify({
           version: fetched.version,
           deleted: fetched.deleted,
@@ -393,41 +423,34 @@ class NostrClient {
       };
     }
 
-    // Now try to get the old d-tag
+    // Check d-tag
     const dTag = baseEvent.tags.find((t) => t[0] === "d");
     if (!dTag) {
-      throw new Error('No "d" tag => cannot delete addressable kind=30078.');
+      throw new Error(
+        'No "d" tag => cannot revert addressable kind=30078 event.'
+      );
     }
     const existingD = dTag[1];
 
-    // After you've parsed oldContent:
     const oldContent = JSON.parse(baseEvent.content || "{}");
     const oldVersion = oldContent.version ?? 1;
 
-    // ADD this block to handle the old root or fallback:
+    // If no root, fallback
     let finalRootId = oldContent.videoRootId || null;
     if (!finalRootId) {
-      // If it’s a legacy video (no root), we can fallback to your
-      // existing logic used by getActiveKey. For instance, if it had a 'd' tag:
-      if (dTag) {
-        // Some devs store it as 'LEGACY:pubkey:dTagValue'
-        // or you could just store the same as the old approach:
-        finalRootId = `LEGACY:${baseEvent.pubkey}:${dTag[1]}`;
-      } else {
-        finalRootId = `LEGACY:${baseEvent.id}`;
-      }
+      finalRootId = `LEGACY:${baseEvent.pubkey}:${existingD}`;
     }
 
-    // Now build the content object, including videoRootId:
+    // Build “deleted: true” overshadow event => revert current version
     const contentObject = {
-      videoRootId: finalRootId, // <-- CRUCIAL so the delete event shares the same root key
+      videoRootId: finalRootId,
       version: oldVersion,
-      deleted: true,
+      deleted: true, // mark *this version* as deleted
       isPrivate: oldContent.isPrivate ?? false,
       title: oldContent.title || "",
       magnet: "",
       thumbnail: "",
-      description: "Video was deleted by creator.",
+      description: "This version was reverted by the creator.",
       mode: oldContent.mode || "live",
     };
 
@@ -437,44 +460,80 @@ class NostrClient {
       created_at: Math.floor(Date.now() / 1000),
       tags: [
         ["t", "video"],
-        // We reuse the same d => overshadow the original event
-        ["d", existingD],
+        ["d", existingD], // re-use same d => overshadow
       ],
       content: JSON.stringify(contentObject),
     };
 
-    if (isDevMode) {
-      console.log("Deleting video => mark 'deleted:true'.", event.content);
-    }
-
-    try {
-      const signedEvent = await window.nostr.signEvent(event);
-      if (isDevMode) {
-        console.log("Signed deleted event:", signedEvent);
-      }
-
-      // Publish everywhere
-      await Promise.all(
-        this.relays.map(async (url) => {
-          try {
-            await this.pool.publish([url], signedEvent);
-            if (isDevMode) {
-              console.log(`Delete event published to ${url}`);
-            }
-          } catch (err) {
-            if (isDevMode) {
-              console.error(`Failed to publish deleted event to ${url}:`, err);
-            }
+    const signedEvent = await window.nostr.signEvent(event);
+    await Promise.all(
+      this.relays.map(async (url) => {
+        try {
+          await this.pool.publish([url], signedEvent);
+        } catch (err) {
+          if (isDevMode) {
+            console.error(`Failed to revert on ${url}`, err);
           }
-        })
-      );
-      return signedEvent;
-    } catch (err) {
-      if (isDevMode) {
-        console.error("Failed to sign deleted event:", err);
-      }
-      throw new Error("Failed to sign deleted event.");
+        }
+      })
+    );
+
+    return signedEvent;
+  }
+
+  /**
+   * "Deleting" => we just mark all content with the same videoRootId as {deleted:true} and blank out magnet/desc
+   */
+
+  async deleteAllVersions(videoRootId, pubkey) {
+    if (!pubkey) {
+      throw new Error("Not logged in to delete all versions.");
     }
+
+    // 1) Find all events in our local allEvents that share the same root.
+    const matchingEvents = [];
+    for (const [id, vid] of this.allEvents.entries()) {
+      if (
+        vid.videoRootId === videoRootId &&
+        vid.pubkey === pubkey &&
+        !vid.deleted
+      ) {
+        matchingEvents.push(vid);
+      }
+    }
+    // If you want to re-check the relay for older versions too,
+    // you can do a fallback query, but typically your local cache is enough.
+
+    if (!matchingEvents.length) {
+      throw new Error("No existing events found for that root.");
+    }
+
+    // 2) For each event, create a "deleted: true" overshadow
+    //    by re-using the same d-tag so it cannot appear again.
+    for (const vid of matchingEvents) {
+      await this.revertVideo(
+        {
+          // re-using revertVideo logic
+          id: vid.id,
+          pubkey: vid.pubkey,
+          content: JSON.stringify({
+            version: vid.version,
+            deleted: vid.deleted,
+            isPrivate: vid.isPrivate,
+            title: vid.title,
+            magnet: vid.magnet,
+            thumbnail: vid.thumbnail,
+            description: vid.description,
+            mode: vid.mode,
+          }),
+          tags: vid.tags,
+        },
+        pubkey
+      );
+    }
+
+    // Optionally return some status
+    return true;
   }
 
   /**

From f216e6838d4fcd595d65b64e4666a0bbdd52009b Mon Sep 17 00:00:00 2001
From: Keep Creating Online <53631862+PR0M3TH3AN@users.noreply.github.com>
Date: Sat, 1 Feb 2025 19:11:34 -0500
Subject: [PATCH 3/5] removed random CSV

---
 src/css/Responses for bi....xlsx | Bin 15795 -> 0 bytes
 1 file changed, 0 insertions(+), 0 deletions(-)
 delete mode 100644 src/css/Responses for bi....xlsx

diff --git a/src/css/Responses for bi....xlsx b/src/css/Responses for bi....xlsx
deleted file mode 100644
index 0ef02b326e2201fc8d355b74e6470728a86bf764..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 15795
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


From 040e8a0301a57f7e0c5c40275df62c0120998172 Mon Sep 17 00:00:00 2001
From: Keep Creating Online <53631862+PR0M3TH3AN@users.noreply.github.com>
Date: Sat, 1 Feb 2025 19:59:40 -0500
Subject: [PATCH 4/5] improved modal exit on mobile

---
 src/index.html | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/src/index.html b/src/index.html
index 9d81fb3..1f03f2b 100644
--- a/src/index.html
+++ b/src/index.html
@@ -345,12 +345,18 @@
 
       // Just load the login modal (or any others), without adding event listeners here.
       // The logic to open/close the modal is all in app.js now.
-      Promise.all([
-        loadModal("components/login-modal.html"),
-        // e.g. loadModal("components/upload-modal.html"),
-        // loadModal("components/profile-modal.html"),
-      ]).then(() => {
+      Promise.all([loadModal("components/login-modal.html")]).then(() => {
         console.log("Modals loaded (login-modal.html, etc.)");
+        // Now that the login-modal is definitely in the DOM:
+        const closeBtn = document.getElementById("closeLoginModal");
+        if (closeBtn) {
+          closeBtn.addEventListener("click", () => {
+            const loginModal = document.getElementById("loginModal");
+            if (loginModal) {
+              loginModal.classList.add("hidden");
+            }
+          });
+        }
       });
     </script>
 

From a7ff33b6e91627dd6c94af366ec3a9bab225074f Mon Sep 17 00:00:00 2001
From: Keep Creating Online <53631862+PR0M3TH3AN@users.noreply.github.com>
Date: Sat, 1 Feb 2025 20:14:31 -0500
Subject: [PATCH 5/5] update

---
 src/components/application-form.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/application-form.html b/src/components/application-form.html
index 79e69bf..a79479d 100644
--- a/src/components/application-form.html
+++ b/src/components/application-form.html
@@ -71,7 +71,7 @@
           <div class="p-6">
             <div class="flex justify-center">
               <iframe
-                src="https://formstr.app/#/f/naddr1qvzqqqr4mqpzphm2csv2s3ehude2dc0yd0t06psy6kkek0gcpddputetum4yfxnsqythwumn8ghj7un9d3shjtnwdaehgu3wvfskuep0qqsky6t5we5kggzhdp5hgetvd9ehggzpwpcxc6trv96xjmmwyprx7und8lh48n"
+                src="https://formstr.app/#/f/naddr1qvzqqqr4mqpzpcf63zey4c02lz9x4zkn2ny5kmz3g8v8fj9hvehyps5tuj7u272gqythwumn8ghj7un9d3shjtnwdaehgu3wvfskuep0qqsky6t5we5kgh6hdp5hgetvd9ehgh6pwpcxc6trv96xjmmwtarx7und0qc765?hideTitleImage=true"
                 height="700px"
                 width="480px"
                 frameborder="0"
