Fase 3 — Navegación móvil (barra de pestañas) y jerarquía de acciones
Fase 3 — Navegación móvil (barra de pestañas) y jerarquía de acciones — Estado: Completada
Objetivos
- Evitar que el header rebose en móvil. Añadir barra inferior con iconos (tabs) para Tareas, Grupos, Integraciones (calendario), Preferencias (alarma). Reducir peso visual de “Integraciones” en móvil.
- Consolidar “Completar” como acción primaria (checkbox/botón destacado); otras acciones (Reclamar/Soltar/Editar/Fecha) en segunda línea o menú contextual.
@ -113,6 +113,22 @@ Archivos a editar/crear
- apps/web/src/lib/ui/data/TaskItem.svelte
- Ajustar layout mobile-first: acciones secundarias y espaciado compacto.
Resultado (implementado)
- En móvil (≤768px):
- Header de desktop oculto; tabbar inferior con 5 pestañas: Tareas (✅), Grupos (👥), Recordatorios (⏰), Calendarios (📅) y Salir (🚪, POST).
- Barra superior mínima con título dinámico (“Tareas”, “Grupos”, “Recordatorios”, “Calendarios”), altura 24px y safe-area superior.
- Iconografía con emojis; icono + texto hasta 768px y solo icono en ≤480px.
- Safe-area inferior respetado y offset de Toast ajustado para no solapar la tabbar.
- En desktop (>768px):
- Header visible con navegación renombrada/reordenada: Tareas / Grupos / Recordatorios / Calendarios.
- Accesibilidad:
- aria-labels en pestañas y logout, estado activo visible, orden de tabulación coherente.
- TaskItem:
- “Completar/Deshacer” promovido como acción primaria; acciones secundarias (Reclamar/Soltar, Editar, Fecha) en segunda línea compacta en móvil.
- Descripciones sin truncar, manteniendo legibilidad.
- Integración:
- Cambios aplicados en AppShell y Toast, evitando solapes y reservando espacio en main.
Fase 4 — Optimización: endpoint “overview” y orden en servidor
Objetivos
- Evitar N peticiones en /app para el bloque “sin responsable”.
