Problema crítico anterior:
Cuando se perdía conexión, el sistema marcaba como "no autenticado"
y DESREGISTRABA el Service Worker, destruyendo todo el contenido
cacheado y volviendo la PWA inútil offline.
Solución implementada:
1. useAuth.ts:
- Agregar estado isOffline con listeners de navigator.onLine
- Detectar offline ANTES de marcar como no autenticado
- En checkAuth: si offline, mantener último estado conocido
- En markUnauthenticated: NO ejecutar si estamos offline
- Nuevo authStatus: 'offline' cuando sin conexión
- NO desregistrar SW cuando estamos offline
2. AuthIndicator.client.vue:
- Importar isOffline del composable
- Agregar icono WifiOff para estado offline
- Agregar textos: "Offline" / "Sin conexión. Puedes usar contenido guardado"
- Estilos naranja para estado offline
- En watchers: NO llamar markUnauthenticated si offline
- handleClick: ignorar clicks en modo offline
Ahora offline funciona correctamente:
✅ Mantiene último estado de autenticación conocido
✅ NO desregistra Service Worker
✅ Contenido cacheado permanece accesible
✅ Indicador visual claro (naranja) de modo offline
✅ La PWA es totalmente funcional sin conexión
- Created /api/auth/userinfo endpoint to fetch user data from Authentik headers
- Added userInfo state and fetchUserInfo() function to useAuth composable
- Implemented compact user info header in dropdown with avatar, name, and email
- Avatar shows user initials with gradient background
- Styled with glassmorphism design matching app aesthetic
- Dropdown aparece al hacer click cuando estás conectado
- Opciones: verificar estado y cerrar sesión
- Logout usa endpoint de Authentik (/outpost.goauthentik.io/sign_out)
- Desregistra Service Worker antes de logout
- Animación smooth del dropdown
- Flecha indicadora que rota al abrir/cerrar
- Diseño glassmorphism consistente con la app
- Desregistrar SW automáticamente cuando se detecta pérdida de auth
- Desregistrar SW antes de triggerAuth para evitar conflictos con Authentik
- Deshabilitar polling y listeners de visibility (causan errores de CORS)
- Confiar en detección reactiva de errores del musicStore
- Usar window.location.href en lugar de reload() para forzar navegación
- Detectar errores "Failed to fetch" y "no response" como pérdida de auth
- Mejor logging para debugging de cambios de estado
- Manejar correctamente redirects 302 de Authentik en fetch
