feat: implement frontend renderer, styling, and localization support for download management

src/renderer.js

@@ -34,6 +34,9 @@ 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 dlPauseBtn = document.getElementById('dl-pause-btn');
+const dlResumeBtn = document.getElementById('dl-resume-btn');
+const dlStopBtn = document.getElementById('dl-stop-btn');
 
 const languageSelect = document.getElementById('language-select');
 
@@ -189,6 +192,30 @@ window.addEventListener('DOMContentLoaded', async () => {
     });
   }
 
+  // Bind Pause, Resume, and Stop Control Buttons
+  if (dlPauseBtn) {
+    dlPauseBtn.addEventListener('click', async () => {
+      await window.api.pauseDownload();
+      dlPauseBtn.style.display = 'none';
+      dlResumeBtn.style.display = 'inline-flex';
+      downloadStatus.textContent = currentLang === 'tr' ? 'Duraklatıldı' : 'Paused';
+    });
+  }
+
+  if (dlResumeBtn) {
+    dlResumeBtn.addEventListener('click', async () => {
+      await window.api.resumeDownload();
+      dlResumeBtn.style.display = 'none';
+      dlPauseBtn.style.display = 'inline-flex';
+    });
+  }
+
+  if (dlStopBtn) {
+    dlStopBtn.addEventListener('click', async () => {
+      await window.api.stopDownload();
+    });
+  }
+
   // Get and load persisted or default language
   const savedLang = localStorage.getItem('vibe_lang') || 'tr';
   languageSelect.value = savedLang;
@@ -566,6 +593,7 @@ function renderTrackList(info) {
       e.stopPropagation();
       track.checked = checkbox.checked;
       updateSelectAllCheckboxState();
+      updateSummaryStats();
     });
     
     checkboxWrapper.appendChild(checkbox);
@@ -651,8 +679,14 @@ function renderTrackList(info) {
     statusEl.appendChild(statusBadge);
     itemEl.appendChild(statusEl);
 
-    itemEl.addEventListener('click', () => {
+    itemEl.addEventListener('click', (e) => {
+      if (e.target.closest('.track-checkbox') || e.target.closest('.format-badge-btn')) {
+        return;
+      }
       focusedTrackId = track.id;
+      track.checked = !track.checked;
+      updateSelectAllCheckboxState();
+      updateSummaryStats();
       syncBottomPanelWithTrack(track);
       renderTrackList(currentVideoData);
     });
@@ -809,6 +843,10 @@ downloadBtn.addEventListener('click', async () => {
   try {
     const browser = useCookiesCheckbox.checked ? cookieBrowserSelect.value : null;
     
+    // Ensure initial button visibility states on start
+    if (dlPauseBtn) dlPauseBtn.style.display = 'inline-flex';
+    if (dlResumeBtn) dlResumeBtn.style.display = 'none';
+
     // Map selected items into a simplified API task schema
     const downloadTasks = selectedItems.map(t => ({
       id: t.id,
@@ -876,6 +914,17 @@ downloadBtn.addEventListener('click', async () => {
           downloadProgressPanel.style.display = 'none';
         }
       });
+    } else if (result.stopped) {
+      // User aborted queue
+      downloadProgressPanel.style.display = 'none';
+      Swal.fire({
+        title: currentLang === 'tr' ? 'İndirme Durduruldu' : 'Download Stopped',
+        text: currentLang === 'tr' ? 'İndirme işlemi kullanıcı tarafından durduruldu.' : 'The download process was stopped by the user.',
+        icon: 'info',
+        background: 'rgba(23, 20, 38, 0.95)',
+        color: '#fff',
+        confirmButtonColor: '#7000ff'
+      });
     } else {
       showError(result.error);
       downloadProgressPanel.style.display = 'none';

src/style.css

@@ -1130,5 +1130,20 @@ html[dir="rtl"] .summary-speed-select {
   background-position: left 6px center;
 }
 
+/* Control Buttons styling */
+.dl-ctrl-btn {
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.dl-ctrl-btn:hover {
+  transform: translateY(-1px);
+  filter: brightness(1.2);
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
+}
+
+.dl-ctrl-btn:active {
+  transform: translateY(0);
+}
+