Split Hoster column into Hoster + Account columns

Hoster column now shows only the file hoster (e.g. rapidgator.net),
new Account column shows the debrid service used (e.g. Mega-Debrid).

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Sucukdeluxe 2026-03-03 20:54:03 +01:00
parent d87b74d359
commit d67cce501b
2 changed files with 35 additions and 9 deletions

View File

@ -2187,6 +2187,7 @@ export function App(): ReactElement {
</span>,
];
})}
<span className="pkg-col pkg-col-account">Account</span>
<span className="pkg-col pkg-col-status">Status</span>
<span className="pkg-col pkg-col-speed">Geschwindigkeit</span>
</div>
@ -2262,7 +2263,8 @@ export function App(): ReactElement {
</span>
) : "-";
})()}</span>
<span className="pkg-col pkg-col-hoster">{entry.provider ? providerLabels[entry.provider] : "-"}</span>
<span className="pkg-col pkg-col-hoster">-</span>
<span className="pkg-col pkg-col-account">{entry.provider ? providerLabels[entry.provider] : "-"}</span>
<span className="pkg-col pkg-col-status">{entry.status === "completed" ? "Abgeschlossen" : "Gelöscht"}</span>
<span className="pkg-col pkg-col-speed">-</span>
</div>
@ -2888,14 +2890,18 @@ const PackageCard = memo(function PackageCard({ pkg, items, packageSpeed, isFirs
) : "-";
})()}</span>
<span className="pkg-col pkg-col-hoster" title={(() => {
const hosters = [...new Set(items.map((item) => formatHoster(item)).filter((h) => h !== "-"))];
const hosters = [...new Set(items.map((item) => extractHoster(item.url)).filter(Boolean))];
return hosters.join(", ");
})()}>{(() => {
const hosters = [...new Set(items.map((item) => extractHoster(item.url)).filter(Boolean))];
return hosters.length > 0 ? hosters.join(", ") : "-";
})()}</span>
<span className="pkg-col pkg-col-account" title={(() => {
const providers = [...new Set(items.map((item) => item.provider).filter(Boolean))];
const hosterStr = hosters.length > 0 ? hosters.join(", ") : "-";
if (providers.length > 0) return `${hosterStr} via. ${providers.map((p) => providerLabels[p!] || p).join(", ")}`;
return hosterStr;
return providers.map((p) => providerLabels[p!] || p).join(", ");
})()}>{(() => {
const providers = [...new Set(items.map((item) => item.provider).filter(Boolean))];
return providers.length > 0 ? providers.map((p) => providerLabels[p!] || p).join(", ") : "-";
})()}</span>
<span className="pkg-col pkg-col-status">[{done}/{total}{done === total && total > 0 ? " - Done" : ""}{failed > 0 ? ` · ${failed} Fehler` : ""}{cancelled > 0 ? ` · ${cancelled} abgebr.` : ""}]</span>
<span className="pkg-col pkg-col-speed">{packageSpeed > 0 ? formatSpeedMbps(packageSpeed) : "-"}</span>
@ -2930,7 +2936,8 @@ const PackageCard = memo(function PackageCard({ pkg, items, packageSpeed, isFirs
</span>
) : "-";
})()}</span>
<span className="pkg-col pkg-col-hoster" title={formatHoster(item)}>{formatHoster(item)}</span>
<span className="pkg-col pkg-col-hoster" title={extractHoster(item.url)}>{extractHoster(item.url) || "-"}</span>
<span className="pkg-col pkg-col-account">{item.provider ? providerLabels[item.provider] : "-"}</span>
<span className="pkg-col pkg-col-status" title={item.retries > 0 ? `${item.fullStatus} · R${item.retries}` : item.fullStatus}>
{item.fullStatus}
</span>

View File

@ -577,7 +577,7 @@ body,
.pkg-column-header {
display: grid;
grid-template-columns: 1fr 90px 160px 220px 180px 100px;
grid-template-columns: 1fr 90px 170px 140px 130px 180px 100px;
gap: 8px;
padding: 5px 12px;
background: var(--card);
@ -589,6 +589,15 @@ body,
user-select: none;
}
.pkg-column-header .pkg-col-progress,
.pkg-column-header .pkg-col-size,
.pkg-column-header .pkg-col-hoster,
.pkg-column-header .pkg-col-account,
.pkg-column-header .pkg-col-status,
.pkg-column-header .pkg-col-speed {
text-align: center;
}
.pkg-column-header .sortable {
cursor: pointer;
}
@ -603,7 +612,7 @@ body,
.pkg-columns {
display: grid;
grid-template-columns: 1fr 90px 160px 220px 180px 100px;
grid-template-columns: 1fr 90px 170px 140px 130px 180px 100px;
gap: 8px;
align-items: center;
min-width: 0;
@ -626,6 +635,7 @@ body,
.pkg-columns .pkg-col-progress,
.pkg-columns .pkg-col-size,
.pkg-columns .pkg-col-hoster,
.pkg-columns .pkg-col-account,
.pkg-columns .pkg-col-status,
.pkg-columns .pkg-col-speed {
font-size: 13px;
@ -633,10 +643,12 @@ body,
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
text-align: center;
}
.pkg-col-progress {
font-variant-numeric: tabular-nums;
padding-right: 12px;
}
.progress-size {
@ -1272,7 +1284,7 @@ td {
.item-row {
display: grid;
grid-template-columns: 1fr 90px 160px 220px 180px 100px;
grid-template-columns: 1fr 90px 170px 140px 130px 180px 100px;
gap: 8px;
align-items: center;
margin: 0 -12px;
@ -1291,6 +1303,11 @@ td {
white-space: nowrap;
color: var(--muted);
font-size: 13px;
text-align: center;
}
.item-row .pkg-col-name {
text-align: left;
}
.item-row .pkg-col-name {
@ -1734,6 +1751,7 @@ td {
.pkg-column-header .pkg-col-progress,
.pkg-column-header .pkg-col-size,
.pkg-column-header .pkg-col-hoster,
.pkg-column-header .pkg-col-account,
.pkg-column-header .pkg-col-status,
.pkg-column-header .pkg-col-speed {
display: none;
@ -1742,6 +1760,7 @@ td {
.pkg-columns .pkg-col-progress,
.pkg-columns .pkg-col-size,
.pkg-columns .pkg-col-hoster,
.pkg-columns .pkg-col-account,
.pkg-columns .pkg-col-status,
.pkg-columns .pkg-col-speed {
display: none;