Armería: búsqueda insensible a mayúsculas, autocompletar y proxy del visor 3D

Tres arreglos:

1) Búsqueda insensible a mayúsculas/minúsculas. Las consultas usaban LIKE directo
   (sensible según la colación de la tabla), así que 'test' no encontraba 'Test'.
   Ahora comparan con LOWER(col) LIKE LOWER(?).

2) Autocompletar tipo wowhead. Nuevo /api/armory/suggest + ArmorySearchBox
   reescrito: al teclear (≥1 carácter, con debounce) muestra un desplegable con
   personajes, ítems y hermandades que coinciden; clic va directo a la ficha/wowhead.
   Enter o el botón siguen haciendo la búsqueda completa.

3) Visor 3D «no disponible». Causa: el contenido de wow.zamimg.com/modelviewer no
   envía cabeceras CORS (el propio README de wow-model-viewer pide un proxy). Se
   añade un rewrite en next.config (/modelviewer/* -> zamimg) para servirlo
   same-origin, y el visor usa esas rutas. Además, si falla la resolución de ítems
   se renderiza el personaje sin equipo, y los errores se registran en consola para
   diagnóstico.

Verificado: 'test' encuentra 'Test'; el autocompletar responde; el proxy
/modelviewer/live/viewer/viewer.min.js sirve 200 same-origin.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

web-next/components/ArmoryModel3D.tsx

@@ -15,9 +15,11 @@ import { useEffect, useRef, useState } from 'react'
  * slot del visor. displayid = transmog si lo hay, si no el del ítem equipado.
  */
 
-const ZAM_VIEWER = 'https://wow.zamimg.com/modelviewer/live/viewer/viewer.min.js'
+// Same-origin (proxy /modelviewer/* -> zamimg en next.config): evita el bloqueo CORS
+// del visor, que es lo que dejaba el modelo «no disponible».
+const ZAM_VIEWER = '/modelviewer/live/viewer/viewer.min.js'
 const JQUERY = 'https://code.jquery.com/jquery-3.7.1.min.js'
-const CONTENT_PATH = 'https://wow.zamimg.com/modelviewer/live/'
+const CONTENT_PATH = '/modelviewer/live/'
 
 type Win = typeof window & { jQuery?: unknown; $?: unknown; ZamModelViewer?: unknown; CONTENT_PATH?: string }
 
@@ -61,10 +63,17 @@ export function ArmoryModel3D({
         const mv = await import('wow-model-viewer')
         if (cancelled || !ref.current) return
 
-        const items = await mv.findItemsInEquipments(
-          equip.map((e) => ({ slot: e.slot, entry: e.entry, displayid: e.displayid })),
-          'live',
-        )
+        // La resolución de ítems hace consultas al CDN y puede fallar; si falla, se
+        // renderiza al menos el personaje sin equipo en vez de dejar la ficha vacía.
+        let items: unknown[] = []
+        try {
+          items = await mv.findItemsInEquipments(
+            equip.map((e) => ({ slot: e.slot, entry: e.entry, displayid: e.displayid })),
+            'live',
+          )
+        } catch (err) {
+          console.warn('[armory-3d] no se pudieron resolver los ítems del modelo:', err)
+        }
         if (cancelled || !ref.current) return
 
         ref.current.id = ref.current.id || `armory-model-${race}-${gender}`
@@ -73,7 +82,8 @@ export function ArmoryModel3D({
           clearTimeout(failTimer)
           setState('ok')
         }
-      } catch {
+      } catch (err) {
+        console.error('[armory-3d] no se pudo cargar el visor 3D:', err)
         if (!cancelled) {
           clearTimeout(failTimer)
           setState('fail')

web-next/components/ArmorySearchBox.tsx

@@ -1,34 +1,150 @@
 'use client'
 
-import { useState } from 'react'
-import { useTranslations } from 'next-intl'
+import { useEffect, useRef, useState } from 'react'
+import { useTranslations, useLocale } from 'next-intl'
 import { useRouter } from '@/i18n/navigation'
+import { classColor } from '@/lib/wow-data'
+import { wowheadUrl } from '@/lib/wowhead'
 
-/** Caja de búsqueda de la armería: navega a /armory?tab=&q=. */
+interface Suggestions {
+  characters: { guid: number; name: string; level: number; class: number; sub: string }[]
+  items: { entry: number; name: string; quality: number; itemLevel: number }[]
+  guilds: { guildid: number; name: string; members: number }[]
+}
+
+const EMPTY: Suggestions = { characters: [], items: [], guilds: [] }
+
+/**
+ * Buscador de la armería con autocompletar tipo wowhead: al teclear (≥1 carácter)
+ * muestra un desplegable con personajes, ítems y hermandades que coinciden. Enter o
+ * el botón hacen la búsqueda completa; clic en una sugerencia va directo.
+ */
 export function ArmorySearchBox({ tab, initialQuery }: { tab: string; initialQuery: string }) {
   const t = useTranslations('Armory')
+  const locale = useLocale()
   const router = useRouter()
   const [q, setQ] = useState(initialQuery)
+  const [sug, setSug] = useState<Suggestions>(EMPTY)
+  const [open, setOpen] = useState(false)
+  const boxRef = useRef<HTMLDivElement>(null)
 
-  function submit(e: React.FormEvent) {
+  // Buscar sugerencias con debounce.
+  useEffect(() => {
+    const query = q.trim()
+    if (query.length < 1) {
+      setSug(EMPTY)
+      return
+    }
+    const ctrl = new AbortController()
+    const timer = setTimeout(async () => {
+      try {
+        const res = await fetch(`/api/armory/suggest?q=${encodeURIComponent(query)}&locale=${locale}`, {
+          signal: ctrl.signal,
+        })
+        const data: Suggestions = await res.json()
+        setSug(data)
+        setOpen(true)
+      } catch {
+        /* abortado o error */
+      }
+    }, 200)
+    return () => {
+      clearTimeout(timer)
+      ctrl.abort()
+    }
+  }, [q, locale])
+
+  // Cerrar al hacer clic fuera.
+  useEffect(() => {
+    function onClick(e: MouseEvent) {
+      if (boxRef.current && !boxRef.current.contains(e.target as Node)) setOpen(false)
+    }
+    document.addEventListener('mousedown', onClick)
+    return () => document.removeEventListener('mousedown', onClick)
+  }, [])
+
+  function fullSearch(e: React.FormEvent) {
     e.preventDefault()
     const query = q.trim()
     if (query.length < 3) return
+    setOpen(false)
     router.push(`/armory?tab=${tab}&q=${encodeURIComponent(query)}`)
   }
 
+  function go(href: string) {
+    setOpen(false)
+    router.push(href)
+  }
+
+  const hasResults = sug.characters.length + sug.items.length + sug.guilds.length > 0
+
   return (
-    <form onSubmit={submit} className="armory-search">
-      <input
-        className="forum-input"
-        value={q}
-        onChange={(e) => setQ(e.target.value)}
-        placeholder={t('searchPlaceholder')}
-        maxLength={100}
-      />
-      <button type="submit" className="nice_button">
-        {t('search')}
-      </button>
-    </form>
+    <div className="armory-search" ref={boxRef}>
+      <form onSubmit={fullSearch} className="armory-search-form">
+        <input
+          className="forum-input"
+          value={q}
+          onChange={(e) => setQ(e.target.value)}
+          onFocus={() => q.trim() && setOpen(true)}
+          placeholder={t('searchPlaceholder')}
+          maxLength={100}
+          autoComplete="off"
+        />
+        <button type="submit" className="nice_button">
+          {t('search')}
+        </button>
+      </form>
+
+      {open && hasResults && (
+        <div className="armory-suggest">
+          {sug.characters.length > 0 && (
+            <div className="armory-suggest-group">
+              <div className="armory-suggest-head">{t('tabCharacters')}</div>
+              {sug.characters.map((c) => (
+                <button key={`c${c.guid}`} className="armory-suggest-item" onClick={() => go(`/armory/character/${c.guid}`)}>
+                  <span style={{ color: classColor(c.class) }}>{c.name}</span>
+                  <span className="armory-suggest-sub">
+                    {t('level')} {c.level} · {c.sub}
+                  </span>
+                </button>
+              ))}
+            </div>
+          )}
+          {sug.items.length > 0 && (
+            <div className="armory-suggest-group">
+              <div className="armory-suggest-head">{t('tabItems')}</div>
+              {sug.items.map((it) => (
+                <a
+                  key={`i${it.entry}`}
+                  className="armory-suggest-item"
+                  href={wowheadUrl('item', it.entry, locale)}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  onClick={() => setOpen(false)}
+                >
+                  <span className={`q${it.quality}`}>{it.name}</span>
+                  <span className="armory-suggest-sub">
+                    {t('itemLevel')} {it.itemLevel}
+                  </span>
+                </a>
+              ))}
+            </div>
+          )}
+          {sug.guilds.length > 0 && (
+            <div className="armory-suggest-group">
+              <div className="armory-suggest-head">{t('tabGuilds')}</div>
+              {sug.guilds.map((g) => (
+                <button key={`g${g.guildid}`} className="armory-suggest-item" onClick={() => go(`/armory/guild/${g.guildid}`)}>
+                  <span>{g.name}</span>
+                  <span className="armory-suggest-sub">
+                    {g.members} {t('members')}
+                  </span>
+                </button>
+              ))}
+            </div>
+          )}
+        </div>
+      )}
+    </div>
   )
 }