Optimize queue rendering and fix settings toggle layout (v4.1.3)

typescript-version/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "twitch-vod-manager",
-  "version": "4.1.2",
+  "version": "4.1.3",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "twitch-vod-manager",
-      "version": "4.1.2",
+      "version": "4.1.3",
       "license": "MIT",
       "dependencies": {
         "axios": "^1.6.0",

typescript-version/package.json

@@ -1,6 +1,6 @@
 {
   "name": "twitch-vod-manager",
-  "version": "4.1.2",
+  "version": "4.1.3",
   "description": "Twitch VOD Manager - Download Twitch VODs easily",
   "main": "dist/main.js",
   "author": "xRangerDE",

typescript-version/src/index.html

@@ -457,7 +457,7 @@
 
                     <div class="settings-card">
                         <h3 id="updateTitle">Updates</h3>
-                        <p id="versionInfo" style="margin-bottom: 10px; color: var(--text-secondary);">Version: v4.1.2</p>
+                        <p id="versionInfo" style="margin-bottom: 10px; color: var(--text-secondary);">Version: v4.1.3</p>
                         <button class="btn-secondary" id="checkUpdateBtn" onclick="checkUpdate()">Nach Updates suchen</button>
                     </div>
 
@@ -502,7 +502,7 @@
                     <div class="status-dot" id="statusDot"></div>
                     <span id="statusText">Nicht verbunden</span>
                 </div>
-                <span id="versionText">v4.1.2</span>
+                <span id="versionText">v4.1.3</span>
             </div>
         </main>
     </div>

typescript-version/src/main.ts

@@ -8,7 +8,7 @@ import { autoUpdater } from 'electron-updater';
 // ==========================================
 // CONFIG & CONSTANTS
 // ==========================================
-const APP_VERSION = '4.1.2';
+const APP_VERSION = '4.1.3';
 const UPDATE_CHECK_URL = 'http://24-music.de/version.json';
 
 // Paths

typescript-version/src/renderer-queue.ts

@@ -18,6 +18,25 @@ function buildQueueFingerprint(url: string, streamer: string, date: string, cust
     ].join('|');
 }
 
+let lastQueueRenderFingerprint = '';
+
+function getQueueRenderFingerprint(items: QueueItem[]): string {
+    const lang = typeof currentLanguage === 'string' ? currentLanguage : 'en';
+    const pieces = items.map((item) => [
+        item.id,
+        item.status,
+        Math.round((Number(item.progress) || 0) * 10),
+        item.currentPart || 0,
+        item.totalParts || 0,
+        item.speed || '',
+        item.eta || '',
+        item.progressStatus || '',
+        item.last_error || ''
+    ].join(':'));
+
+    return `${lang}|${pieces.join('|')}`;
+}
+
 function hasActiveQueueDuplicate(url: string, streamer: string, date: string, customClip?: CustomClip): boolean {
     const target = buildQueueFingerprint(url, streamer, date, customClip);
     return queue.some((item) => {
@@ -130,7 +149,13 @@ function renderQueue(): void {
     const hasFailed = queue.some((item) => item.status === 'error');
     retryBtn.disabled = !hasFailed;
 
+    const renderFingerprint = getQueueRenderFingerprint(queue);
+    if (renderFingerprint === lastQueueRenderFingerprint) {
+        return;
+    }
+
     if (queue.length === 0) {
+        lastQueueRenderFingerprint = renderFingerprint;
         list.innerHTML = `<div style="color: var(--text-secondary); font-size: 12px; text-align: center; padding: 15px;">${UI_TEXT.queue.empty}</div>`;
         return;
     }
@@ -165,6 +190,8 @@ function renderQueue(): void {
             </div>
         `;
     }).join('');
+
+    lastQueueRenderFingerprint = renderFingerprint;
 }
 
 async function toggleDownload(): Promise<void> {

typescript-version/src/styles.css

@@ -591,7 +591,7 @@ body {
     margin-bottom: 6px;
 }
 
-.form-group input, .form-group select {
+.form-group input:not([type="checkbox"]):not([type="radio"]), .form-group select {
     width: 100%;
     background: var(--bg-main);
     border: 1px solid rgba(255,255,255,0.1);
@@ -601,11 +601,16 @@ body {
     font-size: 14px;
 }
 
-.form-group input:focus, .form-group select:focus {
+.form-group input:not([type="checkbox"]):not([type="radio"]):focus, .form-group select:focus {
     outline: none;
     border-color: var(--accent);
 }
 
+.form-group input[type="checkbox"],
+.form-group input[type="radio"] {
+    width: auto;
+}
+
 .language-picker {
     display: grid;
     grid-template-columns: 1fr 1fr;