CreaRack-SL

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

Vista limpiaEditar
Funcionalidadactivecreado Tue Apr 28#mobile#refresh-2026#frontend#cloudflare#workers#design-tokens#safe-area#css

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:

AntesDespué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(…) + blurcolor-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:

EndpointDato
GET /api/tasks?assignee=…Tareas pendientes del usuario actual
GET /api/alerts?active=1Alertas activas (banner solo si hay ≥1)
GET /api/team/presencePresencia del equipo
GET /api/biblioteca/wikiConteo de entradas wiki
GET /api/serversEstado 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

ElementoEstado
/me page realBottomNav la enlaza → 404. Pendiente.
Mobile review de páginas internas (/tasks, /reports, /wiki/*)Heredan shell desktop. Review separado.
Endpoint /api/worklogSin 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]]

Referenciado desde

Inicio
Yo