From 7252e43e68860d52216ef8a53e43589f970092cc Mon Sep 17 00:00:00 2001
From: NimBold <NimBold@users.noreply.github.com>
Date: Wed, 17 Jun 2026 10:30:27 +0330
Subject: [PATCH] fix(ui): add missing styling for queued/retrying states and
 processing speed labels
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add --status-queued and --status-retrying CSS vars to all theme blocks
- Add .download-status-queued/.download-status-retrying CSS classes
- Add .download-progress-fill.queued/.retrying with pulse animation for retrying
- Wire retrying status into hover action buttons and context menu (pause/resume/redownload)
- Show 'Processing…'/'Muxing…' text in speed/ETA columns during processing state
- Fix light theme: add missing --status-* vars to :root block
---
 src/components/DownloadItem.tsx  | 16 +++++++++-----
 src/components/DownloadTable.tsx |  6 +++---
 src/index.css                    | 36 ++++++++++++++++++++++++++++++++
 3 files changed, 50 insertions(+), 8 deletions(-)

diff --git a/src/components/DownloadItem.tsx b/src/components/DownloadItem.tsx
index f3e465e..119afaf 100644
--- a/src/components/DownloadItem.tsx
+++ b/src/components/DownloadItem.tsx
@@ -94,7 +94,8 @@ export const DownloadItem = React.memo<DownloadItemProps>(({
                 className={`download-progress-fill ${
                   download.status === 'paused' ? 'paused' : 
                   download.status === 'processing' ? 'processing' :
-                  download.status === 'queued' ? 'queued' : ''
+                  download.status === 'queued' ? 'queued' :
+                  download.status === 'retrying' ? 'retrying' : ''
                 }`}
                 style={{ width: `${(download.fraction || 0) * 100}%` }}
               />
@@ -106,7 +107,8 @@ export const DownloadItem = React.memo<DownloadItemProps>(({
                 download.status === 'failed' ? 'download-status-failed' : 
                 download.status === 'processing' ? 'download-status-processing' :
                 download.status === 'downloading' ? 'download-status-downloading' : 
-                download.status === 'queued' ? 'download-status-queued' : ''
+                download.status === 'queued' ? 'download-status-queued' :
+                download.status === 'retrying' ? 'download-status-retrying' : ''
               }`}
             >
               {download.status === 'queued' && queueIndex !== -1 ? (
@@ -127,11 +129,15 @@ export const DownloadItem = React.memo<DownloadItemProps>(({
       </div>
       
       <div>
-        <span ref={speedTextRef} className="tabular-nums">{download.status === 'downloading' ? download.speed : '-'}</span>
+        <span ref={speedTextRef} className="tabular-nums">
+          {download.status === 'downloading' ? download.speed : download.status === 'processing' ? 'Processing…' : '-'}
+        </span>
       </div>
       
       <div>
-        <span ref={etaTextRef} className="tabular-nums">{download.status === 'downloading' ? download.eta : '-'}</span>
+        <span ref={etaTextRef} className="tabular-nums">
+          {download.status === 'downloading' ? download.eta : download.status === 'processing' ? 'Muxing…' : '-'}
+        </span>
       </div>
       
       <div className="download-cell-right">
@@ -160,7 +166,7 @@ export const DownloadItem = React.memo<DownloadItemProps>(({
               </button>
             </>
           )}
-          {(download.status === 'downloading' || download.status === 'processing') && (
+          {(download.status === 'downloading' || download.status === 'processing' || download.status === 'retrying') && (
             <button onClick={() => handlePause(download.id)} className="app-icon-button h-7 w-7" title="Pause">
               <Pause size={14} fill="currentColor" />
             </button>
diff --git a/src/components/DownloadTable.tsx b/src/components/DownloadTable.tsx
index 74bd2c6..21de836 100644
--- a/src/components/DownloadTable.tsx
+++ b/src/components/DownloadTable.tsx
@@ -281,7 +281,7 @@ export const DownloadTable: React.FC<DownloadTableProps> = ({ filter }) => {
 
           <div className="h-[1px] bg-border-modal/60 my-1.5 mx-2"></div>
 
-          {(contextItem.status === 'downloading' || contextItem.status === 'queued') && (
+          {(contextItem.status === 'downloading' || contextItem.status === 'queued' || contextItem.status === 'retrying') && (
             <button
               onClick={() => {
                 setContextMenu(null);
@@ -293,7 +293,7 @@ export const DownloadTable: React.FC<DownloadTableProps> = ({ filter }) => {
             </button>
           )}
 
-          {(contextItem.status === 'paused' || contextItem.status === 'failed') && (
+          {(contextItem.status === 'paused' || contextItem.status === 'failed' || contextItem.status === 'retrying') && (
             <button
               onClick={() => {
                 setContextMenu(null);
@@ -305,7 +305,7 @@ export const DownloadTable: React.FC<DownloadTableProps> = ({ filter }) => {
             </button>
           )}
 
-          {['completed', 'failed', 'paused'].includes(contextItem.status) && (
+          {['completed', 'failed', 'paused', 'retrying'].includes(contextItem.status) && (
             <button
               onClick={() => {
                 setContextMenu(null);
diff --git a/src/index.css b/src/index.css
index fccafb1..99957b1 100644
--- a/src/index.css
+++ b/src/index.css
@@ -24,6 +24,12 @@
   --sidebar-panel-bg: 0 0% 95%;
   --workspace-bg: 0 0% 98%;
   --statusbar-bg: 0 0% 96%;
+  --status-completed: 136 62% 48%;
+  --status-paused: 0 0% 56%;
+  --status-downloading: 211 100% 56%;
+  --status-failed: 0 62% 58%;
+  --status-queued: 38 92% 50%;
+  --status-retrying: 50 100% 50%;
   --sidebar-border: 0 0% 0% / 0.12;
   --sidebar-hover: 0 0% 0% / 0.06;
 }
@@ -78,6 +84,8 @@
   --status-paused: 0 0% 56%;
   --status-downloading: 211 100% 56%;
   --status-failed: 0 62% 58%;
+  --status-queued: 38 95% 55%;
+  --status-retrying: 50 100% 60%;
   --sidebar-shell-bg: 0 0% 11%;
   --sidebar-panel-bg: 0 0% 13%;
   --workspace-bg: 0 0% 11%;
@@ -109,6 +117,8 @@
   --status-paused: 65 92% 76%;
   --status-downloading: 191 97% 77%;
   --status-failed: 0 100% 67%;
+  --status-queued: 38 95% 60%;
+  --status-retrying: 50 100% 65%;
   --sidebar-shell-bg: 231 15% 15%;
   --sidebar-panel-bg: 232 14% 23%;
   --workspace-bg: 231 15% 18%;
@@ -140,6 +150,8 @@
   --status-paused: 40 71% 73%;
   --status-downloading: 193 43% 67%;
   --status-failed: 354 42% 56%;
+  --status-queued: 40 71% 60%;
+  --status-retrying: 50 85% 55%;
   --sidebar-shell-bg: 220 18% 18%;
   --sidebar-panel-bg: 220 17% 27%;
   --workspace-bg: 220 16% 22%;
@@ -1069,6 +1081,15 @@
     background: hsl(199 89% 48%);
   }
 
+  .download-progress-fill.queued {
+    background: hsl(var(--status-queued));
+  }
+
+  .download-progress-fill.retrying {
+    background: hsl(var(--status-retrying));
+    animation: pulse-progress 1.5s ease-in-out infinite;
+  }
+
   .download-status {
     font-weight: 500;
   }
@@ -1097,6 +1118,16 @@
     color: hsl(199 89% 48%);
     font-weight: 600;
   }
+
+  .download-status-queued {
+    color: hsl(var(--status-queued));
+    font-weight: 600;
+  }
+
+  .download-status-retrying {
+    color: hsl(var(--status-retrying));
+    font-weight: 600;
+  }
 }
 
 .glass-panel {
@@ -1143,6 +1174,11 @@
   to { opacity: 1; }
 }
 
+@keyframes pulse-progress {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.6; }
+}
+
 @keyframes modal-in {
   from { opacity: 0; transform: scale(0.98); }
   to { opacity: 1; transform: scale(1); }