- Implementar UTabs (Contactos, Aplicaciones, Perfil) en app.vue
- Crear componentes ContactsList, ContactsFilters, ContactItem
- Agregar server routes para obtener contactos via Metabase API
- Sistema de aliases por usuario guardados en archivos JSON
- Filtros: nombre (fuzzy search), ID, teléfono, empleado
- Click en contacto abre WhatsApp
- Estilo glassmorphism consistente con la app
Se añade campo de entrada para pegar URLs de imágenes directamente,
permitiendo cargar avatares desde enlaces externos. Incluye validación
de URLs, descarga de imágenes con manejo de errores CORS, validación
de tipo y tamaño (máx 5MB), con feedback visual de errores específicos.
- Agregar share_target al manifest de la PWA
- Crear endpoint /api/share-target para recibir archivos compartidos
- Guardar archivos temporalmente en /public/temp-shared
- Modificar UserProfileForm para aceptar imágenes externas
- Detectar automáticamente imágenes compartidas y procesarlas
- Crear endpoint /api/share-target/cleanup para limpiar temporales
- Mostrar toast informativo al recibir imagen compartida
- Redirigir automáticamente al formulario de perfil
- Soportar compartir desde galería, otras apps, etc.
- Quitar botones de selección de estado de presencia
- Agregar chip compacto y discreto al lado del email
- El chip solo muestra el estado actual (no permite cambiarlo)
- El estado se manejará dinámicamente desde el backend
- Por defecto el estado es 'disponible' (online)
- Actualizar estilos para modo claro y oscuro
- Agregar zona de drag & drop con feedback visual
- Agregar botón para subir foto desde dispositivo
- Implementar validación de tipo de archivo (solo imágenes)
- Implementar validación de tamaño (máximo 5MB)
- Agregar estilos responsive y soporte para modo oscuro
- Banner visible en header del formulario
- Explica que cambios son locales hasta guardar
- Diseño con borde izquierdo y fondo suave
- Soporte dark mode
- Mejora UX explicando comportamiento de persistencia
- Agregar efecto glassmorphism con blur y transparencia
- Mejorar bordes redondeados y sombras
- Usar colores más suaves y profesionales
- Agregar text-shadow para mejor legibilidad
- Actualizar estilos de dark mode con glassmorphism
- Mantener consistencia visual con el resto de la app
- Reemplazar prompt del navegador por modal personalizado
- Modal muestra lista de campos modificados con estilo de la app
- Distingue entre almacenamiento local y servidor
- Incluye soporte para modo oscuro
- Mejora UX con diseño responsive
- Nuevo botón "Reiniciar" en el footer junto a Cancelar y Guardar
- Solo aparece cuando hay cambios pendientes (v-if="hasChanges")
- Color warning con variant soft para indicar acción destructiva
- Ícono de arrow-path (flecha circular)
- Función resetForm() que:
- Pide confirmación al usuario
- Restaura todos los campos a valores originales
- Limpia la cookie de borrador
- Muestra toast informativo
- Ubicado entre botones Cancelar y Guardar cambios
El botón permite descartar todos los cambios y volver al estado
original sin tener que recargar la página.
- Hacer el mensaje más claro y explicativo
- Enfatizar que los cambios NO se han enviado al servidor
- Indicar que quedarán guardados localmente en el navegador
- Agregar instrucción de cómo guardar definitivamente
- Iniciar con pregunta "¿Estás seguro de salir?"
Mensaje anterior era ambiguo, ahora es más específico sobre:
- Qué se guarda (localmente)
- Qué NO se guarda (en el servidor)
- Qué hacer para guardar definitivamente
- Agregar cookie para persistir cambios del formulario (7 días)
- Detectar y mostrar campos modificados con indicadores visuales
- Alertar al usuario antes de salir si hay cambios sin guardar
- Restaurar borrador automáticamente al reabrir formulario
- Notificar al usuario de cambios restaurados con toast
- Limpiar cookie al guardar exitosamente
Indicadores visuales:
- Label en color warning para campos modificados
- Badge "Modificado" con ícono de lápiz
- Mensaje en beforeunload listando campos pendientes
La cookie guarda todos los campos del formulario y se restauran
automáticamente al abrir el formulario de nuevo.
- Mover sección de foto de perfil al primer lugar del formulario
- Eliminar preview del avatar (MsnAvatar) - no repetir
- Simplificar botones: más compactos (size="sm", iconos w-4 h-4)
- Eliminar card/container extra (.avatar-section) con background y padding
- Nueva clase simple .avatar-actions-simple con solo flex y gap
- Limpiar estilos CSS no utilizados (avatar-section, avatar-preview, avatar-actions)
- Actualizar UModal para usar v-model:open en lugar de v-model
- Envolver contenido de UModal en slot #content según nueva sintaxis
- Corregir tipos en CameraCapture: agregar verificación de objeto antes de spread
- Cambiar tipo de retorno de getAppIconUrl de null a undefined
- Comentar capture_links en manifest PWA (propiedad experimental no soportada en tipos)
- Resolver todos los errores de TypeScript y warnings de hidratación
Errores corregidos:
- TS2353: width no existe en tipo ui de UModal
- TS2698: Spread types solo de tipos objeto
- TS18048: camera posiblemente undefined
- TS2322: null no asignable a undefined
- TS2353: capture_links no existe en ManifestOptions
- Agregar CameraCapture.vue con soporte multi-dispositivo
* Soporte para múltiples cámaras (frontal/trasera)
* Manejo robusto de permisos y errores
* Preview y confirmación de foto
* Detección automática de capacidades del dispositivo
- Crear endpoint /api/avatar/upload para subir avatares
* Validación de tipo y tamaño de archivo
* Almacenamiento en /public/avatars/
* Actualización de atributos en Authentik
* Limpieza automática de avatares antiguos
- Actualizar UserProfileForm con gestión de avatar
* Integración con CameraCapture en modal
* Preview del avatar actual con MsnAvatar
* Opciones para cambiar y eliminar avatar
- Actualizar useAuthentik para avatares personalizados
* Carga de atributos completos del usuario
* Soporte para avatar_url desde Authentik
* Fallback a UI Avatars si no hay custom avatar
- Eliminar SVG complejo y usar CSS radial-gradient
- Implementar degradado radial que simula iluminación real
- Agregar efectos glossy con pseudo-elementos ::before y ::after
- Usar box-shadow para profundidad 3D
- Simplificar implementación para mejor rendimiento
- Agregar componente MsnAvatar con marco SVG de grosor variable
- Implementar degradados radiales estilo Frutiger Aero
- Agregar composable usePresence con detección de inactividad
- Incluir selector de estados: Online, Away, Busy, Offline
- Actualizar UserHeader para usar el nuevo avatar
- Agregar handler @click en app-items
- En desktop, prevenir default y usar window.open() directamente
- Esto bypasea completamente el sistema capture_links del manifest
- Mantener enlaces nativos como fallback para móvil
- Agregar logs en useDeviceType para ver detección de desktop
- Agregar logs en shouldOpenInNewTab para ver resultado
- Esto ayudará a diagnosticar por qué no se abren nuevas ventanas
- Crear composable useDeviceType para detectar desktop/móvil
- Modificar ApplicationsList para usar target='_blank' en desktop
- Ajustar pwa-link-handler para permitir nuevas ventanas en desktop
- En móvil mantener comportamiento original según openInNewTab
- Filtrar app "perfil" de la lista (hardcoded por slug y nombre)
- Búsqueda en tiempo real con v-model (sin debounce)
- Orientación "any" para respetar dispositivo móvil
- Contador de apps con glassmorphism personalizado
- Estilos matching chips y badges de la app
- Soporte completo modo día/noche para contador
- Campo de búsqueda con glassmorphism
- Filtrar por nombre, URL y descripción
- Icono de lupa y botón para limpiar búsqueda
- Persistencia en cookie (1 semana)
- Estilos completos para modo día y noche
- Eliminar border-bottom blanco de barra de título
- Agregar box-shadow: none a barra de título
- Forzar margin y padding 0 en html y body
- Eliminar borders y outlines que puedan crear gap
- Aplicar reglas a contenedor raíz de Nuxt (#__nuxt)
- Forzar margin-top: 0 en la barra misma
- Agregar reglas para [data-v-app] de Nuxt UI
- Reemplazar UBadge con spans personalizados
- Aplicar mismo estilo que filtros de grupos
- Badges primarios con color primary y glassmorphism
- Badge de conteo (+N) con estilo neutral
- Hover con efecto de elevación sutil
- Soporte completo para modo oscuro con brillo ajustado
- Aumentar opacidad del patrón en modo light (0.03 → 0.08)
- Agregar margin: 0 a la barra de título
- Forzar margin y padding: 0 en body y html
- Eliminar línea blanca entre body y barra de título
- Reemplazar UButton por botones nativos con estilos personalizados
- Aplicar glassmorphism consistente con el resto de la app
- Estados normal y activo con efectos de sombra y color
- Hover con translateY para efecto de elevación
- Soporte completo para modo oscuro con opacidades ajustadas
- Botones activos con color primario y borde resaltado
- Barra completamente transparente con patrón sutil de cuadrícula
- Título en chip cuadrado con bordes mínimamente redondeados
- Glassmorphism en el chip para contraste y legibilidad
- Patrón discreto (3% opacidad día, 2% noche)
- Configurar pointer-events para bloquear interacción debajo
- Traducir mensajes de API a español
- Configurar idioma español en HTML y manifest (lang="es")
- Actualizar nombres de app: "Perfil Nucleo"
- Crear WindowTitleBar para Window Controls Overlay
- Ajustar padding para acomodar barra de título
- Traducir campos restantes en componentes legacy
- Crear componente UserProfileForm con diseño glassmorphism
- Alternar entre lista de apps y formulario de edición
- Quitar modal de UserHeader, usar emit event
- Agregar nuevos campos deshabilitados:
* Avatar URL
* Teléfono
* Cédula
* Fecha de nacimiento
* NFC vinculada
* PIN numérico
* Código Nucleo V2
- Sistema de eventos entre componentes
- Mover botón editar al lado del nombre (siempre visible, sutil)
- Quitar efecto hover del header
- Detectar tema del sistema operativo automáticamente
- Actualizar theme-color dinámicamente (azul cielo día / oscuro noche)
- Usar cookies para persistir tema y filtros (1 año)
- Sincronizar filtros de apps con cookies
- Intentar meta_icon de Authentik primero
- Buscar apple-touch-icon.png del dominio (PWA)
- Intentar favicon.ico como fallback
- Mostrar icono por defecto si todo falla
- Sistema de retry inteligente para evitar requests duplicados
- Agregar función applyThemeClass para sincronizar con HTML
- Aplicar clase dark/light al elemento HTML
- Agregar watcher para actualizar clase en cambios de tema
- Inicializar clase correcta en onMounted
- Separar estilos dark mode en bloque sin scoped
- Usar selectores .dark directos en lugar de :global(.dark)
- Agregar !important para superar especificidad de scoped
- Agregar scrollbar personalizada compacta (8px) adaptable al tema
- Estilo de scrollbar verde (#00DC82) con opacidad diferente para día/noche
- Soporte para WebKit (Chrome/Safari) y Firefox
- Arreglar SVG de colinas para usar 100% del ancho horizontal (preserveAspectRatio=none)
- Revertir modal a estructura funcional (v-model:open, title prop, #content slot)
- Igualar transparencia en modo oscuro usando rgba(0,0,0,0.3-0.4) en lugar de rgba(15,15,25)
- Aplicar tintado negro puro para reducir brillo en modo oscuro manteniendo misma transparencia
- Cambiar botones de quick-actions a variant solid con efectos 3D
- Agregar box-shadow multicapa con inset shadows a botones
- Implementar efectos hover y active en botones de sesión
- Cambiar badges de grupos a variant solid
- Agregar efectos 3D a badges con sombras y hover
- Mejorar color del email en modo oscuro (negro en lugar de gris)
- Aumentar peso de fuente del email en modo oscuro para mejor legibilidad
- Aumentar transparencia en todos los contenedores (0.3-0.4 alpha)
- Mejorar backdrop-filter con blur(20px) y saturate(180%)
- Agregar efectos 3D pronunciados con box-shadow multicapa
- Implementar inset shadows para efecto de profundidad
- Ajustar colores en modo oscuro (rgba(15, 15, 25) en lugar de rgba(30, 30, 40))
- Mejorar bordes con rgba blanco semi-transparente
- Agregar transiciones suaves con cubic-bezier
- Efectos hover mejorados con scale y translateY
- Aplicar cambios en UserHeader, ApplicationsList y quick-actions
- Mejor contraste y legibilidad en modo oscuro
- Implementar sistema de tema día/noche con persistencia en localStorage
- Crear componente AnimatedBackground con paisajes SVG animados
- Generar todos los assets SVG desde cero (sol, luna, estrellas, nubes, montañas)
- Añadir animaciones suaves para nubes, estrellas y elementos del paisaje
- Rediseñar UserHeader como componente principal clickeable
- Integrar modal de edición de perfil en el header
- Reorganizar layout principal mostrando solo aplicaciones
- Mejorar diseño de ApplicationsList con glassmorphism
- Implementar efectos hover y transiciones elegantes
- Diseño responsive mobile-first
- Diferencias visuales notorias entre modo día y noche
- Toggle buttons en header para filtrar por grupos
- Si no hay grupos seleccionados, se muestran todas las apps
- Grupos de apps ahora aparecen como subtítulo con chips compactos
- UI mejorada con estado activo en botones de filtro
- Mensaje cuando no hay apps en grupos seleccionados
- Nuevo endpoint /api/authentik/applications para obtener apps del usuario
- Componente ApplicationsList que muestra apps en grid responsivo
- Filtrado por grupos del usuario (basado en headers de Authentik)
- UI con iconos, badges de grupos y redirección a cada app
- Refresh automático cada 5 minutos
- Usar v-model:open en lugar de v-model
- Mover botón dentro del UModal como trigger (slot por defecto)
- Contenido en slot #content según documentación
- Agregar title como prop del UModal
- Eliminar UCard innecesario
- Eliminado v-if del modal para evitar problemas de renderizado
- Agregado @click.stop al UCard para prevenir propagación de eventos
- Agregado prevent-close mientras se actualiza
Se agregó v-if="isOpen" al UModal para que solo se renderice en el DOM cuando
esté abierto. Esto soluciona el problema de que el modal se activaba al hacer
clic en áreas vacías del componente.
- Instalar @types/node para resolver referencias a process
- Corregir colores inválidos en componentes (orange→warning, purple→secondary, gray→neutral, etc.)
- Agregar tipos explícitos en GroupCheckButton y EditProfileButton
- Eliminar propiedad timeout inválida en toasts
- Add Nuxt 4 application with Authentik Proxy Outpost integration
- Add EditProfileButton component for editing user profile via Authentik API
- Add API endpoints for Authentik user management (GET/PATCH)
- Configure Gitea Actions workflow for automated deployment
- Add monitoring hook for Gitea Actions
- Configure environment variables and Docker Compose setup
