Foro: reemplazar el foro anterior por el port del foro estilo FusionCMS

Se sustituye por completo el foro anterior de Next (que estaba vacío: 0 temas, 0
posts) por una adaptación del foro PHP de FusionCMS que tenía el usuario, con su
estructura, sus imágenes y su estética, llevadas a Next.

BASE DE DATOS (acore_web), esquema idéntico al original (sql/forum_fusion.sql):
  forum_categories(id, order, name)
  forum_forums(id, category, order, name, description, icon, colortitle, type)
  forum_topics(id, forum, name, sticky, locked, deleted, created)
  forum_posts(id, topic, poster, text, time, deleted)
Se hizo DROP de las tablas antiguas (forums, forum_categories, forum_topics,
forum_posts) y CREATE de estas, con el seed original (News/Reports/General,
foros con icono, clases con color, subforos por idioma con bandera). Única
diferencia con el dump: forum_topics.created, que faltaba y usan las vistas, y
el recorte del salto de línea final en los nombres de clase.

Los temas no guardan autor ni última actividad: se derivan del primer/último post,
como en el original. `poster` es el AccountID de acore_auth; el nombre se resuelve
al render (username sin el sufijo #N de Battle.net). El texto se guarda como HTML
saneado con nh3 (no BBCode) para encajar con el editor.

EDITOR: TinyMCE community self-hosted (licenseKey gpl), servido desde /tinymce
(scripts/copy-tinymce.mjs en postinstall; public/tinymce en .gitignore por ser
artefacto). El HTML se sanea SIEMPRE en el servidor.

PÁGINAS (app/[locale]/forum): índice con los 3 tipos de foro (fila normal, tarjeta
de clase tipo 1, tarjeta de idioma tipo 2), subforo, tema, crear y editar. La
lógica de forum.js (crear/responder/editar/moderar) se portó a fetch + los avisos
del sitio, sin jQuery/SweetAlert, y la moderación pasa por POST (no GET).

CSS: forum.css adaptado al tema (app/forum.css), rutas de imagen a /forum, dorado
alineado al acento del sitio (#d79602), y se aportan .nice_button/.main-wide/
.pagination que no estaban en theme.css.

ADMIN: lib/admin-forum.ts, sus rutas y AdminForumManager reescritos al esquema
nuevo (categoría, icono, color, tipo, orden; sin _en/visibility).

Se eliminan /forum/search y /forum/user (no existen en el foro nuevo) y los
componentes que quedaban huérfanos (ForumSearchBox, PostActions, TopicModBar,
NewTopicForm). i18n ES/EN completado (next-intl).

Verificado en producción: el índice renderiza en es/en con categorías, clases,
banderas e iconos; los assets y TinyMCE sirven 200; crear tema y responder guardan
las filas con el esquema correcto y las páginas las muestran (autor resuelto, HTML
saneado). Datos de prueba borrados: el foro arranca vacío.

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

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

@@ -1,8 +1,8 @@
 import { getTranslations, setRequestLocale } from 'next-intl/server'
 import { Link } from '@/i18n/navigation'
-import { getForumIndex } from '@/lib/forum'
+import { getForumIndex, resolvePosters, type ForumRow } from '@/lib/forum'
+import { formatForumDate } from '@/lib/forum-format'
 import { PageShell } from '@/components/PageShell'
-import { ForumSearchBox } from '@/components/ForumSearchBox'
 
 export const dynamic = 'force-dynamic'
 
@@ -10,53 +10,121 @@ export default async function ForumIndexPage({ params }: { params: Promise<{ loc
   const { locale } = await params
   setRequestLocale(locale)
   const t = await getTranslations('Forum')
-  const categories = await getForumIndex(locale)
+  const categories = await getForumIndex()
+
+  // Nombres de los últimos posteadores de todos los foros, en una sola consulta.
+  const posterIds = categories.flatMap((c) => c.forums.map((f) => f.last_poster).filter(Boolean) as number[])
+  const posters = await resolvePosters(posterIds)
+
+  function topicsLabel(n: number) {
+    return `${n} ${n === 1 ? t('topic') : t('topics')}`
+  }
+
+  function NormalRow({ f }: { f: ForumRow }) {
+    const iconSrc = f.type === 3 ? f.icon || '' : `/forum/forum_icons/${f.icon || 'forum_read'}.png`
+    return (
+      <div className="forum-row">
+        <div className="icon">
+          <Link href={`/forum/${f.id}`}>
+            <img src={iconSrc} height={53} width={56} alt={f.name} />
+          </Link>
+        </div>
+        <div className="forum_title_desc">
+          <Link href={`/forum/${f.id}`}>
+            <h1 style={f.colortitle && f.colortitle !== '0' ? { color: f.colortitle } : undefined}>{f.name}</h1>
+            {f.description && <h2>{f.description}</h2>}
+          </Link>
+        </div>
+        <div className="post" title={t('posts')}>
+          <p>{f.post_count}</p>
+        </div>
+        <div className="topics" title={t('topics')}>
+          <p>{f.topic_count}</p>
+        </div>
+        {f.last_topic_id && (
+          <div className="lastpost">
+            <p className="topic_title">
+              <Link href={`/forum/topic/${f.last_topic_id}`}>{f.last_topic_name}</Link>
+            </p>
+            {f.last_poster != null && (
+              <p className="by">{posters.get(f.last_poster)?.name ?? `#${f.last_poster}`}</p>
+            )}
+            <p className="postdate">{formatForumDate(f.last_time, locale)}</p>
+          </div>
+        )}
+      </div>
+    )
+  }
+
+  function ClassTile({ f }: { f: ForumRow }) {
+    return (
+      <div className={`class-row ${f.icon ?? ''}`}>
+        <div className="icon">
+          <Link href={`/forum/${f.id}`}>
+            <div className="image_icon" />
+          </Link>
+        </div>
+        <div className="info">
+          <Link href={`/forum/${f.id}`}>
+            <h1 style={f.colortitle && f.colortitle !== '0' ? { color: f.colortitle } : undefined}>{f.name}</h1>
+            <h2>{topicsLabel(f.topic_count)}</h2>
+          </Link>
+        </div>
+      </div>
+    )
+  }
+
+  function FlagTile({ f }: { f: ForumRow }) {
+    return (
+      <div className="class-row">
+        <div className="icon">
+          <Link href={`/forum/${f.id}`}>
+            <img className="image_icon" src={f.icon || ''} height={36} width={36} alt={f.name} />
+          </Link>
+        </div>
+        <div className="info">
+          <Link href={`/forum/${f.id}`}>
+            <h1>{f.name}</h1>
+            <h2>{topicsLabel(f.topic_count)}</h2>
+          </Link>
+        </div>
+      </div>
+    )
+  }
 
   return (
     <PageShell title={t('title')}>
-      <div className="box-content">
-        <div className="body-box-content">
-          <ForumSearchBox />
-          {categories.length === 0 ? (
-            <p className="second-brown centered">{t('noForums')}</p>
-          ) : (
-            categories.map((cat) => (
-              <div key={cat.id}>
-                <div className="title-content-h3">
-                  <h3 className="big-font">{cat.name}</h3>
+      <div className="forum-container">
+        {categories.length === 0 ? (
+          <p className="forum-empty">{t('noForums')}</p>
+        ) : (
+          categories.map((cat) => {
+            const tiles = cat.forums.filter((f) => f.type === 1 || f.type === 2)
+            const rows = cat.forums.filter((f) => f.type !== 1 && f.type !== 2)
+            return (
+              <div key={cat.id} className="forum-category" style={{ marginBottom: 40 }}>
+                <div className="category-title">{cat.name}</div>
+                {tiles.length > 0 && (
+                  <div
+                    style={{
+                      display: 'grid',
+                      gridTemplateColumns: 'repeat(auto-fill, minmax(200px, 1fr))',
+                      gap: 12,
+                      marginBottom: rows.length ? 12 : 0,
+                    }}
+                  >
+                    {tiles.map((f) => (f.type === 1 ? <ClassTile key={f.id} f={f} /> : <FlagTile key={f.id} f={f} />))}
+                  </div>
+                )}
+                <div style={{ display: 'grid', gap: 8 }}>
+                  {rows.map((f) => (
+                    <NormalRow key={f.id} f={f} />
+                  ))}
                 </div>
-                <table className="max-center-table">
-                  <tbody>
-                    {cat.forums.map((f) => (
-                      <tr key={f.id} className="team-center-table-tr">
-                        <td className="lefted separate">
-                          <Link href={`/forum/${f.id}`} className="yellow-info">
-                            {f.name}
-                          </Link>
-                          {f.description && <p className="second-brown small-font">{f.description}</p>}
-                        </td>
-                        <td className="real-info-box no-wrap-td">
-                          <span className="second-brown small-font">
-                            {f.topic_count} {t('topics')} · {f.post_count} {t('posts')}
-                          </span>
-                          {f.last_topic_id && (
-                            <p className="small-font">
-                              <Link href={`/forum/topic/${f.last_topic_id}`}>{f.last_topic_name}</Link>{' '}
-                              <span className="third-brown">
-                                {t('by')} {f.last_topic_poster}
-                              </span>
-                            </p>
-                          )}
-                        </td>
-                      </tr>
-                    ))}
-                  </tbody>
-                </table>
-                <br />
               </div>
-            ))
-          )}
-        </div>
+            )
+          })
+        )}
       </div>
     </PageShell>
   )