From 2b12bd8c42e3ba895a3efd6ebf1940726dace9b9 Mon Sep 17 00:00:00 2001
From: Sucukdeluxe <Sucukdeluxe@users.noreply.github.com>
Date: Mon, 2 Mar 2026 21:35:57 +0100
Subject: [PATCH] Add Fortschritt and Geladen columns to download grid

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 package.json            |  2 +-
 src/renderer/App.tsx    | 16 ++++++++++++----
 src/renderer/styles.css | 17 ++++++++++++++---
 3 files changed, 27 insertions(+), 8 deletions(-)

diff --git a/package.json b/package.json
index c200ed1..9b60b2f 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "real-debrid-downloader",
-  "version": "1.5.24",
+  "version": "1.5.25",
   "description": "Real-Debrid Downloader Desktop (Electron + React + TypeScript)",
   "main": "build/main/main/main.js",
   "author": "Sucukdeluxe",
diff --git a/src/renderer/App.tsx b/src/renderer/App.tsx
index 9cf1444..73d5974 100644
--- a/src/renderer/App.tsx
+++ b/src/renderer/App.tsx
@@ -2055,10 +2055,14 @@ export function App(): ReactElement {
               </button>
             </div>
             <div className="pkg-column-header">
-              {(["name", "size", "hoster"] as PkgSortColumn[]).map((col) => {
+              {(["name", "size", "hoster"] as PkgSortColumn[]).flatMap((col) => {
                 const labels: Record<PkgSortColumn, string> = { name: "Name", size: "Größe", hoster: "Hoster" };
                 const isActive = downloadsSortColumn === col;
-                return (
+                const before: React.ReactNode[] = [];
+                if (col === "size") before.push(<span key="progress" className="pkg-col pkg-col-progress">Fortschritt</span>);
+                if (col === "hoster") before.push(<span key="downloaded" className="pkg-col pkg-col-downloaded">Geladen</span>);
+                return [
+                  ...before,
                   <span
                     key={col}
                     className={`pkg-col pkg-col-${col} sortable${isActive ? " sort-active" : ""}`}
@@ -2087,8 +2091,8 @@ export function App(): ReactElement {
                     }}
                   >
                     {labels[col]} {isActive ? (downloadsSortDescending ? "\u25BC" : "\u25B2") : ""}
-                  </span>
-                );
+                  </span>,
+                ];
               })}
               <span className="pkg-col pkg-col-status">Status</span>
               <span className="pkg-col pkg-col-speed">Geschwindigkeit</span>
@@ -2714,7 +2718,9 @@ const PackageCard = memo(function PackageCard({ pkg, items, packageSpeed, isFirs
               <h4 onClick={(e) => { e.stopPropagation(); onStartEdit(pkg.id, pkg.name); }} title="Klicken zum Umbenennen">{pkg.name}</h4>
             )}
           </div>
+          <span className="pkg-col pkg-col-progress">{dlProgress}%</span>
           <span className="pkg-col pkg-col-size">{humanSize(items.reduce((sum, item) => sum + (item.totalBytes || item.downloadedBytes || 0), 0))}</span>
+          <span className="pkg-col pkg-col-downloaded">{humanSize(items.reduce((sum, item) => sum + (item.downloadedBytes || 0), 0))}</span>
           <span className="pkg-col pkg-col-hoster" title={(() => {
             const hosters = [...new Set(items.map((item) => formatHoster(item)).filter((h) => h !== "-"))];
             return hosters.join(", ");
@@ -2736,7 +2742,9 @@ const PackageCard = memo(function PackageCard({ pkg, items, packageSpeed, isFirs
       {!collapsed && items.map((item) => (
         <div key={item.id} className={`item-row${selectedIds.has(item.id) ? " item-selected" : ""}`} onClick={(e) => { e.stopPropagation(); onSelect(item.id, e.ctrlKey); }} onMouseDown={(e) => { e.stopPropagation(); onSelectMouseDown(item.id, e); }} onMouseEnter={() => onSelectMouseEnter(item.id)} onContextMenu={(e) => { e.preventDefault(); e.stopPropagation(); onContextMenu(pkg.id, item.id, e.clientX, e.clientY); }}>
           <span className="pkg-col pkg-col-name item-indent" title={item.fileName}>{item.fileName}</span>
+          <span className="pkg-col pkg-col-progress">{(item.status === "downloading" || item.status === "completed") ? `${item.progressPercent}%` : "-"}</span>
           <span className="pkg-col pkg-col-size">{humanSize(item.totalBytes || item.downloadedBytes || 0)}</span>
+          <span className="pkg-col pkg-col-downloaded">{humanSize(item.downloadedBytes || 0)}</span>
           <span className="pkg-col pkg-col-hoster" title={formatHoster(item)}>{formatHoster(item)}</span>
           <span className="pkg-col pkg-col-status" title={item.fullStatus}>
             {item.fullStatus}
diff --git a/src/renderer/styles.css b/src/renderer/styles.css
index 6b8a3ef..21e3526 100644
--- a/src/renderer/styles.css
+++ b/src/renderer/styles.css
@@ -577,7 +577,7 @@ body,
 
 .pkg-column-header {
   display: grid;
-  grid-template-columns: 1fr 100px 220px 180px 100px;
+  grid-template-columns: 1fr 55px 80px 80px 220px 180px 100px;
   gap: 8px;
   padding: 5px 12px;
   background: var(--card);
@@ -603,7 +603,7 @@ body,
 
 .pkg-columns {
   display: grid;
-  grid-template-columns: 1fr 100px 220px 180px 100px;
+  grid-template-columns: 1fr 55px 80px 80px 220px 180px 100px;
   gap: 8px;
   align-items: center;
   min-width: 0;
@@ -623,6 +623,8 @@ body,
   white-space: nowrap;
 }
 
+.pkg-columns .pkg-col-progress,
+.pkg-columns .pkg-col-downloaded,
 .pkg-columns .pkg-col-size,
 .pkg-columns .pkg-col-hoster,
 .pkg-columns .pkg-col-status,
@@ -634,6 +636,11 @@ body,
   white-space: nowrap;
 }
 
+.pkg-col-progress,
+.pkg-col-downloaded {
+  font-variant-numeric: tabular-nums;
+}
+
 .search-input {
   width: min(360px, 100%);
   background: var(--field);
@@ -1085,7 +1092,7 @@ td {
 
 .item-row {
   display: grid;
-  grid-template-columns: 1fr 100px 220px 180px 100px;
+  grid-template-columns: 1fr 55px 80px 80px 220px 180px 100px;
   gap: 8px;
   align-items: center;
   margin: 0 -12px;
@@ -1544,6 +1551,8 @@ td {
     grid-template-columns: 1fr;
   }
 
+  .pkg-column-header .pkg-col-progress,
+  .pkg-column-header .pkg-col-downloaded,
   .pkg-column-header .pkg-col-size,
   .pkg-column-header .pkg-col-hoster,
   .pkg-column-header .pkg-col-status,
@@ -1551,6 +1560,8 @@ td {
     display: none;
   }
 
+  .pkg-columns .pkg-col-progress,
+  .pkg-columns .pkg-col-downloaded,
   .pkg-columns .pkg-col-size,
   .pkg-columns .pkg-col-hoster,
   .pkg-columns .pkg-col-status,