feat(downloads): restore sorting and stable availability

Make Service sortable by visible provider labels, keep pointer sorting distinct from column dragging, preserve keyboard sorting, infer active and completed transfers as online, and retain definitive availability across item and package resets. Keep manual extraction and package-status changes out of this selective rebuild.
This commit is contained in:
Sucukdeluxe
2026-08-24 00:46:40 +02:00
parent 20be2a9a03
commit 7bd31185b0
6 changed files with 253 additions and 25 deletions
-2
View File
@@ -5710,7 +5710,6 @@ export class DownloadManager extends EventEmitter {
item.targetPath = "";
item.provider = null;
item.fullStatus = "Wartet";
item.onlineStatus = undefined;
item.updatedAt = nowMs();
}
@@ -5794,7 +5793,6 @@ export class DownloadManager extends EventEmitter {
item.targetPath = "";
item.provider = null;
item.fullStatus = "Wartet";
item.onlineStatus = undefined;
item.updatedAt = nowMs();
if (this.session.running) {
+28 -1
View File
@@ -1415,6 +1415,25 @@ function sortPackageOrderByProgress(order: string[], packages: Record<string, Pa
return sorted;
}
export function sortPackageOrderByService(
order: string[],
packages: Record<string, PackageEntry>,
items: Record<string, DownloadItem>,
descending: boolean,
visibleItemsByPackage: Record<string, readonly DownloadItem[]> = {}
): string[] {
const sorted = [...order];
const itemsFor = (packageId: string): readonly DownloadItem[] => visibleItemsByPackage[packageId]
?? (packages[packageId]?.itemIds ?? []).map((id) => items[id]).filter((item): item is DownloadItem => Boolean(item));
sorted.sort((a, b) => {
const serviceA = [...new Set(itemsFor(a).map((item) => item.providerLabel || (item.provider ? providerLabels[item.provider] : "")).filter(Boolean))].join(",").toLocaleLowerCase("de-DE");
const serviceB = [...new Set(itemsFor(b).map((item) => item.providerLabel || (item.provider ? providerLabels[item.provider] : "")).filter(Boolean))].join(",").toLocaleLowerCase("de-DE");
const comparison = serviceA.localeCompare(serviceB, "de");
return descending ? -comparison : comparison;
});
return sorted;
}
function computePackageProgress(pkg: PackageEntry | undefined, items: Record<string, DownloadItem>): number {
if (!pkg) return 0;
const ids = pkg.itemIds ?? [];
@@ -4733,6 +4752,14 @@ export function App(): ReactElement {
? sortPackageOrderBySize(baseOrder, snapshot.session.packages, snapshot.session.items, nextDescending)
: column === "hoster"
? sortPackageOrderByHoster(baseOrder, snapshot.session.packages, snapshot.session.items, nextDescending)
: column === "service"
? sortPackageOrderByService(
baseOrder,
snapshot.session.packages,
snapshot.session.items,
nextDescending,
Object.fromEntries(downloadsViewCore.packageRows.map((row) => [row.package.id, row.items]))
)
: sortPackageOrderByName(baseOrder, snapshot.session.packages, nextDescending);
pendingPackageOrderRef.current = [...sorted];
pendingPackageOrderAtRef.current = Date.now();
@@ -4745,7 +4772,7 @@ export function App(): ReactElement {
setSnapshot((current) => ({ ...current, session: { ...current.session, packageOrder: serverPackageOrderRef.current } }));
showToast(`Sortierung fehlgeschlagen: ${String(error)}`, 2400);
});
}, [downloadsSortColumn, downloadsSortDescending, showToast, snapshot.session.items, snapshot.session.packageOrder, snapshot.session.packages]);
}, [downloadsSortColumn, downloadsSortDescending, downloadsViewCore.packageRows, showToast, snapshot.session.items, snapshot.session.packageOrder, snapshot.session.packages]);
const clearDownloadQueue = useCallback((): void => {
void performQuickAction(async () => {
@@ -14,12 +14,22 @@ import {
} from "../../download-format";
import type { DownloadPackageRow } from "./downloads-model";
export type DownloadSortColumn = "name" | "size" | "hoster" | "progress";
export type DownloadSortColumn = "name" | "size" | "hoster" | "progress" | "service";
const DOWNLOAD_SELECTION_COLUMN_WIDTH = "36px";
const DOWNLOAD_ACTION_COLUMN_WIDTH = "60px";
const DOWNLOAD_COLUMN_DRAG_THRESHOLD_PX = 5;
const PACKAGE_ROW_DISCLOSURE_EXCLUSION_SELECTOR = "button, input, select, textarea, a, [contenteditable='true'], .downloads-copyable, .downloads-meter";
interface DownloadColumnPointerGesture {
dragged: boolean;
pointerId: number;
sortColumn?: DownloadSortColumn;
startX: number;
}
const downloadColumnPointerGestures = new WeakMap<HTMLDivElement, DownloadColumnPointerGesture>();
type HosterLabel = ReturnType<typeof formatHosterLabel>;
function HosterLabelContent({ label }: { label: HosterLabel }): ReactElement {
@@ -54,7 +64,7 @@ export const downloadColumnDefinitions: Record<string, { label: string; width: s
size: { label: "Geladen / Größe", width: "minmax(var(--downloads-size-min, 140px), 1.1fr)", sortable: "size" },
progress: { label: "Fortschritt", width: "minmax(var(--downloads-progress-min, 105px), 0.85fr)", sortable: "progress" },
hoster: { label: "Hoster", width: "minmax(var(--downloads-hoster-min, 90px), 0.85fr)", sortable: "hoster" },
account: { label: "Service", width: "minmax(var(--downloads-service-min, 90px), 0.85fr)" },
account: { label: "Service", width: "minmax(var(--downloads-service-min, 90px), 0.85fr)", sortable: "service" },
prio: { label: "Priorität", width: "minmax(var(--downloads-priority-min, 85px), 0.8fr)" },
status: { label: "Status", width: "minmax(var(--downloads-status-min, 210px), 1.2fr)" },
speed: { label: "Geschwindigkeit", width: "minmax(var(--downloads-speed-min, 120px), 1fr)" },
@@ -64,10 +74,16 @@ export const downloadColumnDefinitions: Record<string, { label: string; width: s
export type AvailabilityState = "online" | "partial" | "offline" | "checking";
function effectiveItemOnlineStatus(item: DownloadItem): DownloadItem["onlineStatus"] {
return item.onlineStatus
?? (item.status === "downloading" || item.status === "integrity_check" || item.status === "completed" ? "online" : undefined);
}
export function getAvailabilitySummary(items: DownloadItem[]): { online: number; total: number; state: AvailabilityState } {
const total = items.length;
const online = items.filter((item) => item.onlineStatus === "online").length;
const offline = items.filter((item) => item.onlineStatus === "offline").length;
const availability = items.map(effectiveItemOnlineStatus);
const online = availability.filter((status) => status === "online").length;
const offline = availability.filter((status) => status === "offline").length;
if (total > 0 && online === total) return { online, total, state: "online" };
if (total > 0 && offline === total) return { online, total, state: "offline" };
if (total > 0 && online + offline === total) return { online, total, state: "partial" };
@@ -216,7 +232,7 @@ function itemCell(item: DownloadItem, column: string, sessionRunning: boolean):
? error && error !== displayStatus && !displayStatus.includes(error) ? `${displayStatus}${retrySuffix}\n${error}` : `${displayStatus}${retrySuffix}`
: error;
if (column === "name") {
return <span className="downloads-cell downloads-name-cell downloads-copyable" title={item.fileName}><span className={`downloads-link-state ${item.onlineStatus ?? "unknown"}`} />{item.fileName}</span>;
return <span className="downloads-cell downloads-name-cell downloads-copyable" title={item.fileName}><span className={`downloads-link-state ${effectiveItemOnlineStatus(item) ?? "unknown"}`} />{item.fileName}</span>;
}
if (column === "size") {
const total = item.totalBytes || item.downloadedBytes || 0;
@@ -241,7 +257,8 @@ function itemCell(item: DownloadItem, column: string, sessionRunning: boolean):
if (column === "status") return <DownloadStatusCell status={displayStatus} title={statusTitle} />;
if (column === "speed") return <span className="downloads-cell">{item.speedBps > 0 ? formatSpeedMbps(item.speedBps) : ""}</span>;
if (column === "availability") {
const state = item.onlineStatus === "online" ? "online" : item.onlineStatus === "offline" ? "offline" : "checking";
const effectiveStatus = effectiveItemOnlineStatus(item);
const state = effectiveStatus === "online" ? "online" : effectiveStatus === "offline" ? "offline" : "checking";
const text = state === "online" ? "Online" : state === "offline" ? "Offline" : item.onlineStatus === "checking" ? "Prüfung" : "Ungeprüft";
return <Availability online={state === "online" ? 1 : 0} total={1} state={state} text={text} />;
}
@@ -533,6 +550,11 @@ function moveColumnWithPointerActions(column: string, direction: -1 | 1, element
actions.onColumnPointerUp(column, pointerEvent(clientX));
}
function isColumnSortPointerTarget(target: EventTarget | null): boolean {
const closest = (target as { closest?: (selector: string) => Element | null } | null)?.closest;
return typeof closest === "function" && closest.call(target, ".downloads-column-sort") !== null;
}
export function DownloadsTableHeader({ actions, columnOrder, gridTemplate, sortColumn, sortDirection, selectedCount, visibleIds }: DownloadsTableHeaderProps): ReactElement {
const allSelected = visibleIds.length > 0 && selectedCount === visibleIds.length;
const mixedSelection = selectedCount > 0 && selectedCount < visibleIds.length;
@@ -550,22 +572,41 @@ export function DownloadsTableHeader({ actions, columnOrder, gridTemplate, sortC
data-download-column={column}
key={column}
onContextMenu={(event) => { event.preventDefault(); event.stopPropagation(); actions.onColumnContextMenu(column, event.clientX, event.clientY); }}
onPointerCancel={(event) => actions.onColumnPointerCancel(column, event)}
onPointerCancel={(event) => {
downloadColumnPointerGestures.delete(event.currentTarget);
actions.onColumnPointerCancel(column, event);
}}
onPointerDown={(event) => {
if (event.button !== 0 || !event.isPrimary) return;
if (event.currentTarget.closest<HTMLElement>(".downloads-table")?.classList.contains("is-column-drag-settling")) return;
downloadColumnPointerGestures.set(event.currentTarget, {
dragged: false,
pointerId: event.pointerId,
sortColumn: definition.sortable && isColumnSortPointerTarget(event.target) ? definition.sortable : undefined,
startX: event.clientX
});
event.currentTarget.setPointerCapture(event.pointerId);
actions.onColumnPointerDown(column, event);
}}
onPointerMove={(event) => actions.onColumnPointerMove(column, event)}
onPointerMove={(event) => {
const gesture = downloadColumnPointerGestures.get(event.currentTarget);
if (gesture?.pointerId === event.pointerId && Math.abs(event.clientX - gesture.startX) >= DOWNLOAD_COLUMN_DRAG_THRESHOLD_PX) gesture.dragged = true;
actions.onColumnPointerMove(column, event);
}}
onPointerUp={(event) => {
const gesture = downloadColumnPointerGestures.get(event.currentTarget);
if (gesture?.pointerId === event.pointerId) {
if (Math.abs(event.clientX - gesture.startX) >= DOWNLOAD_COLUMN_DRAG_THRESHOLD_PX) gesture.dragged = true;
downloadColumnPointerGestures.delete(event.currentTarget);
}
if (event.currentTarget.hasPointerCapture(event.pointerId)) event.currentTarget.releasePointerCapture(event.pointerId);
actions.onColumnPointerUp(column, event);
if (gesture?.pointerId === event.pointerId && gesture.sortColumn && !gesture.dragged) actions.onSortColumn(gesture.sortColumn);
}}
role="columnheader"
>
{definition.sortable
? <button className="downloads-column-sort" onClick={() => actions.onSortColumn(definition.sortable!)} type="button">{definition.label}{sortColumn === definition.sortable ? sortDirection === "asc" ? " ↑" : " ↓" : ""}</button>
? <button className="downloads-column-sort" onClick={(event) => { if (event.detail === 0) actions.onSortColumn(definition.sortable!); }} type="button">{definition.label}{sortColumn === definition.sortable ? sortDirection === "asc" ? " ↑" : " ↓" : ""}</button>
: <span className="downloads-column-label">{definition.label}</span>}
<span aria-label={`${definition.label} verschieben`} className="downloads-column-move-controls" onPointerDown={(event) => event.stopPropagation()} role="group">
{index > 0 ? <button aria-label={`${definition.label} nach links verschieben`} onClick={(event) => { event.stopPropagation(); const element = event.currentTarget.closest<HTMLDivElement>(".downloads-column-header"); if (element) moveColumnWithPointerActions(column, -1, element, actions); }} type="button"></button> : null}
+9 -3
View File
@@ -8414,7 +8414,7 @@ describe("download manager", () => {
expect(snap.settings.providerDailyUsageBytes || {}).toEqual({});
});
it("resets extraction state atomically for selected package items", () => {
it("resets extraction state without discarding definitive link availability", async () => {
const root = fs.mkdtempSync(path.join(os.tmpdir(), "rd-dm-"));
tempDirs.push(root);
const session = emptySession();
@@ -8470,7 +8470,7 @@ describe("download manager", () => {
createStoragePaths(path.join(root, "state"))
);
manager.resetItems(itemIds);
await manager.resetItems(itemIds);
const snapshot = manager.getSnapshot().session;
expect(snapshot.packages[packageId]).toEqual(expect.objectContaining({
@@ -8486,9 +8486,15 @@ describe("download manager", () => {
progressPercent: 0,
lastError: "",
fullStatus: "Wartet",
onlineStatus: undefined
onlineStatus: "online"
}));
}
await manager.resetPackage(packageId);
const packageSnapshot = manager.getSnapshot().session;
for (const itemId of itemIds) {
expect(packageSnapshot.items[itemId].onlineStatus).toBe("online");
}
});
it("does not freeze the scheduler when a reset item's old task is parked in a non-abort-observing await", async () => {
+35
View File
@@ -0,0 +1,35 @@
import { describe, expect, it } from "vitest";
import { sortPackageOrderByService } from "../src/renderer/App";
describe("download package sorting", () => {
it("sorts the Service column by its visible provider labels", () => {
const packages = {
a: { id: "a", itemIds: ["item-a"] },
b: { id: "b", itemIds: ["item-b"] }
} as any;
const items = {
"item-a": { provider: "realdebrid", providerLabel: "Real-Debrid" },
"item-b": { provider: "debridlink", providerLabel: "Debrid-Link" }
} as any;
expect(sortPackageOrderByService(["a", "b"], packages, items, false)).toEqual(["b", "a"]);
expect(sortPackageOrderByService(["a", "b"], packages, items, true)).toEqual(["a", "b"]);
});
it("uses filtered visible services instead of hidden package items", () => {
const packages = {
a: { id: "a", itemIds: ["a-hidden", "a-visible"] },
b: { id: "b", itemIds: ["b-visible"] }
} as any;
const items = {
"a-visible": { provider: "debridlink", providerLabel: "ZZZ Visible" },
"a-hidden": { provider: "realdebrid", providerLabel: "AAA Hidden" },
"b-visible": { provider: "realdebrid", providerLabel: "Real-Debrid" }
} as any;
expect(sortPackageOrderByService(["b", "a"], packages, items, false, {
a: [items["a-visible"]],
b: [items["b-visible"]]
})).toEqual(["b", "a"]);
});
});
+122 -1
View File
@@ -751,6 +751,35 @@ function findButton(node: ReactNode, label: string): ReactElement {
return findElement(node, (element) => element.type === "button" && element.props.children === label);
}
function dispatchColumnSortPointerGesture(header: ReactElement, label: string, clientXs: readonly number[], deliverPointerClick: boolean): void {
const startX = clientXs[0];
const endX = clientXs[clientXs.length - 1];
if (startX === undefined || endX === undefined) throw new Error("Pointer gesture requires coordinates");
const columnHeader = findElement(header, (element) => element.props["data-download-column"] === "name");
const sortButton = findElement(columnHeader, (element) => element.type === "button" && String(element.props.children).startsWith(label));
const capturedPointers = new Set<number>();
const currentTarget = {
closest: () => null,
hasPointerCapture: (pointerId: number) => capturedPointers.has(pointerId),
releasePointerCapture: (pointerId: number) => capturedPointers.delete(pointerId),
setPointerCapture: (pointerId: number) => capturedPointers.add(pointerId)
};
const target = { closest: (selector: string) => selector === ".downloads-column-sort" ? {} : null };
const event = (clientX: number) => ({
button: 0,
clientX,
currentTarget,
isPrimary: true,
pointerId: 7,
preventDefault: () => {},
target
});
columnHeader.props.onPointerDown(event(startX));
clientXs.slice(1, -1).forEach((clientX) => columnHeader.props.onPointerMove(event(clientX)));
columnHeader.props.onPointerUp(event(endX));
if (deliverPointerClick) sortButton.props.onClick({ detail: 1 });
}
function withRuntime(input: DownloadsModelInput, overrides: Record<string, unknown> = {}) {
return {
...buildDownloadsViewModel(input),
@@ -1326,6 +1355,23 @@ describe("download table row contracts", () => {
expect(getAvailabilitySummary([
item("unknown-a", "package-a", "queued", { onlineStatus: undefined })
])).toEqual({ online: 0, total: 1, state: "checking" });
expect(getAvailabilitySummary([
item("active-a", "package-a", "downloading", { onlineStatus: undefined })
])).toEqual({ online: 1, total: 1, state: "online" });
});
it("shows an actively downloading item as online even without a stored availability result", () => {
const html = renderToStaticMarkup(ItemRowContent({
actions: createActions(),
columnOrder: ["name", "availability"],
gridTemplate: "200px 150px",
item: item("active-availability", "package-a", "downloading", { onlineStatus: undefined }),
selected: false
}));
expect(html).toContain(">Online</span>");
expect(html).not.toContain(">Ungeprüft</span>");
expect(html).toContain('class="downloads-link-state online"');
});
it("shows reset package availability as one compact unchecked label", () => {
@@ -1582,7 +1628,7 @@ describe("download table row contracts", () => {
expect(html).toMatch(/aria-sort="descending"[^>]*data-download-column="name"/);
expect(html).toMatch(/aria-sort="none"[^>]*data-download-column="size"/);
expect(html).not.toMatch(/aria-sort="[^"]+"[^>]*data-download-column="account"/);
expect(html).toMatch(/aria-sort="none"[^>]*data-download-column="account"/);
expect(moveLeft.props.type).toBe("button");
expect(calls).toEqual([
["down", "size", 250],
@@ -1591,6 +1637,81 @@ describe("download table row contracts", () => {
]);
});
it.each([
{ clientXs: [100, 100], deliverPointerClick: false },
{ clientXs: [100, 104, 104], deliverPointerClick: true }
])("sorts exactly once when a captured pointer gesture stays below the drag threshold", ({ clientXs, deliverPointerClick }) => {
const sorted: string[] = [];
const header = DownloadsTableHeader({
actions: createActions({ onSortColumn: (column) => sorted.push(column) }),
columnOrder: ["name", "size"],
gridTemplate: "200px 100px",
selectedCount: 0,
sortColumn: "name",
sortDirection: "asc",
visibleIds: []
});
dispatchColumnSortPointerGesture(header, "Name", clientXs, deliverPointerClick);
expect(sorted).toEqual(["name"]);
});
it("never sorts when a pointer gesture reaches the drag threshold", () => {
const sorted: string[] = [];
const header = DownloadsTableHeader({
actions: createActions({ onSortColumn: (column) => sorted.push(column) }),
columnOrder: ["name", "size"],
gridTemplate: "200px 100px",
selectedCount: 0,
sortColumn: "name",
sortDirection: "asc",
visibleIds: []
});
dispatchColumnSortPointerGesture(header, "Name", [100, 105, 101], true);
expect(sorted).toEqual([]);
});
it("keeps sortable headers keyboard operable", () => {
const sorted: string[] = [];
const header = DownloadsTableHeader({
actions: createActions({ onSortColumn: (column) => sorted.push(column) }),
columnOrder: ["name", "size"],
gridTemplate: "200px 100px",
selectedCount: 0,
sortColumn: "name",
sortDirection: "asc",
visibleIds: []
});
const sortButton = findElement(header, (element) => element.type === "button" && String(element.props.children).startsWith("Name"));
sortButton.props.onClick({ detail: 0 });
expect(sorted).toEqual(["name"]);
});
it("exposes Service as a sortable column header", () => {
const sorted: string[] = [];
const header = DownloadsTableHeader({
actions: createActions({ onSortColumn: (column) => sorted.push(column) }),
columnOrder: ["account"],
gridTemplate: "100px",
selectedCount: 0,
sortColumn: "service" as any,
sortDirection: "desc",
visibleIds: []
});
const serviceHeader = findElement(header, (element) => element.props["data-download-column"] === "account");
const sortButton = findElement(serviceHeader, (element) => element.type === "button");
sortButton.props.onClick({ detail: 0 });
expect(serviceHeader.props["aria-sort"]).toBe("descending");
expect(sorted).toEqual(["service"]);
});
it("opens the column menu without letting the same context event close it again", () => {
const calls: Array<[string, number, number]> = [];
const header = DownloadsTableHeader({