store: añade la sección plegable "Novedades" (changelog)

Replica el bloque Novedades del diseño original: fieldset plegable con el
changelog (Noviembre 2024) y sus objetos enlazados a wowhead (icono zamimg tiny
+ color por calidad). components/StoreNews.tsx (client, toggle con flecha
rotate/rotate2 del tema), incluido en la caja de info de /store. i18n
Store.newsTitle/newsIntro/newsDate (es/en).

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

web-next/app/[locale]/store/page.tsx

@@ -9,6 +9,7 @@ import { wowheadWotlkHome } from '@/lib/wowhead'
 import { PageShell } from '@/components/PageShell'
 import { ServiceBox } from '@/components/ServiceBox'
 import { StoreBrowser } from '@/components/StoreBrowser'
+import { StoreNews } from '@/components/StoreNews'
 
 export const dynamic = 'force-dynamic'
 
@@ -48,6 +49,8 @@ export default async function StorePage({ params }: { params: Promise<{ locale:
             ),
           })}
         </p>
+        <br />
+        <StoreNews />
       </ServiceBox>
 
       <StoreBrowser

web-next/app/globals.css

@@ -583,3 +583,9 @@ textarea:focus {
   cursor: pointer; font-size: 22px; color: #b1997f;
 }
 .modal-close:hover { color: #fff; }
+
+/* Novedades de la tienda (cabecera plegable) */
+#store-news { cursor: pointer; user-select: none; }
+#store-news-content { margin-top: 6px; }
+#store-news-content ul { padding-left: 16px; }
+#store-news-content li { margin: 4px 0; }

web-next/components/StoreNews.tsx

@@ -0,0 +1,73 @@
+'use client'
+
+import { useState } from 'react'
+import { useTranslations } from 'next-intl'
+import { WowheadLink } from '@/components/WowheadLink'
+import { wowheadIcon } from '@/lib/wowhead'
+
+interface NewsEntry {
+  itemId?: number // si falta, es texto plano (un set sin enlace)
+  name: string
+  icon?: string
+  q?: number // calidad (color): 2 raro, 3 épico(sup), 4 legendario...
+  path: string[] // ruta de categorías donde se añadió
+}
+
+// Changelog de la tienda (Noviembre 2024), tal cual el diseño original.
+const ENTRIES: NewsEntry[] = [
+  { name: 'Equipo de Batalla del Iluminado de la Fuente del Sol', path: ['Sets de transfiguración PvE', 'Varios (Placas)'] },
+  { itemId: 12636, name: 'Yelmo del gran jefe', icon: 'inv_helmet_24', q: 3, path: ['Sets de transfiguración PvE', 'Varios (Malla)', 'Miscelánea'] },
+  { itemId: 19854, name: "Zin'rokh, Destructora de Mundos", icon: 'inv_sword_55', q: 4, path: ['Armas de transfiguración PvE', 'Espadas', 'Dos manos'] },
+  { itemId: 40400, name: 'Muralla de terror', icon: 'inv_shield_32', q: 4, path: ['Armas de transfiguración PvE', 'Escudos'] },
+  { itemId: 43988, name: 'Capa a prueba de vendavales', icon: 'inv_misc_cape_20', q: 4, path: ['Accesorios de transfiguración PvE', 'Capas'] },
+  { itemId: 40205, name: 'Cinturón de piel de acechador', icon: 'inv_belt_15', q: 4, path: ['Accesorios de transfiguración PvE', 'Cinturones de cuero'] },
+  { itemId: 8312, name: 'Coraza de alabastro', icon: 'inv_chest_chain_05', q: 2, path: ['Sets de transfiguración PvE', 'Varios (Placas)', 'Miscelánea'] },
+  { itemId: 28782, name: 'Bastón de pulso de corazón de diamante', icon: 'inv_staff_53', q: 4, path: ['Armas de transfiguración PvE', 'Bastones'] },
+  { itemId: 45117, name: 'Manijas de constructor', icon: 'inv_gauntlets_64', q: 4, path: ['Sets de transfiguración PvE', 'Varios (Tela)', 'Miscelánea'] },
+  { itemId: 32323, name: 'Mantón de destructor de Sombraluna', icon: 'inv_misc_cape_naxxramas_02', q: 4, path: ['Accesorios de transfiguración PvE', 'Capas'] },
+  { itemId: 32331, name: 'Capa del Consejo Illidari', icon: 'inv_misc_cape_20', q: 4, path: ['Accesorios de transfiguración PvE', 'Capas'] },
+  { itemId: 34012, name: 'Embozo de la batalla final', icon: 'inv_misc_cape_16', q: 4, path: ['Accesorios de transfiguración PvE', 'Capas'] },
+  { itemId: 32505, name: 'Locura de El Traidor', icon: 'spell_shadow_charm', q: 4, path: ['Accesorios PvE', 'Abalorios', 'Nivel de objeto < 200'] },
+]
+
+/** Sección plegable «Novedades» de la tienda (changelog), con enlaces a wowhead. */
+export function StoreNews() {
+  const t = useTranslations('Store')
+  const [open, setOpen] = useState(false)
+
+  return (
+    <fieldset className="separate2">
+      <div id="store-news" role="button" tabIndex={0} onClick={() => setOpen((o) => !o)}>
+        <p className="blue-info">
+          {t('newsTitle')} <i className={`fas fa-angle-down green-info ${open ? 'rotate' : 'rotate2'}`} />
+        </p>
+      </div>
+      {open && (
+        <div id="store-news-content">
+          <p>{t('newsIntro')}</p>
+          <p><span className="second-brown">{t('newsDate')}</span></p>
+          <ul>
+            {ENTRIES.map((e, i) => (
+              <li key={i}>
+                {e.itemId ? (
+                  <WowheadLink
+                    id={e.itemId}
+                    className={`icontinyl${e.q ? ` q${e.q}` : ''}`}
+                    style={{ paddingLeft: '18px', background: `url("${wowheadIcon(e.icon || 'inv_misc_questionmark', 'tiny')}") left center no-repeat` }}
+                  >
+                    {e.name}
+                  </WowheadLink>
+                ) : (
+                  <span>{e.name}</span>
+                )}
+                {e.path.map((p, j) => (
+                  <span key={j}> <i className="fas fa-angle-right green-info" /> {p}</span>
+                ))}
+              </li>
+            ))}
+          </ul>
+        </div>
+      )}
+    </fieldset>
+  )
+}

web-next/messages/en.json

@@ -1956,6 +1956,9 @@
       "invalidCharacter": "Invalid character.",
       "emptyCart": "Your cart is empty.",
       "generic": "An error occurred. Please try again."
-    }
+    },
+    "newsTitle": "News",
+    "newsIntro": "List of additions made based on the community's suggestions in our forum.",
+    "newsDate": "November 2024"
   }
 }

web-next/messages/es.json

@@ -1956,6 +1956,9 @@
       "invalidCharacter": "El personaje no es válido.",
       "emptyCart": "Tu carrito está vacío.",
       "generic": "Ha ocurrido un error. Inténtalo de nuevo."
-    }
+    },
+    "newsTitle": "Novedades",
+    "newsIntro": "Lista de adiciones realizadas en base a las sugerencias de la comunidad en nuestro foro.",
+    "newsDate": "Noviembre 2024"
   }
 }