WebUI: fix empty Quality Profile tile — gate whole tile, not inner group

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>
This commit is contained in:
dev 2026-06-05 22:15:04 +02:00
parent 63036a41ee
commit 81291c198b
2 changed files with 12 additions and 5 deletions

View file

@ -4967,7 +4967,11 @@
</div> </div>
<!-- ═══ QUALITY PROFILE ═══ --> <!-- ═══ 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> <span class="settings-section-arrow">&#9660;</span>
<h3>Quality Profile</h3> <h3>Quality Profile</h3>
<span class="settings-section-hint">Format priorities, bitrate, bit depth</span> <span class="settings-section-hint">Format priorities, bitrate, bit depth</span>
@ -5156,6 +5160,7 @@
</div> </div>
</div><!-- end Quality Profile body --> </div><!-- end Quality Profile body -->
</div><!-- end Quality Profile tile -->
<!-- ═══ RETRY LOGIC ═══ --> <!-- ═══ 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':''"> <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':''">

View file

@ -1711,12 +1711,14 @@ function updateDownloadSourceUI() {
prowlarrRedirect.style.display = showProwlarr ? 'block' : 'none'; prowlarrRedirect.style.display = showProwlarr ? 'block' : 'none';
} }
// Quality profile is Soulseek-only and downloads-tab-only // Quality profile is Soulseek-only and downloads-tab-only. Gate the whole
const qualityProfileSection = document.getElementById('quality-profile-section'); // collapsible tile (header + body) — gating just the inner #quality-profile-section
if (qualityProfileSection) { // 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 activeTab = document.querySelector('.stg-tab.active');
const onDownloadsTab = activeTab && activeTab.dataset.tab === 'downloads'; 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')) { if (activeSources.has('tidal')) {