- Por defecto: abiertos los grupos con al menos una tarea abierta; colapsados los que no tienen tareas abiertas.
- Limpieza de IDs obsoletos; restauración en onMount, SSR-safe (sin parpadeos apreciables).
- Accesibilidad:
- Foco visible en tabs; uso de <details>/<summary> con estado coherente con aria-expanded implícito.
Criterios de aceptación resumidos
Archivos editados
- apps/web/src/lib/ui/layout/AppShell.svelte (renombrado a “Calendarios”, atenuación móvil, offsets).
- apps/web/src/routes/app/groups/+page.svelte (persistencia de colapsado por usuario + defaults basados en tareas).
- apps/web/src/routes/app/+page.svelte (textos de estados vacíos opción B).
- apps/web/src/lib/ui/feedback/Toast.svelte (offset móvil contra tabbar).
Criterios de aceptación (OK)
- /app muestra dos secciones con todas las tareas requeridas; sin truncar descripciones; orden conmutado.
- /app/groups muestra todas las tareas abiertas por grupo; secciones colapsables; “Unassigned first” operativo.
- Completar y Deshacer completar funcionan desde ambas páginas; ventana de 24h configurable; gating correcto.
@ -187,6 +204,127 @@ Criterios de aceptación resumidos
- Navegación móvil no rebosa; barra inferior accesible.
- Asignados: conteo visible, “tú” resaltado y lista en popover con wa.me.
Fase 7 — Densidad y acciones en una sola fila (TaskItem)
Objetivos
- Compactar la fila de acciones de TaskItem:
- Convertir el botón/indicador de responsables en “icono + número” sin texto (“personas asignadas” → solo icono + contador), manteniendo aria-label y tooltip accesibles.
- Ubicar en la misma fila: Responsables (icono+conteo), Reclamar/Soltar, Editar, Fecha.
- Reducir padding vertical excesivo para ganar densidad, manteniendo objetivos de accesibilidad (área táctil ≈44px y foco visible).
Plan de trabajo
1) TaskItem.svelte
- Sustituir texto “Responsables: n” por icono + n; aria-label dinámico (“n responsables; tú incluido/excluido”).
- Reorganizar contenedor de acciones para una sola fila en móvil y desktop; permitir wrap en pantallas muy pequeñas si es necesario.
- Ajustar tamaños (icon-size 16–18px) y gaps a 6–8px.
2) Estilos globales y utilidades
- Revisar variables de espacio en tokens.css/base.css; reducir ligeramente los márgenes/paddings verticales de:
- Listas de tareas (ul.list > li o contenedor del TaskItem).
- Card.svelte (padding vertical).
- AppShell .main en móvil (si procede).
- Mantener contraste y focus-visible.
3) QA
- Verificar que en ≤480px no haya desbordes; que los tooltips/aria sean correctos; y targets táctiles respeten accesibilidad.
Archivos a editar
- apps/web/src/lib/ui/data/TaskItem.svelte (layout de acciones, icono+conteo).
- apps/web/src/lib/styles/base.css (ajustes finos de paddings/gaps).
- apps/web/src/lib/styles/tokens.css (si se decide ajustar variables globales de spacing).
- TaskItem muestra todas las acciones en una sola fila en móvil estándar (≥360px) sin saltos.
- El indicador de responsables conserva accesibilidad (aria-label/tooltip) y se entiende su semántica.
- La densidad aumenta perceptiblemente sin comprometer legibilidad ni foco.
Fase 8 — Orden por fecha o por grupo (corrección y alineación)
Objetivos
- Alinear el comportamiento de “Orden: Fecha | Grupo” con expectativas:
- Fecha: due_date asc; NULL al final; estable por id.
- Grupo: agrupar por grupo (Personal al final); dentro de cada grupo ordenar por due_date asc; NULL al final.
- Que el orden seleccionado afecte coherentemente a las secciones relevantes (asignadas y/o sin responsable), evitando inconsistencias entre cliente y servidor.
Plan de trabajo
1) Auditoría actual
- Revisar apps/web/src/routes/app/+page.server.ts y el consumo de /api/me/tasks/overview.
- Revisar apps/web/src/routes/app/+page.svelte (groupByGroup/sortByDue) para evitar doble orden contradictorio.
2) Backend
- apps/web/src/routes/api/me/tasks/overview/+server.ts: asegurar order=due|group_then_due y aplicar NULLS LAST consistente.
- Añadir tests que validen el orden en ambos modos.
3) UI
- apps/web/src/routes/app/+page.server.ts: pasar order al backend y confiar en su orden siempre que sea posible.
- apps/web/src/routes/app/+page.svelte: limitar orden en cliente a casos estrictamente necesarios; evitar reordenar lo ya ordenado por servidor.
4) QA y tests
- Casos con due_date iguales, NULLs, mezcla de grupos, y tareas personales.
- El cambio de orden se refleja de forma predecible y consistente en toda la página /app.
- Tests cubren due_date NULL, empates y orden de grupos (Personal al final).
Fase 9 — Semilla de desarrollo enriquecida
Objetivos
- Disponer de una BD de desarrollo amplia para probar casos reales:
- Grupos con y sin tareas; tareas personales; varias tareas sin responsable; tareas con múltiples responsables; tareas completadas recientemente y antiguas; due_dates en pasado/presente/sin fecha.
- Varios usuarios para validar “tú” y múltiples assignees.
