Implementa la funcionalidad para que las subcategorías seleccionadas persistan:
- Entre cambios de tabs (cada tab mantiene sus propias subcategorías)
- Entre refrescos de página (guardado en localStorage)
Cambios técnicos:
- Modificado useCatacion.ts para guardar subcategorías por tab en lugar de array global
- Agregada función actualizarSubcategorias() que persiste en localStorage
- subcategoriasActivas ahora es computed basado en la tab activa
- Removida limpieza de subcategorías al cambiar de tab en sesion.vue
- Actualizado toggleSubcategoria para usar la nueva función de persistencia
- Mover sección Sensaciones en Boca de Impresión Global a Organoléptica
- Mover sección Gustos Predominantes de Impresión Global a Organoléptica
- Agregar v-if mostrarSensacionBocaOrganoleptica para filtrado por subcategoría
- Agregar v-if mostrarGustosPredominantes para filtrado por subcategoría
- Renombrar Detalles Adicionales a Notas Adicionales en Impresión Global
- Cambiar subcategoriaActiva a subcategoriasActivas (array) para permitir selección múltiple
- Agregar flex-wrap a barra de subcategorías en lugar de scroll horizontal
- Implementar toggleSubcategoria para agregar/quitar subcategorías
- Pasar subcategoriasActivas a FormularioMuestra como prop
- Agregar helpers deberMostrarSeccion para filtrar inputs
- Aplicar v-if a todas las secciones según subcategorías activas
- Botón Limpiar Todo para resetear filtros
- No activar cargando.value durante actualizar() en useIndexedDB
- Evitar que el loading spinner desmonte todo el formulario al guardar
- Mantener UI fluida durante actualizaciones en tiempo real
- Usar toRaw() + JSON.parse/stringify para deep clone sin Proxies
- No modificar modificadoEn en objeto reactivo, solo en copia
- Evitar re-renderizados innecesarios manteniendo referencias estables
- Reducir padding del botón de p-3 a p-2 (más compacto)
- Reducir tamaño del icono de w-6 h-6 a w-5 h-5
- Agregar flex items-center justify-center para centrar el icono
- Eliminar shadow con glow de color
- Usar fondo sólido con var(--cata-bg) en lugar de transparente
- Aplicar sombra simple con rgba (sin color del tema)
- Eliminar ajustes responsive de padding innecesarios
- Mejorar z-index para que se sobreponga correctamente a elementos
- Agregar clonación en saveSession() y updateSession()
- Mantener mutaciones directas en el estado reactivo
- Resolver error DataCloneError al guardar objetos reactivos en IndexedDB
- Modificar useIndexedDB para no reemplazar sesionActiva en actualizar()
- Modificar useCatacion para mutar directamente las propiedades
- Eliminar todas las clonaciones con JSON.parse/stringify
- Mantener referencias de objetos estables para Vue reactivity
- Mover botón Finalizar Sesión del flotante al header
- Cambiar botón flotante para colapsar/expandir todos los acordiones
- Agregar opción Finalizar Sesión al menú desplegable móvil
- Implementar función toggleCollapseAll para control de acordiones
- Agregar computed todosColapsados para estado de acordiones
- Usar iconos maximize-2/minimize-2 según estado
- Hacer botón flotante circular para mejor identificación
- Arreglar hover de acordiones para usar color personalizado
- Agregar estilos :deep() para .accordion-trigger:hover
- Usar color-mix con var(--cata-primary) en hover
- Aplicar 5% opacidad en modo claro, 10% en modo oscuro
- Remover JSON.parse(JSON.stringify()) de accordionItems computed
- Remover clonación innecesaria en obtenerMuestraPorValue
- Pasar referencias directas en lugar de copias profundas
- Los accordiones ahora mantienen su estado sin parpadeos
- Mejora significativa en la fluidez de la interfaz
El problema era que al clonar las muestras en cada render, Vue detectaba
objetos "nuevos" y re-montaba completamente los componentes accordion,
causando un efecto visual de parpadeo cada vez que se actualizaba un valor.
- Agregar validación completa en loadCustomColors para detectar formato incompatible
- Proteger setCustomColors asegurando que la estructura existe antes de asignar
- Validar estructura en getCurrentColors y retornar defaults si no existe
- Validar estructura en hasCustomColors y retornar false si no existe
- Validar estructura en inicializar antes de aplicar colores
- Limpiar localStorage automáticamente si detecta formato antiguo o corrupto
Soluciona error: TypeError Cannot create property 'primary' on string
cuando localStorage contiene datos de versión anterior
- Modificar useColorCustomization para manejar tres colores (primary, foreground, background)
- Actualizar interfaz ThemeColors con los tres colores
- Agregar selectores de color para fuente y fondo en el modal
- Implementar vista previa con los tres colores aplicados
- Actualizar funciones setCustomColors y resetColors para manejar múltiples colores
- Mantener almacenamiento separado por tema (light/dark)
- Aplicar colores a variables --cata-fg y --cata-bg además de --cata-primary
- Agregar composable useCategoryColors con 8 colores coordinados (light/dark)
- Colores por categoría: Fragancia (lavanda), Aroma (verde menta), Sabor (rojo),
Sabor Residual (naranja), Acidez (amarillo), Dulzor (rosa), Sensación en Boca (azul),
Impresión Global (turquesa)
- Eliminar hints de texto de SliderIntensidad (showDescription = false por defecto)
- Aplicar colores dinámicos a headers y sliders de cada categoría
- Aumentar font-weight de headers a 700 (bold)
- Los colores se adaptan automáticamente al tema light/dark
- Aplicar colores en formato HEX (no HSL sin prefijo)
- Solo modificar variables existentes (--cata-primary, --cata-primary-light, --cata-primary-dark)
- Eliminar sobrescritura de variables inexistentes (--cata-border, --cata-muted)
- Solo aplicar colores si hay personalización guardada (no sobrescribir por defecto)
- Limpiar variables CSS al resetear en lugar de aplicar colores por defecto
- Agregar función hslToHex para conversión correcta de colores
- Restaurar funcionamiento de bordes y efectos hover
- 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
- 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
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
