Commits
Del Resum a l''editor: el panell agafa forma
Umami desapareixia de la portada, el gràfic guanya un selector de mètrica
Ahir es va tancar la fase del Resum i avui he seguit amb la resta del panell: analítica, rail (la barra lateral), Cuenta, Articles i editor. Ha estat un dia de redisseny constant. Vaig per parts (si vols veure el pas anterior, és a El dia que producció no va perdonar: dashboard, editor i estadístiques).
Umami no apareixia a la portada
El codi font públic de la portada no incloïa el script d'Umami (l'eina que mesura les visites), tot i que la configuració estava activa. El motiu: index.astro es prerenderitzava durant el build (es generava pàgina estàtica en compilar) i no podia consultar la configuració dinàmica de l'API (la via de comunicació amb el servidor). He retirat el prerender: la portada ara fa SSR (el servidor genera la pàgina a cada visita), igual que el bloc, i BaseLayout insereix el script a cada petició. Ho he verificat al domini real: / i /blog/ tenen exactament una etiqueta de seguiment.
Selector de mètrica al gràfic
El gràfic d'Estadístiques ara ofereix tres sèries: visitants únics, pàgines vistes i visites, amb un segon FilterBar (la franja de filtres) amb la mateixa estètica que el de dies. Aquí hi va haver dos bugs dignes de menció. Al primer commit només es van afegir els tipus i les opcions: faltaven l'estat de React (les dades vives del component) i el JSX (el llenguatge per dibuixar la interfície), i a la pantalla no va canviar res. Al segon, la sèrie de visites es consultava a /metrics com si fos temporal, i Umami respon 400 (petició incorrecta): la sèrie vàlida ve de /pageviews, al camp sessions. També vaig fer que el selector sempre es renderitzi: amb un rang sense dades mostra un missatge en lloc d'amagar els filtres.
La lluita per alinear el rail
Per alinear el botó de plegar el rail amb «Nuevo artículo» vaig haver de corregir l'agent tres vegades sobre la mateixa petició. Primer va crear controls nous en lloc de reutilitzar els existents; després va calcular posicions absolutes a ull, malinterpretant les anotacions de les captures. La solució final: mesurar en runtime (mentre la pàgina s'executa) la vora inferior real de l'acció principal i ancorar-hi els controls; el de mostrar rail, a més, a la vora dreta de l'últim KPI (cada xifra clau del panell). Lliçó: davant d'una referència visual amb coordenades explícites, res d'offsets fixos.
El rail deixa de ser navegació
El rail dret passava de «Accesos», que duplicava la navegació, a un apartat «Tu blog»: continuar on ho vas deixar, el bloc avui (visitants de 7 dies i pàgina més vista, amb dades d'Umami), l'últim article i tres placeholders (espais reservats a contingut que encara no hi és) amb píndola «Pròximament»: comentaris pendents, cua editorial i subscriptors. Amb això, el Resum va quedar tancat i aprovat com a pàgina de referència del panell, amb els patrons bloquejats: paleta zinc/teal/rose, KPI en matriu amb divisòries, titulares de panell de 18px amb punt verd i res de navegació duplicada al rail.
Cuenta, formularis i Articles
Cuenta ha estat la primera pàgina que replica la mostra: capçalera, panells amb punt d'accent i rail de cristall amb el mòdul de sessió. Panel.astro passa a ser el mirall Astro de la primitiva React (el component original). Els formularis de perfil i contrasenya han canviat de dalt a baix: validació inline en blur (mentre surts del camp), mostrar/amagar als tres camps, medidor de força amb checklist en viu i botó deshabilitat fins que tot és vàlid. I Articles ha portat una decisió de producte: sense rail, és una pàgina de treball. Taula nova amb ordenació, selecció múltiple, accions en lot, diàleg de confirmació propi (adeu, window.confirm), esquelets de càrrega i dates relatives.
L'editor i una utilitat compartida
L'editor ja té l'estructura de referència: capçalera amb el botó Guardar sempre visible (l'atribut form d'HTML5 ho permet encara que el botó visqui fora del formulari), llenç com a targeta amb Milkdown (l'editor de text ric) i opcions al rail teal del sistema. El primer intent va posar les opcions en un panell blanc propi; les he portat al rail del layout amb el mateix patró de portal que els borradors del Resum. I en veure-hi el mateix desfase de controls que ja havia arreglat al Resum, la lògica ha acabat a utils/rail-alignment.ts, compartida per totes dues pàgines; les que no tenen acció principal conserven l'alçada base de CSS (el llenguatge d'estils del web).
Queda la fase de neteja: PageHead.astro ha quedat orfe i ja té data per desaparèixer.