Merge pull request #263 from PR0M3TH3AN/unstable

Unstable

.gitignore

@@ -1,3 +1,4 @@
 saved_config.yaml
 repo-context.txt
-src/webtorrent-docs/
+node_modules/
+src/webtorrent-docs/

AGENTS.md

@@ -81,4 +81,13 @@ Document the run in PR descriptions so QA can cross-reference results.
 * **Playback orchestration:** `playVideoWithFallback` probes and plays the HTTPS URL first, watches for stalls/errors, and then falls back to WebTorrent. When both sources exist, pass the hosted URL through to WebTorrent as a webseed hint.
 * **Status messaging:** Update modal copy to reflect whether playback is direct or via P2P so regressions surface quickly during QA.
 
+## Next
+
+Please read these documents next. 
+
+docs/nostr-event-schemas.md 
+js/nostrEventSchemas.js
+
+And if you need to create new nostr kinds please keep the logic centralized there in nostrEventSchemas.js and the nostr-event-schemas.md up to date. 
+
 **End of AGENTS.md**

README.md

@@ -73,12 +73,33 @@ To run **bitvid** locally:
      ```
 
 3. Open the site in your browser:
-   ```
-   http://localhost:8000
-   ```
+  ```
+  http://localhost:8000
+  ```
+
+### CSS build pipeline
+
+Tailwind utilities are generated from `css/tailwind.source.css` using the build
+script below. Run this whenever you add or remove classes in HTML or JavaScript
+so the purged output stays in sync:
+
+```bash
+npm install         # first run only
+npm run build:css
+```
+
+The command compiles Tailwind with `tailwind.config.cjs`, runs it through the
+PostCSS pipeline defined in `postcss.config.cjs` (for autoprefixing), and emits
+the purged, minified stylesheet at `css/tailwind.generated.css`. Commit the
+regenerated file alongside any template changes so deployments pick up the
+latest styles.
 
 ### Configuration
 
+- **`config/instance-config.js`**:
+  - Central place for instance-specific values like the Super Admin npub and the
+    default whitelist-only mode setting. Update the documented exports here when
+    preparing a new deployment.
 - **`config.js`**:
   - Toggle `isDevMode` for development (`true`) or production (`false`).
 - **`js/constants.js`**:
@@ -86,6 +107,13 @@ To run **bitvid** locally:
 - **Magnet helpers**:
   - Use `safeDecodeMagnet()` and `normalizeAndAugmentMagnet()` from `js/magnetUtils.js` to preserve hashes and add `ws=` / `xs=` hints safely.
 
+### Relay compatibility
+
+Bitvid now requests per-video discussion counts using the NIP-45 `COUNT` frame. The bundled client opens each relay via
+`this.pool.ensureRelay(url)` and streams a raw `COUNT` message, so your relay stack must understand that verb (nostr-tools ≥ 1.8
+or any relay advertising NIP-45 support). Relays that do not implement `COUNT` are skipped gracefully—the UI keeps the count
+placeholder at “—” and development builds log a warning—so mixed deployments remain usable while you phase in compatible relays.
+
 ### Adding Features
 
 1. **Fork the repository** and create a new branch for your feature.

assets/svg/ellipsis.svg

@@ -0,0 +1,11 @@
+<svg
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <circle cx="5" cy="12" r="2" fill="#ffffff" />
+  <circle cx="12" cy="12" r="2" fill="#ffffff" />
+  <circle cx="19" cy="12" r="2" fill="#ffffff" />
+</svg>

assets/svg/history-icon.svg

@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg
+  width="100%"
+  height="100%"
+  viewBox="0 0 24 24"
+  version="1.1"
+  xmlns="http://www.w3.org/2000/svg"
+  xmlns:xlink="http://www.w3.org/1999/xlink"
+  xml:space="preserve"
+  xmlns:serif="http://www.serif.com/"
+  style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"
+>
+  <g transform="matrix(1,0,0,1,12,12)">
+    <g transform="matrix(1,0,0,1,-12,-12)">
+      <path
+        d="M12,2C6.486,2 2,6.486 2,12C2,17.514 6.486,22 12,22C17.514,22 22,17.514 22,12C22,6.486 17.514,2 12,2ZM12,4C16.411,4 20,7.589 20,12C20,16.411 16.411,20 12,20C7.589,20 4,16.411 4,12C4,7.589 7.589,4 12,4ZM11,7C10.448,7 10,7.448 10,8L10,13C10,13.266 10.105,13.52 10.293,13.707L13.293,16.707C13.683,17.098 14.317,17.098 14.707,16.707C15.098,16.317 15.098,15.683 14.707,15.293L12,12.586L12,8C12,7.448 11.552,7 11,7Z"
+        style="fill:rgb(92,111,138);fill-rule:nonzero;"
+      />
+    </g>
+  </g>
+</svg>

blog.html

@@ -33,7 +33,12 @@
 
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title></title>
+    <meta
+      name="description"
+      content="Explore Bitvid release notes, roadmap updates, and community highlights across the decentralized video network."
+    />
+    <meta name="robots" content="index,follow" />
+    <title>Bitvid Blog</title>
     <script src="./js/tracking.js" defer></script>
     <script type="module" crossorigin>
       var pv = Object.defineProperty;

components/application-form.html

@@ -8,7 +8,7 @@
     <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" />
+    <link href="css/tailwind.generated.css" rel="stylesheet" />
   </head>
   <body class="bg-gray-900 text-gray-100">
     <!-- Application Form Modal -->

components/disclaimer.html

@@ -20,21 +20,18 @@
   >
     <!-- The .modal-content, same classes: bg-gray-900, w-full max-w-[90%], etc. -->
     <div
-      class="modal-content bg-gray-900 w-full max-w-[90%] lg:max-w-6xl my-0 rounded-lg overflow-hidden relative"
+      class="modal-content bg-gray-900 w-full max-w-[90%] lg:max-w-6xl my-0 rounded-lg overflow-hidden relative flex flex-col"
     >
       <!-- Sticky top bar, if you want a top heading or 'X' button up here -->
       <div
-        class="sticky top-0 bg-gradient-to-b from-black/80 to-transparent p-4 flex items-center justify-between"
-      >        
+        class="modal-header sticky top-0 bg-gradient-to-b from-black/80 to-transparent p-4 flex items-center justify-between"
+      >
       </div>
 
       <!-- Main Content -->
-      <div class="p-6">
+      <div class="modal-body flex-1 overflow-y-auto">
         <!-- Scrollable disclaimers area -->
-        <div
-          class="space-y-6 text-gray-300"
-          style="max-height: 70vh; overflow-y: auto"
-        >
+        <div class="space-y-6 text-gray-300">
           <!-- Example: Insert your disclaimers here -->
 
           <div class="flex justify-center mb-8">
@@ -114,16 +111,16 @@
             </div>
           </div>
         </div>
+      </div>
 
-        <!-- Button at bottom -->
-        <div class="mt-6">
-          <button
-            id="acceptDisclaimer"
-            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 focus:ring-offset-black transition-colors duration-200"
-          >
-            I Understand
-          </button>
-        </div>
+      <!-- Button at bottom -->
+      <div class="modal-footer">
+        <button
+          id="acceptDisclaimer"
+          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 focus:ring-offset-black transition-colors duration-200"
+        >
+          I Understand
+        </button>
       </div>
     </div>
   </div>

components/edit-video-modal.html

@@ -0,0 +1,249 @@
+<!-- components/edit-video-modal.html -->
+<div
+  id="editVideoModal"
+  class="fixed inset-0 z-50 hidden"
+  style="background: transparent"
+>
+  <div
+    id="editVideoModalOverlay"
+    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>
+
+  <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-[90%] lg:max-w-4xl my-0 rounded-lg overflow-y-auto relative"
+      style="max-height: 90vh"
+    >
+      <div
+        class="sticky top-0 bg-gradient-to-b from-black/80 to-transparent transition-transform duration-150 p-4 flex items-center justify-between"
+      >
+        <h2 class="text-xl font-bold text-white">Edit Video Note</h2>
+        <button
+          id="closeEditVideoModal"
+          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>
+
+      <div class="p-6 space-y-6">
+        <p class="text-sm text-gray-400">
+          Fields that already have values are locked. Click <strong>Edit field</strong> to make changes.
+        </p>
+
+        <form id="editVideoForm" class="space-y-5">
+          <div class="space-y-1">
+            <label for="editVideoTitle" class="block text-sm font-medium text-gray-200">
+              Title
+            </label>
+            <div class="flex flex-col gap-2 sm:flex-row">
+              <input
+                type="text"
+                id="editVideoTitle"
+                class="flex-1 rounded-md border border-gray-700 bg-gray-800 text-gray-100 focus:border-blue-500 focus:ring-blue-500"
+                placeholder="Video title"
+              />
+              <button
+                type="button"
+                class="edit-field-button hidden"
+                data-edit-target="editVideoTitle"
+              >
+                Edit field
+              </button>
+            </div>
+          </div>
+
+          <div class="space-y-1">
+            <label for="editVideoUrl" class="block text-sm font-medium text-gray-200">
+              Hosted video URL (https)
+            </label>
+            <div class="flex flex-col gap-2 sm:flex-row">
+              <input
+                type="url"
+                id="editVideoUrl"
+                class="flex-1 rounded-md border border-gray-700 bg-gray-800 text-gray-100 focus:border-blue-500 focus:ring-blue-500"
+                placeholder="https://cdn.example.com/video.mp4"
+              />
+              <button
+                type="button"
+                class="edit-field-button hidden"
+                data-edit-target="editVideoUrl"
+              >
+                Edit field
+              </button>
+            </div>
+          </div>
+
+          <div class="space-y-1">
+            <label for="editVideoWs" class="block text-sm font-medium text-gray-200">
+              Web seed (ws=)
+            </label>
+            <div class="flex flex-col gap-2 sm:flex-row">
+              <input
+                type="url"
+                id="editVideoWs"
+                class="flex-1 rounded-md border border-gray-700 bg-gray-800 text-gray-100 focus:border-blue-500 focus:ring-blue-500"
+                placeholder="https://cdn.example.com/video.mp4"
+              />
+              <button
+                type="button"
+                class="edit-field-button hidden"
+                data-edit-target="editVideoWs"
+              >
+                Edit field
+              </button>
+            </div>
+          </div>
+
+          <div class="space-y-1">
+            <label for="editVideoXs" class="block text-sm font-medium text-gray-200">
+              .torrent URL (xs=)
+            </label>
+            <div class="flex flex-col gap-2 sm:flex-row">
+              <input
+                type="url"
+                id="editVideoXs"
+                class="flex-1 rounded-md border border-gray-700 bg-gray-800 text-gray-100 focus:border-blue-500 focus:ring-blue-500"
+                placeholder="https://cdn.example.com/video.torrent"
+              />
+              <button
+                type="button"
+                class="edit-field-button hidden"
+                data-edit-target="editVideoXs"
+              >
+                Edit field
+              </button>
+            </div>
+          </div>
+
+          <div class="space-y-1">
+            <label for="editVideoMagnet" class="block text-sm font-medium text-gray-200">
+              Magnet link
+            </label>
+            <div class="flex flex-col gap-2 sm:flex-row">
+              <input
+                type="text"
+                id="editVideoMagnet"
+                class="flex-1 rounded-md border border-gray-700 bg-gray-800 text-gray-100 focus:border-blue-500 focus:ring-blue-500"
+                placeholder="magnet:?xt=urn:btih:..."
+              />
+              <button
+                type="button"
+                class="edit-field-button hidden"
+                data-edit-target="editVideoMagnet"
+              >
+                Edit field
+              </button>
+            </div>
+          </div>
+
+          <div class="space-y-1">
+            <label for="editVideoThumbnail" class="block text-sm font-medium text-gray-200">
+              Thumbnail URL
+            </label>
+            <div class="flex flex-col gap-2 sm:flex-row">
+              <input
+                type="url"
+                id="editVideoThumbnail"
+                class="flex-1 rounded-md border border-gray-700 bg-gray-800 text-gray-100 focus:border-blue-500 focus:ring-blue-500"
+                placeholder="https://cdn.example.com/preview.jpg"
+              />
+              <button
+                type="button"
+                class="edit-field-button hidden"
+                data-edit-target="editVideoThumbnail"
+              >
+                Edit field
+              </button>
+            </div>
+          </div>
+
+          <div class="space-y-1">
+            <label for="editVideoDescription" class="block text-sm font-medium text-gray-200">
+              Description
+            </label>
+            <div class="flex flex-col gap-2">
+              <textarea
+                id="editVideoDescription"
+                rows="4"
+                class="w-full rounded-md border border-gray-700 bg-gray-800 text-gray-100 focus:border-blue-500 focus:ring-blue-500"
+                placeholder="What is this video about?"
+              ></textarea>
+              <button
+                type="button"
+                class="edit-field-button self-start hidden"
+                data-edit-target="editVideoDescription"
+              >
+                Edit field
+              </button>
+            </div>
+          </div>
+
+          <div class="space-y-1">
+            <label for="editEnableComments" class="block text-sm font-medium text-gray-200">
+              Enable comments
+            </label>
+            <div
+              class="flex flex-col gap-2 rounded-md border border-gray-800 bg-black/30 p-3 sm:flex-row sm:items-center sm:justify-between"
+            >
+              <div class="flex items-center gap-3">
+                <input
+                  type="checkbox"
+                  id="editEnableComments"
+                  class="h-5 w-5 rounded border-gray-600 bg-gray-800 text-blue-500 focus:ring-blue-500"
+                />
+                <span class="text-sm text-gray-300">
+                  Allow replies once comment threads are available.
+                </span>
+              </div>
+              <button
+                type="button"
+                class="edit-field-button hidden"
+                data-edit-target="editEnableComments"
+              >
+                Edit field
+              </button>
+            </div>
+          </div>
+
+          <div class="flex flex-col gap-3 sm:flex-row sm:justify-end">
+            <button
+              type="button"
+              id="cancelEditVideo"
+              class="w-full sm:w-auto px-4 py-2 rounded-md bg-gray-800 text-gray-200 hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-900 focus:ring-gray-500"
+            >
+              Cancel
+            </button>
+            <button
+              type="submit"
+              id="submitEditVideo"
+              class="w-full sm:w-auto px-4 py-2 rounded-md bg-blue-600 text-white hover:bg-blue-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-900 focus:ring-blue-500"
+            >
+              Save changes
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  </div>
+</div>

components/iframe_forms/iframe-application-form.html

@@ -112,16 +112,19 @@
         height: 8px;
       }
       ::-webkit-scrollbar-track {
-        background: transparent;
+        background: rgba(255, 255, 255, 0.1);
       }
       ::-webkit-scrollbar-thumb {
-        background-color: #3b82f6;
+        background-color: rgba(255, 255, 255, 0.3);
         border-radius: 4px;
       }
+      ::-webkit-scrollbar-thumb:hover {
+        background-color: rgba(255, 255, 255, 0.4);
+      }
       /* Custom Scrollbar styling for Firefox */
       * {
         scrollbar-width: thin;
-        scrollbar-color: #3b82f6 transparent;
+        scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
       }
     </style>
     <!-- Load nostr‑tools v2.10.4 -->

components/iframe_forms/iframe-bug-fix-form.html

@@ -112,16 +112,19 @@
         height: 8px;
       }
       ::-webkit-scrollbar-track {
-        background: transparent;
+        background: rgba(255, 255, 255, 0.1);
       }
       ::-webkit-scrollbar-thumb {
-        background-color: #3b82f6;
+        background-color: rgba(255, 255, 255, 0.3);
         border-radius: 4px;
       }
+      ::-webkit-scrollbar-thumb:hover {
+        background-color: rgba(255, 255, 255, 0.4);
+      }
       /* Custom Scrollbar styling for Firefox */
       * {
         scrollbar-width: thin;
-        scrollbar-color: #3b82f6 transparent;
+        scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
       }
     </style>
     <!-- Load nostr‑tools v2.10.4 -->

components/iframe_forms/iframe-content-appeals-form.html

@@ -105,16 +105,19 @@
         height: 8px;
       }
       ::-webkit-scrollbar-track {
-        background: transparent;
+        background: rgba(255, 255, 255, 0.1);
       }
       ::-webkit-scrollbar-thumb {
-        background-color: #3b82f6;
+        background-color: rgba(255, 255, 255, 0.3);
         border-radius: 4px;
       }
+      ::-webkit-scrollbar-thumb:hover {
+        background-color: rgba(255, 255, 255, 0.4);
+      }
       /* Custom Scrollbar styling for Firefox */
       * {
         scrollbar-width: thin;
-        scrollbar-color: #3b82f6 transparent;
+        scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
       }
     </style>
     <!-- Load nostr‑tools v2.10.4 -->

components/iframe_forms/iframe-feedback-form.html

@@ -119,16 +119,19 @@
         height: 8px;
       }
       ::-webkit-scrollbar-track {
-        background: transparent;
+        background: rgba(255, 255, 255, 0.1);
       }
       ::-webkit-scrollbar-thumb {
-        background-color: #3b82f6;
+        background-color: rgba(255, 255, 255, 0.3);
         border-radius: 4px;
       }
+      ::-webkit-scrollbar-thumb:hover {
+        background-color: rgba(255, 255, 255, 0.4);
+      }
       /* Custom Scrollbar styling for Firefox */
       * {
         scrollbar-width: thin;
-        scrollbar-color: #3b82f6 transparent;
+        scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
       }
     </style>
     <!-- Load nostr‑tools v2.10.4 -->

components/iframe_forms/iframe-request-form.html

@@ -112,15 +112,18 @@
         height: 8px;
       }
       ::-webkit-scrollbar-track {
-        background: transparent;
+        background: rgba(255, 255, 255, 0.1);
       }
       ::-webkit-scrollbar-thumb {
-        background-color: #3b82f6;
+        background-color: rgba(255, 255, 255, 0.3);
         border-radius: 4px;
       }
+      ::-webkit-scrollbar-thumb:hover {
+        background-color: rgba(255, 255, 255, 0.4);
+      }
       * {
         scrollbar-width: thin;
-        scrollbar-color: #3b82f6 transparent;
+        scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
       }
     </style>
     <!-- Load nostr‑tools v2.10.4 -->

components/profile-modal.html

@@ -2,6 +2,10 @@
 <div
   id="profileModal"
   class="fixed inset-0 z-50 hidden"
+  role="dialog"
+  aria-modal="true"
+  aria-labelledby="profileModalTitle"
+  tabindex="-1"
   style="background: transparent"
 >
   <!-- Overlay Layer with dark background and blur -->
@@ -27,7 +31,7 @@
       <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">Profile</h2>
+        <h2 id="profileModalTitle" class="text-xl font-bold text-white">Profile</h2>
         <button
           id="closeProfileModal"
           class="flex items-center justify-center w-10 h-10 rounded-full bg-black/50 hover:bg-black/70 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-black focus:ring-blue-500"
@@ -50,28 +54,491 @@
       </div>
 
       <!-- Modal Body -->
-      <div class="p-6 flex-1 text-gray-200 space-y-4">
-        <div class="flex items-center space-x-4">
-          <img
-            id="profileModalAvatar"
-            src="assets/svg/default-profile.svg"
-            alt="Profile"
-            class="w-16 h-16 object-cover rounded-full"
-          />
-          <p id="profileModalName" class="text-lg font-semibold truncate">
-            Loading...
-          </p>
+      <div class="p-6 flex-1 overflow-hidden">
+        <div class="flex flex-col lg:flex-row gap-6 h-full">
+          <!-- Left navigation column -->
+          <nav
+            class="flex lg:flex-col gap-2 flex-shrink-0"
+            aria-label="Profile sections"
+          >
+            <button
+              id="profileNavAccount"
+              type="button"
+              class="profile-nav-button px-4 py-2 rounded-md text-sm font-medium text-white bg-gray-800 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-gray-900"
+              aria-controls="profilePaneAccount"
+              aria-selected="true"
+            >
+              Account
+            </button>
+            <button
+              id="profileNavRelays"
+              type="button"
+              class="profile-nav-button px-4 py-2 rounded-md text-sm font-medium text-gray-400 hover:text-white hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-gray-900"
+              aria-controls="profilePaneRelays"
+              aria-selected="false"
+            >
+              Relays
+            </button>
+            <button
+              id="profileNavBlocked"
+              type="button"
+              class="profile-nav-button px-4 py-2 rounded-md text-sm font-medium text-gray-400 hover:text-white hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-gray-900"
+              aria-controls="profilePaneBlocked"
+              aria-selected="false"
+            >
+              Blocked
+            </button>
+            <button
+              id="profileNavHistory"
+              type="button"
+              class="profile-nav-button px-4 py-2 rounded-md text-sm font-medium text-gray-400 hover:text-white hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-gray-900"
+              aria-controls="profilePaneHistory"
+              aria-selected="false"
+            >
+              Watch history
+            </button>
+            <button
+              id="profileNavAdmin"
+              type="button"
+              class="profile-nav-button px-4 py-2 rounded-md text-sm font-medium text-gray-400 hover:text-white hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-gray-900 hidden"
+              aria-controls="profilePaneAdmin"
+              aria-selected="false"
+            >
+              Admin (Moderation)
+            </button>
+          </nav>
+
+          <!-- Right content panes -->
+          <div class="flex-1 min-h-[320px] overflow-y-auto pr-1">
+            <section
+              id="profilePaneAccount"
+              class="profile-pane space-y-6"
+              role="tabpanel"
+              aria-labelledby="profileNavAccount"
+            >
+              <!--
+                The account pane now relies on bespoke CSS (see css/style.css under
+                "Profile modal account pane") so we are not dependent on utility
+                classes that may be purged or overridden by other builds.
+              -->
+              <div class="profile-switcher" id="profileSwitcherTray">
+                <div class="profile-switcher__header">
+                  <div class="profile-switcher__intro">
+                    <h3 class="profile-switcher__title">Switch profiles</h3>
+                    <p class="profile-switcher__subtitle">
+                      Save multiple Nostr profiles so you can swap identities without leaving BitVid.
+                    </p>
+                  </div>
+                  <span class="profile-switcher__badge">Preview</span>
+                </div>
+
+                <div
+                  class="profile-card profile-card--active"
+                  aria-label="Current Nostr profile"
+                  aria-pressed="true"
+                  role="button"
+                  tabindex="0"
+                >
+                  <span class="profile-card__avatar">
+                    <img
+                      id="profileModalAvatar"
+                      src="assets/svg/default-profile.svg"
+                      alt="Active profile avatar"
+                    />
+                  </span>
+                  <span class="profile-card__meta">
+                    <span class="profile-card__topline">
+                      <span class="profile-card__label">Active profile</span>
+                      <a
+                        id="profileChannelLink"
+                        href="#"
+                        class="profile-card__action hidden"
+                      >
+                        View channel
+                      </a>
+                    </span>
+                    <span id="profileModalName" class="profile-card__name">Loading...</span>
+                    <span id="profileModalNpub" class="profile-card__npub">npub1...</span>
+                  </span>
+                </div>
+
+                <div
+                  id="profileSwitcherList"
+                  class="profile-switcher__list"
+                  aria-live="polite"
+                  aria-label="Additional Nostr profiles"
+                ></div>
+
+                <button
+                  type="button"
+                  id="profileAddAccountBtn"
+                  class="profile-switcher__add"
+                  aria-label="Add a new Nostr profile"
+                >
+                  <span class="profile-switcher__addAvatar">
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      stroke="currentColor"
+                      stroke-width="2"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                      aria-hidden="true"
+                    >
+                      <line x1="12" y1="5" x2="12" y2="19" />
+                      <line x1="5" y1="12" x2="19" y2="12" />
+                    </svg>
+                  </span>
+                  <span class="profile-switcher__addCopy">
+                    <span class="profile-switcher__addTitle">Add profile</span>
+                    <span class="profile-switcher__addHint">Link another npub</span>
+                  </span>
+                </button>
+
+                <p class="profile-switcher__helper">
+                  Profiles you add here will stay on this device so you can quickly switch before posting or moderating.
+                </p>
+              </div>
+            </section>
+
+            <section
+              id="profilePaneRelays"
+              class="profile-pane hidden space-y-6"
+              role="tabpanel"
+              aria-labelledby="profileNavRelays"
+            >
+              <div class="space-y-4">
+                <p class="text-sm text-gray-400">
+                  Configure the relays Bitvid will use to discover and publish your videos.
+                </p>
+                <div class="flex flex-col gap-3 sm:flex-row sm:items-end">
+                  <label class="flex-1 text-sm text-gray-300" for="relayInput">
+                    <span class="mb-2 block font-medium">Add a relay</span>
+                    <input
+                      id="relayInput"
+                      type="url"
+                      placeholder="wss://relay.example.com"
+                      class="w-full rounded-md border border-gray-700 bg-gray-800 px-3 py-2 text-sm text-gray-100 placeholder-gray-500 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                    />
+                  </label>
+                  <div class="flex gap-2">
+                    <button
+                      id="addRelayBtn"
+                      type="button"
+                      class="px-4 py-2 rounded-md bg-blue-600 text-sm font-medium text-white hover:bg-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2 focus:ring-offset-gray-900"
+                    >
+                      Add relay
+                    </button>
+                    <button
+                      id="restoreRelaysBtn"
+                      type="button"
+                      class="px-4 py-2 rounded-md bg-gray-800 text-sm font-medium text-gray-200 hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2 focus:ring-offset-gray-900"
+                    >
+                      Restore defaults
+                    </button>
+                  </div>
+                </div>
+              </div>
+              <ul id="relayList" class="space-y-3"></ul>
+            </section>
+
+            <section
+              id="profilePaneBlocked"
+              class="profile-pane hidden space-y-4"
+              role="tabpanel"
+              aria-labelledby="profileNavBlocked"
+            >
+              <p class="text-sm text-gray-400">
+                Creators you block are hidden from your BitVid experience. This
+                list is private to your account.
+              </p>
+              <div class="flex flex-col gap-3 sm:flex-row sm:items-end">
+                <label class="flex-1 text-sm text-gray-300" for="blockedInput">
+                  <span class="mb-2 block font-medium">Creator npub</span>
+                  <input
+                    id="blockedInput"
+                    type="text"
+                    inputmode="text"
+                    autocomplete="off"
+                    class="w-full rounded-md border border-gray-700 bg-gray-800 px-3 py-2 text-sm text-gray-100 placeholder-gray-500 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                    placeholder="npub1..."
+                  />
+                </label>
+                <button
+                  id="addBlockedBtn"
+                  type="button"
+                  class="px-4 py-2 rounded-md bg-blue-600 text-sm font-medium text-white hover:bg-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2 focus:ring-offset-gray-900"
+                >
+                  Block creator
+                </button>
+              </div>
+              <div
+                id="blockedEmpty"
+                class="rounded-lg border border-dashed border-gray-700 p-6 text-center text-sm text-gray-400"
+              >
+                You haven’t blocked any creators yet.
+              </div>
+              <ul id="blockedList" class="space-y-3"></ul>
+            </section>
+            <section
+              id="profilePaneHistory"
+              class="profile-pane hidden space-y-4"
+              role="tabpanel"
+              aria-labelledby="profileNavHistory"
+            >
+              <p class="text-sm text-gray-400">
+                Your recently watched videos appear here so you can jump back into favorites.
+              </p>
+              <div
+                id="profileHistoryFeatureBanner"
+                class="hidden rounded-md border border-amber-500/40 bg-amber-500/10 px-4 py-3 text-sm text-amber-100"
+                role="status"
+                aria-live="polite"
+              ></div>
+              <div class="space-y-4">
+                <div class="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
+                  <div
+                    class="flex flex-wrap gap-2"
+                    role="group"
+                    aria-label="Watch history actions"
+                  >
+                    <button
+                      id="profileHistoryClear"
+                      type="button"
+                      class="inline-flex items-center gap-2 rounded-md bg-gray-800 px-4 py-2 text-sm font-medium text-gray-200 transition hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-gray-900"
+                    >
+                      Clear local cache
+                    </button>
+                    <button
+                      id="profileHistoryRepublish"
+                      type="button"
+                      class="inline-flex items-center gap-2 rounded-md bg-blue-600 px-4 py-2 text-sm font-medium text-white transition hover:bg-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2 focus:ring-offset-gray-900"
+                    >
+                      Republish now
+                    </button>
+                  </div>
+                  <div class="flex items-start gap-3">
+                    <div class="flex flex-col">
+                      <span
+                        id="profileHistoryMetadataLabel"
+                        class="text-sm font-medium text-gray-200"
+                      >
+                        Store titles/thumbnails locally
+                      </span>
+                      <span
+                        id="profileHistoryMetadataDescription"
+                        class="text-xs text-gray-400"
+                      >
+                        When disabled, BitVid skips saving rich metadata to this device.
+                      </span>
+                    </div>
+                    <button
+                      id="profileHistoryMetadataToggle"
+                      type="button"
+                      class="relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer items-center rounded-full border border-gray-600 bg-gray-700 transition focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-gray-900"
+                      role="switch"
+                      aria-checked="true"
+                      aria-labelledby="profileHistoryMetadataLabel"
+                      aria-describedby="profileHistoryMetadataDescription"
+                    >
+                      <span class="sr-only">Toggle local metadata storage</span>
+                      <span
+                        id="profileHistoryMetadataThumb"
+                        class="inline-block h-5 w-5 translate-x-5 transform rounded-full bg-white transition"
+                        aria-hidden="true"
+                      ></span>
+                    </button>
+                  </div>
+                </div>
+                <div
+                  id="profileHistoryToastRegion"
+                  class="space-y-2"
+                  aria-live="polite"
+                  aria-atomic="false"
+                ></div>
+                <div
+                  id="profileHistorySessionWarning"
+                  class="hidden inline-flex items-center gap-2 rounded-full border border-amber-500/50 bg-amber-500/10 px-3 py-1 text-xs font-medium text-amber-100"
+                  role="status"
+                  aria-live="polite"
+                >
+                  Session actor in use. Connect a NIP-07 extension to publish as your main profile.
+                </div>
+                <div id="profileHistoryLoading" class="py-6">
+                  <div id="profileHistoryStatus">
+                    <div
+                      class="sidebar-loading-wrapper"
+                      role="status"
+                      aria-live="polite"
+                    >
+                      <div class="sidebar-loading-indicator">
+                        <span
+                          class="status-spinner status-spinner--inline"
+                          aria-hidden="true"
+                        ></span>
+                        <span class="sidebar-loading-text"
+                          >Fetching watch history from relays…</span
+                        >
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div
+                  id="profileHistoryError"
+                  class="hidden rounded-md border border-red-500/40 bg-red-500/10 px-4 py-3 text-sm text-red-100"
+                  role="alert"
+                  aria-live="assertive"
+                ></div>
+                <div
+                  id="profileHistoryEmpty"
+                  class="hidden rounded-lg border border-dashed border-gray-700 p-6 text-center text-sm text-gray-400"
+                >
+                  You haven’t watched any videos yet.
+                </div>
+                <div id="profileHistoryScroll" class="relative max-h-[420px] overflow-y-auto pr-1">
+                  <div
+                    id="profileHistoryGrid"
+                    class="watch-history-grid watch-history-grid--modal hidden"
+                    role="list"
+                  ></div>
+                  <div id="profileHistorySentinel" class="h-1 w-full"></div>
+                </div>
+              </div>
+            </section>
+            <section
+              id="profilePaneAdmin"
+              class="profile-pane hidden space-y-6"
+              role="tabpanel"
+              aria-labelledby="profileNavAdmin"
+            >
+              <div class="space-y-2">
+                <h3 class="text-lg font-semibold text-white">Platform moderation</h3>
+                <p class="text-sm text-gray-400">
+                  Manage BitVid’s moderator roles and creator allow/block lists. Changes apply instantly across the app.
+                </p>
+              </div>
+
+              <div id="adminModeratorsSection" class="space-y-4 hidden" aria-hidden="true">
+                <div class="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
+                  <h4 class="text-base font-semibold text-white">Moderators</h4>
+                  <p class="text-xs uppercase tracking-wide text-gray-400">
+                    Super Admin only
+                  </p>
+                </div>
+                <p class="text-sm text-gray-400">
+                  Moderators can edit the whitelist and blacklist but cannot manage other moderators or whitelist mode.
+                </p>
+                <div class="flex flex-col gap-3 sm:flex-row sm:items-end">
+                  <label class="flex-1 text-sm text-gray-300" for="adminModeratorInput">
+                    <span class="mb-2 block font-medium">Moderator npub</span>
+                    <input
+                      id="adminModeratorInput"
+                      type="text"
+                      inputmode="text"
+                      autocomplete="off"
+                      class="w-full rounded-md border border-gray-700 bg-gray-800 px-3 py-2 text-sm text-gray-100 placeholder-gray-500 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                      placeholder="npub1..."
+                    />
+                  </label>
+                  <button
+                    id="adminAddModeratorBtn"
+                    type="button"
+                    class="px-4 py-2 rounded-md bg-blue-600 text-sm font-medium text-white hover:bg-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2 focus:ring-offset-gray-900"
+                  >
+                    Add moderator
+                  </button>
+                </div>
+                <div
+                  id="adminModeratorsEmpty"
+                  class="rounded-lg border border-dashed border-gray-700 p-4 text-center text-sm text-gray-400"
+                >
+                  No moderators configured yet.
+                </div>
+                <ul id="adminModeratorList" class="space-y-3"></ul>
+              </div>
+
+              <div id="adminWhitelistSection" class="space-y-4">
+                <div class="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
+                  <h4 class="text-base font-semibold text-white">Whitelist</h4>
+                </div>
+                <p class="text-sm text-gray-400">
+                  Creators listed here remain visible when whitelist mode is enabled. Adding someone removes them from the blacklist.
+                </p>
+                <div class="flex flex-col gap-3 sm:flex-row sm:items-end">
+                  <label class="flex-1 text-sm text-gray-300" for="adminWhitelistInput">
+                    <span class="mb-2 block font-medium">Creator npub</span>
+                    <input
+                      id="adminWhitelistInput"
+                      type="text"
+                      inputmode="text"
+                      autocomplete="off"
+                      class="w-full rounded-md border border-gray-700 bg-gray-800 px-3 py-2 text-sm text-gray-100 placeholder-gray-500 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                      placeholder="npub1..."
+                    />
+                  </label>
+                  <button
+                    id="adminAddWhitelistBtn"
+                    type="button"
+                    class="px-4 py-2 rounded-md bg-blue-600 text-sm font-medium text-white hover:bg-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2 focus:ring-offset-gray-900"
+                  >
+                    Add to whitelist
+                  </button>
+                </div>
+                <div
+                  id="adminWhitelistEmpty"
+                  class="rounded-lg border border-dashed border-gray-700 p-4 text-center text-sm text-gray-400"
+                >
+                  No whitelisted creators yet.
+                </div>
+                <ul id="adminWhitelistList" class="space-y-3"></ul>
+              </div>
+
+              <div id="adminBlacklistSection" class="space-y-4">
+                <div class="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
+                  <h4 class="text-base font-semibold text-white">Blacklist</h4>
+                </div>
+                <p class="text-sm text-gray-400">
+                  Creators on the blacklist are hidden from BitVid everywhere. Adding someone removes them from the whitelist.
+                </p>
+                <div class="flex flex-col gap-3 sm:flex-row sm:items-end">
+                  <label class="flex-1 text-sm text-gray-300" for="adminBlacklistInput">
+                    <span class="mb-2 block font-medium">Creator npub</span>
+                    <input
+                      id="adminBlacklistInput"
+                      type="text"
+                      inputmode="text"
+                      autocomplete="off"
+                      class="w-full rounded-md border border-gray-700 bg-gray-800 px-3 py-2 text-sm text-gray-100 placeholder-gray-500 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                      placeholder="npub1..."
+                    />
+                  </label>
+                  <button
+                    id="adminAddBlacklistBtn"
+                    type="button"
+                    class="px-4 py-2 rounded-md bg-blue-600 text-sm font-medium text-white hover:bg-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2 focus:ring-offset-gray-900"
+                  >
+                    Add to blacklist
+                  </button>
+                </div>
+                <div
+                  id="adminBlacklistEmpty"
+                  class="rounded-lg border border-dashed border-gray-700 p-4 text-center text-sm text-gray-400"
+                >
+                  No blacklisted creators yet.
+                </div>
+                <ul id="adminBlacklistList" class="space-y-3"></ul>
+              </div>
+            </section>
+          </div>
         </div>
-        <p class="text-sm text-gray-400">
-          Some future profile details or settings could go here.
-        </p>
       </div>
 
       <!-- Modal Footer -->
       <div class="p-4 border-t border-gray-700 flex items-center justify-end">
         <button
           id="profileLogoutBtn"
-          class="bg-red-500 text-white px-4 py-2 rounded-md hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2"
+          class="bg-red-500 text-white px-4 py-2 rounded-md hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 focus:ring-offset-gray-900"
         >
           Logout
         </button>

components/revert-video-modal.html

@@ -0,0 +1,121 @@
+<!-- components/revert-video-modal.html -->
+<div
+  id="revertVideoModal"
+  class="fixed inset-0 z-50 hidden"
+  style="background: transparent"
+>
+  <div
+    id="revertVideoModalOverlay"
+    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>
+
+  <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-[95%] lg:max-w-5xl my-0 rounded-lg overflow-hidden relative"
+      style="max-height: 92vh"
+    >
+      <div
+        class="sticky top-0 bg-gradient-to-b from-black/80 to-transparent transition-transform duration-150 p-4 flex items-center justify-between"
+      >
+        <div class="flex flex-col">
+          <h2 id="revertModalTitle" class="text-xl font-bold text-white">
+            Revert Video Note
+          </h2>
+          <p id="revertModalSubtitle" class="text-xs text-gray-400">
+            Review previous versions before restoring an older state.
+          </p>
+        </div>
+        <button
+          id="closeRevertVideoModal"
+          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>
+
+      <div class="p-6 space-y-6 overflow-y-auto" style="max-height: calc(92vh - 4rem)">
+        <div class="rounded-md border border-gray-700 bg-gray-800/60 p-4 text-sm text-gray-300">
+          <p>
+            Selecting an older version will mark any newer edits as reverted.
+            The previous revision will become the active note on the relays.
+          </p>
+          <p class="mt-2 text-xs text-gray-400">
+            Versions are grouped by their <code class="px-1 py-0.5 bg-gray-900/60 rounded border border-gray-700 text-[0.7rem]">d</code>
+            tag or shared <code class="px-1 py-0.5 bg-gray-900/60 rounded border border-gray-700 text-[0.7rem]">videoRootId</code>. This ensures legacy
+            clients see consistent history when multiple edits were published.
+          </p>
+        </div>
+
+        <div class="grid gap-6 lg:grid-cols-[minmax(240px,280px)_1fr]">
+          <aside class="space-y-4">
+            <div class="flex items-center justify-between">
+              <h3 class="text-sm font-semibold text-gray-200">Revision history</h3>
+              <span
+                id="revertHistoryCount"
+                class="rounded-full bg-gray-800 px-2 py-0.5 text-xs text-gray-400"
+              ></span>
+            </div>
+            <div
+              id="revertVersionsList"
+              class="space-y-2 overflow-y-auto pr-1"
+              style="max-height: 48vh"
+            ></div>
+          </aside>
+
+          <section
+            id="revertVersionDetails"
+            class="rounded-lg border border-gray-800 bg-gray-900/70 p-4 text-sm text-gray-200"
+            aria-live="polite"
+          >
+            <div id="revertVersionPlaceholder" class="flex h-full items-center justify-center text-center text-gray-500">
+              Select an earlier revision to inspect its metadata.
+            </div>
+          </section>
+        </div>
+
+        <p
+          id="revertSelectionStatus"
+          class="text-xs text-gray-400"
+        ></p>
+
+        <div class="flex flex-col gap-3 sm:flex-row sm:justify-end">
+          <button
+            type="button"
+            id="cancelRevertVideo"
+            class="w-full sm:w-auto px-4 py-2 rounded-md bg-gray-800 text-gray-200 hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-900 focus:ring-gray-500"
+          >
+            Cancel
+          </button>
+          <button
+            type="button"
+            id="confirmRevertVideo"
+            class="w-full sm:w-auto px-4 py-2 rounded-md bg-red-600 text-white hover:bg-red-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-900 focus:ring-red-500 disabled:opacity-60 disabled:cursor-not-allowed"
+            disabled
+          >
+            Revert to selected version
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

components/sidebar.html

@@ -34,6 +34,17 @@
             />
             <span class="sidebar-text">Explore</span>
           </a>
+          <a
+            href="#view=history"
+            class="flex items-center py-2 px-4 hover:bg-gray-700 rounded font-semibold"
+          >
+            <img
+              src="assets/svg/history-icon.svg"
+              alt="History"
+              class="w-6 h-6 mr-3 flex-shrink-0"
+            />
+            <span class="sidebar-text">History</span>
+          </a>
           <a
             id="subscriptionsLink"
             href="#view=subscriptions"

components/upload-modal.html

@@ -19,7 +19,7 @@
     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-[90%] lg:max-w-6xl my-0 rounded-lg overflow-hidden relative"
+      class="modal-content bg-gray-900 w-full max-w-[90%] lg:max-w-6xl my-0 rounded-lg overflow-y-auto relative"
       style="max-height: 90vh"
     >
       <!-- Top Bar (similar to video-modal) -->
@@ -50,8 +50,34 @@
       </div>
 
       <!-- Form Content -->
-      <div class="p-6 space-y-4">
-        <form id="uploadForm" class="space-y-4">
+      <div class="p-6 space-y-6">
+        <div class="flex justify-center">
+          <div
+            class="inline-flex items-center rounded-full bg-gray-800/80 p-1 text-sm"
+            role="group"
+            aria-label="Upload mode selector"
+          >
+            <button
+              type="button"
+              class="upload-mode-toggle flex-1 rounded-full px-4 py-2 font-medium text-gray-300 transition-colors hover:bg-gray-700/70 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 focus-visible:ring-offset-gray-900"
+              data-upload-mode="custom"
+              aria-pressed="true"
+            >
+              Custom
+            </button>
+            <button
+              type="button"
+              class="upload-mode-toggle flex-1 rounded-full px-4 py-2 font-medium text-gray-300 transition-colors hover:bg-gray-700/70 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 focus-visible:ring-offset-gray-900"
+              data-upload-mode="cloudflare"
+              aria-pressed="false"
+            >
+              Cloudflare
+            </button>
+          </div>
+        </div>
+
+        <div id="customUploadSection">
+          <form id="uploadForm" class="space-y-4">
           <p class="text-sm text-gray-400">
             Share a title plus either a hosted video URL or a magnet link. Providing both helps Bitvid fall back gracefully.
           </p>
@@ -121,7 +147,6 @@
               cost control.
             </p>
           </div>
-
           <div>
             <label
               for="uploadThumbnail"
@@ -147,6 +172,23 @@
               class="mt-1 block w-full rounded-md border-gray-700 bg-gray-800 text-gray-100 focus:border-blue-500 focus:ring-blue-500"
             ></textarea>
           </div>
+
+          <div class="flex items-start gap-3 rounded-md border border-gray-800 bg-black/30 p-3">
+            <input
+              type="checkbox"
+              id="uploadEnableComments"
+              class="mt-1 h-5 w-5 rounded border-gray-600 bg-gray-800 text-blue-500 focus:ring-blue-500"
+              checked
+            />
+            <div>
+              <label for="uploadEnableComments" class="text-sm font-medium text-gray-200"
+                >Enable comments</label
+              >
+              <p class="mt-1 text-xs text-gray-400">
+                Keep this on to let viewers discuss the video once comment threads launch.
+              </p>
+            </div>
+          </div>
           <!--
           <div class="flex items-center space-x-2">
             <input
@@ -166,6 +208,300 @@
             Publish
           </button>
         </form>
+        </div>
+
+        <div id="cloudflareUploadSection" class="hidden">
+          <div class="space-y-8">
+            <p class="rounded-md border border-amber-500/40 bg-amber-500/10 p-3 text-sm text-amber-300">
+              This feature is experimental and may not be working correctly.
+            </p>
+            <section class="rounded-lg border border-gray-800 bg-gray-900/60 p-5">
+              <div class="mb-4 flex items-center justify-between">
+                <h3 class="text-lg font-semibold text-gray-100">
+                  Cloudflare R2 credentials
+                </h3>
+                <span class="text-xs uppercase tracking-wide text-gray-500">
+                  stored locally
+                </span>
+              </div>
+              <p class="mb-4 text-sm text-gray-400">
+                Paste your Cloudflare R2 API credentials. We keep them in your
+                browser so uploads happen client-side.
+              </p>
+              <form id="cloudflareSettingsForm" class="space-y-4">
+                <div class="grid gap-3 md:grid-cols-2">
+                  <div>
+                    <label for="r2AccountId" class="block text-sm font-medium text-gray-200"
+                      >Account ID</label
+                    >
+                    <input
+                      id="r2AccountId"
+                      type="text"
+                      autocomplete="off"
+                      class="mt-1 w-full rounded-md border border-gray-700 bg-gray-800 px-3 py-2 text-gray-100 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                      placeholder="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
+                      required
+                    />
+                  </div>
+                  <div>
+                    <label for="r2AccessKeyId" class="block text-sm font-medium text-gray-200"
+                      >S3 Access Key ID</label
+                    >
+                    <input
+                      id="r2AccessKeyId"
+                      type="text"
+                      autocomplete="off"
+                      class="mt-1 w-full rounded-md border border-gray-700 bg-gray-800 px-3 py-2 text-gray-100 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                      placeholder="AKIA..."
+                      required
+                    />
+                  </div>
+                </div>
+                <div>
+                  <label for="r2SecretAccessKey" class="block text-sm font-medium text-gray-200"
+                    >S3 Secret Access Key</label
+                  >
+                  <input
+                    id="r2SecretAccessKey"
+                    type="password"
+                    autocomplete="off"
+                    class="mt-1 w-full rounded-md border border-gray-700 bg-gray-800 px-3 py-2 text-gray-100 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                    required
+                  />
+                </div>
+                <div class="border-t border-gray-800 pt-4">
+                  <button
+                    type="button"
+                    id="cloudflareAdvancedToggle"
+                    class="flex items-center gap-2 text-sm font-medium text-gray-300 transition-colors hover:text-white focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-gray-900"
+                    aria-expanded="false"
+                    aria-controls="cloudflareAdvancedFields"
+                  >
+                    <svg
+                      id="cloudflareAdvancedToggleIcon"
+                      xmlns="http://www.w3.org/2000/svg"
+                      class="h-4 w-4 text-gray-300 transition-transform duration-150 transform"
+                      fill="none"
+                      viewBox="0 0 24 24"
+                      stroke="currentColor"
+                      stroke-width="2"
+                    >
+                      <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
+                    </svg>
+                    <span id="cloudflareAdvancedToggleLabel">Show advanced options</span>
+                  </button>
+                  <div
+                    id="cloudflareAdvancedFields"
+                    class="mt-3 space-y-4 hidden"
+                  >
+                    <div>
+                      <label for="r2ApiToken" class="block text-sm font-medium text-gray-200"
+                        >Cloudflare API Token (optional)</label
+                      >
+                      <input
+                        id="r2ApiToken"
+                        type="password"
+                        autocomplete="off"
+                        class="mt-1 w-full rounded-md border border-gray-700 bg-gray-800 px-3 py-2 text-gray-100 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                        placeholder="Token with Workers R2 Storage Write"
+                      />
+                      <p class="mt-1 text-xs text-gray-500">
+                        Used to create buckets, configure CORS, and attach domains automatically.
+                      </p>
+                    </div>
+                    <div class="grid gap-3 md:grid-cols-2">
+                      <div>
+                        <label for="r2ZoneId" class="block text-sm font-medium text-gray-200"
+                          >Zone ID (optional)</label
+                        >
+                        <input
+                          id="r2ZoneId"
+                          type="text"
+                          autocomplete="off"
+                          class="mt-1 w-full rounded-md border border-gray-700 bg-gray-800 px-3 py-2 text-gray-100 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                          placeholder="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
+                        />
+                        <p class="mt-1 text-xs text-gray-500">
+                          Required when you want us to attach a custom domain on your behalf.
+                        </p>
+                      </div>
+                      <div>
+                        <label for="r2BaseDomain" class="block text-sm font-medium text-gray-200"
+                          >Base domain (optional)</label
+                        >
+                        <input
+                          id="r2BaseDomain"
+                          type="text"
+                          autocomplete="off"
+                          class="mt-1 w-full rounded-md border border-gray-700 bg-gray-800 px-3 py-2 text-gray-100 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                          placeholder="cdn.example.com"
+                        />
+                        <p class="mt-1 text-xs text-gray-500">
+                          We'll attach <code class="rounded bg-gray-800 px-1 py-0.5">npub.&lt;baseDomain&gt;</code>.
+                          Leave blank to use the managed <code class="rounded bg-gray-800 px-1 py-0.5">*.r2.dev</code> domain.
+                        </p>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div class="flex flex-wrap items-center gap-3">
+                  <button
+                    type="submit"
+                    class="rounded-md bg-blue-500 px-4 py-2 text-sm font-semibold text-white transition hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                  >
+                    Save settings
+                  </button>
+                  <button
+                    type="button"
+                    id="cloudflareClearSettings"
+                    class="rounded-md border border-gray-600 px-4 py-2 text-sm font-semibold text-gray-200 transition hover:border-gray-500 hover:text-white focus:outline-none focus:ring-2 focus:ring-gray-500"
+                  >
+                    Clear
+                  </button>
+                  <span
+                    id="cloudflareSettingsStatus"
+                    class="text-xs text-gray-400"
+                    role="status"
+                  ></span>
+                </div>
+              </form>
+            </section>
+
+            <section class="rounded-lg border border-gray-800 bg-gray-900/60 p-5">
+              <div class="mb-4">
+                <h3 class="text-lg font-semibold text-gray-100">
+                  Upload &amp; publish
+                </h3>
+                <p class="mt-1 text-sm text-gray-400">
+                  Choose a file, we will upload it to R2, fill the hosted URL,
+                  and publish your note automatically.
+                </p>
+              </div>
+              <form id="cloudflareUploadForm" class="space-y-4">
+                <div>
+                  <label for="cloudflareTitle" class="block text-sm font-medium text-gray-200"
+                    >Title</label
+                  >
+                  <input
+                    id="cloudflareTitle"
+                    type="text"
+                    required
+                    class="mt-1 w-full rounded-md border border-gray-700 bg-gray-800 px-3 py-2 text-gray-100 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                  />
+                </div>
+                <div>
+                  <label for="cloudflareDescription" class="block text-sm font-medium text-gray-200"
+                    >Description (optional)</label
+                  >
+                  <textarea
+                    id="cloudflareDescription"
+                    rows="3"
+                    class="mt-1 w-full rounded-md border border-gray-700 bg-gray-800 px-3 py-2 text-gray-100 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                  ></textarea>
+                </div>
+                <div class="grid gap-3 md:grid-cols-2">
+                  <div>
+                    <label for="cloudflareThumbnail" class="block text-sm font-medium text-gray-200"
+                      >Thumbnail URL (optional)</label
+                    >
+                    <input
+                      id="cloudflareThumbnail"
+                      type="url"
+                      class="mt-1 w-full rounded-md border border-gray-700 bg-gray-800 px-3 py-2 text-gray-100 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                    />
+                  </div>
+                  <div>
+                    <label for="cloudflareMagnet" class="block text-sm font-medium text-gray-200"
+                      >Magnet link (optional)</label
+                    >
+                    <input
+                      id="cloudflareMagnet"
+                      type="text"
+                      placeholder="magnet:?xt=urn:btih:..."
+                      class="mt-1 w-full rounded-md border border-gray-700 bg-gray-800 px-3 py-2 text-gray-100 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                    />
+                  </div>
+                </div>
+                <div class="grid gap-3 md:grid-cols-2">
+                  <input
+                    id="cloudflareWs"
+                    type="url"
+                    placeholder="Web seed (ws=)"
+                    class="w-full rounded-md border border-gray-700 bg-gray-800 px-3 py-2 text-gray-100 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                  />
+                  <input
+                    id="cloudflareXs"
+                    type="url"
+                    placeholder=".torrent URL (xs=)"
+                    class="w-full rounded-md border border-gray-700 bg-gray-800 px-3 py-2 text-gray-100 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                  />
+                </div>
+                <div class="flex items-start gap-3 rounded-md border border-gray-800 bg-black/30 p-3">
+                  <input
+                    type="checkbox"
+                    id="cloudflareEnableComments"
+                    class="mt-1 h-5 w-5 rounded border-gray-600 bg-gray-800 text-blue-500 focus:ring-blue-500"
+                    checked
+                  />
+                  <div>
+                    <label for="cloudflareEnableComments" class="text-sm font-medium text-gray-200"
+                      >Enable comments</label
+                    >
+                    <p class="mt-1 text-xs text-gray-400">
+                      Publish with comments switched on. Toggle off to quietly disable replies on this video.
+                    </p>
+                  </div>
+                </div>
+                <div>
+                  <label for="cloudflareFile" class="block text-sm font-medium text-gray-200"
+                    >Video or HLS file</label
+                  >
+                  <input
+                    id="cloudflareFile"
+                    type="file"
+                    accept="video/*,.m3u8,.ts,.mp4,.webm,.mov,.mkv,.mpg,.mpeg"
+                    class="mt-1 w-full rounded-md border border-dashed border-gray-600 bg-gray-900 px-3 py-4 text-sm text-gray-300 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                    required
+                  />
+                  <p class="mt-1 text-xs text-gray-500">
+                    We use multipart uploads with automatic bucket creation.
+                    Large files are supported.
+                  </p>
+                </div>
+                <div class="rounded-md border border-gray-800 bg-black/40 p-3 text-xs text-gray-400">
+                  <p>
+                    <strong class="text-gray-200">Bucket preview:</strong>
+                    <span id="cloudflareBucketPreview" class="ml-1">We'll show your
+                      bucket and public domain after setup.</span>
+                  </p>
+                </div>
+                <div class="space-y-2">
+                  <div
+                    id="cloudflareProgressBar"
+                    class="hidden h-2 w-full overflow-hidden rounded-full bg-gray-800"
+                  >
+                    <div
+                      id="cloudflareProgressFill"
+                      class="h-full w-0 bg-blue-500 transition-all duration-150"
+                    ></div>
+                  </div>
+                  <p
+                    id="cloudflareUploadStatus"
+                    class="text-xs text-gray-400"
+                    role="status"
+                  ></p>
+                </div>
+                <button
+                  type="submit"
+                  id="cloudflareUploadButton"
+                  class="w-full rounded-md bg-blue-500 px-4 py-2 text-sm font-semibold text-white transition hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 disabled:cursor-not-allowed disabled:bg-blue-900"
+                >
+                  Upload to R2 &amp; publish
+                </button>
+              </form>
+            </section>
+          </div>
+        </div>
       </div>
     </div>
   </div>

components/video-modal.html

@@ -1,15 +1,11 @@
 <!-- components/video-modal.html -->
-<div id="playerModal" class="fixed inset-0 bg-black/90 z-50 hidden">
-  <div
-    class="modal-container h-full w-full flex items-start justify-center overflow-y-auto"
-  >
-    <div
-      class="modal-content bg-gray-900 w-full max-w-[90%] lg:max-w-6xl my-0 rounded-lg overflow-hidden relative"
-    >
+<div id="playerModal" class="player-modal hidden">
+  <div class="player-modal__container">
+    <div class="player-modal__content">
       <!-- Navigation bar - sliding at top -->
       <div
         id="modalNav"
-        class="sticky top-0 z-60 bg-gradient-to-b from-black/80 to-transparent transition-transform duration-150"
+        class="modal-nav sticky top-0 z-60 transition-transform duration-150"
       >
         <div class="flex items-center px-6 py-4">
           <button
@@ -31,19 +27,7 @@
               <path d="M15 18l-6-6 6-6" />
             </svg>
           </button>
-        </div>
-      </div>
-
-      <div class="video-container w-full bg-black">
-        <video id="modalVideo" class="w-full aspect-video" controls></video>
-      </div>
-
-      <div class="video-info p-6">
-        <!-- Title and icons row -->
-        <div class="flex items-center justify-between mb-2">
-          <h2 id="videoTitle" class="text-2xl font-bold text-white"></h2>
-          <div class="flex items-center space-x-2">
-            <!-- Copy Magnet Button (circular) -->
+          <div class="modal-actions">
             <button id="copyMagnetBtn" class="icon-button">
               <img
                 src="assets/svg/copy-magnet.svg"
@@ -51,7 +35,6 @@
                 class="icon-image"
               />
             </button>
-            <!-- Zap Button (circular) -->
             <button
               id="modalZapBtn"
               type="button"
@@ -64,7 +47,6 @@
                 class="icon-image"
               />
             </button>
-            <!-- Share Button (circular) -->
             <button id="shareBtn" class="icon-button">
               <img
                 src="assets/svg/share-video.svg"
@@ -72,14 +54,89 @@
                 class="icon-image"
               />
             </button>
+            <div
+              class="modal-actions__overflow"
+              data-more-menu-wrapper="true"
+            >
+              <button
+                id="modalMoreBtn"
+                type="button"
+                class="icon-button"
+                aria-haspopup="true"
+                aria-expanded="false"
+                aria-label="More"
+                data-more-dropdown="modal"
+              >
+                <img src="assets/svg/ellipsis.svg" alt="More" class="w-5 h-5" />
+              </button>
+              <div
+                id="moreDropdown-modal"
+                class="hidden absolute right-0 top-14 w-44 rounded-md shadow-lg bg-gray-800 ring-1 ring-black ring-opacity-5 z-50"
+                role="menu"
+                data-more-menu="true"
+              >
+                <div class="py-1">
+                  <button
+                    class="block w-full text-left px-4 py-2 text-sm text-gray-100 hover:bg-gray-700"
+                    data-action="open-channel"
+                    data-context="modal"
+                  >
+                    Open channel
+                  </button>
+                  <button
+                    class="block w-full text-left px-4 py-2 text-sm text-gray-100 hover:bg-gray-700"
+                    data-action="copy-link"
+                    data-context="modal"
+                  >
+                    Copy link
+                  </button>
+                  <button
+                    class="block w-full text-left px-4 py-2 text-sm text-red-400 hover:bg-red-700 hover:text-white"
+                    data-action="blacklist-author"
+                    data-context="modal"
+                    data-blacklist-menu="true"
+                  >
+                    Blacklist creator
+                  </button>
+                  <button
+                    class="block w-full text-left px-4 py-2 text-sm text-red-400 hover:bg-red-700 hover:text-white"
+                    data-action="block-author"
+                    data-context="modal"
+                  >
+                    Block creator
+                  </button>
+                  <button
+                    class="block w-full text-left px-4 py-2 text-sm text-gray-100 hover:bg-gray-700"
+                    data-action="report"
+                    data-context="modal"
+                  >
+                    Report
+                  </button>
+                </div>
+              </div>
+            </div>
           </div>
         </div>
+      </div>
+
+      <div class="player-modal__video modal-video-shell">
+        <video id="modalVideo" class="w-full aspect-video" controls></video>
+      </div>
+
+      <div class="player-modal__info modal-info-panel">
+        <!-- Title and icons row -->
+        <div class="flex items-center justify-between mb-2">
+          <h2 id="videoTitle" class="text-2xl font-bold text-white"></h2>
+        </div>
 
         <!-- Video Timestamp -->
         <div
           class="flex items-center justify-between text-sm text-gray-400 mb-4"
         >
-          <span id="videoTimestamp">just now</span>
+          <div class="flex items-center gap-2 modal-meta">
+            <span id="videoTimestamp">just now</span>
+            <span id="videoViewCount" class="modal-view-count">– views</span>
+          </div>
           <div id="modalStatus" class="text-gray-300">
             Initializing... Just give it a sec.
           </div>

config/instance-config.js

@@ -0,0 +1,179 @@
+// config/instance-config.js
+// -----------------------------------------------------------------------------
+// BitVid instance configuration
+// -----------------------------------------------------------------------------
+//
+// This file consolidates the values that operators usually customize when they
+// deploy their own BitVid instance. Update the exports below to match your
+// environment, commit the changes, and redeploy. Leaving this file in the repo
+// (instead of hidden in environment variables) makes it easy for future
+// maintainers to understand how your instance is configured.
+//
+// Each setting includes guidance about how BitVid uses the value and what
+// adjustments are safe. When in doubt, mirror the structure shown here so other
+// contributors can follow along.
+
+/**
+ * The primary administrator for this BitVid instance.
+ *
+ * BitVid treats this Nostr public key (npub) as the "Super Admin". This user
+ * cannot be removed from moderator lists, and only they can promote new
+ * moderators or toggle whitelist-only mode. Replace the string below with the
+ * npub of the account you want to act as the ultimate authority for your
+ * deployment.
+ */
+export const ADMIN_SUPER_NPUB =
+  "npub15jnttpymeytm80hatjqcvhhqhzrhx6gxp8pq0wn93rhnu8s9h9dsha32lx";
+
+/**
+ * Storage key used to persist whitelist-only mode in the browser.
+ *
+ * You usually do not need to change this, but the export lives here so that all
+ * whitelist-related knobs are grouped together. If you do change the key, make
+ * sure to migrate any previously stored values in localStorage.
+ */
+export const ADMIN_WHITELIST_MODE_STORAGE_KEY = "bitvid_admin_whitelist_mode";
+
+/**
+ * Whether whitelist-only mode should be enabled the first time an operator
+ * loads the admin dashboard.
+ *
+ * Set this to `true` if you want BitVid to start with whitelist-only access and
+ * require an explicit opt-out. Set to `false` to allow all creators by default.
+ * Operators can still toggle the mode at runtime; this value only controls the
+ * default state when no preference has been stored in localStorage yet.
+ */
+export const DEFAULT_WHITELIST_MODE_ENABLED = true;
+
+/**
+ * Nostr kind used when persisting watch history events.
+ *
+ * BitVid’s roadmap standardizes on kind 30079 so that watch events, view logs,
+ * and media metadata stay in the same family of documents. During the rollout
+ * from the legacy 30078 payloads, clients query both kinds so historical data
+ * keeps syncing; remove the compatibility fetch once all writers emit the new
+ * kind. Operators that want to experiment with a separate list kind (for
+ * example, a NIP-51 collection) can flip this number so long as their relays
+ * accept the chosen kind.
+ */
+export const WATCH_HISTORY_KIND = 30079;
+
+/**
+ * Identifier applied to the watch-history list when storing it on relays.
+ *
+ * This becomes the value of the `d` tag so clients can find the correct list
+ * without guessing. Customize the slug if you need isolation between multiple
+ * BitVid deployments that share relays, but keep it stable once clients begin
+ * syncing history.
+ */
+export const WATCH_HISTORY_LIST_IDENTIFIER = "watch-history";
+
+/**
+ * Legacy identifiers that BitVid clients should continue honoring when
+ * fetching historical watch-history snapshots.
+ */
+export const WATCH_HISTORY_LEGACY_LIST_IDENTIFIERS = Object.freeze([
+  "watch-history:v2:index",
+]);
+
+/**
+ * Whether to enable the V2 encrypted watch-history service.
+ *
+ * The runtime flag that controls this feature defaults to `false` so that new
+ * deployments stick with the analytics-only view flow until operators opt in.
+ * To enable V2, set `window.__BITVID_RUNTIME_FLAGS__.FEATURE_WATCH_HISTORY_V2 = true`
+ * in a bootstrap script (or override the value before the app loads). When the
+ * flag stays off, BitVid still emits legacy view events and will honor
+ * existing watch-history reads per plan §12, but the sync UI will surface a
+ * disabled banner instead of querying relays.
+ */
+/**
+ * Maximum number of watch-history entries to retain per user.
+ *
+ * The roadmap targets a rolling window of 1,500 items so the UI can highlight
+ * recently played videos without ballooning relay storage. Adjust this cap up
+ * or down depending on your retention and privacy policies; smaller values
+ * reduce storage pressure while larger ones surface a deeper backlog.
+ */
+export const WATCH_HISTORY_MAX_ITEMS = 1500;
+
+/**
+ * Whether clients should resolve watch-history entries in batches.
+ *
+ * When enabled, BitVid fetches video metadata in grouped queries instead of
+ * issuing one request per entry. Operators with relays that struggle under
+ * bursty loads can disable batching at the cost of additional round trips.
+ */
+export const WATCH_HISTORY_BATCH_RESOLVE = true;
+
+/**
+ * Maximum number of canonical items each batched watch-history response should
+ * include.
+ *
+ * Leave this as `null` (the default) to return the full
+ * `WATCH_HISTORY_MAX_ITEMS` window, even when batching is enabled. Deployments
+ * that page through histories in smaller slices can set a positive integer to
+ * cap the resolver output so pagination and API responses stay aligned.
+ */
+export const WATCH_HISTORY_BATCH_PAGE_SIZE = null;
+
+/**
+ * Maximum size of the JSON payload for each watch-history chunk, measured
+ * before encryption.
+ *
+ * BitVid splits large histories across multiple events to stay within relay
+ * limits. This cap keeps individual chunks under roughly 60 KB so that
+ * encrypted payloads remain relay-friendly even after base64 expansion.
+ * Lower the number if your relays enforce tighter limits.
+ */
+export const WATCH_HISTORY_PAYLOAD_MAX_BYTES = 60000;
+
+/**
+ * Number of watch-history events to request when syncing from relays.
+ *
+ * Chunked histories can span several events. This fetch limit should exceed
+ * the maximum number of chunks you expect a client to publish in one snapshot
+ * so the UI can stitch the full list back together.
+ */
+export const WATCH_HISTORY_FETCH_EVENT_LIMIT = 64;
+
+/**
+ * How long clients should cache watch-history snapshots in localStorage.
+ *
+ * A 24-hour window keeps recently played videos available across reloads
+ * without requiring a fresh relay sync on every visit. Increase the value for
+ * longer-lived caches or decrease it if your deployment needs tighter
+ * retention guarantees.
+ */
+export const WATCH_HISTORY_CACHE_TTL_MS = 24 * 60 * 60 * 1000;
+
+/**
+ * How long the view counter should treat repeat plays as duplicates.
+ *
+ * BitVid de-duplicates view events that occur within this rolling window so
+ * quick refreshes or stalled replays do not inflate the totals. The default of
+ * 24 hours mirrors common analytics tooling, but you can tighten or relax the
+ * window depending on how aggressively you want to filter repeat traffic.
+ */
+export const VIEW_COUNT_DEDUPE_WINDOW_SECONDS = 86_400;
+
+/**
+ * How far back the view counter should hydrate historical events during
+ * backfills.
+ *
+ * When a new analytics worker starts up, it can walk older Nostr events to
+ * reconstruct totals. Limiting the backfill horizon keeps catch-up jobs
+ * bounded—90 days covers recent trends without hammering relays for year-old
+ * history. Increase the number if you need deeper analytics or shrink it for
+ * lighter start-up workloads.
+ */
+export const VIEW_COUNT_BACKFILL_MAX_DAYS = 90;
+
+/**
+ * How long clients can trust cached view totals before re-fetching.
+ *
+ * Cached results smooth out traffic spikes and reduce relay load. Five minutes
+ * strikes a balance between responsiveness and efficiency; lower the TTL for
+ * fresher dashboards or raise it if your analytics traffic is heavy.
+ */
+export const VIEW_COUNT_CACHE_TTL_MS = 5 * 60 * 1000;

css/tailwind.generated.css

@@ -0,0 +1 @@
+*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/*! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.\!container{width:100%!important}.container{width:100%}@media (min-width:640px){.\!container{max-width:640px!important}.container{max-width:640px}}@media (min-width:768px){.\!container{max-width:768px!important}.container{max-width:768px}}@mediLine truncated

css/tailwind.source.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

docs/nostr-analytics.md

@@ -0,0 +1,30 @@
+# Nostr Analytics Knobs
+
+BitVid's view counter emits Nostr events so operators can track engagement without duplicating storage. Tune the following exports in `config/instance-config.js` to match your retention and performance goals:
+
+- `VIEW_COUNT_DEDUPE_WINDOW_SECONDS` (default: `86_400`): repeat plays from the same viewer inside this window are treated as duplicates so stalled reloads do not inflate totals. Shorten the window to count more aggressive replays, or extend it if you want conservative numbers.
+- `VIEW_COUNT_BACKFILL_MAX_DAYS` (default: `90`): controls how far back hydrators should walk history when a new analytics worker boots. Longer windows deliver deeper trend lines at the cost of heavier relay scans.
+- `VIEW_COUNT_CACHE_TTL_MS` (default: `5 * 60 * 1000`): defines how long cached aggregates remain trustworthy before clients refresh them. Lower values surface spikes faster, while higher ones smooth traffic for relay-friendly dashboards.
+
+Most operators can ship with the defaults—24-hour deduplication, a 90-day backfill horizon, and five-minute cache TTLs match what we run in production. Deviate only if your relays have unusual load constraints or your reporting needs stricter fidelity.
+
+## View Event Lifecycle
+
+### Anonymous session keys
+
+Playback telemetry runs even when a viewer has not connected a Nostr account. The client first calls [`ensureSessionActor`](../js/nostr.js#L2011-L2105) to mint or restore an ephemeral keypair stored in `localStorage`. That session actor signs view events until the user authenticates, ensuring relays still see consistent pubkeys without blocking anonymous playback.
+
+### Publish latency expectations
+
+When a player crosses the 12-second watch threshold, BitVid invokes [`publishViewEvent`](../js/nostr.js#L2159-L2323) through the view-only [`recordVideoView`](../js/nostr.js#L4516-L4555) contract. The helper considers the publish successful as soon as any configured relay acknowledges the event, which in practice keeps latency under a second on public relays. The UI optimistically increments totals by feeding the signed event into [`ingestLocalViewEvent`](../js/viewCounter.js#L608-L640), so cards and modals reflect the new view immediately even while other relays finish syncing.
+
+The watch history pipeline has been retired; `recordVideoView` now focuses solely on analytics publishing.
+
+To avoid double-counting the same session, the playback stack respects the cooldown keys generated in [`js/app.js`](../js/app.js#L6825-L6893). The combination of pointer identity and viewer fingerprint prevents re-logging until the dedupe window expires or the user switches accounts.
+
+Every view event includes a unique `#d` tag derived from the pointer scope, the signing actor, and high-entropy randomness. Because kind `30079` is parameterized, this `#d` tag is what keeps individual view notes permanent—without it, a fresh event would overwrite the previous one from the same actor. Leave the tag intact (or provide one when overriding the schema) so relays retain the full stream of view history.
+
+### Hydration, COUNT, and UI sync
+
+Background hydration keeps optimistic counts honest. The view counter subscribes to live events while simultaneously fetching historical lists and issuing a `COUNT` request. Whenever the authoritative total returned by `COUNT` exceeds the locally accumulated sum, the hydration routine overwrites the optimistic value so the UI stays aligned with relay truth. If `COUNT` falls back (because relays reject it or the browser is offline), the locally deduped history still anchors totals, and the next successful hydration pass reconciles any drift. This interplay means cards, modals, and dashboards settle on the same number without requiring a full page reload.
+

docs/nostr-auth.md

@@ -0,0 +1,73 @@
+# Nostr authentication storage
+
+Bitvid keeps lightweight state in `localStorage` so the UI can remember which
+accounts signed in recently. This document explains the storage schema so future
+updates can evolve it without breaking existing users.
+
+## Storage keys
+
+- `bitvid:profileCache:v1` – short-lived metadata cache for profile names and
+  avatars. See `js/app.js` for TTL and eviction rules.
+- `bitvid:savedProfiles:v1` – persistent list of accounts the user authenticated
+  with in this browser.
+
+Both keys live in the main origin scope. Clearing one should not affect the
+other.
+
+## Saved profile schema
+
+`bitvid:savedProfiles:v1` is a JSON object with the shape:
+
+```json
+{
+  "version": 1,
+  "entries": [
+    {
+      "pubkey": "<hex-encoded pubkey>",
+      "npub": "<bech32 npub, optional>",
+      "name": "<cached display name>",
+      "picture": "<cached avatar URL>",
+      "authType": "<auth strategy>"
+    }
+  ],
+  "activePubkey": "<hex pubkey or null>"
+}
+```
+
+Notes:
+
+- `pubkey` always stores a lowercase 64-character hex string and is the primary
+  dedupe key.
+- `npub` is optional. When omitted, the UI regenerates it on load using
+  `NostrTools.nip19.npubEncode`.
+- `name` and `picture` are cached hints that keep the profile switcher snappy.
+  They may be empty strings and should be treated as hints, not the source of
+  truth.
+- `activePubkey` tracks the last account that successfully authenticated in this
+  browser. It may be `null` when the user logs out but keeps saved entries.
+
+### `authType` enum
+
+`authType` describes how the profile authenticated:
+
+- `"nip07"` – Browser extension flow (current default).
+- `"nsec"` – Reserved for future direct key import or signer integrations. New
+  auth strategies should pick a distinct string and document how migration works
+  alongside any recovery tooling.
+
+When the app reads stored entries it normalises unknown values back to
+`"nip07"` but keeps recognised alternatives intact.
+
+## Migration notes
+
+Earlier builds only persisted a single `userPubKey` string. During startup the
+app now:
+
+1. Attempts to read `bitvid:savedProfiles:v1` and validate the payload.
+2. If the key is missing (or malformed) but a legacy `userPubKey` entry exists,
+   it seeds `savedProfiles` with that value and writes the new structure.
+3. Once the JSON payload is written successfully, the legacy `userPubKey` entry
+   is removed.
+
+Future migrations should follow the same pattern: validate, normalise, write the
+new format, then clean up legacy keys to avoid data loss.

docs/nostr-event-schemas.md

@@ -0,0 +1,83 @@
+# Nostr event schemas
+
+BitVid now centralizes every note that it publishes to Nostr in
+[`js/nostrEventSchemas.js`](../js/nostrEventSchemas.js). The module defines the
+kind, required tags, and content format for each note type so troubleshooting
+no longer requires hunting through the codebase. It also exposes helpers for
+building events and for overriding the schema at runtime when you need to
+experiment.
+
+## Runtime helpers
+
+```js
+import {
+  NOTE_TYPES,
+  getNostrEventSchema,
+  setNostrEventSchemaOverrides,
+  buildVideoPostEvent,
+} from "./nostrEventSchemas.js";
+
+// Inspect the current schema
+console.log(getNostrEventSchema(NOTE_TYPES.VIDEO_POST));
+
+// Temporarily override the kind while debugging
+setNostrEventSchemaOverrides({
+  [NOTE_TYPES.VIDEO_POST]: { kind: 30000 },
+});
+
+// Build an event with the active schema
+const event = buildVideoPostEvent({
+  pubkey,
+  created_at: Math.floor(Date.now() / 1000),
+  dTagValue: "debug-video",
+  content: { version: 3, title: "Test", videoRootId: "debug" },
+});
+```
+
+In the browser you can call the same helpers from DevTools via
+`window.BitVidNostrEvents` and `window.BitVidNostrEventOverrides`.
+
+When managing relay metadata, use `buildRelayListEvent` so the resulting
+replaceable event follows NIP-65 (`kind:10002`) with `"r"` tags describing the
+read/write split.
+
+## Event catalogue
+
+| Note | Kind (default) | Tags | Content format |
+| --- | --- | --- | --- |
+| Video post (`NOTE_TYPES.VIDEO_POST`) | `30078` | `['t','video']`, `['d', <stable video identifier>]` plus optional schema append tags | JSON payload using Content Schema v3 (`version`, `title`, optional `url`, `magnet`, `thumbnail`, `description`, `mode`, `videoRootId`, `deleted`, `isPrivate`, `enableComments`, `ws`, `xs`) |
+| NIP-94 mirror (`NOTE_TYPES.VIDEO_MIRROR`) | `1063` | Tags forwarded from `publishVideo` (URL, mime type, thumbnail, alt text, magnet) | Plain text alt description |
+| Relay list (`NOTE_TYPES.RELAY_LIST`) | `10002` | Repeating `['r', <relay url>]` tags, optionally with a marker of `'read'` or `'write'` to scope the relay; marker omitted for read/write relays | Empty content |
+| View counter (`NOTE_TYPES.VIEW_EVENT`) | `WATCH_HISTORY_KIND` (default `30079`, clients also read legacy `30078`) | Canonical tag set: `['t','view']`, a pointer tag (`['e', <eventId>]` or `['a', <address>]`), and a stable dedupe tag `['d', <view identifier>]`, with optional `['session','true']` when a session actor signs; schema overrides may append extra tags. `['video', ...]` is supported for legacy overrides only. | Optional plaintext message |
+| Watch history index (`NOTE_TYPES.WATCH_HISTORY_INDEX`) | `WATCH_HISTORY_KIND` (default `30079`, clients also read legacy `30078`) | `['d', WATCH_HISTORY_LIST_IDENTIFIER]`, `['snapshot', <id>]`, `['chunks', <total>]`, repeated `['a', <chunk address>]` pointers plus schema append tags | JSON payload `{ snapshot, totalChunks }` (may be empty when using tags only) |
+| Watch history chunk (`NOTE_TYPES.WATCH_HISTORY_CHUNK`) | `WATCH_HISTORY_KIND` (default `30079`, clients also read legacy `30078`) | `['d', <snapshotId:index>]`, `['encrypted','nip04']`, `['snapshot', <id>]`, `['chunk', <index>, <total>]`, optional leading `['head','1']` on the first chunk, pointer tags for each item, plus schema append tags | NIP-04 encrypted JSON chunk (`{ version, snapshot, chunkIndex, totalChunks, items[] }`) |
+| Subscription list (`NOTE_TYPES.SUBSCRIPTION_LIST`) | `30002` | `['d', 'subscriptions']` | NIP-04 encrypted JSON `{ subPubkeys: string[] }` |
+| User block list (`NOTE_TYPES.USER_BLOCK_LIST`) | `30002` | `['d', 'user-blocks']` | NIP-04 encrypted JSON `{ blockedPubkeys: string[] }` |
+| Admin moderation list (`NOTE_TYPES.ADMIN_MODERATION_LIST`) | `30000` | `['d', 'bitvid:admin:editors']`, repeated `['p', <pubkey>]` entries | Empty content |
+| Admin blacklist (`NOTE_TYPES.ADMIN_BLACKLIST`) | `30000` | `['d', 'bitvid:admin:blacklist']`, repeated `['p', <pubkey>]` entries | Empty content |
+| Admin whitelist (`NOTE_TYPES.ADMIN_WHITELIST`) | `30000` | `['d', 'bitvid:admin:whitelist']`, repeated `['p', <pubkey>]` entries | Empty content |
+
+If you introduce a new Nostr feature, add its schema to
+`js/nostrEventSchemas.js` so that the catalogue stays complete and so existing
+builders inherit the same debugging knobs.
+
+### Watch history identifiers
+
+The encrypted watch history pipeline is gated by the `FEATURE_WATCH_HISTORY_V2`
+runtime flag. When the flag is disabled, clients continue emitting view events
+but skip publishing snapshots; the UI still resolves legacy `watch-history:v2:index`
+lists so operators can stage the rollout per deployment.【F:config/instance-config.js†L69-L94】【F:js/watchHistoryService.js†L82-L140】【F:js/watchHistoryService.js†L948-L985】
+
+Active identifiers include the default `WATCH_HISTORY_LIST_IDENTIFIER`
+(`"watch-history"`) and the legacy aliases enumerated in
+`WATCH_HISTORY_LEGACY_LIST_IDENTIFIERS`. Chunk events derive their `d` tag from
+`<snapshotId>:<index>`, advertise `['snapshot', <id>]`, and carry `['chunk', <index>, <total>]`
+plus an optional leading `['head','1']` marker so relays can prioritize the first
+ciphertext. All chunk content is encrypted with NIP-04 and stores only pointer
+entries; richer metadata remains on-device via the
+[`WatchHistoryService`](../js/watchHistoryService.js) APIs, which default to
+pointer-only writes and local-only metadata caches.【F:config/instance-config.js†L60-L78】【F:js/nostrEventSchemas.js†L157-L189】【F:js/nostr.js†L2329-L2369】【F:js/watchHistoryService.js†L331-L376】
+
+Refer to the [`WatchHistoryService`](../js/watchHistoryService.js) for queue
+management hooks, manual snapshot helpers, and metadata toggle controls that
+complement these schema definitions.【F:js/watchHistoryService.js†L695-L776】【F:js/watchHistoryService.js†L1040-L1093】

docs/qa.md

@@ -17,5 +17,11 @@ Run this checklist before publishing releases or merging changes that touch uplo
 5. **Cross-Browser Verification**
    - Spot-check Chromium and Firefox (desktop) for console warnings about CORS, Range requests, or tracker connectivity.
    - Optionally validate on mobile Safari/Chrome if the change targets mobile UX.
+6. **Saved Profile Metadata Refresh**
+   - In the browser devtools console/storage panel, delete `bitvid:profileCache:v1` but keep `bitvid:savedProfiles:v1` populated with Nostr pubkeys that lack stored names/avatars.
+   - Reload the page and open the profile switcher; confirm avatars and display names populate automatically without manual refresh.
+7. **View Logging Per Identity**
+   - Play the same video until a view event is logged, then log out (or switch to a different pubkey) and repeat the playback.
+   - Confirm two distinct view events appear (e.g., via relay logs or UI counters) and the aggregated view count increments twice.
 
 Document findings (pass/fail notes plus relevant screenshots or logs) so they can be attached to release or PR notes.

docs/watch-history-logging.md

@@ -0,0 +1,73 @@
+# Watch history logging (v2 pipeline)
+
+BitVid's watch history sync is orchestrated by the
+[`WatchHistoryService`](../js/watchHistoryService.js). The service collects
+per-video pointer data during playback, batches it in session storage, and emits
+encrypted snapshots to relays only when a publish is triggered. Relay payloads
+stick to pointer identifiers so title, thumbnail, and profile context remain on
+the client unless an operator opts into local metadata caching.
+
+## Snapshot composition
+
+Snapshots publish two event types to the shared `WATCH_HISTORY_KIND` stream:
+
+1. **Chunk events** — Each chunk carries a deterministic identifier in its
+   `d` tag, advertises its `snapshot` and `chunk` position, and is tagged with
+   `['encrypted','nip04']`. The first chunk is additionally marked as
+   `['head','1']` and may append `"a"` tags that reference previous chunk
+   addresses, allowing readers to reconstruct the full set even when relays
+   deduplicate aggressively.【F:js/nostrEventSchemas.js†L175-L189】【F:js/nostr.js†L2329-L2369】
+2. **Pointer event** — After chunks are accepted, BitVid emits a compact index
+   event containing the canonical list identifier (`['d', WATCH_HISTORY_LIST_IDENTIFIER]`),
+   the `snapshot` label, the total chunk count, and an `a` tag for each chunk
+   address.【F:js/nostrEventSchemas.js†L157-L170】【F:js/nostr.js†L2425-L2441】
+
+Chunk content is a NIP-04 encrypted JSON envelope of `{ version: 2, snapshot,
+chunkIndex, totalChunks, items[] }`. Items are pointer descriptors (`e` or `a`
+references plus optional relay hints) so that relays never learn which titles
+were played—only which events or addresses the client can dereference later.【F:js/nostr.js†L2337-L2364】
+
+## Batching configuration
+
+Operators can toggle grouped resolution with `WATCH_HISTORY_BATCH_RESOLVE` and
+optionally cap each response by defining `WATCH_HISTORY_BATCH_PAGE_SIZE` in
+`config/instance-config.js`. Leaving the page size unset returns the full
+`WATCH_HISTORY_MAX_ITEMS` window while still letting the UI paginate locally,
+but setting a positive integer keeps API payloads in lockstep with batched
+renderers like `historyView`.【F:config/instance-config.js†L101-L123】【F:js/nostr.js†L2987-L2998】【F:js/historyView.js†L1-L38】
+
+## Snapshot cadence
+
+`WatchHistoryService.publishView` queues pointer entries while the feature flag
+is enabled, merging repeats with a one-minute throttle and persisting the queue
+in `sessionStorage`. Snapshots run when `watchHistoryService.snapshot()` is
+invoked (e.g., on `beforeunload`, `visibilitychange`, or manual sync actions in
+the history UI) and clear the queue on success.【F:js/watchHistoryService.js†L872-L917】【F:js/app.js†L6041-L6081】【F:js/app.js†L7467-L7484】
+If no items are pending, the snapshot resolves with an empty result so UI calls
+remain idempotent.【F:js/watchHistoryService.js†L932-L944】
+
+## Republish and backoff
+
+When a snapshot publish fails but the response is retryable, the service stores
+the returned `snapshotId`, records the originating reason, and delegates to the
+Nostr client to retry with exponential backoff. Retries start after two seconds,
+double per attempt with 25% jitter, cap at five minutes, and stop after eight
+attempts unless a publish succeeds sooner.【F:js/watchHistoryService.js†L948-L985】【F:js/watchHistoryService.js†L723-L777】【F:js/nostr.js†L1988-L2087】
+
+## Legacy payload handling
+
+Readers hydrate history by combining the pointer event, any encrypted chunks,
+and fallback metadata embedded in legacy watch-history lists. The resolver still
+accepts the `watch-history:v2:index` identifier, merges pointer tags from the
+index event, and falls back to plaintext content when decryption fails so older
+relays remain compatible.【F:config/instance-config.js†L60-L78】【F:js/nostr.js†L2704-L2779】【F:js/nostr.js†L5216-L5264】
+
+## Local metadata toggles
+
+By default the service only persists pointer data to relays; richer metadata is
+stored locally (and opt-in). Users can toggle the "store watch history metadata"
+preference, which flips a localStorage flag, clears cached entries when
+disabled, and never pushes the sanitized video/profile cache over the network.【F:js/watchHistoryService.js†L82-L140】【F:js/watchHistoryService.js†L232-L313】【F:js/watchHistoryService.js†L331-L376】
+
+See the [`WatchHistoryService` API](../js/watchHistoryService.js) for
+event hooks, queue inspection helpers, and manual snapshot controls.

index.html

@@ -5,6 +5,12 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>bitvid | Decentralized Video Sharing</title>
 
+    <meta
+      name="description"
+      content="Bitvid is a decentralized video hub that prioritizes URL-first playback with WebTorrent fallback so your audience can stream reliably."
+    />
+    <meta name="robots" content="index,follow" />
+
     <!-- Open Graph Meta Tags -->
     <meta property="og:title" content="BitVid - Decentralized Video Sharing" />
     <meta
@@ -40,7 +46,7 @@
 
     <!-- Styles -->
     <script src="js/tracking.js" defer></script>
-    <link href="css/tailwind.min.css" rel="stylesheet" />
+    <link href="css/tailwind.generated.css" rel="stylesheet" />
     <link href="css/style.css" rel="stylesheet" />
     <link href="css/markdown.css" rel="stylesheet" />
   </head>
@@ -87,11 +93,17 @@
         </button>
         <!-- Logo -->
         <!-- Logo fades in once on initial load. -->
-        <img
-          src="assets/svg/bitvid-logo-light-mode.svg"
-          alt="BitVid Logo"
-          class="h-16 fade-in fade-in-delay-100"
-        />
+        <a
+          href="index.html"
+          aria-label="Return to the bitvid home page"
+          class="fade-in fade-in-delay-100"
+        >
+          <img
+            src="assets/svg/bitvid-logo-light-mode.svg"
+            alt="BitVid Logo"
+            class="h-16"
+          />
+        </a>
 
         <!-- Buttons on the far right -->
 
@@ -137,17 +149,36 @@
         </div>
       </header>
 
-      <!-- Error Container -->
+      <!-- Notification Portal -->
       <div
-        id="errorContainer"
-        class="hidden bg-red-100 text-red-900 p-4 rounded-md mb-4"
-      ></div>
+        id="notificationPortal"
+        role="region"
+        aria-live="polite"
+        aria-label="System notifications"
+      >
+        <!-- Error Container -->
+        <div
+          id="errorContainer"
+          class="hidden bg-red-100 text-red-900 p-4 rounded-md mb-4"
+        ></div>
 
-      <!-- Success Container -->
-      <div
-        id="successContainer"
-        class="hidden bg-green-100 text-green-900 p-4 rounded-md mb-4"
-      ></div>
+        <!-- Status Container -->
+        <div
+          id="statusContainer"
+          class="hidden status-banner"
+          role="status"
+          aria-live="polite"
+        >
+          <span class="status-spinner" aria-hidden="true"></span>
+          <span class="status-message" data-status-message></span>
+        </div>
+
+        <!-- Success Container -->
+        <div
+          id="successContainer"
+          class="hidden bg-green-100 text-green-900 p-4 rounded-md mb-4"
+        ></div>
+      </div>
 
       <!-- Dynamic views (like most-recent-videos.html, etc.) -->
       <main id="viewContainer" class="flex-grow mb-8"></main>
@@ -167,10 +198,28 @@
     </div>
 
     <!-- Additional Scripts -->
-    <script src="js/libs/nostr.bundle.js"></script>
     <script type="module">
-      import { nip19, SimplePool } from "https://esm.sh/[email protected]";
-      window.NostrTools = { nip19, SimplePool };
+      import * as nostrTools from "https://esm.sh/[email protected]";
+
+      const normalizedGeneratePrivateKey =
+        typeof nostrTools.generatePrivateKey === "function"
+          ? nostrTools.generatePrivateKey
+          : typeof nostrTools.generateSecretKey === "function"
+          ? nostrTools.generateSecretKey
+          : undefined;
+
+      const normalizedGenerateSecretKey =
+        typeof nostrTools.generateSecretKey === "function"
+          ? nostrTools.generateSecretKey
+          : typeof nostrTools.generatePrivateKey === "function"
+          ? nostrTools.generatePrivateKey
+          : undefined;
+
+      window.NostrTools = {
+        ...nostrTools,
+        generatePrivateKey: normalizedGeneratePrivateKey,
+        generateSecretKey: normalizedGenerateSecretKey,
+      };
     </script>
     <script type="module" src="js/config.js"></script>
     <script type="module" src="js/lists.js"></script>

js/accessControl.js

@@ -1,228 +1,413 @@
 // js/accessControl.js
 
-import { isDevMode, isWhitelistEnabled } from "./config.js";
-import { initialWhitelist, initialBlacklist } from "./lists.js";
+import {
+  ADMIN_EDITORS_NPUBS,
+  ADMIN_SUPER_NPUB,
+  getWhitelistMode,
+  setWhitelistMode as persistWhitelistMode,
+  ADMIN_WHITELIST_MODE_STORAGE_KEY,
+} from "./config.js";
+import { loadAdminState, persistAdminState } from "./adminListStore.js";
+
+function normalizeNpub(value) {
+  return typeof value === "string" ? value.trim() : "";
+}
+
+function dedupeNpubs(values) {
+  const normalized = Array.isArray(values) ? values.map(normalizeNpub) : [];
+  return Array.from(
+    normalized.reduce((set, npub) => {
+      if (npub) {
+        set.add(npub);
+      }
+      return set;
+    }, new Set())
+  );
+}
+
+function isValidNpub(npub) {
+  if (typeof npub !== "string") {
+    return false;
+  }
+  const trimmed = npub.trim();
+  if (!trimmed) {
+    return false;
+  }
+
+  try {
+    const decoded = window?.NostrTools?.nip19?.decode(trimmed);
+    return decoded?.type === "npub";
+  } catch (error) {
+    return false;
+  }
+}
 
 class AccessControl {
   constructor() {
-    // Debug logging for initialization
-    console.log("DEBUG: AccessControl constructor called");
+    this.editors = new Set();
+    this.whitelist = new Set();
+    this.blacklist = new Set();
+    this.whitelistEnabled = getWhitelistMode();
+    this.hasLoaded = false;
+    this.lastError = null;
+    this._isRefreshing = false;
+    this._refreshPromise = Promise.resolve();
+  }
 
-    const { data: storedWhitelist, status: whitelistStatus } = this.loadWhitelist();
-    const { data: storedBlacklist, status: blacklistStatus } = this.loadBlacklist();
-
-    if (storedWhitelist !== null) {
-      this.whitelist = new Set(storedWhitelist);
-    } else {
-      this.whitelist = new Set(initialWhitelist);
-      this.saveWhitelist();
-      if (whitelistStatus && whitelistStatus !== "missing") {
-        console.warn(
-          `Whitelist storage ${whitelistStatus}. Falling back to initial whitelist.`
-        );
-      }
+  _performRefresh() {
+    if (this._isRefreshing) {
+      return this._refreshPromise;
     }
 
-    if (storedBlacklist !== null) {
-      this.blacklist = new Set(storedBlacklist);
-    } else {
-      this.blacklist = new Set(initialBlacklist.filter((x) => x)); // Filter out empty strings
-      this.saveBlacklist();
-      if (blacklistStatus && blacklistStatus !== "missing") {
-        console.warn(
-          `Blacklist storage ${blacklistStatus}. Falling back to initial blacklist.`
-        );
-      }
-    }
+    this._isRefreshing = true;
 
-    // Debug the sets
-    console.log("DEBUG: Whitelist after initialization:", [...this.whitelist]);
-    console.log("DEBUG: Blacklist after initialization:", [...this.blacklist]);
-  }
-
-  // Rest of the class remains the same...
-  loadWhitelist() {
-    try {
-      const stored = localStorage.getItem("bitvid_whitelist");
-      if (!stored) {
-        if (isDevMode) console.log("No stored whitelist found in localStorage.");
-        return { data: null, status: "missing" };
-      }
-
-      const parsed = JSON.parse(stored);
-      const sanitized = this.sanitizeList(parsed, "whitelist");
-      return {
-        data: sanitized,
-        status: sanitized === null ? "invalid" : "ok",
-      };
-    } catch (error) {
-      console.error("Error loading whitelist, using defaults:", error);
-      return { data: null, status: "error" };
-    }
-  }
-
-  loadBlacklist() {
-    try {
-      const stored = localStorage.getItem("bitvid_blacklist");
-      if (!stored) {
-        if (isDevMode) console.log("No stored blacklist found in localStorage.");
-        return { data: null, status: "missing" };
-      }
-
-      const parsed = JSON.parse(stored);
-      const sanitized = this.sanitizeList(parsed, "blacklist");
-      return {
-        data: sanitized,
-        status: sanitized === null ? "invalid" : "ok",
-      };
-    } catch (error) {
-      console.error("Error loading blacklist, using defaults:", error);
-      return { data: null, status: "error" };
-    }
-  }
-
-  sanitizeList(list, listName) {
-    if (!Array.isArray(list)) {
-      console.warn(
-        `Stored ${listName} is not an array. Received:`,
-        list
-      );
-      return null;
-    }
-
-    const sanitized = [];
-    let invalidEntries = 0;
-
-    list.forEach((value) => {
-      if (typeof value !== "string") {
-        invalidEntries += 1;
-        return;
-      }
-
-      const trimmed = value.trim();
-      if (trimmed) {
-        sanitized.push(trimmed);
-      } else {
-        invalidEntries += 1;
-      }
-    });
-
-    if (invalidEntries > 0) {
-      console.warn(
-        `Stored ${listName} contained ${invalidEntries} invalid entr${
-          invalidEntries === 1 ? "y" : "ies"
-        }. Sanitized list:`,
-        sanitized
-      );
-    }
-
-    return sanitized;
-  }
-
-  saveWhitelist() {
-    try {
-      localStorage.setItem(
-        "bitvid_whitelist",
-        JSON.stringify([...this.whitelist])
-      );
-    } catch (error) {
-      console.error("Error saving whitelist:", error);
-    }
-  }
-
-  saveBlacklist() {
-    try {
-      localStorage.setItem(
-        "bitvid_blacklist",
-        JSON.stringify([...this.blacklist])
-      );
-    } catch (error) {
-      console.error("Error saving blacklist:", error);
-    }
-  }
-
-  addToWhitelist(npub) {
-    if (!this.isValidNpub(npub)) {
-      throw new Error("Invalid npub format");
-    }
-    this.whitelist.add(npub);
-    this.saveWhitelist();
-    if (isDevMode) console.log(`Added ${npub} to whitelist`);
-  }
-
-  removeFromWhitelist(npub) {
-    this.whitelist.delete(npub);
-    this.saveWhitelist();
-    if (isDevMode) console.log(`Removed ${npub} from whitelist`);
-  }
-
-  addToBlacklist(npub) {
-    if (!this.isValidNpub(npub)) {
-      throw new Error("Invalid npub format");
-    }
-    this.blacklist.add(npub);
-    this.saveBlacklist();
-    if (isDevMode) console.log(`Added ${npub} to blacklist`);
-  }
-
-  removeFromBlacklist(npub) {
-    this.blacklist.delete(npub);
-    this.saveBlacklist();
-    if (isDevMode) console.log(`Removed ${npub} from blacklist`);
-  }
-
-  isWhitelisted(npub) {
-    const result = this.whitelist.has(npub);
-    if (isDevMode)
-      console.log(
-        `Checking if ${npub} is whitelisted:`,
-        result,
-        "Current whitelist:",
-        [...this.whitelist]
-      );
-    return result;
-  }
-
-  isBlacklisted(npub) {
-    return this.blacklist.has(npub);
-  }
-
-  canAccess(npub) {
-    if (this.isBlacklisted(npub)) {
-      return false;
-    }
-    const canAccess = !isWhitelistEnabled || this.isWhitelisted(npub);
-    if (isDevMode) console.log(`Checking access for ${npub}:`, canAccess);
-    return canAccess;
-  }
-
-  filterVideos(videos) {
-    return videos.filter((video) => {
+    const operation = (async () => {
       try {
-        const npub = window.NostrTools.nip19.npubEncode(video.pubkey);
-        return !this.isBlacklisted(npub);
+        const state = await loadAdminState();
+        const editors = Array.isArray(state?.editors) ? state.editors : [];
+        const whitelist = Array.isArray(state?.whitelist)
+          ? state.whitelist
+          : [];
+        const blacklist = Array.isArray(state?.blacklist)
+          ? state.blacklist
+          : [];
+
+        this.editors = new Set(
+          dedupeNpubs([...ADMIN_EDITORS_NPUBS, ...editors])
+        );
+        const normalizedWhitelist = dedupeNpubs(whitelist);
+        this.whitelist = new Set(normalizedWhitelist);
+
+        const blacklistDedupe = dedupeNpubs(blacklist);
+        const whitelistSet = new Set(normalizedWhitelist.map(normalizeNpub));
+        const adminGuardSet = new Set([
+          normalizeNpub(ADMIN_SUPER_NPUB),
+          ...Array.from(this.editors),
+        ]);
+        const sanitizedBlacklist = blacklistDedupe.filter((npub) => {
+          const normalized = normalizeNpub(npub);
+          if (!normalized) {
+            return false;
+          }
+          if (whitelistSet.has(normalized)) {
+            return false;
+          }
+          if (adminGuardSet.has(normalized)) {
+            return false;
+          }
+          return true;
+        });
+        this.blacklist = new Set(sanitizedBlacklist);
+
+        this.whitelistEnabled = getWhitelistMode();
+        this.hasLoaded = true;
+        this.lastError = null;
       } catch (error) {
-        console.error("Error filtering video:", error);
-        return false;
+        this.lastError = error;
+        if (!this.hasLoaded) {
+          this.editors.clear();
+          this.whitelist.clear();
+          this.blacklist.clear();
+        }
+        throw error;
+      } finally {
+        this._isRefreshing = false;
       }
-    });
+    })();
+
+    this._refreshPromise = operation;
+    return operation;
   }
 
-  isValidNpub(npub) {
+  refresh() {
+    if (this._isRefreshing) {
+      return this._refreshPromise;
+    }
+
+    const operation = this._performRefresh();
+    const tracked = operation.catch((error) => {
+      console.error("Failed to refresh admin lists:", error);
+      throw error;
+    });
+    this._refreshPromise = tracked;
+    return tracked;
+  }
+
+  async ensureReady() {
+    if (!this.hasLoaded && !this._isRefreshing) {
+      this.refresh();
+    }
+
     try {
-      return npub.startsWith("npub1") && npub.length === 63;
+      await this._refreshPromise;
     } catch (error) {
+      if (!this.hasLoaded) {
+        await this.refresh();
+        await this._refreshPromise;
+      } else {
+        throw error;
+      }
+    }
+  }
+
+  whitelistMode() {
+    return this.whitelistEnabled;
+  }
+
+  isSuperAdmin(npub) {
+    const normalized = normalizeNpub(npub);
+    return normalized ? normalized === ADMIN_SUPER_NPUB : false;
+  }
+
+  isAdminEditor(npub) {
+    const normalized = normalizeNpub(npub);
+    if (!normalized) {
       return false;
     }
+    if (this.isSuperAdmin(normalized)) {
+      return true;
+    }
+    return this.editors.has(normalized);
+  }
+
+  canEditAdminLists(npub) {
+    return this.isAdminEditor(npub);
   }
 
   getWhitelist() {
-    return [...this.whitelist];
+    return Array.from(this.whitelist);
   }
 
   getBlacklist() {
-    return [...this.blacklist];
+    return Array.from(this.blacklist);
+  }
+
+  getEditors() {
+    return Array.from(this.editors);
+  }
+
+  async addModerator(requestorNpub, moderatorNpub) {
+    if (!this.isSuperAdmin(requestorNpub)) {
+      return { ok: false, error: "forbidden" };
+    }
+    if (!isValidNpub(moderatorNpub)) {
+      return { ok: false, error: "invalid npub" };
+    }
+
+    const normalized = normalizeNpub(moderatorNpub);
+    if (!normalized || normalized === ADMIN_SUPER_NPUB) {
+      return { ok: false, error: "immutable" };
+    }
+
+    const nextEditors = dedupeNpubs([...this.getEditors(), normalized]);
+
+    try {
+      await persistAdminState(requestorNpub, { editors: nextEditors });
+      await this.refresh();
+      return { ok: true };
+    } catch (error) {
+      return { ok: false, error: error?.code || "storage-error" };
+    }
+  }
+
+  async removeModerator(requestorNpub, moderatorNpub) {
+    if (!this.isSuperAdmin(requestorNpub)) {
+      return { ok: false, error: "forbidden" };
+    }
+
+    const normalized = normalizeNpub(moderatorNpub);
+    if (!normalized || normalized === ADMIN_SUPER_NPUB) {
+      return { ok: false, error: "immutable" };
+    }
+    const nextEditors = this.getEditors().filter((value) => value !== normalized);
+
+    try {
+      await persistAdminState(requestorNpub, { editors: nextEditors });
+      await this.refresh();
+      return { ok: true };
+    } catch (error) {
+      return { ok: false, error: error?.code || "storage-error" };
+    }
+  }
+
+  async addToWhitelist(actorNpub, targetNpub) {
+    if (!this.canEditAdminLists(actorNpub)) {
+      return { ok: false, error: "forbidden" };
+    }
+    if (!isValidNpub(targetNpub)) {
+      return { ok: false, error: "invalid npub" };
+    }
+
+    const normalized = normalizeNpub(targetNpub);
+    if (!normalized) {
+      return { ok: false, error: "invalid npub" };
+    }
+
+    const nextWhitelist = dedupeNpubs([...this.getWhitelist(), normalized]);
+    const nextBlacklist = this.getBlacklist().filter(
+      (value) => value !== normalized
+    );
+
+    try {
+      await persistAdminState(actorNpub, {
+        whitelist: nextWhitelist,
+        blacklist: nextBlacklist,
+      });
+      await this.refresh();
+      return { ok: true };
+    } catch (error) {
+      return { ok: false, error: error?.code || "storage-error" };
+    }
+  }
+
+  async removeFromWhitelist(actorNpub, targetNpub) {
+    if (!this.canEditAdminLists(actorNpub)) {
+      return { ok: false, error: "forbidden" };
+    }
+
+    const normalized = normalizeNpub(targetNpub);
+    if (!normalized) {
+      return { ok: false, error: "invalid npub" };
+    }
+    const nextWhitelist = this.getWhitelist().filter(
+      (value) => value !== normalized
+    );
+
+    try {
+      await persistAdminState(actorNpub, { whitelist: nextWhitelist });
+      await this.refresh();
+      return { ok: true };
+    } catch (error) {
+      return { ok: false, error: error?.code || "storage-error" };
+    }
+  }
+
+  async addToBlacklist(actorNpub, targetNpub) {
+    if (!this.canEditAdminLists(actorNpub)) {
+      return { ok: false, error: "forbidden" };
+    }
+    if (!isValidNpub(targetNpub)) {
+      return { ok: false, error: "invalid npub" };
+    }
+
+    const normalized = normalizeNpub(targetNpub);
+    if (!normalized) {
+      return { ok: false, error: "invalid npub" };
+    }
+
+    const normalizedActor = normalizeNpub(actorNpub);
+    if (normalizedActor && normalized === normalizedActor) {
+      return { ok: false, error: "self" };
+    }
+
+    if (this.isSuperAdmin(normalized) || this.isAdminEditor(normalized)) {
+      return { ok: false, error: "immutable" };
+    }
+
+    const nextBlacklist = dedupeNpubs([...this.getBlacklist(), normalized]);
+    const nextWhitelist = this.getWhitelist().filter(
+      (value) => value !== normalized
+    );
+
+    try {
+      await persistAdminState(actorNpub, {
+        blacklist: nextBlacklist,
+        whitelist: nextWhitelist,
+      });
+      await this.refresh();
+      return { ok: true };
+    } catch (error) {
+      return { ok: false, error: error?.code || "storage-error" };
+    }
+  }
+
+  async removeFromBlacklist(actorNpub, targetNpub) {
+    if (!this.canEditAdminLists(actorNpub)) {
+      return { ok: false, error: "forbidden" };
+    }
+
+    const normalized = normalizeNpub(targetNpub);
+    if (!normalized) {
+      return { ok: false, error: "invalid npub" };
+    }
+    const nextBlacklist = this.getBlacklist().filter(
+      (value) => value !== normalized
+    );
+
+    try {
+      await persistAdminState(actorNpub, { blacklist: nextBlacklist });
+      await this.refresh();
+      return { ok: true };
+    } catch (error) {
+      return { ok: false, error: error?.code || "storage-error" };
+    }
+  }
+
+  setWhitelistMode(actorNpub, enabled) {
+    if (!this.isSuperAdmin(actorNpub)) {
+      return { ok: false, error: "forbidden" };
+    }
+    persistWhitelistMode(!!enabled);
+    this.whitelistEnabled = !!enabled;
+    return { ok: true };
+  }
+
+  isBlacklisted(npub) {
+    const normalized = normalizeNpub(npub);
+    if (!normalized) {
+      return false;
+    }
+    if (this.whitelist.has(normalized)) {
+      return false;
+    }
+    return this.blacklist.has(normalized);
+  }
+
+  canAccess(candidate) {
+    let npub = "";
+
+    if (typeof candidate === "string") {
+      npub = candidate;
+    } else if (candidate && typeof candidate === "object") {
+      if (typeof candidate.npub === "string") {
+        npub = candidate.npub;
+      } else if (typeof candidate.pubkey === "string") {
+        try {
+          npub = window.NostrTools.nip19.npubEncode(candidate.pubkey);
+        } catch (error) {
+          npub = candidate.pubkey;
+        }
+      }
+    }
+
+    const normalized = normalizeNpub(npub);
+    if (!normalized) {
+      return false;
+    }
+
+    if (this.isAdminEditor(normalized)) {
+      return true;
+    }
+
+    if (this.whitelist.has(normalized)) {
+      return true;
+    }
+
+    if (this.blacklist.has(normalized)) {
+      return false;
+    }
+
+    if (this.whitelistEnabled && !this.whitelist.has(normalized)) {
+      return false;
+    }
+
+    return true;
   }
 }
 
 export const accessControl = new AccessControl();
+export {
+  ADMIN_WHITELIST_MODE_STORAGE_KEY,
+  normalizeNpub,
+  isValidNpub,
+};

js/adminListStore.js

@@ -0,0 +1,572 @@
+// js/adminListStore.js
+
+import {
+  ADMIN_LIST_MODE,
+  ADMIN_LIST_NAMESPACE,
+  ADMIN_SUPER_NPUB,
+  ADMIN_EDITORS_NPUBS,
+  isDevMode,
+} from "./config.js";
+import { nostrClient } from "./nostr.js";
+import {
+  buildAdminListEvent,
+  ADMIN_LIST_IDENTIFIERS,
+} from "./nostrEventSchemas.js";
+
+const LEGACY_STORAGE_KEYS = {
+  editors: "bitvid_admin_editors",
+  whitelist: "bitvid_admin_whitelist",
+  whitelistLegacy: "bitvid_whitelist",
+  blacklist: "bitvid_admin_blacklist",
+  blacklistLegacy: "bitvid_blacklist",
+};
+
+const PUBLISH_TIMEOUT_MS = 7000;
+
+function createError(code, message, cause) {
+  const error = new Error(message);
+  error.code = code;
+  if (cause) {
+    error.cause = cause;
+  }
+  return error;
+}
+
+function normalizeNpub(value) {
+  return typeof value === "string" ? value.trim() : "";
+}
+
+function dedupeNpubs(values) {
+  const normalized = Array.isArray(values) ? values.map(normalizeNpub) : [];
+  return Array.from(
+    normalized.reduce((set, npub) => {
+      if (npub) {
+        set.add(npub);
+      }
+      return set;
+    }, new Set())
+  );
+}
+
+function canDecodeNpub() {
+  return !!(
+    typeof window !== "undefined" &&
+    window?.NostrTools?.nip19 &&
+    typeof window.NostrTools.nip19.decode === "function"
+  );
+}
+
+function isLikelyNpub(value) {
+  if (typeof value !== "string") {
+    return false;
+  }
+
+  const trimmed = value.trim();
+  if (!trimmed) {
+    return false;
+  }
+
+  if (!canDecodeNpub()) {
+    return true;
+  }
+
+  try {
+    const decoded = window.NostrTools.nip19.decode(trimmed);
+    return decoded?.type === "npub";
+  } catch (error) {
+    return false;
+  }
+}
+
+function sanitizeNpubList(values) {
+  return dedupeNpubs(values).filter(isLikelyNpub);
+}
+
+function sanitizeAdminState(state = {}) {
+  const sanitizedEditors = sanitizeNpubList(state.editors || []);
+  const sanitizedWhitelist = sanitizeNpubList(state.whitelist || []);
+  const whitelistSet = new Set(sanitizedWhitelist.map(normalizeNpub));
+
+  const adminGuardSet = new Set([
+    normalizeNpub(ADMIN_SUPER_NPUB),
+    ...ADMIN_EDITORS_NPUBS.map(normalizeNpub),
+    ...sanitizedEditors.map(normalizeNpub),
+  ]);
+
+  const sanitizedBlacklist = sanitizeNpubList(state.blacklist || []).filter(
+    (npub) => {
+      const normalized = normalizeNpub(npub);
+      if (!normalized) {
+        return false;
+      }
+      if (whitelistSet.has(normalized)) {
+        return false;
+      }
+      if (adminGuardSet.has(normalized)) {
+        return false;
+      }
+      return true;
+    }
+  );
+
+  return {
+    editors: sanitizedEditors,
+    whitelist: sanitizedWhitelist,
+    blacklist: sanitizedBlacklist,
+  };
+}
+
+function hasAnyEntries(state = {}) {
+  return Boolean(
+    (Array.isArray(state.editors) && state.editors.length) ||
+      (Array.isArray(state.whitelist) && state.whitelist.length) ||
+      (Array.isArray(state.blacklist) && state.blacklist.length)
+  );
+}
+
+function readJsonListFromStorage(key) {
+  if (typeof localStorage === "undefined") {
+    return null;
+  }
+
+  try {
+    const raw = localStorage.getItem(key);
+    if (raw === null) {
+      return null;
+    }
+    const parsed = JSON.parse(raw);
+    return Array.isArray(parsed) ? parsed : null;
+  } catch (error) {
+    if (isDevMode) {
+      console.warn(`[adminListStore] Failed to parse legacy list for ${key}:`, error);
+    }
+    return null;
+  }
+}
+
+function loadLegacyAdminState() {
+  const editors = readJsonListFromStorage(LEGACY_STORAGE_KEYS.editors) || [];
+  const whitelist =
+    readJsonListFromStorage(LEGACY_STORAGE_KEYS.whitelist) ||
+    readJsonListFromStorage(LEGACY_STORAGE_KEYS.whitelistLegacy) ||
+    [];
+  const blacklist =
+    readJsonListFromStorage(LEGACY_STORAGE_KEYS.blacklist) ||
+    readJsonListFromStorage(LEGACY_STORAGE_KEYS.blacklistLegacy) ||
+    [];
+
+  const sanitized = sanitizeAdminState({ editors, whitelist, blacklist });
+  return hasAnyEntries(sanitized) ? sanitized : null;
+}
+
+function clearLegacyStorageFor(listKey) {
+  if (typeof localStorage === "undefined") {
+    return;
+  }
+
+  const keyGroups = {
+    editors: [LEGACY_STORAGE_KEYS.editors],
+    whitelist: [
+      LEGACY_STORAGE_KEYS.whitelist,
+      LEGACY_STORAGE_KEYS.whitelistLegacy,
+    ],
+    blacklist: [
+      LEGACY_STORAGE_KEYS.blacklist,
+      LEGACY_STORAGE_KEYS.blacklistLegacy,
+    ],
+  };
+
+  const keys = keyGroups[listKey];
+  if (!Array.isArray(keys)) {
+    return;
+  }
+
+  for (const key of keys) {
+    try {
+      localStorage.removeItem(key);
+    } catch (error) {
+      if (isDevMode) {
+        console.warn(`[adminListStore] Failed to clear legacy storage for ${key}:`, error);
+      }
+    }
+  }
+}
+
+function ensureNostrReady() {
+  if (!nostrClient || !nostrClient.pool) {
+    throw createError(
+      "nostr-unavailable",
+      "Nostr relay pool is not initialized."
+    );
+  }
+
+  const relays = Array.isArray(nostrClient.relays) ? nostrClient.relays : [];
+  if (!relays.length) {
+    throw createError("nostr-unavailable", "No Nostr relays configured.");
+  }
+
+  return relays;
+}
+
+function decodeNpubToHex(npub) {
+  const trimmed = normalizeNpub(npub);
+  if (!trimmed) {
+    throw createError("invalid npub", "Empty npub provided.");
+  }
+
+  try {
+    const decoded = window?.NostrTools?.nip19?.decode(trimmed);
+    if (decoded?.type !== "npub" || !decoded?.data) {
+      throw new Error("Invalid npub format");
+    }
+    return typeof decoded.data === "string"
+      ? decoded.data
+      : decoded.data?.pubkey || "";
+  } catch (error) {
+    throw createError("invalid npub", "Unable to decode npub.", error);
+  }
+}
+
+function encodeHexToNpub(hex) {
+  try {
+    return window?.NostrTools?.nip19?.npubEncode(hex) || "";
+  } catch (error) {
+    if (isDevMode) {
+      console.warn("Failed to encode hex pubkey to npub:", error);
+    }
+    return "";
+  }
+}
+
+function extractNpubsFromEvent(event) {
+  if (!event || !Array.isArray(event.tags)) {
+    return [];
+  }
+
+  const hexKeys = event.tags
+    .filter((tag) => Array.isArray(tag) && tag[0] === "p" && tag[1])
+    .map((tag) => tag[1]);
+
+  const npubs = hexKeys
+    .map((hex) => encodeHexToNpub(hex))
+    .filter((npub) => typeof npub === "string" && npub);
+
+  return dedupeNpubs(npubs);
+}
+
+async function loadNostrList(identifier) {
+  const relays = ensureNostrReady();
+  const dTagValue = `${ADMIN_LIST_NAMESPACE}:${identifier}`;
+  const filter = {
+    kinds: [30000],
+    "#d": [dTagValue],
+    limit: 50,
+  };
+
+  let events = [];
+  try {
+    const combined = await nostrClient.pool.list(relays, [filter]);
+    if (Array.isArray(combined)) {
+      events = combined;
+    }
+  } catch (error) {
+    if (isDevMode) {
+      console.warn(
+        `[adminListStore] Combined relay fetch failed for ${identifier}:`,
+        error
+      );
+    }
+  }
+
+  if (!events.length) {
+    const perRelay = await Promise.all(
+      relays.map(async (url) => {
+        try {
+          const result = await nostrClient.pool.list([url], [filter]);
+          return Array.isArray(result) ? result : [];
+        } catch (error) {
+          if (isDevMode) {
+            console.warn(
+              `[adminListStore] Relay fetch failed for ${identifier} on ${url}:`,
+              error
+            );
+          }
+          return [];
+        }
+      })
+    );
+    events = perRelay.flat();
+  }
+
+  if (!events.length) {
+    return [];
+  }
+
+  const newest = events.reduce((latest, event) => {
+    if (!latest) {
+      return event;
+    }
+    if (event.created_at === latest.created_at) {
+      return event.id > latest.id ? event : latest;
+    }
+    return event.created_at > latest.created_at ? event : latest;
+  }, null);
+
+  return extractNpubsFromEvent(newest);
+}
+
+async function loadNostrState() {
+  const [editors, whitelist, blacklist] = await Promise.all([
+    loadNostrList(ADMIN_LIST_IDENTIFIERS.editors),
+    loadNostrList(ADMIN_LIST_IDENTIFIERS.whitelist),
+    loadNostrList(ADMIN_LIST_IDENTIFIERS.blacklist),
+  ]);
+
+  return sanitizeAdminState({ editors, whitelist, blacklist });
+}
+
+function buildListEvent(listKey, npubs, actorHex) {
+  const hexPubkeys = Array.from(
+    new Set(npubs.map((npub) => {
+      try {
+        return decodeNpubToHex(npub);
+      } catch (error) {
+        if (isDevMode) {
+          console.warn(
+            `[adminListStore] Failed to decode npub while publishing ${listKey}:`,
+            error
+          );
+        }
+        return "";
+      }
+    }).filter((hex) => !!hex))
+  );
+
+  if (listKey === "whitelist" || listKey === "editors") {
+    try {
+      const superHex = decodeNpubToHex(ADMIN_SUPER_NPUB);
+      if (superHex && !hexPubkeys.includes(superHex)) {
+        hexPubkeys.push(superHex);
+      }
+    } catch (error) {
+      if (isDevMode) {
+        console.warn("Failed to ensure super admin presence:", error);
+      }
+    }
+  }
+
+  return buildAdminListEvent(listKey, {
+    pubkey: actorHex,
+    created_at: Math.floor(Date.now() / 1000),
+    hexPubkeys,
+  });
+}
+
+function publishToRelay(url, signedEvent, listKey) {
+  return new Promise((resolve) => {
+    let settled = false;
+    const timeout = setTimeout(() => {
+      if (!settled) {
+        settled = true;
+        resolve({ url, success: false, error: new Error("timeout") });
+      }
+    }, PUBLISH_TIMEOUT_MS);
+
+    const finalize = (success, error) => {
+      if (settled) {
+        return;
+      }
+      settled = true;
+      clearTimeout(timeout);
+      resolve({ url, success, error });
+    };
+
+    try {
+      const pub = nostrClient.pool.publish([url], signedEvent);
+      if (!pub) {
+        finalize(false, new Error("publish returned no result"));
+        return;
+      }
+
+      if (typeof pub.on === "function") {
+        const registerHandler = (eventName, handler) => {
+          try {
+            pub.on(eventName, handler);
+            return true;
+          } catch (error) {
+            if (isDevMode) {
+              console.warn(
+                `[adminListStore] Relay publish rejected ${eventName} listener:`,
+                error
+              );
+            }
+            return false;
+          }
+        };
+
+        const handleFailure = (reason) => {
+          const error =
+            reason instanceof Error
+              ? reason
+              : new Error(String(reason || "failed"));
+          finalize(false, error);
+        };
+
+        let handlerRegistered = false;
+        handlerRegistered =
+          registerHandler("ok", () => finalize(true)) || handlerRegistered;
+        handlerRegistered =
+          registerHandler("seen", () => finalize(true)) || handlerRegistered;
+        handlerRegistered =
+          registerHandler("failed", handleFailure) || handlerRegistered;
+
+        if (handlerRegistered) {
+          return;
+        }
+      }
+
+      if (typeof pub.then === "function") {
+        pub.then(() => finalize(true)).catch((error) => finalize(false, error));
+        return;
+      }
+    } catch (error) {
+      finalize(false, error);
+      return;
+    }
+
+    finalize(true);
+  }).then((result) => {
+    if (!result.success && isDevMode) {
+      console.warn(
+        `[adminListStore] Publish failed for ${listKey} on ${result.url}:`,
+        result.error
+      );
+    }
+    return result;
+  });
+}
+
+async function persistNostrState(actorNpub, updates = {}) {
+  ensureNostrReady();
+  const extension = window?.nostr;
+  if (!extension || typeof extension.signEvent !== "function") {
+    throw createError(
+      "nostr-extension-missing",
+      "A Nostr extension with signEvent support is required."
+    );
+  }
+
+  const actorHex = decodeNpubToHex(actorNpub);
+  if (!actorHex) {
+    throw createError("invalid npub", "Unable to decode the actor npub.");
+  }
+
+  const sanitizedUpdates = {};
+  const actorNormalized = normalizeNpub(actorNpub);
+
+  if (Array.isArray(updates.editors)) {
+    sanitizedUpdates.editors = sanitizeNpubList(updates.editors).filter((npub) => {
+      const normalized = normalizeNpub(npub);
+      return normalized && normalized !== normalizeNpub(ADMIN_SUPER_NPUB);
+    });
+  }
+
+  if (Array.isArray(updates.whitelist)) {
+    sanitizedUpdates.whitelist = sanitizeNpubList(updates.whitelist);
+  }
+
+  if (Array.isArray(updates.blacklist)) {
+    const whitelistSet = new Set(
+      (sanitizedUpdates.whitelist || []).map(normalizeNpub)
+    );
+    const editorGuard = new Set([
+      normalizeNpub(ADMIN_SUPER_NPUB),
+      ...ADMIN_EDITORS_NPUBS.map(normalizeNpub),
+      ...((sanitizedUpdates.editors || []).map(normalizeNpub) || []),
+    ]);
+
+    if (actorNormalized) {
+      editorGuard.add(actorNormalized);
+    }
+
+    sanitizedUpdates.blacklist = sanitizeNpubList(updates.blacklist).filter(
+      (npub) => {
+        const normalized = normalizeNpub(npub);
+        if (!normalized) {
+          return false;
+        }
+        if (whitelistSet.has(normalized)) {
+          return false;
+        }
+        if (editorGuard.has(normalized)) {
+          return false;
+        }
+        return true;
+      }
+    );
+  }
+
+  const entries = Object.entries(sanitizedUpdates).filter(([, value]) =>
+    Array.isArray(value)
+  );
+
+  if (!entries.length) {
+    return;
+  }
+
+  for (const [listKey, npubs] of entries) {
+    const event = buildListEvent(listKey, npubs, actorHex);
+
+    let signedEvent;
+    try {
+      signedEvent = await extension.signEvent(event);
+    } catch (error) {
+      throw createError("signature-failed", "Failed to sign admin list event.", error);
+    }
+
+    const relays = ensureNostrReady();
+    const publishResults = await Promise.all(
+      relays.map((url) => publishToRelay(url, signedEvent, listKey))
+    );
+
+    if (!publishResults.some((result) => result.success)) {
+      throw createError(
+        "publish-failed",
+        `Failed to publish ${listKey} list to any relay.`
+      );
+    }
+
+    clearLegacyStorageFor(listKey);
+  }
+}
+
+export async function loadAdminState() {
+  if (ADMIN_LIST_MODE !== "nostr" && isDevMode) {
+    console.warn(
+      `[adminListStore] ADMIN_LIST_MODE "${ADMIN_LIST_MODE}" is deprecated. Defaulting to remote Nostr lists.`
+    );
+  }
+
+  const state = await loadNostrState();
+  if (!hasAnyEntries(state)) {
+    const legacy = loadLegacyAdminState();
+    if (legacy && isDevMode) {
+      console.warn(
+        "[adminListStore] Ignoring legacy admin lists because remote mode is enforced. Publish them to Nostr to retain access.",
+        legacy
+      );
+    }
+  }
+
+  return state;
+}
+
+export async function persistAdminState(actorNpub, updates) {
+  if (ADMIN_LIST_MODE !== "nostr" && isDevMode) {
+    console.warn(
+      `[adminListStore] ADMIN_LIST_MODE "${ADMIN_LIST_MODE}" is deprecated. Remote lists are enforced.`
+    );
+  }
+
+  return persistNostrState(actorNpub, updates);
+}

js/channelProfile.js

@@ -7,8 +7,206 @@ import {
 import { app } from "./app.js";
 import { subscriptions } from "./subscriptions.js"; // <-- NEW import
 import { attachHealthBadges } from "./gridHealth.js";
-import { initialBlacklist, initialWhitelist } from "./lists.js";
-import { isWhitelistEnabled } from "./config.js";
+import { attachUrlHealthBadges } from "./urlHealthObserver.js";
+import { accessControl } from "./accessControl.js";
+
+let currentChannelHex = null;
+let currentChannelNpub = null;
+
+let cachedZapButton = null;
+let cachedChannelShareButton = null;
+let cachedChannelMenu = null;
+
+function getChannelZapButton() {
+  if (cachedZapButton && !document.body.contains(cachedZapButton)) {
+    cachedZapButton = null;
+  }
+  if (!cachedZapButton) {
+    cachedZapButton = document.getElementById("zapButton");
+  }
+  return cachedZapButton;
+}
+
+function setChannelZapVisibility(visible) {
+  const zapButton = getChannelZapButton();
+  if (!zapButton) {
+    return;
+  }
+  const shouldShow = !!visible;
+  zapButton.classList.toggle("hidden", !shouldShow);
+  zapButton.disabled = !shouldShow;
+  zapButton.setAttribute("aria-disabled", (!shouldShow).toString());
+  zapButton.setAttribute("aria-hidden", (!shouldShow).toString());
+  if (shouldShow) {
+    zapButton.removeAttribute("tabindex");
+  } else {
+    zapButton.setAttribute("tabindex", "-1");
+  }
+}
+
+function getChannelShareButton() {
+  if (cachedChannelShareButton && !document.body.contains(cachedChannelShareButton)) {
+    cachedChannelShareButton = null;
+  }
+  if (!cachedChannelShareButton) {
+    cachedChannelShareButton = document.getElementById("channelShareBtn");
+  }
+  return cachedChannelShareButton;
+}
+
+function getChannelMenuElement() {
+  if (cachedChannelMenu && !document.body.contains(cachedChannelMenu)) {
+    cachedChannelMenu = null;
+  }
+  if (!cachedChannelMenu) {
+    cachedChannelMenu = document.getElementById("moreDropdown-channel-profile");
+  }
+  return cachedChannelMenu;
+}
+
+function buildChannelShareUrl() {
+  if (!currentChannelNpub) {
+    return "";
+  }
+
+  const base = typeof app.getShareUrlBase === "function" ? app.getShareUrlBase() : "";
+  if (base) {
+    return `${base}#view=channel-profile&npub=${encodeURIComponent(currentChannelNpub)}`;
+  }
+
+  try {
+    const url = new URL(window.location.href);
+    url.search = "";
+    url.hash = `#view=channel-profile&npub=${currentChannelNpub}`;
+    return url.toString();
+  } catch (error) {
+    console.warn("Falling back to basic channel share URL:", error);
+    const origin = window.location?.origin || "";
+    const pathname = window.location?.pathname || "";
+    if (!origin && !pathname) {
+      return "";
+    }
+    return `${origin}${pathname}#view=channel-profile&npub=${currentChannelNpub}`;
+  }
+}
+
+function syncChannelShareButtonState() {
+  const shareBtn = getChannelShareButton();
+  if (!shareBtn) {
+    return;
+  }
+  const hasNpub = typeof currentChannelNpub === "string" && currentChannelNpub;
+  shareBtn.disabled = !hasNpub;
+  shareBtn.setAttribute("aria-disabled", (!hasNpub).toString());
+  shareBtn.classList.toggle("opacity-50", !hasNpub);
+  shareBtn.classList.toggle("cursor-not-allowed", !hasNpub);
+}
+
+function setupChannelShareButton() {
+  const shareBtn = getChannelShareButton();
+  if (!shareBtn) {
+    return;
+  }
+
+  syncChannelShareButtonState();
+
+  if (shareBtn.dataset.initialized === "true") {
+    return;
+  }
+
+  shareBtn.addEventListener("click", () => {
+    const shareUrl = buildChannelShareUrl();
+    if (!shareUrl) {
+      app.showError("Could not generate channel link.");
+      return;
+    }
+
+    navigator.clipboard
+      .writeText(shareUrl)
+      .then(() => app.showSuccess("Channel link copied to clipboard!"))
+      .catch(() => app.showError("Failed to copy the link."));
+  });
+
+  shareBtn.dataset.initialized = "true";
+}
+
+function setupChannelMoreMenu() {
+  const container = document.querySelector(".channel-profile-container");
+  if (!container) {
+    return;
+  }
+  app.attachMoreMenuHandlers(container);
+}
+
+async function updateChannelMenuState() {
+  const menu = getChannelMenuElement();
+  if (!menu) {
+    return;
+  }
+
+  try {
+    await accessControl.ensureReady();
+  } catch (error) {
+    console.warn("Failed to refresh moderation lists for channel menu:", error);
+  }
+
+  const canBlacklist =
+    typeof app.canCurrentUserManageBlacklist === "function"
+      ? app.canCurrentUserManageBlacklist()
+      : false;
+
+  const buttons = menu.querySelectorAll("button[data-action]");
+  buttons.forEach((button) => {
+    if (!(button instanceof HTMLElement)) {
+      return;
+    }
+
+    const action = button.dataset.action || "";
+    if (action === "copy-npub") {
+      if (currentChannelNpub) {
+        button.dataset.npub = currentChannelNpub;
+        button.classList.remove("hidden");
+        button.setAttribute("aria-hidden", "false");
+      } else {
+        delete button.dataset.npub;
+        button.classList.add("hidden");
+        button.setAttribute("aria-hidden", "true");
+      }
+      return;
+    }
+
+    if (action === "block-author") {
+      if (currentChannelHex) {
+        button.dataset.author = currentChannelHex;
+        button.classList.remove("hidden");
+        button.setAttribute("aria-hidden", "false");
+      } else {
+        delete button.dataset.author;
+        button.classList.add("hidden");
+        button.setAttribute("aria-hidden", "true");
+      }
+      return;
+    }
+
+    if (action === "blacklist-author") {
+      if (canBlacklist && currentChannelHex) {
+        button.dataset.author = currentChannelHex;
+        if (currentChannelNpub) {
+          button.dataset.npub = currentChannelNpub;
+        } else {
+          delete button.dataset.npub;
+        }
+        button.classList.remove("hidden");
+        button.setAttribute("aria-hidden", "false");
+      } else {
+        delete button.dataset.author;
+        delete button.dataset.npub;
+        button.classList.add("hidden");
+        button.setAttribute("aria-hidden", "true");
+      }
+    }
+  });
+}
 
 /**
  * Initialize the channel profile view.
@@ -25,6 +223,9 @@ export async function initChannelProfileView() {
     return;
   }
 
+  currentChannelHex = null;
+  currentChannelNpub = null;
+
   // 2) Decode npub => hex pubkey
   let hexPub;
   try {
@@ -39,6 +240,13 @@ export async function initChannelProfileView() {
     return;
   }
 
+  currentChannelHex = hexPub;
+  currentChannelNpub = npub;
+
+  setupChannelShareButton();
+  setupChannelMoreMenu();
+  await updateChannelMenuState();
+
   // 3) If user is logged in, load subscriptions and show sub/unsub button
   if (app.pubkey) {
     await subscriptions.loadSubscriptions(app.pubkey);
@@ -49,20 +257,25 @@ export async function initChannelProfileView() {
   }
 
   setupZapButton();
+  syncChannelShareButtonState();
 
   // 4) Load user’s profile (banner, avatar, etc.)
   await loadUserProfile(hexPub);
+  await updateChannelMenuState();
+  syncChannelShareButtonState();
 
   // 5) Load user’s videos (filtered + rendered like the home feed)
   await loadUserVideos(hexPub);
 }
 
 function setupZapButton() {
-  const zapButton = document.getElementById("zapButton");
+  const zapButton = getChannelZapButton();
   if (!zapButton) {
     return;
   }
 
+  setChannelZapVisibility(false);
+
   if (zapButton.dataset.initialized === "true") {
     return;
   }
@@ -181,15 +394,27 @@ async function loadUserProfile(pubkey) {
 
       // Lightning Address
       const lnEl = document.getElementById("channelLightning");
+      const lightningAddress = (meta.lud16 || meta.lud06 || "").trim();
       if (lnEl) {
         lnEl.textContent =
-          meta.lud16 || meta.lud06 || "No lightning address found.";
+          lightningAddress || "No lightning address found.";
       }
+      setChannelZapVisibility(!!lightningAddress);
     } else {
       console.warn("No metadata found for this user.");
+      setChannelZapVisibility(false);
+      const lnEl = document.getElementById("channelLightning");
+      if (lnEl) {
+        lnEl.textContent = "No lightning address found.";
+      }
     }
   } catch (err) {
     console.error("Failed to fetch user profile data:", err);
+    setChannelZapVisibility(false);
+    const lnEl = document.getElementById("channelLightning");
+    if (lnEl) {
+      lnEl.textContent = "No lightning address found.";
+    }
   }
 }
 
@@ -199,6 +424,12 @@ async function loadUserProfile(pubkey) {
  */
 async function loadUserVideos(pubkey) {
   try {
+    try {
+      await accessControl.ensureReady();
+    } catch (error) {
+      console.warn("Failed to ensure admin lists were loaded before channel fetch:", error);
+    }
+
     // 1) Build filter for videos from this pubkey
     const filter = {
       kinds: [30078],
@@ -218,29 +449,24 @@ async function loadUserVideos(pubkey) {
       }
     }
 
-    // 3) Convert to "video" objects
-    let videos = [];
-    for (const evt of events) {
-      const vid = sharedConvertEventToVideo(evt);
-      if (!vid.invalid && !vid.deleted) {
-        videos.push(vid);
-      }
-    }
+    // 3) Convert to "video" objects and keep everything (including tombstones)
+    const convertedVideos = events
+      .map((evt) => sharedConvertEventToVideo(evt))
+      .filter((vid) => !vid.invalid);
 
     // 4) Deduplicate older overshadowed versions => newest only
-    videos = app?.dedupeVideosByRoot?.(videos) ?? dedupeToNewestByRoot(videos);
+    const newestByRoot =
+      app?.dedupeVideosByRoot?.(convertedVideos) ??
+      dedupeToNewestByRoot(convertedVideos);
 
-    // 5) Filter out blacklisted IDs / authors
+    // 5) Filter out tombstones, blacklisted IDs / authors
+    let videos = newestByRoot.filter((video) => !video.deleted);
     videos = videos.filter((video) => {
       // Event-level blacklisting
       if (app.blacklistedEventIds.has(video.id)) return false;
 
       // Author-level
-      const authorNpub = app.safeEncodeNpub(video.pubkey) || video.pubkey;
-      if (initialBlacklist.includes(authorNpub)) return false;
-      if (isWhitelistEnabled && !initialWhitelist.includes(authorNpub)) {
-        return false;
-      }
+      if (!accessControl.canAccess(video)) return false;
       return true;
     });
 
@@ -344,6 +570,48 @@ async function loadUserVideos(pubkey) {
         `;
       }
 
+      const moreMenu = `
+        <div class="relative inline-block ml-1 overflow-visible" data-more-menu-wrapper="true">
+          <button
+            type="button"
+            class="inline-flex items-center justify-center w-10 h-10 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"
+            data-more-dropdown="${index}"
+            aria-haspopup="true"
+            aria-expanded="false"
+            aria-label="More options"
+          >
+            <img src="assets/svg/ellipsis.svg" alt="More" class="w-5 h-5 object-contain" />
+          </button>
+          <div
+            id="moreDropdown-${index}"
+            class="hidden absolute right-0 bottom-full mb-2 w-40 rounded-md shadow-lg bg-gray-800 ring-1 ring-black ring-opacity-5 z-50"
+            role="menu"
+            data-more-menu="true"
+          >
+            <div class="py-1">
+              <button class="block w-full text-left px-4 py-2 text-sm text-gray-100 hover:bg-gray-700" data-action="open-channel" data-author="${video.pubkey || ""}">
+                Open channel
+              </button>
+              <button class="block w-full text-left px-4 py-2 text-sm text-gray-100 hover:bg-gray-700" data-action="copy-link" data-event-id="${video.id || ""}">
+                Copy link
+              </button>
+              <button class="block w-full text-left px-4 py-2 text-sm text-red-400 hover:bg-red-700 hover:text-white" data-action="block-author" data-author="${video.pubkey || ""}">
+                Block creator
+              </button>
+              <button class="block w-full text-left px-4 py-2 text-sm text-gray-100 hover:bg-gray-700" data-action="report" data-event-id="${video.id || ""}">
+                Report
+              </button>
+            </div>
+          </div>
+        </div>
+      `;
+
+      const cardControls = `
+        <div class="flex items-center">
+          ${moreMenu}${gearMenu}
+        </div>
+      `;
+
       // Fallback thumbnail
       const fallbackThumb = "assets/jpg/video-thumbnail-fallback.jpg";
       const safeThumb = video.thumbnail || fallbackThumb;
@@ -361,6 +629,13 @@ async function loadUserVideos(pubkey) {
         "duration-300"
       );
 
+      cardEl.dataset.ownerIsViewer = canEdit ? "true" : "false";
+      if (typeof video.pubkey === "string" && video.pubkey) {
+        cardEl.dataset.ownerPubkey = video.pubkey;
+      } else if (cardEl.dataset.ownerPubkey) {
+        delete cardEl.dataset.ownerPubkey;
+      }
+
       const rawMagnet =
         typeof video.magnet === "string" ? video.magnet : "";
       const trimmedMagnet = rawMagnet ? rawMagnet.trim() : "";
@@ -420,7 +695,7 @@ async function loadUserVideos(pubkey) {
                 ${new Date(video.created_at * 1000).toLocaleString()}
               </p>
             </div>
-            ${gearMenu}
+            ${cardControls}
           </div>
           ${connectionBadgesHtml}
         </div>
@@ -434,6 +709,35 @@ async function loadUserVideos(pubkey) {
         delete cardEl.dataset.torrentSupported;
       }
 
+      if (trimmedUrl) {
+        cardEl.dataset.urlHealthState = "checking";
+        if (cardEl.dataset.urlHealthReason) {
+          delete cardEl.dataset.urlHealthReason;
+        }
+        cardEl.dataset.urlHealthEventId = video.id || "";
+        cardEl.dataset.urlHealthUrl = encodeURIComponent(trimmedUrl);
+      } else {
+        cardEl.dataset.urlHealthState = "offline";
+        cardEl.dataset.urlHealthReason = "missing-source";
+        if (cardEl.dataset.urlHealthEventId) {
+          delete cardEl.dataset.urlHealthEventId;
+        }
+        if (cardEl.dataset.urlHealthUrl) {
+          delete cardEl.dataset.urlHealthUrl;
+        }
+      }
+      if (magnetProvided && magnetSupported) {
+        cardEl.dataset.streamHealthState = "checking";
+        if (cardEl.dataset.streamHealthReason) {
+          delete cardEl.dataset.streamHealthReason;
+        }
+      } else {
+        cardEl.dataset.streamHealthState = "unhealthy";
+        cardEl.dataset.streamHealthReason = magnetProvided
+          ? "unsupported"
+          : "missing-source";
+      }
+
       if (magnetProvided) {
         cardEl.dataset.magnet = playbackMagnet;
       } else if (cardEl.dataset.magnet) {
@@ -464,14 +768,18 @@ async function loadUserVideos(pubkey) {
         }
       });
 
-      if (trimmedUrl) {
-        const badgeEl = cardEl.querySelector("[data-url-health-state]");
-        if (badgeEl) {
-          app.handleUrlHealthBadge({
-            video,
-            url: trimmedUrl,
-            badgeEl,
-          });
+      const badgeEl = cardEl.querySelector("[data-url-health-state]");
+      if (badgeEl) {
+        if (trimmedUrl) {
+          badgeEl.dataset.urlHealthEventId = video.id || "";
+          badgeEl.dataset.urlHealthUrl = encodeURIComponent(trimmedUrl);
+        } else {
+          if (badgeEl.dataset.urlHealthEventId) {
+            delete badgeEl.dataset.urlHealthEventId;
+          }
+          if (badgeEl.dataset.urlHealthUrl) {
+            delete badgeEl.dataset.urlHealthUrl;
+          }
         }
       }
 
@@ -481,14 +789,19 @@ async function loadUserVideos(pubkey) {
     container.appendChild(fragment);
 
     attachHealthBadges(container);
+    attachUrlHealthBadges(container, ({ badgeEl, url, eventId }) => {
+      const video = app.videosMap.get(eventId) || { id: eventId };
+      app.handleUrlHealthBadge({ video, url, badgeEl });
+    });
 
-    window.app.videoList = container;
     window.app.attachVideoListHandler();
 
     // Lazy-load images
     const lazyEls = container.querySelectorAll("[data-lazy]");
     lazyEls.forEach((el) => app.mediaLoader.observe(el));
 
+    app.attachMoreMenuHandlers(container);
+
     // Gear menu toggles
     const gearButtons = container.querySelectorAll("[data-settings-dropdown]");
     gearButtons.forEach((btn) => {
@@ -557,6 +870,26 @@ async function loadUserVideos(pubkey) {
   }
 }
 
+window.addEventListener("bitvid:access-control-updated", () => {
+  const hashParams = new URLSearchParams(window.location.hash.slice(1));
+  if (hashParams.get("view") !== "channel-profile") {
+    return;
+  }
+
+  if (!currentChannelHex) {
+    return;
+  }
+
+  const activeNpub = hashParams.get("npub");
+  if (currentChannelNpub && activeNpub && activeNpub !== currentChannelNpub) {
+    return;
+  }
+
+  loadUserVideos(currentChannelHex).catch((error) => {
+    console.error("Failed to refresh channel videos after admin update:", error);
+  });
+});
+
 /**
  * Minimal placeholder for private video decryption.
  */

js/config.js

@@ -1,4 +1,73 @@
 // js/config.js
 
+import {
+  ADMIN_SUPER_NPUB,
+  ADMIN_WHITELIST_MODE_STORAGE_KEY,
+  DEFAULT_WHITELIST_MODE_ENABLED,
+  WATCH_HISTORY_KIND,
+  WATCH_HISTORY_LIST_IDENTIFIER,
+  WATCH_HISTORY_LEGACY_LIST_IDENTIFIERS,
+  WATCH_HISTORY_MAX_ITEMS,
+  WATCH_HISTORY_BATCH_RESOLVE,
+  WATCH_HISTORY_BATCH_PAGE_SIZE,
+  WATCH_HISTORY_PAYLOAD_MAX_BYTES,
+  WATCH_HISTORY_FETCH_EVENT_LIMIT,
+  WATCH_HISTORY_CACHE_TTL_MS,
+  VIEW_COUNT_DEDUPE_WINDOW_SECONDS,
+  VIEW_COUNT_BACKFILL_MAX_DAYS,
+  VIEW_COUNT_CACHE_TTL_MS,
+} from "../config/instance-config.js";
+
 export const isDevMode = true; // Set to false for production
-export const isWhitelistEnabled = true; // Set to false to allow all non-blacklisted users
+
+// -----------------------------------------------------------------------------
+// Admin governance — production defaults rely on remote Nostr lists
+// -----------------------------------------------------------------------------
+
+export const ADMIN_LIST_MODE = "nostr";
+export { ADMIN_SUPER_NPUB };
+export const ADMIN_EDITORS_NPUBS = []; // Default moderators (optional)
+export const ADMIN_LIST_NAMESPACE = "bitvid:admin"; // Reserved for Nostr lists
+
+const WHITELIST_MODE_KEY = ADMIN_WHITELIST_MODE_STORAGE_KEY;
+const DEFAULT_WHITELIST_ENABLED = DEFAULT_WHITELIST_MODE_ENABLED;
+
+export function getWhitelistMode() {
+  try {
+    const raw = localStorage.getItem(WHITELIST_MODE_KEY);
+    if (raw === null) {
+      return DEFAULT_WHITELIST_ENABLED;
+    }
+    return raw === "true";
+  } catch (error) {
+    console.warn("Failed to read whitelist mode from storage:", error);
+    return DEFAULT_WHITELIST_ENABLED;
+  }
+}
+
+export function setWhitelistMode(enabled) {
+  try {
+    localStorage.setItem(WHITELIST_MODE_KEY, enabled ? "true" : "false");
+  } catch (error) {
+    console.warn("Failed to persist whitelist mode to storage:", error);
+  }
+}
+
+export { ADMIN_WHITELIST_MODE_STORAGE_KEY };
+
+// -----------------------------------------------------------------------------
+// Watch history — roadmap defaults balance retention with relay load
+// -----------------------------------------------------------------------------
+
+export { WATCH_HISTORY_KIND };
+export { WATCH_HISTORY_LIST_IDENTIFIER };
+export { WATCH_HISTORY_LEGACY_LIST_IDENTIFIERS };
+export { WATCH_HISTORY_MAX_ITEMS };
+export { WATCH_HISTORY_BATCH_RESOLVE };
+export { WATCH_HISTORY_BATCH_PAGE_SIZE };
+export { WATCH_HISTORY_PAYLOAD_MAX_BYTES };
+export { WATCH_HISTORY_FETCH_EVENT_LIMIT };
+export { WATCH_HISTORY_CACHE_TTL_MS };
+export { VIEW_COUNT_DEDUPE_WINDOW_SECONDS };
+export { VIEW_COUNT_BACKFILL_MAX_DAYS };
+export { VIEW_COUNT_CACHE_TTL_MS };

js/constants.js

@@ -1,10 +1,13 @@
 const DEFAULT_FLAGS = Object.freeze({
-  URL_FIRST_ENABLED: true,   // try URL before magnet in the player
-  ACCEPT_LEGACY_V1: true,    // accept v1 magnet-only notes
+  URL_FIRST_ENABLED: true, // try URL before magnet in the player
+  ACCEPT_LEGACY_V1: true, // accept v1 magnet-only notes
+  VIEW_FILTER_INCLUDE_LEGACY_VIDEO: false,
+  FEATURE_WATCH_HISTORY_V2: false,
   WSS_TRACKERS: Object.freeze([
     "wss://tracker.openwebtorrent.com",
-    "wss://tracker.btorrent.xyz",
+    "wss://tracker.fastcast.nz",
     "wss://tracker.webtorrent.dev",
+    "wss://tracker.sloppyta.co:443/announce",
   ]),
 });
 
@@ -17,6 +20,9 @@ const runtimeFlags = (() => {
   const initial = {
     URL_FIRST_ENABLED: DEFAULT_FLAGS.URL_FIRST_ENABLED,
     ACCEPT_LEGACY_V1: DEFAULT_FLAGS.ACCEPT_LEGACY_V1,
+    VIEW_FILTER_INCLUDE_LEGACY_VIDEO:
+      DEFAULT_FLAGS.VIEW_FILTER_INCLUDE_LEGACY_VIDEO,
+    FEATURE_WATCH_HISTORY_V2: DEFAULT_FLAGS.FEATURE_WATCH_HISTORY_V2,
     WSS_TRACKERS: [...DEFAULT_FLAGS.WSS_TRACKERS],
   };
   if (globalScope) {
@@ -92,6 +98,16 @@ export let ACCEPT_LEGACY_V1 = coerceBoolean(
   DEFAULT_FLAGS.ACCEPT_LEGACY_V1
 );
 
+export let VIEW_FILTER_INCLUDE_LEGACY_VIDEO = coerceBoolean(
+  runtimeFlags.VIEW_FILTER_INCLUDE_LEGACY_VIDEO,
+  DEFAULT_FLAGS.VIEW_FILTER_INCLUDE_LEGACY_VIDEO
+);
+
+export let FEATURE_WATCH_HISTORY_V2 = coerceBoolean(
+  runtimeFlags.FEATURE_WATCH_HISTORY_V2,
+  DEFAULT_FLAGS.FEATURE_WATCH_HISTORY_V2
+);
+
 export let WSS_TRACKERS = freezeTrackers(
   sanitizeTrackerList(runtimeFlags.WSS_TRACKERS)
 );
@@ -118,6 +134,34 @@ Object.defineProperty(runtimeFlags, "ACCEPT_LEGACY_V1", {
   },
 });
 
+Object.defineProperty(runtimeFlags, "VIEW_FILTER_INCLUDE_LEGACY_VIDEO", {
+  configurable: true,
+  enumerable: true,
+  get() {
+    return VIEW_FILTER_INCLUDE_LEGACY_VIDEO;
+  },
+  set(next) {
+    VIEW_FILTER_INCLUDE_LEGACY_VIDEO = coerceBoolean(
+      next,
+      DEFAULT_FLAGS.VIEW_FILTER_INCLUDE_LEGACY_VIDEO
+    );
+  },
+});
+
+Object.defineProperty(runtimeFlags, "FEATURE_WATCH_HISTORY_V2", {
+  configurable: true,
+  enumerable: true,
+  get() {
+    return FEATURE_WATCH_HISTORY_V2;
+  },
+  set(next) {
+    FEATURE_WATCH_HISTORY_V2 = coerceBoolean(
+      next,
+      DEFAULT_FLAGS.FEATURE_WATCH_HISTORY_V2
+    );
+  },
+});
+
 Object.defineProperty(runtimeFlags, "WSS_TRACKERS", {
   configurable: true,
   enumerable: true,
@@ -132,6 +176,8 @@ Object.defineProperty(runtimeFlags, "WSS_TRACKERS", {
 // Ensure the runtime object reflects the sanitized defaults immediately.
 runtimeFlags.URL_FIRST_ENABLED = URL_FIRST_ENABLED;
 runtimeFlags.ACCEPT_LEGACY_V1 = ACCEPT_LEGACY_V1;
+runtimeFlags.VIEW_FILTER_INCLUDE_LEGACY_VIDEO = VIEW_FILTER_INCLUDE_LEGACY_VIDEO;
+runtimeFlags.FEATURE_WATCH_HISTORY_V2 = FEATURE_WATCH_HISTORY_V2;
 runtimeFlags.WSS_TRACKERS = WSS_TRACKERS;
 
 export function setUrlFirstEnabled(next) {
@@ -144,6 +190,15 @@ export function setAcceptLegacyV1(next) {
   return ACCEPT_LEGACY_V1;
 }
 
+export function setViewFilterIncludeLegacyVideo(next) {
+  runtimeFlags.VIEW_FILTER_INCLUDE_LEGACY_VIDEO = next;
+  return VIEW_FILTER_INCLUDE_LEGACY_VIDEO;
+}
+
+export function getWatchHistoryV2Enabled() {
+  return FEATURE_WATCH_HISTORY_V2 === true;
+}
+
 export function setWssTrackers(next) {
   runtimeFlags.WSS_TRACKERS = next;
   return WSS_TRACKERS;
@@ -152,8 +207,17 @@ export function setWssTrackers(next) {
 export function resetRuntimeFlags() {
   setUrlFirstEnabled(DEFAULT_FLAGS.URL_FIRST_ENABLED);
   setAcceptLegacyV1(DEFAULT_FLAGS.ACCEPT_LEGACY_V1);
+  setViewFilterIncludeLegacyVideo(
+    DEFAULT_FLAGS.VIEW_FILTER_INCLUDE_LEGACY_VIDEO
+  );
+  setWatchHistoryV2Enabled(DEFAULT_FLAGS.FEATURE_WATCH_HISTORY_V2);
   setWssTrackers(DEFAULT_FLAGS.WSS_TRACKERS);
 }
 
 export const RUNTIME_FLAGS = runtimeFlags;
 
+export function setWatchHistoryV2Enabled(next) {
+  runtimeFlags.FEATURE_WATCH_HISTORY_V2 = next;
+  return FEATURE_WATCH_HISTORY_V2;
+}
+

js/dom/cardObserver.js

@@ -0,0 +1,208 @@
+const DEFAULT_CARD_SELECTOR = ".video-card";
+
+function defaultIsCardVisible(entry) {
+  if (!entry) {
+    return false;
+  }
+  const isIntersecting = Boolean(entry.isIntersecting);
+  const ratio = typeof entry.intersectionRatio === "number" ? entry.intersectionRatio : 0;
+  return isIntersecting && ratio > 0;
+}
+
+function normalizeState(value) {
+  if (value && typeof value === "object") {
+    return value;
+  }
+  return {};
+}
+
+export function createCardObserver(options = {}) {
+  const {
+    rootMargin = "0px",
+    threshold = 0,
+    cardSelector = DEFAULT_CARD_SELECTOR,
+    isCardVisible = defaultIsCardVisible,
+    prepareEntries,
+    onCardVisible,
+    onCardRegister,
+    createState,
+  } = options;
+
+  const containerState = new WeakMap();
+
+  function ensureState(container) {
+    let state = containerState.get(container);
+    if (state) {
+      return state;
+    }
+
+    const observedCards = new WeakSet();
+    const customState = normalizeState(
+      typeof createState === "function" ? createState(container) : {}
+    );
+
+    const stateWrapper = {
+      container,
+      observedCards,
+      customState,
+      observer: null,
+    };
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        handleEntries(entries, stateWrapper);
+      },
+      { root: null, rootMargin, threshold }
+    );
+
+    stateWrapper.observer = observer;
+    containerState.set(container, stateWrapper);
+    return stateWrapper;
+  }
+
+  function mapEntries(entries, state) {
+    if (!Array.isArray(entries) || entries.length === 0) {
+      return [];
+    }
+
+    const context = {
+      container: state.container,
+      observer: state.observer,
+      state: state.customState,
+    };
+
+    if (typeof prepareEntries === "function") {
+      try {
+        const prepared = prepareEntries(entries, context);
+        if (Array.isArray(prepared)) {
+          return prepared;
+        }
+      } catch (err) {
+        console.warn("[cardObserver] prepareEntries failed", err);
+      }
+    }
+
+    return entries;
+  }
+
+  function handleEntries(entries, state) {
+    const mapped = mapEntries(entries, state);
+    if (!mapped.length) {
+      return;
+    }
+
+    mapped.forEach((item) => {
+      let entry = item;
+      let card;
+      let meta;
+
+      if (item && typeof item === "object" && "entry" in item) {
+        entry = item.entry;
+        card = item.card instanceof HTMLElement ? item.card : entry?.target;
+        if ("meta" in item) {
+          meta = item.meta;
+        } else if ("data" in item) {
+          meta = item.data;
+        } else if (typeof item.priority !== "undefined") {
+          meta = { priority: item.priority };
+        }
+      } else if (entry && entry.target instanceof HTMLElement) {
+        card = entry.target;
+      }
+
+      if (!(card instanceof HTMLElement) || !entry) {
+        return;
+      }
+
+      let visible = false;
+      try {
+        visible = Boolean(isCardVisible(entry, card, {
+          container: state.container,
+          observer: state.observer,
+          state: state.customState,
+        }));
+      } catch (err) {
+        console.warn("[cardObserver] isCardVisible failed", err);
+        visible = false;
+      }
+
+      if (!visible || typeof onCardVisible !== "function") {
+        return;
+      }
+
+      try {
+        onCardVisible({
+          card,
+          entry,
+          meta,
+          state: state.customState,
+          context: {
+            container: state.container,
+            observer: state.observer,
+          },
+        });
+      } catch (err) {
+        console.warn("[cardObserver] onCardVisible failed", err);
+      }
+    });
+  }
+
+  function observe(container) {
+    if (!(container instanceof HTMLElement)) {
+      return null;
+    }
+
+    const state = ensureState(container);
+    const cards = container.querySelectorAll(cardSelector);
+    cards.forEach((card) => {
+      if (!(card instanceof HTMLElement)) {
+        return;
+      }
+      if (state.observedCards.has(card)) {
+        return;
+      }
+      state.observedCards.add(card);
+      if (typeof onCardRegister === "function") {
+        try {
+          onCardRegister({
+            card,
+            state: state.customState,
+            context: { container },
+          });
+        } catch (err) {
+          console.warn("[cardObserver] onCardRegister failed", err);
+        }
+      }
+      state.observer.observe(card);
+    });
+
+    const records = state.observer.takeRecords();
+    if (records.length) {
+      handleEntries(records, state);
+    }
+
+    return state.customState;
+  }
+
+  function refresh(container) {
+    const state = containerState.get(container);
+    if (!state) {
+      return;
+    }
+    const records = state.observer.takeRecords();
+    if (records.length) {
+      handleEntries(records, state);
+    }
+  }
+
+  function getState(container) {
+    const state = containerState.get(container);
+    return state ? state.customState : null;
+  }
+
+  return {
+    observe,
+    refresh,
+    getState,
+  };
+}

js/gridHealth.js

@@ -1,7 +1,7 @@
+import { createCardObserver } from "./dom/cardObserver.js";
 import { infoHashFromMagnet } from "./magnets.js";
 import { TorrentClient, torrentClient } from "./webtorrent.js";
 
-const containerState = new WeakMap();
 const ROOT_MARGIN = "200px 0px";
 
 function now() {
@@ -110,7 +110,7 @@ function normalizeResult(result) {
   };
 }
 
-function queueProbe(magnet, cacheKey) {
+function queueProbe(magnet, cacheKey, priority = 0) {
   if (!magnet) {
     return Promise.resolve(null);
   }
@@ -125,21 +125,23 @@ function queueProbe(magnet, cacheKey) {
   }
 
   const job = probeQueue
-    .run(() =>
-      torrentClient
-        .probePeers(magnet, {
-          timeoutMs: PROBE_TIMEOUT_MS,
-          maxWebConns: 2,
-          polls: PROBE_POLL_COUNT,
-        })
-        .catch((err) => ({
-          healthy: false,
-          peers: 0,
-          reason: "error",
-          error: err,
-          appendedTrackers: false,
-          hasProbeTrackers: false,
-        }))
+    .run(
+      () =>
+        torrentClient
+          .probePeers(magnet, {
+            timeoutMs: PROBE_TIMEOUT_MS,
+            maxWebConns: 2,
+            polls: PROBE_POLL_COUNT,
+          })
+          .catch((err) => ({
+            healthy: false,
+            peers: 0,
+            reason: "error",
+            error: err,
+            appendedTrackers: false,
+            hasProbeTrackers: false,
+          })),
+      priority
     )
     .then((result) => {
       const normalized = normalizeResult(result);
@@ -163,8 +165,9 @@ function queueProbe(magnet, cacheKey) {
 
 const PROBE_CACHE_TTL_MS = 5 * 60 * 1000;
 const PROBE_TIMEOUT_MS = 8000;
-const PROBE_CONCURRENCY = 3;
+const PROBE_CONCURRENCY = 96;
 const PROBE_POLL_COUNT = 3;
+const PRIORITY_BASELINE = 1_000_000;
 
 class ProbeQueue {
   constructor(max = 2) {
@@ -173,51 +176,72 @@ class ProbeQueue {
     this.queue = [];
   }
 
-  run(task) {
+  run(task, priority = 0) {
     return new Promise((resolve, reject) => {
-      this.queue.push({ task, resolve, reject });
+      const normalizedPriority = Number.isFinite(priority) ? priority : 0;
+      const job = {
+        task,
+        resolve,
+        reject,
+        priority: normalizedPriority,
+      };
+      this.enqueue(job);
       this.drain();
     });
   }
 
+  enqueue(job) {
+    if (!this.queue.length) {
+      this.queue.push(job);
+      return;
+    }
+    const index = this.queue.findIndex(
+      (existing) => existing.priority < job.priority
+    );
+    if (index === -1) {
+      this.queue.push(job);
+    } else {
+      this.queue.splice(index, 0, job);
+    }
+  }
+
   drain() {
-    if (this.running >= this.max) {
-      return;
-    }
-    const job = this.queue.shift();
-    if (!job) {
-      return;
-    }
-    this.running += 1;
-    let finished = false;
-    const finalize = () => {
-      if (finished) {
+    while (this.running < this.max && this.queue.length > 0) {
+      const job = this.queue.shift();
+      if (!job) {
         return;
       }
-      finished = true;
-      this.running -= 1;
-      this.drain();
-    };
+      this.running += 1;
+      let finished = false;
+      const finalize = () => {
+        if (finished) {
+          return;
+        }
+        finished = true;
+        this.running -= 1;
+        this.drain();
+      };
 
-    let result;
-    try {
-      result = job.task();
-    } catch (err) {
-      job.reject(err);
-      finalize();
-      return;
-    }
-
-    Promise.resolve(result)
-      .then((value) => {
-        job.resolve(value);
-      })
-      .catch((err) => {
+      let result;
+      try {
+        result = job.task();
+      } catch (err) {
         job.reject(err);
-      })
-      .finally(() => {
         finalize();
-      });
+        continue;
+      }
+
+      Promise.resolve(result)
+        .then((value) => {
+          job.resolve(value);
+        })
+        .catch((err) => {
+          job.reject(err);
+        })
+        .finally(() => {
+          finalize();
+        });
+    }
   }
 }
 
@@ -225,41 +249,171 @@ const probeQueue = new ProbeQueue(PROBE_CONCURRENCY);
 const probeCache = new Map();
 const probeInflight = new Map();
 
-function ensureState(container) {
-  let state = containerState.get(container);
-  if (state) {
-    return state;
+function getViewportCenter() {
+  if (typeof window === "undefined") {
+    return null;
+  }
+  const width = Number(window.innerWidth) || 0;
+  const height = Number(window.innerHeight) || 0;
+  if (width <= 0 && height <= 0) {
+    return null;
+  }
+  return {
+    x: width > 0 ? width / 2 : 0,
+    y: height > 0 ? height / 2 : 0,
+  };
+}
+
+function prioritizeEntries(entries, viewportCenter) {
+  if (!Array.isArray(entries) || entries.length === 0) {
+    return [];
+  }
+  const filtered = entries
+    .filter((entry) => entry.isIntersecting && entry.target instanceof HTMLElement)
+    .map((entry) => {
+      const rect = getIntersectionRect(entry);
+      if (!rect) {
+        return null;
+      }
+      const ratio =
+        typeof entry.intersectionRatio === "number" ? entry.intersectionRatio : 0;
+      const centerY = rect.top + rect.height / 2;
+      const verticalDistance = viewportCenter
+        ? Math.abs(centerY - viewportCenter.y)
+        : Number.POSITIVE_INFINITY;
+      return { entry, ratio, centerY, verticalDistance };
+    })
+    .filter(Boolean);
+
+  if (filtered.length === 0) {
+    return [];
   }
 
-  const pendingByCard = new WeakMap();
-  const observedCards = new WeakSet();
-
-  const observer = new IntersectionObserver(
-    (entries) => {
-      entries.forEach((entry) => {
-        const card = entry.target;
-        if (!(card instanceof HTMLElement)) {
-          return;
+  if (!viewportCenter) {
+    return filtered
+      .sort((a, b) => {
+        if (b.ratio !== a.ratio) {
+          return b.ratio - a.ratio;
         }
-        if (!entry.isIntersecting) {
-          return;
-        }
-        handleCardVisible({ card, pendingByCard });
-      });
-    },
-    { root: null, rootMargin: ROOT_MARGIN, threshold: 0.01 }
-  );
+        return a.centerY - b.centerY;
+      })
+      .map((item, index) => ({
+        entry: item.entry,
+        priority: PRIORITY_BASELINE - index,
+      }));
+  }
 
-  state = { observer, pendingByCard, observedCards };
-  containerState.set(container, state);
-  return state;
+  const ordered = filtered
+    .slice()
+    .sort((a, b) => a.centerY - b.centerY);
+
+  let centerIndex = 0;
+  let minDistance = Number.POSITIVE_INFINITY;
+  for (let i = 0; i < ordered.length; i += 1) {
+    const candidate = ordered[i];
+    if (candidate.verticalDistance < minDistance) {
+      minDistance = candidate.verticalDistance;
+      centerIndex = i;
+    }
+  }
+
+  const prioritized = [];
+  const pushCandidate = (candidate) => {
+    if (!candidate) {
+      return;
+    }
+    prioritized.push(candidate);
+  };
+
+  pushCandidate(ordered[centerIndex]);
+
+  let left = centerIndex - 1;
+  let right = centerIndex + 1;
+  while (left >= 0 || right < ordered.length) {
+    const leftCandidate = left >= 0 ? ordered[left] : null;
+    const rightCandidate = right < ordered.length ? ordered[right] : null;
+
+    if (leftCandidate && rightCandidate) {
+      const leftDistance = leftCandidate.verticalDistance;
+      const rightDistance = rightCandidate.verticalDistance;
+      const distanceDelta = Math.abs(leftDistance - rightDistance);
+      if (distanceDelta <= 0.5) {
+        if (rightCandidate.ratio > leftCandidate.ratio) {
+          pushCandidate(rightCandidate);
+          right += 1;
+        } else {
+          pushCandidate(leftCandidate);
+          left -= 1;
+        }
+      } else if (leftDistance < rightDistance) {
+        pushCandidate(leftCandidate);
+        left -= 1;
+      } else {
+        pushCandidate(rightCandidate);
+        right += 1;
+      }
+    } else if (rightCandidate) {
+      pushCandidate(rightCandidate);
+      right += 1;
+    } else if (leftCandidate) {
+      pushCandidate(leftCandidate);
+      left -= 1;
+    }
+  }
+
+  return prioritized.map((candidate, index) => ({
+    entry: candidate.entry,
+    priority: PRIORITY_BASELINE - index,
+  }));
+}
+
+function getIntersectionRect(entry) {
+  if (!entry) {
+    return null;
+  }
+  const rect = entry.intersectionRect;
+  if (rect && rect.width > 0 && rect.height > 0) {
+    return rect;
+  }
+  const fallback = entry.boundingClientRect;
+  if (fallback && fallback.width > 0 && fallback.height > 0) {
+    return fallback;
+  }
+  return rect || fallback || null;
 }
 
 function setBadge(card, state, details) {
+  if (!(card instanceof HTMLElement)) {
+    return;
+  }
+
+  const normalizedState =
+    typeof state === "string" && state ? state : "unknown";
+  const peersValue =
+    details && Number.isFinite(details.peers)
+      ? Math.max(0, Number(details.peers))
+      : 0;
+  const hasPeerCount = details ? Number.isFinite(details.peers) : false;
+  const peersTextValue = hasPeerCount ? String(peersValue) : "";
+
+  card.dataset.streamHealthState = normalizedState;
+  if (hasPeerCount) {
+    card.dataset.streamHealthPeers = peersTextValue;
+  } else if (card.dataset.streamHealthPeers) {
+    delete card.dataset.streamHealthPeers;
+  }
+
+  if (details && typeof details.reason === "string" && details.reason) {
+    card.dataset.streamHealthReason = details.reason;
+  } else if (card.dataset.streamHealthReason) {
+    delete card.dataset.streamHealthReason;
+  }
+
   const badge = card.querySelector(".torrent-health-badge");
   if (!badge) {
     return;
   }
+
   const hadMargin = badge.classList.contains("mt-3");
 
   const baseClasses = [
@@ -307,22 +461,19 @@ function setBadge(card, state, details) {
     },
   };
 
-  const entry = map[state] || map.unknown;
+  const entry = map[normalizedState] || map.unknown;
   entry.classes.forEach((cls) => badge.classList.add(cls));
 
-  const peers =
-    details && Number.isFinite(details.peers)
-      ? Math.max(0, Number(details.peers))
-      : 0;
-  const peersText = state === "healthy" && peers > 0 ? ` (${peers})` : "";
+  const peersText =
+    normalizedState === "healthy" && peersValue > 0 ? ` (${peersValue})` : "";
 
   const iconPrefix = entry.icon ? `${entry.icon} ` : "";
   badge.textContent = `${iconPrefix}WebTorrent${peersText}`;
   const tooltip =
-    state === "checking" || state === "unknown"
+    normalizedState === "checking" || normalizedState === "unknown"
       ? entry.aria
       : buildTooltip({
-          peers,
+          peers: peersValue,
           checkedAt: details?.checkedAt,
           reason: details?.reason,
         });
@@ -330,27 +481,31 @@ function setBadge(card, state, details) {
   badge.setAttribute("title", tooltip);
   badge.setAttribute("aria-live", entry.role === "alert" ? "assertive" : "polite");
   badge.setAttribute("role", entry.role);
-  badge.dataset.streamHealthState = state;
-  if (Number.isFinite(peers)) {
-    badge.dataset.streamHealthPeers = String(peers);
+  badge.dataset.streamHealthState = normalizedState;
+  if (hasPeerCount) {
+    badge.dataset.streamHealthPeers = peersTextValue;
   } else if (badge.dataset.streamHealthPeers) {
     delete badge.dataset.streamHealthPeers;
   }
 }
 
-function handleCardVisible({ card, pendingByCard }) {
+function handleCardVisible({ card, pendingByCard, priority = 0 }) {
   if (!(card instanceof HTMLElement)) {
     return;
   }
   const magnet = card.dataset.magnet || "";
   if (!magnet) {
-    setBadge(card, "unknown");
+    setBadge(card, "unhealthy", { reason: "missing-source" });
     return;
   }
 
   const infoHash = infoHashFromMagnet(magnet);
   if (!infoHash) {
-    setBadge(card, "unknown");
+    setBadge(card, "unhealthy", { reason: "invalid" });
+    return;
+  }
+
+  if (!(pendingByCard instanceof WeakMap)) {
     return;
   }
 
@@ -371,7 +526,7 @@ function handleCardVisible({ card, pendingByCard }) {
 
   setBadge(card, "checking");
 
-  const probePromise = queueProbe(magnet, infoHash);
+  const probePromise = queueProbe(magnet, infoHash, priority);
 
   pendingByCard.set(card, probePromise);
 
@@ -405,38 +560,50 @@ function handleCardVisible({ card, pendingByCard }) {
     });
 }
 
+const gridCardObserver = createCardObserver({
+  rootMargin: ROOT_MARGIN,
+  threshold: 0.01,
+  createState: () => ({ pendingByCard: new WeakMap() }),
+  prepareEntries: (entries) => {
+    const viewportCenter = getViewportCenter();
+    return prioritizeEntries(entries, viewportCenter);
+  },
+  isCardVisible: (entry) => {
+    if (!entry) {
+      return false;
+    }
+    const isIntersecting = Boolean(entry.isIntersecting);
+    const ratio = typeof entry.intersectionRatio === "number" ? entry.intersectionRatio : 0;
+    return isIntersecting && ratio > 0;
+  },
+  onCardRegister: ({ card }) => {
+    if (!card.dataset.magnet) {
+      setBadge(card, "unhealthy", { reason: "missing-source" });
+    }
+  },
+  onCardVisible: ({ card, meta, state }) => {
+    if (!state || !(state.pendingByCard instanceof WeakMap)) {
+      return;
+    }
+    const priority =
+      meta && typeof meta === "object" && Number.isFinite(meta.priority)
+        ? meta.priority
+        : PRIORITY_BASELINE;
+    handleCardVisible({
+      card,
+      pendingByCard: state.pendingByCard,
+      priority,
+    });
+  },
+});
+
 export function attachHealthBadges(container) {
   if (!(container instanceof HTMLElement)) {
     return;
   }
-  const state = ensureState(container);
-  const cards = container.querySelectorAll(".video-card");
-  cards.forEach((card) => {
-    if (!(card instanceof HTMLElement)) {
-      return;
-    }
-    if (state.observedCards.has(card)) {
-      return;
-    }
-    state.observedCards.add(card);
-    state.observer.observe(card);
-    if (!card.dataset.magnet) {
-      setBadge(card, "unknown");
-    }
-  });
+  gridCardObserver.observe(container);
 }
 
 export function refreshHealthBadges(container) {
-  if (!(container instanceof HTMLElement)) {
-    return;
-  }
-  const state = containerState.get(container);
-  if (!state) {
-    return;
-  }
-  state.observer.takeRecords().forEach((entry) => {
-    if (entry.isIntersecting) {
-      handleCardVisible({ card: entry.target, pendingByCard: state.pendingByCard });
-    }
-  });
+  gridCardObserver.refresh(container);
 }

js/index.js

@@ -257,6 +257,10 @@ export function setHashView(viewName) {
   url.searchParams.delete("v");
   const newUrl = url.pathname + url.search + `#view=${viewName}`;
   window.history.replaceState({}, "", newUrl);
+
+  if (typeof viewName === "string" && viewName.toLowerCase() === "history") {
+  }
+
   handleHashChange();
 }
 
@@ -362,38 +366,58 @@ function handleQueryParams() {
   }
 }
 
-function handleHashChange() {
+async function waitForAppInitialization() {
+  const maybePromise = window.appReady;
+
+  if (!maybePromise || typeof maybePromise.then !== "function") {
+    return;
+  }
+
+  try {
+    await maybePromise;
+  } catch (error) {
+    console.warn(
+      "Proceeding with hash handling despite app initialization failure:",
+      error
+    );
+  }
+}
+
+async function handleHashChange() {
   console.log("handleHashChange called, current hash =", window.location.hash);
 
+  await waitForAppInitialization();
+
   const hash = window.location.hash || "";
   // Use a regex that captures up to the first ampersand or end of string.
   // E.g. "#view=channel-profile&npub=..." => viewName = "channel-profile"
   const match = hash.match(/^#view=([^&]+)/);
 
-  if (!match || !match[1]) {
-    // No valid "#view=..." => default to "most-recent-videos"
-    import("./viewManager.js").then(({ loadView, viewInitRegistry }) => {
-      loadView("views/most-recent-videos.html").then(() => {
-        const initFn = viewInitRegistry["most-recent-videos"];
-        if (typeof initFn === "function") {
-          initFn();
-        }
-        recordView("most-recent-videos");
-      });
-    });
-    return;
+  try {
+    const { loadView, viewInitRegistry } = await import("./viewManager.js");
+
+    if (!match || !match[1]) {
+      // No valid "#view=..." => default to "most-recent-videos"
+      await loadView("views/most-recent-videos.html");
+      const initFn = viewInitRegistry["most-recent-videos"];
+      if (typeof initFn === "function") {
+        initFn();
+      }
+      return;
+    }
+
+    const viewName = match[1]; // only the chunk before any '&'
+    if (typeof viewName === "string" && viewName.toLowerCase() === "history") {
+    }
+    const viewUrl = `views/${viewName}.html`;
+
+    // Now dynamically load that partial, then call its init function
+    await loadView(viewUrl);
+    const initFn = viewInitRegistry[viewName];
+    if (typeof initFn === "function") {
+      initFn();
+    }
+  } catch (error) {
+    console.error("Failed to handle hash change:", error);
   }
-
-  const viewName = match[1]; // only the chunk before any '&'
-  const viewUrl = `views/${viewName}.html`;
-
-  // Now dynamically load that partial, then call its init function
-  import("./viewManager.js").then(({ loadView, viewInitRegistry }) => {
-      loadView(viewUrl).then(() => {
-        const initFn = viewInitRegistry[viewName];
-        if (typeof initFn === "function") {
-          initFn();
-        }
-      });
-  });
 }

js/lists.js

@@ -1,26 +1,10 @@
 // js/lists.js
 
-// Whitelist of npubs that can access the video upload functions
-const npubs = [
-  "npub13yarr7j6vjqjjkahd63dmr27curypehx45ucue286ac7sft27y0srnpmpe", // bitvid
-  "npub15jnttpymeytm80hatjqcvhhqhzrhx6gxp8pq0wn93rhnu8s9h9dsha32lx", // thePR0M3TH3AN
-  "npub1j37gc05qpqzyrmdc5vetsc9h5qtstas7tr25j0n9sdpqxghz6m4q2ej6n8", // Ghost Grid Network
-  "npub1epvnvv3kskvpnmpqgnm2atevsmdferhp7dg2s0yc7uc0hdmqmgssx09tu2", // Chain Reaction
-  "npub1qny3tkh0acurzla8x3zy4nhrjz5zd8l9sy9jys09umwng00manysew95gx", // ODELL
-  "npub1qxduthz4p8v5zsux524df569pt7lj0d36dyqadnta2val64dtnhsr50h64", // NosToons
-  "npub19ma2w9dmk3kat0nt0k5dwuqzvmg3va9ezwup0zkakhpwv0vcwvcsg8axkl", // vinney
-  "npub1rcr8h76csgzhdhea4a7tq5w5gydcpg9clgf0cffu6z45rnc6yp5sj7cfuz", // djmeistro
-  "npub1m5s9w4t03znyetxswhgq0ud7fq8ef8y3l4kscn2e8wkvmv42hh3qujgjl3", // mister_monster
-  "npub13qexjtmajssuhz8gdchgx65dwsnr705drse294zz5vt4e78ya2vqzyg8lv", // SatoshiSignal
-  "npub1da7m2ksdj24995hm8afv88pjpvzt6t9vh70mg8t52yjwtxza3vjszyar58", // GoblinBox
-  "npub196rl3tls3c4y79pc3ptrrj2430z7p5uwetfhukhtkt69hph0fvwq08l43q", // ~Bordut-Nodlex
-];
-
-console.log("DEBUG: lists.js loaded, npubs:", npubs);
-
-// Blacklist of npubs that events will not be displayed in the bitvid official client
-export const initialWhitelist = npubs;
-export const initialBlacklist = [""];
+// Operators must manage admin lists through the Admin panel UI or remote
+// adapters. These legacy constants are intentionally empty so new installs do
+// not ship with hard-coded accounts.
+export const ADMIN_INITIAL_WHITELIST = [];
+export const ADMIN_INITIAL_BLACKLIST = [];
 
 // Block specific events with the nevent
-export const initialEventBlacklist = [""];
+export const ADMIN_INITIAL_EVENT_BLACKLIST = [];

js/magnet.js

@@ -1,170 +1,50 @@
-import { WSS_TRACKERS } from "./constants.js";
+import {
+  buildMagnetUri,
+  ensureTrackers,
+  ensureTorrentHint,
+  ensureWebSeeds,
+  formatAbsoluteUrl,
+  normalizeMagnetInput,
+  resolveAppProtocol,
+  extractMagnetHints as sharedExtractMagnetHints,
+} from "./magnetShared.js";
 
-const HEX_INFO_HASH = /^[0-9a-f]{40}$/i;
-const ENCODED_BTih_PATTERN = /xt=urn%3Abtih%3A([0-9a-z]+)/gi;
+export const extractMagnetHints = sharedExtractMagnetHints;
 
-function getOriginProtocol() {
-  if (typeof window !== "undefined" && window.location?.protocol) {
-    return window.location.protocol.toLowerCase();
-  }
-  return "https:";
-}
-
-function decodeLoose(value) {
-  if (typeof value !== "string") {
-    return "";
-  }
-  const trimmed = value.trim();
-  if (!trimmed) {
-    return "";
-  }
-  try {
-    return decodeURIComponent(trimmed);
-  } catch (err) {
-    return trimmed;
-  }
-}
-
-function normalizeForComparison(value) {
-  if (typeof value !== "string") {
-    return "";
-  }
-  return value.trim().replace(/\/+$/, "").toLowerCase();
-}
-
-function tryFormatAbsoluteUrl(candidate) {
-  if (typeof candidate !== "string") {
-    return "";
-  }
-  const trimmed = candidate.trim();
-  if (!trimmed) {
-    return "";
-  }
-  try {
-    const parsed = new URL(trimmed);
-    return parsed.toString();
-  } catch (err) {
-    return trimmed;
-  }
-}
-
-/**
- * Normalize and enrich a magnet string entered in the upload form so that it
- * always produces a WebTorrent-friendly URI. The logic mirrors the behaviour of
- * the legacy magnetUtils helper but returns a plain string for ease of use.
- */
 export function normalizeAndAugmentMagnet(rawValue, { ws = "", xs = "" } = {}) {
-  const initial = typeof rawValue === "string" ? rawValue.trim() : "";
+  const {
+    initial,
+    canonicalValue,
+    isMagnet,
+    normalizedScheme,
+    fragment,
+    params,
+  } = normalizeMagnetInput(rawValue);
+
   if (!initial) {
     return "";
   }
 
-  let working = initial;
-
-  if (HEX_INFO_HASH.test(working)) {
-    working = `magnet:?xt=urn:btih:${working.toLowerCase()}`;
+  if (!isMagnet) {
+    return canonicalValue;
   }
 
-  working = working.replace(ENCODED_BTih_PATTERN, (_, hash) => `xt=urn:btih:${hash}`);
-
-  if (!/^magnet:/i.test(working)) {
-    return working;
-  }
-
-  let fragment = "";
-  const hashIndex = working.indexOf("#");
-  if (hashIndex !== -1) {
-    fragment = working.slice(hashIndex);
-    working = working.slice(0, hashIndex);
-  }
-
-  const [, queryPart = ""] = working.split("?", 2);
-  const normalizedScheme = "magnet:";
-  const rawParams = queryPart
-    .split("&")
-    .map((part) => part.trim())
-    .filter(Boolean);
-
-  const params = [];
-
-  for (const rawParam of rawParams) {
-    const [rawKey, rawVal = ""] = rawParam.split("=", 2);
-    const key = rawKey.trim();
-    if (!key) {
-      continue;
-    }
-    let value = rawVal.trim();
-    if (key.toLowerCase() === "xt" && value) {
-      const decoded = decodeLoose(value);
-      if (decoded) {
-        value = decoded;
-      }
-    }
-    params.push({
-      key,
-      value,
-      lowerKey: key.toLowerCase(),
-      compareValue: normalizeForComparison(value),
-    });
-  }
-
-  const appendUniqueParam = (key, value) => {
-    if (!value) {
-      return;
-    }
-    const trimmedValue = value.trim();
-    if (!trimmedValue) {
-      return;
-    }
-    const lowerKey = key.toLowerCase();
-    const compareValue = normalizeForComparison(trimmedValue);
-    if (compareValue) {
-      const exists = params.some(
-        (param) => param.lowerKey === lowerKey && param.compareValue === compareValue
-      );
-      if (exists) {
-        return;
-      }
-    }
-    params.push({
-      key,
-      value: trimmedValue,
-      lowerKey,
-      compareValue,
-    });
-  };
-
-  for (const tracker of WSS_TRACKERS) {
-    if (typeof tracker !== "string") {
-      continue;
-    }
-    const trimmedTracker = tracker.trim();
-    if (!/^wss:\/\//i.test(trimmedTracker)) {
-      continue;
-    }
-    appendUniqueParam("tr", trimmedTracker);
-  }
+  ensureTrackers(params);
 
   const normalizedXs = typeof xs === "string" ? xs.trim() : "";
   if (normalizedXs) {
-    appendUniqueParam("xs", normalizedXs);
+    ensureTorrentHint(params, normalizedXs, { requireHttp: false });
   }
 
-  const originProtocol = getOriginProtocol();
   const rawWs = typeof ws === "string" ? ws.trim() : "";
   if (rawWs) {
-    const formattedWs = tryFormatAbsoluteUrl(rawWs);
-    const lowerWs = formattedWs.toLowerCase();
-    const isHttpSeed = lowerWs.startsWith("http://");
-    const allowHttpSeed = originProtocol === "http:";
-    if (!isHttpSeed || allowHttpSeed) {
-      appendUniqueParam("ws", formattedWs);
-    }
+    const formattedWs = formatAbsoluteUrl(rawWs);
+    const allowHttpSeed = resolveAppProtocol() === "http:";
+    ensureWebSeeds(params, formattedWs, {
+      allowHttp: allowHttpSeed,
+      allowUnparsed: true,
+    });
   }
 
-  const queryString = params
-    .map(({ key, value }) => (value ? `${key}=${value}` : key))
-    .join("&");
-
-  return `${normalizedScheme}${queryString ? `?${queryString}` : ""}${fragment}`;
+  return buildMagnetUri(normalizedScheme, params, fragment);
 }

js/magnetShared.js

@@ -0,0 +1,345 @@
+import { WSS_TRACKERS } from "./constants.js";
+import {
+  safeDecodeURIComponent,
+  safeDecodeURIComponentLoose,
+} from "./utils/safeDecode.js";
+
+const HEX_INFO_HASH = /^[0-9a-f]{40}$/i;
+const BTIH_PREFIX = "urn:btih:";
+const MAGNET_SCHEME = "magnet:";
+const ENCODED_BTih_PATTERN = /xt=urn%3Abtih%3A([0-9a-z]+)/gi;
+
+export function safeDecodeMagnet(value) {
+  if (typeof value !== "string") {
+    return "";
+  }
+
+  let decoded = value.trim();
+  if (!decoded) {
+    return "";
+  }
+
+  for (let i = 0; i < 2; i += 1) {
+    if (!decoded.includes("%")) {
+      break;
+    }
+
+    const candidate = safeDecodeURIComponent(decoded);
+    if (!candidate || candidate === decoded) {
+      break;
+    }
+    decoded = candidate.trim();
+  }
+
+  return decoded;
+}
+
+export function normalizeForComparison(value) {
+  if (typeof value !== "string") {
+    return "";
+  }
+  const trimmed = value.trim();
+  if (!trimmed) {
+    return "";
+  }
+  try {
+    const parsed = new URL(trimmed);
+    const pathname = parsed.pathname.replace(/\/?$/, "");
+    const normalizedPath = pathname ? pathname : "";
+    return (
+      `${parsed.protocol}//${parsed.host}${normalizedPath}${parsed.search}${parsed.hash}`
+        .trim()
+        .toLowerCase()
+    );
+  } catch (err) {
+    return trimmed.replace(/\/?$/, "").toLowerCase();
+  }
+}
+
+function createParam(key, value) {
+  const trimmedValue = typeof value === "string" ? value.trim() : "";
+  const decoded = safeDecodeURIComponentLoose(trimmedValue);
+  const comparisonBasis = decoded || trimmedValue;
+  return {
+    key,
+    value: trimmedValue,
+    lowerKey: key.toLowerCase(),
+    decoded,
+    comparison: normalizeForComparison(comparisonBasis),
+  };
+}
+
+export function normalizeMagnetInput(rawValue) {
+  const initial = typeof rawValue === "string" ? rawValue.trim() : "";
+  if (!initial) {
+    return {
+      initial,
+      canonicalValue: "",
+      didMutate: false,
+      isMagnet: false,
+      normalizedScheme: "",
+      fragment: "",
+      params: [],
+    };
+  }
+
+  let working = initial;
+  let didMutate = false;
+
+  if (HEX_INFO_HASH.test(working)) {
+    working = `${MAGNET_SCHEME}?xt=${BTIH_PREFIX}${working.toLowerCase()}`;
+    didMutate = true;
+  }
+
+  ENCODED_BTih_PATTERN.lastIndex = 0;
+  const decodedXt = working.replace(ENCODED_BTih_PATTERN, (_, hash) => {
+    didMutate = true;
+    return `xt=${BTIH_PREFIX}${hash}`;
+  });
+  working = decodedXt;
+
+  let fragment = "";
+  const hashIndex = working.indexOf("#");
+  if (hashIndex !== -1) {
+    fragment = working.slice(hashIndex);
+    working = working.slice(0, hashIndex);
+  }
+
+  const canonicalValue = working;
+  if (!/^magnet:/i.test(working)) {
+    return {
+      initial,
+      canonicalValue,
+      didMutate: didMutate || canonicalValue !== initial,
+      isMagnet: false,
+      normalizedScheme: "",
+      fragment: "",
+      params: [],
+    };
+  }
+
+  const [schemePart, queryPart = ""] = working.split("?", 2);
+  const normalizedScheme = MAGNET_SCHEME;
+  if (schemePart !== normalizedScheme) {
+    didMutate = true;
+  }
+
+  const rawParams = queryPart
+    .split("&")
+    .map((part) => part.trim())
+    .filter(Boolean);
+
+  const params = [];
+  for (const rawParam of rawParams) {
+    const [rawKey, rawVal = ""] = rawParam.split("=", 2);
+    const key = rawKey.trim();
+    if (!key) {
+      continue;
+    }
+    const lowerKey = key.toLowerCase();
+    let value = rawVal.trim();
+    if (lowerKey === "xt" && value) {
+      const decoded = safeDecodeURIComponentLoose(value);
+      if (decoded && decoded !== value) {
+        value = decoded;
+        didMutate = true;
+      }
+    }
+    params.push(createParam(key, value));
+  }
+
+  return {
+    initial,
+    canonicalValue,
+    didMutate,
+    isMagnet: true,
+    normalizedScheme,
+    fragment,
+    params,
+  };
+}
+
+export function buildMagnetUri(normalizedScheme, params, fragment) {
+  const queryString = params
+    .map(({ key, value }) => (value ? `${key}=${value}` : key))
+    .join("&");
+  return `${normalizedScheme}${queryString ? `?${queryString}` : ""}${fragment || ""}`;
+}
+
+export function appendUniqueParam(params, key, value) {
+  if (!Array.isArray(params)) {
+    return false;
+  }
+  const candidate = createParam(key, value);
+  if (!candidate.value && candidate.value !== "") {
+    return false;
+  }
+  if (candidate.comparison) {
+    const exists = params.some(
+      (param) => param.lowerKey === candidate.lowerKey && param.comparison === candidate.comparison
+    );
+    if (exists) {
+      return false;
+    }
+  } else {
+    const exists = params.some(
+      (param) => param.lowerKey === candidate.lowerKey && param.value === candidate.value
+    );
+    if (exists) {
+      return false;
+    }
+  }
+  params.push(candidate);
+  return true;
+}
+
+export function ensureTrackers(params, trackers = WSS_TRACKERS) {
+  let didMutate = false;
+  for (const tracker of trackers) {
+    if (typeof tracker !== "string") {
+      continue;
+    }
+    const trimmedTracker = tracker.trim();
+    if (!trimmedTracker) {
+      continue;
+    }
+    if (!/^wss:\/\//i.test(trimmedTracker)) {
+      continue;
+    }
+    if (appendUniqueParam(params, "tr", trimmedTracker)) {
+      didMutate = true;
+    }
+  }
+  return didMutate;
+}
+
+export function sanitizeHttpUrl(candidate) {
+  if (typeof candidate !== "string") {
+    return "";
+  }
+  const trimmed = candidate.trim();
+  if (!trimmed) {
+    return "";
+  }
+  try {
+    const parsed = new URL(trimmed);
+    if (parsed.protocol === "http:" || parsed.protocol === "https:") {
+      return parsed.toString();
+    }
+  } catch (err) {
+    return "";
+  }
+  return "";
+}
+
+export function ensureTorrentHint(params, candidate, { requireHttp = true } = {}) {
+  if (requireHttp) {
+    const sanitized = sanitizeHttpUrl(candidate);
+    if (!sanitized) {
+      return false;
+    }
+    return appendUniqueParam(params, "xs", sanitized);
+  }
+
+  if (typeof candidate !== "string") {
+    return false;
+  }
+  const trimmed = candidate.trim();
+  if (!trimmed) {
+    return false;
+  }
+  return appendUniqueParam(params, "xs", trimmed);
+}
+
+export function resolveAppProtocol(explicitProtocol) {
+  if (typeof explicitProtocol === "string" && explicitProtocol.trim()) {
+    return explicitProtocol.trim().toLowerCase();
+  }
+  if (typeof window !== "undefined" && window.location?.protocol) {
+    return window.location.protocol.toLowerCase();
+  }
+  return "https:";
+}
+
+export function ensureWebSeeds(
+  params,
+  seeds,
+  { allowHttp = false, allowUnparsed = false, logger } = {}
+) {
+  const list = Array.isArray(seeds)
+    ? seeds
+    : typeof seeds === "string"
+      ? [seeds]
+      : [];
+  let didMutate = false;
+  for (const seed of list) {
+    if (typeof seed !== "string") {
+      continue;
+    }
+    const trimmedSeed = seed.trim();
+    if (!trimmedSeed) {
+      continue;
+    }
+    let finalValue = trimmedSeed;
+    let parsed;
+    try {
+      parsed = new URL(trimmedSeed);
+      const protocol = parsed.protocol;
+      if (protocol === "https:") {
+        finalValue = parsed.toString();
+      } else if (protocol === "http:") {
+        if (!allowHttp) {
+          if (typeof logger === "function") {
+            logger(`[normalizeAndAugmentMagnet] Skipping insecure web seed: ${trimmedSeed}`);
+          }
+          continue;
+        }
+        finalValue = parsed.toString();
+      } else if (!allowUnparsed) {
+        continue;
+      }
+    } catch (err) {
+      if (!allowUnparsed) {
+        continue;
+      }
+    }
+
+    if (appendUniqueParam(params, "ws", finalValue)) {
+      didMutate = true;
+    }
+  }
+  return didMutate;
+}
+
+export function formatAbsoluteUrl(candidate) {
+  if (typeof candidate !== "string") {
+    return "";
+  }
+  const trimmed = candidate.trim();
+  if (!trimmed) {
+    return "";
+  }
+  try {
+    const parsed = new URL(trimmed);
+    return parsed.toString();
+  } catch (err) {
+    return trimmed;
+  }
+}
+
+export function extractMagnetHints(rawValue) {
+  const { params } = normalizeMagnetInput(rawValue);
+  const hints = { ws: "", xs: "" };
+  for (const param of params) {
+    if (param.lowerKey === "ws" && !hints.ws) {
+      hints.ws = param.decoded || param.value;
+    } else if (param.lowerKey === "xs" && !hints.xs) {
+      hints.xs = param.decoded || param.value;
+    }
+    if (hints.ws && hints.xs) {
+      break;
+    }
+  }
+  return hints;
+}
+

js/magnetUtils.js

@@ -1,101 +1,19 @@
 // js/magnetUtils.js
 
 import { WSS_TRACKERS } from "./constants.js";
+import {
+  buildMagnetUri,
+  ensureTrackers,
+  ensureTorrentHint,
+  ensureWebSeeds,
+  normalizeMagnetInput,
+  resolveAppProtocol,
+  safeDecodeMagnet as sharedSafeDecodeMagnet,
+} from "./magnetShared.js";
 
 export { WSS_TRACKERS };
+export const safeDecodeMagnet = sharedSafeDecodeMagnet;
 
-const HEX_INFO_HASH = /^[0-9a-f]{40}$/i;
-const BTIH_PREFIX = "urn:btih:";
-const ENCODED_BTih_PATTERN = /xt=urn%3Abtih%3A([0-9a-z]+)/gi;
-
-function normalizeForComparison(value) {
-  if (typeof value !== "string") {
-    return "";
-  }
-  const trimmed = value.trim();
-  if (!trimmed) {
-    return "";
-  }
-  try {
-    const parsed = new URL(trimmed);
-    const pathname = parsed.pathname.replace(/\/?$/, "");
-    const normalizedPath = pathname ? pathname : "";
-    return (
-      `${parsed.protocol}//${parsed.host}${normalizedPath}${parsed.search}${parsed.hash}`
-        .trim()
-        .toLowerCase()
-    );
-  } catch (err) {
-    return trimmed.replace(/\/?$/, "").toLowerCase();
-  }
-}
-
-function sanitizeHttpUrl(candidate) {
-  if (typeof candidate !== "string") {
-    return "";
-  }
-  const trimmed = candidate.trim();
-  if (!trimmed) {
-    return "";
-  }
-  try {
-    const parsed = new URL(trimmed);
-    if (parsed.protocol === "http:" || parsed.protocol === "https:") {
-      return parsed.toString();
-    }
-  } catch (err) {
-    return "";
-  }
-  return "";
-}
-
-export function safeDecodeMagnet(value) {
-  if (typeof value !== "string") {
-    return "";
-  }
-
-  let decoded = value.trim();
-  if (!decoded) {
-    return "";
-  }
-
-  for (let i = 0; i < 2; i += 1) {
-    if (!decoded.includes("%")) {
-      break;
-    }
-
-    try {
-      const candidate = decodeURIComponent(decoded);
-      if (!candidate) {
-        break;
-      }
-      if (candidate === decoded) {
-        break;
-      }
-      decoded = candidate.trim();
-    } catch (err) {
-      break;
-    }
-  }
-
-  return decoded;
-}
-
-/**
- * Normalize a magnet URI while preserving legacy payload quirks and augmenting it
- * for browser playback.
- *
- * Key behaviors:
- * - Accepts bare info-hash strings and promotes them to full `magnet:?xt=urn:btih:` links.
- * - Leaves the existing `xt` payload untouched—no percent re-encoding or normalization
- *   beyond decoding legacy `%3A` segments.
- * - Only appends browser-safe WSS trackers in addition to whatever the caller provides.
- * - Skips insecure `http:` web seeds unless the application itself is running over HTTP.
- *
- * Note: `didChange` may be reported even if the resulting magnet string is textually
- * identical to the input. Callers should not rely on `didChange` to detect a modified
- * URI.
- */
 export function normalizeAndAugmentMagnet(
   rawValue,
   {
@@ -107,83 +25,32 @@ export function normalizeAndAugmentMagnet(
     appProtocol,
   } = {}
 ) {
-  const log = typeof logger === "function" ? logger : () => {};
-  const initial = typeof rawValue === "string" ? rawValue.trim() : "";
+  const {
+    initial,
+    canonicalValue,
+    didMutate,
+    isMagnet,
+    normalizedScheme,
+    fragment,
+    params,
+  } = normalizeMagnetInput(rawValue);
+
   if (!initial) {
     return { magnet: "", didChange: false };
   }
 
-  let working = initial;
-  let didMutate = false;
-  const bareHashMatch = HEX_INFO_HASH.test(working);
-  if (bareHashMatch) {
-    working = `magnet:?xt=${BTIH_PREFIX}${working.toLowerCase()}`;
-    didMutate = true;
-  }
-
-  const hashIndex = working.indexOf("#");
-  let fragment = "";
-  if (hashIndex !== -1) {
-    fragment = working.slice(hashIndex);
-    working = working.slice(0, hashIndex);
-  }
-
-  const decodedXt = working.replace(ENCODED_BTih_PATTERN, (_, hash) => {
-    didMutate = true;
-    return `xt=${BTIH_PREFIX}${hash}`;
-  });
-  working = decodedXt;
-
-  if (!/^magnet:/i.test(working)) {
+  if (!isMagnet) {
+    const magnet = canonicalValue;
     return {
-      magnet: working,
-      didChange: didMutate || working !== initial,
+      magnet,
+      didChange: didMutate || magnet !== initial,
     };
   }
 
-  const [schemePart, queryPart = ""] = working.split("?", 2);
-  const normalizedScheme = "magnet:";
-  if (schemePart !== normalizedScheme) {
-    didMutate = true;
-  }
+  let didChange = didMutate;
 
-  const rawParams = queryPart
-    .split("&")
-    .map((part) => part.trim())
-    .filter(Boolean);
-
-  const params = [];
-
-  const decodeLoose = (value) => {
-    if (typeof value !== "string" || !value) {
-      return "";
-    }
-    try {
-      return decodeURIComponent(value);
-    } catch (err) {
-      return value;
-    }
-  };
-
-  for (const rawParam of rawParams) {
-    const [rawKey, rawValue = ""] = rawParam.split("=", 2);
-    const key = rawKey.trim();
-    if (!key) {
-      continue;
-    }
-    let value = rawValue.trim();
-    if (key.toLowerCase() === "xt" && value) {
-      const decoded = decodeLoose(value);
-      if (decoded !== value) {
-        value = decoded;
-        didMutate = true;
-      }
-    }
-    params.push({
-      key,
-      value,
-      decoded: decodeLoose(value),
-    });
+  if (ensureTrackers(params, [...WSS_TRACKERS, ...extraTrackers])) {
+    didChange = true;
   }
 
   const torrentHint = typeof torrentUrl === "string" && torrentUrl.trim()
@@ -192,118 +59,34 @@ export function normalizeAndAugmentMagnet(
       ? xs.trim()
       : "";
 
-  const safeTorrentHint = sanitizeHttpUrl(torrentHint);
+  if (torrentHint) {
+    if (ensureTorrentHint(params, torrentHint, { requireHttp: true })) {
+      didChange = true;
+    }
+  }
+
   const seedInputs = Array.isArray(webSeed)
     ? webSeed
     : typeof webSeed === "string"
       ? [webSeed]
       : [];
 
-  const resolvedProtocol = typeof appProtocol === "string" && appProtocol
-    ? appProtocol.toLowerCase()
-    : typeof window !== "undefined" && window.location && window.location.protocol
-      ? window.location.protocol.toLowerCase()
-      : "https:";
+  const resolvedProtocol = resolveAppProtocol(appProtocol);
 
-  const existingTrackers = new Set(
-    params
-      .filter((param) => param.key.toLowerCase() === "tr")
-      .map((param) => normalizeForComparison(param.decoded))
-      .filter(Boolean)
-  );
-
-  const trackerCandidates = [
-    ...WSS_TRACKERS,
-    ...extraTrackers,
-  ];
-
-  for (const tracker of trackerCandidates) {
-    if (typeof tracker !== "string") {
-      continue;
-    }
-    const trimmedTracker = tracker.trim();
-    if (!trimmedTracker) {
-      continue;
-    }
-    if (!/^wss:\/\//i.test(trimmedTracker)) {
-      continue;
-    }
-    const normalizedTracker = normalizeForComparison(trimmedTracker);
-    if (!normalizedTracker || existingTrackers.has(normalizedTracker)) {
-      continue;
-    }
-    params.push({ key: "tr", value: trimmedTracker, decoded: trimmedTracker });
-    existingTrackers.add(normalizedTracker);
-    didMutate = true;
+  if (
+    ensureWebSeeds(params, seedInputs, {
+      allowHttp: resolvedProtocol === "http:",
+      allowUnparsed: false,
+      logger,
+    })
+  ) {
+    didChange = true;
   }
 
-  if (safeTorrentHint) {
-    const existingXs = new Set(
-      params
-        .filter((param) => param.key.toLowerCase() === "xs")
-        .map((param) => normalizeForComparison(param.decoded))
-        .filter(Boolean)
-    );
-    const normalizedXs = normalizeForComparison(safeTorrentHint);
-    if (normalizedXs && !existingXs.has(normalizedXs)) {
-      params.push({
-        key: "xs",
-        value: safeTorrentHint,
-        decoded: safeTorrentHint,
-      });
-      didMutate = true;
-    }
-  }
-
-  if (seedInputs.length) {
-    const existingWs = new Set(
-      params
-        .filter((param) => param.key.toLowerCase() === "ws")
-        .map((param) => normalizeForComparison(param.decoded))
-        .filter(Boolean)
-    );
-    for (const seedInput of seedInputs) {
-      if (typeof seedInput !== "string") {
-        continue;
-      }
-      const trimmedSeed = seedInput.trim();
-      if (!trimmedSeed) {
-        continue;
-      }
-      try {
-        const parsedSeed = new URL(trimmedSeed);
-        const seedProtocol = parsedSeed.protocol;
-        const allowHttpSeed = resolvedProtocol === "http:";
-        if (
-          seedProtocol === "https:" ||
-          (seedProtocol === "http:" && allowHttpSeed)
-        ) {
-          const seedValue = parsedSeed.toString();
-          const normalizedSeed = normalizeForComparison(seedValue);
-          if (normalizedSeed && !existingWs.has(normalizedSeed)) {
-            params.push({ key: "ws", value: seedValue, decoded: seedValue });
-            existingWs.add(normalizedSeed);
-            didMutate = true;
-          }
-        } else if (seedProtocol === "http:") {
-          log(
-            `[normalizeAndAugmentMagnet] Skipping insecure web seed: ${trimmedSeed}`
-          );
-        }
-      } catch (err) {
-        // Ignore invalid web seed values silently.
-      }
-    }
-  }
-
-  const queryString = params
-    .map(({ key, value }) => (value ? `${key}=${value}` : key))
-    .join("&");
-
-  const finalMagnet = `${normalizedScheme}${queryString ? `?${queryString}` : ""}${fragment}`;
+  const finalMagnet = buildMagnetUri(normalizedScheme, params, fragment);
 
   return {
     magnet: finalMagnet,
-    didChange: didMutate || finalMagnet !== initial,
+    didChange: didChange || finalMagnet !== initial,
   };
 }

js/nostrEventSchemas.js

@@ -0,0 +1,780 @@
+import {
+  ADMIN_LIST_NAMESPACE,
+  isDevMode,
+  WATCH_HISTORY_KIND,
+  WATCH_HISTORY_LIST_IDENTIFIER,
+} from "./config.js";
+
+export const NOTE_TYPES = Object.freeze({
+  VIDEO_POST: "videoPost",
+  VIDEO_MIRROR: "videoMirror",
+  RELAY_LIST: "relayList",
+  VIEW_EVENT: "viewEvent",
+  WATCH_HISTORY_INDEX: "watchHistoryIndex",
+  WATCH_HISTORY_CHUNK: "watchHistoryChunk",
+  SUBSCRIPTION_LIST: "subscriptionList",
+  USER_BLOCK_LIST: "userBlockList",
+  ADMIN_MODERATION_LIST: "adminModerationList",
+  ADMIN_BLACKLIST: "adminBlacklist",
+  ADMIN_WHITELIST: "adminWhitelist",
+});
+
+export const SUBSCRIPTION_LIST_IDENTIFIER = "subscriptions";
+export const BLOCK_LIST_IDENTIFIER = "user-blocks";
+export const ADMIN_LIST_IDENTIFIERS = Object.freeze({
+  moderation: "editors",
+  editors: "editors",
+  whitelist: "whitelist",
+  blacklist: "blacklist",
+});
+
+const DEFAULT_APPEND_TAGS = [];
+
+let cachedUtf8Encoder = null;
+
+function ensureValidUtf8Content(value) {
+  let normalized = "";
+  if (typeof value === "string") {
+    normalized = value;
+  } else if (value === undefined || value === null) {
+    normalized = "";
+  } else if (typeof value === "object") {
+    try {
+      const stringified = JSON.stringify(value);
+      normalized = typeof stringified === "string" ? stringified : "";
+    } catch (error) {
+      if (isDevMode) {
+        console.warn(
+          "[nostrEventSchemas] Failed to serialize view event content:",
+          error
+        );
+      }
+      normalized = "";
+    }
+  } else {
+    normalized = String(value);
+  }
+
+  if (!cachedUtf8Encoder && typeof TextEncoder !== "undefined") {
+    cachedUtf8Encoder = new TextEncoder();
+  }
+
+  if (cachedUtf8Encoder) {
+    try {
+      cachedUtf8Encoder.encode(normalized);
+    } catch (error) {
+      if (isDevMode) {
+        console.warn(
+          "[nostrEventSchemas] Dropping invalid UTF-8 characters from event content",
+          error
+        );
+      }
+      const sanitized = Array.from(normalized)
+        .filter((char) => {
+          const code = char.charCodeAt(0);
+          return code < 0xd800 || code > 0xdfff;
+        })
+        .join("");
+      try {
+        cachedUtf8Encoder.encode(sanitized);
+        normalized = sanitized;
+      } catch (encodeError) {
+        if (isDevMode) {
+          console.warn(
+            "[nostrEventSchemas] Failed to normalize view event content; defaulting to empty string",
+            encodeError
+          );
+        }
+        normalized = "";
+      }
+    }
+  }
+
+  return normalized;
+}
+
+const BASE_SCHEMAS = {
+  [NOTE_TYPES.VIDEO_POST]: {
+    type: NOTE_TYPES.VIDEO_POST,
+    label: "Video post",
+    kind: 30078,
+    topicTag: { name: "t", value: "video" },
+    identifierTag: { name: "d" },
+    appendTags: DEFAULT_APPEND_TAGS,
+    content: {
+      format: "json",
+      schemaVersion: 3,
+      fields: [
+        { key: "version", type: "number", required: true },
+        { key: "title", type: "string", required: true },
+        { key: "url", type: "string", required: false },
+        { key: "magnet", type: "string", required: false },
+        { key: "thumbnail", type: "string", required: false },
+        { key: "description", type: "string", required: false },
+        { key: "mode", type: "string", required: false },
+        { key: "videoRootId", type: "string", required: true },
+        { key: "deleted", type: "boolean", required: false },
+        { key: "isPrivate", type: "boolean", required: false },
+        { key: "enableComments", type: "boolean", required: false },
+        { key: "ws", type: "string", required: false },
+        { key: "xs", type: "string", required: false },
+      ],
+    },
+  },
+  [NOTE_TYPES.VIDEO_MIRROR]: {
+    type: NOTE_TYPES.VIDEO_MIRROR,
+    label: "NIP-94 mirror",
+    kind: 1063,
+    appendTags: DEFAULT_APPEND_TAGS,
+    content: {
+      format: "text",
+      description: "Optional alt text carried alongside hosted URL metadata.",
+    },
+  },
+  [NOTE_TYPES.RELAY_LIST]: {
+    type: NOTE_TYPES.RELAY_LIST,
+    label: "Relay list metadata",
+    kind: 10002,
+    relayTagName: "r",
+    readMarker: "read",
+    writeMarker: "write",
+    appendTags: DEFAULT_APPEND_TAGS,
+    content: { format: "empty", description: "Content field unused." },
+  },
+  [NOTE_TYPES.VIEW_EVENT]: {
+    type: NOTE_TYPES.VIEW_EVENT,
+    label: "View counter",
+    kind: WATCH_HISTORY_KIND,
+    topicTag: { name: "t", value: "view" },
+    identifierTag: { name: "d" },
+    sessionTag: { name: "session", value: "true" },
+    appendTags: DEFAULT_APPEND_TAGS,
+    content: {
+      format: "text",
+      description: "Optional plaintext content used for diagnostics.",
+    },
+  },
+  [NOTE_TYPES.WATCH_HISTORY_INDEX]: {
+    type: NOTE_TYPES.WATCH_HISTORY_INDEX,
+    label: "Watch history index",
+    kind: WATCH_HISTORY_KIND,
+    identifierTag: {
+      name: "d",
+      value: WATCH_HISTORY_LIST_IDENTIFIER,
+    },
+    snapshotTagName: "snapshot",
+    totalTagName: "chunks",
+    chunkPointerTagName: "a",
+    appendTags: DEFAULT_APPEND_TAGS,
+    content: {
+      format: "json",
+      description:
+        "JSON payload describing the active snapshot and chunk count.",
+    },
+  },
+  [NOTE_TYPES.WATCH_HISTORY_CHUNK]: {
+    type: NOTE_TYPES.WATCH_HISTORY_CHUNK,
+    label: "Watch history snapshot",
+    kind: WATCH_HISTORY_KIND,
+    identifierTag: {
+      name: "d",
+    },
+    encryptionTag: { name: "encrypted", value: "nip04" },
+    snapshotTagName: "snapshot",
+    chunkTagName: "chunk",
+    headTag: { name: "head", value: "1" },
+    headTagIndex: 2,
+    appendTags: DEFAULT_APPEND_TAGS,
+    content: {
+      format: "nip04-json",
+      description:
+        "Encrypted JSON payload containing chunked watch history entries.",
+    },
+  },
+  [NOTE_TYPES.SUBSCRIPTION_LIST]: {
+    type: NOTE_TYPES.SUBSCRIPTION_LIST,
+    label: "Subscription list",
+    kind: 30002,
+    identifierTag: {
+      name: "d",
+      value: SUBSCRIPTION_LIST_IDENTIFIER,
+    },
+    appendTags: DEFAULT_APPEND_TAGS,
+    content: {
+      format: "nip04-json",
+      description: "Encrypted JSON: { subPubkeys: string[] }.",
+    },
+  },
+  [NOTE_TYPES.USER_BLOCK_LIST]: {
+    type: NOTE_TYPES.USER_BLOCK_LIST,
+    label: "User block list",
+    kind: 30002,
+    identifierTag: {
+      name: "d",
+      value: BLOCK_LIST_IDENTIFIER,
+    },
+    appendTags: DEFAULT_APPEND_TAGS,
+    content: {
+      format: "nip04-json",
+      description: "Encrypted JSON: { blockedPubkeys: string[] }.",
+    },
+  },
+  [NOTE_TYPES.ADMIN_MODERATION_LIST]: {
+    type: NOTE_TYPES.ADMIN_MODERATION_LIST,
+    label: "Admin moderation list",
+    kind: 30000,
+    identifierTag: {
+      name: "d",
+      value: `${ADMIN_LIST_NAMESPACE}:${ADMIN_LIST_IDENTIFIERS.moderation}`,
+    },
+    participantTagName: "p",
+    appendTags: DEFAULT_APPEND_TAGS,
+    content: { format: "empty", description: "Content field unused." },
+  },
+  [NOTE_TYPES.ADMIN_BLACKLIST]: {
+    type: NOTE_TYPES.ADMIN_BLACKLIST,
+    label: "Admin blacklist",
+    kind: 30000,
+    identifierTag: {
+      name: "d",
+      value: `${ADMIN_LIST_NAMESPACE}:${ADMIN_LIST_IDENTIFIERS.blacklist}`,
+    },
+    participantTagName: "p",
+    appendTags: DEFAULT_APPEND_TAGS,
+    content: { format: "empty", description: "Content field unused." },
+  },
+  [NOTE_TYPES.ADMIN_WHITELIST]: {
+    type: NOTE_TYPES.ADMIN_WHITELIST,
+    label: "Admin whitelist",
+    kind: 30000,
+    identifierTag: {
+      name: "d",
+      value: `${ADMIN_LIST_NAMESPACE}:${ADMIN_LIST_IDENTIFIERS.whitelist}`,
+    },
+    participantTagName: "p",
+    appendTags: DEFAULT_APPEND_TAGS,
+    content: { format: "empty", description: "Content field unused." },
+  },
+};
+
+let schemaOverrides = {};
+
+function clone(value) {
+  if (Array.isArray(value)) {
+    return value.map(clone);
+  }
+  if (value && typeof value === "object") {
+    const result = {};
+    for (const [key, nested] of Object.entries(value)) {
+      result[key] = clone(nested);
+    }
+    return result;
+  }
+  return value;
+}
+
+function mergeDeep(base, override) {
+  const result = clone(base);
+  if (!override || typeof override !== "object") {
+    return result;
+  }
+  for (const [key, value] of Object.entries(override)) {
+    if (value && typeof value === "object" && !Array.isArray(value)) {
+      result[key] = mergeDeep(base?.[key] ?? {}, value);
+    } else {
+      result[key] = clone(value);
+    }
+  }
+  return result;
+}
+
+function resolveOverride(type) {
+  const local = schemaOverrides?.[type];
+  if (local) {
+    return local;
+  }
+
+  if (typeof window !== "undefined") {
+    const runtimeOverrides = window.BitVidNostrEventOverrides;
+    if (runtimeOverrides && runtimeOverrides[type]) {
+      return runtimeOverrides[type];
+    }
+  }
+  return null;
+}
+
+export function setNostrEventSchemaOverrides(overrides = {}) {
+  if (overrides && typeof overrides === "object") {
+    schemaOverrides = overrides;
+  } else {
+    schemaOverrides = {};
+  }
+
+  if (typeof window !== "undefined") {
+    window.BitVidNostrEventOverrides = schemaOverrides;
+  }
+}
+
+export function getNostrEventSchema(type) {
+  const base = BASE_SCHEMAS[type];
+  if (!base) {
+    return null;
+  }
+  const override = resolveOverride(type);
+  return mergeDeep(base, override);
+}
+
+export function getAllNostrEventSchemas() {
+  const entries = {};
+  for (const type of Object.keys(BASE_SCHEMAS)) {
+    entries[type] = getNostrEventSchema(type);
+  }
+  return entries;
+}
+
+function appendSchemaTags(tags, schema) {
+  if (!Array.isArray(schema?.appendTags)) {
+    return tags;
+  }
+  schema.appendTags.forEach((tag) => {
+    if (Array.isArray(tag) && tag.length >= 2) {
+      tags.push(tag.map((value) => (typeof value === "string" ? value : String(value))));
+    }
+  });
+  return tags;
+}
+
+export function buildVideoPostEvent({
+  pubkey,
+  created_at,
+  dTagValue,
+  content,
+  additionalTags = [],
+}) {
+  const schema = getNostrEventSchema(NOTE_TYPES.VIDEO_POST);
+  const tags = [];
+  if (schema?.topicTag?.name && schema?.topicTag?.value) {
+    tags.push([schema.topicTag.name, schema.topicTag.value]);
+  }
+  if (schema?.identifierTag?.name && dTagValue) {
+    tags.push([schema.identifierTag.name, dTagValue]);
+  }
+  appendSchemaTags(tags, schema);
+  if (Array.isArray(additionalTags)) {
+    additionalTags.forEach((tag) => {
+      if (Array.isArray(tag) && tag.length >= 2) {
+        tags.push(tag.map((value) => (typeof value === "string" ? value : String(value))));
+      }
+    });
+  }
+
+  return {
+    kind: schema?.kind ?? 30078,
+    pubkey,
+    created_at,
+    tags,
+    content: typeof content === "string" ? content : JSON.stringify(content ?? {}),
+  };
+}
+
+export function buildVideoMirrorEvent({
+  pubkey,
+  created_at,
+  tags = [],
+  content = "",
+}) {
+  const schema = getNostrEventSchema(NOTE_TYPES.VIDEO_MIRROR);
+  const combinedTags = [];
+  appendSchemaTags(combinedTags, schema);
+  if (Array.isArray(tags)) {
+    tags.forEach((tag) => {
+      if (Array.isArray(tag) && tag.length >= 2) {
+        combinedTags.push(tag.map((value) => (typeof value === "string" ? value : String(value))));
+      }
+    });
+  }
+  return {
+    kind: schema?.kind ?? 1063,
+    pubkey,
+    created_at,
+    tags: combinedTags,
+    content: typeof content === "string" ? content : String(content ?? ""),
+  };
+}
+
+export function buildRelayListEvent({
+  pubkey,
+  created_at,
+  relays = [],
+  additionalTags = [],
+}) {
+  const schema = getNostrEventSchema(NOTE_TYPES.RELAY_LIST);
+  const tags = [];
+  const relayTagName = schema?.relayTagName || "r";
+  const readMarker = schema?.readMarker || "read";
+  const writeMarker = schema?.writeMarker || "write";
+
+  if (Array.isArray(relays)) {
+    relays.forEach((entry) => {
+      let url = "";
+      let mode = "";
+      if (typeof entry === "string") {
+        url = entry;
+      } else if (entry && typeof entry === "object") {
+        if (typeof entry.url === "string") {
+          url = entry.url;
+        }
+        if (typeof entry.mode === "string") {
+          mode = entry.mode;
+        } else if (typeof entry.marker === "string") {
+          mode = entry.marker;
+        } else if (entry.read === true && entry.write === false) {
+          mode = "read";
+        } else if (entry.write === true && entry.read === false) {
+          mode = "write";
+        }
+      } else if (Array.isArray(entry) && entry.length >= 1) {
+        url = typeof entry[0] === "string" ? entry[0] : String(entry[0]);
+        if (entry.length > 1 && typeof entry[1] === "string") {
+          mode = entry[1];
+        }
+      }
+
+      const normalizedUrl = typeof url === "string" ? url.trim() : "";
+      if (!normalizedUrl) {
+        return;
+      }
+
+      const normalizedMode = typeof mode === "string" ? mode.trim().toLowerCase() : "";
+      if (normalizedMode === "read") {
+        tags.push([relayTagName, normalizedUrl, readMarker]);
+      } else if (normalizedMode === "write") {
+        tags.push([relayTagName, normalizedUrl, writeMarker]);
+      } else {
+        tags.push([relayTagName, normalizedUrl]);
+      }
+    });
+  }
+
+  appendSchemaTags(tags, schema);
+
+  if (Array.isArray(additionalTags)) {
+    additionalTags.forEach((tag) => {
+      if (Array.isArray(tag) && tag.length >= 2) {
+        tags.push(tag.map((value) => (typeof value === "string" ? value : String(value))));
+      }
+    });
+  }
+
+  return {
+    kind: schema?.kind ?? 10002,
+    pubkey,
+    created_at,
+    tags,
+    content: "",
+  };
+}
+
+export function buildViewEvent({
+  pubkey,
+  created_at,
+  pointerValue,
+  pointerTag,
+  pointerTags = [],
+  dedupeTag,
+  includeSessionTag = false,
+  additionalTags = [],
+  content = "",
+}) {
+  const schema = getNostrEventSchema(NOTE_TYPES.VIEW_EVENT);
+  const tags = [];
+  if (schema?.topicTag?.name && schema?.topicTag?.value) {
+    tags.push([schema.topicTag.name, schema.topicTag.value]);
+  }
+
+  const pointerTagName = schema?.pointerTagName;
+  if (pointerValue && pointerTagName) {
+    tags.push([pointerTagName, pointerValue]);
+  }
+  const normalizedPointerTags = [];
+  if (Array.isArray(pointerTag) && pointerTag.length >= 2) {
+    normalizedPointerTags.push(
+      pointerTag.map((value) => (typeof value === "string" ? value : String(value)))
+    );
+  }
+  if (Array.isArray(pointerTags)) {
+    pointerTags.forEach((tag) => {
+      if (Array.isArray(tag) && tag.length >= 2) {
+        normalizedPointerTags.push(
+          tag.map((value) => (typeof value === "string" ? value : String(value)))
+        );
+      }
+    });
+  }
+  normalizedPointerTags.forEach((tag) => {
+    tags.push(tag);
+  });
+  if (Array.isArray(additionalTags)) {
+    additionalTags.forEach((tag) => {
+      if (Array.isArray(tag) && tag.length >= 2) {
+        tags.push(tag.map((value) => (typeof value === "string" ? value : String(value))));
+      }
+    });
+  }
+
+  if (dedupeTag && schema?.identifierTag?.name) {
+    const identifierName = schema.identifierTag.name;
+    const hasDedupe = tags.some(
+      (tag) => tag[0] === identifierName && tag[1] === dedupeTag
+    );
+    if (!hasDedupe) {
+      tags.push([identifierName, dedupeTag]);
+    }
+  }
+  if (includeSessionTag && schema?.sessionTag?.name && schema?.sessionTag?.value) {
+    const hasSession = tags.some(
+      (tag) => tag[0] === schema.sessionTag.name && tag[1] === schema.sessionTag.value
+    );
+    if (!hasSession) {
+      tags.push([schema.sessionTag.name, schema.sessionTag.value]);
+    }
+  }
+  appendSchemaTags(tags, schema);
+
+  const resolvedContent = ensureValidUtf8Content(content);
+
+  return {
+    kind: schema?.kind ?? WATCH_HISTORY_KIND,
+    pubkey,
+    created_at,
+    tags,
+    content: resolvedContent,
+  };
+}
+
+export function buildWatchHistoryIndexEvent({
+  pubkey,
+  created_at,
+  snapshotId,
+  totalChunks,
+  chunkAddresses = [],
+  additionalTags = [],
+  content,
+}) {
+  const schema = getNostrEventSchema(NOTE_TYPES.WATCH_HISTORY_INDEX);
+  const tags = [];
+  const identifierName = schema?.identifierTag?.name || "d";
+  const identifierValue = schema?.identifierTag?.value || WATCH_HISTORY_LIST_IDENTIFIER;
+  if (identifierName && identifierValue) {
+    tags.push([identifierName, identifierValue]);
+  }
+  const snapshotTagName = schema?.snapshotTagName || "snapshot";
+  if (snapshotTagName && snapshotId) {
+    tags.push([snapshotTagName, snapshotId]);
+  }
+  const totalTagName = schema?.totalTagName || "chunks";
+  if (totalTagName && Number.isFinite(totalChunks)) {
+    tags.push([totalTagName, String(Math.max(0, Math.floor(totalChunks)))]);
+  }
+  const pointerTagName = schema?.chunkPointerTagName || "a";
+  chunkAddresses.forEach((address) => {
+    if (typeof address === "string" && address) {
+      tags.push([pointerTagName, address]);
+    }
+  });
+
+  appendSchemaTags(tags, schema);
+
+  if (Array.isArray(additionalTags)) {
+    additionalTags.forEach((tag) => {
+      if (Array.isArray(tag) && tag.length >= 2) {
+        tags.push(tag.map((value) => (typeof value === "string" ? value : String(value))));
+      }
+    });
+  }
+
+  let resolvedContent = content;
+  if (resolvedContent === undefined) {
+    const payload = {};
+    if (snapshotId) {
+      payload.snapshot = snapshotId;
+    }
+    if (Number.isFinite(totalChunks)) {
+      payload.totalChunks = Math.max(0, Math.floor(totalChunks));
+    }
+    resolvedContent = JSON.stringify(payload);
+  } else if (typeof resolvedContent !== "string") {
+    resolvedContent = JSON.stringify(resolvedContent ?? {});
+  }
+
+  return {
+    kind: schema?.kind ?? WATCH_HISTORY_KIND,
+    pubkey,
+    created_at,
+    tags,
+    content:
+      typeof resolvedContent === "string"
+        ? resolvedContent
+        : String(resolvedContent ?? ""),
+  };
+}
+
+export function buildWatchHistoryChunkEvent({
+  pubkey,
+  created_at,
+  chunkIdentifier,
+  snapshotId,
+  chunkIndex,
+  totalChunks,
+  pointerTags = [],
+  chunkAddresses = [],
+  content,
+}) {
+  const schema = getNostrEventSchema(NOTE_TYPES.WATCH_HISTORY_CHUNK);
+  const tags = [];
+  const identifierName = schema?.identifierTag?.name || "d";
+  const identifierValue = chunkIdentifier || schema?.identifierTag?.value;
+  if (identifierName && identifierValue) {
+    tags.push([identifierName, identifierValue]);
+  }
+  if (schema?.encryptionTag?.name && schema?.encryptionTag?.value) {
+    tags.push([schema.encryptionTag.name, schema.encryptionTag.value]);
+  }
+  const snapshotTagName = schema?.snapshotTagName;
+  if (snapshotTagName && snapshotId) {
+    tags.push([snapshotTagName, snapshotId]);
+  }
+  const chunkTagName = schema?.chunkTagName;
+  if (chunkTagName && typeof chunkIndex === "number" && typeof totalChunks === "number") {
+    tags.push([chunkTagName, String(chunkIndex), String(totalChunks)]);
+  }
+  pointerTags.forEach((tag) => {
+    if (Array.isArray(tag) && tag.length >= 2) {
+      tags.push(tag.map((value) => (typeof value === "string" ? value : String(value))));
+    }
+  });
+
+  if (chunkIndex === 0 && schema?.headTag?.name && schema?.headTag?.value) {
+    const insertionIndex = Number.isInteger(schema?.headTagIndex)
+      ? Math.max(0, Math.min(tags.length, schema.headTagIndex))
+      : Math.min(tags.length, 2);
+    tags.splice(insertionIndex, 0, [schema.headTag.name, schema.headTag.value]);
+    chunkAddresses.forEach((address) => {
+      if (typeof address === "string" && address) {
+        tags.push(["a", address]);
+      }
+    });
+  }
+
+  appendSchemaTags(tags, schema);
+
+  return {
+    kind: schema?.kind ?? WATCH_HISTORY_KIND,
+    pubkey,
+    created_at,
+    tags,
+    content: typeof content === "string" ? content : String(content ?? ""),
+  };
+}
+
+export function buildSubscriptionListEvent({
+  pubkey,
+  created_at,
+  content,
+}) {
+  const schema = getNostrEventSchema(NOTE_TYPES.SUBSCRIPTION_LIST);
+  const tags = [];
+  const identifierName = schema?.identifierTag?.name || "d";
+  const identifierValue = schema?.identifierTag?.value || SUBSCRIPTION_LIST_IDENTIFIER;
+  if (identifierName && identifierValue) {
+    tags.push([identifierName, identifierValue]);
+  }
+  appendSchemaTags(tags, schema);
+  return {
+    kind: schema?.kind ?? 30002,
+    pubkey,
+    created_at,
+    tags,
+    content: typeof content === "string" ? content : String(content ?? ""),
+  };
+}
+
+export function buildBlockListEvent({
+  pubkey,
+  created_at,
+  content,
+}) {
+  const schema = getNostrEventSchema(NOTE_TYPES.USER_BLOCK_LIST);
+  const tags = [];
+  const identifierName = schema?.identifierTag?.name || "d";
+  const identifierValue = schema?.identifierTag?.value || BLOCK_LIST_IDENTIFIER;
+  if (identifierName && identifierValue) {
+    tags.push([identifierName, identifierValue]);
+  }
+  appendSchemaTags(tags, schema);
+  return {
+    kind: schema?.kind ?? 30002,
+    pubkey,
+    created_at,
+    tags,
+    content: typeof content === "string" ? content : String(content ?? ""),
+  };
+}
+
+function resolveAdminNoteType(listKey) {
+  switch (listKey) {
+    case "moderation":
+    case "editors":
+      return NOTE_TYPES.ADMIN_MODERATION_LIST;
+    case "whitelist":
+      return NOTE_TYPES.ADMIN_WHITELIST;
+    case "blacklist":
+      return NOTE_TYPES.ADMIN_BLACKLIST;
+    default:
+      return null;
+  }
+}
+
+export function buildAdminListEvent(listKey, { pubkey, created_at, hexPubkeys = [] }) {
+  const schema = getNostrEventSchema(resolveAdminNoteType(listKey));
+  if (!schema) {
+    if (isDevMode) {
+      console.warn(`[nostrEventSchemas] Unknown admin list key: ${listKey}`);
+    }
+    return {
+      kind: 30000,
+      pubkey,
+      created_at,
+      tags: [],
+      content: "",
+    };
+  }
+
+  const tags = [];
+  if (schema?.identifierTag?.name && schema?.identifierTag?.value) {
+    tags.push([schema.identifierTag.name, schema.identifierTag.value]);
+  }
+  const participantTagName = schema?.participantTagName || "p";
+  hexPubkeys.forEach((hex) => {
+    if (typeof hex === "string" && hex.trim()) {
+      tags.push([participantTagName, hex.trim()]);
+    }
+  });
+  appendSchemaTags(tags, schema);
+  return {
+    kind: schema?.kind ?? 30000,
+    pubkey,
+    created_at,
+    tags,
+    content: "",
+  };
+}
+
+if (typeof window !== "undefined") {
+  window.BitVidNostrEvents = {
+    NOTE_TYPES,
+    getSchema: getNostrEventSchema,
+    getAllSchemas: getAllNostrEventSchemas,
+    setOverrides: setNostrEventSchemaOverrides,
+  };
+}

js/nostrPublish.js

@@ -0,0 +1,202 @@
+import { isDevMode } from "./config.js";
+
+export const RELAY_PUBLISH_TIMEOUT_MS = 10_000;
+
+function normalizeReason(error) {
+  if (error instanceof Error) {
+    return error.message || "publish failed";
+  }
+  if (typeof error === "string" && error.trim()) {
+    return error.trim();
+  }
+  if (error === undefined || error === null) {
+    return "publish failed";
+  }
+  try {
+    return JSON.stringify(error);
+  } catch (_) {
+    return String(error);
+  }
+}
+
+export class RelayPublishError extends Error {
+  constructor(message, results = [], options = {}) {
+    const finalMessage =
+      typeof message === "string" && message.trim()
+        ? message.trim()
+        : "Failed to publish event to any relay.";
+    super(finalMessage);
+    this.name = "RelayPublishError";
+
+    const contextValue =
+      typeof options.context === "string" && options.context.trim()
+        ? options.context.trim()
+        : null;
+    if (contextValue) {
+      this.context = contextValue;
+    }
+
+    this.relayResults = Array.isArray(results)
+      ? results.map((result) => ({
+          url: result?.url || "",
+          success: !!result?.success,
+          error: result?.error || null,
+          reason: normalizeReason(result?.error),
+        }))
+      : [];
+
+    this.relayFailures = this.relayResults
+      .filter((entry) => !entry.success)
+      .map((entry) => ({
+        url: entry.url,
+        error: entry.error,
+        reason: entry.reason,
+      }));
+
+    this.acceptedRelays = this.relayResults
+      .filter((entry) => entry.success)
+      .map((entry) => entry.url);
+  }
+}
+
+export function publishEventToRelay(pool, url, event, options = {}) {
+  const timeoutMs =
+    typeof options.timeoutMs === "number" && options.timeoutMs > 0
+      ? options.timeoutMs
+      : RELAY_PUBLISH_TIMEOUT_MS;
+
+  return new Promise((resolve) => {
+    let settled = false;
+    const finalize = (success, error = null) => {
+      if (settled) {
+        return;
+      }
+      settled = true;
+      resolve({ url, success, error });
+    };
+
+    const timeoutId = setTimeout(() => {
+      finalize(false, new Error("publish timeout"));
+    }, timeoutMs);
+
+    try {
+      const pub = pool?.publish?.([url], event);
+
+      if (pub && typeof pub.on === "function") {
+        const registerHandler = (eventName, handler) => {
+          try {
+            pub.on(eventName, handler);
+            return true;
+          } catch (error) {
+            if (isDevMode) {
+              console.warn(
+                `[nostrPublish] Relay publish handle rejected ${eventName} listener:`,
+                error,
+              );
+            }
+            return false;
+          }
+        };
+
+        const handleSuccess = () => {
+          clearTimeout(timeoutId);
+          finalize(true);
+        };
+
+        const handleFailure = (reason) => {
+          clearTimeout(timeoutId);
+          const err =
+            reason instanceof Error
+              ? reason
+              : new Error(String(reason || "publish failed"));
+          finalize(false, err);
+        };
+
+        let handlerRegistered = false;
+        handlerRegistered =
+          registerHandler("ok", handleSuccess) || handlerRegistered;
+        handlerRegistered =
+          registerHandler("failed", handleFailure) || handlerRegistered;
+
+        // [email protected] removed the optional "seen" callback from relay
+        // publish handles. Attempting to register it now produces an
+        // asynchronous TypeError that bubbles up as an unhandled rejection and
+        // prevents watch-history snapshots from ever resolving. We therefore
+        // skip registering a "seen" listener and rely on "ok" (per NIP-20) for
+        // success notifications. Legacy relays that only emit "seen" fall back
+        // to the optimistic success path below because no handlers end up
+        // registered.
+
+        if (handlerRegistered) {
+          return;
+        }
+      }
+
+      if (pub && typeof pub.then === "function") {
+        pub
+          .then(() => {
+            clearTimeout(timeoutId);
+            finalize(true);
+          })
+          .catch((error) => {
+            clearTimeout(timeoutId);
+            finalize(false, error);
+          });
+        return;
+      }
+    } catch (error) {
+      clearTimeout(timeoutId);
+      finalize(false, error);
+      return;
+    }
+
+    clearTimeout(timeoutId);
+    finalize(true);
+  });
+}
+
+export function publishEventToRelays(pool, urls, event, options = {}) {
+  const list = Array.isArray(urls) ? urls : [];
+  return Promise.all(
+    list.map((url) => publishEventToRelay(pool, url, event, options)),
+  );
+}
+
+export function summarizePublishResults(results = []) {
+  const accepted = [];
+  const failed = [];
+
+  for (const result of results) {
+    if (result?.success) {
+      accepted.push(result);
+    } else {
+      failed.push(result);
+    }
+  }
+
+  return { accepted, failed };
+}
+
+export function assertAnyRelayAccepted(results = [], options = {}) {
+  const summary = summarizePublishResults(results);
+  if (summary.accepted.length > 0) {
+    return summary;
+  }
+
+  const contextValue =
+    typeof options.context === "string" && options.context.trim()
+      ? options.context.trim()
+      : "";
+  const messageOverride =
+    typeof options.message === "string" && options.message.trim()
+      ? options.message.trim()
+      : "";
+
+  const message =
+    messageOverride ||
+    (contextValue
+      ? `Failed to publish ${contextValue} to any relay.`
+      : "Failed to publish event to any relay.");
+
+  throw new RelayPublishError(message, results, { context: contextValue });
+}

js/r2-quick.js

@@ -0,0 +1,411 @@
+import { buildR2Key, buildPublicUrl } from "./r2.js";
+import {
+  sanitizeBucketName,
+  ensureBucket,
+  putCors,
+  attachCustomDomainAndWait,
+  setManagedDomain,
+} from "./storage/r2-mgmt.js";
+import { makeR2Client, multipartUpload } from "./storage/r2-s3.js";
+
+const STORAGE_KEY = "bitvid:quickR2Settings";
+const STATUS_CLASSNAMES = [
+  "text-gray-400",
+  "text-green-400",
+  "text-red-400",
+  "text-yellow-400",
+];
+const STATUS_TONES = {
+  info: "text-gray-400",
+  success: "text-green-400",
+  error: "text-red-400",
+  warning: "text-yellow-400",
+};
+
+function sanitizeDomain(value) {
+  if (!value) {
+    return "";
+  }
+  return String(value)
+    .trim()
+    .toLowerCase()
+    .replace(/^https?:\/\//, "")
+    .replace(/\/.*$/, "");
+}
+
+function loadSavedSettings() {
+  try {
+    const raw = localStorage.getItem(STORAGE_KEY);
+    if (!raw) {
+      return null;
+    }
+    const parsed = JSON.parse(raw);
+    if (!parsed || typeof parsed !== "object") {
+      return null;
+    }
+    return parsed;
+  } catch (err) {
+    console.warn("Failed to read quick R2 settings:", err);
+    return null;
+  }
+}
+
+function persistSettings(settings) {
+  try {
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(settings));
+  } catch (err) {
+    console.warn("Failed to store quick R2 settings:", err);
+  }
+}
+
+function clearSavedSettings() {
+  try {
+    localStorage.removeItem(STORAGE_KEY);
+  } catch (err) {
+    console.warn("Failed to clear quick R2 settings:", err);
+  }
+}
+
+function setStatus(el, message, tone = "info") {
+  if (!el) {
+    return;
+  }
+  STATUS_CLASSNAMES.forEach((cls) => el.classList.remove(cls));
+  const className = STATUS_TONES[tone] || STATUS_TONES.info;
+  if (className) {
+    el.classList.add(className);
+  }
+  el.textContent = message || "";
+}
+
+function setUploadingState(elements, uploading) {
+  const disabled = Boolean(uploading);
+  elements.forEach((el) => {
+    if (el) {
+      el.disabled = disabled;
+    }
+  });
+}
+
+function getCorsOrigins() {
+  const origins = new Set();
+  if (typeof window !== "undefined" && window.location) {
+    const origin = window.location.origin;
+    if (origin && origin !== "null") {
+      origins.add(origin);
+    }
+    if (origin && origin.startsWith("http://")) {
+      origins.add(origin.replace("http://", "https://"));
+    }
+  }
+  origins.add("http://localhost:8000");
+  origins.add("http://127.0.0.1:8000");
+  return Array.from(origins);
+}
+
+function buildQuickKey(title, file, npub) {
+  const now = new Date();
+  const datePart = now.toISOString().slice(0, 10);
+  const baseName = (title || file?.name || "video")
+    .toLowerCase()
+    .replace(/[^a-z0-9.-]+/g, "-")
+    .replace(/^-+|-+$/g, "");
+  const safeBase = baseName || "video";
+  const originalName = typeof file?.name === "string" ? file.name : "";
+  const extMatch = originalName.match(/\.([^.]+)$/);
+  const ext = extMatch ? extMatch[1].toLowerCase() : "mp4";
+  const sanitizedNpub = String(npub || "user").replace(/[^a-z0-9]/gi, "");
+  return `videos/${datePart}/${sanitizedNpub || "user"}-${safeBase}.${ext}`;
+}
+
+export function initQuickR2Upload(app) {
+  const section = document.getElementById("quickR2Section");
+  if (!section) {
+    return;
+  }
+
+  const elements = {
+    accountId: document.getElementById("quickR2AccountId"),
+    accessKeyId: document.getElementById("quickR2AccessKeyId"),
+    secretAccessKey: document.getElementById("quickR2SecretAccessKey"),
+    apiToken: document.getElementById("quickR2ApiToken"),
+    customDomain: document.getElementById("quickR2CustomDomain"),
+    zoneId: document.getElementById("quickR2ZoneId"),
+    remember: document.getElementById("quickR2Remember"),
+    allowManaged: document.getElementById("quickR2AllowManaged"),
+    file: document.getElementById("quickR2File"),
+    uploadButton: document.getElementById("quickR2UploadButton"),
+    status: document.getElementById("quickR2Status"),
+    hostedUrl: document.getElementById("uploadUrl"),
+    titleInput: document.getElementById("uploadTitle"),
+    form: document.getElementById("uploadForm"),
+  };
+
+  const saved = loadSavedSettings();
+  if (saved && saved.remember) {
+    if (elements.accountId) elements.accountId.value = saved.accountId || "";
+    if (elements.accessKeyId)
+      elements.accessKeyId.value = saved.accessKeyId || "";
+    if (elements.secretAccessKey)
+      elements.secretAccessKey.value = saved.secretAccessKey || "";
+    if (elements.apiToken) elements.apiToken.value = saved.apiToken || "";
+    if (elements.customDomain)
+      elements.customDomain.value = saved.customDomain || "";
+    if (elements.zoneId) elements.zoneId.value = saved.zoneId || "";
+    if (elements.allowManaged)
+      elements.allowManaged.checked = Boolean(saved.allowManaged ?? true);
+    if (elements.remember) elements.remember.checked = true;
+  }
+
+  function maybePersist() {
+    if (!elements.remember) {
+      return;
+    }
+    if (elements.remember.checked) {
+      persistSettings({
+        remember: true,
+        accountId: elements.accountId?.value?.trim() || "",
+        accessKeyId: elements.accessKeyId?.value?.trim() || "",
+        secretAccessKey: elements.secretAccessKey?.value?.trim() || "",
+        apiToken: elements.apiToken?.value?.trim() || "",
+        customDomain: elements.customDomain?.value?.trim() || "",
+        zoneId: elements.zoneId?.value?.trim() || "",
+        allowManaged: Boolean(elements.allowManaged?.checked ?? true),
+      });
+    } else {
+      clearSavedSettings();
+    }
+  }
+
+  elements.remember?.addEventListener("change", () => {
+    if (!elements.remember.checked) {
+      clearSavedSettings();
+    }
+  });
+
+  async function handleUpload() {
+    const file = elements.file?.files?.[0] || null;
+    if (!file) {
+      setStatus(elements.status, "Choose a file to upload.", "error");
+      return;
+    }
+
+    const accountId = elements.accountId?.value?.trim();
+    const accessKeyId = elements.accessKeyId?.value?.trim();
+    const secretAccessKey = elements.secretAccessKey?.value?.trim();
+    const apiToken = elements.apiToken?.value?.trim();
+    const customDomain = sanitizeDomain(
+      elements.customDomain?.value || ""
+    );
+    const zoneId = elements.zoneId?.value?.trim();
+    const allowManaged = Boolean(elements.allowManaged?.checked ?? true);
+
+    if (!accountId || !accessKeyId || !secretAccessKey) {
+      setStatus(
+        elements.status,
+        "Account ID and S3 keys are required for Cloudflare R2.",
+        "error"
+      );
+      return;
+    }
+
+    const npub =
+      typeof app?.safeEncodeNpub === "function" ? app.safeEncodeNpub(app.pubkey) : null;
+    if (!npub) {
+      setStatus(
+        elements.status,
+        "Unable to derive your npub. Connect a Nostr key first.",
+        "error"
+      );
+      return;
+    }
+
+    maybePersist();
+
+    const bucket = sanitizeBucketName(npub);
+    const inputsToDisable = [
+      elements.accountId,
+      elements.accessKeyId,
+      elements.secretAccessKey,
+      elements.apiToken,
+      elements.customDomain,
+      elements.zoneId,
+      elements.remember,
+      elements.allowManaged,
+      elements.file,
+      elements.uploadButton,
+    ];
+
+    setUploadingState(inputsToDisable, true);
+    setStatus(elements.status, `Preparing bucket ${bucket}…`, "info");
+
+    try {
+      if (apiToken) {
+        try {
+          await ensureBucket({ accountId, bucket, token: apiToken });
+        } catch (err) {
+          throw new Error(
+            err?.message ? `Bucket setup failed: ${err.message}` : "Bucket setup failed."
+          );
+        }
+
+        try {
+          await putCors({
+            accountId,
+            bucket,
+            token: apiToken,
+            origins: getCorsOrigins(),
+          });
+        } catch (corsErr) {
+          console.warn("Quick R2 CORS update failed:", corsErr);
+        }
+      }
+
+      let publicBaseUrl = "";
+      let usedManagedFallback = false;
+
+      if (customDomain) {
+        if (apiToken && zoneId) {
+          try {
+            setStatus(
+              elements.status,
+              `Attaching ${customDomain}…`,
+              "info"
+            );
+            const custom = await attachCustomDomainAndWait({
+              accountId,
+              bucket,
+              token: apiToken,
+              zoneId,
+              domain: customDomain,
+              pollInterval: 1500,
+              timeoutMs: 120000,
+            });
+            if (custom?.active && custom?.url) {
+              publicBaseUrl = custom.url;
+              try {
+                await setManagedDomain({
+                  accountId,
+                  bucket,
+                  token: apiToken,
+                  enabled: false,
+                });
+              } catch (disableErr) {
+                console.warn("Quick R2 managed domain disable failed:", disableErr);
+              }
+            } else {
+              setStatus(
+                elements.status,
+                `Custom domain pending (${custom?.status || "unknown"}).`,
+                "warning"
+              );
+            }
+          } catch (err) {
+            console.warn("Quick R2 custom domain error:", err);
+            setStatus(
+              elements.status,
+              err?.message
+                ? `Custom domain setup failed: ${err.message}`
+                : "Custom domain setup failed.",
+              "warning"
+            );
+          }
+        }
+
+        if (!publicBaseUrl) {
+          publicBaseUrl = `https://${customDomain}`;
+        }
+      }
+
+      if (!publicBaseUrl && apiToken && allowManaged) {
+        try {
+          setStatus(elements.status, "Enabling managed r2.dev domain…", "info");
+          const managed = await setManagedDomain({
+            accountId,
+            bucket,
+            token: apiToken,
+            enabled: true,
+          });
+          if (managed?.url) {
+            publicBaseUrl = managed.url;
+            usedManagedFallback = true;
+          }
+        } catch (err) {
+          console.warn("Quick R2 managed domain enable failed:", err);
+          setStatus(
+            elements.status,
+            err?.message
+              ? `Managed domain failed: ${err.message}`
+              : "Managed domain failed.",
+            "warning"
+          );
+        }
+      }
+
+      if (!publicBaseUrl) {
+        throw new Error(
+          "No public domain configured. Provide a custom domain or allow the managed r2.dev fallback."
+        );
+      }
+
+      const s3 = makeR2Client({ accountId, accessKeyId, secretAccessKey });
+      const title = elements.titleInput?.value?.trim() || "";
+      const key = buildQuickKey(title, file, npub) || buildR2Key(npub, file);
+      const hostedUrl = buildPublicUrl(publicBaseUrl, key);
+
+      let lastPercent = -1;
+      setStatus(elements.status, `Uploading… 0%`, usedManagedFallback ? "warning" : "info");
+
+      await multipartUpload({
+        s3,
+        bucket,
+        key,
+        file,
+        contentType: file.type,
+        onProgress: (fraction) => {
+          if (typeof fraction !== "number" || !isFinite(fraction)) {
+            return;
+          }
+          const percent = Math.max(0, Math.min(100, Math.round(fraction * 100)));
+          if (percent !== lastPercent) {
+            lastPercent = percent;
+            setStatus(
+              elements.status,
+              `Uploading… ${percent}%`,
+              usedManagedFallback ? "warning" : "info"
+            );
+          }
+        },
+      });
+
+      if (elements.hostedUrl) {
+        elements.hostedUrl.value = hostedUrl;
+      }
+
+      setStatus(
+        elements.status,
+        `Upload complete. Hosted URL set to ${hostedUrl}.`,
+        "success"
+      );
+
+      if (elements.form && typeof elements.form.requestSubmit === "function") {
+        elements.form.requestSubmit();
+      }
+    } catch (err) {
+      console.error("Quick R2 upload failed:", err);
+      setStatus(
+        elements.status,
+        err?.message ? `Upload failed: ${err.message}` : "Upload failed.",
+        "error"
+      );
+    } finally {
+      setUploadingState(inputsToDisable, false);
+    }
+  }
+
+  elements.uploadButton?.addEventListener("click", () => {
+    handleUpload();
+  });
+}
+
+export default initQuickR2Upload;

js/r2.js

@@ -0,0 +1,258 @@
+const DB_NAME = "bitvidSettings";
+const DB_VERSION = 1;
+const STORE_NAME = "kv";
+const SETTINGS_KEY = "r2Settings";
+const LOCALSTORAGE_FALLBACK_KEY = "bitvid:r2Settings";
+
+function sanitizeBaseDomain(domain) {
+  if (!domain) {
+    return "";
+  }
+  let value = String(domain).trim().toLowerCase();
+  value = value.replace(/^https?:\/\//, "");
+  value = value.replace(/\/.*$/, "");
+  return value;
+}
+
+function normalizeBucketEntry(entry) {
+  if (!entry || typeof entry !== "object") {
+    return null;
+  }
+  const bucket = String(entry.bucket || "").toLowerCase();
+  if (!bucket) {
+    return null;
+  }
+  const publicBaseUrl = String(entry.publicBaseUrl || "");
+  const domainType = entry.domainType === "custom" ? "custom" : "managed";
+  const lastUpdated = Number.isFinite(entry.lastUpdated)
+    ? entry.lastUpdated
+    : Date.now();
+  return { bucket, publicBaseUrl, domainType, lastUpdated };
+}
+
+function normalizeSettings(raw) {
+  const base = raw && typeof raw === "object" ? raw : {};
+  const buckets = {};
+  if (base.buckets && typeof base.buckets === "object") {
+    for (const [npub, value] of Object.entries(base.buckets)) {
+      const normalizedEntry = normalizeBucketEntry(value);
+      if (normalizedEntry) {
+        buckets[String(npub)] = normalizedEntry;
+      }
+    }
+  }
+
+  return {
+    accountId: String(base.accountId || ""),
+    accessKeyId: String(base.accessKeyId || ""),
+    secretAccessKey: String(base.secretAccessKey || ""),
+    apiToken: String(base.apiToken || ""),
+    zoneId: String(base.zoneId || ""),
+    baseDomain: sanitizeBaseDomain(base.baseDomain || ""),
+    buckets,
+  };
+}
+
+function isIndexedDbAvailable() {
+  try {
+    return typeof indexedDB !== "undefined";
+  } catch (err) {
+    return false;
+  }
+}
+
+function openSettingsDb() {
+  return new Promise((resolve, reject) => {
+    if (!isIndexedDbAvailable()) {
+      resolve(null);
+      return;
+    }
+
+    const request = indexedDB.open(DB_NAME, DB_VERSION);
+
+    request.onupgradeneeded = () => {
+      const db = request.result;
+      if (!db.objectStoreNames.contains(STORE_NAME)) {
+        db.createObjectStore(STORE_NAME);
+      }
+    };
+
+    request.onsuccess = () => {
+      resolve(request.result);
+    };
+
+    request.onerror = () => {
+      reject(request.error || new Error("Failed to open settings DB"));
+    };
+  });
+}
+
+export async function loadR2Settings() {
+  try {
+    const db = await openSettingsDb();
+    if (db) {
+      return await new Promise((resolve, reject) => {
+        const tx = db.transaction(STORE_NAME, "readonly");
+        const store = tx.objectStore(STORE_NAME);
+        const req = store.get(SETTINGS_KEY);
+        req.onsuccess = () => {
+          resolve(normalizeSettings(req.result));
+        };
+        req.onerror = () => {
+          reject(req.error || new Error("Failed to load settings"));
+        };
+      });
+    }
+  } catch (err) {
+    console.warn("Failed to open IndexedDB for settings, falling back:", err);
+  }
+
+  try {
+    if (typeof localStorage !== "undefined") {
+      const raw = localStorage.getItem(LOCALSTORAGE_FALLBACK_KEY);
+      if (raw) {
+        return normalizeSettings(JSON.parse(raw));
+      }
+    }
+  } catch (err) {
+    console.warn("Failed to read fallback settings:", err);
+  }
+
+  return normalizeSettings(null);
+}
+
+export async function saveR2Settings(settings) {
+  const normalized = normalizeSettings(settings);
+
+  let db = null;
+  try {
+    db = await openSettingsDb();
+  } catch (err) {
+    console.warn("Unable to open IndexedDB, continuing with fallback:", err);
+  }
+
+  if (db) {
+    await new Promise((resolve, reject) => {
+      const tx = db.transaction(STORE_NAME, "readwrite");
+      const store = tx.objectStore(STORE_NAME);
+      const req = store.put(normalized, SETTINGS_KEY);
+      req.onsuccess = () => resolve();
+      req.onerror = () =>
+        reject(req.error || new Error("Failed to save R2 settings"));
+    });
+  } else if (typeof localStorage !== "undefined") {
+    localStorage.setItem(
+      LOCALSTORAGE_FALLBACK_KEY,
+      JSON.stringify(normalized)
+    );
+  }
+
+  return normalized;
+}
+
+export async function clearR2Settings() {
+  let cleared = false;
+  try {
+    const db = await openSettingsDb();
+    if (db) {
+      await new Promise((resolve, reject) => {
+        const tx = db.transaction(STORE_NAME, "readwrite");
+        const store = tx.objectStore(STORE_NAME);
+        const req = store.delete(SETTINGS_KEY);
+        req.onsuccess = () => resolve();
+        req.onerror = () => reject(req.error || new Error("Failed to clear"));
+      });
+      cleared = true;
+    }
+  } catch (err) {
+    console.warn("Failed to clear IndexedDB settings:", err);
+  }
+
+  try {
+    if (typeof localStorage !== "undefined") {
+      localStorage.removeItem(LOCALSTORAGE_FALLBACK_KEY);
+      cleared = true;
+    }
+  } catch (err) {
+    console.warn("Failed to clear fallback settings:", err);
+  }
+
+  return cleared;
+}
+
+export function mergeBucketEntry(settings, npub, entry) {
+  if (!settings || typeof settings !== "object") {
+    return settings;
+  }
+  const normalizedEntry = normalizeBucketEntry(entry);
+  if (!normalizedEntry) {
+    return settings;
+  }
+  return {
+    ...settings,
+    buckets: {
+      ...(settings.buckets || {}),
+      [npub]: normalizedEntry,
+    },
+  };
+}
+
+function guessExtension(file) {
+  if (!file) {
+    return "mp4";
+  }
+
+  const name = typeof file.name === "string" ? file.name : "";
+  const dotIndex = name.lastIndexOf(".");
+  if (dotIndex > -1 && dotIndex < name.length - 1) {
+    return name.slice(dotIndex + 1).toLowerCase();
+  }
+
+  const type = typeof file.type === "string" ? file.type : "";
+  switch (type) {
+    case "video/webm":
+      return "webm";
+    case "application/vnd.apple.mpegurl":
+      return "m3u8";
+    case "video/mp2t":
+      return "ts";
+    case "video/quicktime":
+      return "mov";
+    case "video/x-matroska":
+      return "mkv";
+    default:
+      return "mp4";
+  }
+}
+
+export function buildR2Key(npub, file) {
+  const now = new Date();
+  const year = now.getUTCFullYear();
+  const month = String(now.getUTCMonth() + 1).padStart(2, "0");
+  const safeNpub = String(npub || "")
+    .toLowerCase()
+    .replace(/[^a-z0-9]/g, "");
+  const baseName = typeof file?.name === "string" ? file.name : "video";
+  const withoutExt = baseName.replace(/\.[^/.]+$/, "");
+  const slug = withoutExt
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, "-")
+    .replace(/^-+|-+$/g, "");
+  const safeSlug = slug || "video";
+  const ext = guessExtension(file);
+  return `u/${safeNpub}/${year}/${month}/${safeSlug}.${ext}`;
+}
+
+export function buildPublicUrl(baseUrl, key) {
+  if (!baseUrl) {
+    return "";
+  }
+  const sanitizedBase = String(baseUrl).replace(/\/$/, "");
+  const encodedKey = key
+    .split("/")
+    .map((segment) => encodeURIComponent(segment))
+    .join("/");
+  return `${sanitizedBase}/${encodedKey}`;
+}
+
+export { sanitizeBaseDomain };

js/relayManager.js

@@ -0,0 +1,565 @@
+import { isDevMode } from "./config.js";
+import { DEFAULT_RELAY_URLS, nostrClient } from "./nostr.js";
+import { buildRelayListEvent } from "./nostrEventSchemas.js";
+import {
+  publishEventToRelays,
+  assertAnyRelayAccepted,
+} from "./nostrPublish.js";
+
+const MODE_SEQUENCE = ["both", "read", "write"];
+
+function normalizeHexPubkey(pubkey) {
+  if (typeof pubkey !== "string") {
+    return null;
+  }
+  const trimmed = pubkey.trim();
+  if (!trimmed) {
+    return null;
+  }
+  if (!/^[0-9a-f]{64}$/i.test(trimmed)) {
+    return null;
+  }
+  return trimmed.toLowerCase();
+}
+
+function normalizeRelayUrl(input) {
+  if (typeof input !== "string") {
+    return null;
+  }
+
+  let candidate = input.trim();
+  if (!candidate) {
+    return null;
+  }
+
+  if (!/^[a-z]+:\/\//i.test(candidate)) {
+    candidate = `wss://${candidate}`;
+  }
+
+  let parsed;
+  try {
+    parsed = new URL(candidate);
+  } catch (error) {
+    return null;
+  }
+
+  if (parsed.protocol !== "wss:" && parsed.protocol !== "ws:") {
+    return null;
+  }
+
+  const hostname = parsed.hostname.toLowerCase();
+  const port = parsed.port ? `:${parsed.port}` : "";
+  let pathname = parsed.pathname || "";
+  if (pathname !== "/") {
+    pathname = pathname.replace(/\/+$/, "");
+  }
+  if (pathname === "/") {
+    pathname = "";
+  }
+  const search = parsed.search || "";
+  const hash = parsed.hash || "";
+
+  return `${parsed.protocol}//${hostname}${port}${pathname}${search}${hash}`;
+}
+
+function deriveMode(marker) {
+  if (typeof marker !== "string") {
+    return "both";
+  }
+  const normalized = marker.trim().toLowerCase();
+  if (normalized === "read") {
+    return "read";
+  }
+  if (normalized === "write") {
+    return "write";
+  }
+  return "both";
+}
+
+function createEntry(url, mode = "both") {
+  const normalizedMode = deriveMode(mode);
+  return {
+    url,
+    mode: normalizedMode,
+    read: normalizedMode !== "write",
+    write: normalizedMode !== "read",
+  };
+}
+
+function cloneEntry(entry) {
+  return {
+    url: entry.url,
+    mode: entry.mode,
+    read: !!entry.read,
+    write: !!entry.write,
+  };
+}
+
+function serializeEntries(entries) {
+  return JSON.stringify(
+    entries.map((entry) => ({ url: entry.url, mode: entry.mode }))
+  );
+}
+
+function parseRelayTags(tags) {
+  if (!Array.isArray(tags)) {
+    return [];
+  }
+
+  const seen = new Map();
+  const order = [];
+
+  tags.forEach((tag) => {
+    if (!Array.isArray(tag) || tag.length < 2) {
+      return;
+    }
+    if (tag[0] !== "r") {
+      return;
+    }
+    const normalizedUrl = normalizeRelayUrl(tag[1]);
+    if (!normalizedUrl) {
+      return;
+    }
+    if (!seen.has(normalizedUrl)) {
+      seen.set(normalizedUrl, { read: false, write: false });
+      order.push(normalizedUrl);
+    }
+    const record = seen.get(normalizedUrl);
+    const mode = deriveMode(tag[2]);
+    if (mode === "read") {
+      record.read = true;
+    } else if (mode === "write") {
+      record.write = true;
+    } else {
+      record.read = true;
+      record.write = true;
+    }
+  });
+
+  return order.map((url) => {
+    const record = seen.get(url) || { read: true, write: true };
+    if (record.read && record.write) {
+      return createEntry(url, "both");
+    }
+    if (record.read) {
+      return createEntry(url, "read");
+    }
+    if (record.write) {
+      return createEntry(url, "write");
+    }
+    return createEntry(url, "both");
+  });
+}
+
+function resolveEntryInput(entry) {
+  if (typeof entry === "string") {
+    return { url: entry, mode: "both" };
+  }
+  if (!entry || typeof entry !== "object") {
+    return null;
+  }
+  const url = typeof entry.url === "string" ? entry.url : "";
+  let mode = entry.mode || entry.marker;
+  if (!mode) {
+    if (entry.read === true && entry.write === false) {
+      mode = "read";
+    } else if (entry.write === true && entry.read === false) {
+      mode = "write";
+    }
+  }
+  return { url, mode: deriveMode(mode) };
+}
+
+class RelayPreferencesManager {
+  constructor() {
+    this.entries = [];
+    this.entryIndex = new Map();
+    this.lastEvent = null;
+    this.loadedPubkey = null;
+    this.lastLoadSource = "default";
+    this.defaultEntries = DEFAULT_RELAY_URLS.map((url) => {
+      const normalized = normalizeRelayUrl(url) || url;
+      return createEntry(normalized, "both");
+    });
+    this.setEntries(this.defaultEntries, { allowEmpty: false, updateClient: true });
+  }
+
+  snapshot() {
+    return this.getEntries();
+  }
+
+  getEntries() {
+    return this.entries.map((entry) => cloneEntry(entry));
+  }
+
+  getAllRelayUrls() {
+    return this.entries.map((entry) => entry.url);
+  }
+
+  getReadRelayUrls() {
+    return this.entries.filter((entry) => entry.read).map((entry) => entry.url);
+  }
+
+  getWriteRelayUrls() {
+    return this.entries.filter((entry) => entry.write).map((entry) => entry.url);
+  }
+
+  syncClient() {
+    if (nostrClient && typeof nostrClient.applyRelayPreferences === "function") {
+      nostrClient.applyRelayPreferences({
+        all: this.getAllRelayUrls(),
+        read: this.getReadRelayUrls(),
+        write: this.getWriteRelayUrls(),
+      });
+    } else if (nostrClient) {
+      nostrClient.relays = this.getAllRelayUrls();
+    }
+  }
+
+  setEntries(entries, { allowEmpty = false, updateClient = true } = {}) {
+    const nextEntries = [];
+    const indexMap = new Map();
+
+    if (Array.isArray(entries)) {
+      entries.forEach((item) => {
+        const resolved = resolveEntryInput(item);
+        if (!resolved) {
+          return;
+        }
+        const normalizedUrl = normalizeRelayUrl(resolved.url);
+        if (!normalizedUrl || indexMap.has(normalizedUrl)) {
+          return;
+        }
+        const normalizedEntry = createEntry(normalizedUrl, resolved.mode);
+        indexMap.set(normalizedUrl, nextEntries.length);
+        nextEntries.push(normalizedEntry);
+      });
+    }
+
+    if (!nextEntries.length && !allowEmpty) {
+      this.entries = this.defaultEntries.map((entry) => cloneEntry(entry));
+      this.entryIndex = new Map(
+        this.entries.map((entry, idx) => [entry.url, idx])
+      );
+      if (updateClient) {
+        this.syncClient();
+      }
+      return this.getEntries();
+    }
+
+    this.entries = nextEntries.map((entry) => cloneEntry(entry));
+    this.entryIndex = new Map(
+      this.entries.map((entry, idx) => [entry.url, idx])
+    );
+
+    if (!this.entries.length && !allowEmpty) {
+      this.entries = this.defaultEntries.map((entry) => cloneEntry(entry));
+      this.entryIndex = new Map(
+        this.entries.map((entry, idx) => [entry.url, idx])
+      );
+    }
+
+    if (updateClient) {
+      this.syncClient();
+    }
+
+    return this.getEntries();
+  }
+
+  addRelay(url, mode = "both") {
+    const normalizedUrl = normalizeRelayUrl(url);
+    if (!normalizedUrl) {
+      const error = new Error("Enter a valid WSS relay URL.");
+      error.code = "invalid";
+      throw error;
+    }
+    if (this.entryIndex.has(normalizedUrl)) {
+      return {
+        changed: false,
+        reason: "duplicate",
+        entry: cloneEntry(this.entries[this.entryIndex.get(normalizedUrl)]),
+      };
+    }
+
+    const nextEntries = this.getEntries();
+    nextEntries.push({ url: normalizedUrl, mode });
+    this.setEntries(nextEntries, { allowEmpty: false });
+
+    return {
+      changed: true,
+      entry: cloneEntry(this.entries[this.entryIndex.get(normalizedUrl)]),
+    };
+  }
+
+  updateRelayMode(url, mode = "both") {
+    const normalizedUrl = normalizeRelayUrl(url);
+    if (!normalizedUrl) {
+      const error = new Error("Enter a valid relay URL.");
+      error.code = "invalid";
+      throw error;
+    }
+    if (!this.entryIndex.has(normalizedUrl)) {
+      return { changed: false, reason: "missing" };
+    }
+
+    const normalizedMode = deriveMode(mode);
+    const index = this.entryIndex.get(normalizedUrl);
+    const current = this.entries[index];
+    if (current.mode === normalizedMode) {
+      return { changed: false, entry: cloneEntry(current) };
+    }
+
+    const nextEntries = this.getEntries();
+    nextEntries[index].mode = normalizedMode;
+    this.setEntries(nextEntries, { allowEmpty: false });
+
+    return {
+      changed: true,
+      entry: cloneEntry(this.entries[this.entryIndex.get(normalizedUrl)]),
+    };
+  }
+
+  cycleRelayMode(url) {
+    const normalizedUrl = normalizeRelayUrl(url);
+    if (!normalizedUrl) {
+      const error = new Error("Enter a valid relay URL.");
+      error.code = "invalid";
+      throw error;
+    }
+    if (!this.entryIndex.has(normalizedUrl)) {
+      const error = new Error("Relay not found.");
+      error.code = "missing";
+      throw error;
+    }
+    const index = this.entryIndex.get(normalizedUrl);
+    const currentMode = this.entries[index].mode || "both";
+    const currentIdx = MODE_SEQUENCE.indexOf(currentMode);
+    const nextMode = MODE_SEQUENCE[(currentIdx + 1) % MODE_SEQUENCE.length];
+    return this.updateRelayMode(normalizedUrl, nextMode);
+  }
+
+  removeRelay(url) {
+    const normalizedUrl = normalizeRelayUrl(url);
+    if (!normalizedUrl) {
+      const error = new Error("Enter a valid relay URL to remove.");
+      error.code = "invalid";
+      throw error;
+    }
+    if (!this.entryIndex.has(normalizedUrl)) {
+      return { changed: false, reason: "missing" };
+    }
+    if (this.entries.length <= 1) {
+      const error = new Error("At least one relay is required.");
+      error.code = "minimum";
+      throw error;
+    }
+
+    const nextEntries = this.getEntries().filter((entry) => entry.url !== normalizedUrl);
+    this.setEntries(nextEntries, { allowEmpty: false });
+    return { changed: true };
+  }
+
+  restoreDefaults() {
+    const before = serializeEntries(this.entries);
+    this.setEntries(this.defaultEntries, { allowEmpty: false });
+    const after = serializeEntries(this.entries);
+    return { changed: before !== after };
+  }
+
+  reset() {
+    this.lastEvent = null;
+    this.loadedPubkey = null;
+    this.lastLoadSource = "default";
+    this.setEntries(this.defaultEntries, { allowEmpty: false });
+  }
+
+  getPublishTargets(customTargets = null) {
+    const targets = new Set();
+    const list =
+      Array.isArray(customTargets) && customTargets.length
+        ? customTargets
+        : this.getAllRelayUrls();
+
+    list.forEach((candidate) => {
+      const normalized = normalizeRelayUrl(candidate);
+      if (normalized) {
+        targets.add(normalized);
+      }
+    });
+
+    DEFAULT_RELAY_URLS.forEach((url) => {
+      const normalized = normalizeRelayUrl(url) || url;
+      targets.add(normalized);
+    });
+
+    return Array.from(targets);
+  }
+
+  async loadRelayList(pubkey) {
+    const normalizedPubkey = normalizeHexPubkey(pubkey);
+    this.loadedPubkey = normalizedPubkey;
+
+    if (!normalizedPubkey) {
+      this.lastLoadSource = "default";
+      this.setEntries(this.defaultEntries, { allowEmpty: false });
+      return { ok: false, reason: "invalid-pubkey" };
+    }
+
+    if (!nostrClient?.pool) {
+      this.lastLoadSource = "default";
+      this.setEntries(this.defaultEntries, { allowEmpty: false });
+      return { ok: false, reason: "nostr-uninitialized" };
+    }
+
+    const filter = { kinds: [10002], authors: [normalizedPubkey], limit: 1 };
+    const targetRelays = this.getPublishTargets();
+    const events = [];
+
+    await Promise.all(
+      targetRelays.map(async (relayUrl) => {
+        try {
+          const result = await nostrClient.pool.list([relayUrl], [filter]);
+          if (Array.isArray(result) && result.length) {
+            events.push(...result);
+          }
+        } catch (error) {
+          if (isDevMode) {
+            console.warn(`[relayManager] Failed to fetch relay list from ${relayUrl}:`, error);
+          }
+        }
+      })
+    );
+
+    if (!events.length) {
+      this.lastEvent = null;
+      this.lastLoadSource = "default";
+      this.setEntries(this.defaultEntries, { allowEmpty: false });
+      return { ok: true, source: "default", events: [] };
+    }
+
+    events.sort((a, b) => (b?.created_at || 0) - (a?.created_at || 0));
+    const newest = events[0];
+    this.lastEvent = newest;
+
+    const parsed = parseRelayTags(newest?.tags);
+    if (parsed.length) {
+      this.setEntries(parsed, { allowEmpty: false });
+      this.lastLoadSource = "event";
+      return { ok: true, source: "event", event: newest };
+    }
+
+    this.lastLoadSource = "default";
+    this.setEntries(this.defaultEntries, { allowEmpty: false });
+    return { ok: true, source: "default", event: newest };
+  }
+
+  async publishRelayList(pubkey, options = {}) {
+    const normalizedPubkey = normalizeHexPubkey(pubkey);
+    if (!normalizedPubkey) {
+      const error = new Error(
+        "A valid pubkey is required to publish relay preferences."
+      );
+      error.code = "invalid-pubkey";
+      throw error;
+    }
+
+    if (!window?.nostr?.signEvent) {
+      const error = new Error(
+        "A NIP-07 extension is required to publish relay preferences."
+      );
+      error.code = "nostr-extension-missing";
+      throw error;
+    }
+
+    if (!nostrClient?.pool) {
+      const error = new Error(
+        "Nostr is not connected yet. Please try again once relays are ready."
+      );
+      error.code = "nostr-uninitialized";
+      throw error;
+    }
+
+    const entries = this.getEntries();
+    if (!entries.length) {
+      const error = new Error("Add at least one relay before publishing.");
+      error.code = "empty";
+      throw error;
+    }
+
+    const event = buildRelayListEvent({
+      pubkey: normalizedPubkey,
+      created_at: Math.floor(Date.now() / 1000),
+      relays: entries,
+    });
+
+    const signedEvent = await window.nostr.signEvent(event);
+    const targets = this.getPublishTargets(options?.relayUrls);
+
+    if (!targets.length) {
+      const error = new Error("No relay targets are available for publishing.");
+      error.code = "no-targets";
+      throw error;
+    }
+
+    const publishResults = await publishEventToRelays(
+      nostrClient.pool,
+      targets,
+      signedEvent
+    );
+
+    let publishSummary;
+    try {
+      publishSummary = assertAnyRelayAccepted(publishResults, {
+        context: "relay preferences update",
+        message: "No relays accepted the update.",
+      });
+    } catch (publishError) {
+      if (publishError?.relayFailures?.length) {
+        publishError.relayFailures.forEach(
+          ({ url, error: relayError, reason }) => {
+            console.error(
+              `[RelayPreferencesManager] Relay ${url} rejected relay list: ${reason}`,
+              relayError || reason
+            );
+          }
+        );
+      }
+      throw publishError;
+    }
+
+    if (publishSummary.failed.length) {
+      publishSummary.failed.forEach(({ url, error: relayError }) => {
+        const reason =
+          relayError instanceof Error
+            ? relayError.message
+            : relayError
+            ? String(relayError)
+            : "publish failed";
+        console.warn(
+          `[RelayPreferencesManager] Relay ${url} did not acknowledge relay list: ${reason}`,
+          relayError
+        );
+      });
+    }
+
+    const accepted = publishSummary.accepted.map(({ url }) => url);
+    const failed = publishSummary.failed.map(({ url, error: relayError }) => ({
+      url,
+      reason: relayError || null,
+    }));
+
+    this.lastEvent = signedEvent;
+
+    return { ok: true, event: signedEvent, accepted, failed, targets };
+  }
+
+  getLastLoadSource() {
+    return this.lastLoadSource;
+  }
+}
+
+export const relayManager = new RelayPreferencesManager();
+
+export function normalizeRelayUrlForDisplay(value) {
+  return normalizeRelayUrl(value);
+}

js/sidebarLoading.js

@@ -0,0 +1,33 @@
+// js/sidebarLoading.js
+
+function escapeHtml(value) {
+  if (typeof value !== "string") {
+    return "";
+  }
+
+  return value
+    .replace(/&/g, "&")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;")
+    .replace(/'/g, "&#39;");
+}
+
+export function getSidebarLoadingMarkup(message = "", options = {}) {
+  const trimmed = typeof message === "string" ? message.trim() : "";
+  const copy = trimmed || "Fetching data…";
+  const safeCopy = escapeHtml(copy);
+  const showSpinner = options?.showSpinner !== false;
+  const spinnerMarkup = showSpinner
+    ? '<span class="status-spinner status-spinner--inline" aria-hidden="true"></span>'
+    : "";
+
+  return `
+    <div class="sidebar-loading-wrapper" role="status" aria-live="polite">
+      <div class="sidebar-loading-indicator">
+        ${spinnerMarkup}
+        <span class="sidebar-loading-text">${safeCopy}</span>
+      </div>
+    </div>
+  `;
+}

js/storage/r2-mgmt.js

@@ -0,0 +1,293 @@
+// js/storage/r2-mgmt.js
+function computeSlugHash(input) {
+  const text = String(input || "");
+  let hash = 0;
+  for (let i = 0; i < text.length; i += 1) {
+    hash = Math.imul(31, hash) + text.charCodeAt(i);
+  }
+  return (hash >>> 0).toString(36);
+}
+
+export function sanitizeBucketName(npub) {
+  const raw = String(npub || "");
+  let value = raw
+    .toLowerCase()
+    .replace(/[^a-z0-9-]/g, "-")
+    .replace(/-+/g, "-")
+    .replace(/^-+|[-]+$/g, "");
+
+  if (!value) {
+    value = "bitvid-user";
+  }
+
+  if (value.length > 32) {
+    const prefix = value.slice(0, 20).replace(/-+$/g, "");
+    const hash = computeSlugHash(raw).slice(0, 8);
+    value = [prefix, hash].filter(Boolean).join("-");
+  }
+
+  value = value.replace(/-+/g, "-").replace(/^-+|[-]+$/g, "");
+
+  if (!/^[a-z0-9]/.test(value)) {
+    value = `bv-${value}`;
+  }
+
+  if (!/[a-z0-9]$/.test(value)) {
+    value = `${value}0`;
+  }
+
+  if (value.length > 63) {
+    value = value.slice(0, 63).replace(/-+$/g, "");
+  }
+
+  while (value.length < 3) {
+    value += "0";
+  }
+
+  return value;
+}
+
+export function deriveShortSubdomain(npub) {
+  const bucketSlug = sanitizeBucketName(npub);
+  const hash = computeSlugHash(npub).slice(0, 6);
+
+  const prefix = bucketSlug
+    .replace(/^bv-/, "")
+    .slice(0, 18)
+    .replace(/-+$/g, "");
+
+  let candidate = [prefix, hash].filter(Boolean).join("-");
+  candidate = candidate
+    .toLowerCase()
+    .replace(/[^a-z0-9-]/g, "-")
+    .replace(/-+/g, "-")
+    .replace(/^-+|[-]+$/g, "");
+
+  if (!candidate) {
+    candidate = "user";
+  }
+
+  if (candidate.length > 32) {
+    candidate = candidate.slice(0, 32).replace(/-+$/g, "");
+  }
+
+  if (!/^[a-z0-9]/.test(candidate)) {
+    candidate = `u${candidate}`;
+  }
+
+  if (!/[a-z0-9]$/.test(candidate)) {
+    candidate = `${candidate}0`;
+  }
+
+  while (candidate.length < 3) {
+    candidate += "0";
+  }
+
+  return candidate;
+}
+
+function buildError(error, fallbackMessage) {
+  if (error instanceof Error) {
+    return error;
+  }
+  const err = new Error(fallbackMessage || "Cloudflare request failed");
+  err.original = error;
+  return err;
+}
+
+// --- Cloudflare API helpers (Bearer token) ---
+async function cfFetch(path, { token, method = "GET", body, headers = {} }) {
+  if (!token) {
+    throw new Error("Cloudflare API token is required");
+  }
+  const res = await fetch(`https://api.cloudflare.com/client/v4${path}`, {
+    method,
+    headers: {
+      Authorization: `Bearer ${token}`,
+      "Content-Type": "application/json",
+      ...headers,
+    },
+    body: body ? JSON.stringify(body) : undefined,
+  });
+
+  const text = await res.text();
+  let data = {};
+  if (text) {
+    try {
+      data = JSON.parse(text);
+    } catch (parseErr) {
+      if (!res.ok) {
+        const err = new Error(text || `Cloudflare API error ${res.status}`);
+        err.status = res.status;
+        throw err;
+      }
+      throw parseErr;
+    }
+  }
+
+  if (!res.ok || data?.success === false) {
+    const errorMessage =
+      data?.errors?.[0]?.message ||
+      data?.message ||
+      text ||
+      `Cloudflare API error ${res.status}`;
+    const err = new Error(errorMessage);
+    err.status = res.status;
+    err.response = data;
+    throw err;
+  }
+
+  return data;
+}
+
+// 1) Create bucket (idempotent-ish: treat 409 as success)
+export async function ensureBucket({ accountId, bucket, token }) {
+  try {
+    await cfFetch(`/accounts/${accountId}/r2/buckets`, {
+      token,
+      method: "POST",
+      body: { name: bucket },
+    });
+  } catch (error) {
+    const err = buildError(error);
+    if (err.status === 409 || /already exists/i.test(err.message || "")) {
+      return;
+    }
+    throw err;
+  }
+}
+
+// 2) Set CORS so browser PUT/GETs work from your app origins
+export async function putCors({ accountId, bucket, token, origins }) {
+  const filteredOrigins = (origins || []).filter(Boolean);
+  if (filteredOrigins.length === 0) {
+    return;
+  }
+  const rules = [
+    {
+      id: "bitvid-default",
+      allowed: {
+        origins: filteredOrigins,
+        methods: ["GET", "HEAD", "PUT", "POST", "DELETE", "OPTIONS"],
+        headers: ["*"],
+      },
+      expose_headers: ["ETag", "Content-Length", "Content-Range", "Accept-Ranges"],
+      max_age_seconds: 3600,
+    },
+  ];
+  await cfFetch(`/accounts/${accountId}/r2/buckets/${bucket}/cors`, {
+    token,
+    method: "PUT",
+    body: { rules },
+  });
+}
+
+function extractStatus(payload) {
+  return (
+    payload?.result?.status ||
+    payload?.result?.result?.status ||
+    payload?.status ||
+    payload?.result?.statusText ||
+    null
+  );
+}
+
+async function pollCustomDomain({
+  accountId,
+  bucket,
+  token,
+  domain,
+  pollInterval = 2500,
+  timeoutMs = 120000,
+}) {
+  const path = `/accounts/${accountId}/r2/buckets/${bucket}/domains/custom/${encodeURIComponent(
+    domain
+  )}`;
+  const deadline = Date.now() + timeoutMs;
+  let lastPayload = null;
+
+  while (Date.now() < deadline) {
+    lastPayload = await cfFetch(path, { token, method: "GET" }).catch((err) => {
+      if (err?.status === 404) {
+        return null;
+      }
+      throw err;
+    });
+
+    if (!lastPayload) {
+      break;
+    }
+
+    const status = extractStatus(lastPayload);
+    if (status === "active") {
+      return { status, payload: lastPayload };
+    }
+
+    await new Promise((resolve) => setTimeout(resolve, pollInterval));
+  }
+
+  return {
+    status: extractStatus(lastPayload) || "unknown",
+    payload: lastPayload,
+  };
+}
+
+// 3) Attach custom domain to bucket (auto-provisions on Cloudflare)
+export async function attachCustomDomainAndWait({
+  accountId,
+  bucket,
+  token,
+  zoneId,
+  domain,
+  pollInterval,
+  timeoutMs,
+}) {
+  let shouldPoll = true;
+  try {
+    await cfFetch(`/accounts/${accountId}/r2/buckets/${bucket}/domains/custom`, {
+      token,
+      method: "POST",
+      body: { domain, zoneId, enabled: true },
+    });
+  } catch (error) {
+    const err = buildError(error);
+    if (err.status === 409 || /already exists/i.test(err.message || "")) {
+      shouldPoll = true;
+    } else {
+      throw err;
+    }
+  }
+
+  let status = "unknown";
+  if (shouldPoll) {
+    const pollResult = await pollCustomDomain({
+      accountId,
+      bucket,
+      token,
+      domain,
+      pollInterval,
+      timeoutMs,
+    });
+    status = pollResult.status;
+  }
+
+  const url = `https://${domain}`;
+  return {
+    url,
+    status,
+    active: status === "active",
+  };
+}
+
+// 4) Toggle managed r2.dev domain for the bucket
+export async function setManagedDomain({ accountId, bucket, token, enabled }) {
+  const { result } = await cfFetch(
+    `/accounts/${accountId}/r2/buckets/${bucket}/domains/managed`,
+    { token, method: "PUT", body: { enabled: Boolean(enabled) } }
+  );
+  const domain = result?.domain || result?.result?.domain || "";
+  return {
+    enabled: Boolean(result?.enabled ?? enabled),
+    url: domain ? `https://${domain}` : "",
+  };
+}

js/storage/r2-s3.js

@@ -0,0 +1,215 @@
+// js/storage/r2-s3.js
+import {
+  S3Client,
+  CreateBucketCommand,
+  CreateMultipartUploadCommand,
+  UploadPartCommand,
+  CompleteMultipartUploadCommand,
+  AbortMultipartUploadCommand,
+  HeadBucketCommand,
+  PutBucketCorsCommand,
+} from "https://esm.sh/@aws-sdk/[email protected]?target=es2022&bundle";
+
+function computeCacheControl(key) {
+  if (!key) {
+    return "public, max-age=3600";
+  }
+
+  const lower = String(key).toLowerCase();
+  if (/(?:\.)(m3u8|mpd)$/.test(lower)) {
+    return "public, max-age=60, must-revalidate";
+  }
+
+  if (
+    /\.(m4s|ts|mp4|webm|mov|mkv|png|jpg|jpeg|gif|svg|vtt|srt|mpg|mpeg)$/.test(
+      lower
+    )
+  ) {
+    return "public, max-age=31536000, immutable";
+  }
+
+  return "public, max-age=3600";
+}
+
+export function makeR2Client({ accountId, accessKeyId, secretAccessKey }) {
+  if (!accountId || !accessKeyId || !secretAccessKey) {
+    throw new Error("Missing Cloudflare R2 credentials");
+  }
+
+  return new S3Client({
+    region: "auto",
+    endpoint: `https://${accountId}.r2.cloudflarestorage.com`,
+    credentials: { accessKeyId, secretAccessKey },
+    forcePathStyle: true,
+  });
+}
+
+async function ensureBucketExists({ s3, bucket }) {
+  try {
+    await s3.send(new HeadBucketCommand({ Bucket: bucket }));
+    return;
+  } catch (error) {
+    const status = error?.$metadata?.httpStatusCode || 0;
+    const code = error?.name || error?.Code || "";
+    if (status !== 404 && code !== "NotFound" && code !== "NoSuchBucket") {
+      throw error;
+    }
+  }
+
+  try {
+    await s3.send(new CreateBucketCommand({ Bucket: bucket }));
+  } catch (error) {
+    const status = error?.$metadata?.httpStatusCode || 0;
+    const code = error?.name || error?.Code || "";
+    if (
+      status === 409 ||
+      code === "BucketAlreadyOwnedByYou" ||
+      code === "BucketAlreadyExists"
+    ) {
+      return;
+    }
+    throw error;
+  }
+}
+
+export async function ensureBucketCors({ s3, bucket, origins }) {
+  if (!s3) {
+    throw new Error("S3 client is required to configure CORS");
+  }
+  if (!bucket) {
+    throw new Error("Bucket name is required to configure CORS");
+  }
+
+  const allowedOrigins = (origins || []).filter(Boolean);
+  if (allowedOrigins.length === 0) {
+    return;
+  }
+
+  await ensureBucketExists({ s3, bucket });
+
+  const command = new PutBucketCorsCommand({
+    Bucket: bucket,
+    CORSConfiguration: {
+      CORSRules: [
+        {
+          AllowedHeaders: ["*"],
+          AllowedMethods: ["GET", "HEAD", "PUT", "POST", "DELETE", "OPTIONS"],
+          AllowedOrigins: allowedOrigins,
+          ExposeHeaders: [
+            "ETag",
+            "Content-Length",
+            "Content-Range",
+            "Accept-Ranges",
+          ],
+          MaxAgeSeconds: 3600,
+        },
+      ],
+    },
+  });
+
+  await s3.send(command);
+}
+
+export async function multipartUpload({
+  s3,
+  bucket,
+  key,
+  file,
+  contentType,
+  onProgress,
+}) {
+  if (!s3) {
+    throw new Error("S3 client is required");
+  }
+  if (!bucket) {
+    throw new Error("Bucket is required");
+  }
+  if (!key) {
+    throw new Error("Object key is required");
+  }
+  if (!file) {
+    throw new Error("File is required");
+  }
+
+  const createCommand = new CreateMultipartUploadCommand({
+    Bucket: bucket,
+    Key: key,
+    ContentType: contentType || file.type || "application/octet-stream",
+    CacheControl: computeCacheControl(key),
+  });
+
+  createCommand.middlewareStack.add(
+    (next) => async (args) => {
+      if (args?.request?.headers) {
+        args.request.headers["cf-create-bucket-if-missing"] = "true";
+      }
+      return next(args);
+    },
+    { step: "build" }
+  );
+
+  const { UploadId } = await s3.send(createCommand);
+
+  if (!UploadId) {
+    throw new Error("Failed to start multipart upload");
+  }
+
+  const MIN_PART = 5 * 1024 * 1024;
+  const maxParts = 10000;
+  const calculated = Math.ceil(file.size / maxParts);
+  const partSize = Math.max(MIN_PART, calculated);
+  const total = file.size;
+  const parts = [];
+  let uploadedBytes = 0;
+  let partNumber = 1;
+
+  if (typeof onProgress === "function") {
+    onProgress(0);
+  }
+
+  try {
+    while (uploadedBytes < total) {
+      const start = uploadedBytes;
+      const end = Math.min(start + partSize, total);
+      const chunk = file.slice(start, end);
+
+      const { ETag } = await s3.send(
+        new UploadPartCommand({
+          Bucket: bucket,
+          Key: key,
+          UploadId,
+          PartNumber: partNumber,
+          Body: chunk,
+        })
+      );
+
+      parts.push({ ETag, PartNumber: partNumber });
+      uploadedBytes = end;
+      partNumber += 1;
+
+      if (typeof onProgress === "function") {
+        onProgress(uploadedBytes / total);
+      }
+    }
+
+    await s3.send(
+      new CompleteMultipartUploadCommand({
+        Bucket: bucket,
+        Key: key,
+        UploadId,
+        MultipartUpload: { Parts: parts },
+      })
+    );
+  } catch (error) {
+    await s3
+      .send(
+        new AbortMultipartUploadCommand({
+          Bucket: bucket,
+          Key: key,
+          UploadId,
+        })
+      )
+      .catch(() => {});
+    throw error;
+  }
+}

js/subscriptions.js

@@ -3,7 +3,61 @@ import {
   nostrClient,
   convertEventToVideo as sharedConvertEventToVideo,
 } from "./nostr.js";
-import { attachHealthBadges } from "./gridHealth.js";
+import { attachUrlHealthBadges } from "./urlHealthObserver.js";
+import {
+  buildSubscriptionListEvent,
+  SUBSCRIPTION_LIST_IDENTIFIER,
+} from "./nostrEventSchemas.js";
+import { getSidebarLoadingMarkup } from "./sidebarLoading.js";
+import {
+  publishEventToRelays,
+  assertAnyRelayAccepted,
+} from "./nostrPublish.js";
+
+let attachHealthBadgesLoader = null;
+let attachHealthBadgesErrorLogged = false;
+
+function scheduleAttachHealthBadges(container) {
+  if (!container) {
+    return;
+  }
+
+  if (!attachHealthBadgesLoader) {
+    attachHealthBadgesLoader = import("./gridHealth.js")
+      .then((module) => module?.attachHealthBadges || null)
+      .catch((error) => {
+        if (!attachHealthBadgesErrorLogged) {
+          attachHealthBadgesErrorLogged = true;
+          if (typeof console !== "undefined") {
+            console.warn(
+              "[SubscriptionsManager] Failed to load grid health helpers:",
+              error
+            );
+          }
+        }
+        return null;
+      });
+  }
+
+  attachHealthBadgesLoader
+    .then((fn) => {
+      if (typeof fn === "function") {
+        try {
+          fn(container);
+        } catch (error) {
+          if (typeof console !== "undefined") {
+            console.warn(
+              "[SubscriptionsManager] attachHealthBadges threw:",
+              error
+            );
+          }
+        }
+      }
+    })
+    .catch(() => {
+      // Errors are already logged above; no-op here to keep Promise chains quiet.
+    });
+}
 
 function getAbsoluteShareUrl(nevent) {
   if (!nevent) {
@@ -57,7 +111,7 @@ class SubscriptionsManager {
       const filter = {
         kinds: [30002],
         authors: [userPubkey],
-        "#d": ["subscriptions"],
+        "#d": [SUBSCRIPTION_LIST_IDENTIFIER],
         limit: 1,
       };
 
@@ -167,33 +221,68 @@ class SubscriptionsManager {
       throw err;
     }
 
-    const evt = {
-      kind: 30002,
+    const evt = buildSubscriptionListEvent({
       pubkey: userPubkey,
       created_at: Math.floor(Date.now() / 1000),
-      tags: [["d", "subscriptions"]],
       content: cipherText,
-    };
+    });
 
+    let signedEvent;
     try {
-      const signedEvent = await window.nostr.signEvent(evt);
-      await Promise.all(
-        nostrClient.relays.map(async (relay) => {
-          try {
-            await nostrClient.pool.publish([relay], signedEvent);
-          } catch (e) {
+      signedEvent = await window.nostr.signEvent(evt);
+    } catch (signErr) {
+      console.error("Failed to sign subscription list:", signErr);
+      throw signErr;
+    }
+
+    const publishResults = await publishEventToRelays(
+      nostrClient.pool,
+      nostrClient.relays,
+      signedEvent
+    );
+
+    let publishSummary;
+    try {
+      publishSummary = assertAnyRelayAccepted(publishResults, {
+        context: "subscription list",
+      });
+    } catch (publishError) {
+      if (publishError?.relayFailures?.length) {
+        publishError.relayFailures.forEach(
+          ({ url, error: relayError, reason }) => {
             console.error(
-              `[SubscriptionsManager] Failed to publish to ${relay}`,
-              e
+              `[SubscriptionsManager] Subscription list rejected by ${url}: ${reason}`,
+              relayError || reason
             );
           }
-        })
-      );
-      this.subsEventId = signedEvent.id;
-      console.log("Subscription list published, event id:", signedEvent.id);
-    } catch (signErr) {
-      console.error("Failed to sign/publish subscription list:", signErr);
+        );
+      }
+      throw publishError;
     }
+
+    if (publishSummary.failed.length) {
+      publishSummary.failed.forEach(({ url, error: relayError }) => {
+        const reason =
+          relayError instanceof Error
+            ? relayError.message
+            : relayError
+            ? String(relayError)
+            : "publish failed";
+        console.warn(
+          `[SubscriptionsManager] Subscription list not accepted by ${url}: ${reason}`,
+          relayError
+        );
+      });
+    }
+
+    this.subsEventId = signedEvent.id;
+    const acceptedUrls = publishSummary.accepted.map(({ url }) => url);
+    console.log(
+      "Subscription list published, event id:",
+      signedEvent.id,
+      "accepted relays:",
+      acceptedUrls
+    );
   }
 
   /**
@@ -223,6 +312,8 @@ class SubscriptionsManager {
       return;
     }
 
+    container.innerHTML = getSidebarLoadingMarkup("Fetching subscriptions…");
+
     // Gather all videos
     const videos = await this.fetchSubscribedVideos(channelHexes);
     this.renderSameGridStyle(videos, containerId);
@@ -278,7 +369,22 @@ class SubscriptionsManager {
       window.app?.dedupeVideosByRoot?.(safeVideos) ??
       this.dedupeToNewestByRoot(safeVideos);
 
-    if (!dedupedVideos.length) {
+    const filteredVideos = dedupedVideos.filter((video) => {
+      if (!video || typeof video !== "object") {
+        return false;
+      }
+
+      if (
+        window.app?.isAuthorBlocked &&
+        window.app.isAuthorBlocked(video.pubkey)
+      ) {
+        return false;
+      }
+
+      return true;
+    });
+
+    if (!filteredVideos.length) {
       container.innerHTML = `
         <p class="flex justify-center items-center h-full w-full text-center text-gray-500">
           No videos available yet.
@@ -287,14 +393,14 @@ class SubscriptionsManager {
     }
 
     // Sort newest first
-    dedupedVideos.sort((a, b) => b.created_at - a.created_at);
+    filteredVideos.sort((a, b) => b.created_at - a.created_at);
 
     const fullAllEventsArray = Array.from(nostrClient.allEvents.values());
     const fragment = document.createDocumentFragment();
     // Only declare localAuthorSet once
     const localAuthorSet = new Set();
 
-    dedupedVideos.forEach((video, index) => {
+    filteredVideos.forEach((video, index) => {
       if (!video.id || !video.title) {
         console.error("Missing ID or title:", video);
         return;
@@ -376,6 +482,48 @@ class SubscriptionsManager {
         `
         : "";
 
+      const moreMenu = `
+        <div class="relative inline-block ml-1 overflow-visible" data-more-menu-wrapper="true">
+          <button
+            type="button"
+            class="inline-flex items-center justify-center w-10 h-10 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"
+            data-more-dropdown="${index}"
+            aria-haspopup="true"
+            aria-expanded="false"
+            aria-label="More options"
+          >
+            <img src="assets/svg/ellipsis.svg" alt="More" class="w-5 h-5 object-contain" />
+          </button>
+          <div
+            id="moreDropdown-${index}"
+            class="hidden absolute right-0 bottom-full mb-2 w-40 rounded-md shadow-lg bg-gray-800 ring-1 ring-black ring-opacity-5 z-50"
+            role="menu"
+            data-more-menu="true"
+          >
+            <div class="py-1">
+              <button class="block w-full text-left px-4 py-2 text-sm text-gray-100 hover:bg-gray-700" data-action="open-channel" data-author="${video.pubkey || ""}">
+                Open channel
+              </button>
+              <button class="block w-full text-left px-4 py-2 text-sm text-gray-100 hover:bg-gray-700" data-action="copy-link" data-event-id="${video.id || ""}">
+                Copy link
+              </button>
+              <button class="block w-full text-left px-4 py-2 text-sm text-red-400 hover:bg-red-700 hover:text-white" data-action="block-author" data-author="${video.pubkey || ""}">
+                Block creator
+              </button>
+              <button class="block w-full text-left px-4 py-2 text-sm text-gray-100 hover:bg-gray-700" data-action="report" data-event-id="${video.id || ""}">
+                Report
+              </button>
+            </div>
+          </div>
+        </div>
+      `;
+
+      const cardControls = `
+        <div class="flex items-center">
+          ${moreMenu}${gearMenu}
+        </div>
+      `;
+
       const safeTitle = window.app?.escapeHTML(video.title) || "Untitled";
       const safeThumb = window.app?.escapeHTML(video.thumbnail) || "";
       const playbackUrl =
@@ -456,7 +604,7 @@ class SubscriptionsManager {
                   </div>
                 </div>
               </div>
-              ${gearMenu}
+              ${cardControls}
             </div>
             ${connectionBadgesHtml}
           </div>
@@ -467,6 +615,42 @@ class SubscriptionsManager {
       t.innerHTML = cardHtml.trim();
       const cardEl = t.content.firstElementChild;
       if (cardEl) {
+        cardEl.dataset.ownerIsViewer = canEdit ? "true" : "false";
+        if (typeof video.pubkey === "string" && video.pubkey) {
+          cardEl.dataset.ownerPubkey = video.pubkey;
+        } else if (cardEl.dataset.ownerPubkey) {
+          delete cardEl.dataset.ownerPubkey;
+        }
+
+        if (trimmedUrl) {
+          cardEl.dataset.urlHealthState = "checking";
+          if (cardEl.dataset.urlHealthReason) {
+            delete cardEl.dataset.urlHealthReason;
+          }
+          cardEl.dataset.urlHealthEventId = video.id || "";
+          cardEl.dataset.urlHealthUrl = encodeURIComponent(trimmedUrl);
+        } else {
+          cardEl.dataset.urlHealthState = "offline";
+          cardEl.dataset.urlHealthReason = "missing-source";
+          if (cardEl.dataset.urlHealthEventId) {
+            delete cardEl.dataset.urlHealthEventId;
+          }
+          if (cardEl.dataset.urlHealthUrl) {
+            delete cardEl.dataset.urlHealthUrl;
+          }
+        }
+        if (magnetProvided && magnetSupported) {
+          cardEl.dataset.streamHealthState = "checking";
+          if (cardEl.dataset.streamHealthReason) {
+            delete cardEl.dataset.streamHealthReason;
+          }
+        } else {
+          cardEl.dataset.streamHealthState = "unhealthy";
+          cardEl.dataset.streamHealthReason = magnetProvided
+            ? "unsupported"
+            : "missing-source";
+        }
+
         // Leave the data-play-* attributes empty in the literal markup so we can
         // assign the raw URL/magnet strings post-parsing without HTML entity
         // escaping, mirroring the approach in app.js. The URL is encoded so that
@@ -491,14 +675,18 @@ class SubscriptionsManager {
           delete cardEl.dataset.magnet;
         }
 
-        if (trimmedUrl && window.app?.handleUrlHealthBadge) {
-          const badgeEl = cardEl.querySelector("[data-url-health-state]");
-          if (badgeEl) {
-            window.app.handleUrlHealthBadge({
-              video,
-              url: trimmedUrl,
-              badgeEl,
-            });
+        const badgeEl = cardEl.querySelector("[data-url-health-state]");
+        if (badgeEl) {
+          if (trimmedUrl) {
+            badgeEl.dataset.urlHealthEventId = video.id || "";
+            badgeEl.dataset.urlHealthUrl = encodeURIComponent(trimmedUrl);
+          } else {
+            if (badgeEl.dataset.urlHealthEventId) {
+              delete badgeEl.dataset.urlHealthEventId;
+            }
+            if (badgeEl.dataset.urlHealthUrl) {
+              delete badgeEl.dataset.urlHealthUrl;
+            }
           }
         }
       }
@@ -506,17 +694,24 @@ class SubscriptionsManager {
     });
 
     container.appendChild(fragment);
-    attachHealthBadges(container);
+    scheduleAttachHealthBadges(container);
+    attachUrlHealthBadges(container, ({ badgeEl, url, eventId }) => {
+      if (!window.app?.handleUrlHealthBadge) {
+        return;
+      }
+      const video =
+        window.app.videosMap?.get?.(eventId) || { id: eventId };
+      window.app.handleUrlHealthBadge({ video, url, badgeEl });
+    });
 
-    if (window.app) {
-      window.app.videoList = container;
-      window.app.attachVideoListHandler?.();
-    }
+    window.app?.attachVideoListHandler?.();
 
     // Lazy-load
     const lazyEls = container.querySelectorAll("[data-lazy]");
     lazyEls.forEach((el) => window.app?.mediaLoader.observe(el));
 
+    window.app?.attachMoreMenuHandlers?.(container);
+
     // Gear menus
     const gearButtons = container.querySelectorAll("[data-settings-dropdown]");
     gearButtons.forEach((btn) => {

js/urlHealthObserver.js

@@ -0,0 +1,70 @@
+import { createCardObserver } from "./dom/cardObserver.js";
+import { safeDecodeURIComponent } from "./utils/safeDecode.js";
+
+const ROOT_MARGIN = "0px";
+const THRESHOLD = 0.25;
+
+const urlCardObserver = createCardObserver({
+  rootMargin: ROOT_MARGIN,
+  threshold: THRESHOLD,
+  isCardVisible: (entry) => {
+    if (!entry) {
+      return false;
+    }
+    const isIntersecting = Boolean(entry.isIntersecting);
+    const ratio = typeof entry.intersectionRatio === "number" ? entry.intersectionRatio : 0;
+    return isIntersecting && ratio > 0;
+  },
+  createState: () => ({ onCheck: null }),
+  onCardVisible: ({ card, state }) => {
+    if (!state || typeof state.onCheck !== "function") {
+      return;
+    }
+
+    const badgeEl = card.querySelector("[data-url-health-state]");
+    if (!(badgeEl instanceof HTMLElement)) {
+      return;
+    }
+
+    const encodedUrl =
+      card.dataset.urlHealthUrl || badgeEl.dataset.urlHealthUrl || "";
+    const eventId =
+      card.dataset.urlHealthEventId || badgeEl.dataset.urlHealthEventId || "";
+
+    if (!encodedUrl || !eventId) {
+      return;
+    }
+
+    const currentState =
+      card.dataset.urlHealthState || badgeEl.dataset.urlHealthState;
+    if (currentState && currentState !== "checking") {
+      return;
+    }
+
+    const url = safeDecodeURIComponent(encodedUrl);
+    if (!url) {
+      return;
+    }
+
+    try {
+      state.onCheck({ card, badgeEl, url, eventId });
+    } catch (err) {
+      console.warn("[urlHealthObserver] onCheck handler failed", err);
+    }
+  },
+});
+
+export function attachUrlHealthBadges(container, onCheck) {
+  if (!(container instanceof HTMLElement)) {
+    return;
+  }
+
+  const state = urlCardObserver.observe(container);
+  if (state && typeof onCheck === "function") {
+    state.onCheck = onCheck;
+  }
+}
+
+export function refreshUrlHealthBadges(container) {
+  urlCardObserver.refresh(container);
+}

js/userBlocks.js

@@ -0,0 +1,313 @@
+// js/userBlocks.js
+import { nostrClient } from "./nostr.js";
+import { buildBlockListEvent, BLOCK_LIST_IDENTIFIER } from "./nostrEventSchemas.js";
+import {
+  publishEventToRelays,
+  assertAnyRelayAccepted,
+} from "./nostrPublish.js";
+
+function normalizeHex(pubkey) {
+  if (typeof pubkey !== "string") {
+    return null;
+  }
+
+  const trimmed = pubkey.trim();
+  if (!trimmed) {
+    return null;
+  }
+
+  if (/^[0-9a-f]{64}$/i.test(trimmed)) {
+    return trimmed.toLowerCase();
+  }
+
+  return null;
+}
+
+class UserBlockListManager {
+  constructor() {
+    this.blockedPubkeys = new Set();
+    this.blockEventId = null;
+    this.loaded = false;
+  }
+
+  reset() {
+    this.blockedPubkeys.clear();
+    this.blockEventId = null;
+    this.loaded = false;
+  }
+
+  getBlockedPubkeys() {
+    return Array.from(this.blockedPubkeys);
+  }
+
+  isBlocked(pubkey) {
+    const normalized = normalizeHex(pubkey);
+    if (!normalized) {
+      return false;
+    }
+    return this.blockedPubkeys.has(normalized);
+  }
+
+  async ensureLoaded(userPubkey) {
+    if (this.loaded) {
+      return;
+    }
+
+    const normalized = normalizeHex(userPubkey);
+    if (!normalized) {
+      return;
+    }
+
+    await this.loadBlocks(normalized);
+  }
+
+  async loadBlocks(userPubkey) {
+    const normalized = normalizeHex(userPubkey);
+    if (!normalized) {
+      this.reset();
+      this.loaded = true;
+      return;
+    }
+
+    if (!window?.nostr?.nip04?.decrypt) {
+      console.warn(
+        "[UserBlockList] nip04.decrypt is unavailable; treating block list as empty."
+      );
+      this.reset();
+      this.loaded = true;
+      return;
+    }
+
+    try {
+      const filter = {
+        kinds: [30002],
+        authors: [normalized],
+        "#d": [BLOCK_LIST_IDENTIFIER],
+        limit: 1,
+      };
+
+      const events = [];
+      for (const relay of nostrClient.relays) {
+        try {
+          const res = await nostrClient.pool.list([relay], [filter]);
+          if (Array.isArray(res) && res.length) {
+            events.push(...res);
+          }
+        } catch (err) {
+          console.error(`[UserBlockList] Relay error at ${relay}:`, err);
+        }
+      }
+
+      if (!events.length) {
+        this.blockedPubkeys.clear();
+        this.blockEventId = null;
+        this.loaded = true;
+        return;
+      }
+
+      events.sort((a, b) => b.created_at - a.created_at);
+      const newest = events[0];
+      this.blockEventId = newest.id;
+
+      let decrypted = "";
+      try {
+        decrypted = await window.nostr.nip04.decrypt(
+          normalized,
+          newest.content
+        );
+      } catch (err) {
+        console.error("[UserBlockList] Failed to decrypt block list:", err);
+        this.blockedPubkeys.clear();
+        this.loaded = true;
+        return;
+      }
+
+      try {
+        const parsed = JSON.parse(decrypted);
+        const list = Array.isArray(parsed?.blockedPubkeys)
+          ? parsed.blockedPubkeys
+          : [];
+        const sanitized = list
+          .map((entry) => normalizeHex(entry))
+          .filter((candidate) => {
+            if (!candidate) {
+              return false;
+            }
+            if (candidate === normalized) {
+              return false;
+            }
+            return true;
+          });
+        this.blockedPubkeys = new Set(sanitized);
+      } catch (err) {
+        console.error("[UserBlockList] Failed to parse block list:", err);
+        this.blockedPubkeys.clear();
+      }
+    } catch (error) {
+      console.error("[UserBlockList] loadBlocks failed:", error);
+      this.blockedPubkeys.clear();
+    } finally {
+      this.loaded = true;
+    }
+  }
+
+  async addBlock(targetPubkey, userPubkey) {
+    const actorHex = normalizeHex(userPubkey);
+    if (!actorHex) {
+      throw new Error("Invalid user pubkey.");
+    }
+
+    const targetHex = normalizeHex(targetPubkey);
+    if (!targetHex) {
+      const err = new Error("Invalid target pubkey.");
+      err.code = "invalid";
+      throw err;
+    }
+
+    if (actorHex === targetHex) {
+      const err = new Error("Cannot block yourself.");
+      err.code = "self";
+      throw err;
+    }
+
+    await this.ensureLoaded(actorHex);
+
+    if (this.blockedPubkeys.has(targetHex)) {
+      return { ok: true, already: true };
+    }
+
+    const snapshot = new Set(this.blockedPubkeys);
+    this.blockedPubkeys.add(targetHex);
+
+    try {
+      await this.publishBlockList(actorHex);
+      return { ok: true };
+    } catch (err) {
+      this.blockedPubkeys = snapshot;
+      throw err;
+    }
+  }
+
+  async removeBlock(targetPubkey, userPubkey) {
+    const actorHex = normalizeHex(userPubkey);
+    if (!actorHex) {
+      throw new Error("Invalid user pubkey.");
+    }
+
+    const targetHex = normalizeHex(targetPubkey);
+    if (!targetHex) {
+      return { ok: true, already: true };
+    }
+
+    await this.ensureLoaded(actorHex);
+
+    if (!this.blockedPubkeys.has(targetHex)) {
+      return { ok: true, already: true };
+    }
+
+    const snapshot = new Set(this.blockedPubkeys);
+    this.blockedPubkeys.delete(targetHex);
+
+    try {
+      await this.publishBlockList(actorHex);
+      return { ok: true };
+    } catch (err) {
+      this.blockedPubkeys = snapshot;
+      throw err;
+    }
+  }
+
+  async publishBlockList(userPubkey) {
+    if (!window?.nostr?.nip04?.encrypt) {
+      const err = new Error(
+        "NIP-04 encryption is required to update the block list."
+      );
+      err.code = "nip04-missing";
+      throw err;
+    }
+
+    if (typeof window.nostr.signEvent !== "function") {
+      const err = new Error("Nostr extension missing signEvent support.");
+      err.code = "nip04-missing";
+      throw err;
+    }
+
+    const normalized = normalizeHex(userPubkey);
+    if (!normalized) {
+      throw new Error("Invalid user pubkey.");
+    }
+
+    const payload = {
+      blockedPubkeys: Array.from(this.blockedPubkeys).filter(
+        (candidate) => candidate && candidate !== normalized
+      ),
+    };
+    const plaintext = JSON.stringify(payload);
+
+    let cipherText = "";
+    try {
+      cipherText = await window.nostr.nip04.encrypt(normalized, plaintext);
+    } catch (error) {
+      const err = new Error("Failed to encrypt block list.");
+      err.code = "nip04-missing";
+      throw err;
+    }
+
+    const event = buildBlockListEvent({
+      pubkey: normalized,
+      created_at: Math.floor(Date.now() / 1000),
+      content: cipherText,
+    });
+
+    const signedEvent = await window.nostr.signEvent(event);
+
+    const publishResults = await publishEventToRelays(
+      nostrClient.pool,
+      nostrClient.relays,
+      signedEvent
+    );
+
+    let publishSummary;
+    try {
+      publishSummary = assertAnyRelayAccepted(publishResults, {
+        context: "block list",
+      });
+    } catch (publishError) {
+      if (publishError?.relayFailures?.length) {
+        publishError.relayFailures.forEach(
+          ({ url, error: relayError, reason }) => {
+            console.error(
+              `[UserBlockList] Block list rejected by ${url}: ${reason}`,
+              relayError || reason
+            );
+          }
+        );
+      }
+      throw publishError;
+    }
+
+    if (publishSummary.failed.length) {
+      publishSummary.failed.forEach(({ url, error: relayError }) => {
+        const reason =
+          relayError instanceof Error
+            ? relayError.message
+            : relayError
+            ? String(relayError)
+            : "publish failed";
+        console.warn(
+          `[UserBlockList] Block list not accepted by ${url}: ${reason}`,
+          relayError
+        );
+      });
+    }
+
+    this.blockEventId = signedEvent.id;
+    return signedEvent;
+  }
+}
+
+export const userBlocks = new UserBlockListManager();
+
+if (typeof window !== "undefined") {
+  window.userBlocks = userBlocks;
+}

js/utils/safeDecode.js

@@ -0,0 +1,32 @@
+export function safeDecodeURIComponent(value) {
+  if (typeof value !== "string") {
+    return "";
+  }
+
+  if (value === "") {
+    return "";
+  }
+
+  try {
+    return decodeURIComponent(value);
+  } catch (err) {
+    return value;
+  }
+}
+
+export function safeDecodeURIComponentLoose(value, { trim = true } = {}) {
+  if (typeof value !== "string") {
+    return "";
+  }
+
+  const working = trim ? value.trim() : value;
+  if (trim && !working) {
+    return "";
+  }
+
+  try {
+    return decodeURIComponent(working);
+  } catch (err) {
+    return working;
+  }
+}

js/viewCounter.js

@@ -0,0 +1,643 @@
+/**
+ * @module viewCounter
+ * @description Public API for tracking and formatting BitVid video view totals.
+ *
+ * The module exposes lifecycle helpers:
+ *   - {@link initViewCounter} to prime the counter with the active Nostr client.
+ *   - {@link subscribeToVideoViewCount} / {@link unsubscribeFromVideoViewCount}
+ *     to observe live totals for an `a` or `e` pointer.
+ *   - {@link ingestLocalViewEvent} so playback flows can optimistically update
+ *     counts immediately after publishing a view event.
+ *   - {@link formatViewCount} for rendering localized view totals in the UI.
+ */
+
+import {
+  VIEW_COUNT_BACKFILL_MAX_DAYS,
+  VIEW_COUNT_CACHE_TTL_MS,
+  VIEW_COUNT_DEDUPE_WINDOW_SECONDS,
+} from "./config.js";
+import {
+  countVideoViewEvents,
+  listVideoViewEvents,
+  subscribeVideoViewEvents,
+} from "./nostr.js";
+
+const VIEW_COUNTER_STORAGE_KEY = "bitvid:view-counter:v1";
+const STORAGE_DEBOUNCE_MS = 500;
+const SECONDS_PER_DAY = 86_400;
+
+/** @type {Map<string, ViewCounterState>} */
+const pointerStates = new Map();
+/** @type {Map<string, PointerListeners>} */
+const pointerListeners = new Map();
+let persistTimer = null;
+let nextTokenId = 1;
+let nostrClientRef = null;
+
+restoreCacheSnapshot();
+
+/**
+ * @typedef {Object} ViewCounterState
+ * @property {number} total
+ * @property {Map<string, number>} dedupeBuckets
+ * @property {number} lastSyncedAt
+ * @property {"idle"|"hydrating"|"live"} status
+ */
+
+/**
+ * @typedef {Object} PointerListeners
+ * @property {{ type: string, value: string, relay?: string | null }} pointer
+ * @property {Map<string, Function>} handlers
+ * @property {(() => void) | null} liveUnsub
+ * @property {Promise<void> | null} hydrationPromise
+ * @property {Object | null} options
+ */
+
+/**
+ * Persist the in-memory cache to localStorage after a short debounce.
+ */
+function schedulePersist() {
+  if (!supportsStorage()) {
+    return;
+  }
+  if (persistTimer) {
+    clearTimeout(persistTimer);
+  }
+  persistTimer = setTimeout(() => {
+    persistTimer = null;
+    persistCacheSnapshot();
+  }, STORAGE_DEBOUNCE_MS);
+}
+
+/**
+ * Convert a raw pointer input into the canonical key and normalized descriptor.
+ *
+ * @param {string | { type?: string, value?: string, relay?: string | null } | { tag?: any }} input
+ * @returns {{ key: string, pointer: { type: string, value: string, relay?: string | null } }}
+ */
+function canonicalizePointer(input) {
+  const normalized = normalizePointer(input);
+  if (!normalized) {
+    throw new Error("Invalid pointer supplied for view counting.");
+  }
+
+  const type = normalized.type === "a" ? "a" : "e";
+  const value = typeof normalized.value === "string" ? normalized.value.trim() : "";
+  if (!value) {
+    throw new Error("Invalid pointer supplied for view counting.");
+  }
+
+  const key = `${type}:${value}`;
+  const descriptor = { type, value };
+  if (normalized.relay) {
+    descriptor.relay = normalized.relay;
+  }
+  return { key, pointer: descriptor };
+}
+
+/**
+ * Mirror the pointer normalization logic used inside the Nostr client.
+ *
+ * @param {any} pointer
+ * @returns {{ type: string, value: string, relay?: string | null } | null}
+ */
+function normalizePointer(pointer) {
+  if (!pointer) {
+    return null;
+  }
+
+  if (Array.isArray(pointer)) {
+    return normalizePointerTag(pointer);
+  }
+
+  if (typeof pointer === "object") {
+    if (typeof pointer.type === "string" && typeof pointer.value === "string") {
+      return clonePointer(pointer);
+    }
+    if (Array.isArray(pointer.tag)) {
+      return normalizePointerTag(pointer.tag);
+    }
+  }
+
+  if (typeof pointer !== "string") {
+    return null;
+  }
+
+  const trimmed = pointer.trim();
+  if (!trimmed) {
+    return null;
+  }
+
+  if (trimmed.startsWith("naddr") || trimmed.startsWith("nevent")) {
+    const decoder = typeof window !== "undefined" ? window?.NostrTools?.nip19?.decode : null;
+    if (typeof decoder === "function") {
+      try {
+        const decoded = decoder(trimmed);
+        if (decoded?.type === "naddr" && decoded.data) {
+          const { kind, pubkey, identifier, relays } = decoded.data;
+          if (
+            typeof kind === "number" &&
+            typeof pubkey === "string" &&
+            typeof identifier === "string"
+          ) {
+            const relay = Array.isArray(relays) && relays.length && typeof relays[0] === "string"
+              ? relays[0]
+              : null;
+            return {
+              type: "a",
+              value: `${kind}:${pubkey}:${identifier}`,
+              relay,
+            };
+          }
+        }
+        if (decoded?.type === "nevent" && decoded.data) {
+          const { id, relays } = decoded.data;
+          if (typeof id === "string" && id.trim()) {
+            const relay = Array.isArray(relays) && relays.length && typeof relays[0] === "string"
+              ? relays[0]
+              : null;
+            return {
+              type: "e",
+              value: id.trim(),
+              relay,
+            };
+          }
+        }
+      } catch (error) {
+        console.warn("[viewCounter] Failed to decode NIP-19 pointer:", error);
+      }
+    }
+  }
+
+  const type = trimmed.includes(":") ? "a" : "e";
+  return { type, value: trimmed, relay: null };
+}
+
+function clonePointer(pointer) {
+  const type = pointer.type === "a" ? "a" : "e";
+  const value = typeof pointer.value === "string" ? pointer.value.trim() : "";
+  if (!value) {
+    return null;
+  }
+  const relay = typeof pointer.relay === "string" ? pointer.relay : null;
+  return relay ? { type, value, relay } : { type, value };
+}
+
+function normalizePointerTag(tag) {
+  if (!Array.isArray(tag) || tag.length < 2) {
+    return null;
+  }
+  const [label, value, relay] = tag;
+  if (label === "a" && typeof value === "string") {
+    const normalized = value.trim();
+    if (!normalized) {
+      return null;
+    }
+    const relayValue = typeof relay === "string" ? relay : null;
+    return relayValue ? { type: "a", value: normalized, relay: relayValue } : { type: "a", value: normalized };
+  }
+  if (label === "e" && typeof value === "string") {
+    const normalized = value.trim();
+    if (!normalized) {
+      return null;
+    }
+    const relayValue = typeof relay === "string" ? relay : null;
+    return relayValue ? { type: "e", value: normalized, relay: relayValue } : { type: "e", value: normalized };
+  }
+  return null;
+}
+
+function supportsStorage() {
+  try {
+    return typeof localStorage !== "undefined";
+  } catch (error) {
+    return false;
+  }
+}
+
+function restoreCacheSnapshot() {
+  if (!supportsStorage()) {
+    return;
+  }
+  try {
+    const raw = localStorage.getItem(VIEW_COUNTER_STORAGE_KEY);
+    if (!raw) {
+      return;
+    }
+    const payload = JSON.parse(raw);
+    if (!payload || payload.version !== 1) {
+      return;
+    }
+    const savedAt = Number(payload.savedAt) || 0;
+    const now = Date.now();
+    if (!savedAt || now - savedAt > VIEW_COUNT_CACHE_TTL_MS) {
+      localStorage.removeItem(VIEW_COUNTER_STORAGE_KEY);
+      return;
+    }
+    const entries = Array.isArray(payload.entries) ? payload.entries : [];
+    for (const entry of entries) {
+      if (!Array.isArray(entry) || entry.length !== 2) {
+        continue;
+      }
+      const [key, state] = entry;
+      if (typeof key !== "string" || !state || typeof state !== "object") {
+        continue;
+      }
+      const total = Number.isFinite(state.total) ? Number(state.total) : 0;
+      const lastSyncedAt = Number.isFinite(state.lastSyncedAt) ? Number(state.lastSyncedAt) : 0;
+      const status = typeof state.status === "string" ? state.status : "idle";
+      const dedupeBuckets = new Map();
+      if (Array.isArray(state.dedupeBuckets)) {
+        for (const bucket of state.dedupeBuckets) {
+          if (!Array.isArray(bucket) || bucket.length < 1) {
+            continue;
+          }
+          const [bucketKey, bucketValue] = bucket;
+          if (typeof bucketKey === "string") {
+            dedupeBuckets.set(
+              bucketKey,
+              Number.isFinite(bucketValue) ? Number(bucketValue) : 0
+            );
+          }
+        }
+      } else if (state.dedupeBuckets && typeof state.dedupeBuckets === "object") {
+        for (const bucketKey of Object.keys(state.dedupeBuckets)) {
+          const bucketValue = state.dedupeBuckets[bucketKey];
+          if (typeof bucketKey === "string") {
+            dedupeBuckets.set(
+              bucketKey,
+              Number.isFinite(bucketValue) ? Number(bucketValue) : 0
+            );
+          }
+        }
+      }
+      pointerStates.set(key, {
+        total,
+        dedupeBuckets,
+        lastSyncedAt,
+        status: status === "hydrating" || status === "live" ? "idle" : status,
+      });
+    }
+  } catch (error) {
+    console.warn("[viewCounter] Failed to restore cached view counts:", error);
+  }
+}
+
+function persistCacheSnapshot() {
+  if (!supportsStorage()) {
+    return;
+  }
+  try {
+    const entries = [];
+    for (const [key, state] of pointerStates.entries()) {
+      entries.push([
+        key,
+        {
+          total: state.total,
+          dedupeBuckets: Array.from(state.dedupeBuckets.entries()),
+          lastSyncedAt: state.lastSyncedAt,
+          status: state.status,
+        },
+      ]);
+    }
+    const payload = {
+      version: 1,
+      savedAt: Date.now(),
+      entries,
+    };
+    localStorage.setItem(VIEW_COUNTER_STORAGE_KEY, JSON.stringify(payload));
+  } catch (error) {
+    console.warn("[viewCounter] Failed to persist view count cache:", error);
+  }
+}
+
+function ensurePointerState(key) {
+  let state = pointerStates.get(key);
+  if (!state) {
+    state = {
+      total: 0,
+      dedupeBuckets: new Map(),
+      lastSyncedAt: 0,
+      status: "idle",
+    };
+    pointerStates.set(key, state);
+  } else if (!(state.dedupeBuckets instanceof Map)) {
+    state.dedupeBuckets = new Map(
+      state.dedupeBuckets ? Object.entries(state.dedupeBuckets) : []
+    );
+  }
+  return state;
+}
+
+function mergePointerDescriptor(existing, next) {
+  if (!existing) {
+    return next;
+  }
+  if (!next) {
+    return existing;
+  }
+  if (!existing.relay && next.relay) {
+    return { ...existing, relay: next.relay };
+  }
+  return existing;
+}
+
+function ensurePointerListeners(key, pointer) {
+  let listeners = pointerListeners.get(key);
+  if (!listeners) {
+    listeners = {
+      pointer,
+      handlers: new Map(),
+      liveUnsub: null,
+      hydrationPromise: null,
+      options: null,
+    };
+    pointerListeners.set(key, listeners);
+  } else if (!listeners.pointer) {
+    listeners.pointer = pointer;
+  } else {
+    listeners.pointer = mergePointerDescriptor(listeners.pointer, pointer);
+  }
+  return listeners;
+}
+
+function notifyHandlers(key) {
+  const listeners = pointerListeners.get(key);
+  if (!listeners || !listeners.handlers.size) {
+    return;
+  }
+  const state = ensurePointerState(key);
+  const snapshot = {
+    total: state.total,
+    lastSyncedAt: state.lastSyncedAt,
+    status: state.status,
+  };
+  for (const handler of listeners.handlers.values()) {
+    try {
+      handler(snapshot);
+    } catch (error) {
+      console.warn("[viewCounter] View handler threw:", error);
+    }
+  }
+}
+
+function setPointerStatus(key, status) {
+  const state = ensurePointerState(key);
+  if (state.status === status) {
+    return;
+  }
+  state.status = status;
+  schedulePersist();
+  notifyHandlers(key);
+}
+
+function applyEventToState(key, event) {
+  if (!event || typeof event !== "object") {
+    return false;
+  }
+  const state = ensurePointerState(key);
+  const bucketKey = deriveBucketKey(event);
+  const finalKey = bucketKey || deriveFallbackKey(event);
+  if (!finalKey) {
+    return false;
+  }
+  const seenBefore = state.dedupeBuckets.has(finalKey);
+  const createdAt = Number.isFinite(event.created_at)
+    ? Number(event.created_at)
+    : Math.floor(Date.now() / 1000);
+  state.dedupeBuckets.set(finalKey, createdAt);
+  if (seenBefore) {
+    return false;
+  }
+  state.total += 1;
+  state.lastSyncedAt = Date.now();
+  return true;
+}
+
+function deriveBucketKey(event) {
+  const pubkey = typeof event?.pubkey === "string" ? event.pubkey : null;
+  if (!pubkey) {
+    return null;
+  }
+  const createdAt = Number.isFinite(event?.created_at)
+    ? Number(event.created_at)
+    : Math.floor(Date.now() / 1000);
+  const windowSize = Math.max(1, VIEW_COUNT_DEDUPE_WINDOW_SECONDS);
+  const bucket = Math.floor(createdAt / windowSize);
+  return `${pubkey}:${bucket}`;
+}
+
+function deriveFallbackKey(event) {
+  if (typeof event?.id === "string" && event.id) {
+    return `event:${event.id}`;
+  }
+  if (typeof event?.sig === "string" && event.sig) {
+    return `sig:${event.sig}`;
+  }
+  return null;
+}
+
+function mergeListenerOptions(existing, next) {
+  if (!existing) {
+    return next || null;
+  }
+  if (!next) {
+    return existing;
+  }
+  return {
+    ...existing,
+    ...next,
+  };
+}
+
+async function hydratePointer(key, listeners) {
+  const pointer = listeners.pointer;
+  const options = listeners.options || {};
+  setPointerStatus(key, "hydrating");
+  const sinceSeconds = Math.floor(Date.now() / 1000) - VIEW_COUNT_BACKFILL_MAX_DAYS * SECONDS_PER_DAY;
+  const listPromise = listVideoViewEvents(pointer, {
+    since: sinceSeconds,
+    relays: options.relays,
+  });
+  const countPromise = countVideoViewEvents(pointer, {
+    relays: options.relays,
+    signal: options.signal,
+  });
+  let listResult = [];
+  let countResult = null;
+  try {
+    listResult = await listPromise;
+  } catch (error) {
+    console.warn("[viewCounter] Failed to hydrate view events via list:", error);
+  }
+  try {
+    countResult = await countPromise;
+  } catch (error) {
+    if (error?.name === "AbortError") {
+      console.warn("[viewCounter] View count hydration aborted:", error);
+    } else {
+      console.warn("[viewCounter] Failed to count view events:", error);
+    }
+  }
+  let mutated = false;
+  if (Array.isArray(listResult)) {
+    for (const event of listResult) {
+      mutated = applyEventToState(key, event) || mutated;
+    }
+  }
+  const bestCount = Number.isFinite(countResult?.best?.count)
+    ? Number(countResult.best.count)
+    : Number.isFinite(countResult?.total)
+    ? Number(countResult.total)
+    : null;
+
+  if (bestCount !== null) {
+    const state = ensurePointerState(key);
+    const shouldUpdate =
+      !countResult?.fallback || bestCount >= state.total || state.total === 0;
+    if (shouldUpdate && state.total !== bestCount) {
+      state.total = bestCount;
+      state.lastSyncedAt = Date.now();
+      mutated = true;
+    }
+  }
+  if (mutated) {
+    schedulePersist();
+    notifyHandlers(key);
+  } else {
+    // Even if nothing changed we still update last synced timestamp.
+    const state = ensurePointerState(key);
+    state.lastSyncedAt = Date.now();
+    schedulePersist();
+    notifyHandlers(key);
+  }
+}
+
+function ensureHydration(key, listeners) {
+  if (!listeners.hydrationPromise) {
+    listeners.hydrationPromise = hydratePointer(key, listeners).finally(() => {
+      listeners.hydrationPromise = null;
+      if (listeners.liveUnsub) {
+        setPointerStatus(key, "live");
+      } else {
+        setPointerStatus(key, "idle");
+      }
+    });
+  }
+}
+
+function ensureLiveSubscription(key, listeners) {
+  if (listeners.liveUnsub || !listeners.handlers.size) {
+    return;
+  }
+  const pointer = listeners.pointer;
+  const options = listeners.options || {};
+  try {
+    const since = Math.floor(Date.now() / 1000) - Math.max(1, VIEW_COUNT_DEDUPE_WINDOW_SECONDS);
+    const unsubscribe = subscribeVideoViewEvents(pointer, {
+      relays: options.relays,
+      since,
+      onEvent: (event) => {
+        const changed = applyEventToState(key, event);
+        if (changed) {
+          schedulePersist();
+          notifyHandlers(key);
+        }
+      },
+    });
+    listeners.liveUnsub = () => {
+      try {
+        unsubscribe();
+      } catch (error) {
+        console.warn("[viewCounter] Failed to unsubscribe from view events:", error);
+      }
+      listeners.liveUnsub = null;
+      if (!listeners.hydrationPromise) {
+        setPointerStatus(key, "idle");
+      }
+    };
+    setPointerStatus(key, "live");
+  } catch (error) {
+    console.warn("[viewCounter] Failed to open live view subscription:", error);
+  }
+}
+
+export function initViewCounter({ nostrClient } = {}) {
+  nostrClientRef = nostrClient || null;
+}
+
+export function subscribeToVideoViewCount(pointerInput, handler, options = {}) {
+  if (typeof handler !== "function") {
+    throw new Error("A handler function is required to subscribe to view counts.");
+  }
+  const { key, pointer } = canonicalizePointer(pointerInput);
+  const listeners = ensurePointerListeners(key, pointer);
+  listeners.options = mergeListenerOptions(listeners.options, options);
+  const token = `token-${nextTokenId++}`;
+  listeners.handlers.set(token, handler);
+  const state = ensurePointerState(key);
+  try {
+    handler({
+      total: state.total,
+      lastSyncedAt: state.lastSyncedAt,
+      status: state.status,
+    });
+  } catch (error) {
+    console.warn("[viewCounter] Initial handler invocation threw:", error);
+  }
+  ensureHydration(key, listeners);
+  ensureLiveSubscription(key, listeners);
+  return token;
+}
+
+export function unsubscribeFromVideoViewCount(pointerInput, token) {
+  if (!token) {
+    return;
+  }
+  const { key } = canonicalizePointer(pointerInput);
+  const listeners = pointerListeners.get(key);
+  if (!listeners) {
+    return;
+  }
+  listeners.handlers.delete(token);
+  if (!listeners.handlers.size && listeners.liveUnsub) {
+    listeners.liveUnsub();
+  }
+}
+
+export function ingestLocalViewEvent({ event, pointer }) {
+  if (!event || !pointer) {
+    return;
+  }
+  try {
+    const { key } = canonicalizePointer(pointer);
+    const changed = applyEventToState(key, event);
+    if (changed) {
+      schedulePersist();
+      notifyHandlers(key);
+    }
+  } catch (error) {
+    console.warn("[viewCounter] Failed to ingest local view event:", error);
+  }
+}
+
+const numberFormatter = typeof Intl !== "undefined" && Intl.NumberFormat
+  ? new Intl.NumberFormat(undefined, { maximumFractionDigits: 0 })
+  : null;
+const compactFormatter = typeof Intl !== "undefined" && Intl.NumberFormat
+  ? new Intl.NumberFormat(undefined, { notation: "compact", maximumFractionDigits: 1 })
+  : null;
+
+export function formatViewCount(total) {
+  const value = Number.isFinite(total) ? Number(total) : 0;
+  if (value < 1000) {
+    if (numberFormatter) {
+      return numberFormatter.format(value);
+    }
+    return String(value);
+  }
+  if (compactFormatter) {
+    return compactFormatter.format(value);
+  }
+  return String(value);
+}

js/viewManager.js

@@ -9,6 +9,10 @@ const TRACKING_SCRIPT_PATTERN = /(?:^|\/)tracking\.js(?:$|\?)/;
  */
 export async function loadView(viewUrl) {
   try {
+    if (window.app && typeof window.app.prepareForViewLoad === "function") {
+      window.app.prepareForViewLoad();
+    }
+
     const res = await fetch(viewUrl);
     if (!res.ok) {
       throw new Error(`Failed to load view: ${res.status}`);
@@ -63,6 +67,16 @@ export const viewInitRegistry = {
   explore: () => {
     console.log("Explore view loaded.");
   },
+  history: async () => {
+    try {
+      const module = await import("./historyView.js");
+      if (typeof module.initHistoryView === "function") {
+        await module.initHistoryView();
+      }
+    } catch (error) {
+      console.error("Failed to initialize history view:", error);
+    }
+  },
 
   /**
    * Subscriptions view:

js/watchHistorySort.js

@@ -0,0 +1,45 @@
+// js/watchHistorySort.js
+
+export function toNumber(value, fallback) {
+  const parsed = Number(value);
+  return Number.isFinite(parsed) ? parsed : fallback;
+}
+
+export function getWatchedAtScore(video) {
+  if (!video || typeof video !== "object") {
+    return Number.NEGATIVE_INFINITY;
+  }
+
+  const watchedAt = toNumber(video?.watchHistory?.watchedAt, Number.NaN);
+  if (Number.isFinite(watchedAt)) {
+    return watchedAt;
+  }
+
+  const createdAtSeconds = toNumber(video?.created_at, Number.NaN);
+  if (Number.isFinite(createdAtSeconds)) {
+    return createdAtSeconds * 1000;
+  }
+
+  return Number.NEGATIVE_INFINITY;
+}
+
+export function compareByWatchedAtDesc(a, b) {
+  const aScore = getWatchedAtScore(a);
+  const bScore = getWatchedAtScore(b);
+
+  if (aScore !== bScore) {
+    return bScore - aScore;
+  }
+
+  const aCreated = toNumber(a?.created_at, Number.NEGATIVE_INFINITY);
+  const bCreated = toNumber(b?.created_at, Number.NEGATIVE_INFINITY);
+
+  if (aCreated !== bCreated) {
+    return bCreated - aCreated;
+  }
+
+  const aId = typeof a?.id === "string" ? a.id : "";
+  const bId = typeof b?.id === "string" ? b.id : "";
+
+  return aId.localeCompare(bId);
+}

js/webtorrent.js

@@ -1,22 +1,10 @@
 //js/webtorrent.js
 
 import WebTorrent from "./webtorrent.min.js";
+import { WSS_TRACKERS } from "./constants.js";
+import { safeDecodeURIComponent } from "./utils/safeDecode.js";
 
-const DEFAULT_PROBE_TRACKERS = Object.freeze([
-  "wss://tracker.btorrent.xyz",
-  "wss://tracker.openwebtorrent.com",
-]);
-
-function decodeComponentSafe(value) {
-  if (typeof value !== "string") {
-    return "";
-  }
-  try {
-    return decodeURIComponent(value);
-  } catch (err) {
-    return value;
-  }
-}
+const DEFAULT_PROBE_TRACKERS = Object.freeze([...WSS_TRACKERS]);
 
 function normalizeTrackerList(trackers) {
   const normalized = [];
@@ -75,7 +63,7 @@ function appendProbeTrackers(magnetURI, trackers) {
         if (!rawKey || rawKey.trim().toLowerCase() !== "tr") {
           return;
         }
-        const decoded = decodeComponentSafe(rawValue).trim().toLowerCase();
+        const decoded = safeDecodeURIComponent(rawValue).trim().toLowerCase();
         if (decoded) {
           trackerSet.add(decoded);
         }
@@ -713,6 +701,74 @@ export class TorrentClient {
     });
   }
 
+  async destroyWithTimeout(
+    target,
+    { label = "resource", args = [], timeoutMs = 8000 } = {}
+  ) {
+    if (!target || typeof target.destroy !== "function") {
+      return;
+    }
+
+    const safeTimeout = Math.max(
+      1000,
+      Math.min(
+        Number.isFinite(timeoutMs) ? timeoutMs : 8000,
+        this.TIMEOUT_DURATION
+      )
+    );
+
+    await new Promise((resolve) => {
+      let settled = false;
+
+      const finalize = () => {
+        if (settled) {
+          return;
+        }
+        settled = true;
+        clearTimeout(timeoutId);
+        resolve();
+      };
+
+      const logError = (error) => {
+        if (error) {
+          this.log(`[cleanup] ${label} destroy error:`, error);
+        }
+      };
+
+      const timeoutId = setTimeout(() => {
+        this.log(
+          `[cleanup] ${label} destroy timed out after ${safeTimeout}ms; forcing resolution.`
+        );
+        finalize();
+      }, safeTimeout);
+
+      const callback = (error) => {
+        logError(error);
+        finalize();
+      };
+
+      let result;
+      try {
+        result = target.destroy(...args, callback);
+      } catch (error) {
+        logError(error);
+        finalize();
+        return;
+      }
+
+      if (result && typeof result.then === "function") {
+        result
+          .then(() => {
+            finalize();
+          })
+          .catch((error) => {
+            logError(error);
+            finalize();
+          });
+      }
+    });
+  }
+
   /**
    * Initiates streaming of a torrent magnet to a <video> element.
    * Ensures the service worker is set up only once and the client is reused.
@@ -778,19 +834,38 @@ export class TorrentClient {
   async cleanup() {
     try {
       if (this.currentTorrent) {
-        this.currentTorrent.destroy();
+        try {
+          await this.destroyWithTimeout(this.currentTorrent, {
+            label: "current torrent",
+            args: [{ destroyStore: true }],
+          });
+        } finally {
+          this.currentTorrent = null;
+        }
       }
-      // Destroy client entirely and set to null so a future streamVideo call starts fresh
+
       if (this.client) {
-        await this.client.destroy();
-        this.client = null;
+        try {
+          await this.destroyWithTimeout(this.client, {
+            label: "WebTorrent client",
+          });
+        } finally {
+          this.client = null;
+          this.serverCreated = false;
+        }
+      } else {
+        this.serverCreated = false;
       }
+
       if (this.probeClient) {
-        await this.probeClient.destroy();
-        this.probeClient = null;
+        try {
+          await this.destroyWithTimeout(this.probeClient, {
+            label: "probe client",
+          });
+        } finally {
+          this.probeClient = null;
+        }
       }
-      this.currentTorrent = null;
-      this.serverCreated = false;
     } catch (error) {
       this.log("Cleanup error:", error);
     }

package.json

@@ -0,0 +1,13 @@
+{
+  "name": "bitvid",
+  "private": true,
+  "version": "1.0.0",
+  "scripts": {
+    "build:css": "npx tailwindcss -c tailwind.config.cjs -i css/tailwind.source.css -o css/tailwind.generated.css --minify"
+  },
+  "devDependencies": {
+    "autoprefixer": "^10.4.19",
+    "postcss": "^8.4.41",
+    "tailwindcss": "^3.4.13"
+  }
+}

postcss.config.cjs

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

tailwind.config.cjs

@@ -0,0 +1,13 @@
+module.exports = {
+  content: [
+    './index.html',
+    './blog.html',
+    './components/**/*.html',
+    './views/**/*.html',
+    './js/**/*.js'
+  ],
+  theme: {
+    extend: {}
+  },
+  plugins: []
+};

tests/magnet-utils.test.mjs

@@ -1,160 +1,205 @@
 import assert from "node:assert/strict";
+import test from "node:test";
+
 import { WSS_TRACKERS } from "../js/constants.js";
-import { normalizeAndAugmentMagnet, safeDecodeMagnet } from "../js/magnetUtils.js";
-import { normalizeAndAugmentMagnet as formNormalize } from "../js/magnet.js";
+import {
+  normalizeAndAugmentMagnet as normalizeMagnetObject,
+  safeDecodeMagnet,
+} from "../js/magnetUtils.js";
+import {
+  extractMagnetHints,
+  normalizeAndAugmentMagnet as normalizeMagnetString,
+} from "../js/magnet.js";
 
 function getParamValues(magnet, key) {
   const parsed = new URL(magnet);
   return parsed.searchParams.getAll(key);
 }
 
-(function testBareInfoHashNormalization() {
-  const infoHash = "0123456789abcdef0123456789abcdef01234567";
-  const result = normalizeAndAugmentMagnet(infoHash);
-  assert.ok(result.didChange, "Bare info hash should mark didChange true");
-  const xtValues = getParamValues(result.magnet, "xt");
-  assert.deepEqual(xtValues, [`urn:btih:${infoHash}`]);
-  const trackerValues = getParamValues(result.magnet, "tr");
+function assertDefaultTrackersPresent(magnet) {
+  const trackers = getParamValues(magnet, "tr");
   for (const tracker of WSS_TRACKERS) {
     assert.ok(
-      trackerValues.includes(tracker),
-      `Expected tracker ${tracker} to be appended`
+      trackers.includes(tracker),
+      `Expected default tracker ${tracker} to be present`
     );
   }
-})();
+}
 
-(function testEncodedXtDecoding() {
-  const infoHash = "abcdefabcdefabcdefabcdefabcdefabcdefabcd";
-  const encodedMagnet = `magnet:?xt=urn%3Abtih%3A${infoHash}&dn=Example`;
-  const result = normalizeAndAugmentMagnet(encodedMagnet);
-  const xtValues = getParamValues(result.magnet, "xt");
-  assert.deepEqual(xtValues, [`urn:btih:${infoHash}`]);
-})();
-
-(function testDuplicateTrackerFiltering() {
-  const infoHash = "fedcba9876543210fedcba9876543210fedcba98";
-  const baseMagnet =
-    `magnet:?xt=urn:btih:${infoHash}` +
-    "&tr=wss://tracker.openwebtorrent.com" +
-    "&tr=WsS://tracker.openwebtorrent.com/" +
-    "&tr=https://not-allowed.example";
-  const result = normalizeAndAugmentMagnet(baseMagnet, {
-    extraTrackers: [
-      "wss://tracker.fastcast.nz",
-      "http://tracker.invalid",
-      "wss://tracker.openwebtorrent.com",
-    ],
-  });
-  const trackers = getParamValues(result.magnet, "tr");
-  const openwebCount = trackers.filter(
-    (value) => value === "wss://tracker.openwebtorrent.com"
-  ).length;
-  assert.equal(openwebCount, 1, "Duplicate WSS tracker should be collapsed");
-  assert.ok(
-    trackers.includes("wss://tracker.fastcast.nz"),
-    "Expected extra WSS tracker to be preserved"
-  );
-  assert.ok(
-    !trackers.includes("http://tracker.invalid"),
-    "Non-WSS tracker candidates should be ignored"
-  );
-})();
-
-(function testWebSeedHandlingWithLogging() {
-  const infoHash = "0123456789abcdef0123456789abcdef01234567";
-  const messages = [];
-  const result = normalizeAndAugmentMagnet(`magnet:?xt=urn:btih:${infoHash}`, {
-    webSeed: [
-      "https://cdn.example.com/video.mp4",
-      "http://cdn.example.com/legacy.mp4",
-      "https://cdn.example.com/video.mp4",
-    ],
-    logger: (msg) => messages.push(msg),
-    appProtocol: "https:",
-  });
-  const seeds = getParamValues(result.magnet, "ws");
-  assert.deepEqual(seeds, ["https://cdn.example.com/video.mp4"]);
-  assert.equal(messages.length, 1, "HTTP seed should have been skipped with a log");
-  assert.ok(
-    messages[0].includes("Skipping insecure web seed"),
-    "Expected skip message for HTTP seed"
-  );
-})();
-
-(function testHttpWebSeedAllowedOnHttpOrigin() {
-  const infoHash = "abcdefabcdefabcdefabcdefabcdefabcdefabcd";
-  const result = normalizeAndAugmentMagnet(`magnet:?xt=urn:btih:${infoHash}`, {
-    webSeed: "http://cdn.example.com/video.mp4",
-    appProtocol: "http:",
-  });
-  const seeds = getParamValues(result.magnet, "ws");
-  assert.deepEqual(seeds, ["http://cdn.example.com/video.mp4"]);
-})();
-
-(function testSafeDecodeMagnetHandlesEncodedValues() {
+test("safeDecodeMagnet handles encoded values", () => {
   const rawMagnet =
     "magnet:?xt=urn:btih:0123456789abcdef0123456789abcdef01234567&dn=Example";
   const encodedMagnet = encodeURIComponent(rawMagnet);
   assert.equal(
     safeDecodeMagnet(encodedMagnet),
     rawMagnet,
-    "Expected percent-encoded magnet to be decoded"
+    "Percent-encoded magnets should be decoded"
   );
-})();
+});
 
-(function testSafeDecodeMagnetLeavesPlainStringsUntouched() {
+test("safeDecodeMagnet leaves plain strings untouched", () => {
   const rawMagnet =
     "magnet:?xt=urn:btih:abcdefabcdefabcdefabcdefabcdefabcdefabcd";
   assert.equal(
     safeDecodeMagnet(rawMagnet),
     rawMagnet,
-    "Plain magnet strings should pass through unchanged"
+    "Plain magnet strings should pass through"
   );
-})();
+});
 
-(function testFormHelperAugmentsWsXsAndDecodesXt() {
-  const infoHash = "abcdef0123456789abcdef0123456789abcdef01";
-  const encodedMagnet = `magnet:?xt=urn%3Abtih%3A${infoHash}`;
-  const normalized = formNormalize(encodedMagnet, {
-    ws: "https://cdn.example.com/video-base/",
+test("bare hashes normalize consistently across helpers", () => {
+  const infoHash = "0123456789abcdef0123456789abcdef01234567";
+  const objectResult = normalizeMagnetObject(infoHash);
+  const stringResult = normalizeMagnetString(infoHash);
+
+  assert.ok(objectResult.didChange, "Bare hashes should mark didChange true");
+  assert.equal(
+    stringResult,
+    objectResult.magnet,
+    "String helper should match object helper output"
+  );
+
+  const xtValues = getParamValues(stringResult, "xt");
+  assert.deepEqual(xtValues, [`urn:btih:${infoHash}`]);
+  assertDefaultTrackersPresent(stringResult);
+});
+
+test("legacy %3A payloads decode across helpers", () => {
+  const infoHash = "abcdefabcdefabcdefabcdefabcdefabcdefabcd";
+  const encoded = `magnet:?xt=urn%3Abtih%3A${infoHash}&dn=Example`;
+  const objectResult = normalizeMagnetObject(encoded);
+  const stringResult = normalizeMagnetString(encoded);
+
+  assert.equal(
+    stringResult,
+    objectResult.magnet,
+    "Helpers should agree on encoded xt payload normalization"
+  );
+
+  const xtValues = getParamValues(stringResult, "xt");
+  assert.deepEqual(xtValues, [`urn:btih:${infoHash}`]);
+});
+
+test("duplicate trackers and hints stay in sync", () => {
+  const infoHash = "fedcba9876543210fedcba9876543210fedcba98";
+  const baseMagnet =
+    `magnet:?xt=urn:btih:${infoHash}` +
+    "&tr=wss://tracker.openwebtorrent.com" +
+    "&tr=WsS://tracker.openwebtorrent.com/";
+
+  const objectResult = normalizeMagnetObject(baseMagnet, {
+    extraTrackers: [
+      "wss://tracker.fastcast.nz",
+      "http://tracker.invalid",
+      "wss://tracker.openwebtorrent.com",
+    ],
+    xs: "https://cdn.example.com/video.torrent",
+    webSeed: "https://cdn.example.com/files/",
+  });
+
+  const stringResult = normalizeMagnetString(baseMagnet, {
+    ws: "https://cdn.example.com/files/", // ensure string helper adds hint
     xs: "https://cdn.example.com/video.torrent",
   });
-  const parsed = new URL(normalized);
-  assert.equal(
-    parsed.searchParams.get("xt"),
-    `urn:btih:${infoHash}`,
-    "Form helper should decode encoded xt payloads"
-  );
-  assert.deepEqual(
-    parsed.searchParams.getAll("ws"),
-    ["https://cdn.example.com/video-base/"],
-    "Expected ws hint to be appended"
-  );
-  assert.deepEqual(
-    parsed.searchParams.getAll("xs"),
-    ["https://cdn.example.com/video.torrent"],
-    "Expected xs hint to be appended"
-  );
-  const trackers = parsed.searchParams.getAll("tr");
-  for (const tracker of WSS_TRACKERS) {
-    assert.ok(
-      trackers.includes(tracker),
-      `Expected helper to append tracker ${tracker}`
-    );
-  }
-})();
 
-(function testFormHelperSkipsInsecureWsOnHttpsOrigin() {
+  assert.equal(
+    stringResult,
+    objectResult.magnet,
+    "Helpers should emit identical magnets after augmentation"
+  );
+
+  const trackers = getParamValues(stringResult, "tr");
+  const openwebCount = trackers.filter(
+    (value) => value === "wss://tracker.openwebtorrent.com"
+  ).length;
+  assert.equal(openwebCount, 1, "Duplicate trackers should be deduped when appended");
+  assert.ok(
+    trackers.includes("wss://tracker.fastcast.nz"),
+    "Extra WSS tracker should be retained"
+  );
+  assert.ok(
+    !trackers.includes("http://tracker.invalid"),
+    "HTTP tracker candidates should be ignored"
+  );
+
+  const webSeeds = getParamValues(stringResult, "ws");
+  assert.deepEqual(webSeeds, ["https://cdn.example.com/files/"]);
+
+  const xsValues = getParamValues(stringResult, "xs");
+  assert.deepEqual(xsValues, ["https://cdn.example.com/video.torrent"]);
+});
+
+test("object helper enforces HTTPS web seeds when on HTTPS", () => {
   const infoHash = "0123456789abcdef0123456789abcdef01234567";
-  const normalized = formNormalize(`magnet:?xt=urn:btih:${infoHash}`, {
+  const messages = [];
+  const result = normalizeMagnetObject(`magnet:?xt=urn:btih:${infoHash}`, {
+    webSeed: [
+      "https://cdn.example.com/video.mp4",
+      "http://cdn.example.com/legacy.mp4",
+    ],
+    logger: (msg) => messages.push(msg),
+    appProtocol: "https:",
+  });
+
+  const seeds = getParamValues(result.magnet, "ws");
+  assert.deepEqual(seeds, ["https://cdn.example.com/video.mp4"]);
+  assert.equal(messages.length, 1, "HTTP web seeds should trigger a log message");
+  assert.ok(
+    messages[0].includes("Skipping insecure web seed"),
+    "Expected skip log for HTTP seed"
+  );
+});
+
+test("object helper allows HTTP seeds on HTTP origins", () => {
+  const infoHash = "abcdefabcdefabcdefabcdefabcdefabcdefabcd";
+  const result = normalizeMagnetObject(`magnet:?xt=urn:btih:${infoHash}`, {
+    webSeed: "http://cdn.example.com/video.mp4",
+    appProtocol: "http:",
+  });
+
+  const seeds = getParamValues(result.magnet, "ws");
+  assert.deepEqual(seeds, ["http://cdn.example.com/video.mp4"]);
+});
+
+test("extractMagnetHints returns first ws/xs pair", () => {
+  const magnet =
+    "magnet:?xt=urn:btih:abcdef0123456789abcdef0123456789abcdef01" +
+    "&ws=https://cdn.example.com/base/" +
+    "&ws=https://cdn.example.com/duplicate/" +
+    "&xs=https://cdn.example.com/video.torrent";
+
+  const hints = extractMagnetHints(magnet);
+  assert.deepEqual(hints, {
+    ws: "https://cdn.example.com/base/",
+    xs: "https://cdn.example.com/video.torrent",
+  });
+});
+
+test("string helper skips insecure ws hints on HTTPS origins", () => {
+  const infoHash = "0123456789abcdef0123456789abcdef01234567";
+  const normalized = normalizeMagnetString(`magnet:?xt=urn:btih:${infoHash}`, {
     ws: "http://cdn.example.com/video-base/",
   });
   const parsed = new URL(normalized);
-  assert.equal(
-    parsed.searchParams.getAll("ws").length,
-    0,
-    "HTTP ws value should be skipped on HTTPS origins"
-  );
-})();
+  assert.equal(parsed.searchParams.getAll("ws").length, 0);
+});
 
-console.log("magnet-utils tests passed");
+test("object helper reports didChange when output differs", () => {
+  const infoHash = "abcdef0123456789abcdef0123456789abcdef01";
+  const result = normalizeMagnetObject(`magnet:?xt=urn:btih:${infoHash}`, {
+    webSeed: "https://cdn.example.com/video.mp4",
+  });
+  assert.ok(result.didChange, "Augmenting with web seeds should mark didChange");
+});
+
+test("helpers trim fragments from non-magnet values", () => {
+  const url = "https://example.com/video.mp4#fragment";
+  const objectResult = normalizeMagnetObject(url);
+  const stringResult = normalizeMagnetString(url);
+  assert.equal(objectResult.magnet, "https://example.com/video.mp4");
+  assert.equal(stringResult, "https://example.com/video.mp4");
+  assert.ok(
+    objectResult.didChange,
+    "Dropping the fragment should be reflected in didChange"
+  );
+});

tests/nostr-count-fallback.test.mjs

@@ -0,0 +1,215 @@
+// Run with: node tests/nostr-count-fallback.test.mjs
+
+import "./test-helpers/setup-localstorage.mjs";
+import assert from "node:assert/strict";
+
+if (typeof globalThis.window === "undefined") {
+  globalThis.window = {};
+}
+
+if (!globalThis.window.NostrTools) {
+  globalThis.window.NostrTools = {};
+}
+
+const { VIEW_COUNT_BACKFILL_MAX_DAYS } = await import("../js/config.js");
+const { nostrClient } = await import("../js/nostr.js");
+
+const NostrClient = nostrClient.constructor;
+
+async function withFrozenTime(timestampSeconds, callback) {
+  const originalNow = Date.now;
+  Date.now = () => timestampSeconds * 1000;
+  try {
+    return await callback();
+  } finally {
+    Date.now = originalNow;
+  }
+}
+
+function getConfiguredHorizonDays() {
+  const horizonDaysRaw = Number(VIEW_COUNT_BACKFILL_MAX_DAYS);
+  return Number.isFinite(horizonDaysRaw)
+    ? Math.max(0, Math.floor(horizonDaysRaw))
+    : 0;
+}
+
+async function testFallbackAddsDefaultSinceWhenPoolMissing() {
+  const client = new NostrClient();
+  client.pool = null;
+
+  const pointer = { type: "e", value: "count-fallback-default" };
+  const calls = [];
+  client.listVideoViewEvents = async (_, options = {}) => {
+    calls.push({ ...options });
+    return [];
+  };
+
+  const horizonDays = getConfiguredHorizonDays();
+
+  const nowSeconds = 1_700_000_000;
+  await withFrozenTime(nowSeconds, async () => {
+    const result = await client.countVideoViewEvents(pointer, {});
+    assert.equal(calls.length, 1, "fallback should issue a single list query");
+    const [{ since }] = calls;
+    if (horizonDays > 0) {
+      const expectedSince = Math.max(0, nowSeconds - horizonDays * 86_400);
+      assert.equal(
+        since,
+        expectedSince,
+        "fallback list should clamp history to the configured horizon"
+      );
+    } else {
+      assert.equal(
+        Object.prototype.hasOwnProperty.call(calls[0], "since"),
+        false,
+        "without a configured horizon the fallback should avoid forcing a since filter"
+      );
+    }
+    assert.equal(result.fallback, true, "fallback branch should be flagged");
+  });
+}
+
+async function testFallbackHonorsCallerOverrides() {
+  const client = new NostrClient();
+  client.pool = null;
+
+  const pointer = { type: "e", value: "count-fallback-overrides" };
+  let receivedOptions = null;
+  client.listVideoViewEvents = async (_, options = {}) => {
+    receivedOptions = { ...options };
+    return [];
+  };
+
+  const overrides = {
+    since: 1_234_567,
+    until: 1_235_000,
+    limit: 42,
+  };
+
+  await client.countVideoViewEvents(pointer, overrides);
+
+  assert.ok(receivedOptions, "fallback should forward overrides to list");
+  assert.equal(
+    receivedOptions.since,
+    Math.floor(overrides.since),
+    "caller supplied since should be preserved"
+  );
+  assert.equal(
+    receivedOptions.until,
+    Math.floor(overrides.until),
+    "caller supplied until should be preserved"
+  );
+  assert.equal(
+    receivedOptions.limit,
+    Math.floor(overrides.limit),
+    "caller supplied limit should be preserved"
+  );
+}
+
+async function testFallbackAfterCountFailureUsesDefaultWindow() {
+  const client = new NostrClient();
+  client.pool = {};
+  client.countEventsAcrossRelays = async () => {
+    throw new Error("count failed");
+  };
+
+  const pointer = { type: "e", value: "count-fallback-error" };
+  let receivedOptions = null;
+  client.listVideoViewEvents = async (_, options = {}) => {
+    receivedOptions = { ...options };
+    return [];
+  };
+
+  const horizonDays = getConfiguredHorizonDays();
+
+  const nowSeconds = 1_800_000_000;
+  await withFrozenTime(nowSeconds, async () => {
+    await client.countVideoViewEvents(pointer, {});
+  });
+
+  assert.ok(receivedOptions, "fallback should invoke the list helper");
+  if (horizonDays > 0) {
+    const expectedSince = Math.max(0, nowSeconds - horizonDays * 86_400);
+    assert.equal(
+      receivedOptions.since,
+      expectedSince,
+      "COUNT fallback should restrict scans to the configured horizon"
+    );
+  } else {
+    assert.equal(
+      Object.prototype.hasOwnProperty.call(receivedOptions, "since"),
+      false,
+      "COUNT fallback should avoid forcing a since filter when no horizon is set"
+    );
+  }
+}
+
+async function testUnsupportedRelaySkipsWarningsAndFallsBack() {
+  const client = new NostrClient();
+  const unsupportedRelay = "wss://unsupported.example";
+  client.relays = [unsupportedRelay];
+
+  let ensureRelayCalls = 0;
+  client.pool = {
+    ensureRelay: async (url) => {
+      ensureRelayCalls += 1;
+      assert.equal(
+        url,
+        unsupportedRelay,
+        "COUNT helper should target the configured relay"
+      );
+      return {};
+    },
+  };
+
+  let listCalls = 0;
+  client.listVideoViewEvents = async () => {
+    listCalls += 1;
+    return [];
+  };
+
+  const originalWarn = console.warn;
+  const warnCalls = [];
+  console.warn = (...args) => {
+    warnCalls.push(args);
+  };
+
+  try {
+    const pointer = { type: "e", value: "unsupported-relay" };
+    const result = await client.countVideoViewEvents(pointer, {});
+
+    assert.equal(listCalls, 1, "fallback should query list once when COUNT fails");
+    assert.equal(result?.fallback, true, "unsupported relay should trigger fallback");
+    assert.ok(
+      client.countUnsupportedRelays.has(unsupportedRelay),
+      "unsupported relay should be remembered for future requests"
+    );
+    assert.equal(
+      warnCalls.length,
+      0,
+      "unsupported relay error should not emit console warnings"
+    );
+
+    // Subsequent calls should skip the unsupported relay entirely.
+    await client.countVideoViewEvents(pointer, {});
+    assert.equal(
+      ensureRelayCalls,
+      1,
+      "unsupported relays should be skipped after the first failure"
+    );
+    assert.equal(
+      warnCalls.length,
+      0,
+      "no warnings should be emitted for cached unsupported relays"
+    );
+  } finally {
+    console.warn = originalWarn;
+  }
+}
+
+await testFallbackAddsDefaultSinceWhenPoolMissing();
+await testFallbackHonorsCallerOverrides();
+await testFallbackAfterCountFailureUsesDefaultWindow();
+await testUnsupportedRelaySkipsWarningsAndFallsBack();
+
+console.log("nostr COUNT fallback tests completed successfully.");

tests/nostr-publish-rejection.test.mjs

@@ -0,0 +1,243 @@
+import "./test-helpers/setup-localstorage.mjs";
+import assert from "node:assert/strict";
+
+if (typeof globalThis.window === "undefined") {
+  globalThis.window = {};
+}
+
+const originalWindowNostr = window.nostr;
+
+window.nostr = {
+  ...(originalWindowNostr || {}),
+  signEvent: async (event) => ({
+    ...event,
+    id: event?.id || `stub-${Math.random().toString(36).slice(2)}`,
+    sig: "stub-signature",
+  }),
+  nip04: {
+    ...(originalWindowNostr?.nip04 || {}),
+    encrypt: async () => "cipher-text",
+  },
+};
+
+try {
+  const { RelayPublishError } = await import("../js/nostrPublish.js");
+  const { nostrClient } = await import("../js/nostr.js");
+  const { subscriptions } = await import("../js/subscriptions.js");
+  const { userBlocks } = await import("../js/userBlocks.js");
+
+  function createRejectingPool(reason = "relay rejected") {
+    const calls = [];
+    return {
+      calls,
+      publish(urls, event) {
+        calls.push({
+          urls: Array.isArray(urls) ? [...urls] : [],
+          event,
+        });
+        return {
+          on(eventName, handler) {
+            if (eventName === "failed") {
+              handler(new Error(reason));
+            }
+            return this;
+          },
+        };
+      },
+    };
+  }
+
+  function snapshotRelayState(client) {
+    return {
+      relays: Array.isArray(client.relays) ? [...client.relays] : [],
+      readRelays: Array.isArray(client.readRelays)
+        ? [...client.readRelays]
+        : [],
+      writeRelays: Array.isArray(client.writeRelays)
+        ? [...client.writeRelays]
+        : [],
+      pool: client.pool,
+    };
+  }
+
+  function restoreRelayState(client, snapshot) {
+    client.relays = [...snapshot.relays];
+    client.readRelays = [...snapshot.readRelays];
+    client.writeRelays = [...snapshot.writeRelays];
+    client.pool = snapshot.pool;
+  }
+
+  function applyTestRelayState(client, relays, pool) {
+    client.relays = [...relays];
+    client.readRelays = [...relays];
+    client.writeRelays = [...relays];
+    client.pool = pool;
+  }
+
+  async function testPublishVideoRejectsWhenAllRelaysFail() {
+    const testRelays = [
+      "wss://relay-a.example",
+      "wss://relay-b.example",
+    ];
+    const pool = createRejectingPool("video rejected");
+    const relaySnapshot = snapshotRelayState(nostrClient);
+    applyTestRelayState(nostrClient, testRelays, pool);
+
+    try {
+      await assert.rejects(
+        nostrClient.publishVideo(
+          {
+            title: "Test video",
+            magnet: "magnet:?xt=urn:btih:TESTVIDEO1234567890",
+            mode: "live",
+          },
+          "f".repeat(64)
+        ),
+        (error) => {
+          assert.ok(
+            error instanceof RelayPublishError,
+            "publishVideo should reject with RelayPublishError"
+          );
+          assert.equal(
+            error.relayFailures.length,
+            testRelays.length,
+            "relayFailures should include every relay"
+          );
+          const urls = error.relayFailures
+            .map((entry) => entry.url)
+            .sort();
+          assert.deepEqual(
+            urls,
+            [...testRelays].sort(),
+            "relayFailures should include the rejecting relay URLs"
+          );
+          return true;
+        }
+      );
+
+      assert.equal(
+        pool.calls.length,
+        testRelays.length,
+        "publishVideo should attempt each relay"
+      );
+    } finally {
+      restoreRelayState(nostrClient, relaySnapshot);
+    }
+  }
+
+  async function testPublishSubscriptionListRejectsWhenAllRelaysFail() {
+    const testRelays = [
+      "wss://relay-a.example",
+      "wss://relay-b.example",
+    ];
+    const pool = createRejectingPool("subscription rejected");
+    const relaySnapshot = snapshotRelayState(nostrClient);
+    applyTestRelayState(nostrClient, testRelays, pool);
+
+    const originalSubs = new Set(subscriptions.subscribedPubkeys);
+    const originalSubsEventId = subscriptions.subsEventId;
+    subscriptions.subscribedPubkeys = new Set(["abcdef1234567890"]);
+    subscriptions.subsEventId = null;
+
+    try {
+      await assert.rejects(
+        subscriptions.publishSubscriptionList("f".repeat(64)),
+        (error) => {
+          assert.ok(
+            error instanceof RelayPublishError,
+            "publishSubscriptionList should reject with RelayPublishError"
+          );
+          assert.equal(
+            error.relayFailures.length,
+            testRelays.length,
+            "relayFailures should include each relay for subscriptions"
+          );
+          const urls = error.relayFailures
+            .map((entry) => entry.url)
+            .sort();
+          assert.deepEqual(urls, [...testRelays].sort());
+          return true;
+        }
+      );
+
+      assert.equal(
+        pool.calls.length,
+        testRelays.length,
+        "publishSubscriptionList should attempt each relay"
+      );
+      assert.equal(
+        subscriptions.subsEventId,
+        null,
+        "subsEventId should remain unset on failure"
+      );
+    } finally {
+      subscriptions.subscribedPubkeys = originalSubs;
+      subscriptions.subsEventId = originalSubsEventId;
+      restoreRelayState(nostrClient, relaySnapshot);
+    }
+  }
+
+  async function testPublishBlockListRejectsWhenAllRelaysFail() {
+    const testRelays = [
+      "wss://relay-a.example",
+      "wss://relay-b.example",
+    ];
+    const pool = createRejectingPool("block list rejected");
+    const relaySnapshot = snapshotRelayState(nostrClient);
+    applyTestRelayState(nostrClient, testRelays, pool);
+
+    const originalBlocked = new Set(userBlocks.blockedPubkeys);
+    const originalBlockEventId = userBlocks.blockEventId;
+    userBlocks.blockedPubkeys = new Set(["abcd".repeat(16)]);
+    userBlocks.blockEventId = null;
+
+    try {
+      await assert.rejects(
+        userBlocks.publishBlockList("f".repeat(64)),
+        (error) => {
+          assert.ok(
+            error instanceof RelayPublishError,
+            "publishBlockList should reject with RelayPublishError"
+          );
+          assert.equal(
+            error.relayFailures.length,
+            testRelays.length,
+            "relayFailures should include each relay for block list"
+          );
+          const urls = error.relayFailures
+            .map((entry) => entry.url)
+            .sort();
+          assert.deepEqual(urls, [...testRelays].sort());
+          return true;
+        }
+      );
+
+      assert.equal(
+        pool.calls.length,
+        testRelays.length,
+        "publishBlockList should attempt each relay"
+      );
+      assert.equal(
+        userBlocks.blockEventId,
+        null,
+        "blockEventId should remain unset on failure"
+      );
+    } finally {
+      userBlocks.blockedPubkeys = originalBlocked;
+      userBlocks.blockEventId = originalBlockEventId;
+      restoreRelayState(nostrClient, relaySnapshot);
+    }
+  }
+
+  await testPublishVideoRejectsWhenAllRelaysFail();
+  await testPublishSubscriptionListRejectsWhenAllRelaysFail();
+  await testPublishBlockListRejectsWhenAllRelaysFail();
+
+  console.log("nostr publish rejection tests passed");
+} finally {
+  if (typeof originalWindowNostr === "undefined") {
+    delete window.nostr;
+  } else {
+    window.nostr = originalWindowNostr;
+  }
+}

tests/safe-decode.test.mjs

@@ -0,0 +1,70 @@
+import assert from "node:assert/strict";
+import test from "node:test";
+
+import {
+  safeDecodeURIComponent,
+  safeDecodeURIComponentLoose,
+} from "../js/utils/safeDecode.js";
+
+import { safeDecodeMagnet } from "../js/magnetUtils.js";
+
+test("safeDecodeURIComponent returns original value on malformed sequences", () => {
+  const malformed = "%E0%A4%A";
+  assert.equal(
+    safeDecodeURIComponent(malformed),
+    malformed,
+    "Malformed sequences should return the original input"
+  );
+});
+
+test("safeDecode helpers handle double-encoded values when applied repeatedly", () => {
+  const raw = "magnet:?xt=urn:btih:abcdef";
+  const doubleEncoded = encodeURIComponent(encodeURIComponent(raw));
+
+  const firstPass = safeDecodeURIComponent(doubleEncoded);
+  assert.equal(
+    firstPass,
+    encodeURIComponent(raw),
+    "First pass should peel one encoding layer"
+  );
+
+  const secondPass = safeDecodeURIComponent(firstPass);
+  assert.equal(
+    secondPass,
+    raw,
+    "Second pass should reveal the original string"
+  );
+
+  assert.equal(
+    safeDecodeMagnet(doubleEncoded),
+    raw,
+    "safeDecodeMagnet should continue to handle double-encoded magnets"
+  );
+});
+
+test("safeDecodeURIComponentLoose trims inputs by default", () => {
+  const padded = "   magnet:?dn=Example";
+  assert.equal(
+    safeDecodeURIComponentLoose(padded),
+    "magnet:?dn=Example",
+    "Loose decoder should trim whitespace when decoding"
+  );
+});
+
+test("safeDecodeURIComponentLoose preserves whitespace when trim is false", () => {
+  const padded = "   magnet:?dn=Example";
+  assert.equal(
+    safeDecodeURIComponentLoose(padded, { trim: false }),
+    padded,
+    "Loose decoder should return the original string when trim is disabled and decoding is unnecessary"
+  );
+});
+
+test("safeDecodeURIComponent handles empty strings consistently", () => {
+  assert.equal(safeDecodeURIComponent(""), "", "Empty input should stay empty");
+  assert.equal(
+    safeDecodeURIComponentLoose(""),
+    "",
+    "Loose decoder should return empty for empty input"
+  );
+});

tests/view-counter.test.mjs

@@ -0,0 +1,708 @@
+// Run with: node tests/view-counter.test.mjs
+
+import "./test-helpers/setup-localstorage.mjs";
+import assert from "node:assert/strict";
+
+const {
+  WATCH_HISTORY_KIND,
+  VIEW_COUNT_DEDUPE_WINDOW_SECONDS,
+  VIEW_COUNT_BACKFILL_MAX_DAYS,
+  VIEW_COUNT_CACHE_TTL_MS,
+} = await import("../js/config.js");
+
+const { buildViewEvent, setNostrEventSchemaOverrides } = await import(
+  "../js/nostrEventSchemas.js"
+);
+
+const VIEW_COUNTER_STORAGE_KEY = "bitvid:view-counter:v1";
+const CACHE_TTL_TEST_POINTER = { type: "e", value: "view-counter-cache-ttl" };
+
+// Seed a stale cache entry so we can verify hydration ignores data older than the TTL.
+const staleSavedAt = Date.now() - (VIEW_COUNT_CACHE_TTL_MS + 60_000);
+localStorage.clear();
+localStorage.setItem(
+  VIEW_COUNTER_STORAGE_KEY,
+  JSON.stringify({
+    version: 1,
+    savedAt: staleSavedAt,
+    entries: [
+      [
+        `${CACHE_TTL_TEST_POINTER.type}:${CACHE_TTL_TEST_POINTER.value}`,
+        {
+          total: 42,
+          dedupeBuckets: [["pub-cache-ttl:bucket", staleSavedAt]],
+          lastSyncedAt: staleSavedAt - 5_000,
+          status: "live",
+        },
+      ],
+    ],
+  })
+);
+
+if (typeof globalThis.window === "undefined") {
+  globalThis.window = {};
+}
+
+if (!globalThis.window.NostrTools) {
+  globalThis.window.NostrTools = {};
+}
+
+setNostrEventSchemaOverrides({});
+
+const canonicalViewEvent = buildViewEvent({
+  pubkey: "actor-canonical",
+  created_at: 1000,
+  pointerValue: CACHE_TTL_TEST_POINTER.value,
+  pointerTag: [CACHE_TTL_TEST_POINTER.type, CACHE_TTL_TEST_POINTER.value],
+  dedupeTag: "ignore-dedupe",
+});
+
+assert.deepEqual(
+  canonicalViewEvent.tags,
+  [
+    ["t", "view"],
+    [CACHE_TTL_TEST_POINTER.type, CACHE_TTL_TEST_POINTER.value],
+    ["d", "ignore-dedupe"],
+  ],
+  "view event should include topic, pointer, and dedupe tags when provided"
+);
+
+const sessionViewEvent = buildViewEvent({
+  pubkey: "actor-session",
+  created_at: 2000,
+  pointerValue: "kind:1234:actor-session",
+  pointerTag: ["a", "kind:1234:actor-session"],
+  includeSessionTag: true,
+});
+
+assert.deepEqual(
+  sessionViewEvent.tags,
+  [
+    ["t", "view"],
+    ["a", "kind:1234:actor-session"],
+    ["session", "true"],
+  ],
+  "view event should append the session tag when requested"
+);
+
+const { nostrClient } = await import("../js/nostr.js");
+
+function createMockNostrHarness() {
+  const storedEvents = new Map();
+  const customCountResults = new Map();
+  const subscribers = new Map();
+  const metrics = { list: 0, count: 0 };
+
+  const resetMetrics = () => {
+    metrics.list = 0;
+    metrics.count = 0;
+  };
+
+  const pointerKeyFromInput = (input) => {
+    if (!input) {
+      return "";
+    }
+    if (typeof input === "string") {
+      const trimmed = input.trim();
+      if (!trimmed) {
+        return "";
+      }
+      if (trimmed.includes(":")) {
+        return trimmed;
+      }
+      return `e:${trimmed}`;
+    }
+    if (Array.isArray(input)) {
+      if (input.length < 2) {
+        return "";
+      }
+      const type = input[0] === "a" ? "a" : "e";
+      const value = typeof input[1] === "string" ? input[1].trim() : "";
+      if (!value) {
+        return "";
+      }
+      return `${type}:${value}`;
+    }
+    if (typeof input === "object") {
+      const type = input.type === "a" ? "a" : "e";
+      const value = typeof input.value === "string" ? input.value.trim() : "";
+      if (!value) {
+        return "";
+      }
+      return `${type}:${value}`;
+    }
+    return "";
+  };
+
+  const listVideoViewEvents = async (pointer, options = {}) => {
+    metrics.list += 1;
+    const key = pointerKeyFromInput(pointer);
+    const events = storedEvents.get(key) || [];
+    const since = Number.isFinite(options?.since) ? Number(options.since) : null;
+    if (since === null) {
+      return events;
+    }
+    return events.filter((event) => {
+      const createdAt = Number.isFinite(event?.created_at) ? Number(event.created_at) : 0;
+      return createdAt >= since;
+    });
+  };
+
+  const countVideoViewEvents = async (pointer) => {
+    metrics.count += 1;
+    const key = pointerKeyFromInput(pointer);
+    if (customCountResults.has(key)) {
+      const stored = customCountResults.get(key);
+      if (stored && typeof stored === "object" && !Array.isArray(stored)) {
+        const totalValue = Number(stored.total);
+        const normalizedTotal =
+          Number.isFinite(totalValue) && totalValue >= 0 ? totalValue : 0;
+        const perRelay = Array.isArray(stored.perRelay)
+          ? stored.perRelay.map((entry) =>
+              entry && typeof entry === "object" ? { ...entry } : entry
+            )
+          : [];
+        const result = {
+          total: normalizedTotal,
+          perRelay,
+          best:
+            stored.best && typeof stored.best === "object"
+              ? { ...stored.best }
+              : null,
+        };
+        if (stored.fallback) {
+          result.fallback = true;
+        }
+        return result;
+      }
+      const numericTotal = Number(stored);
+      const normalizedTotal =
+        Number.isFinite(numericTotal) && numericTotal >= 0 ? numericTotal : 0;
+      return { total: normalizedTotal, perRelay: [], best: null };
+    }
+    const events = storedEvents.get(key) || [];
+    return { total: events.length, perRelay: [], best: null };
+  };
+
+  const subscribeVideoViewEvents = (pointer, options = {}) => {
+    const key = pointerKeyFromInput(pointer);
+    let handlers = subscribers.get(key);
+    if (!handlers) {
+      handlers = new Set();
+      subscribers.set(key, handlers);
+    }
+    const handler = typeof options?.onEvent === "function" ? options.onEvent : null;
+    if (handler) {
+      handlers.add(handler);
+    }
+    return () => {
+      if (handler && handlers) {
+        handlers.delete(handler);
+        if (!handlers.size) {
+          subscribers.delete(key);
+        }
+      }
+    };
+  };
+
+  const emit = (pointer, event) => {
+    const key = pointerKeyFromInput(pointer);
+    const handlers = subscribers.get(key);
+    if (!handlers) {
+      return;
+    }
+    for (const handler of Array.from(handlers)) {
+      handler(event);
+    }
+  };
+
+  const setEvents = (key, events) => {
+    storedEvents.set(key, Array.isArray(events) ? events : []);
+  };
+
+  const setCountTotal = (key, total) => {
+    if (
+      typeof total === "object" &&
+      total !== null &&
+      !Array.isArray(total)
+    ) {
+      customCountResults.set(key, JSON.parse(JSON.stringify(total)));
+    } else if (Number.isFinite(total)) {
+      customCountResults.set(key, Number(total));
+    } else {
+      customCountResults.delete(key);
+    }
+  };
+
+  const reset = () => {
+    storedEvents.clear();
+    customCountResults.clear();
+    subscribers.clear();
+    resetMetrics();
+  };
+
+  const subscriptionCount = (key) => {
+    const handlers = subscribers.get(key);
+    return handlers ? handlers.size : 0;
+  };
+
+  const getCallCounts = () => ({ list: metrics.list, count: metrics.count });
+
+  return {
+    listVideoViewEvents,
+    countVideoViewEvents,
+    subscribeVideoViewEvents,
+    emit,
+    setEvents,
+    setCountTotal,
+    reset,
+    pointerKeyFromInput,
+    subscriptionCount,
+    resetMetrics,
+    getCallCounts,
+  };
+}
+
+const harness = createMockNostrHarness();
+
+nostrClient.listVideoViewEvents = harness.listVideoViewEvents;
+nostrClient.countVideoViewEvents = harness.countVideoViewEvents;
+nostrClient.subscribeVideoViewEvents = harness.subscribeVideoViewEvents;
+
+const {
+  initViewCounter,
+  subscribeToVideoViewCount,
+  unsubscribeFromVideoViewCount,
+  ingestLocalViewEvent,
+} = await import("../js/viewCounter.js");
+
+initViewCounter({ nostrClient });
+
+const flushPromises = () => new Promise((resolve) => setTimeout(resolve, 0));
+
+async function testDedupesWithinWindow() {
+  localStorage.clear();
+  harness.reset();
+  harness.resetMetrics();
+
+  const pointer = { type: "e", value: "view-counter-dedupe" };
+  const pointerKey = harness.pointerKeyFromInput(pointer);
+  const base = Math.floor(Date.now() / 1000);
+  const events = [
+    { id: "evt-1", pubkey: "pub-dedupe", created_at: base },
+    {
+      id: "evt-2",
+      pubkey: "pub-dedupe",
+      created_at: base + Math.floor(VIEW_COUNT_DEDUPE_WINDOW_SECONDS / 2),
+    },
+  ];
+  harness.setEvents(pointerKey, events);
+  harness.setCountTotal(pointerKey, 1);
+
+  const updates = [];
+  const token = subscribeToVideoViewCount(pointer, (state) => {
+    updates.push({ ...state });
+  });
+  try {
+    await flushPromises();
+    await flushPromises();
+    const final = updates.at(-1);
+    assert.ok(final, "expected at least one state update");
+    assert.equal(
+      final.total,
+      1,
+      "multiple events from the same pubkey within the dedupe window should count once"
+    );
+  } finally {
+    unsubscribeFromVideoViewCount(pointer, token);
+  }
+}
+
+async function testHydrationSkipsStaleEventsAndRollsOff() {
+  localStorage.clear();
+  harness.reset();
+  harness.resetMetrics();
+
+  const pointer = { type: "a", value: `${WATCH_HISTORY_KIND}:pk:test-hydrate` };
+  const pointerKey = harness.pointerKeyFromInput(pointer);
+  const nowSeconds = Math.floor(Date.now() / 1000);
+  const horizonSeconds = VIEW_COUNT_BACKFILL_MAX_DAYS * 86_400;
+
+  const staleEvent = {
+    id: "evt-stale",
+    pubkey: "pub-hydrate",
+    created_at: nowSeconds - horizonSeconds - 60,
+  };
+  const rolledOffEvent = {
+    id: "evt-rolled-off",
+    pubkey: "pub-hydrate",
+    created_at: nowSeconds - VIEW_COUNT_DEDUPE_WINDOW_SECONDS - 10,
+  };
+  const recentEvent = {
+    id: "evt-recent",
+    pubkey: "pub-hydrate",
+    created_at: nowSeconds - 5,
+  };
+
+  harness.setEvents(pointerKey, [staleEvent, rolledOffEvent, recentEvent]);
+  harness.setCountTotal(pointerKey, 2);
+
+  const updates = [];
+  let token = subscribeToVideoViewCount(pointer, (state) => {
+    updates.push({ ...state });
+  });
+
+  try {
+    await flushPromises();
+    await flushPromises();
+    const final = updates.at(-1);
+    assert.ok(final, "expected hydration state update");
+    assert.equal(
+      final.total,
+      2,
+      "hydration should ignore events beyond the backfill window and keep unique buckets"
+    );
+  } finally {
+    unsubscribeFromVideoViewCount(pointer, token);
+  }
+
+  const futureEvent = {
+    id: "evt-future",
+    pubkey: "pub-hydrate",
+    created_at: nowSeconds + VIEW_COUNT_DEDUPE_WINDOW_SECONDS + 5,
+  };
+
+  harness.setEvents(pointerKey, [rolledOffEvent, recentEvent, futureEvent]);
+  harness.setCountTotal(pointerKey, 3);
+
+  const secondUpdates = [];
+  token = subscribeToVideoViewCount(pointer, (state) => {
+    secondUpdates.push({ ...state });
+  });
+  try {
+    await flushPromises();
+    await flushPromises();
+    const final = secondUpdates.at(-1);
+    assert.ok(final, "expected updated hydration state");
+    assert.equal(
+      final.total,
+      3,
+      "events outside the dedupe window should contribute when hydrating fresh data"
+    );
+  } finally {
+    unsubscribeFromVideoViewCount(pointer, token);
+  }
+}
+
+async function testRelayCountAggregationUsesBestEstimate() {
+  localStorage.clear();
+  harness.reset();
+  harness.resetMetrics();
+
+  const pointer = { type: "e", value: "view-counter-multi-relay" };
+  const pointerKey = harness.pointerKeyFromInput(pointer);
+
+  harness.setEvents(pointerKey, []);
+  harness.setCountTotal(pointerKey, {
+    total: 5,
+    best: { relay: "wss://relay.alpha", count: 5 },
+    perRelay: [
+      { url: "wss://relay.alpha", ok: true, count: 5 },
+      { url: "wss://relay.beta", ok: true, count: 5 },
+    ],
+  });
+
+  const updates = [];
+  const token = subscribeToVideoViewCount(pointer, (state) => {
+    updates.push({ ...state });
+  });
+
+  try {
+    await flushPromises();
+    await flushPromises();
+
+    const final = updates.at(-1);
+    assert.ok(final, "expected hydration update for aggregated relay counts");
+    assert.equal(
+      final.total,
+      5,
+      "identical relay COUNT responses should not be double-counted"
+    );
+  } finally {
+    unsubscribeFromVideoViewCount(pointer, token);
+  }
+}
+
+async function testLocalIngestNotifiesImmediately() {
+  localStorage.clear();
+  harness.reset();
+  harness.resetMetrics();
+
+  const pointer = { type: "e", value: "view-counter-local" };
+  const pointerKey = harness.pointerKeyFromInput(pointer);
+  harness.setEvents(pointerKey, []);
+  harness.setCountTotal(pointerKey, 0);
+
+  const updates = [];
+  const token = subscribeToVideoViewCount(pointer, (state) => {
+    updates.push({ ...state });
+  });
+
+  try {
+    await flushPromises();
+    const initial = updates.at(-1);
+    assert.ok(initial, "expected initial state update");
+    assert.equal(initial.total, 0, "initial total should start at zero");
+
+    const localEvent = {
+      id: "evt-local",
+      pubkey: "pub-local",
+      created_at: Math.floor(Date.now() / 1000),
+    };
+
+    ingestLocalViewEvent({ pointer, event: localEvent });
+
+    const latest = updates.at(-1);
+    assert.equal(
+      latest.total,
+      1,
+      "local ingestion should immediately notify subscribers with incremented total"
+    );
+  } finally {
+    unsubscribeFromVideoViewCount(pointer, token);
+  }
+}
+
+async function testUnsubscribeStopsCallbacks() {
+  localStorage.clear();
+  harness.reset();
+  harness.resetMetrics();
+
+  const pointer = { type: "e", value: "view-counter-unsubscribe" };
+  const pointerKey = harness.pointerKeyFromInput(pointer);
+  harness.setEvents(pointerKey, []);
+  harness.setCountTotal(pointerKey, 0);
+
+  const updates = [];
+  const token = subscribeToVideoViewCount(pointer, (state) => {
+    updates.push({ ...state });
+  });
+
+  await flushPromises();
+  const updatesBeforeUnsubscribe = updates.length;
+
+  unsubscribeFromVideoViewCount(pointer, token);
+  assert.equal(
+    harness.subscriptionCount(pointerKey),
+    0,
+    "tearing down the final handler should close the live subscription"
+  );
+
+  harness.emit(pointerKey, {
+    id: "evt-ignored",
+    pubkey: "pub-unsubscribe",
+    created_at: Math.floor(Date.now() / 1000),
+  });
+
+  assert.equal(
+    updates.length,
+    updatesBeforeUnsubscribe,
+    "no handlers should fire once the final subscriber has been removed"
+  );
+}
+
+async function testRecordVideoViewEmitsJsonPayload() {
+  localStorage.clear();
+  harness.reset();
+  harness.resetMetrics();
+
+  const pointer = {
+    type: "a",
+    value: `${WATCH_HISTORY_KIND}:pub:view-json`,
+    relay: "wss://relay.example",
+  };
+  const createdAt = Math.floor(Date.now() / 1000);
+
+  const originalPool = nostrClient.pool;
+  const originalRelays = Array.isArray(nostrClient.relays)
+    ? [...nostrClient.relays]
+    : nostrClient.relays;
+  const originalEnsureSessionActor = nostrClient.ensureSessionActor;
+  const originalSessionActor = nostrClient.sessionActor;
+  const originalPubkey = nostrClient.pubkey;
+  const originalWarn = console.warn;
+  const originalNostrTools = window.NostrTools;
+
+  const warnings = [];
+  console.warn = (...args) => {
+    warnings.push(
+      args
+        .map((value) => {
+          if (typeof value === "string") {
+            return value;
+          }
+          try {
+            return JSON.stringify(value);
+          } catch (error) {
+            return String(value);
+          }
+        })
+        .join(" ")
+    );
+  };
+
+  window.NostrTools = {
+    ...window.NostrTools,
+    getEventHash: () => "event-hash-record", // deterministic stub for tests
+    signEvent: () => "event-sig-record",
+  };
+
+  const publishCalls = [];
+  nostrClient.pool = {
+    publish(relayUrls, event) {
+      publishCalls.push({ relays: relayUrls, event });
+      return {
+        on(type, handler) {
+          if (type === "ok") {
+            setTimeout(() => handler(), 0);
+          }
+          return this;
+        },
+      };
+    },
+  };
+  nostrClient.relays = ["wss://relay.example"];
+  nostrClient.ensureSessionActor = async () => {
+    nostrClient.sessionActor = {
+      pubkey: "pub-record-json",
+      privateKey: "priv-record-json",
+    };
+    return "pub-record-json";
+  };
+  nostrClient.pubkey = "";
+
+
+  try {
+    const result = await nostrClient.recordVideoView(pointer, {
+      created_at: createdAt,
+    });
+
+    assert.ok(result.ok, "recordVideoView should succeed with stubbed handlers");
+    assert.equal(
+      publishCalls.length,
+      1,
+      "publishViewEvent should be invoked once per recordVideoView call"
+    );
+
+    const emittedEvent = publishCalls[0]?.event || null;
+    assert.ok(emittedEvent, "publishViewEvent should enqueue an event for relays");
+    assert.equal(
+      typeof emittedEvent.content,
+      "string",
+      "recordVideoView should provide serialized view content"
+    );
+
+    const payload = JSON.parse(emittedEvent.content);
+    assert.deepEqual(
+      payload,
+      {
+        target: {
+          type: pointer.type,
+          value: pointer.value,
+          relay: pointer.relay,
+        },
+        created_at: createdAt,
+      },
+      "default view content should capture pointer metadata and timestamp"
+    );
+
+    assert.equal(
+      result.event.content,
+      emittedEvent.content,
+      "serialized payload should persist on the emitted event"
+    );
+  } finally {
+    nostrClient.pool = originalPool;
+    nostrClient.relays = originalRelays;
+    nostrClient.ensureSessionActor = originalEnsureSessionActor;
+    nostrClient.sessionActor = originalSessionActor;
+    nostrClient.pubkey = originalPubkey;
+    console.warn = originalWarn;
+    window.NostrTools = originalNostrTools;
+  }
+
+  const viewCounterWarnings = warnings.filter((message) =>
+    message.includes("[viewCounter] Failed to ingest local view event")
+  );
+  assert.equal(
+    viewCounterWarnings.length,
+    0,
+    "viewCounter.ingestLocalViewEvent should not reject JSON view payloads"
+  );
+}
+
+// Cached totals older than VIEW_COUNT_CACHE_TTL_MS should be discarded and rehydrated from relays.
+async function testHydrationRefreshesAfterCacheTtl() {
+  harness.reset();
+  harness.resetMetrics();
+
+  assert.equal(
+    localStorage.getItem(VIEW_COUNTER_STORAGE_KEY),
+    null,
+    "stale cache snapshot should be cleared when it exceeds the TTL"
+  );
+
+  const pointer = CACHE_TTL_TEST_POINTER;
+  const pointerKey = harness.pointerKeyFromInput(pointer);
+  const nowSeconds = Math.floor(Date.now() / 1000);
+  const events = [
+    { id: "evt-ttl-1", pubkey: "pub-cache-ttl-1", created_at: nowSeconds - 15 },
+    { id: "evt-ttl-2", pubkey: "pub-cache-ttl-2", created_at: nowSeconds - 5 },
+  ];
+  harness.setEvents(pointerKey, events);
+  harness.setCountTotal(pointerKey, events.length);
+
+  const updates = [];
+  const token = subscribeToVideoViewCount(pointer, (state) => {
+    updates.push({ ...state });
+  });
+
+  try {
+    await flushPromises();
+    await flushPromises();
+
+    const initial = updates.at(0);
+    assert.ok(initial, "expected initial state update for cache TTL test");
+    assert.equal(
+      initial.total,
+      0,
+      "expired cache entries should not hydrate subscribers with stale totals"
+    );
+
+    const { list: listCalls, count: countCalls } = harness.getCallCounts();
+    assert.ok(
+      listCalls > 0 || countCalls > 0,
+      "hydration should fetch fresh data from relays once the cache TTL elapses"
+    );
+
+    const final = updates.at(-1);
+    assert.ok(final, "expected final state update for cache TTL test");
+    assert.equal(
+      final.total,
+      events.length,
+      "totals should reflect fresh relay data after invalidating the expired cache"
+    );
+  } finally {
+    unsubscribeFromVideoViewCount(pointer, token);
+  }
+}
+
+await testHydrationRefreshesAfterCacheTtl();
+await testDedupesWithinWindow();
+await testHydrationSkipsStaleEventsAndRollsOff();
+await testLocalIngestNotifiesImmediately();
+await testUnsubscribeStopsCallbacks();
+await testRelayCountAggregationUsesBestEstimate();
+await testRecordVideoViewEmitsJsonPayload();
+
+console.log("View counter tests completed successfully.");

torrent/beacon.html

@@ -44,11 +44,13 @@
     <header class="header-torrent">
       <div class="container">
         <div class="logo-container">
-          <img
-            src="../assets/svg/bitvid-logo-light-mode.svg"
-            alt="bitvid Logo"
-            class="bitvid-logo"
-          />
+          <a href="../index.html" aria-label="Return to the bitvid home page">
+            <img
+              src="../assets/svg/bitvid-logo-light-mode.svg"
+              alt="bitvid Logo"
+              class="bitvid-logo"
+            />
+          </a>
         </div>
       </div>
     </header>

views/channel-profile.html

@@ -1,29 +1,111 @@
 <section class="channel-profile-container">
   <!-- Modified banner wrapper for taller, rounded style -->
-  <div
-    class="profile-banner relative mb-6 rounded-lg overflow-hidden shadow-lg"
-  >
+  <div class="profile-banner relative mb-6 rounded-lg shadow-lg">
     <!-- Increase the default height classes -->
     <img
       id="channelBanner"
-      class="w-full h-48 md:h-64 object-cover"
+      class="w-full h-48 md:h-64 object-cover rounded-lg"
       src=""
       alt="Banner"
     />
-    <div class="absolute inset-0 bg-black bg-opacity-50"></div>
+    <div class="absolute inset-0 bg-black bg-opacity-50 rounded-lg"></div>
 
-    <div class="absolute bottom-4 left-4 flex items-center">
-      <div class="w-16 h-16 rounded-full overflow-hidden border-2 border-white">
-        <img
-          id="channelAvatar"
-          src="assets/svg/default-profile.svg"
-          alt="Avatar"
-          class="w-full h-full object-cover"
-        />
+    <div
+      class="absolute bottom-4 left-4 right-4 flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-between"
+    >
+      <div class="flex items-center">
+        <div class="w-16 h-16 rounded-full overflow-hidden border-2 border-white">
+          <img
+            id="channelAvatar"
+            src="assets/svg/default-profile.svg"
+            alt="Avatar"
+            class="w-full h-full object-cover"
+          />
+        </div>
+        <div class="ml-4 text-white">
+          <h2 id="channelName" class="text-xl font-bold">User Name</h2>
+          <p id="channelNpub" class="text-sm opacity-80">npub...</p>
+        </div>
       </div>
-      <div class="ml-4 text-white">
-        <h2 id="channelName" class="text-xl font-bold">User Name</h2>
-        <p id="channelNpub" class="text-sm opacity-80">npub...</p>
+      <div class="flex items-center gap-2 self-start sm:self-end">
+        <button
+          id="zapButton"
+          type="button"
+          class="icon-button"
+          aria-label="Send a zap"
+        >
+          <img
+            src="assets/svg/lightning-bolt.svg"
+            alt="Zap"
+            class="icon-image"
+          />
+        </button>
+        <button
+          id="channelShareBtn"
+          type="button"
+          class="icon-button"
+          aria-label="Share channel"
+        >
+          <img
+            src="assets/svg/share-video.svg"
+            alt="Share channel"
+            class="icon-image"
+          />
+        </button>
+        <div
+          class="relative inline-block overflow-visible"
+          data-more-menu-wrapper="true"
+        >
+          <button
+            id="channelMoreBtn"
+            type="button"
+            class="icon-button"
+            aria-haspopup="true"
+            aria-expanded="false"
+            aria-label="Channel options"
+            data-more-dropdown="channel-profile"
+          >
+            <img src="assets/svg/ellipsis.svg" alt="More" class="w-5 h-5" />
+          </button>
+          <div
+            id="moreDropdown-channel-profile"
+            class="hidden absolute right-0 top-12 w-48 rounded-md shadow-lg bg-gray-800 ring-1 ring-black ring-opacity-5 z-50"
+            role="menu"
+            data-more-menu="true"
+          >
+            <div class="py-1">
+              <button
+                class="block w-full text-left px-4 py-2 text-sm text-gray-100 hover:bg-gray-700"
+                data-action="copy-npub"
+                data-context="channel-profile"
+              >
+                Copy npub
+              </button>
+              <button
+                class="block w-full text-left px-4 py-2 text-sm text-red-400 hover:bg-red-700 hover:text-white"
+                data-action="blacklist-author"
+                data-context="channel-profile"
+                data-blacklist-menu="true"
+              >
+                Blacklist channel
+              </button>
+              <button
+                class="block w-full text-left px-4 py-2 text-sm text-red-400 hover:bg-red-700 hover:text-white"
+                data-action="block-author"
+                data-context="channel-profile"
+              >
+                Block channel
+              </button>
+              <button
+                class="block w-full text-left px-4 py-2 text-sm text-gray-100 hover:bg-gray-700"
+                data-action="report"
+                data-context="channel-profile"
+              >
+                Report
+              </button>
+            </div>
+          </div>
+        </div>
       </div>
     </div>
   </div>
@@ -43,21 +125,7 @@
 
   <!-- Area for Subscribe/Unsubscribe button -->
   <div class="px-4 my-4">
-    <div class="flex items-center gap-3">
-      <button
-        id="zapButton"
-        type="button"
-        class="icon-button"
-        aria-label="Send a zap"
-      >
-        <img
-          src="assets/svg/lightning-bolt.svg"
-          alt="Zap"
-          class="icon-image"
-        />
-      </button>
-      <div id="subscribeBtnArea" class="hidden"></div>
-    </div>
+    <div id="subscribeBtnArea" class="hidden"></div>
   </div>
 
   <hr class="my-6" />

views/history.html

@@ -0,0 +1,107 @@
+<!-- views/history.html -->
+<section id="watchHistoryView" class="space-y-6">
+  <div class="space-y-4">
+    <div
+      class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between"
+    >
+      <div>
+        <h2 class="text-xl font-semibold text-gray-100">Watch History</h2>
+        <p class="text-sm text-gray-400">
+          Review the videos you recently played, grouped by day.
+        </p>
+      </div>
+      <div class="flex flex-wrap gap-2" id="watchHistoryActions">
+        <button
+          type="button"
+          data-history-action="clear-cache"
+          class="rounded-full bg-gray-800 px-4 py-2 text-sm font-medium text-gray-100 hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500"
+        >
+          Clear local cache
+        </button>
+        <button
+          type="button"
+          data-history-action="republish"
+          class="rounded-full bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-300"
+        >
+          Republish now
+        </button>
+      </div>
+    </div>
+
+    <div
+      id="watchHistoryPrivacyBanner"
+      class="hidden rounded-lg border border-blue-500/40 bg-blue-900/30 p-4"
+      role="status"
+      aria-live="polite"
+    >
+      <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+        <p id="watchHistoryPrivacyMessage" class="text-sm text-blue-100">
+          Your history stays encrypted. Share metadata with relays to sync
+          thumbnails across devices?
+        </p>
+        <div class="flex flex-wrap gap-2">
+          <button
+            id="watchHistoryPrivacyToggle"
+            type="button"
+            class="rounded-full bg-blue-500 px-4 py-2 text-sm font-medium text-white hover:bg-blue-400 focus:outline-none focus:ring-2 focus:ring-blue-200"
+          >
+            Share metadata
+          </button>
+          <button
+            id="watchHistoryPrivacyDismiss"
+            type="button"
+            class="rounded-full bg-transparent px-3 py-2 text-sm font-medium text-blue-200 hover:bg-blue-800/40 focus:outline-none focus:ring-2 focus:ring-blue-300"
+          >
+            Dismiss
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <div
+      id="watchHistoryInfo"
+      class="rounded-lg bg-gray-800/60 p-4 text-sm text-gray-200"
+    >
+      Thumbnails and titles are hydrated locally from your device caches.
+    </div>
+
+    <div
+      id="watchHistoryError"
+      class="hidden rounded-lg border border-red-500/50 bg-red-900/40 p-3 text-sm text-red-100"
+      role="alert"
+    ></div>
+  </div>
+
+  <div id="watchHistoryLoading">
+    <div id="watchHistoryStatus">
+      <div class="sidebar-loading-wrapper" role="status" aria-live="polite">
+        <div class="sidebar-loading-indicator">
+          <span
+            class="status-spinner status-spinner--inline"
+            aria-hidden="true"
+          ></span>
+          <span class="sidebar-loading-text"
+            >Fetching watch history from relays…</span
+          >
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div id="watchHistoryGrid" class="watch-history-grid hidden"></div>
+  <p id="watchHistoryEmpty" class="hidden text-gray-400 text-center py-12">
+    Your watch history is empty. Watch some videos to populate this list.
+  </p>
+
+  <button
+    id="watchHistoryLoadMore"
+    type="button"
+    class="hidden w-full rounded-full bg-gray-800 px-4 py-2 text-sm font-medium text-gray-100 hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500"
+  >
+    Load more
+  </button>
+
+  <div id="watchHistorySentinel" class="hidden h-1 w-full"></div>
+
+  <script type="module" src="js/historyView.js"></script>
+</section>

views/most-recent-videos.html

@@ -8,6 +8,11 @@
     id="videoList"
     class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-8"
   >
-    <!-- Videos will be dynamically inserted here -->
+    <div class="sidebar-loading-wrapper" role="status" aria-live="polite">
+      <div class="sidebar-loading-indicator">
+        <span class="status-spinner status-spinner--inline" aria-hidden="true"></span>
+        <span class="sidebar-loading-text">Fetching recent videos…</span>
+      </div>
+    </div>
   </div>
 </section>

views/subscriptions.html

@@ -9,5 +9,12 @@
       gap: 2rem;
       padding: 1.5rem 0;
     "
-  ></div>
+  >
+    <div class="sidebar-loading-wrapper" role="status" aria-live="polite">
+      <div class="sidebar-loading-indicator">
+        <span class="status-spinner status-spinner--inline" aria-hidden="true"></span>
+        <span class="sidebar-loading-text">Fetching subscriptions…</span>
+      </div>
+    </div>
+  </div>
 </section>