TaskModal: rediseño a layout horizontal 2 columnas (s69)
Resumen
Refactor completo del componente TaskModal.tsx hacia un layout horizontal de 2 columnas (58fr / 42fr), cerrado tras 7 iteraciones con el agente design-collaborator sobre el mockup handoff-task-modal/task-modal-mockup.html. El componente creció de 1 176 a 2 272 LOC (+1 096 LOC netas, +96 %).
La API de props se mantiene 100 % compatible con TaskManager (consumidor principal), añadiendo únicamente la prop opcional onDelete.
Dimensiones del modal
| Propiedad | Valor |
|---|---|
| Ancho | min(95vw, 1300px) |
| Alto | 85vh |
| Layout | CSS Grid 2 cols (58fr / 42fr) |
| Footer fijo | Eliminado |
Columna izquierda (58fr)
Cabecera / título
- Título inline con su label en
flex-row(ahorra altura respecto a versiones anteriores). - Header con título dinámico (“Crear tarea” / “Editar tarea”) + botón Copiar enlace (deshabilitado en modo CREAR) + botón cerrar.
Descripción y resolución
- Campos textarea sin sub-hints (considerados autoexplicativos tras iteraciones de UX).
Sistema de comentarios (nuevo en s69)
- Stash en modo CREAR → persist al guardar.
- Chips destinatario multi-select:
ED/DA/TX. - Microtexto dinámico según selección de destinatarios.
- Render con avatares, timestamps relativos en castellano, pill “sin guardar” para comentarios pendientes.
- Badge dinámico con 4 estados (sin comentarios, con comentarios guardados, con pendientes, mixto).
Columna derecha (42fr)
Top-split
Región dividida horizontalmente:
- Izquierda: Asignados (chips) + Prioridad (pills).
- Derecha: botones Crear / Cancelar apilados verticalmente (antes en footer fijo).
Resto de la columna (de arriba a abajo)
| Sección | Notas |
|---|---|
| Estado | Pills de estado |
| Fecha límite | Date-box + icono calendario + botón clear |
| Notas Cuaderno | Sin cambios funcionales |
| Adjuntos | Sin cambios funcionales |
| Vínculos Zoho | Sin cambios funcionales |
| Promover esta tarea | Nuevo bloque compacto: “Elevar como Alerta” + “Publicar como News” |
| Zona peligrosa | Botón Eliminar — visible solo en modo EDITAR, aislado para prevenir misclicks |
Decisiones de diseño relevantes
Iconos Lucide-style inline
El workspace deroga la Regla 7 de CLAUDE.md para este componente: los iconos se inyectan como SVG inline para evitar dependencias externas en el bundle. Pendiente documentar formalmente en CLAUDE.md.
Clases CSS centralizadas
El componente usa las clases compartidas del workspace (.btn.primary, .btn.action) y las variables CSS de globals.css, más un bloque <style> inline con clases .tm-* específicas (~600 LOC del total). Si el componente crece más, las clases .tm-* y los SVG son candidatos prioritarios para extracción a archivos separados.
Pendiente (próximos commits declarados)
- Route
?task=N— abrir modal directo desde URL. - KanbanMini widget — click abre modal + polling 60 s + optimistic UI.
- CLAUDE.md workspace — derogar Regla 7 documentado formalmente.
Proceso de diseño
El rediseño se cerró tras 7 iteraciones con el agente design-collaborator sobre el mockup HTML handoff-task-modal/task-modal-mockup.html. Cada iteración ajustó la distribución de espacio, la jerarquía visual de acciones y la accesibilidad de la zona peligrosa.
Notas técnicas
- Compatibilidad: API de props 100 % estable hacia
TaskManager. ProponDeleteañadida como opcional. - Crecimiento LOC: 1 176 → 2 272. El aumento principal está en el bloque
<style>inline (~600 LOC) y los SVG inline. - Iteración s69: nomenclatura de sesión de la sesión de trabajo que cerró el diseño.
Véase también
- [[workspace—que-es-workspace]]
- [[workspace—dashboard]]