Phase 3: HTMX & Alpine.js integration, router refactoring, and UI modernization

- Modernized the frontend with HTMX for server-driven UI and Alpine.js for client state.
- Refactored anime, player, and recommendation logic into modular routers.
- Updated README.md to reflect the latest project state and technologies (v2.4).
- Added Plyr.io for an improved streaming experience.
- Improved project structure with componentized templates.
- Added Playwright and Vitest configuration for frontend testing.

templates/components/home_section.html

@@ -1,36 +1,41 @@
-<!-- Home Section: Recommendations & Latest Releases -->
-<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>
+<!-- Home Section: Premium Layout -->
+<div id="tab-home" class="tab-content" x-show="activeTab === 'home'">
+    
+    <!-- Hero / Featured area could go here later -->
 
-    <!-- Recommendations Section -->
-    <div id="recommendationsSection" style="display: none;">
+    <!-- Recommendations Row -->
+    <div class="section-container">
         <div class="section-header">
             <h2>🎯 Recommandé pour vous</h2>
-            <button class="btn-small btn-secondary" onclick="loadRecommendations()">
-                <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" style="width:14px;height:14px;">
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
-                </svg>
-                Actualiser
+            <button class="btn-secondary btn-small" 
+                    hx-get="/api/recommendations" 
+                    hx-target="#recommendationsList">
+                <i class="fas fa-sync-alt"></i> Actualiser
             </button>
         </div>
-        <div id="recommendationsList" class="recommendations-carousel"></div>
+        <div id="recommendationsList" 
+             hx-get="/api/recommendations" 
+             hx-trigger="load delay:100ms" 
+             class="streaming-row">
+            <div class="loading-spinner"></div>
+        </div>
     </div>
 
-    <!-- Latest Releases Section -->
-    <div id="releasesSection" style="display: none; margin-top: 40px;">
+    <!-- Latest Releases Row -->
+    <div class="section-container">
         <div class="section-header">
-            <h2>🔥 Dernières sorties de la saison</h2>
-            <button class="btn-small btn-secondary" onclick="loadLatestReleases()">
-                <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" style="width:14px;height:14px;">
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
-                </svg>
-                Actualiser
+            <h2>🔥 Dernières sorties</h2>
+            <button class="btn-secondary btn-small" 
+                    hx-get="/api/releases/latest" 
+                    hx-target="#releasesList">
+                <i class="fas fa-sync-alt"></i> Actualiser
             </button>
         </div>
-        <div id="releasesList" class="releases-carousel"></div>
+        <div id="releasesList" 
+             hx-get="/api/releases/latest" 
+             hx-trigger="load delay:300ms" 
+             class="streaming-row">
+            <div class="loading-spinner"></div>
+        </div>
     </div>
 </div>