From 0bd1cab9e228f2b9dcd792bbe520b80bc62470bd Mon Sep 17 00:00:00 2001
From: Broque Thomas <batmanesignal@gmail.com>
Date: Mon, 29 Dec 2025 15:54:47 -0800
Subject: [PATCH] Improve enhanced search results toggle UX

Updated the enhanced search button to toggle showing/hiding previous results, with dynamic icon and text changes. Prevented duplicate event listeners by ensuring single initialization. Improved dropdown visibility logic and user feedback when no results are available.
---
 webui/index.html       |  4 +--
 webui/static/script.js | 75 ++++++++++++++++++++++++++++++++++++------
 2 files changed, 67 insertions(+), 12 deletions(-)

diff --git a/webui/index.html b/webui/index.html
index 9c599f36..adddc418 100644
--- a/webui/index.html
+++ b/webui/index.html
@@ -1282,8 +1282,8 @@
                                         <button id="enhanced-cancel-btn" class="enhanced-cancel-btn hidden">✕</button>
                                     </div>
                                     <button id="enhanced-search-btn" class="enhanced-search-btn">
-                                        <span class="btn-icon">🔍</span>
-                                        <span class="btn-text">Search</span>
+                                        <span class="btn-icon">👁️</span>
+                                        <span class="btn-text">Show Results</span>
                                     </button>
                                 </div>
 
diff --git a/webui/static/script.js b/webui/static/script.js
index e064209d..a34a5731 100644
--- a/webui/static/script.js
+++ b/webui/static/script.js
@@ -2342,7 +2342,15 @@ function initializeSearch() {
 // SEARCH MODE TOGGLE
 // ===============================
 
+let searchModeToggleInitialized = false;
+
 function initializeSearchModeToggle() {
+    // Only initialize once to prevent duplicate event listeners
+    if (searchModeToggleInitialized) {
+        console.log('Search mode toggle already initialized, skipping...');
+        return;
+    }
+
     const toggleContainer = document.querySelector('.search-mode-toggle');
     const modeBtns = document.querySelectorAll('.search-mode-btn');
     const basicSection = document.getElementById('basic-search-section');
@@ -2353,6 +2361,9 @@ function initializeSearchModeToggle() {
         return;
     }
 
+    searchModeToggleInitialized = true;
+    console.log('✅ Initializing search mode toggle (first time only)');
+
     modeBtns.forEach(btn => {
         btn.addEventListener('click', () => {
             const mode = btn.dataset.mode;
@@ -2426,12 +2437,30 @@ function initializeSearchModeToggle() {
     }
 
     if (enhancedSearchBtn) {
-        enhancedSearchBtn.addEventListener('click', () => {
-            const query = enhancedInput.value.trim();
-            if (query.length >= 2) {
-                performEnhancedSearch(query);
+        enhancedSearchBtn.addEventListener('click', (e) => {
+            // Prevent click from bubbling to document (which would close the dropdown)
+            e.stopPropagation();
+
+            // Get fresh references (in case we navigated away and back)
+            const dropdown = document.getElementById('enhanced-dropdown');
+            const results = document.getElementById('enhanced-results-container');
+
+            if (!dropdown) return;
+
+            // Toggle the dropdown visibility to show/hide previous search results
+            if (dropdown.classList.contains('hidden')) {
+                // Check if there are results to show by looking for actual content
+                const hasResults = results &&
+                                   !results.classList.contains('hidden') &&
+                                   results.children.length > 0;
+
+                if (hasResults) {
+                    showDropdown();
+                } else {
+                    showToast('No previous results to show. Type to search!', 'info');
+                }
             } else {
-                showToast('Please enter at least 2 characters', 'error');
+                hideDropdown();
             }
         });
     }
@@ -2446,7 +2475,8 @@ function initializeSearchModeToggle() {
 
     // Close dropdown when clicking outside
     document.addEventListener('click', (e) => {
-        if (enhancedDropdown && !enhancedDropdown.classList.contains('hidden')) {
+        const dropdown = document.getElementById('enhanced-dropdown');
+        if (dropdown && !dropdown.classList.contains('hidden')) {
             const isClickInside = e.target.closest('.enhanced-search-input-wrapper');
             if (!isClickInside) {
                 hideDropdown();
@@ -3009,14 +3039,39 @@ function initializeSearchModeToggle() {
     }
 
     function showDropdown() {
-        if (enhancedDropdown) {
-            enhancedDropdown.classList.remove('hidden');
+        const dropdown = document.getElementById('enhanced-dropdown');
+        if (dropdown) {
+            dropdown.classList.remove('hidden');
+            updateToggleButtonState();
         }
     }
 
     function hideDropdown() {
-        if (enhancedDropdown) {
-            enhancedDropdown.classList.add('hidden');
+        const dropdown = document.getElementById('enhanced-dropdown');
+        if (dropdown) {
+            dropdown.classList.add('hidden');
+            updateToggleButtonState();
+        }
+    }
+
+    function updateToggleButtonState() {
+        // Get fresh references
+        const btn = document.getElementById('enhanced-search-btn');
+        const dropdown = document.getElementById('enhanced-dropdown');
+
+        if (!btn || !dropdown) return;
+
+        const btnIcon = btn.querySelector('.btn-icon');
+        const btnText = btn.querySelector('.btn-text');
+
+        if (dropdown.classList.contains('hidden')) {
+            // Dropdown is hidden - button should say "Show Results"
+            if (btnIcon) btnIcon.textContent = '👁️';
+            if (btnText) btnText.textContent = 'Show Results';
+        } else {
+            // Dropdown is visible - button should say "Hide Results"
+            if (btnIcon) btnIcon.textContent = '🙈';
+            if (btnText) btnText.textContent = 'Hide Results';
         }
     }
 }