feat(ui): split downloads and history into tabs

public/app.js

@@ -25,6 +25,7 @@ const SSE_RECONNECT_MS = 3000; // browser already retries, but we add explicit b
 document.addEventListener('DOMContentLoaded', () => {
   checkAuthentication();
   initThemeSwitcher();
+  initTabs();
   initHistoryControls();
   
   document.getElementById('login-form').addEventListener('submit', handleLogin);
@@ -49,6 +50,30 @@ function setTheme(theme) {
   });
 }
 
+function initTabs() {
+  const savedTab = localStorage.getItem('sofarr-active-tab') || 'downloads';
+  activateTab(savedTab, false);
+
+  document.querySelectorAll('.tab-btn').forEach(btn => {
+    btn.addEventListener('click', () => {
+      const tab = btn.dataset.tab;
+      activateTab(tab, true);
+    });
+  });
+}
+
+function activateTab(tabName, save) {
+  document.querySelectorAll('.tab-btn').forEach(btn => {
+    btn.classList.toggle('active', btn.dataset.tab === tabName);
+  });
+  document.querySelectorAll('.tab-panel').forEach(panel => {
+    panel.style.display = panel.id === `tab-${tabName}` ? '' : 'none';
+  });
+  if (save) localStorage.setItem('sofarr-active-tab', tabName);
+  // Load history the first time the history tab is shown
+  if (tabName === 'history') loadHistory();
+}
+
 // --- SSE connection management ---
 
 function startSSE() {
@@ -248,10 +273,9 @@ function showDashboard() {
   sp.style.display = 'none';
   sp.innerHTML = '';
   document.getElementById('admin-controls').style.display = isAdmin ? 'flex' : 'none';
-  // Initialise days input from saved value, then load history
+  // Initialise days input from saved value
   const daysInput = document.getElementById('history-days');
   if (daysInput) daysInput.value = historyDays;
-  loadHistory();
   startHistoryRefresh();
 }
 

public/index.html

@@ -74,31 +74,40 @@
 
             <div id="loading" class="loading" style="display: none;">Loading downloads...</div>
 
-            <div class="downloads-container">
+            <div class="main-tabs">
-                <h2>Your Downloads</h2>
+                <div class="tab-bar">
-                <div id="no-downloads" class="no-downloads" style="display: none;">
+                    <button class="tab-btn active" data-tab="downloads">Active Downloads</button>
-                    <p>No downloads found for your user.</p>
+                    <button class="tab-btn" data-tab="history">Recently Completed</button>
-                    <p>Make sure your shows and movies are tagged with your username in Sonarr/Radarr.</p>
                 </div>
-                <div id="downloads-list" class="downloads-list"></div>
-            </div>
 
-            <div class="history-container" id="history-container">
+                <div class="tab-panel" id="tab-downloads">
-                <div class="history-header">
+                    <div class="downloads-container">
-                    <h2>Recently Completed</h2>
+                        <div id="no-downloads" class="no-downloads" style="display: none;">
-                    <div class="history-controls">
+                            <p>No downloads found for your user.</p>
-                        <label class="history-days-label" for="history-days">Last</label>
+                            <p>Make sure your shows and movies are tagged with your username in Sonarr/Radarr.</p>
-                        <input type="number" id="history-days" class="history-days-input" value="7" min="1" max="90">
+                        </div>
-                        <span class="history-days-label">days</span>
+                        <div id="downloads-list" class="downloads-list"></div>
-                        <button id="history-refresh-btn" class="history-refresh-btn" title="Refresh history">&#8635;</button>
                     </div>
                 </div>
-                <div id="history-loading" class="history-loading" style="display: none;">Loading history...</div>
+
-                <div id="history-error" class="history-error" style="display: none;"></div>
+                <div class="tab-panel" id="tab-history" style="display: none;">
-                <div id="no-history" class="no-history" style="display: none;">
+                    <div class="history-container" id="history-container">
-                    <p>No completed downloads found in this period.</p>
+                        <div class="history-header">
+                            <div class="history-controls">
+                                <label class="history-days-label" for="history-days">Last</label>
+                                <input type="number" id="history-days" class="history-days-input" value="7" min="1" max="90">
+                                <span class="history-days-label">days</span>
+                                <button id="history-refresh-btn" class="history-refresh-btn" title="Refresh history">&#8635;</button>
+                            </div>
+                        </div>
+                        <div id="history-loading" class="history-loading" style="display: none;">Loading history...</div>
+                        <div id="history-error" class="history-error" style="display: none;"></div>
+                        <div id="no-history" class="no-history" style="display: none;">
+                            <p>No completed downloads found in this period.</p>
+                        </div>
+                        <div id="history-list" class="history-list"></div>
+                    </div>
                 </div>
-                <div id="history-list" class="history-list"></div>
             </div>
 
             <footer class="app-footer">

public/style.css

@@ -552,11 +552,54 @@ body {
   word-break: break-word;
 }
 
+/* ===== Main Tabs ===== */
+.main-tabs {
+  max-width: 1200px;
+  margin: 16px auto 0;
+  padding: 0 16px;
+}
+
+.tab-bar {
+  display: flex;
+  gap: 4px;
+  border-bottom: 2px solid var(--border);
+  margin-bottom: 0;
+}
+
+.tab-btn {
+  background: none;
+  border: none;
+  border-bottom: 3px solid transparent;
+  margin-bottom: -2px;
+  padding: 10px 20px;
+  font-size: 0.95rem;
+  font-weight: 600;
+  color: var(--text-secondary);
+  cursor: pointer;
+  transition: color 0.2s, border-color 0.2s;
+  border-radius: 4px 4px 0 0;
+}
+
+.tab-btn:hover {
+  color: var(--text-primary);
+  background: var(--surface);
+}
+
+.tab-btn.active {
+  color: var(--accent);
+  border-bottom-color: var(--accent);
+  background: var(--surface);
+}
+
+.tab-panel {
+  padding-top: 0;
+}
+
 /* ===== Recently Completed History ===== */
 .history-container {
-  max-width: 1200px;
+  max-width: unset;
-  margin: 24px auto 0;
+  margin: 0;
-  padding: 0 16px;
+  padding: 0;
 }
 
 .history-header {