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.
- Actualizar apple-touch-icon.png para coincidir con icon-192x192.png
- Eliminar directorio pwa_assets ya que todos los iconos están correctamente copiados en nuxt4/public
- Todos los archivos PWA ahora están organizados dentro del servicio Nuxt
- Copiar iconos desde /pwa_assets/icons/ a /public/
- Agregar iconos de 72x72, 96x96, 128x128, 144x144, 152x152, 256x256, 384x384
- Actualizar manifest con todos los tamaños de iconos
- Mejorar compatibilidad con diferentes dispositivos y resoluciones
- Mantener iconos maskable existentes para adaptive icons
- 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)
- 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
