feat: implement renderer logic for media analysis, format selection, and download progress tracking

src/renderer.js

@@ -198,12 +198,16 @@ function renderTrackList(info) {
   trackList.innerHTML = `
     <div class="track-item">
       <div class="track-thumb">
-        <img src="${info.thumbnail}" alt="Thumbnail">
+        <svg class="track-thumb-fallback" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <polygon points="23 7 16 12 23 17 23 7"></polygon>
+          <rect x="1" y="5" width="15" height="14" rx="2" ry="2"></rect>
+        </svg>
+        <img src="${info.thumbnail || ''}" onerror="this.style.display='none';" alt="Thumbnail">
       </div>
       <div class="track-details">
         <h4>${info.title}</h4>
         <p class="track-uploader">${info.uploader}</p>
-        <span class="track-duration">Süre: ${info.duration}</span>
+        <span class="track-duration">Süre: ${info.duration || 'Bilinmiyor'}</span>
       </div>
       <div class="track-status">
         <span id="track-status-badge" class="status-badge ready">Hazır</span>
@@ -322,6 +326,12 @@ downloadBtn.addEventListener('click', async () => {
 
 // Helper: Show Error Alert inside Step 1
 function showError(msg) {
-  errorMessage.textContent = `Hata: ${msg}`;
+  let friendlyMsg = msg;
+  if (msg.includes('Could not copy') && msg.includes('cookie database')) {
+    friendlyMsg = 'Seçtiğiniz tarayıcı (Chrome/Edge/Brave vb.) şu anda arka planda açık olduğu için çerez veritabanı kilitlendi. Lütfen tarayıcı pencerelerinizi tamamen kapatıp ardından tekrar "Analiz Et" butonuna basın.';
+  } else if (msg.includes('You need to log in to access this content')) {
+    friendlyMsg = 'Bu özel içeriğe erişmek için giriş yapılması gerekiyor. Lütfen aşağıdaki çerez seçeneğini aktif edip giriş yapmış olduğunuz tarayıcıyı seçin.';
+  }
+  errorMessage.textContent = `Hata: ${friendlyMsg}`;
   errorCard.style.display = 'flex';
 }

src/style.css

@@ -450,12 +450,28 @@ input[type="text"]:focus {
   border: 1px solid rgba(255, 255, 255, 0.08);
   box-shadow: 0 4px 12px rgba(0,0,0,0.3);
   flex-shrink: 0;
+  position: relative;
+  background: linear-gradient(135deg, rgba(121, 40, 202, 0.25) 0%, rgba(255, 0, 128, 0.25) 100%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.track-thumb-fallback {
+  color: rgba(255, 255, 255, 0.4);
+  width: 28px;
+  height: 28px;
+  z-index: 1;
 }
 
 .track-thumb img {
+  position: absolute;
+  top: 0;
+  left: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
+  z-index: 2;
 }
 
 .track-details {