From 685bbb1683ed7a7e960c01a4db6b41bdfd7f8c15 Mon Sep 17 00:00:00 2001
From: ubuntu <paul.maarek@vinci-construction.ca>
Date: Sun, 30 Aug 2026 23:43:15 +0000
Subject: [PATCH] Improve channel search UX: Enter-to-search, loading/empty
 states

The search box only worked via mouse click on the Search button (no
keypress handler), and a search returning zero matches or failing
silently left the previous results or an empty panel with no
feedback. Add Enter-key submission and show a spinner while
searching, "No channels found" on empty results, and an error
message on request failure. Also fixes a dead '#list_channels'
selector (the actual container is '#listChannels') that silently
did nothing.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 static/index.html | 24 ++++++++++++++++++++----
 1 file changed, 20 insertions(+), 4 deletions(-)

diff --git a/static/index.html b/static/index.html
index 2608ba1..3012276 100644
--- a/static/index.html
+++ b/static/index.html
@@ -1881,6 +1881,13 @@
         get_search_channel(1)
     })
 
+    $('#input_search').on('keypress', function(e){
+        if (e.which === 13) {
+            e.preventDefault();
+            get_search_channel(1);
+        }
+    })
+
     $('#btn_initdb').click(function(){
         $.get('init_db').done(function(data){
             window.location.href = "/"
@@ -2065,17 +2072,26 @@
     function get_search_channel(num_page) {
         var keyword = $('#input_search').val()
         if (keyword.length>0) {
+            $('#pagination-container').empty();
+            $('#listChannels').show().html('<div class="text-center text-muted py-4"><i class="fas fa-spinner fa-spin"></i> Searching...</div>');
             $.post('list_channel', {keyword:encodeURIComponent(keyword), num_page:num_page}).done(function(payload){
-                $('#list_channels').html('')
-                var html =''
                 num_total_page = payload.num_total_page
                 current_page = payload.current_page
                 result_search = payload.data
                 console.log(num_total_page, current_page)
-                renderPagination(num_total_page, current_page);
 
+                if (!result_search || result_search.length === 0) {
+                    $('#pagination-container').empty();
+                    $('#listChannels').html('<div class="text-center text-muted py-4">No channels found.</div>');
+                    return;
+                }
+
+                renderPagination(num_total_page, current_page);
                 displayResult()
-                lazyLoad(); 
+                lazyLoad();
+            }).fail(function(){
+                $('#pagination-container').empty();
+                $('#listChannels').html('<div class="text-center text-danger py-4">Search failed. Please try again.</div>');
             })
         }
     }