From f4aaab8a66fb542fb0324325d1f572115de5f1f4 Mon Sep 17 00:00:00 2001 From: Broque Thomas <26755000+Nezreka@users.noreply.github.com> Date: Sat, 18 Apr 2026 08:28:12 -0700 Subject: [PATCH] Reorganize Settings Library tab with collapsible sections Three collapsible categories, collapsed by default: - Paths & Organization (file templates + music library paths) - Post-Processing (metadata, tags, conversion, lyrics) - Library Preferences (import, content filter, stats, playlists, M3U) Section headers have data-stg=library so they only appear on the Library tab. Bolder headers with accent-colored arrows and subtle border. Collapse state preserved when switching settings tabs. --- webui/index.html | 67 ++++++++++++++++++++++++++++++------------ webui/static/script.js | 8 +++-- webui/static/style.css | 53 +++++++++++++++++++++++++++++++++ 3 files changed, 107 insertions(+), 21 deletions(-) diff --git a/webui/index.html b/webui/index.html index c939a173..abfb7bb6 100644 --- a/webui/index.html +++ b/webui/index.html @@ -5061,6 +5061,14 @@ + + + + +
+

📂 Music Library Paths

+ +
+ Tell SoulSync where your music files live. Required for tag writing, streaming, and file detection + when your media server stores files at a different path than SoulSync can see. + Docker users: mount your music folder(s) into the SoulSync container with read-write access, + then add the container-side path here (e.g. /music). +
+ +
+ +
+ +
+
+ + + + + + + + + + + + +

Logging Information

diff --git a/webui/static/script.js b/webui/static/script.js index 8193eb39..6a3a0458 100644 --- a/webui/static/script.js +++ b/webui/static/script.js @@ -5737,10 +5737,14 @@ function validateFileOrganizationTemplates() { function switchSettingsTab(tab) { // Update tab bar document.querySelectorAll('.stg-tab').forEach(t => t.classList.toggle('active', t.dataset.tab === tab)); - // Show/hide settings groups by data-stg attribute - document.querySelectorAll('#settings-page .settings-group[data-stg]').forEach(g => { + // Show/hide settings groups and section headers by data-stg attribute + document.querySelectorAll('#settings-page [data-stg]').forEach(g => { g.style.display = g.dataset.stg === tab ? '' : 'none'; }); + // Re-apply collapsed state on section bodies (tab switch resets inline display) + document.querySelectorAll('#settings-page .settings-section-body.collapsed').forEach(b => { + b.style.display = 'none'; + }); // Also hide/show the column wrappers if they're empty in this tab document.querySelectorAll('#settings-page .settings-left-column, #settings-page .settings-right-column, #settings-page .settings-third-column').forEach(col => { const hasVisible = Array.from(col.querySelectorAll('.settings-group[data-stg]')).some(g => g.style.display !== 'none'); diff --git a/webui/static/style.css b/webui/static/style.css index 6a507008..804c02a4 100644 --- a/webui/static/style.css +++ b/webui/static/style.css @@ -2993,6 +2993,59 @@ body.helper-mode-active #dashboard-activity-feed:hover { } /* Glassmorphic cards */ +/* Collapsible settings section headers */ +.settings-section-header { + display: flex; + align-items: center; + gap: 12px; + padding: 14px 18px; + margin-bottom: 4px; + cursor: pointer; + border-radius: 12px; + background: rgba(255, 255, 255, 0.02); + border: 1px solid rgba(255, 255, 255, 0.05); + transition: all 0.15s; + user-select: none; +} + +.settings-section-header:hover { + background: rgba(255, 255, 255, 0.05); + border-color: rgba(255, 255, 255, 0.08); +} + +.settings-section-header h3 { + margin: 0; + font-size: 17px; + font-weight: 700; + color: rgba(255, 255, 255, 0.95); + letter-spacing: 0.3px; +} + +.settings-section-arrow { + font-size: 11px; + color: rgba(var(--accent-rgb), 0.7); + transition: transform 0.2s; + flex-shrink: 0; +} + +.settings-section-header.collapsed .settings-section-arrow { + transform: rotate(-90deg); +} + +.settings-section-hint { + font-size: 12px; + color: rgba(255, 255, 255, 0.35); + margin-left: auto; +} + +.settings-section-body { + transition: all 0.2s ease; +} + +.settings-section-body.collapsed { + display: none; +} + .settings-group { background: linear-gradient(135deg, rgba(35, 35, 35, 0.6), rgba(20, 20, 20, 0.8)); border: 1px solid rgba(255, 255, 255, 0.08);