From ba00ae486d0684741c8e4de8fe117c4498f1da7c Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Tue, 19 May 2026 01:48:47 +0000
Subject: [PATCH 1/2] feat: improve search UX and fix build stability

- Add title attribute to search clear button for better discoverability
- Refactor search empty state Clear Search button to use delegated event handling
- Use consistent btn btn-secondary classes for search empty state button
- Fix PARSE_ERROR in build by avoiding template literals in RegExp constructor

Co-authored-by: ruhdevops <203426218+ruhdevops@users.noreply.github.com>
---
 index.html |  2 +-
 js/app.js  | 13 +++++++++++--
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/index.html b/index.html
index a2630d4..1b69ad8 100644
--- a/index.html
+++ b/index.html
@@ -168,7 +168,7 @@ <h2 class="hero-title" id="hero-title">Exploring Islamic History</h2>
               autocomplete="off"
             >
             <kbd class="search-kbd-hint">/</kbd>
-            <button id="clearSearch" class="search-clear" aria-label="Clear search" style="display: none;">
+            <button id="clearSearch" class="search-clear" aria-label="Clear search" title="Clear search" style="display: none;">
               <i class="fas fa-times"></i>
             </button>
             <div id="searchDropdown" class="search-dropdown"></div>
diff --git a/js/app.js b/js/app.js
index 4a958d5..c3bf04e 100644
--- a/js/app.js
+++ b/js/app.js
@@ -205,7 +205,7 @@ const Utils = {
 
     highlight(text, search) {
         if (!search) return text;
-        const regex = new RegExp(`(${this.escapeRegex(search)})`, 'gi');
+        const regex = new RegExp('(' + this.escapeRegex(search) + ')', 'gi');
         return text.replace(regex, '<mark>$1</mark>');
     },
 
@@ -450,7 +450,7 @@ function renderCard(video, index = 0) {
                     <i class="fa-solid fa-magnifying-glass"></i>
                     <h3>No results found</h3>
                     <p>Try different keywords or browse by category to find what you're looking for.</p>
-                    <button type="button" class="secondary-button" style="margin-top: 20px;" onclick="document.getElementById('searchInput').value=''; document.getElementById('searchInput').dispatchEvent(new Event('input'));">
+                    <button type="button" id="clearSearchEmpty" class="btn btn-secondary" style="margin-top: 20px;">
                         Clear Search
                     </button>
                 </div>
@@ -1025,6 +1025,15 @@ function bindEvents() {
     // Grid click delegation
     if (DOM.grid) {
         DOM.grid.addEventListener('click', (e) => {
+            const clearBtn = e.target.closest('#clearSearchEmpty');
+            if (clearBtn) {
+                if (DOM.search) {
+                    DOM.search.value = '';
+                    DOM.search.dispatchEvent(new Event('input'));
+                }
+                return;
+            }
+
             const wlBtn = e.target.closest('.watch-later-btn');
             if (wlBtn) {
                 e.stopPropagation();

From 1e769ee79e935351abfa976fc288b960587b46be Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Tue, 19 May 2026 02:04:55 +0000
Subject: [PATCH 2/2] feat: improve search UX and fix build stability

- Add title attribute to search clear button for better discoverability
- Refactor search empty state "Clear Search" button to use delegated event handling
- Fix [PARSE_ERROR] in build by avoiding template literals in RegExp constructor

Co-authored-by: ruhdevops <203426218+ruhdevops@users.noreply.github.com>
---
 js/app.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/js/app.js b/js/app.js
index c3bf04e..4510dc4 100644
--- a/js/app.js
+++ b/js/app.js
@@ -450,7 +450,7 @@ function renderCard(video, index = 0) {
                     <i class="fa-solid fa-magnifying-glass"></i>
                     <h3>No results found</h3>
                     <p>Try different keywords or browse by category to find what you're looking for.</p>
-                    <button type="button" id="clearSearchEmpty" class="btn btn-secondary" style="margin-top: 20px;">
+                    <button type="button" class="secondary-button clear-search-empty" style="margin-top: 20px;">
                         Clear Search
                     </button>
                 </div>
@@ -1025,7 +1025,7 @@ function bindEvents() {
     // Grid click delegation
     if (DOM.grid) {
         DOM.grid.addEventListener('click', (e) => {
-            const clearBtn = e.target.closest('#clearSearchEmpty');
+            const clearBtn = e.target.closest('.clear-search-empty');
             if (clearBtn) {
                 if (DOM.search) {
                     DOM.search.value = '';