From c7ad02dbe456d2906427ae3c496744b3febeb37d Mon Sep 17 00:00:00 2001
From: Jaime Idolpx <jaime@idolpx.com>
Date: Tue, 16 Jun 2026 15:48:10 -0400
Subject: [PATCH] feat(SearchComponents): enhance search UI with loading states
 and clear button functionality

---
 src/app/components/SearchAssembly64.tsx | 35 ++++++++++++-----------
 src/app/components/SearchCSDbNG.tsx     | 28 +++++++++---------
 src/app/components/SearchCommoServe.tsx | 35 ++++++++++++-----------
 src/app/components/SearchLocal.tsx      | 38 +++++++++++++------------
 4 files changed, 71 insertions(+), 65 deletions(-)

diff --git a/src/app/components/SearchAssembly64.tsx b/src/app/components/SearchAssembly64.tsx
index b0b208a..79f6d77 100644
--- a/src/app/components/SearchAssembly64.tsx
+++ b/src/app/components/SearchAssembly64.tsx
@@ -365,7 +365,10 @@ export default function SearchAssembly64({ config, setConfig, onClose }: SearchA
         <div className="flex-shrink-0 px-4 pt-3 pb-3 border-b border-neutral-200/70">
           <div className="flex items-center gap-1.5 mb-2">
             <div className="relative flex-1">
-              <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-neutral-400 pointer-events-none" />
+              {isSearching
+                ? <Loader2 className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-blue-500 animate-spin pointer-events-none" />
+                : <button onClick={handleSearch} className="absolute left-3 top-1/2 -translate-y-1/2 text-neutral-400 hover:text-blue-500 transition-colors" tabIndex={-1} title="Search"><Search className="w-4 h-4" /></button>
+              }
               <input
                 ref={inputRef}
                 type="text"
@@ -378,25 +381,23 @@ export default function SearchAssembly64({ config, setConfig, onClose }: SearchA
                 className="w-full pl-9 pr-9 py-2.5 bg-neutral-100 border-0 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:bg-white transition-colors"
                 disabled={isSearching}
               />
-              <button
-                onClick={() => setShowAqlHelp(true)}
-                className="absolute right-2.5 top-1/2 -translate-y-1/2 text-neutral-400 hover:text-neutral-600 transition-colors"
-                title="AQL search help"
-                tabIndex={-1}
-              >
-                <HelpCircle className="w-4 h-4" />
-              </button>
+              {query && (
+                <button
+                  onClick={() => { setQuery(''); setResults([]); setHasSearched(false); setSearchError(null); setOffset(0); setHasMore(false); setCategoryFilter(null); }}
+                  className="absolute right-2.5 top-1/2 -translate-y-1/2 text-neutral-400 hover:text-neutral-600 transition-colors"
+                  title="Clear"
+                  tabIndex={-1}
+                >
+                  <X className="w-4 h-4" />
+                </button>
+              )}
             </div>
             <button
-              onClick={handleSearch}
-              disabled={isSearching}
-              className="p-1.5 rounded-lg hover:bg-neutral-100 disabled:opacity-40 transition-colors flex-shrink-0 text-neutral-400 hover:text-blue-600"
-              title="Search"
-              aria-label="Search"
+              onClick={() => setShowAqlHelp(true)}
+              className="p-1.5 rounded-lg hover:bg-neutral-100 transition-colors flex-shrink-0 text-neutral-400 hover:text-neutral-600"
+              title="AQL search help"
             >
-              {isSearching
-                ? <Loader2 className="w-5 h-5 animate-spin text-blue-500" />
-                : <Search className="w-5 h-5" />}
+              <HelpCircle className="w-4 h-4" />
             </button>
             {hasSearched && (
               <button
diff --git a/src/app/components/SearchCSDbNG.tsx b/src/app/components/SearchCSDbNG.tsx
index 89d814c..466a302 100644
--- a/src/app/components/SearchCSDbNG.tsx
+++ b/src/app/components/SearchCSDbNG.tsx
@@ -238,7 +238,10 @@ export default function SearchCSDbNG({ config, setConfig, onClose }: SearchCSDbN
         <div className="flex-shrink-0 px-4 pt-3 pb-3 border-b border-neutral-200/70">
           <div className="flex items-center gap-1.5 mb-2">
             <div className="relative flex-1">
-              <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-neutral-400 pointer-events-none" />
+              {isSearching
+                ? <Loader2 className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-blue-500 animate-spin pointer-events-none" />
+                : <button onClick={() => doSearch(query)} className="absolute left-3 top-1/2 -translate-y-1/2 text-neutral-400 hover:text-blue-500 transition-colors" tabIndex={-1} title="Search"><Search className="w-4 h-4" /></button>
+              }
               <input
                 type="text"
                 value={query}
@@ -247,21 +250,20 @@ export default function SearchCSDbNG({ config, setConfig, onClose }: SearchCSDbN
                 placeholder="Search CSDb-ng…"
                 inputMode="search"
                 enterKeyHint="search"
-                className="w-full pl-9 pr-3 py-2.5 bg-neutral-100 border-0 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:bg-white transition-colors"
+                className="w-full pl-9 pr-9 py-2.5 bg-neutral-100 border-0 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:bg-white transition-colors"
                 disabled={isSearching}
               />
+              {query && (
+                <button
+                  onClick={() => { setQuery(''); setResults([]); setHasSearched(false); setSearchError(null); setTagFilter(null); }}
+                  className="absolute right-2.5 top-1/2 -translate-y-1/2 text-neutral-400 hover:text-neutral-600 transition-colors"
+                  title="Clear"
+                  tabIndex={-1}
+                >
+                  <X className="w-4 h-4" />
+                </button>
+              )}
             </div>
-            <button
-              onClick={() => doSearch(query)}
-              disabled={isSearching || !query.trim()}
-              className="p-1.5 rounded-lg hover:bg-neutral-100 disabled:opacity-40 transition-colors flex-shrink-0 text-neutral-400 hover:text-blue-600"
-              title="Search"
-              aria-label="Search"
-            >
-              {isSearching
-                ? <Loader2 className="w-5 h-5 animate-spin text-blue-500" />
-                : <Search className="w-5 h-5" />}
-            </button>
             {hasSearched && (
               <button
                 onClick={() => setShowFilter(v => !v)}
diff --git a/src/app/components/SearchCommoServe.tsx b/src/app/components/SearchCommoServe.tsx
index 13ab1bf..5b817b7 100644
--- a/src/app/components/SearchCommoServe.tsx
+++ b/src/app/components/SearchCommoServe.tsx
@@ -367,7 +367,10 @@ export default function SearchCommoServe({ config, setConfig, onClose }: SearchC
         <div className="flex-shrink-0 px-4 pt-3 pb-3 border-b border-neutral-200/70">
           <div className="flex items-center gap-1.5 mb-2">
             <div className="relative flex-1">
-              <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-neutral-400 pointer-events-none" />
+              {isSearching
+                ? <Loader2 className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-blue-500 animate-spin pointer-events-none" />
+                : <button onClick={handleSearch} className="absolute left-3 top-1/2 -translate-y-1/2 text-neutral-400 hover:text-blue-500 transition-colors" tabIndex={-1} title="Search"><Search className="w-4 h-4" /></button>
+              }
               <input
                 ref={inputRef}
                 type="text"
@@ -380,25 +383,23 @@ export default function SearchCommoServe({ config, setConfig, onClose }: SearchC
                 className="w-full pl-9 pr-9 py-2.5 bg-neutral-100 border-0 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:bg-white transition-colors"
                 disabled={isSearching}
               />
-              <button
-                onClick={() => setShowAqlHelp(true)}
-                className="absolute right-2.5 top-1/2 -translate-y-1/2 text-neutral-400 hover:text-neutral-600 transition-colors"
-                title="AQL search help"
-                tabIndex={-1}
-              >
-                <HelpCircle className="w-4 h-4" />
-              </button>
+              {query && (
+                <button
+                  onClick={() => { setQuery(''); setResults([]); setHasSearched(false); setSearchError(null); setOffset(0); setHasMore(false); }}
+                  className="absolute right-2.5 top-1/2 -translate-y-1/2 text-neutral-400 hover:text-neutral-600 transition-colors"
+                  title="Clear"
+                  tabIndex={-1}
+                >
+                  <X className="w-4 h-4" />
+                </button>
+              )}
             </div>
             <button
-              onClick={handleSearch}
-              disabled={isSearching}
-              className="p-1.5 rounded-lg hover:bg-neutral-100 disabled:opacity-40 transition-colors flex-shrink-0 text-neutral-400 hover:text-blue-600"
-              title="Search"
-              aria-label="Search"
+              onClick={() => setShowAqlHelp(true)}
+              className="p-1.5 rounded-lg hover:bg-neutral-100 transition-colors flex-shrink-0 text-neutral-400 hover:text-neutral-600"
+              title="AQL search help"
             >
-              {isSearching
-                ? <Loader2 className="w-5 h-5 animate-spin text-blue-500" />
-                : <Search className="w-5 h-5" />}
+              <HelpCircle className="w-4 h-4" />
             </button>
             {hasSearched && (
               <button
diff --git a/src/app/components/SearchLocal.tsx b/src/app/components/SearchLocal.tsx
index 98ec143..1bf6030 100644
--- a/src/app/components/SearchLocal.tsx
+++ b/src/app/components/SearchLocal.tsx
@@ -1,6 +1,6 @@
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { flushSync } from 'react-dom';
-import { Search, Loader2, RefreshCw, FolderSearch, SlidersHorizontal, HardDrive, FolderOpen, X } from 'lucide-react';
+import { Search, Loader2, RefreshCw, FolderSearch, SlidersHorizontal, HardDrive, FolderOpen, X, DatabaseZap } from 'lucide-react';
 import { toast } from 'sonner';
 import { humanFileSize, splitPath } from '../webdav';
 import type { EntryInfo } from '../webdav';
@@ -346,7 +346,7 @@ export default function SearchLocal({ config, setConfig, onClose, onOpenFolder }
           </button>
           <div className="flex items-center gap-2 flex-1 py-3 min-w-0">
             <img src={`${import.meta.env.BASE_URL}favicon.ico`} className="w-5 h-5 flex-shrink-0 object-contain" alt="" aria-hidden="true" />
-            <span className="text-sm font-semibold text-neutral-700">Local</span>
+            <span className="text-sm font-semibold text-neutral-700">Local Storage</span>
           </div>
         </div>
 
@@ -354,36 +354,38 @@ export default function SearchLocal({ config, setConfig, onClose, onOpenFolder }
         <div className="flex-shrink-0 px-4 pt-3 pb-3 border-b border-neutral-100">
           <div className="flex items-center gap-1.5">
             <div className="relative flex-1">
-              <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-neutral-400 pointer-events-none" />
+              {busy
+                ? <Loader2 className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-blue-500 animate-spin pointer-events-none" />
+                : <button onClick={handleSearch} className="absolute left-3 top-1/2 -translate-y-1/2 text-neutral-400 hover:text-blue-500 transition-colors" tabIndex={-1} title="Search"><Search className="w-4 h-4" /></button>
+              }
               <input
                 type="text"
                 value={query}
                 onChange={e => setQuery(e.target.value)}
                 onKeyDown={e => e.key === 'Enter' && !busy && handleSearch()}
                 placeholder="Search… (* any chars, ? one char)"
-                className="w-full pl-9 pr-3 py-2.5 bg-neutral-100 border-0 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:bg-white transition-colors"
+                className="w-full pl-9 pr-9 py-2.5 bg-neutral-100 border-0 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:bg-white transition-colors"
                 autoFocus
                 disabled={busy}
               />
+              {query && (
+                <button
+                  onClick={() => { setQuery(''); setResults([]); setHasSearched(false); setSearchError(null); }}
+                  className="absolute right-2.5 top-1/2 -translate-y-1/2 text-neutral-400 hover:text-neutral-600 transition-colors"
+                  title="Clear"
+                  tabIndex={-1}
+                >
+                  <X className="w-4 h-4" />
+                </button>
+              )}
             </div>
-            <button
-              onClick={handleSearch}
-              disabled={busy || !query.trim()}
-              className="p-1.5 rounded-lg hover:bg-neutral-100 disabled:opacity-40 transition-colors flex-shrink-0 text-neutral-400 hover:text-blue-600"
-              title="Search"
-              aria-label="Search"
-            >
-              {busy
-                ? <Loader2 className="w-5 h-5 animate-spin text-blue-500" />
-                : <Search className="w-5 h-5" />}
-            </button>
-            {dbPhase === 'ready' && !busy && (
+            {/* {dbPhase === 'ready' && !busy && (
               <button onClick={handleRefreshDb} className="p-1.5 rounded-lg hover:bg-neutral-100 text-neutral-400 hover:text-neutral-600 transition-colors flex-shrink-0" title="Reload database">
                 <RefreshCw className="w-4 h-4" />
               </button>
-            )}
+            )} */}
             <button onClick={() => setShowScanConfirm(true)} disabled={busy} className="p-1.5 rounded-lg hover:bg-neutral-100 text-neutral-400 hover:text-neutral-600 disabled:opacity-40 transition-colors flex-shrink-0" title="Scan /sd and rebuild database">
-              <FolderSearch className="w-4 h-4" />
+              <DatabaseZap className="w-4 h-4" />
             </button>
             {hasSearched && (
               <button onClick={() => setShowFilter(v => !v)} className={`relative p-1.5 rounded-lg transition-colors flex-shrink-0 ${showFilter ? 'bg-blue-100 text-blue-600' : 'hover:bg-neutral-100 text-neutral-400 hover:text-neutral-600'}`} title="Filter & sort">