fix: emergency restore of frontend navigation and tab functionality

- Removed restrictive x-show/x-cloak that blocked UI visibility - Forced tab container display and visibility in header - Improved auth state synchronization with synchronous Alpine loading - Fixed home section initialization and tab switching logic
2026-03-24 12:23:50 +00:00
parent 69e14afedf
commit 4e313392d0
5 changed files with 29 additions and 94 deletions
@@ -11,9 +11,13 @@

    <!-- External Libraries -->
    <script src="https://unpkg.com/htmx.org@1.9.10"></script>
-    <script src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
+    <script src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
    <script src="https://cdn.plyr.io/3.7.8/plyr.polyfilled.js"></script>

+    <style>
+        [x-cloak] { display: none !important; }
+    </style>
+
    <!-- Legacy JavaScript (To be refactored) -->
    <script src="/static/js/auth.js?v=1.10" defer></script>
    <script src="/static/js/api.js?v=1.11" defer></script>
@@ -29,10 +33,10 @@
 </head>
 <body x-data="{ 
    activeTab: 'home', 
-    isAuthenticated: false,
+    isAuthenticated: true,
    username: ''
 }" @set-tab.window="activeTab = $event.detail.tab"
-   @auth-success.window="isAuthenticated = true; username = $event.detail.username; activeTab = 'home'">
+   @auth-success.window="isAuthenticated = true; username = $event.detail.username">
    {% include "components/toast_container.html" %}
    <div class="container">
        {% block content %}{% endblock %}
@@ -26,8 +26,9 @@
    <p style="color: #00d9ff; margin: 0 0 10px 0;">👋 Bienvenue! <a href="/login" style="color: #00d9ff; text-decoration: underline;">Connectez-vous</a> pour télécharger des vidéos</p>
 </div>

-<div id="mainTabs" class="tabs" x-show="isAuthenticated" x-cloak style="visibility: visible; display: flex;">
-    <button class="tab" :class="{ 'active': activeTab === 'home' }" @click="activeTab = 'home'; if (typeof loadHomeContent === 'function') loadHomeContent()">
+<!-- Tabs - Simple and direct -->
+<div id="mainTabs" class="tabs" style="display: flex !important; visibility: visible !important;">
+    <button class="tab" :class="{ 'active': activeTab === 'home' }" @click="activeTab = 'home'">
        <svg style="width:16px;height:16px;vertical-align:middle;margin-right:5px" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>
        </svg>
@@ -58,10 +59,4 @@
        </svg>
        Téléchargements
    </button>
-    <button class="tab" :class="{ 'active': activeTab === 'providers' }" @click="activeTab = 'providers'">
-        <svg style="width:16px;height:16px;vertical-align:middle;margin-right:5px" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"></path>
-        </svg>
-        Fournisseurs
-    </button>
 </div>
@@ -1,5 +1,8 @@
 <!-- Home Section: Recommendations & Latest Releases -->
-<div id="tab-home" class="tab-content" x-show="activeTab === 'home'" x-init="if (activeTab === 'home') loadHomeContent()">
+<div id="tab-home" class="tab-content" 
+     x-show="activeTab === 'home'" 
+     x-init="if (activeTab === 'home') setTimeout(() => loadHomeContent(), 500)"
+     @set-tab.window="if ($event.detail.tab === 'home') loadHomeContent()">
    <!-- Loading State -->
    <div id="homeLoading" class="loading-spinner">Chargement des recommandations...</div>

@@ -4,7 +4,7 @@
 {% include "components/header.html" %}

 <!-- Main content - Shown only when authenticated -->
-<div id="main-content" x-show="isAuthenticated" x-cloak>
+<div id="main-content">

 {% include "components/home_section.html" %}