From 5473a852ee128db6c6951aee08d8047aed12efa7 Mon Sep 17 00:00:00 2001
From: xRangerDE <xRangerDE@24-music.de>
Date: Mon, 11 May 2026 10:10:32 +0200
Subject: [PATCH] =?UTF-8?q?cleanup:=20.cutter-info=20+=20.timeline-contain?=
 =?UTF-8?q?er=20.shown=20modifiers=20=E2=80=94=204=20inline=20display=20re?=
 =?UTF-8?q?ferences=20gone?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Both the cutter-info bar (resolution/duration/fps/selection readouts) and the timeline-container (timeline + start/end inputs) were hidden by default via inline style="display:none;" in HTML, then loadCutterFromPath() set .style.display = 'flex' / 'block' once a video was loaded.

Moved both into CSS with the same pattern as 4.6.126 (.queue-details.expanded) and 4.6.132 (.clip-template-wrap.shown):
- Base .cutter-info / .timeline-container rule sets display:none
- .shown modifier flips to flex / block respectively (preserves the original visible-state layout)
- HTML drops the inline style attribute
- JS uses classList.add('shown') instead of poking at .style.display

Four inline-style references gone (2 HTML + 2 TS), no behavior change.

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

diff --git a/src/index.html b/src/index.html
index b6d033f..006577b 100644
--- a/src/index.html
+++ b/src/index.html
@@ -334,7 +334,7 @@
                             </div>
                         </div>
 
-                        <div class="cutter-info" id="cutterInfo" style="display:none">
+                        <div class="cutter-info" id="cutterInfo">
                             <div class="cutter-info-item">
                                 <span class="cutter-info-label" id="cutterInfoDurationLabel">Dauer</span>
                                 <span class="cutter-info-value" id="infoDuration">--:--:--</span>
@@ -353,7 +353,7 @@
                             </div>
                         </div>
 
-                        <div class="timeline-container" id="timelineContainer" style="display:none">
+                        <div class="timeline-container" id="timelineContainer">
                             <div class="timeline" id="timeline" onclick="seekTimeline(event)">
                                 <div class="timeline-selection" id="timelineSelection"></div>
                                 <div class="timeline-current" id="timelineCurrent"></div>
diff --git a/src/renderer.ts b/src/renderer.ts
index d0a1323..2208bb7 100644
--- a/src/renderer.ts
+++ b/src/renderer.ts
@@ -1469,8 +1469,8 @@ async function loadCutterFromPath(filePath: string): Promise<void> {
     cutterStartTime = 0;
     cutterEndTime = info.duration;
 
-    byId('cutterInfo').style.display = 'flex';
-    byId('timelineContainer').style.display = 'block';
+    byId('cutterInfo').classList.add('shown');
+    byId('timelineContainer').classList.add('shown');
     byId('btnCut').disabled = false;
 
     byId('infoDuration').textContent = formatTime(info.duration);
diff --git a/src/styles.css b/src/styles.css
index c8f795e..84f5c2b 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -2943,12 +2943,17 @@ select option {
 }
 
 .timeline-container {
+    display: none;
     background: var(--bg-card);
     border-radius: 8px;
     padding: 20px;
     margin-bottom: 20px;
 }
 
+.timeline-container.shown {
+    display: block;
+}
+
 .timeline {
     position: relative;
     height: 60px;
@@ -3027,15 +3032,19 @@ select option {
 }
 
 .cutter-info {
+    display: none;
     background: var(--bg-card);
     border-radius: 8px;
     padding: 15px 20px;
     margin-bottom: 20px;
-    display: flex;
     justify-content: space-around;
     text-align: center;
 }
 
+.cutter-info.shown {
+    display: flex;
+}
+
 .cutter-info-item {
     display: flex;
     flex-direction: column;