added remove all item from queue

src/server/web/static/js/queue.js

@@ -142,6 +142,10 @@ class QueueManager {
             this.clearQueue('failed');
         });
 
+        document.getElementById('clear-pending-btn').addEventListener('click', () => {
+            this.clearQueue('pending');
+        });
+
         document.getElementById('retry-all-btn').addEventListener('click', () => {
             this.retryAllFailed();
         });
@@ -442,6 +446,14 @@ class QueueManager {
         const hasFailed = (data.failed_downloads || []).length > 0;
         const hasCompleted = (data.completed_downloads || []).length > 0;
 
+        console.log('Button states update:', {
+            hasPending,
+            pendingCount: (data.pending_queue || []).length,
+            hasActive,
+            hasFailed,
+            hasCompleted
+        });
+
         // Enable start button only if there are pending items and no active downloads
         document.getElementById('start-queue-btn').disabled = !hasPending || hasActive;
 
@@ -458,17 +470,28 @@ class QueueManager {
         document.getElementById('retry-all-btn').disabled = !hasFailed;
         document.getElementById('clear-completed-btn').disabled = !hasCompleted;
         document.getElementById('clear-failed-btn').disabled = !hasFailed;
+        
+        // Update clear pending button if it exists
+        const clearPendingBtn = document.getElementById('clear-pending-btn');
+        if (clearPendingBtn) {
+            clearPendingBtn.disabled = !hasPending;
+            console.log('Clear pending button updated:', { disabled: !hasPending, hasPending });
+        } else {
+            console.error('Clear pending button not found in DOM');
+        }
     }
 
     async clearQueue(type) {
         const titles = {
             completed: 'Clear Completed Downloads',
-            failed: 'Clear Failed Downloads'
+            failed: 'Clear Failed Downloads',
+            pending: 'Remove All Pending Downloads'
         };
 
         const messages = {
             completed: 'Are you sure you want to clear all completed downloads?',
-            failed: 'Are you sure you want to clear all failed downloads?'
+            failed: 'Are you sure you want to clear all failed downloads?',
+            pending: 'Are you sure you want to remove all pending downloads from the queue?'
         };
 
         const confirmed = await this.showConfirmModal(titles[type], messages[type]);
@@ -495,6 +518,16 @@ class QueueManager {
 
                 this.showToast(`Cleared ${data.count} failed downloads`, 'success');
                 this.loadQueueData();
+            } else if (type === 'pending') {
+                const response = await this.makeAuthenticatedRequest('/api/queue/pending', {
+                    method: 'DELETE'
+                });
+
+                if (!response) return;
+                const data = await response.json();
+
+                this.showToast(`Removed ${data.count} pending downloads`, 'success');
+                this.loadQueueData();
             }
 
         } catch (error) {

src/server/web/templates/queue.html

@@ -124,6 +124,10 @@
                         Download Queue (<span id="queue-count">0</span>)
                     </h2>
                     <div class="section-actions">
+                        <button id="clear-pending-btn" class="btn btn-secondary" disabled>
+                            <i class="fas fa-trash-alt"></i>
+                            Remove All
+                        </button>
                         <button id="start-queue-btn" class="btn btn-primary" disabled>
                             <i class="fas fa-play"></i>
                             Start