update

app/templates/index.html

@@ -29,8 +29,15 @@
         </div>
 
         <div class="card">
-            <h2>Download Queue</h2>
-            <div id="queue-list"></div>
+            <h2>Downloads</h2>
+            <details open>
+                <summary>Active Queue <span id="queue-count"></span></summary>
+                <div id="queue-list"></div>
+            </details>
+            <details>
+                <summary>History <span id="history-count"></span></summary>
+                <div id="history-list"></div>
+            </details>
         </div>
     </div>
 
@@ -171,20 +178,35 @@
             const response = await fetch('/download/queue');
             const queue = await response.json();
 
-            const list = document.getElementById('queue-list');
-            list.innerHTML = '';
+            const queueList = document.getElementById('queue-list');
+            const historyList = document.getElementById('history-list');
+            
+            queueList.innerHTML = '';
+            historyList.innerHTML = '';
+            
+            let activeCount = 0;
+            let historyCount = 0;
 
             queue.forEach(item => {
                 const div = document.createElement('div');
                 div.className = 'queue-item';
                 let controls = '';
-                if (item.status === 'downloading' || item.status === 'queued') {
+                
+                // Determine if active or history
+                // Active: queued, downloading
+                // History: completed, failed, cancelled
+                const isHistory = ['completed', 'failed', 'cancelled'].includes(item.status);
+
+                if (!isHistory) {
+                    activeCount++;
                     if (item.control === 'pause') {
                         controls += `<button onclick="controlTask('${item.id}', 'resume')">Resume</button>`;
                     } else {
                         controls += `<button onclick="controlTask('${item.id}', 'pause')">Pause</button>`;
                     }
                     controls += `<button onclick="controlTask('${item.id}', 'cancel')" style="background-color: #ff4444;">Cancel</button>`;
+                } else {
+                    historyCount++;
                 }
 
                 div.innerHTML = `
@@ -203,8 +225,16 @@
                         </div>
                     </div>
                 `;
-                list.appendChild(div);
+                
+                if (!isHistory) {
+                    queueList.appendChild(div);
+                } else {
+                    historyList.appendChild(div);
+                }
             });
+            
+            document.getElementById('queue-count').textContent = `(${activeCount})`;
+            document.getElementById('history-count').textContent = `(${historyCount})`;
         }
 
         async function controlTask(id, action) {