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/watchlist_items_list.html

@@ -0,0 +1,39 @@
+{% if items %}
+    <div class="watchlist-grid">
+        {% for item in items %}
+            <div class="watchlist-item card" id="watchlist-{{ item.id }}">
+                <div class="item-poster">
+                    <img src="{{ item.poster_image or '/static/img/no-poster.png' }}" alt="{{ item.anime_title }}">
+                </div>
+                <div class="item-info">
+                    <h3>{{ item.anime_title }}</h3>
+                    <div class="item-meta">
+                        <span class="badge">{{ item.provider_id }}</span>
+                        <span class="badge badge-{{ item.status }}">{{ item.status }}</span>
+                    </div>
+                    <div class="item-stats">
+                        <span>Épisode: {{ item.last_episode_downloaded }}</span>
+                    </div>
+                    <div class="item-actions">
+                        <button class="btn btn-sm btn-primary"
+                                hx-get="/api/anime/episodes?url={{ item.anime_url | urlencode }}"
+                                hx-target="#player-container">
+                            <i class="fas fa-play"></i>
+                        </button>
+                        <button class="btn btn-sm btn-danger"
+                                hx-delete="/api/watchlist/{{ item.id }}"
+                                hx-target="#watchlist-{{ item.id }}"
+                                hx-swap="outerHTML"
+                                hx-confirm="Retirer de la watchlist ?">
+                            <i class="fas fa-trash"></i>
+                        </button>
+                    </div>
+                </div>
+            </div>
+        {% endfor %}
+    </div>
+{% else %}
+    <div class="empty-state">
+        <p>Votre watchlist est vide.</p>
+    </div>
+{% endif %}