From 7221ef0eaa7fde18580e3f0a55e493068626f29b Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
<161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Fri, 23 Jan 2026 02:20:13 +0000
Subject: [PATCH] Add hashtag helper bar to Explore tab and refactor ID
- Add `#videoListTags` container to `views/explore.html` to support the hashtag helper bar in the Explore view.
- Rename `#recentVideoTags` to `#videoListTags` in `views/most-recent-videos.html` for consistency across views.
- Update `js/ui/videoListViewController.js` and `js/app.js` to reference the new generic `#videoListTags` ID.
- Update `tests/ui/video-list-view-popular-tags.test.mjs` to reflect the ID change.
This enables the hashtag aggregation and interaction features (filtering, muting, following) on the Explore tab, reusing the existing `VideoListView` logic.
---
js/app.js | 4 ++--
js/ui/videoListViewController.js | 4 ++--
tests/ui/video-list-view-popular-tags.test.mjs | 4 ++--
views/explore.html | 1 +
views/most-recent-videos.html | 2 +-
5 files changed, 8 insertions(+), 7 deletions(-)
diff --git a/js/app.js b/js/app.js
index 8e946067..5c30bf6f 100644
--- a/js/app.js
+++ b/js/app.js
@@ -2821,7 +2821,7 @@ class Application {
let tagsRoot = null;
if (includeTags) {
- tagsRoot = document.getElementById("recentVideoTags");
+ tagsRoot = document.getElementById("videoListTags");
}
this.videoListPopularTags = tagsRoot || null;
if (typeof this.videoListView.setPopularTagsContainer === "function") {
@@ -2870,7 +2870,7 @@ class Application {
: "Refreshing videos…";
this.videoList = isElement(container) ? container : null;
- const tagsRoot = document.getElementById("recentVideoTags");
+ const tagsRoot = document.getElementById("videoListTags");
this.videoListPopularTags = isElement(tagsRoot) ? tagsRoot : null;
if (typeof this.videoListView.setPopularTagsContainer === "function") {
this.videoListView.setPopularTagsContainer(this.videoListPopularTags);
diff --git a/js/ui/videoListViewController.js b/js/ui/videoListViewController.js
index 63999d89..46ae2f44 100644
--- a/js/ui/videoListViewController.js
+++ b/js/ui/videoListViewController.js
@@ -33,7 +33,7 @@ export default class VideoListViewController {
if (this.isElement(popularTagsContainer)) {
popularTags = popularTagsContainer;
} else if (includeTags) {
- popularTags = this.getElementById("recentVideoTags");
+ popularTags = this.getElementById("videoListTags");
}
if (typeof view.setPopularTagsContainer === "function") {
@@ -87,7 +87,7 @@ export default class VideoListViewController {
if (this.isElement(popularTagsContainer)) {
tagsRoot = popularTagsContainer;
} else {
- tagsRoot = this.getElementById("recentVideoTags");
+ tagsRoot = this.getElementById("videoListTags");
}
if (typeof view.setPopularTagsContainer === "function") {
view.setPopularTagsContainer(this.isElement(tagsRoot) ? tagsRoot : null);
diff --git a/tests/ui/video-list-view-popular-tags.test.mjs b/tests/ui/video-list-view-popular-tags.test.mjs
index 2553f9ad..5d07834e 100644
--- a/tests/ui/video-list-view-popular-tags.test.mjs
+++ b/tests/ui/video-list-view-popular-tags.test.mjs
@@ -6,11 +6,11 @@ import { VideoListView } from "../../js/ui/views/VideoListView.js";
function createViewDom() {
const dom = new JSDOM(
- ""
+ ""
);
const { document } = dom.window;
const listRoot = document.getElementById("videoList");
- const tagsRoot = document.getElementById("recentVideoTags");
+ const tagsRoot = document.getElementById("videoListTags");
// Mock IntersectionObserver for VideoCard (both on window and global for module access)
const MockIntersectionObserver = class IntersectionObserver {
diff --git a/views/explore.html b/views/explore.html
index f357ed73..63cfe572 100644
--- a/views/explore.html
+++ b/views/explore.html
@@ -25,6 +25,7 @@
+