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
- 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.
- Replace emoji icons with professional SVG icons from Lucide Vue
- Add collapsible MusicControls with compact top-right collapse button
- Improve icon system with dynamic sizing and proper prop handling
- Disable SSR to prevent hydration issues with audio APIs
- Update IconButton to support both emoji strings and SVG components
- Optimize bottom positioning for expanded vs collapsed states
- Document new icon system in DESIGN_SYSTEM.md
