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();
 }