fix: restore and stabilize tab navigation with Alpine.js

- Fixed navigation blockage by moving Alpine state to body scope
- Resolved CSS display conflicts between legacy .active class and x-show
- Synchronized legacy auth logic with Alpine global state
- Redirected legacy switchTab calls to Alpine events
- Removed obsolete tabs.js and updated home section initialization
- Added E2E navigation test placeholder

static/css/style.css

@@ -172,7 +172,7 @@
         }
 
         .tab-content {
-            display: none;
+            /* Managed by Alpine.js x-show */
         }
 
         .tab-content.active {

static/js/auth.js

@@ -91,14 +91,27 @@ async function checkAuth() {
 
         if (response.ok) {
             const data = await response.json();
-            
+
+            // Log for debugging
+            console.log('Auth check successful for:', data.user.username);
+
             // Dispatch event for Alpine.js global state
             window.dispatchEvent(new CustomEvent('auth-success', { 
                 detail: { username: data.user.full_name || data.user.username } 
             }));
-            
+
+            // Set global auth state in case dispatch was too early
+            if (window.Alpine) {
+                const body = document.querySelector('body');
+                if (body && body.__x) {
+                    body.__x.$data.isAuthenticated = true;
+                    body.__x.$data.username = data.user.full_name || data.user.username;
+                }
+            }
+
             return true;
-        } else {
+        }
+ else {
             // Token invalid, remove it and redirect
             removeToken();
             redirectToLogin();

static/js/main.js

@@ -195,63 +195,11 @@ async function handleDownloadProviderEpisode(providerId) {
 }
 
 /**
- * Switch between tabs
+ * Switch between tabs (Modernized to Alpine.js)
  */
 function switchTab(tabName) {
-    // Hide all tabs
-    document.querySelectorAll('.tab-content').forEach(tab => {
-        tab.classList.remove('active');
-    });
-    document.querySelectorAll('.tab').forEach(btn => {
-        btn.classList.remove('active');
-    });
-
-    // Show selected tab
-    const tabElement = document.getElementById(`tab-${tabName}`);
-    if (tabElement) {
-        tabElement.classList.add('active');
-    }
-
-    // Find and activate the button
-    const buttons = document.querySelectorAll('.tab');
-    buttons.forEach(btn => {
-        const tabType = btn.getAttribute('data-tab-type');
-
-        if (tabType === 'home' && tabName === 'home') {
-            btn.classList.add('active');
-        } else if (tabType === 'anime' && tabName === 'anime') {
-            // Static anime tab
-            btn.classList.add('active');
-        } else if (tabType === 'series' && tabName === 'series') {
-            // Static series tab
-            btn.classList.add('active');
-        } else if (tabType === 'providers' && tabName === 'providers') {
-            // Static providers tab
-            btn.classList.add('active');
-        } else if (tabType === 'anime' && btn.getAttribute('data-provider') === tabName.replace('anime-', '')) {
-            btn.classList.add('active');
-        } else if (tabType === 'series' && btn.getAttribute('data-provider') === tabName.replace('series-', '')) {
-            btn.classList.add('active');
-        }
-    });
-
-    // Load home content when switching to home tab
-    if (tabName === 'home') {
-        // Content is already loaded on init, but you can reload if needed
-        if (typeof loadHomeContent === 'function' && !document.getElementById('recommendationsList').hasChildNodes()) {
-            loadHomeContent();
-        }
-    }
-
-    // Load watchlist content when switching to watchlist tab
-    if (tabName === 'watchlist') {
-        if (typeof loadSchedulerStatus === 'function') {
-            loadSchedulerStatus();
-        }
-        if (typeof displayWatchlist === 'function') {
-            displayWatchlist();
-        }
-    }
+    console.log('Switching tab to:', tabName);
+    window.dispatchEvent(new CustomEvent('set-tab', { detail: { tab: tabName } }));
 }