feat: replace product search with searchable combobox in banner builder

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/app/api/products/search-list/route.ts

@@ -0,0 +1,42 @@
+import { NextRequest, NextResponse } from 'next/server'
+
+const API_VERSION = '2024-01'
+
+// GET /api/products/search-list?q=peinture
+// Retourne jusqu'à 10 produits correspondant à la recherche (titre ou SKU)
+export async function GET(req: NextRequest) {
+  const q = new URL(req.url).searchParams.get('q')?.trim()
+  if (!q || q.length < 2) return NextResponse.json([])
+
+  const domain = process.env.SHOPIFY_STORE_DOMAIN
+  const token = process.env.SHOPIFY_ADMIN_API_TOKEN
+  if (!domain || !token) return NextResponse.json([], { status: 500 })
+
+  const headers = { 'X-Shopify-Access-Token': token }
+  const baseUrl = `https://${domain}/admin/api/${API_VERSION}`
+
+  try {
+    // Recherche par titre
+    const res = await fetch(
+      `${baseUrl}/products.json?title=${encodeURIComponent(q)}&limit=10&fields=id,title,variants`,
+      { headers },
+    )
+    if (!res.ok) return NextResponse.json([])
+    const data = await res.json()
+    const products = (data.products ?? []) as Array<{
+      id: number
+      title: string
+      variants: Array<{ sku: string }>
+    }>
+
+    const results = products.map(p => ({
+      shopifyId: String(p.id),
+      title: p.title,
+      sku: p.variants[0]?.sku ?? '',
+    }))
+
+    return NextResponse.json(results)
+  } catch {
+    return NextResponse.json([])
+  }
+}

src/components/bannieres/BannerBuilder.tsx

@@ -9,6 +9,12 @@ interface Props {
   onClose: () => void
 }
 
+interface SearchSuggestion {
+  shopifyId: string
+  title: string
+  sku: string
+}
+
 function formatPrice(price: string): string {
   if (!price) return ''
   const n = parseFloat(price)
@@ -25,11 +31,15 @@ function blobToBase64(blob: Blob): Promise<string> {
 }
 
 export function BannerBuilder({ onApply, onClose }: Props) {
-  // Product search
-  const [query, setQuery] = useState('')
-  const [searching, setSearching] = useState(false)
+  // Combobox produit
+  const [inputValue, setInputValue] = useState('')
+  const [suggestions, setSuggestions] = useState<SearchSuggestion[]>([])
+  const [showSuggestions, setShowSuggestions] = useState(false)
+  const [loadingSuggestions, setLoadingSuggestions] = useState(false)
+  const [loadingProduct, setLoadingProduct] = useState(false)
   const [product, setProduct] = useState<BannerProductData | null>(null)
   const [searchError, setSearchError] = useState<string | null>(null)
+  const comboRef = useRef<HTMLDivElement>(null)
 
   // Banner config
   const [scheme, setScheme] = useState<ColorScheme>('dark-blue')
@@ -47,14 +57,48 @@ export function BannerBuilder({ onApply, onClose }: Props) {
 
   const previewRef = useRef<string | null>(null)
 
-  const searchProduct = async () => {
-    if (!query.trim()) return
-    setSearching(true)
+  // Ferme les suggestions si clic extérieur
+  useEffect(() => {
+    const handler = (e: MouseEvent) => {
+      if (comboRef.current && !comboRef.current.contains(e.target as Node)) {
+        setShowSuggestions(false)
+      }
+    }
+    document.addEventListener('mousedown', handler)
+    return () => document.removeEventListener('mousedown', handler)
+  }, [])
+
+  // Recherche des suggestions (debounce 300ms)
+  useEffect(() => {
+    const q = inputValue.trim()
+    if (q.length < 2) { setSuggestions([]); setShowSuggestions(false); return }
+    const t = setTimeout(async () => {
+      setLoadingSuggestions(true)
+      try {
+        // Recherche par titre via l'API Shopify REST
+        const domain = window.location.origin
+        const res = await fetch(`/api/products/search-list?q=${encodeURIComponent(q)}`)
+        if (!res.ok) return
+        const data = await res.json() as SearchSuggestion[]
+        setSuggestions(data)
+        setShowSuggestions(data.length > 0)
+      } catch { /* silencieux */ } finally {
+        setLoadingSuggestions(false)
+      }
+    }, 300)
+    return () => clearTimeout(t)
+  }, [inputValue])
+
+  const selectSuggestion = async (s: SearchSuggestion) => {
+    setInputValue(s.title)
+    setShowSuggestions(false)
+    setSuggestions([])
+    setLoadingProduct(true)
     setSearchError(null)
     setProduct(null)
     setPreviewUrl(null)
     try {
-      const res = await fetch(`/api/theme/product-banner-data?ref=${encodeURIComponent(query.trim())}`)
+      const res = await fetch(`/api/theme/product-banner-data?id=${s.shopifyId}`)
       const data = await res.json()
       if (!res.ok) throw new Error(data.error)
       const p = data as BannerProductData
@@ -66,7 +110,7 @@ export function BannerBuilder({ onApply, onClose }: Props) {
     } catch (e) {
       setSearchError((e as Error).message)
     } finally {
-      setSearching(false)
+      setLoadingProduct(false)
     }
   }
 
@@ -147,25 +191,38 @@ export function BannerBuilder({ onApply, onClose }: Props) {
           {/* ── Panneau gauche : configuration ─────────────────────────────── */}
           <div className="w-80 flex-shrink-0 overflow-y-auto border-r border-slate-700 p-4 space-y-5">
 
-            {/* Recherche produit */}
+            {/* Recherche produit — combobox */}
             <section>
               <h3 className="text-xs font-semibold text-gray-300 uppercase tracking-wide mb-2">Produit</h3>
-              <div className="flex gap-1">
-                <input
-                  type="text"
-                  value={query}
-                  onChange={e => setQuery(e.target.value)}
-                  onKeyDown={e => e.key === 'Enter' && searchProduct()}
-                  placeholder="Référence / UGS…"
-                  className="flex-1 bg-slate-700 border border-slate-600 rounded px-2 py-1.5 text-xs text-white focus:outline-none focus:ring-1 focus:ring-indigo-500"
-                />
-                <button
-                  onClick={searchProduct}
-                  disabled={searching}
-                  className="px-3 py-1.5 text-xs bg-indigo-600 hover:bg-indigo-500 text-white rounded disabled:opacity-50"
-                >
-                  {searching ? '…' : '🔍'}
-                </button>
+              <div className="relative" ref={comboRef}>
+                <div className="relative">
+                  <input
+                    type="text"
+                    value={inputValue}
+                    onChange={e => { setInputValue(e.target.value); setProduct(null) }}
+                    onFocus={() => suggestions.length > 0 && setShowSuggestions(true)}
+                    placeholder="Rechercher par nom ou référence…"
+                    className="w-full bg-slate-700 border border-slate-600 rounded px-2 py-1.5 pr-7 text-xs text-white focus:outline-none focus:ring-1 focus:ring-indigo-500"
+                  />
+                  <span className="absolute right-2 top-1/2 -translate-y-1/2 text-slate-400 text-xs pointer-events-none">
+                    {loadingSuggestions || loadingProduct ? '⏳' : '🔍'}
+                  </span>
+                </div>
+                {showSuggestions && suggestions.length > 0 && (
+                  <div className="absolute z-20 w-full mt-1 bg-slate-700 border border-slate-600 rounded shadow-xl max-h-52 overflow-y-auto">
+                    {suggestions.map(s => (
+                      <button
+                        key={s.shopifyId}
+                        type="button"
+                        onMouseDown={e => { e.preventDefault(); selectSuggestion(s) }}
+                        className="w-full text-left px-3 py-2 hover:bg-slate-600 border-b border-slate-600 last:border-0"
+                      >
+                        <p className="text-xs text-white truncate">{s.title}</p>
+                        <p className="text-xs text-slate-400 font-mono">{s.sku}</p>
+                      </button>
+                    ))}
+                  </div>
+                )}
               </div>
               {searchError && <p className="text-xs text-red-400 mt-1">{searchError}</p>}
               {product && (