From e8ffd7f7dd64882b1fdb5cd809f3cdf4be738200 Mon Sep 17 00:00:00 2001 From: Gronod Date: Sun, 17 May 2026 13:09:01 +0100 Subject: [PATCH] feat(ui): split downloads and history into tabs --- public/app.js | 28 +++++++++++++++++++++++++-- public/index.html | 49 ++++++++++++++++++++++++++++------------------- public/style.css | 49 ++++++++++++++++++++++++++++++++++++++++++++--- 3 files changed, 101 insertions(+), 25 deletions(-) diff --git a/public/app.js b/public/app.js index 7ed05bb..18f3740 100644 --- a/public/app.js +++ b/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(); } diff --git a/public/index.html b/public/index.html index ef5a0ab..75b9189 100644 --- a/public/index.html +++ b/public/index.html @@ -74,31 +74,40 @@ -
-

Your Downloads

-