From 5da4cc9e6401cfba034fd4c7dcd5ab3c906d40b6 Mon Sep 17 00:00:00 2001
From: xRangerDE <xRangerDE@24-music.de>
Date: Mon, 11 May 2026 02:09:45 +0200
Subject: [PATCH] cleanup: unify filter inputs + monospace template inputs into
 shared classes
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Five filter-style text inputs (vodFilterInput, streamerListFilter,
archiveSearchQuery, chatViewerFilter) plus three monospace template
inputs (vod / parts / clip filename templates) were each carrying
their own ~80 chars of inline style declaring near-identical
background / border / radius / padding combinations.

Consolidated into three new utility classes:
- .filter-input — base flex-1 minWidth-180 filter look, used by
  vodFilterInput
- .filter-input.compact — small variant for the sidebar streamer
  filter (smaller padding, smaller font, no flex, percent-width
  with margin)
- .filter-input.flex-1-1-240 — larger variant for the archive
  search box (240px basis, 200px min, smaller radius/padding to
  fit the multi-control form-row it sits in)
- .input-monospace — applies the same monospace stack (Consolas /
  Segoe UI Mono / monospace) used by .chat-viewer-time and
  .viewer-modal-list-chat to text inputs that hold code-shaped
  values

Side effect: vodHideDownloadedToggle had a hardcoded
`accent-color: var(--accent); cursor:pointer;` inline style, which
was redundant after the global custom-checkbox styling landed in
4.6.26 (the checkbox is now ::after-driven, accent-color does
nothing). Removed.

Zero visual change. The inputs render identically because the
class CSS values match what was inline.

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

diff --git a/src/index.html b/src/index.html
index c770d64..9aae7c7 100644
--- a/src/index.html
+++ b/src/index.html
@@ -223,7 +223,7 @@
                 </span>
                 <button id="btnStreamerBulkRemove" class="btn-close" type="button" onclick="bulkRemoveStreamers()" title="Bulk remove" style="display:none;">x</button>
             </div>
-            <input type="text" id="streamerListFilter" placeholder="Filter..." oninput="onStreamerListFilterChange()" style="display:none; width:calc(100% - 16px); margin:0 8px 8px; background:var(--bg-card); border:1px solid var(--border-soft); border-radius:4px; padding:4px 8px; color:var(--text); font-size:12px;">
+            <input type="text" id="streamerListFilter" class="filter-input compact" placeholder="Filter..." oninput="onStreamerListFilterChange()" style="display:none;">
             <div class="streamers" id="streamerList"></div>
 
             <div class="queue-section">
@@ -262,7 +262,7 @@
                 <div class="tab-content active" id="vodsTab">
                     <div id="streamerProfileHeader" class="streamer-profile-header" style="display:none;"></div>
                     <div class="vod-filter-row" style="display:flex; align-items:center; gap:8px; margin-bottom:12px; flex-wrap:wrap;">
-                        <input type="text" id="vodFilterInput" placeholder="Filter VODs..." oninput="onVodFilterInput()" style="flex:1; min-width:180px; background: var(--bg-card); border:1px solid var(--border-soft); border-radius:6px; padding:8px 12px; color: var(--text); font-size:13px;">
+                        <input type="text" id="vodFilterInput" class="filter-input" placeholder="Filter VODs..." oninput="onVodFilterInput()">
                         <button id="vodFilterClearBtn" class="btn-close" onclick="clearVodFilter()" title="Clear filter" style="display:none;">x</button>
                         <label id="vodSortLabel" for="vodSortSelect" style="color: var(--text-secondary); font-size:12px; margin-left:8px;">Sort:</label>
                         <select id="vodSortSelect" onchange="onVodSortChange()" style="background: var(--bg-card); border:1px solid var(--border-soft); border-radius:6px; padding:7px 10px; color: var(--text); font-size:13px;">
@@ -274,7 +274,7 @@
                         </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="">
-                            <input type="checkbox" id="vodHideDownloadedToggle" onchange="onVodHideDownloadedChange()" style="accent-color: var(--accent); cursor:pointer;">
+                            <input type="checkbox" id="vodHideDownloadedToggle" onchange="onVodHideDownloadedChange()">
                             <span id="vodHideDownloadedText">Hide downloaded</span>
                         </label>
                     </div>
@@ -456,7 +456,7 @@
                         <h3 id="archiveTitle" style="margin-top:0;">Archiv durchsuchen</h3>
                         <p id="archiveIntro" style="color: var(--text-secondary); font-size:13px; margin-bottom:12px; line-height:1.5;">Suche nach Dateinamen, Streamern oder Datum-Strings. Treffer zeigen Recordings (Live + VOD); zugehoerige Chat- und Events-Dateien werden als Companion-Buttons angeboten.</p>
                         <div class="form-row" style="gap:8px; margin-bottom: 8px; flex-wrap: wrap; align-items:center;">
-                            <input type="text" id="archiveSearchQuery" placeholder="Suche..." style="flex: 1 1 240px; min-width: 200px; background: var(--bg-card); border: 1px solid var(--border-soft); border-radius: 4px; padding: 6px 10px; color: var(--text);">
+                            <input type="text" id="archiveSearchQuery" class="filter-input flex-1-1-240" placeholder="Suche...">
                             <select id="archiveSearchType" style="background: var(--bg-card); border: 1px solid var(--border-soft); border-radius: 4px; padding: 6px 10px; color: var(--text);">
                                 <option value="all">Alle Typen</option>
                                 <option value="live">Live-Aufnahmen</option>
@@ -645,13 +645,13 @@
                             </div>
                             <div style="display: grid; gap: 8px; margin-top: 8px;">
                                 <label id="vodTemplateLabel" style="font-size: 13px; color: var(--text-secondary);">VOD Template</label>
-                                <input type="text" id="vodFilenameTemplate" placeholder="{title}.mp4" style="font-family: monospace;" oninput="validateFilenameTemplates()">
+                                <input type="text" id="vodFilenameTemplate" class="input-monospace" placeholder="{title}.mp4" oninput="validateFilenameTemplates()">
 
                                 <label id="partsTemplateLabel" style="font-size: 13px; color: var(--text-secondary); margin-top: 4px;">VOD Part Template</label>
-                                <input type="text" id="partsFilenameTemplate" placeholder="{date}_Part{part_padded}.mp4" style="font-family: monospace;" oninput="validateFilenameTemplates()">
+                                <input type="text" id="partsFilenameTemplate" class="input-monospace" placeholder="{date}_Part{part_padded}.mp4" oninput="validateFilenameTemplates()">
 
                                 <label id="defaultClipTemplateLabel" style="font-size: 13px; color: var(--text-secondary); margin-top: 4px;">Clip Template</label>
-                                <input type="text" id="defaultClipFilenameTemplate" placeholder="{date}_{part}.mp4" style="font-family: monospace;" oninput="validateFilenameTemplates()">
+                                <input type="text" id="defaultClipFilenameTemplate" class="input-monospace" placeholder="{date}_{part}.mp4" oninput="validateFilenameTemplates()">
                             </div>
                             <div id="filenameTemplateHint" style="color: #888; font-size: 12px; margin-top: 8px;">Platzhalter: {title} {id} {channel} {date} {part} {part_padded} {trim_start} {trim_end} {trim_length} {date_custom="yyyy-MM-dd"}</div>
                             <div id="filenameTemplateLint" style="font-size: 12px; margin-top: 6px; color: #8bc34a;">Template-Check: OK</div>
diff --git a/src/styles.css b/src/styles.css
index fd18baa..8da4767 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -392,6 +392,46 @@ body {
     font-size: 13px;
 }
 
+/* ============================================
+   FILTER INPUTS — shared family for search/filter boxes
+   ============================================
+   Used by the primary VOD filter above the grid, the archive search,
+   and (in a compact variant) the sidebar streamer-list filter that
+   only shows once the list crosses the threshold. */
+.filter-input {
+    flex: 1;
+    min-width: 180px;
+    background: var(--bg-card);
+    border: 1px solid var(--border-soft);
+    border-radius: 6px;
+    padding: 8px 12px;
+    color: var(--text);
+    font-size: 13px;
+}
+
+.filter-input.compact {
+    width: calc(100% - 16px);
+    margin: 0 8px 8px;
+    padding: 4px 8px;
+    border-radius: 4px;
+    font-size: 12px;
+    flex: none;
+    min-width: 0;
+}
+
+.filter-input.flex-1-1-240 {
+    flex: 1 1 240px;
+    min-width: 200px;
+    border-radius: 4px;
+    padding: 6px 10px;
+}
+
+/* Monospace input utility — for filename-template fields and similar
+   places where the value is expected to be a code-shaped string. */
+.input-monospace {
+    font-family: 'Consolas', 'Segoe UI Mono', monospace;
+}
+
 .streamer-item .remove {
     margin-left: auto;
     opacity: 0;