Add Fortschritt and Geladen columns to download grid
Some checks are pending
Build and Release / build (push) Waiting to run

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Sucukdeluxe 2026-03-02 21:35:57 +01:00
parent 05dc0ca1c6
commit 2b12bd8c42
3 changed files with 27 additions and 8 deletions

View File

@ -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",

View File

@ -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}

View File

@ -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,