From e62ab9405492560702db3f9ec55f561a54c30a5a Mon Sep 17 00:00:00 2001
From: adevopg <adevopg@gmail.com>
Date: Mon, 13 Jul 2026 15:39:46 +0000
Subject: [PATCH] =?UTF-8?q?web-next:=20selector=20de=20cuenta=20INLINE=20e?=
 =?UTF-8?q?n=20=C2=ABNombre=20de=20la=20cuenta=C2=BB=20+=20fix=20iconos=20?=
 =?UTF-8?q?al=20cambiar?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- El desplegable WOW1/WOW2… ya no es un box aparte: va dentro del campo «Nombre
  de la cuenta» (select compacto .account-select). Con una sola cuenta, texto plano.
- FIX iconos: el cambio de cuenta hacía router.refresh() (navegación suave) que en
  algunos navegadores dejaba caer las hojas de estilo/FA y no se recuperaban. Ahora
  hace window.location.reload() (recarga completa) → todo se recarga bien.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 web-next/app/[locale]/account/page.tsx      | 11 +++---
 web-next/app/globals.css                    | 11 ++++++
 web-next/components/GameAccountSwitcher.tsx | 37 ++++++++-------------
 3 files changed, 30 insertions(+), 29 deletions(-)

diff --git a/web-next/app/[locale]/account/page.tsx b/web-next/app/[locale]/account/page.tsx
index cd34cec..0c8b73d 100644
--- a/web-next/app/[locale]/account/page.tsx
+++ b/web-next/app/[locale]/account/page.tsx
@@ -46,11 +46,6 @@ export default async function AccountPage({ params }: { params: Promise<{ locale
 
   return (
     <PageShell title={t('title')}>
-      {/* Selector de cuenta de juego (WOW1/WOW2…) si la bnet tiene más de una */}
-      {games.length > 1 && (
-        <GameAccountSwitcher accounts={games} currentId={session.accountId ?? 0} />
-      )}
-
       {/* Información: dos fieldsets como en Django */}
       <div className="box-content">
         <div className="title-box-content">
@@ -60,7 +55,11 @@ export default async function AccountPage({ params }: { params: Promise<{ locale
           <fieldset className="account-fieldset">
             <legend>{t('basicData')}</legend>
             <div className="separate account-info">
-              <p><i className="fa-solid fa-user account-ficon third-brown"></i> {t('accountName')}: <span>{wowAccountName(data.gameAccount)}</span></p>
+              <p><i className="fa-solid fa-user account-ficon third-brown"></i> {t('accountName')}:{' '}
+                {games.length > 1
+                  ? <GameAccountSwitcher accounts={games} currentId={session.accountId ?? 0} />
+                  : <span>{wowAccountName(data.gameAccount)}</span>}
+              </p>
               <p><i className="fa-solid fa-at account-ficon third-brown"></i> {t('regMail')}: <span>{maskEmail(data.regMail)}</span></p>
               <p><i className="fa-solid fa-at account-ficon third-brown"></i> {t('currentMail')}: <span>{maskEmail(data.email)}</span></p>
               <p><i className="fa-solid fa-calendar-days account-ficon third-brown"></i> {t('joindate')}: <span>{data.joindate}</span></p>
diff --git a/web-next/app/globals.css b/web-next/app/globals.css
index 0e9ee56..70be254 100644
--- a/web-next/app/globals.css
+++ b/web-next/app/globals.css
@@ -359,6 +359,17 @@ textarea:focus {
   color: #b1997f;
 }
 
+/* Selector de cuenta inline (dentro de «Nombre de la cuenta»). */
+.account-select {
+  width: auto;
+  min-width: 92px;
+  height: auto;
+  padding: 2px 8px;
+  margin: 0 0 0 4px;
+  font-size: 17px;
+  vertical-align: middle;
+}
+
 /* Colores de clase de WoW (nombre de personaje) */
 .class-warrior { color: #c79c6e; }
 .class-paladin { color: #f58cba; }
diff --git a/web-next/components/GameAccountSwitcher.tsx b/web-next/components/GameAccountSwitcher.tsx
index b3ac667..c7888c2 100644
--- a/web-next/components/GameAccountSwitcher.tsx
+++ b/web-next/components/GameAccountSwitcher.tsx
@@ -1,14 +1,14 @@
 'use client'
 
 import { useState } from 'react'
-import { useTranslations } from 'next-intl'
-import { useRouter } from '@/i18n/navigation'
 
 /**
- * Desplegable para cambiar la cuenta de juego activa (WOW1, WOW2…) cuando la
- * Battle.net tiene más de una. Al cambiar, fija la cuenta en la sesión
- * (/api/auth/select-account) y refresca → todo /account (datos, personajes,
- * servicios, compras…) pasa a operar sobre la cuenta seleccionada.
+ * Desplegable INLINE para cambiar la cuenta de juego activa (WOW1, WOW2…),
+ * mostrado en el campo «Nombre de la cuenta» cuando la Battle.net tiene más de
+ * una. Al cambiar, fija la cuenta en la sesión (/api/auth/select-account) y
+ * hace una RECARGA COMPLETA (no router.refresh) → todo /account (datos,
+ * personajes, servicios, compras…) pasa a operar sobre la cuenta elegida y se
+ * recargan bien todos los estilos/iconos.
  */
 export function GameAccountSwitcher({
   accounts,
@@ -17,8 +17,6 @@ export function GameAccountSwitcher({
   accounts: { id: number; index: number }[]
   currentId: number
 }) {
-  const t = useTranslations('Account')
-  const router = useRouter()
   const [busy, setBusy] = useState(false)
 
   async function onChange(e: React.ChangeEvent<HTMLSelectElement>) {
@@ -33,7 +31,7 @@ export function GameAccountSwitcher({
         body: JSON.stringify({ accountId: id }),
       })
       const d = await res.json()
-      if (d.success) router.refresh()
+      if (d.success) window.location.reload()
       else setBusy(false)
     } catch {
       setBusy(false)
@@ -41,19 +39,12 @@ export function GameAccountSwitcher({
   }
 
   return (
-    <div className="box-content">
-      <div className="body-box-content centered">
-        <p>
-          {t('switchAccountLabel')}{' '}
-          <select value={currentId} onChange={onChange} disabled={busy} aria-label={t('switchAccountLabel')}>
-            {accounts.map((a) => (
-              <option key={a.id} value={a.id}>
-                WOW{a.index}
-              </option>
-            ))}
-          </select>
-        </p>
-      </div>
-    </div>
+    <select value={currentId} onChange={onChange} disabled={busy} className="account-select" aria-label="Cuenta de juego">
+      {accounts.map((a) => (
+        <option key={a.id} value={a.id}>
+          WOW{a.index}
+        </option>
+      ))}
+    </select>
   )
 }