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
Agregar botón 'Inicio' con icono Home al dropdown de los 3 puntos.
El botón navega a la página principal y cierra el menú automáticamente.
Cambios:
- Importar icono Home de lucide-vue-next
- Agregar botón de Inicio como primera opción del menú
- Implementar función goToHome() para navegación
- Estilos con hover y active states
- Icono en color accent-primary para consistencia visual
Problema:
La verificación de sesión usaba HEAD /api/music que no es confiable
porque:
- Los headers de Authentik solo están disponibles en el servidor
- El Service Worker puede servir respuestas cacheadas
- No había headers no-cache para evitar respuestas obsoletas
Solución:
Implementar verificación correcta basada en plantillaNuxtAuthentikProxy:
1. Nuevo endpoint /api/auth/status.get.ts
- Lee headers de Authentik directamente desde el servidor
- Headers no-cache para verificación en tiempo real
- Retorna estado autenticado + info de usuario
2. Actualizar useAuth.ts
- checkAuth() ahora usa /api/auth/status
- fetchUserInfo() también usa el nuevo endpoint
- Lógica simplificada y más confiable
Con esto, la verificación de sesión es precisa y en tiempo real,
consultando directamente los headers de Authentik en el servidor.
El Set failedTracks marcaba canciones como fallidas permanentemente
durante toda la sesión, sin permitir reintentarlas. Esto causaba que
canciones que fallaban por razones temporales (ej: sesión expirada)
quedaran marcadas como error incluso después de resolver el problema.
Cambios implementados:
- Limpiar estado de error al inicio de playTrack() antes de reintentar
- Agregar watcher que limpia todos los errores cuando se restablece auth
- Agregar watcher que limpia errores cuando se cargan canciones exitosamente
Con esto, las canciones con error pueden reintentarse haciendo click
nuevamente, y todos los errores se limpian automáticamente cuando
la autenticación se restablece o se cargan canciones exitosamente.
Cuando la sesión de Authentik expira, los fetch() a /api/music recibían
un redirect (302) a la página de login. Por defecto, fetch intenta seguir
el redirect pero falla por CORS porque Authentik no tiene el header
Access-Control-Allow-Origin.
La solución es usar redirect: 'error' en todos los fetch() a endpoints
protegidos, lo que convierte los redirects en errores que podemos capturar
y manejar apropiadamente. Esto coincide con la estrategia que ya usa
useAuth.ts.
Cambios:
- stores/music.ts: Agregar redirect: 'error' a fetchTracks() y cacheByName()
- pages/index.vue: Agregar redirect: 'error' a playTrack()
- Mejorar detección de errores de autenticación para incluir 'Failed to fetch'
y errores de tipo TypeError relacionados con redirects
- Agregar id único (/?app=musica), launch_handler, handle_links y url_handlers
- Unificar workflow de 2 jobs (build + deploy) a 1 solo job
- Workaround para bug de Gitea que solo ejecuta el primer job
- Agregar capture_links en manifest para mejorar experiencia PWA
- Crear archivo .well-known para asociación con inicio.nucleoriofrio.com
- Configurar Traefik para servir .well-known sin autenticación
- Crear error.vue para manejar errores 404 y otros errores de routing
- Crear pages/offline.vue para estado offline
- Ambas páginas incluyen fondo Aurora y diseño glass morphism
- Opciones para volver al menú principal o ir a Authentik
- Agregar /offline a rutas de prerender
- Detección automática de estado de conexión en página offline
- Agregar contador de errores consecutivos
- Detener reproducción después de 2 errores consecutivos
- Mostrar toast de error cuando se alcanza el límite
- Resetear contador cuando una canción carga exitosamente
- Continuar con la siguiente canción en el primer error
- Usar var(--bg-secondary) en lugar de rgba fijo
- Aumentar blur de 20px a 50px para consistencia
- Usar var(--border-glass) para bordes
- Ajustar border-radius de 16px a 12px
- Usar mismo box-shadow que AuthIndicator
- Reducir padding de 12px a 8px
- Agregar z-index: 100 al app-header
- Aumentar z-index del dropdown a 10001 (mayor que AuthIndicator)
- Asegurar que el dropdown se dibuje por encima de todos los elementos
- Cambiar overflow: hidden a overflow: visible en app-header
- Aumentar z-index del dropdown de 1000 a 9999
- Permitir que el dropdown se dibuje por encima de todos los elementos
- Crear componente SettingsMenu.client.vue con tres puntos verticales
- Agrupar AuthIndicator y ThemeToggle en dropdown menu
- Reducir espacio en barra principal para diseño más compacto
- Agregar animaciones y transiciones suaves al dropdown
- Cerrar menú automáticamente al hacer clic fuera o presionar Escape
- Agregar componente SearchFilter.client.vue modular y expandible
- Integrar búsqueda en MainContainer con contador de resultados
- Implementar filtrado de canciones por nombre en pages/index.vue
- Configurar hook PostToolUse para monitorear Gitea Actions
- Copiar y adaptar script monitor-gitea-action.sh para repodructor
- 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
- Agrega @pinia/nuxt, idb y store central (stores/music.ts)
- Cacheo manual desde menú contextual y borrado (TrackContextMenu)
- Ícono verde para canciones cacheadas, sin auto-cache al reproducir
- Toasts de feedback (stores/toast.ts, ToastContainer)
- Fallback offline de listado a IndexedDB; fix MUSIC_DIR absoluto en preview/prod
- Ajustes PWA: navigateFallback '/', devOptions, workbox condicional
- Estilos y animación del context menu (tema light/dark, blur fuerte)
- Correcciones de sintaxis y posicionamiento exacto al cursor
- Fix path traversal security check by using absolute paths
- Remove problematic fetch override that forced JSON headers on all API requests
- Add error tracking and visual indicators for failed tracks
- Correct music directory resolution for both relative and absolute paths
The main issue was the security validation comparing relative paths incorrectly,
causing legitimate music file requests to be rejected with 403 errors.
