From ac42ec3686c71d6ee1bf508715c6fa1062cc877b Mon Sep 17 00:00:00 2001
From: xRangerDE <xRangerDE@24-music.de>
Date: Mon, 11 May 2026 02:53:02 +0200
Subject: [PATCH] cleanup: extract 17 toggle-row inline styles into one
 .toggle-row class
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The Settings tab has 17 checkbox toggles, each wrapping the input +
its label in a `<label style="display:flex; align-items:center;
gap:8px; margin-top: 8px;">`. The first toggle in a group skipped
the margin-top; one indented sub-toggle added margin-left: 22px.

All 18 sites were carrying the same ~50 chars of inline style.

Extracted to .toggle-row + the adjacent-sibling combinator
.toggle-row + .toggle-row { margin-top: 8px }, which automatically
adds the gap between consecutive toggles without needing the
per-instance override. The one indented case becomes
.toggle-row.indented (single rule, single margin-left).

Replacements done via Edit with replace_all (13 + 2 + 1 = 16
exact-match replacements + the one manual indented variant). Zero
visual change.

This will pay off on the next Settings card that adds a toggle —
class="toggle-row" is six characters of meaning vs the previous
~50 character inline-style copy-paste.

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

diff --git a/src/index.html b/src/index.html
index 771056d..a36484e 100644
--- a/src/index.html
+++ b/src/index.html
@@ -580,51 +580,51 @@
                             </select>
                         </div>
                         <div class="form-group">
-                            <label style="display:flex; align-items:center; gap:8px;">
+                            <label class="toggle-row">
                                 <input type="checkbox" id="smartSchedulerToggle" checked>
                                 <span id="smartSchedulerLabel">Smart Queue Scheduler aktivieren</span>
                             </label>
-                            <label style="display:flex; align-items:center; gap:8px; margin-top: 8px;">
+                            <label class="toggle-row">
                                 <input type="checkbox" id="duplicatePreventionToggle" checked>
                                 <span id="duplicatePreventionLabel">Duplikate in Queue verhindern</span>
                             </label>
-                            <label style="display:flex; align-items:center; gap:8px; margin-top: 8px;">
+                            <label class="toggle-row">
                                 <input type="checkbox" id="persistQueueToggle" checked>
                                 <span id="persistQueueLabel">Queue zwischen App-Starts speichern</span>
                             </label>
-                            <label style="display:flex; align-items:center; gap:8px; margin-top: 8px;">
+                            <label class="toggle-row">
                                 <input type="checkbox" id="autoResumeQueueToggle">
                                 <span id="autoResumeQueueLabel">Queue beim Start automatisch fortsetzen</span>
                             </label>
-                            <label style="display:flex; align-items:center; gap:8px; margin-top: 8px;">
+                            <label class="toggle-row">
                                 <input type="checkbox" id="notifyEachCompletionToggle">
                                 <span id="notifyEachCompletionLabel">Benachrichtigung bei jedem fertigen Download</span>
                             </label>
-                            <label style="display:flex; align-items:center; gap:8px; margin-top: 8px;">
+                            <label class="toggle-row">
                                 <input type="checkbox" id="streamlinkDisableAdsToggle" checked>
                                 <span id="streamlinkDisableAdsLabel">Twitch-Ads beim Download ueberspringen</span>
                             </label>
-                            <label style="display:flex; align-items:center; gap:8px; margin-top: 8px;">
+                            <label class="toggle-row">
                                 <input type="checkbox" id="downloadChatReplayToggle">
                                 <span id="downloadChatReplayLabel">Chat-Replay parallel zum VOD speichern (.chat.json)</span>
                             </label>
-                            <label style="display:flex; align-items:center; gap:8px; margin-top: 8px;">
+                            <label class="toggle-row">
                                 <input type="checkbox" id="captureLiveChatToggle">
                                 <span id="captureLiveChatLabel">Live-Chat waehrend der Aufnahme mitschneiden (.chat.jsonl)</span>
                             </label>
-                            <label style="display:flex; align-items:center; gap:8px; margin-top: 8px;">
+                            <label class="toggle-row">
                                 <input type="checkbox" id="logStreamEventsToggle" checked>
                                 <span id="logStreamEventsLabel">Stream-Events bei Live-Aufnahmen mitloggen (.events.jsonl)</span>
                             </label>
-                            <label style="display:flex; align-items:center; gap:8px; margin-top: 8px;">
+                            <label class="toggle-row">
                                 <input type="checkbox" id="autoResumeLiveRecordingToggle" checked>
                                 <span id="autoResumeLiveRecordingLabel">Live-Aufnahme automatisch fortsetzen wenn Streamlink abbricht (max. 5 Versuche)</span>
                             </label>
-                            <label style="display:flex; align-items:center; gap:8px; margin-top: 8px;">
+                            <label class="toggle-row">
                                 <input type="checkbox" id="autoMergeResumedPartsToggle">
                                 <span id="autoMergeResumedPartsLabel">Fortgesetzte Aufnahme-Parts automatisch zu einer Datei zusammenfuegen (ffmpeg concat)</span>
                             </label>
-                            <label style="display:flex; align-items:center; gap:8px; margin-top: 8px; margin-left: 22px;">
+                            <label class="toggle-row indented">
                                 <input type="checkbox" id="deletePartsAfterMergeToggle">
                                 <span id="deletePartsAfterMergeLabel">Einzelne Parts nach erfolgreichem Merge loeschen</span>
                             </label>
@@ -740,19 +740,19 @@
                             <input type="text" id="discordWebhookUrl" placeholder="https://discord.com/api/webhooks/...">
                         </div>
                         <div class="form-group">
-                            <label style="display:flex; align-items:center; gap:8px;">
+                            <label class="toggle-row">
                                 <input type="checkbox" id="discordNotifyLiveStartToggle">
                                 <span id="discordNotifyLiveStartLabel">Bei Live-Aufnahme-Start benachrichtigen</span>
                             </label>
-                            <label style="display:flex; align-items:center; gap:8px; margin-top: 8px;">
+                            <label class="toggle-row">
                                 <input type="checkbox" id="discordNotifyLiveEndToggle">
                                 <span id="discordNotifyLiveEndLabel">Bei Live-Aufnahme-Ende benachrichtigen</span>
                             </label>
-                            <label style="display:flex; align-items:center; gap:8px; margin-top: 8px;">
+                            <label class="toggle-row">
                                 <input type="checkbox" id="discordNotifyVodCompleteToggle">
                                 <span id="discordNotifyVodCompleteLabel">Bei abgeschlossenem VOD-Download benachrichtigen</span>
                             </label>
-                            <label style="display:flex; align-items:center; gap:8px; margin-top: 8px;">
+                            <label class="toggle-row">
                                 <input type="checkbox" id="discordNotifyVodAutoQueuedToggle">
                                 <span id="discordNotifyVodAutoQueuedLabel">Bei automatisch eingereihten VODs benachrichtigen</span>
                             </label>
diff --git a/src/styles.css b/src/styles.css
index 432fcc1..5deaab0 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -1930,6 +1930,28 @@ select option {
     line-height: 1.45;
 }
 
+/* Settings toggle row — label wraps an input[type=checkbox] + span.
+   Used 17 times across the Settings cards. Adjacent-sibling
+   combinator adds the gap between consecutive toggle rows so the
+   inline `margin-top: 8px` repeats are no longer needed. */
+.toggle-row {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    cursor: pointer;
+}
+
+.toggle-row + .toggle-row {
+    margin-top: 8px;
+}
+
+/* Indented sub-toggle — kept by the renderer for visual nesting
+   under a parent toggle (delete-parts-after-merge under
+   auto-merge-parts, for example). */
+.toggle-row.indented {
+    margin-left: 22px;
+}
+
 /* Sidebar queue empty state — small dashed-border card matching the
    sibling streamer-list empty state. */
 .queue-empty {