From 81291c198b6ec3728be48763d2b176113a57d16b Mon Sep 17 00:00:00 2001
From: dev <dev@localhost>
Date: Fri, 5 Jun 2026 22:15:04 +0200
Subject: [PATCH] =?UTF-8?q?WebUI:=20fix=20empty=20Quality=20Profile=20tile?=
 =?UTF-8?q?=20=E2=80=94=20gate=20whole=20tile,=20not=20inner=20group?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The Quality Profile tile expanded to an empty body: settings.js
updateSourceVisibility toggled only the inner #quality-profile-section
(Soulseek-only + downloads-tab gate), leaving the new collapsible tile's
header/body visible with hidden contents. Wrap the tile in
#quality-profile-tile and gate that wrapper as a unit instead, so the whole
tile shows (Soulseek active) or hides (otherwise) — no empty shell.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 webui/index.html         |  7 ++++++-
 webui/static/settings.js | 10 ++++++----
 2 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/webui/index.html b/webui/index.html
index 61a54d93..59568c18 100644
--- a/webui/index.html
+++ b/webui/index.html
@@ -4967,7 +4967,11 @@
                             </div>
 
                             <!-- ═══ QUALITY PROFILE ═══ -->
-                            <div class="settings-section-header collapsed" data-stg="downloads" onclick="this.classList.toggle('collapsed'); const b=this.nextElementSibling; b.classList.toggle('collapsed'); b.style.display=b.classList.contains('collapsed')?'none':''">
+                            <!-- Whole tile is gated as a unit (Soulseek-only + downloads tab)
+                                 by settings.js updateSourceVisibility — gating only the inner
+                                 group would leave an empty expandable shell. -->
+                            <div id="quality-profile-tile" data-stg="downloads">
+                            <div class="settings-section-header collapsed" onclick="this.classList.toggle('collapsed'); const b=this.nextElementSibling; b.classList.toggle('collapsed'); b.style.display=b.classList.contains('collapsed')?'none':''">
                                 <span class="settings-section-arrow">&#9660;</span>
                                 <h3>Quality Profile</h3>
                                 <span class="settings-section-hint">Format priorities, bitrate, bit depth</span>
@@ -5156,6 +5160,7 @@
                             </div>
 
                             </div><!-- end Quality Profile body -->
+                            </div><!-- end Quality Profile tile -->
 
                             <!-- ═══ RETRY LOGIC ═══ -->
                             <div class="settings-section-header collapsed" data-stg="downloads" onclick="this.classList.toggle('collapsed'); const b=this.nextElementSibling; b.classList.toggle('collapsed'); b.style.display=b.classList.contains('collapsed')?'none':''">
diff --git a/webui/static/settings.js b/webui/static/settings.js
index ffa0e4cc..c641ea1c 100644
--- a/webui/static/settings.js
+++ b/webui/static/settings.js
@@ -1711,12 +1711,14 @@ function updateDownloadSourceUI() {
         prowlarrRedirect.style.display = showProwlarr ? 'block' : 'none';
     }
 
-    // Quality profile is Soulseek-only and downloads-tab-only
-    const qualityProfileSection = document.getElementById('quality-profile-section');
-    if (qualityProfileSection) {
+    // Quality profile is Soulseek-only and downloads-tab-only. Gate the whole
+    // collapsible tile (header + body) — gating just the inner #quality-profile-section
+    // left the tile header expandable to an empty body.
+    const qualityProfileTile = document.getElementById('quality-profile-tile');
+    if (qualityProfileTile) {
         const activeTab = document.querySelector('.stg-tab.active');
         const onDownloadsTab = activeTab && activeTab.dataset.tab === 'downloads';
-        qualityProfileSection.style.display = (activeSources.has('soulseek') && onDownloadsTab) ? '' : 'none';
+        qualityProfileTile.style.display = (activeSources.has('soulseek') && onDownloadsTab) ? '' : 'none';
     }
 
     if (activeSources.has('tidal')) {