feat: frontend modernization with HTMX, Alpine.js and Plyr (Phase 3)

- Integrated HTMX for server-driven UI updates and fragments
- Adopted Alpine.js for global reactive state and tab management
- Replaced legacy player with Plyr.io for premium streaming experience
- Implemented real-time download polling via HTMX
- Added server-sent Toast notification system
- Fixed navigation and authentication scoping issues

templates/index.html

@@ -3,30 +3,38 @@
 {% block content %}
 {% include "components/header.html" %}
 
-<!-- Main content - Hidden by default, shown only when authenticated -->
-<div id="main-content" style="display: none;">
+<!-- Main content - Shown only when authenticated -->
+<div id="main-content" x-show="isAuthenticated" x-cloak>
 
 {% include "components/home_section.html" %}
 
 <!-- Nouveaux onglets -->
-<div id="tab-anime" class="tab-content">
+<div id="tab-anime" class="tab-content" x-show="activeTab === 'anime'">
     <!-- Anime Search Section -->
     <div class="section-header">
         <h2>🎬 Rechercher un Anime</h2>
     </div>
     <div class="url-form">
-        <div class="input-group">
+        <form hx-get="/api/anime/search" 
+              hx-target="#animeSearchResults" 
+              hx-indicator="#search-loading"
+              class="input-group">
             <input
                 type="text"
+                name="q"
                 id="animeSearchInput"
                 placeholder="Rechercher un anime (ex: Frieren, One Piece, Naruto...)"
+                required
             >
-            <button type="button" class="btn-primary" onclick="handleAnimeSearch()">
+            <button type="submit" class="btn-primary">
                 <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
                 </svg>
                 Rechercher
             </button>
+        </form>
+        <div id="search-loading" class="htmx-indicator">
+            <div class="spinner"></div> Recherche en cours...
         </div>
         <div style="margin-top: 10px; padding: 10px; background: rgba(0, 217, 255, 0.1); border-radius: 8px; font-size: 12px; color: #aaa;">
             💡 <strong>Info:</strong> La recherche utilise MyAnimeList pour afficher la fiche complète (synopsis, saisons, etc.)
@@ -51,7 +59,7 @@
     <div id="animeReleasesList" class="recommendations-carousel"></div>
 </div>
 
-<div id="tab-series" class="tab-content">
+<div id="tab-series" class="tab-content" x-show="activeTab === 'series'">
     <!-- Series Search Section -->
     <div class="section-header">
         <h2>📺 Rechercher une Série TV</h2>
@@ -105,18 +113,21 @@
     <div id="seriesReleasesList" class="releases-carousel"></div>
 </div>
 
-<div id="tab-providers" class="tab-content">
+<div id="tab-providers" class="tab-content" x-show="activeTab === 'providers'">
     <div class="section-header">
         <h2>📦 Fournisseurs de Streaming</h2>
+        <button class="btn btn-sm btn-secondary" hx-get="/api/providers/health" hx-target="#providersGrid">Actualiser</button>
     </div>
     <div id="providersGrid" class="search-results"></div>
 </div>
 
-<div id="tab-watchlist" class="tab-content">
+<div id="tab-watchlist" class="tab-content" x-show="activeTab === 'watchlist'">
 {% include "components/watchlist_section.html" %}
 </div>
 
+<div id="tab-downloads" class="tab-content" x-show="activeTab === 'downloads'">
 {% include "components/downloads_section.html" %}
+</div>
 
 </div>
 <!-- End of main-content -->