web-next: migrar toda la UI al tema real nw-ryu
Reescritura completa del frontend Next.js del sistema visual Tailwind "simulado" al tema Django original (nw-ryu), para paridad pixel con la web actual antes del cutover. - Tema real: copia de static/nw-themes/nw-ryu + favicons a public/, el layout carga el novavow-style.css real de ultimo (gana la cascada sobre Tailwind) + Font Awesome. - Shell replicando los partials Django: SiteHeader, Video, Social, Footer, ServerClock; home con estructura real (main-page/middle-content/...). - Helpers reutilizables: PageShell (main-page > middle-content > body-content > title-content) y ServiceBox (title-box-content + back-to-account). - Paginas migradas a clases reales del tema (fieldset/tool-button/char-box/ item-box/info-box-light/max-center-table/alert-message/botones reales), eliminando el markup Tailwind (.nw-btn/.nw-card/.nw-input): auth (login/register/recover/reset/select-account/activate), cuenta + servicios de personaje (revive/unstuck/rename/customize/ change-race/change-faction/level-up/gold/transfer + pago Stripe), ajustes (change-password/change-email/security-token), comunidad (vote-points/recruit/battlepay), foro completo, y admin (indice + 7 secciones + los Admin*Manager). - Se conserva el bilingue (next-intl); claves nuevas en messages/es|en.json. Verificado: typecheck + build OK; rutas protegidas 307->login; sin MISSING_MESSAGE; cero Tailwind residual (solo .nw-tool-btn/.nw-page, clases propias en globals.css). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -42,75 +42,76 @@ export function AdminForumManager({ initial }: { initial: Group[] }) {
|
||||
}
|
||||
}
|
||||
|
||||
const field = 'nw-input'
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
{/* Alta de categoría */}
|
||||
<form
|
||||
onSubmit={(e) => {
|
||||
e.preventDefault()
|
||||
if (catForm.name.trim()) call('/api/admin/forum/category', 'POST', { name: catForm.name, order: Number(catForm.order) }).then((ok) => ok && setCatForm({ name: '', order: '0' }))
|
||||
}}
|
||||
className="flex flex-wrap items-end gap-2 nw-card"
|
||||
className="admin-form info-box-light separate2"
|
||||
>
|
||||
<label className="flex-1 text-sm">
|
||||
<span className="mb-1 block text-nw-muted">{t('newCategory')}</span>
|
||||
<input value={catForm.name} onChange={(e) => setCatForm({ ...catForm, name: e.target.value })} placeholder={t('categoryName')} className={field} />
|
||||
</label>
|
||||
<label className="w-20 text-sm">
|
||||
<span className="mb-1 block text-nw-muted">{t('order')}</span>
|
||||
<input type="number" value={catForm.order} onChange={(e) => setCatForm({ ...catForm, order: e.target.value })} className={field} />
|
||||
</label>
|
||||
<button type="submit" disabled={busy} className="nw-btn disabled:opacity-60">{t('create')}</button>
|
||||
<span className="second-brown">{t('newCategory')}</span>
|
||||
<input value={catForm.name} onChange={(e) => setCatForm({ ...catForm, name: e.target.value })} placeholder={t('categoryName')} />
|
||||
<span className="second-brown">{t('order')}</span>
|
||||
<input type="number" value={catForm.order} onChange={(e) => setCatForm({ ...catForm, order: e.target.value })} />
|
||||
<button type="submit" disabled={busy}>{t('create')}</button>
|
||||
</form>
|
||||
<br />
|
||||
|
||||
{initial.length === 0 && <p className="text-amber-200/70">{t('noCategories')}</p>}
|
||||
{initial.length === 0 && <p className="second-brown centered">{t('noCategories')}</p>}
|
||||
|
||||
{initial.map(({ category, forums }) => (
|
||||
<section key={category.id} className="nw-card">
|
||||
<div className="mb-3 flex items-center justify-between gap-2">
|
||||
<h2 className="text-lg font-semibold text-nw-gold-light">
|
||||
{category.name} <span className="text-xs text-nw-muted">#{category.order}</span>
|
||||
</h2>
|
||||
<button
|
||||
onClick={() => confirm(t('confirmDelete')) && call(`/api/admin/forum/category/${category.id}`, 'DELETE')}
|
||||
disabled={busy}
|
||||
className="rounded border border-red-900/60 px-2 py-1 text-xs text-red-400 hover:bg-red-950/40 disabled:opacity-60"
|
||||
>
|
||||
{t('delete')}
|
||||
</button>
|
||||
<div key={category.id} className="inline-div" style={{ display: 'block' }}>
|
||||
<div className="title-content-h3">
|
||||
<h3 className="big-font">
|
||||
{category.name} <span className="third-brown small-font">#{category.order}</span>{' '}
|
||||
<button
|
||||
onClick={() => confirm(t('confirmDelete')) && call(`/api/admin/forum/category/${category.id}`, 'DELETE')}
|
||||
disabled={busy}
|
||||
className="nw-tool-btn red-info2"
|
||||
>
|
||||
{t('delete')}
|
||||
</button>
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
{/* Foros de la categoría */}
|
||||
<ul className="mb-3 divide-y divide-amber-900/40">
|
||||
{forums.length === 0 && <li className="py-2 text-sm text-nw-muted">{t('noForums')}</li>}
|
||||
{forums.map((f) => (
|
||||
<li key={f.id} className="flex items-center justify-between gap-3 py-2">
|
||||
<div className="min-w-0">
|
||||
<p className="font-medium text-amber-300">
|
||||
{f.name} {f.visibility === 0 && <span className="text-xs text-red-400">({t('hidden')})</span>}
|
||||
</p>
|
||||
{f.description && <p className="truncate text-xs text-nw-muted">{f.description}</p>}
|
||||
</div>
|
||||
<div className="flex shrink-0 items-center gap-2">
|
||||
<button
|
||||
onClick={() => call(`/api/admin/forum/${f.id}`, 'PATCH', { visibility: f.visibility === 0 })}
|
||||
disabled={busy}
|
||||
className="nw-btn-ghost text-xs disabled:opacity-60"
|
||||
>
|
||||
{f.visibility === 0 ? t('show') : t('hide')}
|
||||
</button>
|
||||
<button
|
||||
onClick={() => confirm(t('confirmDelete')) && call(`/api/admin/forum/${f.id}`, 'DELETE')}
|
||||
disabled={busy}
|
||||
className="rounded border border-red-900/60 px-2 py-1 text-xs text-red-400 hover:bg-red-950/40 disabled:opacity-60"
|
||||
>
|
||||
{t('delete')}
|
||||
</button>
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<table className="max-center-table">
|
||||
<tbody>
|
||||
{forums.length === 0 && (
|
||||
<tr>
|
||||
<td className="second-brown centered">{t('noForums')}</td>
|
||||
</tr>
|
||||
)}
|
||||
{forums.map((f) => (
|
||||
<tr key={f.id} className="team-center-table-tr">
|
||||
<td className="lefted separate">
|
||||
<span className="yellow-info">{f.name}</span>{' '}
|
||||
{f.visibility === 0 && <span className="red-info2 small-font">({t('hidden')})</span>}
|
||||
{f.description && <p className="third-brown small-font">{f.description}</p>}
|
||||
</td>
|
||||
<td className="real-info-box no-wrap-td">
|
||||
<button
|
||||
onClick={() => call(`/api/admin/forum/${f.id}`, 'PATCH', { visibility: f.visibility === 0 })}
|
||||
disabled={busy}
|
||||
className="nw-tool-btn"
|
||||
>
|
||||
{f.visibility === 0 ? t('show') : t('hide')}
|
||||
</button>{' '}
|
||||
<button
|
||||
onClick={() => confirm(t('confirmDelete')) && call(`/api/admin/forum/${f.id}`, 'DELETE')}
|
||||
disabled={busy}
|
||||
className="nw-tool-btn red-info2"
|
||||
>
|
||||
{t('delete')}
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
{/* Alta de foro en esta categoría */}
|
||||
<form
|
||||
@@ -122,13 +123,13 @@ export function AdminForumManager({ initial }: { initial: Group[] }) {
|
||||
(ok) => ok && setFF(category.id, { name: '', description: '', order: '0' }),
|
||||
)
|
||||
}}
|
||||
className="grid gap-2 rounded-lg border border-nw-border/50 bg-nw-panel-2/30 p-3 sm:grid-cols-[1fr_1fr_auto]"
|
||||
className="admin-form separate"
|
||||
>
|
||||
<input value={ff(category.id).name} onChange={(e) => setFF(category.id, { name: e.target.value })} placeholder={t('forumName')} maxLength={45} className={field} />
|
||||
<input value={ff(category.id).description} onChange={(e) => setFF(category.id, { description: e.target.value })} placeholder={t('forumDescription')} className={field} />
|
||||
<button type="submit" disabled={busy} className="nw-btn text-sm disabled:opacity-60">{t('addForum')}</button>
|
||||
<input value={ff(category.id).name} onChange={(e) => setFF(category.id, { name: e.target.value })} placeholder={t('forumName')} maxLength={45} />
|
||||
<input value={ff(category.id).description} onChange={(e) => setFF(category.id, { description: e.target.value })} placeholder={t('forumDescription')} />
|
||||
<button type="submit" disabled={busy}>{t('addForum')}</button>
|
||||
</form>
|
||||
</section>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
|
||||
Reference in New Issue
Block a user