From 0bc3a15b82f1517eee890160fde1231ddf031af3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=9Cmit=20Tun=C3=A7?= <umitreva@gmail.com>
Date: Thu, 28 May 2026 07:49:01 +0300
Subject: [PATCH] feat: implement multi-language support and localization
 system with dynamic UI updates

---
 src/index.html      | 35 +++++++++++++++++++++++---------
 src/locales/ar.json |  3 ++-
 src/locales/de.json |  3 ++-
 src/locales/en.json |  3 ++-
 src/locales/ru.json |  3 ++-
 src/locales/tr.json |  3 ++-
 src/renderer.js     | 49 ++++++++++++++++++++++++++++++++++++---------
 7 files changed, 76 insertions(+), 23 deletions(-)

diff --git a/src/index.html b/src/index.html
index 510d0ae..944ed5a 100644
--- a/src/index.html
+++ b/src/index.html
@@ -218,16 +218,33 @@
           <div class="action-panel">
             <!-- Progress Section (Active during download) -->
             <div id="download-progress-panel" class="progress-panel" style="display: none;">
-              <div class="progress-header">
-                <span id="download-status">Bağlantı kuruluyor...</span>
-                <span id="download-percent">0%</span>
+              <!-- Overall Playlist Progress -->
+              <div class="overall-progress-group" style="margin-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,0.06); padding-bottom: 6px;">
+                <div class="progress-header" style="margin-bottom: 2px;">
+                  <span id="overall-status-label" data-i18n="overall_status_label" style="font-size: 0.76rem; color: #a49fc0; font-weight: 500;">Genel İlerleme</span>
+                  <span id="overall-percent" style="color: #00dfd8; font-weight: 800; font-size: 0.76rem;">0%</span>
+                </div>
+                <div class="progress-bar-container" style="height: 5px; background: rgba(0, 0, 0, 0.35);">
+                  <div id="overall-progress-bar" class="progress-bar-fill" style="width: 0%; height: 100%; background: linear-gradient(90deg, #7928ca 0%, #ff0080 100%);"></div>
+                </div>
+                <div style="display: flex; justify-content: space-between; align-items: center; margin-top: 3px;">
+                  <span id="overall-count-text" style="font-size: 0.72rem; color: #8c88a5;">Tamamlanan: 0 / 0</span>
+                  <span id="overall-remaining-text" style="font-size: 0.72rem; color: #8c88a5;">Kalan: 0</span>
+                </div>
               </div>
-              <div class="progress-bar-container">
-                <div id="download-progress-bar" class="progress-bar-fill" style="width: 0%"></div>
-              </div>
-              <div class="progress-footer" style="display: flex; justify-content: space-between; align-items: center; margin-top: 4px;">
-                <p id="download-subtext" class="subtext" style="margin-top: 0;">Lütfen bekleyin...</p>
-                <p id="download-overall-status" class="subtext" style="margin-top: 0; font-weight: 600; color: #00dfd8;"></p>
+
+              <!-- Active Item Progress -->
+              <div class="active-track-progress-group">
+                <div class="progress-header">
+                  <span id="download-status" style="font-size: 0.76rem; font-weight: 600; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; max-width: 190px;">Bağlantı kuruluyor...</span>
+                  <span id="download-percent" style="font-size: 0.76rem;">0%</span>
+                </div>
+                <div class="progress-bar-container" style="height: 5px; background: rgba(0, 0, 0, 0.35);">
+                  <div id="download-progress-bar" class="progress-bar-fill" style="width: 0%"></div>
+                </div>
+                <div class="progress-footer" style="display: flex; justify-content: space-between; align-items: center; margin-top: 4px;">
+                  <p id="download-subtext" class="subtext" style="margin-top: 0; font-size: 0.7rem;">Lütfen bekleyin...</p>
+                </div>
               </div>
             </div>
 
diff --git a/src/locales/ar.json b/src/locales/ar.json
index f15f1e7..84a2eb6 100644
--- a/src/locales/ar.json
+++ b/src/locales/ar.json
@@ -70,5 +70,6 @@
   "hr_suffix": "ساعات",
   "min_suffix_short": "د",
   "sec_suffix_short": "ث",
-  "hr_suffix_short": "س"
+  "hr_suffix_short": "س",
+  "overall_status_label": "التقدم الإجمالي"
 }
diff --git a/src/locales/de.json b/src/locales/de.json
index 5b34e6d..967eb3d 100644
--- a/src/locales/de.json
+++ b/src/locales/de.json
@@ -70,5 +70,6 @@
   "hr_suffix": "Stunden",
   "min_suffix_short": "Min.",
   "sec_suffix_short": "Sek.",
-  "hr_suffix_short": "Std."
+  "hr_suffix_short": "Std.",
+  "overall_status_label": "Gesamtfortschritt"
 }
diff --git a/src/locales/en.json b/src/locales/en.json
index 48aed1a..b5dcb2f 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -70,5 +70,6 @@
   "hr_suffix": "hours",
   "min_suffix_short": "min",
   "sec_suffix_short": "sec",
-  "hr_suffix_short": "hr"
+  "hr_suffix_short": "hr",
+  "overall_status_label": "Overall Progress"
 }
diff --git a/src/locales/ru.json b/src/locales/ru.json
index 084d197..970f4cd 100644
--- a/src/locales/ru.json
+++ b/src/locales/ru.json
@@ -70,5 +70,6 @@
   "hr_suffix": "ч.",
   "min_suffix_short": "мин.",
   "sec_suffix_short": "сек.",
-  "hr_suffix_short": "ч."
+  "hr_suffix_short": "ч.",
+  "overall_status_label": "Общий прогресс"
 }
diff --git a/src/locales/tr.json b/src/locales/tr.json
index 6a488ee..6bf72ea 100644
--- a/src/locales/tr.json
+++ b/src/locales/tr.json
@@ -70,5 +70,6 @@
   "hr_suffix": "saat",
   "min_suffix_short": "dk",
   "sec_suffix_short": "sn",
-  "hr_suffix_short": "sa"
+  "hr_suffix_short": "sa",
+  "overall_status_label": "Genel İlerleme"
 }
diff --git a/src/renderer.js b/src/renderer.js
index f71eb4b..213df29 100644
--- a/src/renderer.js
+++ b/src/renderer.js
@@ -30,7 +30,10 @@ const downloadStatus = document.getElementById('download-status');
 const downloadPercent = document.getElementById('download-percent');
 const downloadProgressBar = document.getElementById('download-progress-bar');
 const downloadSubtext = document.getElementById('download-subtext');
-const downloadOverallStatus = document.getElementById('download-overall-status');
+const overallPercent = document.getElementById('overall-percent');
+const overallProgressBar = document.getElementById('overall-progress-bar');
+const overallCountText = document.getElementById('overall-count-text');
+const overallRemainingText = document.getElementById('overall-remaining-text');
 
 const languageSelect = document.getElementById('language-select');
 
@@ -686,6 +689,26 @@ downloadBtn.addEventListener('click', async () => {
   downloadProgressBar.style.width = '0%';
   downloadSubtext.textContent = t('subtext_wait');
 
+  // Initialize overall progress bar UI values
+  overallPercent.textContent = '0%';
+  overallProgressBar.style.width = '0%';
+  if (currentLang === 'tr') {
+    overallCountText.textContent = `Tamamlanan: 0 / ${selectedItems.length}`;
+    overallRemainingText.textContent = `Kalan: ${selectedItems.length}`;
+  } else if (currentLang === 'de') {
+    overallCountText.textContent = `Abgeschlossen: 0 / ${selectedItems.length}`;
+    overallRemainingText.textContent = `Verbleibend: ${selectedItems.length}`;
+  } else if (currentLang === 'ru') {
+    overallCountText.textContent = `Завершено: 0 / ${selectedItems.length}`;
+    overallRemainingText.textContent = `Осталось: ${selectedItems.length}`;
+  } else if (currentLang === 'ar') {
+    overallCountText.textContent = `اكتمل: 0 / ${selectedItems.length}`;
+    overallRemainingText.textContent = `المتبقي: ${selectedItems.length}`;
+  } else {
+    overallCountText.textContent = `Completed: 0 / ${selectedItems.length}`;
+    overallRemainingText.textContent = `Remaining: ${selectedItems.length}`;
+  }
+
   // Disable UI interactive components during download
   document.querySelectorAll('.track-checkbox, .format-badge-btn, .quality-pill, .format-btn').forEach(el => {
     el.disabled = true;
@@ -758,21 +781,29 @@ downloadBtn.addEventListener('click', async () => {
     const completedCount = playlistTracks.filter(t => t.checked && t.status === 'completed').length;
     const failedCount = playlistTracks.filter(t => t.checked && t.status === 'error').length;
     const remainingCount = totalSelected - completedCount - failedCount;
+
+    // Calculate smooth continuous overall progress percentage
+    const overallVal = ((completedCount + (percent / 100)) / totalSelected) * 100;
+    const overallRound = Math.min(100, Math.round(overallVal));
+    overallPercent.textContent = `${overallRound}%`;
+    overallProgressBar.style.width = `${overallRound}%`;
     
-    let overallText = '';
     if (currentLang === 'tr') {
-      overallText = `Tamamlanan: ${completedCount}/${totalSelected} · Kalan: ${remainingCount}${failedCount > 0 ? ` · Hata: ${failedCount}` : ''}`;
+      overallCountText.textContent = `Tamamlanan: ${completedCount} / ${totalSelected}`;
+      overallRemainingText.textContent = `Kalan: ${remainingCount}${failedCount > 0 ? ` · Hata: ${failedCount}` : ''}`;
     } else if (currentLang === 'de') {
-      overallText = `Abgeschlossen: ${completedCount}/${totalSelected} · Verbleibend: ${remainingCount}${failedCount > 0 ? ` · Fehler: ${failedCount}` : ''}`;
+      overallCountText.textContent = `Abgeschlossen: ${completedCount} / ${totalSelected}`;
+      overallRemainingText.textContent = `Verbleibend: ${remainingCount}${failedCount > 0 ? ` · Fehler: ${failedCount}` : ''}`;
     } else if (currentLang === 'ru') {
-      overallText = `Завершено: ${completedCount}/${totalSelected} · Осталось: ${remainingCount}${failedCount > 0 ? ` · Ошибки: ${failedCount}` : ''}`;
+      overallCountText.textContent = `Завершено: ${completedCount} / ${totalSelected}`;
+      overallRemainingText.textContent = `Осталось: ${remainingCount}${failedCount > 0 ? ` · Ошибки: ${failedCount}` : ''}`;
     } else if (currentLang === 'ar') {
-      overallText = `اكتمل: ${completedCount}/${totalSelected} · المتبقي: ${remainingCount}${failedCount > 0 ? ` · خطأ: ${failedCount}` : ''}`;
+      overallCountText.textContent = `اكتمل: ${completedCount} / ${totalSelected}`;
+      overallRemainingText.textContent = `المتبقي: ${remainingCount}${failedCount > 0 ? ` · خطأ: ${failedCount}` : ''}`;
     } else {
-      overallText = `Completed: ${completedCount}/${totalSelected} · Remaining: ${remainingCount}${failedCount > 0 ? ` · Error: ${failedCount}` : ''}`;
+      overallCountText.textContent = `Completed: ${completedCount} / ${totalSelected}`;
+      overallRemainingText.textContent = `Remaining: ${remainingCount}${failedCount > 0 ? ` · Error: ${failedCount}` : ''}`;
     }
-    
-    downloadOverallStatus.textContent = overallText;
   });
 
   try {