CreaRack-SL

Incidente s60 (2026-05-13): BottomNav visible en desktop + badges hardcoded desincronizados

Vista limpiaEditar
Incidentedraftcreado Wed May 13#shell#incidente#cloudflare#d1#ux#reliability#sidebar#css

Incidente s60 — Regresiones de shell detectadas por Edu (2026-05-13)

Dos regresiones detectadas en la sesión s60 del 13 de mayo de 2026 y corregidas en el mismo commit (689023f).

Resumen

#BugSeveridadEstado
1<BottomNav> visible en viewport desktopUX — cosmético✅ Resuelto en 689023f
2Badges del sidebar hardcoded, desincronizados de D1Dato incorrecto al usuario✅ Resuelto en 689023f

Bug 1: BottomNav aparece en pantallas de escritorio

Síntoma

El componente <BottomNav> (barra de navegación inferior fija, propia de la vista mobile) aparecía renderizado en resoluciones de escritorio.

Causa raíz

El componente src/components/shell/BottomNav.tsx usa className="mobile-nav". La media query que debía ocultarlo en desktop apuntaba a .bottom-nav — una clase legacy huérfana que ningún componente JSX/TSX usa. Resultado: la regla nunca disparaba y el BottomNav quedaba siempre visible.

Confirmado con grep: .bottom-nav solo aparecía en las 2 reglas obsoletas de globals.css.

Fix aplicado

  • src/styles/mobile.css: añadida media query (min-width: 769px) que oculta .mobile-nav con display: none !important.
  • src/styles/globals.css: eliminadas las 2 reglas .bottom-nav legacy. Conservada la media query @media (max-width: 768px) que oculta .app .header / .sidebar en mobile (esa sí era funcional).

Bug 2: Badges del sidebar hardcoded desincronizados

Síntoma

El sidebar mostraba Tareas=9, Noticias=2, Alertas=1 de forma estática, independientemente del estado real de la base de datos.

Edu creó la task #27 el 13-05-2026. El sidebar seguía mostrando 9. Una consulta get_dashboard al MCP confirmó 22 tareas pending reales.

Causa raíz

Los valores de badge estaban hardcoded en el array NAV de Sidebar.tsx:

// ANTES (hardcoded)
{ title: 'Tareas',   icon: 'check', href: '/tasks',       badge: 9 },
{ title: 'Noticias', icon: 'news',  href: '/news',        badge: 2 },
{ title: 'Alertas',  icon: 'bell',  href: '/alerts/admin', badge: 1 },

No había ningún mecanismo para actualizar estos valores.

Fix aplicado

  • Creado nuevo endpoint GET /api/sidebar-counts (CF Pages Function) con 4 COUNT queries ligeras en D1, cachéado 60s private.
  • Sidebar.tsx refactorizado: la propiedad badge?: number del tipo NavDef sustituida por countKey? que apunta a un campo del response del endpoint. El componente hace fetch en useEffect al montarse.
  • Si el fetch falla o el valor es 0, el badge no se renderiza (fail-safe).

Documentación del endpoint: [[entity—shell—endpoint—sidebar-counts]]

Archivos modificados

ArchivoCambio
functions/api/sidebar-counts/index.tsNuevo — endpoint CF Pages Function
src/components/shell/Sidebar.tsxRefactor badges hardcoded → countKey + useEffect
src/styles/globals.cssEliminadas 2 reglas .bottom-nav legacy
src/styles/mobile.cssAñadida media query (min-width: 769px) para .mobile-nav

Timeline

Hora (CEST)Evento
~20:00Edu detecta BottomNav visible en desktop y badges incorrectos
20:08Commit 689023f pushed a main por @Esquembri — ambas regresiones resueltas

Lecciones

  1. Las clases CSS deben coincidir con el componente real: al renombrar una clase (.bottom-nav → .mobile-nav) hay que actualizar todas las media queries que la referencian.
  2. Los badges de UI nunca deben ser hardcoded: conectarlos a la fuente de verdad (D1/API) desde el primer día, aunque sea con un endpoint simple.
  3. El caché private, max-age=60 es un buen compromiso para datos de badge: el sidebar se actualiza en ~1 minuto sin generar presión sobre D1.

Véase también

  • [[entity—shell—endpoint—sidebar-counts]]
  • [[workspace—que-es-workspace]]
  • [[crearack—conceptos—interfaz-general]]

Referenciado desde

Inicio
Yo