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/components/downloads_list.html

@@ -0,0 +1,54 @@
+<div class="downloads-grid" 
+     hx-get="/api/downloads?html=true" 
+     hx-trigger="every 2s" 
+     hx-swap="innerHTML">
+    {% if tasks %}
+        {% for task_id, task in tasks.items() %}
+            <div class="download-item task-{{ task.status }}">
+                <div class="download-info">
+                    <span class="download-name" title="{{ task.filename }}">{{ task.filename }}</span>
+                    <span class="badge badge-{{ task.status }}">{{ task.status }}</span>
+                </div>
+                
+                <div class="progress-container">
+                    <div class="progress-bar" style="width: {{ task.progress }}%"></div>
+                </div>
+                
+                <div class="download-meta">
+                    <span>{{ task.progress | round(1) }}%</span>
+                    <span>{{ task.download_speed }}</span>
+                    <span>{{ task.eta }}</span>
+                </div>
+                
+                <div class="download-actions">
+                    {% if task.status == 'downloading' or task.status == 'pending' %}
+                        <button class="btn-icon" hx-post="/api/downloads/{{ task_id }}/pause" hx-swap="none">
+                            <i class="fas fa-pause"></i>
+                        </button>
+                    {% elif task.status == 'paused' %}
+                        <button class="btn-icon" hx-post="/api/downloads/{{ task_id }}/resume" hx-swap="none">
+                            <i class="fas fa-play"></i>
+                        </button>
+                    {% endif %}
+                    
+                    {% if task.status == 'completed' %}
+                        <a href="/video/{{ task_id }}" class="btn-icon success">
+                            <i class="fas fa-external-link-alt"></i>
+                        </a>
+                    {% endif %}
+                    
+                    <button class="btn-icon danger" 
+                            hx-delete="/api/downloads/{{ task_id }}" 
+                            hx-confirm="Supprimer ce téléchargement ?"
+                            hx-swap="none">
+                        <i class="fas fa-trash"></i>
+                    </button>
+                </div>
+            </div>
+        {% endfor %}
+    {% else %}
+        <div class="empty-state">
+            <p>Aucun téléchargement en cours</p>
+        </div>
+    {% endif %}
+</div>