Merge pull request #1478 from PR0M3TH3AN/feat/feed-info-popovers-17616740575820035536

Add Info Popovers to Feed Views

js/channelProfile.js

@@ -64,6 +64,7 @@ import {
   openStaticModal
 } from "./ui/components/staticModalAccessibility.js";
 import { setModalState as setGlobalModalState } from "./state/appState.js";
+import { attachFeedInfoPopover } from "./ui/components/FeedInfoPopover.js";
 
 const getApp = () => getApplication();
 
@@ -3703,6 +3704,14 @@ export async function initChannelProfileView() {
     return;
   }
 
+  const infoTrigger = document.getElementById("channelInfoTrigger");
+  if (infoTrigger) {
+    attachFeedInfoPopover(
+      infoTrigger,
+      "Videos published by this creator."
+    );
+  }
+
   currentChannelHex = null;
   currentChannelNpub = null;
   currentChannelLightningAddress = "";

js/historyView.js

@@ -19,6 +19,7 @@ import {
 } from "./ui/moderationUiHelpers.js";
 import { buildModerationBadgeText } from "./ui/moderationCopy.js";
 import { formatShortNpub } from "./utils/formatters.js";
+import { attachFeedInfoPopover } from "./ui/components/FeedInfoPopover.js";
 
 export const WATCH_HISTORY_EMPTY_COPY =
   "Your watch history is empty. Watch some videos to populate this list.";
@@ -2475,6 +2476,13 @@ export function createWatchHistoryRenderer(config = {}) {
 export const watchHistoryRenderer = createWatchHistoryRenderer();
 
 export async function initHistoryView() {
+  const infoTrigger = document.getElementById("historyInfoTrigger");
+  if (infoTrigger) {
+    attachFeedInfoPopover(
+      infoTrigger,
+      "Chronological list of videos you have watched."
+    );
+  }
   await watchHistoryRenderer.init();
 }
 

js/searchView.js

@@ -7,6 +7,7 @@ import { escapeHTML } from "./utils/domUtils.js";
 import { formatShortNpub } from "./utils/formatters.js";
 import { sanitizeProfileMediaUrl } from "./utils/profileMedia.js";
 import { devLogger } from "./utils/logger.js";
+import { attachFeedInfoPopover } from "./ui/components/FeedInfoPopover.js";
 
 function getApp() {
   return getApplication();
@@ -109,6 +110,14 @@ export async function initSearchView() {
     titleEl.textContent = query ? `Search Results for "${query}"` : "Search Results";
   }
 
+  const infoTrigger = document.getElementById("searchInfoTrigger");
+  if (infoTrigger) {
+    attachFeedInfoPopover(
+      infoTrigger,
+      "Results matching your search query."
+    );
+  }
+
   const channelList = document.getElementById("searchChannelList");
   const videoList = document.getElementById("searchVideoList");
 

js/viewManager.js

@@ -6,6 +6,7 @@ import { getApplication } from "./applicationContext.js";
 import { ASSET_VERSION } from "../config/asset-version.js";
 import { applyDesignSystemAttributes } from "./designSystem.js";
 import { devLogger, userLogger } from "./utils/logger.js";
+import { attachFeedInfoPopover } from "./ui/components/FeedInfoPopover.js";
 
 const TRACKING_SCRIPT_PATTERN = /(?:^|\/)tracking\.js(?:$|\?)/;
 
@@ -92,6 +93,14 @@ export const viewInitRegistry = {
     if (refreshApp && typeof refreshApp.forceRefreshAllProfiles === "function") {
       refreshApp.forceRefreshAllProfiles();
     }
+
+    const infoTrigger = document.getElementById("recentInfoTrigger");
+    if (infoTrigger) {
+      attachFeedInfoPopover(
+        infoTrigger,
+        "Global chronological feed from all relays."
+      );
+    }
   },
   "for-you": () => {
     initForYouView();
@@ -110,6 +119,13 @@ export const viewInitRegistry = {
   },
   explore: () => {
     devLogger.log("Explore view loaded.");
+    const infoTrigger = document.getElementById("exploreInfoTrigger");
+    if (infoTrigger) {
+      attachFeedInfoPopover(
+        infoTrigger,
+        "Coming soon."
+      );
+    }
   },
   history: async () => {
     try {
@@ -130,6 +146,14 @@ export const viewInitRegistry = {
   subscriptions: async () => {
     devLogger.log("Subscriptions view loaded.");
 
+    const infoTrigger = document.getElementById("subscriptionsInfoTrigger");
+    if (infoTrigger) {
+      attachFeedInfoPopover(
+        infoTrigger,
+        "Latest videos from channels you follow."
+      );
+    }
+
     const app = getApplication();
     if (!app?.pubkey) {
       const container = document.getElementById("subscriptionsVideoList");

views/channel-profile.html

@@ -148,7 +148,31 @@
 
   <hr class="my-6" />
 
-  <h3 class="mb-4 text-lg font-bold text-text-strong">Videos by This User</h3>
+  <div class="flex items-center gap-2 mb-4">
+    <h3 class="text-lg font-bold text-text-strong">Videos by This User</h3>
+    <button
+      type="button"
+      id="channelInfoTrigger"
+      class="text-muted hover:text-text focus:outline-none transition-colors"
+      aria-label="How is this feed sorted?"
+    >
+      <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"
+        class="w-5 h-5"
+        aria-hidden="true"
+      >
+        <circle cx="12" cy="12" r="10"></circle>
+        <line x1="12" y1="16" x2="12" y2="12"></line>
+        <line x1="12" y1="8" x2="12.01" y2="8"></line>
+      </svg>
+    </button>
+  </div>
   <div id="channelVideoList" class="bv-grid-video">
     <!-- User’s videos will go here -->
   </div>

views/explore.html

@@ -1,5 +1,29 @@
 <!-- views/explore.html -->
 <section data-ds="new">
-  <h2 class="mb-4 text-xl font-semibold text-text">Explore</h2>
+  <div class="flex items-center gap-2 mb-4">
+    <h2 class="text-xl font-semibold text-text">Explore</h2>
+    <button
+      type="button"
+      id="exploreInfoTrigger"
+      class="text-muted hover:text-text focus:outline-none transition-colors"
+      aria-label="How is this feed sorted?"
+    >
+      <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"
+        class="w-5 h-5"
+        aria-hidden="true"
+      >
+        <circle cx="12" cy="12" r="10"></circle>
+        <line x1="12" y1="16" x2="12" y2="12"></line>
+        <line x1="12" y1="8" x2="12.01" y2="8"></line>
+      </svg>
+    </button>
+  </div>
   <p class="text-muted-strong">Coming Soon...</p>
 </section>

views/history.html

@@ -5,7 +5,31 @@
       class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between"
     >
       <div>
-        <h2 class="text-xl font-semibold text-text">Watch History</h2>
+        <div class="flex items-center gap-2">
+          <h2 class="text-xl font-semibold text-text">Watch History</h2>
+          <button
+            type="button"
+            id="historyInfoTrigger"
+            class="text-muted hover:text-text focus:outline-none transition-colors"
+            aria-label="How is this feed sorted?"
+          >
+            <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"
+              class="w-5 h-5"
+              aria-hidden="true"
+            >
+              <circle cx="12" cy="12" r="10"></circle>
+              <line x1="12" y1="16" x2="12" y2="12"></line>
+              <line x1="12" y1="8" x2="12.01" y2="8"></line>
+            </svg>
+          </button>
+        </div>
         <p class="text-sm text-muted">
           Review the videos you recently played, grouped by day.
         </p>

views/most-recent-videos.html

@@ -1,7 +1,31 @@
 <!-- views/most-recent-videos.html -->
 <section data-ds="new">
   <!-- You can have a heading if you want -->
-  <h2 class="mb-4 text-xl font-semibold text-text">Recently Added Videos</h2>
+  <div class="flex items-center gap-2 mb-4">
+    <h2 class="text-xl font-semibold text-text">Recently Added Videos</h2>
+    <button
+      type="button"
+      id="recentInfoTrigger"
+      class="text-muted hover:text-text focus:outline-none transition-colors"
+      aria-label="How is this feed sorted?"
+    >
+      <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"
+        class="w-5 h-5"
+        aria-hidden="true"
+      >
+        <circle cx="12" cy="12" r="10"></circle>
+        <line x1="12" y1="16" x2="12" y2="12"></line>
+        <line x1="12" y1="8" x2="12.01" y2="8"></line>
+      </svg>
+    </button>
+  </div>
 
   <!-- Video List -->
   <div id="recentVideoTags" class="mb-4" hidden></div>

views/search.html

@@ -1,11 +1,33 @@
 <div class="fade-in bv-stack">
-  <header class="mb-4">
+  <header class="flex items-center gap-2 mb-4">
     <h1
       id="searchTitle"
       class="text-2xl font-bold tracking-tight text-text-strong"
     >
       Search Results
     </h1>
+    <button
+      type="button"
+      id="searchInfoTrigger"
+      class="text-muted hover:text-text focus:outline-none transition-colors"
+      aria-label="How is this feed sorted?"
+    >
+      <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"
+        class="w-5 h-5"
+        aria-hidden="true"
+      >
+        <circle cx="12" cy="12" r="10"></circle>
+        <line x1="12" y1="16" x2="12" y2="12"></line>
+        <line x1="12" y1="8" x2="12.01" y2="8"></line>
+      </svg>
+    </button>
   </header>
 
   <section class="bv-stack">

views/subscriptions.html

@@ -1,6 +1,30 @@
 <!-- views/subscriptions.html -->
 <section data-ds="new">
-  <h2 class="mb-4 text-xl font-semibold text-text">Subscriptions</h2>
+  <div class="flex items-center gap-2 mb-4">
+    <h2 class="text-xl font-semibold text-text">Subscriptions</h2>
+    <button
+      type="button"
+      id="subscriptionsInfoTrigger"
+      class="text-muted hover:text-text focus:outline-none transition-colors"
+      aria-label="How is this feed sorted?"
+    >
+      <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"
+        class="w-5 h-5"
+        aria-hidden="true"
+      >
+        <circle cx="12" cy="12" r="10"></circle>
+        <line x1="12" y1="16" x2="12" y2="12"></line>
+        <line x1="12" y1="8" x2="12.01" y2="8"></line>
+      </svg>
+    </button>
+  </div>
   <div id="subscriptionsVideoList" class="bv-grid-video">
     <div class="sidebar-loading-wrapper" role="status" aria-live="polite">
       <div class="sidebar-loading-indicator">