From 5d61094226745ad7e19026799dbd9e854f35c10a Mon Sep 17 00:00:00 2001
From: xRangerDE <xRangerDE@24-music.de>
Date: Mon, 11 May 2026 02:43:23 +0200
Subject: [PATCH] cleanup: extract recurring inline form patterns into utility
 classes
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Audit turned up two ~6-occurrence inline-style patterns in Settings:

- `style="font-size:12px; color:var(--text-secondary);"` on small
  sub-labels above stacked inputs (autoCleanupDaysLabel,
  TargetLabel, ActionLabel, autoVodPollMinutesLabel,
  autoVodMaxAgeHoursLabel, statsLastScannedLabel)

- `style="display:flex; flex-direction:column; gap:4px; flex:1;
  min-width:NNNpx;"` on labels that wrap a sublabel + control as a
  vertical pair in a flex row (3 of these in the auto-cleanup
  grid)

Both lifted to .form-sublabel and .form-stack utility classes.
Plus a .form-note for block-level secondary-coloured text (the
cleanupReport "X files would be freed" panel). The min-width
values stay inline since they vary per call site (120 / 160 / 200).

Zero visual change — the class values match what was inline.
Future edits to "what does a small label look like" go through
one selector instead of grep + sed across six sites.

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

diff --git a/src/index.html b/src/index.html
index 4f86f2e..771056d 100644
--- a/src/index.html
+++ b/src/index.html
@@ -422,7 +422,7 @@
                         <div style="display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px;">
                             <h3 id="statsTitle" style="margin:0;">Archiv-Statistik</h3>
                             <div style="display:flex; gap:8px; align-items:center;">
-                                <span id="statsLastScannedLabel" style="font-size:12px; color:var(--text-secondary);"></span>
+                                <span id="statsLastScannedLabel" class="form-sublabel"></span>
                                 <button class="btn-secondary" id="btnStatsRefresh" onclick="refreshArchiveStats()">Aktualisieren</button>
                             </div>
                         </div>
@@ -706,19 +706,19 @@
                             <span id="autoCleanupEnabledLabel">Auto-Cleanup aktivieren</span>
                         </label>
                         <div class="form-row" style="gap:12px; flex-wrap:wrap; margin-bottom: 8px;">
-                            <label style="display:flex; flex-direction:column; gap:4px; flex:1; min-width:120px;">
-                                <span id="autoCleanupDaysLabel" style="font-size:12px; color:var(--text-secondary);">Tage-Schwelle</span>
+                            <label class="form-stack" style="min-width:120px;">
+                                <span id="autoCleanupDaysLabel" class="form-sublabel">Tage-Schwelle</span>
                                 <input type="number" id="autoCleanupDays" min="1" max="3650" value="30">
                             </label>
-                            <label style="display:flex; flex-direction:column; gap:4px; flex:1; min-width:160px;">
-                                <span id="autoCleanupTargetLabel" style="font-size:12px; color:var(--text-secondary);">Bereich</span>
+                            <label class="form-stack" style="min-width:160px;">
+                                <span id="autoCleanupTargetLabel" class="form-sublabel">Bereich</span>
                                 <select id="autoCleanupTarget">
                                     <option value="live_only" id="autoCleanupTargetLive">Nur Live-Aufnahmen</option>
                                     <option value="all" id="autoCleanupTargetAll">Alle Aufnahmen</option>
                                 </select>
                             </label>
-                            <label style="display:flex; flex-direction:column; gap:4px; flex:1; min-width:160px;">
-                                <span id="autoCleanupActionLabel" style="font-size:12px; color:var(--text-secondary);">Aktion</span>
+                            <label class="form-stack" style="min-width:160px;">
+                                <span id="autoCleanupActionLabel" class="form-sublabel">Aktion</span>
                                 <select id="autoCleanupAction">
                                     <option value="archive" id="autoCleanupActionArchive">In Archiv verschieben</option>
                                     <option value="delete" id="autoCleanupActionDelete">Loeschen</option>
@@ -729,7 +729,7 @@
                             <button class="btn-secondary" id="btnCleanupDryRun" onclick="runCleanupDryRun()">Vorschau</button>
                             <button class="btn-secondary" id="btnCleanupRunNow" onclick="runCleanupNow()">Jetzt ausfuehren</button>
                         </div>
-                        <div id="cleanupReport" style="color: var(--text-secondary); font-size:12px;"></div>
+                        <div id="cleanupReport" class="form-note"></div>
                     </div>
 
                     <div class="settings-card">
@@ -763,9 +763,9 @@
                         <h3 id="autoVodCardTitle">Auto-VOD-Download</h3>
                         <p id="autoVodCardIntro" style="color: var(--text-secondary); font-size:13px; margin-bottom:12px; line-height:1.5;">Streamer mit aktiviertem VOD-Toggle werden in dem hier festgelegten Intervall auf neue Twitch-VODs geprueft. Neue VODs innerhalb des Alters-Fensters werden automatisch zur Download-Queue hinzugefuegt.</p>
                         <div class="form-row" style="margin-bottom: 10px; align-items: center;">
-                            <span id="autoVodPollMinutesLabel" style="font-size:12px; color:var(--text-secondary);">Poll-Intervall (Minuten)</span>
+                            <span id="autoVodPollMinutesLabel" class="form-sublabel">Poll-Intervall (Minuten)</span>
                             <input type="number" id="autoVodPollMinutes" min="5" max="360" value="15" style="width:90px;">
-                            <span id="autoVodMaxAgeHoursLabel" style="font-size:12px; color:var(--text-secondary); margin-left:12px;">Max. Alter (Stunden)</span>
+                            <span id="autoVodMaxAgeHoursLabel" class="form-sublabel" style="margin-left:12px;">Max. Alter (Stunden)</span>
                             <input type="number" id="autoVodMaxAgeHours" min="1" max="720" value="24" style="width:90px;">
                         </div>
                         <div class="form-row" style="align-items: center; gap: 12px; flex-wrap: wrap;">
diff --git a/src/styles.css b/src/styles.css
index 6ab0621..c30558f 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -1900,6 +1900,36 @@ select option {
     letter-spacing: 0.4px;
 }
 
+/* ============================================
+   FORM UTILITY CLASSES — small recurring patterns
+   ============================================
+   These replace the 6+ inline-style copies of the same visual
+   pattern that were scattered across Settings cards. */
+
+/* Small secondary-coloured label / note text. Used as field-label
+   above stacked inputs, as inline metadata next to controls, etc. */
+.form-sublabel {
+    font-size: 12px;
+    color: var(--text-secondary);
+}
+
+/* Vertical stack: label on top, control below, equal flex share in
+   a flex-row. Used for the 3-up auto-cleanup row + poll-config rows. */
+.form-stack {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    flex: 1;
+}
+
+/* Block-level note text — same colour as .form-sublabel but reserved
+   for full-row paragraphs like the cleanup report area. */
+.form-note {
+    color: var(--text-secondary);
+    font-size: 12px;
+    line-height: 1.45;
+}
+
 /* Old generic scrollbar rules were dead — superseded by the
    purple-themed *::-webkit-scrollbar block further down the file.
    Removed to avoid confusion when someone greps for scrollbar styles. */