- Mover trigger button al slot default de UModal
- Usar props title y description directamente en UModal
- Usar slots #body y #footer para el contenido del modal
- Mantener v-model:open para control de estado
- Eliminar wrapper div duplicado
- Seguir estructura correcta de Nuxt UI v4
- Crear composable useColorCustomization para manejar colores personalizados
- Agregar botón de paleta en CataUserInfo para acceder al color picker
- Implementar modal con selector de color (input color + text)
- Guardar preferencias en localStorage por tema (light/dark)
- Generar paleta de gradientes automáticamente desde color base
- Aplicar colores dinámicamente a variables CSS
- Incluir vista previa del color en el modal
- Botón para restablecer al color por defecto
- Persistencia de colores entre sesiones
- Inicialización automática en app.vue
- **Nuevas tabs reorganizadas:**
- Organoléptica: Selectores de familia de fragancia-aroma y sabor
- Descriptiva/Afectiva: Todos los sliders de intensidad (incluye impresión global)
- Defectos: Tazas no uniformes, defectuosas y tipo de defecto
- Impresión Global: Vista completa con todos los componentes
- **Selector de categorías mejorado:**
- Permitir selección múltiple de categorías padre
- Las subcategorías son la unión de las subcategorías de los padres seleccionados
- Permitir selección múltiple de subcategorías
- Actualizar resumen visual de selección
- **Tipos actualizados:**
- NotaSeleccionada ahora usa arrays para categorias y subcategorias
- TabCatacion actualizado con las nuevas tabs
- Funciones de actualización modificadas para trabajar con arrays
- **Correcciones TypeScript:**
- Usar JSON.parse(JSON.stringify()) para crear copias mutables de arrays readonly
- Resolver incompatibilidades de tipos entre readonly y mutable arrays
- Agregar clases flex items-center justify-center al botón de descarga
- Cambiar hidden sm:block por hidden sm:flex (coherente con flex)
- Ahora el botón tiene el mismo tamaño que los demás
- Archivo: app/pages/cata/sesion.vue:48
PROBLEMA ENCONTRADO: Los toasts seguían con estilo por defecto
CAUSA RAÍZ:
- En Nuxt UI v4 la clave de configuración es 'toast' no 'notification'
- Estaba usando 'notification:' en app.config.ts
- Por eso los estilos personalizados nunca se aplicaban
SOLUCIÓN:
- Cambiar 'notification:' por 'toast:' en app.config.ts
- Ahora las clases CSS personalizadas sí se aplicarán
- Los toasts usarán el estilo outline/terminal del sistema
- Cambiar de slot #body a #content
- Agregar debug para ver qué contiene item cuando no tiene muestra
- Esto ayudará a entender qué datos recibe el slot
PROBLEMA: Toasts usaban estilos por defecto de Nuxt UI que no se acoplaban al diseño outline/terminal
SOLUCIÓN:
- Cambiar app.config.ts para usar clases CSS personalizadas en lugar de sintaxis arbitraria de Tailwind
- Agregar estilos CSS completos en main.css usando variables del sistema (--cata-bg, --cata-fg, --cata-primary)
- Implementar todas las variantes (primary, success, error, warning, info, neutral)
ESTILOS APLICADOS:
- Fondo: var(--cata-bg) en claro, negro 95% opaco en oscuro
- Bordes: outline usando var(--cata-primary) con opacidades
- Texto: fuente monospace en modo oscuro con text-shadow
- Iconos: colores específicos por tipo con drop-shadow en oscuro
- Efectos glow: sombras sutiles en modo oscuro según tipo
- IMPORTANTE: Usar !important para sobrescribir estilos de Nuxt UI
- Simplificar uso de slots del accordion usando #body para el contenido
- Remover v-for innecesario en templates de slots
- Remover propiedad slot de accordionItems
- Esto permite que el contenido se renderice correctamente cuando se expande el accordion
- Importar tipo Muestra correctamente
- Remover tipo AccordionItem no usado
- Tipar muestra como Muestra en accordionItems
- Permitir inferencia de tipo del computed
- Aumentar opacidad del texto de 60% a 80% en hover
- Mostrar borde inferior sutil (30% opacity) en hover
- Agregar text-shadow suave en modo oscuro
- Solo afecta tabs inactivas (no las activas)
- Transiciones específicas: color, border-color, text-shadow
- CERO cambios de tamaño o desplazamiento, solo colores
- Usar parámetro { item } en slot personalizado del FormularioMuestra
- Pasar item.muestra en lugar de la muestra del v-for
- Esto asegura que se use la muestra clonada del accordionItems
- Quitar border-width en hover que causaba crecimiento del botón
- Cambiar solo border-color en hover (de 50% a 70% opacity)
- Modificar transition para solo animar propiedades de color
- CERO cambios de tamaño o desplazamiento, solo colores
- Quitar efecto scale on hover/active de todos los botones cata-button
- Quitar efecto hover:scale del avatar en UserInfo
- Rediseñar toasts con estilo outline/terminal 100% acoplado al sistema
- Toasts usan variables CSS del sistema (--cata-bg, --cata-fg, --cata-primary)
- Texto con fuente mono y text-shadow en modo oscuro
- Efectos glow sutiles en modo oscuro según tipo de notificación
- Bordes outline coherentes con diseño del sistema de catación
- Rediseñar layout para ser más compacto y horizontal
- Usar badges de indicadores para mostrar valores afectivos de intensidades
- Mostrar progreso con barra visual en desktop
- Eliminar información redundante y simplificar estructura
- Mejorar responsive design para mobile
- Eliminar CataResumenMuestra.vue y CataFormularioMuestra.vue duplicados
- Usar componentes existentes en components/cata/ que ya se auto-registran como CataResumenMuestra y CataFormularioMuestra
- Resolver conflicto de nombres en Nuxt que impedía el build
- Crear componente CataResumenMuestra para mostrar resumen de cada muestra en el header del accordion
- Crear componente CataFormularioMuestra para mostrar formulario de edición de intensidades por tab
- Corregir uso de slots en UAccordion para mostrar correctamente el contenido
- Usar slot #default para customizar el header con CataResumenMuestra
- Usar slots personalizados por muestra para el body con CataFormularioMuestra
- Agregar estilos mejorados para los items del accordion
- Crear componente CataUserInfo con estilo mobile-first del sistema de catación
- Mover "/" para redirigir automáticamente a /cata
- Incluir información del usuario en página de catación
- Mantener estilo consistente con diseño outline/terminal del sistema
- Optimizar componente de usuario para mobile (compacto y funcional)
- Simplificar app.vue para usar <NuxtPage /> correctamente
- Crear index.vue con contenido de autenticación de Authentik
- Agregar enlace a la aplicación de catación desde el inicio
- Esto permite que las rutas /cata y /cata/sesion se rendericen correctamente
Agregar sistema completo de catación de café con las siguientes características:
- Tipos TypeScript completos para sesiones, muestras, intensidades y notas
- Composable useIndexedDB para gestión de sesión activa en cliente
- Composable useCatacion con lógica de negocio para actualización de muestras
- Componentes reutilizables:
* SliderIntensidad: Slider dual para valores descriptivos (1-10) y afectivos (1-15)
* SelectorFamilia: Selector jerárquico de familias de notas (3 niveles)
* SelectorTazas: Selector de tazas (1-5) para uniformidad y defectos
* ResumenMuestra: Header de accordion con progreso y estadísticas
* FormularioMuestra: Formulario completo con 3 tabs (Fragancia/Aroma, Sabor, Impresión Global)
- Páginas:
* /cata: Gestión de sesiones (crear nueva o continuar existente)
* /cata/sesion: Interfaz principal de catación con accordions y tabs
- Tema dual:
* Modo claro: Fondo blanco, texto negro, outlines azules
* Modo oscuro: Fondo negro, texto verde terminal, estilo monospace
- Diseño mobile-first responsive con CSS vanilla (sin @apply de Tailwind)
- Configuración PWA con almacenamiento en IndexedDB
- Agregar manifest.id, lang, dir y categories
- Implementar launch_handler para ventana única
- Agregar capture_links y url_handlers
- Configurar workbox con clientsClaim y skipWaiting
- Ajustar orientation a 'any' y mejorar display_override
- Corregir purpose de iconos para separar any de maskable
- Actualizar descripción del proyecto
- Agregar arquitectura del sistema (PostgreSQL + Nuxt4 PWA)
- Documentar estructura de base de datos
- Agregar guías de inicio rápido
- Documentar comandos de testing
- Actualizar información de deployment
- Agregar badges de estado del proyecto
- Mejorar formato y organización general
Configuración PWA:
- Agregar estructura completa de Nuxt4 para PWA
- Configurar .env.example con variables de entorno
- Preparar aplicación para instalación offline
Configuración Claude Code:
- Agregar .claude/ con settings y hooks
- Configurar entorno de desarrollo con Claude
CI/CD:
- Agregar .gitea/workflows para Gitea Actions
- Preparar pipeline de despliegue automático
Docker:
- Actualizar docker-compose.yml con servicios PWA
- Configurar networking entre servicios
Git:
- Actualizar .gitignore para excluir archivos de build
- Ignorar node_modules y archivos temporales
Test Triggers:
- Reducir pg_sleep de 1 a 0.1 segundos (suficiente con clock_timestamp)
- Mejorar robustez del test de updated_at
Test Queries:
- Agregar filtrado por sesión de prueba en QUERY 3 (operador @>)
- Agregar filtrado por sesión de prueba en QUERY 5 (acidez >= 8)
- Eliminar dependencia de datos residuales
- Garantizar aislamiento completo entre tests
Test Indexes:
- Reescribir completamente para eliminar errores de sintaxis
- Cambiar de captura de EXPLAIN a verificación de existencia
- Agregar benchmarks de performance con 100 registros reales
- Verificar existencia de índices vía pg_indexes
- Medir tiempos de ejecución en milisegundos
- Tests más robustos y compatibles con PL/pgSQL
Resultado: 38/38 tests pasando (100%)
- Cambiar now() por clock_timestamp() en función set_updated_at()
- now() retorna el timestamp del inicio de la transacción
- clock_timestamp() retorna el timestamp actual del sistema
- Garantiza que cada UPDATE tenga un timestamp diferente
- Mejora la precisión para auditoría de cambios
Problemas resueltos:
- Eliminada dependencia de UUIDs hardcodeados en tests
- Agregadas validaciones específicas de valores esperados
- Implementado cleanup automático de datos de test
Cambios principales:
Tests organizados por categoría (7 archivos nuevos):
- test_structure.sql: 8 tests de estructura de BD
- test_constraints.sql: 6 tests de validaciones
- test_triggers.sql: 3 tests de triggers automáticos
- test_queries.sql: 5 tests de queries típicas
- test_functions.sql: 3 tests de funciones auxiliares
- test_edge_cases.sql: 7 tests de casos límite
- test_indexes.sql: 6 tests de uso de índices
Mejoras implementadas:
- Cada test genera sus propios datos dinámicamente
- Tests usan bloques DO $$ con UUIDs generados
- Validaciones específicas con valores esperados
- Cleanup automático al finalizar cada test
- Tests de casos edge (arrays vacíos, NULL, límites)
- Verificación de uso de índices con EXPLAIN
test_all.sql actualizado:
- Ahora ejecuta todos los archivos organizados
- Total: ~38 tests independientes y robustos
- Progreso visual por categoría
- ASCII art y mejor presentación
Todos los tests verificados y funcionando correctamente
- Base de datos PostgreSQL 16 con extensiones JSONB y arrays
- Docker Compose para containerización
- Scripts SQL de inicialización (schema, funciones, índices, datos de prueba)
- Suite de tests de validación (18 tests)
- Queries de ejemplo (17 queries)
- Script helper para gestión (scripts/riocata.sh)
- Documentación completa en README.md
Estructura:
- 4 tablas principales: sesion, auth.users, sesion_participante, muestra, evaluacion
- Tipo ENUM para defectos
- 2 triggers automáticos (updated_at, puntaje_final)
- 19 índices de optimización (GIN, B-tree, funcionales)
- Constraints de validación para arrays y JSONB
- 2 funciones auxiliares para análisis
