Split progress bar: blue for download, green for extraction

Left half (blue) shows download progress, right half (green) shows
extraction progress. When no extraction is active, full bar is blue.
Full bar = 50% blue (all downloaded) + 50% green (all extracted).

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "real-debrid-downloader",
-  "version": "1.4.85",
+  "version": "1.4.86",
   "description": "Real-Debrid Downloader Desktop (Electron + React + TypeScript)",
   "main": "build/main/main/main.js",
   "author": "Sucukdeluxe",

src/renderer/App.tsx

@@ -2004,8 +2004,11 @@ const PackageCard = memo(function PackageCard({ pkg, items, packageSpeed, isFirs
   const done = items.filter((item) => item.status === "completed").length;
   const failed = items.filter((item) => item.status === "failed").length;
   const cancelled = items.filter((item) => item.status === "cancelled").length;
+  const extracted = items.filter((item) => item.fullStatus?.startsWith("Entpackt")).length;
+  const extracting = items.some((item) => item.fullStatus?.startsWith("Entpack"));
   const total = Math.max(1, items.length);
-  const progress = Math.floor((done / total) * 100);
+  const dlProgress = Math.floor((done / total) * (extracting ? 50 : 100));
+  const exProgress = Math.floor((extracted / total) * 50);
 
   const onKeyDown = (e: KeyboardEvent<HTMLInputElement>): void => {
     if (e.key === "Enter") { onFinishEdit(pkg.id, pkg.name, editingName); }
@@ -2043,7 +2046,10 @@ const PackageCard = memo(function PackageCard({ pkg, items, packageSpeed, isFirs
           <button className="btn danger" onClick={() => onCancel(pkg.id)}>Paket löschen</button>
         </div>
       </header>
-      <div className="progress"><div style={{ width: `${progress}%` }} /></div>
+      <div className="progress">
+        <div className="progress-dl" style={{ width: `${dlProgress}%` }} />
+        {extracting && <div className="progress-ex" style={{ width: `${exProgress}%` }} />}
+      </div>
       {!collapsed && <table>
         <thead><tr>
           <th className="col-file">Datei</th>

src/renderer/styles.css

@@ -560,13 +560,19 @@ body,
   border-radius: 999px;
   background: var(--progress-track);
   overflow: hidden;
+  display: flex;
 }
 
-.progress > div {
+.progress-dl {
   height: 100%;
   background: linear-gradient(90deg, #3bc9ff, #22d3ee);
 }
 
+.progress-ex {
+  height: 100%;
+  background: linear-gradient(90deg, #22c55e, #4ade80);
+}
+
 table {
   width: 100%;
   table-layout: fixed;