Mobile Review · Design Refresh 2026 (sesión 36)

Iniciativa: Design Refresh 2026 — pendiente abierto desde 2026-04-18, cerrado en sesión 36 del 2026-04-28.
Autor: Edu (@Esquembri) · Claude Code Opus 4.7 1M
Commit: 8132309 — 7 archivos, ~200 LOC nuevas

Resumen

Cierre completo del “Mobile Review” del Design Refresh 2026. El commit agrupa cuatro bloques funcionales que transforman la experiencia mobile de CreaRack Pro: integración de tokens de sistema CSS, conexión a APIs reales, soporte de safe-area en iOS y resolución de usuario vía Cloudflare Access.

Build de validación: astro build verde, 324 páginas generadas en 7.31s.

Bloque A — Mobile usa tokens del sistema

Archivo principal: src/components/variants/mobile/V1HomeVivo.tsx

Refactor completo del componente home mobile para eliminar colores y tamaños literales hardcoded:

Antes	Después
Colores hex absolutos (objeto `c`)	`var(--bg)`, `var(--fg)`, `var(--accent)`, `var(--border)`, …
`fontSize: 12.5 / 14 / 15` (px literales)	Valores `rem` (regla: `14px = 1rem`)
`rgba(…) + blur`	`color-mix(in oklab, var(--bg) 85%, transparent)`

Impacto: Los cambios de tema, accent y fontSize en PreferencesPanel ahora impactan correctamente al mobile. Antes, la shell mobile era ajena al sistema de diseño.

Bloque B — Mobile conecta a APIs reales

Archivo principal: src/components/variants/mobile/V1HomeVivo.tsx

Nuevo hook useMobileData() que carga datos en paralelo con Promise.all:

Endpoint	Dato
`GET /api/tasks?assignee=…`	Tareas pendientes del usuario actual
`GET /api/alerts?active=1`	Alertas activas (banner solo si hay ≥1)
`GET /api/team/presence`	Presencia del equipo
`GET /api/biblioteca/wiki`	Conteo de entradas wiki
`GET /api/servers`	Estado de servidores

Mejoras adicionales en el mismo bloque:

Saludo dinámico según hora (“Buenos días / tardes / noches”).
Fecha real con Intl.DateTimeFormat('es-ES').
getCurrentUser() dinámico (no constante).
Empty states reales (“Sin tareas pendientes 🎉”).
BottomNav, QUICK cards y FAB: de <button> con estado local a <a href> con rutas reales (/tasks, /notes, /wiki, /me, /alerts, /dashboard). La shell mobile ya no está atrapada en home.

Bloque C — Safe-area iOS

Archivo principal: src/components/variants/mobile/V1HomeVivo.tsx

Implementación de viewport-fit=cover y variables de entorno CSS para notch/home-indicator de iPhone:

viewport meta: viewport-fit=cover
header sticky: padding-top = calc(14px + env(safe-area-inset-top))
BottomNav:     padding-bottom = calc(8px + env(safe-area-inset-bottom))
root scroll:   padding-bottom = calc(96px + env(safe-area-inset-bottom))
FAB:           bottom = calc(92px + env(safe-area-inset-bottom))

Bloque D — CF Access → current-user

Archivos: functions/api/me.ts, src/lib/prefs.ts, src/components/MobileApp.tsx, src/components/DesktopApp.tsx

Ver página dedicada → [[entity—workers—endpoint—api-me]] y [[entity—frontend—function—resolve-user-cf-access]].

Resumen:

Nuevo CF Pages Function GET /api/me lee el header Cf-Access-Authenticated-User-Email.
Mapeo estático email → nombre: Edu / Dani / Txell.
Helper resolveUserFromCfAccess() en prefs.ts llama /api/me, actualiza localStorage y emite prefs-user-change si el usuario difiere del actual.
Disparado en useEffect al montar MobileApp y DesktopApp.
Fallback a 'Edu' en dev local (sin CF Access activo).
Motivo del diseño runtime: AppLayout.astro es output: 'static' (prerendered) y no puede leer Astro.request.headers. La CF Function vive en runtime.

Pendientes abiertos tras esta sesión

Elemento	Estado
`/me` page real	BottomNav la enlaza → 404. Pendiente.
Mobile review de páginas internas (`/tasks`, `/reports`, `/wiki/*`)	Heredan shell desktop. Review separado.
Endpoint `/api/worklog`	Sin implementar; widget eliminado del home mobile.

Validación

npx astro build ✅ verde — 324 páginas, 7.31s.
Warning Astro.request.headers is not available on prerendered pages ✅ resuelto moviendo CF resolve a runtime Function.
Errores TS preexistentes (oauth, NewsList, NotesGrid, ReportsPanel, TaskManager) — no afectan a archivos tocados.

Véase también

[[entity—workers—endpoint—api-me]]
[[entity—frontend—function—resolve-user-cf-access]]
[[entity—frontend—component—v1-home-vivo]]
[[entity—frontend—component—mobile-app]]
[[entity—frontend—component—desktop-app]]