From 7994a02bb16be300722bd5c08ec8bf35eb764f31 Mon Sep 17 00:00:00 2001
From: xRangerDE <xRangerDE@24-music.de>
Date: Mon, 11 May 2026 10:16:21 +0200
Subject: [PATCH] =?UTF-8?q?cleanup:=20.is-hidden=20utility=20=E2=80=94=20r?=
 =?UTF-8?q?eplaces=203=20toggle-display=20patterns=20across=20queue=20+=20?=
 =?UTF-8?q?streamers?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Three runtime-toggled elements were each using a slightly different inline display value to flip between visible/hidden:
- vodFilterClearBtn: button, .style.display = '' / 'none'
- btnMergeGroup: button, .style.display = '' / 'none'
- vodBulkBar: div, .style.display = 'flex' / 'none'

Plus each carried an inline style="display:none;" in HTML to start hidden.

Added a single .is-hidden utility class (display:none !important) that hides any element regardless of its natural display type, and:
- HTML now uses class="... is-hidden" instead of style="display:none"
- JS toggles with classList.toggle('is-hidden', !shouldShow) instead of poking at .style.display
- .vod-bulk-bar gets an explicit display:flex in its base rule (was implicit via the JS flip; now declared)

Comment on .vod-bulk-bar animation updated since the trigger is now ".is-hidden removed" rather than "JS sets display:flex".

Net: 3 inline style="display:none" attrs gone from HTML, 4 .style.display assignments gone from TS. Single utility class handles the same job for all three plus any future show/hide toggle.

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

diff --git a/src/index.html b/src/index.html
index 006577b..e850589 100644
--- a/src/index.html
+++ b/src/index.html
@@ -234,7 +234,7 @@
                 <div class="queue-list" id="queueList"></div>
                 <div class="queue-actions">
                     <button type="button" class="btn btn-start" id="btnStart" onclick="toggleDownload()">Start</button>
-                    <button type="button" class="btn btn-merge-group" id="btnMergeGroup" onclick="createMergeGroupFromSelection()" style="display:none">Merge &amp; Split</button>
+                    <button type="button" class="btn btn-merge-group is-hidden" id="btnMergeGroup" onclick="createMergeGroupFromSelection()">Merge &amp; Split</button>
                     <button type="button" class="btn btn-retry" id="btnRetryFailed" onclick="retryFailedDownloads()" title="Nur fehlgeschlagene Downloads erneut starten">Wiederholen</button>
                     <button type="button" class="btn btn-clear" id="btnClear" onclick="clearCompleted()">Leeren</button>
                 </div>
@@ -263,7 +263,7 @@
                     <div id="streamerProfileHeader" class="streamer-profile-header" style="display:none;"></div>
                     <div class="vod-filter-row">
                         <input type="text" id="vodFilterInput" class="filter-input" placeholder="Filter VODs..." oninput="onVodFilterInput()">
-                        <button type="button" id="vodFilterClearBtn" class="btn-close" onclick="clearVodFilter()" title="Clear filter" style="display:none;">x</button>
+                        <button type="button" id="vodFilterClearBtn" class="btn-close is-hidden" onclick="clearVodFilter()" title="Clear filter">x</button>
                         <label id="vodSortLabel" for="vodSortSelect" class="form-sublabel vod-sort-label">Sort:</label>
                         <select id="vodSortSelect" class="select-compact" onchange="onVodSortChange()">
                             <option value="date_desc">Newest first</option>
@@ -278,7 +278,7 @@
                             <span id="vodHideDownloadedText">Hide downloaded</span>
                         </label>
                     </div>
-                    <div id="vodBulkBar" class="vod-bulk-bar" style="display:none;">
+                    <div id="vodBulkBar" class="vod-bulk-bar is-hidden">
                         <span id="vodBulkCount" class="vod-bulk-count">0 selected</span>
                         <span class="vod-bulk-spacer"></span>
                         <button id="vodBulkAddBtn" class="btn-pill primary" type="button" onclick="bulkAddSelectedVodsToQueue()">+ Queue</button>
diff --git a/src/renderer-queue.ts b/src/renderer-queue.ts
index 1ac08a7..a85138b 100644
--- a/src/renderer-queue.ts
+++ b/src/renderer-queue.ts
@@ -370,11 +370,11 @@ function updateMergeGroupButton(): void {
     selectedQueueIds = selectedQueueIds.filter(id => validIds.has(id));
 
     if (selectedQueueIds.length >= 2) {
-        btn.style.display = '';
+        btn.classList.remove('is-hidden');
         btn.textContent = `${UI_TEXT.mergeGroup.btn} (${selectedQueueIds.length})`;
         btn.disabled = false;
     } else {
-        btn.style.display = 'none';
+        btn.classList.add('is-hidden');
     }
 }
 
diff --git a/src/renderer-streamers.ts b/src/renderer-streamers.ts
index 15931ad..34de2ed 100644
--- a/src/renderer-streamers.ts
+++ b/src/renderer-streamers.ts
@@ -188,7 +188,7 @@ function updateVodFilterCount(filteredCount: number, totalCount: number): void {
 function syncVodFilterClearButton(): void {
     const btn = document.getElementById('vodFilterClearBtn') as HTMLButtonElement | null;
     if (!btn) return;
-    btn.style.display = vodFilterQuery.trim() ? '' : 'none';
+    btn.classList.toggle('is-hidden', !vodFilterQuery.trim());
 }
 
 function onVodFilterInput(): void {
@@ -1018,7 +1018,7 @@ function updateVodBulkBar(): void {
     const bar = document.getElementById('vodBulkBar');
     if (!bar) return;
     const count = selectedVodUrls.size;
-    bar.style.display = count > 0 ? 'flex' : 'none';
+    bar.classList.toggle('is-hidden', count === 0);
     const countEl = document.getElementById('vodBulkCount');
     if (countEl) {
         countEl.textContent = UI_TEXT.vods.bulkSelectedCount.replace('{count}', String(count));
diff --git a/src/styles.css b/src/styles.css
index 84f5c2b..253ea91 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -207,6 +207,7 @@ body {
    animation has somewhere to live and the styling stays consistent
    with the rest of the action surfaces. */
 .vod-bulk-bar {
+    display: flex;
     align-items: center;
     gap: 10px;
     padding: 10px 14px;
@@ -216,7 +217,8 @@ body {
     margin-bottom: 12px;
     flex-wrap: wrap;
     box-shadow: 0 4px 16px rgba(145, 70, 255, 0.10);
-    /* Animation fires whenever the JS flips display:none -> display:flex,
+    /* Animation fires whenever the bar transitions from display:none
+       (.is-hidden present) back to display:flex (.is-hidden removed),
        because Animation events restart on each display change. */
     animation: vod-bulk-bar-slide 0.22s cubic-bezier(0.16, 1, 0.3, 1);
 }
@@ -4479,6 +4481,14 @@ input[type="number"]::-webkit-outer-spin-button {
    and the multitude of transition: all 0.2s declarations — anything
    that involves motion. Critical for users with vestibular disorders
    and a baseline accessibility expectation in 2025. */
+/* Generic hide utility. Use when an element's visible-state display
+   differs (button = inline-block, bulk-bar = flex, etc.) so a single
+   class can hide any of them without per-element .shown modifiers.
+   The !important wins over the base class's display declaration. */
+.is-hidden {
+    display: none !important;
+}
+
 @media (prefers-reduced-motion: reduce) {
     *,
     *::before,