fix: resolve web active download rendering, style cookies selector and custom confirmations

Author: wilkinbarban

src/services/download_manager.py

@@ -2,6 +2,7 @@
 import time
 from queue import Queue, Empty
 from datetime import datetime
+import uuid
 
 from src.modules.core import VideoDownloadTask, Config
 from src.services.workers import DownloadWorker
@@ -184,7 +185,7 @@ def start_download(self, task: VideoDownloadTask):
             config.get("format", "mp4"),
             config.get("language", "es")
         )
-        worker_id = f"{task.url}_{time.time()}"
+        worker_id = f"worker_{uuid.uuid4().hex}"
 
         task.state = "descargando"
         task.start_time = datetime.now().strftime("%Y-%m-%d %H:%M:%S")

src/web/static/app.js

@@ -186,7 +186,7 @@ function updateUI(state) {
         </div>
 
         <!-- Progress Bar -->
-        <div class="w-full h-2 bg-slate-955/40 rounded-full overflow-hidden mb-3">
+        <div class="w-full h-2 bg-slate-950/40 rounded-full overflow-hidden mb-3">
             <div id="${workerId}-bar" class="h-full progress-fill" style="width: ${percent}%"></div>
         </div>
 
@@ -211,7 +211,7 @@ function updateUI(state) {
 
 function createPendingCard(task, index) {
     const card = document.createElement('div');
-    card.className = 'glass-card p-4 download-card border-l-4 border-l-purple-500/40 bg-slate-955/10 animate-slide-in';
+    card.className = 'glass-card p-4 download-card border-l-4 border-l-purple-500/40 bg-slate-950/10 animate-slide-in';
 
     card.innerHTML = `
         <div class="flex items-center justify-between gap-4">
@@ -239,7 +239,7 @@ function createPendingCard(task, index) {
 }
 
 async function cancelActiveWorker(workerId) {
-    if (!confirm('¿Cancelar esta descarga?')) return;
+    if (!await showConfirm('¿Cancelar Descarga?', '¿Estás seguro de que deseas cancelar esta descarga activa?', 'warning')) return;
     try {
         const response = await fetch(`/api/downloads/${encodeURIComponent(workerId)}/cancel`, { method: 'POST' });
         const res = await response.json();
@@ -257,7 +257,7 @@ async function cancelActiveWorker(workerId) {
 }
 
 async function removePendingTask(url) {
-    if (!confirm('¿Eliminar esta tarea de la cola?')) return;
+    if (!await showConfirm('¿Quitar de la Cola?', '¿Estás seguro de que deseas eliminar esta tarea de la cola de pendientes?', 'warning')) return;
     try {
         const response = await fetch('/api/downloads/remove-pending', {
             method: 'POST',
@@ -457,7 +457,7 @@ async function togglePauseQueue() {
 }
 
 async function cancelAllDownloads() {
-    if (!confirm('¿Estás seguro de que quieres cancelar todas las descargas activas?')) return;
+    if (!await showConfirm('¿Cancelar Todo?', '¿Estás seguro de que deseas cancelar todas las descargas activas?', 'error')) return;
     try {
         const response = await fetch('/api/downloads/cancel', { method: 'POST' });
         const res = await response.json();
@@ -488,7 +488,7 @@ async function clearHistory() {
 }
 
 async function clearQueue() {
-    if (!confirm('¿Cancelar todas las descargas activas y vaciar la cola de pendientes?')) return;
+    if (!await showConfirm('¿Limpiar Lista?', '¿Cancelar todas las descargas activas y vaciar la cola de pendientes?', 'error')) return;
     try {
         const response = await fetch('/api/downloads/clear-queue', { method: 'POST' });
         const res = await response.json();
@@ -800,6 +800,52 @@ async function saveSettings() {
     }
 }
 
+// Custom Confirmation Modal Logic
+let confirmPromiseResolve = null;
+
+function showConfirm(title, message, iconType = 'warning') {
+    const modal = document.getElementById('confirm-modal');
+    const titleEl = document.getElementById('confirm-modal-title');
+    const messageEl = document.getElementById('confirm-modal-message');
+    const iconEl = document.getElementById('confirm-modal-icon');
+    const iconBg = document.getElementById('confirm-modal-icon-bg');
+    
+    titleEl.textContent = title;
+    messageEl.textContent = message;
+    
+    // Icon and colors
+    iconBg.className = 'w-10 h-10 rounded-xl flex items-center justify-center shrink-0 border';
+    if (iconType === 'error') {
+        iconBg.classList.add('bg-rose-500/20', 'border-rose-500/30', 'text-rose-400');
+        iconEl.className = 'fa-solid fa-ban text-lg';
+    } else if (iconType === 'info') {
+        iconBg.classList.add('bg-blue-500/20', 'border-blue-500/30', 'text-blue-400');
+        iconEl.className = 'fa-solid fa-circle-info text-lg';
+    } else { // warning
+        iconBg.classList.add('bg-amber-500/20', 'border-amber-500/30', 'text-amber-400');
+        iconEl.className = 'fa-solid fa-triangle-exclamation text-lg';
+    }
+    
+    modal.classList.add('modal-active');
+    
+    return new Promise((resolve) => {
+        confirmPromiseResolve = resolve;
+    });
+}
+
+function handleConfirmResult(value) {
+    const modal = document.getElementById('confirm-modal');
+    modal.classList.remove('modal-active');
+    if (confirmPromiseResolve) {
+        confirmPromiseResolve(value);
+        confirmPromiseResolve = null;
+    }
+}
+
+function closeConfirmModal() {
+    handleConfirmResult(false);
+}
+
 // Fetch logs and output to terminal log box
 async function fetchLogs() {
     const terminal = document.getElementById('terminal-logs');
@@ -826,6 +872,42 @@ window.addEventListener('DOMContentLoaded', () => {
     connectWebSocket();
     updateCookiesStatus();
 
+    // Setup confirm modal action listener
+    const btnConfirmOk = document.getElementById('btn-confirm-ok');
+    if (btnConfirmOk) {
+        btnConfirmOk.addEventListener('click', () => handleConfirmResult(true));
+    }
+    
+    // Setup Drag & Drop Cookie Upload Zone
+    const dropZone = document.getElementById('cookie-drop-zone');
+    if (dropZone) {
+        ['dragenter', 'dragover'].forEach(eventName => {
+            dropZone.addEventListener(eventName, (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                dropZone.classList.add('dragover');
+            }, false);
+        });
+
+        ['dragleave', 'drop'].forEach(eventName => {
+            dropZone.addEventListener(eventName, (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                dropZone.classList.remove('dragover');
+            }, false);
+        });
+
+        dropZone.addEventListener('drop', (e) => {
+            const dt = e.dataTransfer;
+            const files = dt.files;
+            if (files && files.length > 0) {
+                const fileInput = document.getElementById('cookie-file-input');
+                fileInput.files = files; // Assign files to input
+                uploadCookieFile(); // Trigger upload
+            }
+        }, false);
+    }
+    
     // Fetch logs every 5 seconds
     fetchLogs();
     setInterval(fetchLogs, 5000);

src/web/static/index.html

@@ -227,26 +227,43 @@ <h2 class="text-lg font-bold font-outfit text-white mb-4 flex items-center gap-2
                                 </select>
                             </div>
                         </div>
-                        <div>
-                            <label class="block text-xs font-semibold text-slate-400 uppercase tracking-wider mb-2">Cookies de Navegador (Bypass Bot)</label>
-                            <select id="setting-cookies" 
-                                    class="w-full px-3 py-2.5 bg-slate-900/50 border border-white/10 rounded-lg text-xs focus:outline-none focus:border-violet-500 transition-all text-white font-medium cursor-pointer">
-                                <option value="none">Ninguno (None)</option>
-                                <option value="chrome">Chrome</option>
-                                <option value="firefox">Firefox</option>
-                                <option value="edge">Edge</option>
-                                <option value="brave">Brave</option>
-                                <option value="opera">Opera</option>
-                            </select>
-                        </div>
-                        <div>
-                            <label class="block text-xs font-semibold text-slate-400 uppercase tracking-wider mb-2">Archivo de Cookies Local (cookies.txt / cookies.json)</label>
-                            <div class="flex items-center gap-3">
-                                <label class="px-3 py-2 bg-slate-800 hover:bg-slate-700 text-xs font-semibold rounded-lg border border-white/10 cursor-pointer text-white transition-all flex items-center gap-1.5">
-                                    <i class="fa-solid fa-file-import"></i> Seleccionar archivo...
+                        <!-- Cookies / Bot Bypass section styled beautifully -->
+                        <div class="p-4 rounded-2xl bg-violet-950/10 border border-violet-500/20 space-y-4">
+                            <div class="flex items-center gap-2">
+                                <div class="w-6 h-6 rounded-lg bg-violet-600/20 border border-violet-500/30 flex items-center justify-center text-violet-400">
+                                    <i class="fa-solid fa-cookie-bite text-xs"></i>
+                                </div>
+                                <h3 class="text-xs font-bold text-white uppercase tracking-wider">Bypass de Bot (Cookies)</h3>
+                            </div>
+                            
+                            <div>
+                                <label class="block text-[10px] font-semibold text-slate-400 uppercase tracking-wider mb-1.5">Cookies de Navegador</label>
+                                <div class="relative">
+                                    <select id="setting-cookies" 
+                                            class="w-full px-3 py-2 bg-slate-900/50 border border-white/10 rounded-lg text-xs focus:outline-none focus:border-violet-500 transition-all text-white font-medium cursor-pointer appearance-none">
+                                        <option value="none">Ninguno (None)</option>
+                                        <option value="chrome">Chrome</option>
+                                        <option value="firefox">Firefox</option>
+                                        <option value="edge">Edge</option>
+                                        <option value="brave">Brave</option>
+                                        <option value="opera">Opera</option>
+                                    </select>
+                                    <span class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none text-slate-400 text-[10px]">
+                                        <i class="fa-solid fa-chevron-down"></i>
+                                    </span>
+                                </div>
+                            </div>
+                            
+                            <div>
+                                <label class="block text-[10px] font-semibold text-slate-400 uppercase tracking-wider mb-1.5">Archivo de Cookies Local (cookies.txt / cookies.json)</label>
+                                <!-- Drag and Drop Cookie Upload Zone -->
+                                <div id="cookie-drop-zone" class="border border-dashed border-violet-500/30 rounded-xl p-4 bg-slate-900/20 hover:bg-slate-900/40 hover:border-violet-500/60 transition-all duration-300 flex flex-col items-center justify-center gap-2 cursor-pointer">
+                                    <i id="cookie-upload-icon" class="fa-solid fa-cloud-arrow-up text-xl text-violet-400"></i>
+                                    <span class="text-xs font-semibold text-slate-200 text-center">Importar cookies.txt / cookies.json</span>
+                                    <span class="text-[9px] text-slate-500 text-center">Arrastra el archivo aquí o haz clic para buscar</span>
+                                    <span id="cookie-file-status" class="text-[10px] text-slate-400 font-semibold mt-1">Cargando estado...</span>
                                     <input type="file" id="cookie-file-input" class="hidden" accept=".json,.txt" onchange="uploadCookieFile()">
-                                </label>
-                                <span id="cookie-file-status" class="text-xs text-slate-400 font-medium">Cargando estado...</span>
+                                </div>
                             </div>
                         </div>
                         <div class="flex items-center justify-between pt-2">
@@ -393,7 +410,32 @@ <h3 class="text-sm font-bold text-white font-outfit">Nueva Carpeta</h3>
         </div>
     </div>
 
+    <!-- Custom Confirmation Modal -->
+    <div id="confirm-modal" class="fixed inset-0 z-50 flex items-center justify-center bg-black/75 backdrop-blur-md opacity-0 pointer-events-none transition-all duration-300">
+        <div class="glass-card w-full max-w-sm mx-4 p-6 border border-white/10 bg-[#0c0f1d]/95 shadow-2xl space-y-4 transform scale-95 transition-transform duration-300">
+            <div class="flex items-start gap-4">
+                <div id="confirm-modal-icon-bg" class="w-10 h-10 rounded-xl bg-amber-500/20 border border-amber-500/30 flex items-center justify-center text-amber-400 shrink-0">
+                    <i id="confirm-modal-icon" class="fa-solid fa-triangle-exclamation text-lg"></i>
+                </div>
+                <div class="space-y-1">
+                    <h3 id="confirm-modal-title" class="text-md font-bold text-white font-outfit">Confirmar Acción</h3>
+                    <p id="confirm-modal-message" class="text-xs text-slate-300 leading-relaxed"></p>
+                </div>
+            </div>
+            <div class="flex items-center justify-end gap-3 pt-2">
+                <button id="btn-confirm-cancel" onclick="closeConfirmModal();" 
+                        class="px-4 py-2 rounded-lg bg-slate-800 hover:bg-slate-700 text-xs font-semibold text-slate-300 transition-all active:scale-95">
+                    Cancelar
+                </button>
+                <button id="btn-confirm-ok" 
+                        class="px-4 py-2 rounded-lg bg-gradient-to-r from-violet-600 to-fuchsia-600 hover:from-violet-500 hover:to-fuchsia-500 text-xs font-semibold text-white transition-all active:scale-95">
+                    Confirmar
+                </button>
+            </div>
+        </div>
+    </div>
+
     <!-- Web App JS Logic -->
-    <script src="app.js"></script>
+    <script src="app.js" defer></script>
 </body>
 </html>

src/web/static/style.css

@@ -210,7 +210,18 @@ input:focus, select:focus {
 }
 
 /* Modal default scaling transition */
-#folder-browser-modal > div, #new-folder-modal > div {
+#folder-browser-modal > div, #new-folder-modal > div, #confirm-modal > div {
     transform: scale(0.95);
     transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
 }
+
+/* Cookie Upload Drag and Drop Zone styling */
+#cookie-drop-zone {
+    transition: all 0.3s ease;
+}
+
+#cookie-drop-zone.dragover {
+    border-color: var(--neon-purple) !important;
+    background: rgba(168, 85, 247, 0.08) !important;
+    box-shadow: 0 0 15px rgba(168, 85, 247, 0.15) !important;
+}