live stream support

frontend/js/ui.js

@@ -556,6 +556,9 @@ App.ui = App.ui || {};
         const searchInput = document.getElementById('search-input');
         const clearSearchBtn = document.getElementById('search-clear-btn');
         if (searchInput && clearSearchBtn) {
+            let searchDebounce = null;
+            const SEARCH_DEBOUNCE_MS = 300;
+
             const updateClearVisibility = () => {
                 const hasValue = searchInput.value.trim().length > 0;
                 clearSearchBtn.classList.toggle('is-visible', hasValue);
@@ -565,13 +568,24 @@ App.ui = App.ui || {};
             clearSearchBtn.addEventListener('click', (event) => {
                 event.preventDefault();
                 if (!searchInput.value) return;
+                if (searchDebounce) clearTimeout(searchDebounce);
                 searchInput.value = '';
                 updateClearVisibility();
                 App.videos.handleSearch('');
                 searchInput.focus();
             });
 
+            // Update the clear button immediately for snappy feedback, but
+            // debounce the actual reload so typing doesn't wipe the grid and
+            // fire a backend request on every keystroke.
             searchInput.addEventListener('input', updateClearVisibility);
+            searchInput.addEventListener('input', () => {
+                if (searchDebounce) clearTimeout(searchDebounce);
+                searchDebounce = setTimeout(() => {
+                    searchDebounce = null;
+                    App.videos.handleSearch(searchInput.value);
+                }, SEARCH_DEBOUNCE_MS);
+            });
             updateClearVisibility();
         }