Fase 1 (isla 2): estado del servidor de la portada en React/TSX

Segunda isla de la home: la tabla de estado (nombre, online, login, hora,
dirección) pasa de plantilla Django a componente React.

- API: home_status_api -> /api/home/status/ (server_name, address, expansion,
  online_characters, status). Reutiliza check_server_status y
  get_online_characters_count de views/pages.
- React: ServerStatus.tsx (fetch + reloj en vivo con setInterval, mismas clases
  CSS). El entry home.tsx ahora monta dos islas: #home-news-app y #home-status-app.
- partials/noticias.html: la <table> de estado se sustituye por el contenedor.

Verificado: check OK, ambos endpoints 200, la home monta las dos islas.

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

frontend/src/components/ServerStatus.tsx

@@ -0,0 +1,74 @@
+import { useEffect, useState } from 'react'
+import type { ServerStatusData } from '../types'
+
+function useClock(): string {
+  const [time, setTime] = useState(() => new Date().toLocaleTimeString('es-ES'))
+  useEffect(() => {
+    const id = setInterval(() => setTime(new Date().toLocaleTimeString('es-ES')), 1000)
+    return () => clearInterval(id)
+  }, [])
+  return time
+}
+
+export function ServerStatus() {
+  const [data, setData] = useState<ServerStatusData | null>(null)
+  const clock = useClock()
+
+  useEffect(() => {
+    let cancelled = false
+    fetch('/api/home/status/', { headers: { Accept: 'application/json' } })
+      .then((r) => {
+        if (!r.ok) throw new Error(`HTTP ${r.status}`)
+        return r.json()
+      })
+      .then((d: ServerStatusData) => {
+        if (!cancelled) setData(d)
+      })
+      .catch(() => {
+        if (!cancelled) setData(null)
+      })
+    return () => {
+      cancelled = true
+    }
+  }, [])
+
+  const online = data ? data.online_characters : 0
+  const status = data ? data.status : 'Offline'
+  const loginClass = status === 'Online' ? 'green-info' : 'red-info'
+
+  return (
+    <table className="max-center-table">
+      <tbody>
+        <tr>
+          <td className="yellow-info">
+            {data?.server_name ?? '—'}{' '}
+            <span className="blue-info small-font">{data?.expansion ?? ''}</span>
+          </td>
+          <td className="real-info-box green-info">{online}</td>
+        </tr>
+        <tr>
+          <td>Login</td>
+          <td className={`real-info-box ${loginClass}`}>{status}</td>
+        </tr>
+        <tr>
+          <td>Hora</td>
+          <td className="real-info-box">
+            <span id="server-time">{clock}</span>
+          </td>
+        </tr>
+        <tr>
+          <td colSpan={2}>
+            <hr />
+          </td>
+        </tr>
+        <tr className="centered">
+          <td colSpan={2}>
+            <p>
+              <span>{data?.address ?? ''}</span>
+            </p>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  )
+}

frontend/src/entries/home.tsx

@@ -1,14 +1,16 @@
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 import { NewsList } from '../components/NewsList'
+import { ServerStatus } from '../components/ServerStatus'
 
-// Isla de la portada: monta la lista de noticias (React) donde Django deja
-// el contenedor #home-news-app. El resto de la página sigue siendo Django.
-const el = document.getElementById('home-news-app')
-if (el) {
-  createRoot(el).render(
-    <StrictMode>
-      <NewsList />
-    </StrictMode>,
-  )
+// Islas de la portada: cada componente React se monta donde Django deja su
+// contenedor. El resto de la página sigue siendo Django.
+function mount(id: string, node: React.ReactElement) {
+  const el = document.getElementById(id)
+  if (el) {
+    createRoot(el).render(<StrictMode>{node}</StrictMode>)
+  }
 }
+
+mount('home-news-app', <NewsList />)
+mount('home-status-app', <ServerStatus />)

frontend/src/types.ts

@@ -5,3 +5,11 @@ export interface Noticia {
   contenido: string
   enlace: string | null
 }
+
+export interface ServerStatusData {
+  server_name: string | null
+  address: string | null
+  expansion: string
+  online_characters: number
+  status: 'Online' | 'Offline'
+}