From 1123b9ac46fc49e3b1adeefba3db71cc155d66b9 Mon Sep 17 00:00:00 2001
From: xRangerDE <xRangerDE@24-music.de>
Date: Mon, 11 May 2026 02:58:52 +0200
Subject: [PATCH] =?UTF-8?q?cleanup:=20extract=20.inline-toggle=20class=20?=
 =?UTF-8?q?=E2=80=94=20compact=20filter-row=20toggle=20pattern?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The "Hide downloaded" checkbox in the VOD filter row was carrying
the inline style:

  display:flex; align-items:center; gap:6px;
  color: var(--text-secondary); font-size:12px;
  cursor:pointer; user-select:none

This is a distinct visual variant of the existing .toggle-row class
(filter-row context, smaller gap, smaller font, secondary text
color) so a separate .inline-toggle class is the cleaner fit
rather than overloading .toggle-row with another modifier.

One site cleaned up now, the class is reusable for future
tool-row inline toggles without copy-pasting the seven inline
properties.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/index.html |  2 +-
 src/styles.css | 14 ++++++++++++++
 2 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/src/index.html b/src/index.html
index a36484e..722789d 100644
--- a/src/index.html
+++ b/src/index.html
@@ -273,7 +273,7 @@
                             <option value="duration_asc">Shortest first</option>
                         </select>
                         <span id="vodFilterCount" style="color: var(--text-secondary); font-size:12px; min-width:80px;"></span>
-                        <label id="vodHideDownloadedLabel" style="display:flex; align-items:center; gap:6px; color: var(--text-secondary); font-size:12px; cursor:pointer; user-select:none;" title="">
+                        <label id="vodHideDownloadedLabel" class="inline-toggle" title="">
                             <input type="checkbox" id="vodHideDownloadedToggle" onchange="onVodHideDownloadedChange()">
                             <span id="vodHideDownloadedText">Hide downloaded</span>
                         </label>
diff --git a/src/styles.css b/src/styles.css
index 248f751..801c9d6 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -1952,6 +1952,20 @@ select option {
     margin-left: 22px;
 }
 
+/* Compact horizontal-row toggle — used in filter rows where the
+   toggle sits alongside other controls (Hide downloaded, etc).
+   Tighter gap + secondary colour + tiny font to fit a tool-row
+   without dominating it. */
+.inline-toggle {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    color: var(--text-secondary);
+    font-size: 12px;
+    cursor: pointer;
+    user-select: none;
+}
+
 /* Sidebar queue empty state — small dashed-border card matching the
    sibling streamer-list empty state. */
 .queue-empty {