Phase 2 Complete: SQL migration with SQLModel and Alembic

2026-03-25 13:46:15 +00:00
parent 96b12b66e2
commit a684237725
21 changed files with 1148 additions and 466 deletions
@@ -11,7 +11,7 @@

    <!-- 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"></script>
+    <script src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
    <script src="https://cdn.plyr.io/3.7.8/plyr.polyfilled.js"></script>

    <style>
@@ -31,15 +31,34 @@
    <script src="/static/js/watchlist-ui.js?v=1.11" defer></script>
    <script src="/static/js/main.js?v=1.11" defer></script>
 </head>
-<body x-data="{ 
-    activeTab: 'home', 
-    isAuthenticated: true,
-    username: ''
-}" @set-tab.window="activeTab = $event.detail.tab"
-   @auth-success.window="isAuthenticated = true; username = $event.detail.username">
+<body x-data="globalAppState">
    {% include "components/toast_container.html" %}
    <div class="container">
        {% block content %}{% endblock %}
    </div>
+
+    <script>
+        // Global State initialized when Alpine is ready
+        document.addEventListener('alpine:init', () => {
+            console.log('Alpine.js initializing...');
+            Alpine.data('globalAppState', () => ({
+                activeTab: 'home',
+                isAuthenticated: true,
+                username: '',
+                init() {
+                    console.log('Global app state ready');
+                    window.addEventListener('auth-success', (e) => {
+                        console.log('Alpine auth-success received');
+                        this.isAuthenticated = true;
+                        this.username = e.detail.username;
+                    });
+                    window.addEventListener('set-tab', (e) => {
+                        console.log('Alpine set-tab received:', e.detail.tab);
+                        this.activeTab = e.detail.tab;
+                    });
+                }
+            }));
+        });
+    </script>
 </body>
 </html>
@@ -4,7 +4,6 @@
 <!-- User info and logout button -->
 <div id="userInfo" 
     x-show="isAuthenticated" 
-     x-cloak
     style="margin-bottom: 15px; padding: 10px; background: rgba(0, 217, 255, 0.1); border-radius: 8px; display: flex; justify-content: space-between; align-items: center;">
    <div style="display: flex; align-items: center; gap: 10px;">
        <span style="color: #00d9ff;">👤</span>
@@ -21,39 +20,48 @@
 <!-- Login prompt (shown when not logged in) -->
 <div id="loginPrompt" 
     x-show="!isAuthenticated" 
-     x-cloak
     style="margin-bottom: 15px; padding: 15px; background: rgba(0, 217, 255, 0.1); border: 1px solid rgba(0, 217, 255, 0.3); border-radius: 8px; text-align: center;">
    <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>

-<!-- Tabs - Simple and direct -->
+<!-- Tabs - Robust navigation -->
 <div id="mainTabs" class="tabs" style="display: flex !important; visibility: visible !important;">
-    <button class="tab" :class="{ 'active': activeTab === 'home' }" @click="activeTab = 'home'">
+    <button class="tab" 
+            :class="{ 'active': activeTab === 'home' }" 
+            @click="activeTab = 'home'; window.dispatchEvent(new CustomEvent('set-tab', { detail: { tab: '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>
        Accueil
    </button>
-    <button class="tab" :class="{ 'active': activeTab === 'anime' }" @click="activeTab = 'anime'">
+    <button class="tab" 
+            :class="{ 'active': activeTab === 'anime' }" 
+            @click="activeTab = 'anime'; window.dispatchEvent(new CustomEvent('set-tab', { detail: { tab: 'anime' } }))">
        <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="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"></path>
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
        </svg>
        Anime
    </button>
-    <button class="tab" :class="{ 'active': activeTab === 'series' }" @click="activeTab = 'series'">
+    <button class="tab" 
+            :class="{ 'active': activeTab === 'series' }" 
+            @click="activeTab = 'series'; window.dispatchEvent(new CustomEvent('set-tab', { detail: { tab: 'series' } }))">
        <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="M7 4v16M17 4v16M3 8h4m10 0h4M3 12h18M3 16h4m10 0h4M4 20h16a1 1 0 001-1V5a1 1 0 00-1-1H4a1 1 0 00-1 1v14a1 1 0 001 1z"></path>
        </svg>
        Série
    </button>
-    <button class="tab" :class="{ 'active': activeTab === 'watchlist' }" @click="activeTab = 'watchlist'">
+    <button class="tab" 
+            :class="{ 'active': activeTab === 'watchlist' }" 
+            @click="activeTab = 'watchlist'; window.dispatchEvent(new CustomEvent('set-tab', { detail: { tab: 'watchlist' } }))">
        <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="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2m0 0a2 2 0 00-2 2h10a2 2 0 002-2V7a2 2 0 00-2-2"></path>
        </svg>
        Watchlist
    </button>
-    <button class="tab" :class="{ 'active': activeTab === 'downloads' }" @click="activeTab = 'downloads'">
+    <button class="tab" 
+            :class="{ 'active': activeTab === 'downloads' }" 
+            @click="activeTab = 'downloads'; window.dispatchEvent(new CustomEvent('set-tab', { detail: { tab: 'downloads' } }))">
        <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="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path>
        </svg>