- 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)
- Restaurar capture_links en PWA manifest (requerido para funcionamiento correcto)
- Agregar sección en README explicando error TS2353 intencional
- Documentar que capture_links es experimental pero funcional y necesario
- Incluir referencias a documentación oficial de la especificación
La propiedad capture_links es necesaria para capturar navegaciones
dentro del scope de la PWA en el ecosistema Nucleo V3.
- 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
- Crear ícono con diseño de usuarios/amigos
- Agregar variaciones de nombre: amigos.svg, amigos-app.svg, amigosapp.svg
- Esto cubre diferentes posibles slugs de la aplicación
- 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
- Cambiar capture_links de 'existing-client-navigate' a 'none'
- Remover scope_extensions que forzaban navegación en misma ventana
- Ahora el navegador respetará target='_blank' en desktop
- Los enlaces externos abrirán en nueva ventana/PWA
- Cambiar detección de desktop de min-width a (pointer: fine)
- Esto detecta si tiene mouse/trackpad (desktop) vs touch (móvil)
- Más confiable para PWAs que se abren con ancho fijo
- Mantener ancho como fallback para compatibilidad
- 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
- Mover verificaci\u00f3n de target='_blank' antes del parseo de URL
- Esto garantiza que links con target='_blank' nunca sean interceptados
- Permite que desktop abra PWAs en nuevas ventanas correctamente
- 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
- Agregar id único (/?app=inicio) para identificar PWA
- Implementar launch_handler con navigate-existing para mantener una sola ventana
- Mejoras basadas en especificaciones actualizadas de Chrome for Developers
- Agregar scope_extensions en manifest para capturar navegaciones a otros subdominios
- Configurar Traefik para servir archivos .well-known sin autenticación
- Documentar configuración completa del sistema
- 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
- Agregar capture_links al manifest para captura automática
- Configurar clientsClaim y skipWaiting en workbox
- Plugin de cliente para interceptar clics en enlaces
- Interceptar window.open() para enlaces internos
- Solo activo cuando la app corre como PWA instalada
- Usar router de Nuxt para navegación interna fluida
- Detectar display-mode standalone y window-controls-overlay
- Track transparente con glassmorphism
- Thumb con gradiente de color del cielo
- Día: Celeste (#87CEEB) con brillo
- Noche: Azul oscuro con tinte morado
- Bordes y sombras para efecto de profundidad
- Hover con mayor intensidad de color
- Soporte completo para WebKit y Firefox
- 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 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
- 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
