taskbot/docs/plan-diseno-web.md

Plan de Diseño Web: Claridad de interacción, “tareas mías”, deadlines e identidad visual por grupo

Objetivos

• Distinguir de un vistazo qué elementos son clicables (box-shadow y estados).
• Señalar cuando “tú” estás entre los responsables (acento visual claro).
• Sustituir el emoji de calendario por un icono más entendible de “fecha límite” (SVG consistente).
• Dar color estable y reconocible a las pills de grupo con una paleta accesible y determinista.

Fases

Fase B1 — Paleta determinista de grupos (COMPLETADA)

• Idea: asignar una de 12–15 combinaciones (border, fondo tenue, texto) por group_id usando un hash determinista (mod N). Si hay más grupos que colores, se repiten.
• Paleta sugerida (AA sobre fondo claro):
  1. Blue: border #2563EB, fondo #DBEAFE, texto #1E3A8A
  2. Indigo: border #4F46E5, fondo #E0E7FF, texto #312E81
  3. Violet: border #7C3AED, fondo #EDE9FE, texto #4C1D95
  4. Purple: border #9333EA, fondo #F3E8FF, texto #581C87
  5. Fuchsia: border #C026D3, fondo #FAE8FF, texto #701A75
  6. Pink: border #DB2777, fondo #FCE7F3, texto #831843
  7. Rose: border #E11D48, fondo #FFE4E6, texto #881337
  8. Red: border #DC2626, fondo #FEE2E2, texto #7F1D1D
  9. Orange: border #EA580C, fondo #FFE7D1 (aprox.), texto #7C2D12
  10. Amber: border #D97706, fondo #FEF3C7, texto #78350F
  11. Green: border #16A34A, fondo #DCFCE7, texto #14532D
  12. Teal: border #0D9488, fondo #CCFBF1, texto #134E4A
• Implementación:
  • Crear apps/web/src/lib/utils/groupColor.ts con una función colorForGroup(groupId) → { border, bg, text } usando hash ligero (p. ej., sumatoria de charCodes) y modulo N.
  • Aplicar en la pill de grupo de TaskItem.svelte y donde aparezcan chips/etiquetas de grupo.

Fase B2 — Icono de “fecha límite” en SVG (COMPLETADA)

• Sustituir emoji de calendario por un icono más semántico:
  • Recomendación: “clock” (reloj) o “hourglass” (arena).
• Implementación:
  • Crear apps/web/src/lib/ui/icons/Clock.svelte (y/o Hourglass.svelte) como SVG inline con fill="currentColor", tamaño 16–18px.
  • Reemplazar en TaskItem.svelte donde se muestra due_date. Mantener aria-label/tooltip pertinentes.

Fase B3 — Indicador cuando “tú” estás asignado

• Mantener icono/contador de responsables y añadir acento visual si el usuario actual está entre los assignees:
  • Anillo/borde con el color primario alrededor del icono/badge o un pequeño dot superpuesto.
  • aria-label dinámico: “n responsables; tú incluido” | “n responsables; tú excluido”.
  • Tooltip opcional en desktop.
• Implementación:
  • En TaskItem.svelte, derivar isMine comprobando si App.locals.userId (o prop userId) ∈ assignees[] y aplicar clase/modificador que active el acento.

Fase B4 — Box-shadow solo en elementos interactivos

• Principio: toda superficie clicable debe tener pistas visuales coherentes (cursor, sombra/hover, focus visible). Superficies no interactivas no deben tener sombra.
• Implementación:
  • apps/web/src/lib/styles/tokens.css: definir variables de sombras (--shadow-sm, --shadow-md, --shadow-focus).
  • apps/web/src/lib/styles/base.css: patrones de hover/focus/active para botones, links con rol=button y chips clicables (sombra sutil en reposo, incremento ligero en hover/focus-visible, compresión en active).
  • Mantener focus-visible claro (ring) y contraste AA.
• QA: verificar en móvil ≤480px que no haya desbordes; mantener targets ~44px sin inflar paddings.

Accesibilidad

• Contraste AA para texto sobre fondo en las pills de grupo.
• Focus visible en todos los elementos interactivos.
• aria-label correcto en iconos y tooltips; roles adecuados si se usan popovers/modales.

Archivos a editar/crear

Crear

• apps/web/src/lib/utils/groupColor.ts (hash + paleta).
• apps/web/src/lib/ui/icons/Clock.svelte (y/u Hourglass.svelte) (SVG).

Editar

• apps/web/src/lib/ui/data/TaskItem.svelte
  • Aplicar paleta determinista en pill de grupo.
  • Sustituir emoji de fecha por SVG “deadline”.
  • Añadir acento visual “isMine” en el indicador de responsables con aria/tooltip.
• apps/web/src/lib/styles/tokens.css
  • Añadir variables de sombras y, si procede, refinar escala de colores.
• apps/web/src/lib/styles/base.css
  • Estados interactivos con sombras coherentes y cursor correcto.
• apps/web/src/lib/ui/layout/Card.svelte (opcional)
  • Ajustar padding vertical si hiciese falta para mantener densidad.

Criterios de aceptación

• Elementos interactivos distinguibles de un vistazo (sombra + cursor + focus).
• El indicador de responsables comunica “es mía” sin leer texto.
• El icono de due se interpreta como “fecha límite”.
• Las pills de grupo mantienen color estable sesión tras sesión.

Caveats

• Evitar sombras en contenedores no interactivos para no elevar ruido visual.
• Mantener densidad: no incrementar la altura de filas.
• Si hay dark-mode en el futuro, revisar la paleta para asegurar contraste.

Orden de entrega sugerido

• B1 + B2 primero (impacto alto, bajo riesgo).
• B3 después (requiere condicionar por userId).
• B4 al final (pulido transversal + QA de accesibilidad).

Notas operativas

• Para aplicar estos cambios, comparte en este chat los archivos UI relevantes (TaskItem.svelte, tokens.css, base.css y/o componentes de iconos) y propondré los parches en bloques SEARCH/REPLACE.