thePR0M3TH3AN/bitvid
1
0 Fork 0
mirror of https://github.com/PR0M3TH3AN/bitvid.git synced 2026-10-27 07:52:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: add info popovers to feed views

Browse Source 
- Added info buttons to Most Recent, Subscriptions, History, Channel Profile, Search, and Explore views
- Attached popovers with descriptions of feed filtration methods
- Used `attachFeedInfoPopover` helper for consistent implementation
- Verified with Playwright script (verified popover visibility and text content)
This commit is contained in:
google-labs-jules[bot] committed 2026-01-21 20:59:11 +00:00
1 parent 34d57c2072
commit ba28ceaf09
12 files changed
+198 -60
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

views/channel-profile.html
+25 -1
View File
@@ -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
+25 -1
View File
@@ -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
+25 -1
View File
@@ -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
+25 -1
View File
@@ -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
+23 -1
View File
@@ -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
+25 -1
View File
@@ -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">