Commits
Del Resumen al editor: el panel toma forma
Umami desaparecía de la portada, el gráfico gana un selector de métrica y
Ayer se cerró la fase del Resumen y hoy he seguido con el resto del panel: analítica, rail (la barra lateral), Cuenta, Artículos y editor. Ha sido un día de rediseño constante. Voy por partes (si quieres ver el paso anterior, está en El día que producción no perdonó: dashboard, editor y estadísticas).
Umami no aparecía en la portada
El código fuente público de la portada no incluía el script de Umami (la herramienta que mide las visitas), aunque la configuración estaba activa. El motivo: index.astro se prerenderizaba durante el build (se generaba página estática al compilar) y no podía consultar la configuración dinámica de la API (la vía de comunicación con el servidor). He retirado el prerender: la portada ahora hace SSR (el servidor genera la página en cada visita), igual que el blog, y BaseLayout inserta el script en cada petición. Lo he verificado en el dominio real: / y /blog/ tienen exactamente una etiqueta de seguimiento.
Selector de métrica en el gráfico
El gráfico de Estadísticas ahora ofrece tres series: visitantes únicos, páginas vistas y visitas, con un segundo FilterBar (la franja de filtros) con la misma estética que el de días. Aquí hubo dos bugs dignos de mención. En el primer commit solo se añadieron los tipos y las opciones: faltaban el estado de React (los datos vivos del componente) y el JSX (el lenguaje para dibujar la interfaz), y en pantalla no cambió nada. En el segundo, la serie de visitas se consultaba en /metrics como si fuera temporal, y Umami responde 400 (petición incorrecta): la serie válida viene de /pageviews, en el campo sessions. También hice que el selector siempre se renderice: con un rango sin datos muestra un mensaje en lugar de esconder los filtros.
La lucha por alinear el rail
Para alinear el botón de plegar el rail con «Nuevo artículo» tuve que corregir al agente tres veces sobre la misma petición. Primero creó controles nuevos en lugar de reutilizar los existentes; después calculó posiciones absolutas a ojo, malinterpretando las anotaciones de las capturas. La solución final: medir en runtime (mientras la página se ejecuta) el borde inferior real de la acción principal y anclar ahí los controles; el de mostrar rail, además, al borde derecho del último KPI (cada cifra clave del panel). Lección: ante una referencia visual con coordenadas explícitas, nada de offsets fijos.
El rail deja de ser navegación
El rail derecho pasaba de «Accesos», que duplicaba la navegación, a un apartado «Tu blog»: continuar donde lo dejaste, el blog hoy (visitantes de 7 días y página más vista, con datos de Umami), el último artículo y tres placeholders (espacios reservados a contenido que aún no existe) con píldora «Próximamente»: comentarios pendientes, cola editorial y suscriptores. Con esto, el Resumen quedó cerrado y aprobado como página de referencia del panel, con los patrones bloqueados: paleta zinc/teal/rose, KPI en matriz con divisores, titulares de panel de 18px con punto verde y nada de navegación duplicada en el rail.
Cuenta, formularios y Artículos
Cuenta ha sido la primera página que replica la muestra: cabecera, paneles con punto de acento y rail de cristal con el módulo de sesión. Panel.astro pasa a ser el espejo Astro de la primitiva React (el componente original). Los formularios de perfil y contraseña han cambiado de arriba abajo: validación inline en blur (al salir del campo), mostrar/ocultar en los tres campos, medidor de fuerza con checklist en vivo y botón deshabilitado hasta que todo es válido. Y Artículos trajo una decisión de producto: sin rail, es una página de trabajo. Tabla nueva con ordenación, selección múltiple, acciones en lote, diálogo de confirmación propio (adiós, window.confirm), esqueletos de carga y fechas relativas.
El editor y una utilidad compartida
El editor ya tiene la estructura de referencia: cabecera con el botón Guardar siempre visible (el atributo form de HTML5 lo permite aunque el botón viva fuera del formulario), lienzo como tarjeta con Milkdown (el editor de texto rico) y opciones en el rail teal del sistema. El primer intento puso las opciones en un panel blanco propio; las he portado al rail del layout con el mismo patrón de portal que los borradores del Resumen. Y al ver ahí el mismo desfase de controles que ya había arreglado en el Resumen, la lógica ha acabado en utils/rail-alignment.ts, compartida por ambas páginas; las que no tienen acción principal conservan la altura base de CSS (el lenguaje de estilos del web).
Queda la fase de limpieza: PageHead.astro ha quedado huérfano y ya tiene fecha para desaparecer.