From 0d547255d953fe1868d05c55484a1244f9a963a3 Mon Sep 17 00:00:00 2001
From: Broque Thomas <26755000+Nezreka@users.noreply.github.com>
Date: Wed, 11 Mar 2026 18:33:11 -0700
Subject: [PATCH] Move Soulseek settings to Download Source section &
 conditional source visibility

---
 webui/index.html       | 67 +++++++++++++++++++++---------------------
 webui/static/script.js | 27 +++++++++++++----
 2 files changed, 56 insertions(+), 38 deletions(-)

diff --git a/webui/index.html b/webui/index.html
index b4fff039..1d6f97f3 100644
--- a/webui/index.html
+++ b/webui/index.html
@@ -3273,36 +3273,6 @@
                                     </div>
                                 </div>
 
-                                <!-- Soulseek Settings -->
-                                <div class="api-service-frame">
-                                    <h4 class="service-title soulseek-title">Soulseek</h4>
-                                    <div class="form-group">
-                                        <label>slskd URL:</label>
-                                        <div class="path-input-group">
-                                            <input type="url" id="soulseek-url" placeholder="http://localhost:5030">
-                                            <button class="detect-button"
-                                                onclick="autoDetectSlskd()">Auto-detect</button>
-                                        </div>
-                                    </div>
-                                    <div class="form-group">
-                                        <label>API Key:</label>
-                                        <input type="password" id="soulseek-api-key" placeholder="Slskd API Key">
-                                    </div>
-                                    <div class="form-group">
-                                        <label>Search Timeout (seconds):</label>
-                                        <input type="number" id="soulseek-search-timeout" placeholder="60" min="15"
-                                            max="300" value="60">
-                                        <small style="color: #888; display: block; margin-top: 5px;">How long to search
-                                            for tracks (15-300 seconds)</small>
-                                    </div>
-                                    <div class="form-group">
-                                        <label>Search Timeout Buffer (seconds):</label>
-                                        <input type="number" id="soulseek-search-timeout-buffer" placeholder="15"
-                                            min="5" max="60" value="15">
-                                        <small style="color: #888; display: block; margin-top: 5px;">Extra time to wait
-                                            for late results (5-60 seconds)</small>
-                                    </div>
-                                </div>
 
                                 <!-- ListenBrainz Settings -->
                                 <div class="api-service-frame">
@@ -3422,8 +3392,6 @@
                                     <button class="test-button" onclick="testConnection('spotify')">Test
                                         Spotify</button>
                                     <button class="test-button" onclick="testConnection('tidal')">Test Tidal</button>
-                                    <button class="test-button" onclick="testConnection('soulseek')">Test
-                                        Soulseek</button>
                                     <button class="test-button" onclick="testConnection('listenbrainz')">Test
                                         ListenBrainz</button>
                                     <button class="test-button" onclick="testConnection('acoustid')">Test
@@ -3667,7 +3635,7 @@
                                     </div>
                                     <div class="form-group">
                                         <label>Fallback Source:</label>
-                                        <select id="hybrid-secondary-source" class="form-select">
+                                        <select id="hybrid-secondary-source" class="form-select" onchange="updateDownloadSourceUI()">
                                             <option value="soulseek">Soulseek</option>
                                             <option value="youtube">YouTube</option>
                                             <option value="tidal">Tidal</option>
@@ -3680,6 +3648,39 @@
 
                                 </div>
 
+                                <!-- Soulseek Settings (shown when soulseek is active source) -->
+                                <div id="soulseek-settings-container" style="display: none;">
+                                    <div class="form-group">
+                                        <label>slskd URL:</label>
+                                        <div class="path-input-group">
+                                            <input type="url" id="soulseek-url" placeholder="http://localhost:5030">
+                                            <button class="detect-button"
+                                                onclick="autoDetectSlskd()">Auto-detect</button>
+                                        </div>
+                                    </div>
+                                    <div class="form-group">
+                                        <label>API Key:</label>
+                                        <input type="password" id="soulseek-api-key" placeholder="Slskd API Key">
+                                    </div>
+                                    <div class="form-group">
+                                        <label>Search Timeout (seconds):</label>
+                                        <input type="number" id="soulseek-search-timeout" placeholder="60" min="15"
+                                            max="300" value="60">
+                                        <small style="color: #888; display: block; margin-top: 5px;">How long to search
+                                            for tracks (15-300 seconds)</small>
+                                    </div>
+                                    <div class="form-group">
+                                        <label>Search Timeout Buffer (seconds):</label>
+                                        <input type="number" id="soulseek-search-timeout-buffer" placeholder="15"
+                                            min="5" max="60" value="15">
+                                        <small style="color: #888; display: block; margin-top: 5px;">Extra time to wait
+                                            for late results (5-60 seconds)</small>
+                                    </div>
+                                    <div class="form-actions" style="margin-top: 8px;">
+                                        <button class="test-button" onclick="testConnection('soulseek')">Test Soulseek Connection</button>
+                                    </div>
+                                </div>
+
                                 <!-- Tidal Download Settings (shown only when tidal mode is selected) -->
                                 <div id="tidal-download-settings-container" style="display: none;">
                                     <div class="form-group">
diff --git a/webui/static/script.js b/webui/static/script.js
index 6b06272a..d522e06b 100644
--- a/webui/static/script.js
+++ b/webui/static/script.js
@@ -4738,19 +4738,33 @@ function toggleServer(serverType) {
 function updateDownloadSourceUI() {
     const mode = document.getElementById('download-source-mode').value;
     const hybridContainer = document.getElementById('hybrid-settings-container');
+    const soulseekContainer = document.getElementById('soulseek-settings-container');
     const tidalContainer = document.getElementById('tidal-download-settings-container');
     const qobuzContainer = document.getElementById('qobuz-settings-container');
     const youtubeContainer = document.getElementById('youtube-settings-container');
 
     hybridContainer.style.display = mode === 'hybrid' ? 'block' : 'none';
-    tidalContainer.style.display = (mode === 'tidal' || mode === 'hybrid') ? 'block' : 'none';
-    qobuzContainer.style.display = (mode === 'qobuz' || mode === 'hybrid') ? 'block' : 'none';
-    youtubeContainer.style.display = (mode === 'youtube' || mode === 'hybrid') ? 'block' : 'none';
 
-    if (mode === 'tidal' || mode === 'hybrid') {
+    // Determine which sources are active
+    let activeSources = new Set();
+    if (mode === 'hybrid') {
+        const primary = document.getElementById('hybrid-primary-source').value;
+        const secondary = document.getElementById('hybrid-secondary-source').value;
+        activeSources.add(primary);
+        activeSources.add(secondary);
+    } else {
+        activeSources.add(mode);
+    }
+
+    soulseekContainer.style.display = activeSources.has('soulseek') ? 'block' : 'none';
+    tidalContainer.style.display = activeSources.has('tidal') ? 'block' : 'none';
+    qobuzContainer.style.display = activeSources.has('qobuz') ? 'block' : 'none';
+    youtubeContainer.style.display = activeSources.has('youtube') ? 'block' : 'none';
+
+    if (activeSources.has('tidal')) {
         checkTidalDownloadAuthStatus();
     }
-    if (mode === 'qobuz' || mode === 'hybrid') {
+    if (activeSources.has('qobuz')) {
         checkQobuzAuthStatus();
     }
 }
@@ -4779,6 +4793,9 @@ function updateHybridSecondaryOptions() {
     if (currentValue !== primary) {
         secondary.value = currentValue;
     }
+
+    // Refresh source-specific settings visibility based on new primary/secondary
+    updateDownloadSourceUI();
 }
 
 // ===============================