Gandalf/sofarr
1
0
Fork 0
Code Issues 1 Pull Requests Actions 1 Packages Projects Releases 15 Wiki Activity

feat(ui): split downloads and history into tabs

Browse Source
This commit is contained in:
Gronod
2026-05-17 13:09:01 +01:00
parent dd7e3e2a90
commit e8ffd7f7dd
3 changed files with 101 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
public/app.js
View File

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

49
public/index.html
View File

@@ -74,31 +74,40 @@
<div id="loading" class="loading" style="display: none;">Loading downloads...</div>
<div class="downloads-container">
<h2>Your Downloads</h2>
<div id="no-downloads" class="no-downloads" style="display: none;">
<p>No downloads found for your user.</p>
<p>Make sure your shows and movies are tagged with your username in Sonarr/Radarr.</p>
<div class="main-tabs">
<div class="tab-bar">
<button class="tab-btn active" data-tab="downloads">Active Downloads</button>
<button class="tab-btn" data-tab="history">Recently Completed</button>
</div>
<div id="downloads-list" class="downloads-list"></div>
</div>
<div class="history-container" id="history-container">
<div class="history-header">
<h2>Recently Completed</h2>
<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 class="tab-panel" id="tab-downloads">
<div class="downloads-container">
<div id="no-downloads" class="no-downloads" style="display: none;">
<p>No downloads found for your user.</p>
<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>
<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 class="tab-panel" id="tab-history" style="display: none;">
<div class="history-container" id="history-container">
<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">

49
public/style.css
View File

@@ -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;
margin: 24px auto 0;
padding: 0 16px;
max-width: unset;
margin: 0;
padding: 0;
}
.history-header {