From 479e8617894c8622a6325effbc9f556234c93c33 Mon Sep 17 00:00:00 2001
From: xRangerDE <xRangerDE@24-music.de>
Date: Mon, 11 May 2026 10:04:25 +0200
Subject: [PATCH] =?UTF-8?q?cleanup:=20.clip-template-wrap.shown=20modifier?=
 =?UTF-8?q?=20=E2=80=94=20kills=20inline=20display:none=20+=20style.displa?=
 =?UTF-8?q?y=20toggle?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The clip-cutter modal's custom-template wrap (.clip-template-wrap) was hidden by default via inline style="display:none;" in HTML and shown/hidden by updateFilenameTemplateVisibility() via wrap.style.display = 'block' / 'none' based on the selected filename format.

Moved both into CSS: the base rule now sets display:none, and a .shown modifier flips to display:block. The renderer toggles the class via classList.toggle('shown', ...) instead of poking at .style.display, and the HTML drops its inline style attribute.

Same pattern as 4.6.126 (.queue-details.expanded). Two inline style references gone.

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

diff --git a/src/index.html b/src/index.html
index ffaef5d..b6d033f 100644
--- a/src/index.html
+++ b/src/index.html
@@ -99,7 +99,7 @@
                     <span id="formatTemplate" class="clip-radio-label">{date}_{part}.mp4 (benutzerdefiniert)</span>
                 </label>
 
-                <div id="clipFilenameTemplateWrap" class="clip-template-wrap" style="display:none;">
+                <div id="clipFilenameTemplateWrap" class="clip-template-wrap">
                     <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="template-lint ok">Template-Check: OK</div>
diff --git a/src/renderer.ts b/src/renderer.ts
index 6b1bd5d..d0a1323 100644
--- a/src/renderer.ts
+++ b/src/renderer.ts
@@ -975,7 +975,7 @@ function getSelectedFilenameFormat(): 'simple' | 'timestamp' | 'template' | 'par
 function updateFilenameTemplateVisibility(): void {
     const selected = getSelectedFilenameFormat();
     const wrap = byId('clipFilenameTemplateWrap');
-    wrap.style.display = selected === 'template' ? 'block' : 'none';
+    wrap.classList.toggle('shown', selected === 'template');
 }
 
 interface TemplatePreviewContext {
diff --git a/src/styles.css b/src/styles.css
index 153130c..c8f795e 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -338,9 +338,14 @@ body {
 }
 
 .clip-template-wrap {
+    display: none;
     margin-top: 10px;
 }
 
+.clip-template-wrap.shown {
+    display: block;
+}
+
 /* Template-Guide button below the clip-template input — small offset
    from the lint badge that sits directly above it. Was a one-off
    inline style on the button. */