Del Resumen al editor: el panel toma forma

Ayer se cerró la fase del Resumen y hoy he seguido con el resto del panel: analítica, rail, Cuenta, Artículos y editor. Ha sido un día de rediseño constante. Voy por partes.

Umami no aparecía en la portada

El código fuente público de la portada no incluía el script de Umami, aunque la configuración estaba activa. El motivo: index.astro se prerenderizaba durante el build y no podía consultar la configuración dinámica de la API. He retirado el prerender: la portada ahora hace SSR, 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 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 y el JSX, 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: 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 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. 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 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. Los formularios de perfil y contraseña han cambiado de arriba abajo: validación inline en blur, 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 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.

Queda la fase de limpieza: PageHead.astro ha quedado huérfano y ya tiene fecha para desaparecer.