web-next: selector de personaje coloreado + rediseño unstuck + fixes vote/account-info

- CharacterSelect: componente reutilizable que colorea las opciones por clase
  (class="priest big-font"…) y el <select> con la clase seleccionada. Usado en
  unstuck, revive, gold, transfer, trade-points, servicios de pago y recruit.
  getGameCharacters ahora devuelve classCss.
- /unstuck (+revive): diseño del original (info + NOTA, prompt, opciones coloreadas,
  botón "Desbloqueado"/"Revivido" con refresh).
- /vote-points: seed de los 4 sitios con logos y URLs (sql/seed_votesites.sql);
  botón voted-button para sitios en cooldown; etiqueta "Nota:" separada.
- account-info.png (imagen nueva) y CSS de los paneles de cuenta: se añade
  background-blend-mode: saturation y background-size en #account-settings y
  .account-fieldset para que la imagen salga como el original.

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

web-next/components/CharacterActionForm.tsx

@@ -2,26 +2,41 @@
 
 import { useState } from 'react'
 import { useTranslations } from 'next-intl'
+import { useRouter } from '@/i18n/navigation'
+import { CharacterSelect, type CharOption } from '@/components/CharacterSelect'
 
 const ERROR_KEYS = ['noCharacter', 'notOfflineOrOwned', 'cooldown', 'soapError'] as const
 
 interface Props {
-  characters: string[]
+  characters: CharOption[]
   endpoint: string
   actionLabel: string
   buttonClass?: string
+  processingLabel?: string // texto mientras procesa (por defecto t('processing'))
+  doneLabel?: string // si se pasa, muestra el estado "hecho" (dorado) y refresca a los 5s
+  promptText?: string // texto encima del selector (por defecto t('choose'))
 }
 
 /** Formulario reutilizable para acciones de personaje por SOAP (revive, unstuck...). */
-export function CharacterActionForm({ characters, endpoint, actionLabel, buttonClass = '' }: Props) {
+export function CharacterActionForm({
+  characters,
+  endpoint,
+  actionLabel,
+  buttonClass = '',
+  processingLabel,
+  doneLabel,
+  promptText,
+}: Props) {
   const t = useTranslations('Services')
+  const router = useRouter()
   const [character, setCharacter] = useState('')
   const [busy, setBusy] = useState(false)
+  const [done, setDone] = useState(false)
   const [message, setMessage] = useState<{ ok: boolean; text: string } | null>(null)
 
   async function handleSubmit(e: React.FormEvent) {
     e.preventDefault()
-    if (busy || !character) return
+    if (busy || done || !character) return
     setBusy(true)
     setMessage(null)
     try {
@@ -32,10 +47,22 @@ export function CharacterActionForm({ characters, endpoint, actionLabel, buttonC
         body: JSON.stringify({ character }),
       })
       const data: { success?: boolean; error?: string } = await res.json()
-      if (data.success) setMessage({ ok: true, text: t('success') })
-      else {
+      if (data.success) {
+        setMessage({ ok: true, text: t('success') })
+        if (doneLabel) {
+          // Como el original: tras 5 s se limpia el formulario y se refresca.
+          setDone(true)
+          setTimeout(() => {
+            setDone(false)
+            setCharacter('')
+            setMessage(null)
+            router.refresh()
+          }, 5000)
+        }
+      } else {
         const key = (ERROR_KEYS as readonly string[]).includes(data.error ?? '') ? data.error! : 'genericError'
         setMessage({ ok: false, text: t(key) })
+        setTimeout(() => setMessage(null), 5000)
       }
     } catch {
       setMessage({ ok: false, text: t('genericError') })
@@ -50,29 +77,25 @@ export function CharacterActionForm({ characters, endpoint, actionLabel, buttonC
 
   return (
     <div className="centered">
-      <p>{t('choose')}</p>
+      <br />
+      <br />
+      <p>{promptText ?? t('choose')}</p>
       <br />
       <form onSubmit={handleSubmit} acceptCharset="utf-8">
-        <select value={character} onChange={(e) => setCharacter(e.target.value)} required>
-          <option value="" disabled>
-            {t('selectCharacter')}
-          </option>
-          {characters.map((c) => (
-            <option key={c} value={c}>
-              {c}
-            </option>
-          ))}
-        </select>
+        <CharacterSelect characters={characters} value={character} onChange={setCharacter} placeholder={t('selectCharacter')} />
         <br />
-        <button type="submit" className={buttonClass} disabled={busy || !character}>
-          {busy ? t('processing') : actionLabel}
+        <button
+          type="submit"
+          className={buttonClass}
+          disabled={busy || done || !character}
+          style={done ? { color: '#d79602' } : undefined}
+        >
+          {done && doneLabel ? doneLabel : busy ? processingLabel ?? t('processing') : actionLabel}
         </button>
       </form>
       <hr />
       <div className="alert-message" style={{ display: message ? 'block' : 'none' }}>
-        {message && (
-          <span className={message.ok ? 'ok-form-response' : 'red-form-response'}>{message.text}</span>
-        )}
+        {message && <span className={message.ok ? 'ok-form-response' : 'red-form-response'}>{message.text}</span>}
       </div>
     </div>
   )

web-next/components/CharacterSelect.tsx

@@ -0,0 +1,46 @@
+'use client'
+
+export interface CharOption {
+  name: string
+  classCss?: string // clase CSS de color por clase (priest, warrior…)
+}
+
+/**
+ * Selector de personaje con las opciones coloreadas por clase (como el diseño
+ * original: `class="priest big-font"`). El propio <select> toma el color de la
+ * clase del personaje seleccionado. Se usa en todas las herramientas que piden
+ * elegir un personaje.
+ */
+export function CharacterSelect({
+  characters,
+  value,
+  onChange,
+  placeholder,
+  name,
+  required = true,
+  className,
+}: {
+  characters: CharOption[]
+  value: string
+  onChange: (value: string) => void
+  placeholder: string
+  name?: string
+  required?: boolean
+  className?: string
+}) {
+  const selectedCss = characters.find((c) => c.name === value)?.classCss
+  const selectClass = [className, selectedCss].filter(Boolean).join(' ') || undefined
+
+  return (
+    <select name={name} className={selectClass} value={value} onChange={(e) => onChange(e.target.value)} required={required}>
+      <option value="" disabled>
+        {placeholder}
+      </option>
+      {characters.map((c) => (
+        <option key={c.name} value={c.name} className={c.classCss ? `${c.classCss} big-font` : undefined}>
+          {c.name}
+        </option>
+      ))}
+    </select>
+  )
+}

web-next/components/GoldForm.tsx

@@ -3,8 +3,9 @@
 import { useState } from 'react'
 import { useTranslations } from 'next-intl'
 import type { GoldOption } from '@/lib/prices'
+import { CharacterSelect, type CharOption } from '@/components/CharacterSelect'
 
-export function GoldForm({ characters, options }: { characters: string[]; options: GoldOption[] }) {
+export function GoldForm({ characters, options }: { characters: CharOption[]; options: GoldOption[] }) {
   const t = useTranslations('Services')
   const tp = useTranslations('Paid')
   const [character, setCharacter] = useState('')
@@ -41,10 +42,7 @@ export function GoldForm({ characters, options }: { characters: string[]; option
   return (
     <div className="centered">
       <form onSubmit={handleSubmit} acceptCharset="utf-8">
-        <select value={character} onChange={(e) => setCharacter(e.target.value)} required>
-          <option value="" disabled>{t('selectCharacter')}</option>
-          {characters.map((c) => <option key={c} value={c}>{c}</option>)}
-        </select>
+        <CharacterSelect characters={characters} value={character} onChange={setCharacter} placeholder={t('selectCharacter')} />
         <br />
         <select value={amount} onChange={(e) => setAmount(e.target.value)} required>
           <option value="" disabled>{tp('gold.selectAmount')}</option>

web-next/components/PaidServiceForm.tsx

@@ -2,9 +2,10 @@
 
 import { useState } from 'react'
 import { useTranslations } from 'next-intl'
+import { CharacterSelect, type CharOption } from '@/components/CharacterSelect'
 
 interface Props {
-  characters: string[]
+  characters: CharOption[]
   checkoutEndpoint: string
   payLabel: string // ya formateado con el precio
   buttonClass?: string
@@ -51,16 +52,7 @@ export function PaidServiceForm({ characters, checkoutEndpoint, payLabel, button
       <p>{t('choose')}</p>
       <br />
       <form onSubmit={handleSubmit} acceptCharset="utf-8">
-        <select value={character} onChange={(e) => setCharacter(e.target.value)} required>
-          <option value="" disabled>
-            {t('selectCharacter')}
-          </option>
-          {characters.map((c) => (
-            <option key={c} value={c}>
-              {c}
-            </option>
-          ))}
-        </select>
+        <CharacterSelect characters={characters} value={character} onChange={setCharacter} placeholder={t('selectCharacter')} />
         <br />
         <button type="submit" className={buttonClass} disabled={busy || !character}>
           {busy ? t('processing') : payLabel}

web-next/components/RecruitPanel.tsx

@@ -2,6 +2,7 @@
 
 import { useState } from 'react'
 import type { RecruitRewardView } from '@/lib/recruit-claim'
+import type { CharOption } from '@/components/CharacterSelect'
 
 const ICON_BASE = 'https://wotlk.ultimowow.com/static/images/wow/icons/tiny'
 
@@ -32,12 +33,13 @@ export function RecruitPanel({
   recruitedCount,
 }: {
   rewards: RecruitRewardView[]
-  characters: string[]
+  characters: CharOption[]
   level80Count: number
   isRecruited: boolean
   recruitedCount: number
 }) {
-  const [character, setCharacter] = useState(characters[0] ?? '')
+  const [character, setCharacter] = useState(characters[0]?.name ?? '')
+  const selectedCss = characters.find((c) => c.name === character)?.classCss
   const [busyId, setBusyId] = useState<number | null>(null)
   const [msg, setMsg] = useState<{ ok: boolean; text: string } | null>(null)
 
@@ -97,9 +99,9 @@ export function RecruitPanel({
       {characters.length > 0 && (
         <p className="lefted">
           Recibir recompensas en:{' '}
-          <select value={character} onChange={(e) => setCharacter(e.target.value)} className="account-select">
+          <select value={character} onChange={(e) => setCharacter(e.target.value)} className={['account-select', selectedCss].filter(Boolean).join(' ')}>
             {characters.map((c) => (
-              <option key={c} value={c}>{c}</option>
+              <option key={c.name} value={c.name} className={c.classCss ? `${c.classCss} big-font` : undefined}>{c.name}</option>
             ))}
           </select>
         </p>

web-next/components/ServicePageContent.tsx

@@ -25,7 +25,7 @@ export async function ServicePageContent({ service, locale }: { service: string;
     <PageShell title={t(`${service}.title`)}>
       <ServiceBox>
         <PaidServiceForm
-          characters={chars.map((c) => c.name)}
+          characters={chars.map((c) => ({ name: c.name, classCss: c.classCss }))}
           checkoutEndpoint={`/api/character/${service}/checkout`}
           payLabel={t(`${service}.pay`, { price })}
           buttonClass={`${service}-button`}

web-next/components/TradePointsForm.tsx

@@ -2,6 +2,7 @@
 
 import { useState } from 'react'
 import { Turnstile } from '@/components/Turnstile'
+import { CharacterSelect, type CharOption } from '@/components/CharacterSelect'
 
 function tradeError(error?: string): string {
   switch (error) {
@@ -78,7 +79,7 @@ function PasswordInput({
 }
 
 /* ---------------------------------- VENTA ---------------------------------- */
-function SellForm({ characters, visible }: { characters: string[]; visible: boolean }) {
+function SellForm({ characters, visible }: { characters: CharOption[]; visible: boolean }) {
   const [points, setPoints] = useState('')
   const [gold, setGold] = useState('')
   const [character, setCharacter] = useState('')
@@ -138,10 +139,7 @@ function SellForm({ characters, visible }: { characters: string[]; visible: bool
             <tr><td><input type="number" maxLength={5} min="1" max="99999" step="1" value={gold} onChange={(e) => setGold(e.target.value)} placeholder="Valor del código en oro" required /></td></tr>
             <tr><td>¿A qué personaje se enviará el oro?</td></tr>
             <tr><td>
-              <select value={character} onChange={(e) => setCharacter(e.target.value)} required>
-                <option disabled value="">Selecciona un personaje</option>
-                {characters.map((c) => <option key={c} value={c}>{c}</option>)}
-              </select>
+              <CharacterSelect characters={characters} value={character} onChange={setCharacter} placeholder="Selecciona un personaje" />
             </td></tr>
             <tr><td><br /><PasswordInput id="password-sell" value={password} onChange={setPassword} placeholder="Contraseña de tu cuenta" maxLength={16} /></td></tr>
             <tr><td><input type="text" maxLength={6} value={token} onChange={(e) => setToken(e.target.value)} placeholder="Token de seguridad" required /></td></tr>
@@ -169,7 +167,7 @@ function SellForm({ characters, visible }: { characters: string[]; visible: bool
 }
 
 /* ---------------------------------- COMPRA --------------------------------- */
-function BuyForm({ characters, visible }: { characters: string[]; visible: boolean }) {
+function BuyForm({ characters, visible }: { characters: CharOption[]; visible: boolean }) {
   const [code, setCode] = useState('')
   const [character, setCharacter] = useState('')
   const [password, setPassword] = useState('')
@@ -247,10 +245,7 @@ function BuyForm({ characters, visible }: { characters: string[]; visible: boole
             )}
             <tr><td>¿De qué personaje se cobrará el oro?</td></tr>
             <tr><td>
-              <select value={character} onChange={(e) => setCharacter(e.target.value)} required>
-                <option disabled value="">Selecciona un personaje</option>
-                {characters.map((c) => <option key={c} value={c}>{c}</option>)}
-              </select>
+              <CharacterSelect characters={characters} value={character} onChange={setCharacter} placeholder="Selecciona un personaje" />
             </td></tr>
             <tr><td><br /><PasswordInput id="password-buy" value={password} onChange={setPassword} placeholder="Contraseña de tu cuenta" maxLength={16} /></td></tr>
             <tr><td><input type="text" maxLength={6} value={token} onChange={(e) => setToken(e.target.value)} placeholder="Token de seguridad" required /></td></tr>
@@ -268,7 +263,7 @@ function BuyForm({ characters, visible }: { characters: string[]; visible: boole
   )
 }
 
-export function TradePointsForm({ characters }: { characters: string[] }) {
+export function TradePointsForm({ characters }: { characters: CharOption[] }) {
   // Como el original: al cargar no se muestra ningún formulario; se revela al
   // pulsar VENTA o COMPRA.
   const [active, setActive] = useState<'sell' | 'buy' | null>(null)

web-next/components/TransferForm.tsx

@@ -2,8 +2,9 @@
 
 import { useState } from 'react'
 import { useTranslations } from 'next-intl'
+import { CharacterSelect, type CharOption } from '@/components/CharacterSelect'
 
-export function TransferForm({ characters, price }: { characters: string[]; price: number }) {
+export function TransferForm({ characters, price }: { characters: CharOption[]; price: number }) {
   const t = useTranslations('Services')
   const tp = useTranslations('Paid')
   const [character, setCharacter] = useState('')
@@ -40,10 +41,7 @@ export function TransferForm({ characters, price }: { characters: string[]; pric
   return (
     <div className="centered">
       <form onSubmit={handleSubmit} acceptCharset="utf-8">
-        <select value={character} onChange={(e) => setCharacter(e.target.value)} required>
-          <option value="" disabled>{t('selectCharacter')}</option>
-          {characters.map((c) => <option key={c} value={c}>{c}</option>)}
-        </select>
+        <CharacterSelect characters={characters} value={character} onChange={setCharacter} placeholder={t('selectCharacter')} />
         <br />
         <input type="text" placeholder={tp('transfer.destination')} value={destination} onChange={(e) => setDestination(e.target.value)} required />
         <br />

web-next/components/VotePanel.tsx

@@ -56,7 +56,7 @@ export function VotePanel({ sites, canVote }: { sites: VoteSiteStatus[]; canVote
         {/* eslint-disable-next-line @next/next/no-img-element */}
         <img className="refresh-icon" src={REFRESH_ICON} title={t('refresh')} alt={t('refresh')} />
       </button>
-      <p><span>{t('note')}</span></p>
+      <p><span>{t('noteLabel')}</span> {t('note')}</p>
       <br />
 
       {sites.map((s) => {
@@ -78,28 +78,31 @@ export function VotePanel({ sites, canVote }: { sites: VoteSiteStatus[]; canVote
                 <tr><td className="lefted">{t('pv')}: <span>{s.points}</span></td></tr>
                 <tr>
                   <td className="lefted small-font third-brown">
-                    {s.lastVoteAt ? t('lastVote', { date: new Date(s.lastVoteAt).toLocaleString(locale) }) : t('neverVoted')}
+                    {s.lastVoteAt ? t('lastVote', { date: new Date(s.lastVoteAt).toLocaleString(locale) }) : ''}
                   </td>
                 </tr>
                 <tr><td><hr /></td></tr>
                 <tr>
                   <td>
-                    {canVote ? (
+                    {!canVote ? (
+                      <a className="vote-button" href={s.url} target="_blank" rel="noopener noreferrer">
+                        {t('vote')}
+                      </a>
+                    ) : isVoted || s.onCooldown ? (
+                      <button type="button" name="vote" className="voted-button" disabled>
+                        {t('voted')}
+                      </button>
+                    ) : (
                       <button
                         type="button"
                         name="vote"
                         className="vote-button"
                         value={s.url}
                         onClick={() => vote(s)}
-                        disabled={busyId !== null || isVoted}
-                        style={isVoted ? { color: '#d79602' } : undefined}
+                        disabled={busyId !== null}
                       >
-                        {isVoted ? t('voted') : busyId === s.id ? t('voting') : t('vote')}
+                        {busyId === s.id ? t('voting') : t('vote')}
                       </button>
-                    ) : (
-                      <a className="vote-button" href={s.url} target="_blank" rel="noopener noreferrer">
-                        {t('vote')}
-                      </a>
                     )}
                   </td>
                 </tr>