From 78c6df0d6bd02d07f19de7c481d2ae3effe15858 Mon Sep 17 00:00:00 2001
From: xRangerDE <xRangerDE@24-music.de>
Date: Mon, 11 May 2026 10:20:27 +0200
Subject: [PATCH] cleanup: streamerListFilter + btnStreamerBulkRemove use
 .is-hidden
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Continuing the .is-hidden migration from 4.6.134 — two more sidebar-shell elements were doing the same .style.display = '' / 'none' dance:

- streamerListFilter input (compact filter that only appears once the streamer list crosses STREAMER_FILTER_THRESHOLD)
- btnStreamerBulkRemove button (X bulk-remove button, same threshold gate, plus a separate hide path inside the no-streamers branch)

Both started with style="display:none" in HTML and toggled via .style.display in renderer-streamers.ts. Now use the shared .is-hidden class — HTML drops the inline style, JS uses classList.toggle/add.

3 more .style.display assignments + 2 inline display:none HTML attrs gone, identical behaviour.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/index.html            | 4 ++--
 src/renderer-streamers.ts | 6 +++---
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/index.html b/src/index.html
index e850589..32edc7f 100644
--- a/src/index.html
+++ b/src/index.html
@@ -221,9 +221,9 @@
                     <span id="streamerSectionTitleText">Streamer</span>
                     <span id="streamerSectionCounter" class="streamer-section-counter"></span>
                 </span>
-                <button id="btnStreamerBulkRemove" class="btn-close" type="button" onclick="bulkRemoveStreamers()" title="Bulk remove" style="display:none;">x</button>
+                <button id="btnStreamerBulkRemove" class="btn-close is-hidden" type="button" onclick="bulkRemoveStreamers()" title="Bulk remove">x</button>
             </div>
-            <input type="text" id="streamerListFilter" class="filter-input compact" placeholder="Filter..." oninput="onStreamerListFilterChange()" style="display:none;">
+            <input type="text" id="streamerListFilter" class="filter-input compact is-hidden" placeholder="Filter..." oninput="onStreamerListFilterChange()">
             <div class="streamers" id="streamerList"></div>
 
             <div class="queue-section">
diff --git a/src/renderer-streamers.ts b/src/renderer-streamers.ts
index 34de2ed..c2ef35c 100644
--- a/src/renderer-streamers.ts
+++ b/src/renderer-streamers.ts
@@ -421,7 +421,7 @@ function renderStreamers(): void {
     const filterInput = document.getElementById('streamerListFilter') as HTMLInputElement | null;
     const sectionTitle = document.getElementById('streamerSectionTitle');
     const showFilter = all.length >= STREAMER_FILTER_THRESHOLD;
-    if (filterInput) filterInput.style.display = showFilter ? '' : 'none';
+    if (filterInput) filterInput.classList.toggle('is-hidden', !showFilter);
     // Compact title margin when filter is shown — avoids double gap.
     if (sectionTitle) sectionTitle.classList.toggle('compact', showFilter);
 
@@ -436,7 +436,7 @@ function renderStreamers(): void {
         const counter = document.getElementById('streamerSectionCounter');
         if (counter) counter.textContent = '';
         const bulkBtn = document.getElementById('btnStreamerBulkRemove') as HTMLButtonElement | null;
-        if (bulkBtn) bulkBtn.style.display = 'none';
+        if (bulkBtn) bulkBtn.classList.add('is-hidden');
         return;
     }
 
@@ -596,7 +596,7 @@ function renderStreamers(): void {
 
     // Reveal bulk-remove button only above the filter threshold.
     const bulkBtn = document.getElementById('btnStreamerBulkRemove') as HTMLButtonElement | null;
-    if (bulkBtn) bulkBtn.style.display = all.length >= STREAMER_FILTER_THRESHOLD ? '' : 'none';
+    if (bulkBtn) bulkBtn.classList.toggle('is-hidden', all.length < STREAMER_FILTER_THRESHOLD);
 
     initStreamerDragDrop();
 }