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

@@ -0,0 +1,54 @@
+<div id="toast-container" 
+     class="toast-container"
+     x-data="{ toasts: [] }"
+     @show-toast.window="toasts.push({ id: Date.now(), message: $event.detail.message, type: $event.detail.type || 'info' }); setTimeout(() => { toasts = toasts.filter(t => t.id !== toasts[0].id) }, 5000)">
+    
+    <template x-for="toast in toasts" :key="toast.id">
+        <div class="toast" 
+             :class="'toast-' + toast.type"
+             x-show="true"
+             x-transition:enter="toast-enter"
+             x-transition:leave="toast-leave">
+            <div class="toast-content">
+                <i class="fas" :class="{
+                    'fa-check-circle': toast.type === 'success',
+                    'fa-exclamation-circle': toast.type === 'error',
+                    'fa-info-circle': toast.type === 'info'
+                }"></i>
+                <span x-text="toast.message"></span>
+            </div>
+            <button class="toast-close" @click="toasts = toasts.filter(t => t.id !== toast.id)">
+                <i class="fas fa-times"></i>
+            </button>
+        </div>
+    </template>
+</div>
+
+<style>
+.toast-container {
+    position: fixed;
+    top: 20px;
+    right: 20px;
+    z-index: 9999;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+}
+.toast {
+    min-width: 250px;
+    padding: 12px 16px;
+    border-radius: 8px;
+    background: #2d2d2d;
+    color: white;
+    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border-left: 4px solid #ccc;
+}
+.toast-success { border-left-color: #4caf50; }
+.toast-error { border-left-color: #f44336; }
+.toast-info { border-left-color: #2196f3; }
+.toast-content { display: flex; align-items: center; gap: 10px; }
+.toast-close { background: none; border: none; color: #aaa; cursor: pointer; }
+</style>