From c4201fc6d758fab7f9d90c0119bc943623ce0eb1 Mon Sep 17 00:00:00 2001
From: xRangerDE <xRangerDE@24-music.de>
Date: Mon, 11 May 2026 03:04:30 +0200
Subject: [PATCH] cleanup: unify template-lint visual + drop 3 hardcoded color
 literals
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Two separate places (Settings filename templates + clip-cutter
modal custom template) had their own lint state. Each set the
colour by JS as `lintNode.style.color = "#8bc34a"` (green for OK)
or `"#ff8a80"` (red for unknown placeholder). Same intent, different
implementations, different shades than the rest of the app
(--success #00c853 + --error #ff4444).

Extracted to a shared .template-lint class with .ok / .warn modifiers
driven by the canonical CSS vars. The renderers now swap classNames
instead of inline colours.

Also picked up the stale `color: #888` on filenameTemplateHint and
replaced with the existing .form-note utility class (which uses
var(--text-secondary)).

The old .clip-template-lint rule stays as a no-op alias for safety,
but its hard-coded #8bc34a is removed — colour now comes from
.template-lint.ok / .warn. Three hard-coded hex literals retired,
two state branches consolidated, semantics now track the global
palette.

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

diff --git a/src/index.html b/src/index.html
index 722789d..bd9f62c 100644
--- a/src/index.html
+++ b/src/index.html
@@ -102,7 +102,7 @@
                 <div id="clipFilenameTemplateWrap" class="clip-template-wrap" style="display:none;">
                     <input type="text" id="clipFilenameTemplate" value="{date}_{part}.mp4" placeholder="{date}_{part}.mp4" class="clip-modal-template-input" oninput="updateFilenameExamples()">
                     <div id="clipTemplateHelp" class="clip-modal-hint">Platzhalter: {title} {id} {channel} {date} {part} {trim_start} {trim_end} {trim_length} {date_custom="yyyy-MM-dd"}</div>
-                    <div id="clipTemplateLint" class="clip-template-lint">Template-Check: OK</div>
+                    <div id="clipTemplateLint" class="template-lint ok" style="margin-top: 4px;">Template-Check: OK</div>
                     <button class="btn-secondary" id="clipTemplateGuideBtn" style="margin-top: 8px;" onclick="openTemplateGuide('clip')">Template Guide</button>
                 </div>
             </div>
@@ -653,8 +653,8 @@
                                 <label id="defaultClipTemplateLabel" style="font-size: 13px; color: var(--text-secondary); margin-top: 4px;">Clip Template</label>
                                 <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>
+                            <div id="filenameTemplateHint" class="form-note" style="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" class="template-lint ok" style="margin-top: 6px;">Template-Check: OK</div>
                         </div>
                     </div>
 
diff --git a/src/renderer-settings.ts b/src/renderer-settings.ts
index 9a7dc90..4f9677b 100644
--- a/src/renderer-settings.ts
+++ b/src/renderer-settings.ts
@@ -49,12 +49,12 @@ function validateFilenameTemplates(showAlert = false): boolean {
     const lintNode = byId('filenameTemplateLint');
 
     if (!uniqueUnknown.length) {
-        lintNode.style.color = '#8bc34a';
+        lintNode.className = 'template-lint ok';
         lintNode.textContent = UI_TEXT.static.templateLintOk;
         return true;
     }
 
-    lintNode.style.color = '#ff8a80';
+    lintNode.className = 'template-lint warn';
     lintNode.textContent = `${UI_TEXT.static.templateLintWarn}: ${uniqueUnknown.join(' ')}`;
 
     if (showAlert) {
diff --git a/src/renderer.ts b/src/renderer.ts
index 6f255c6..606e114 100644
--- a/src/renderer.ts
+++ b/src/renderer.ts
@@ -1245,10 +1245,10 @@ function updateFilenameExamples(): void {
     updateFilenameTemplateVisibility();
 
     if (!unknownTokens.length) {
-        clipLint.style.color = '#8bc34a';
+        clipLint.className = 'template-lint ok';
         clipLint.textContent = UI_TEXT.static.templateLintOk;
     } else {
-        clipLint.style.color = '#ff8a80';
+        clipLint.className = 'template-lint warn';
         clipLint.textContent = `${UI_TEXT.static.templateLintWarn}: ${unknownTokens.join(' ')}`;
     }
 
diff --git a/src/styles.css b/src/styles.css
index 801c9d6..d1deb07 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -282,8 +282,12 @@ body {
     line-height: 1.4;
 }
 
+/* .clip-template-lint was the old per-modal rule for the clip-cutter
+   template lint badge. Superseded by the shared .template-lint
+   class (with .ok / .warn modifiers driven from var(--success) /
+   var(--error)). Class kept as a no-op alias in case any external
+   reference still uses it. */
 .clip-template-lint {
-    color: #8bc34a;
     font-size: 12px;
     margin-top: 4px;
 }
@@ -1966,6 +1970,25 @@ select option {
     user-select: none;
 }
 
+/* Filename-template lint badge — used both by the Settings card's
+   template inputs and by the clip-cutter modal's custom template
+   row. Two states: green for OK, red for unknown-placeholder
+   warning. Pull the colours from --success / --error vars so the
+   lint always tracks the rest of the apps semantic palette. */
+.template-lint {
+    font-size: 12px;
+    line-height: 1.4;
+    transition: color 0.15s;
+}
+
+.template-lint.ok {
+    color: var(--success);
+}
+
+.template-lint.warn {
+    color: var(--error);
+}
+
 /* Sidebar queue empty state — small dashed-border card matching the
    sibling streamer-list empty state. */
 .queue-empty {