feat(downloads): let the download progress toast be minimized

The download progress toast sits in the bottom-right corner on top of the
comment composer, blocking the voice-recording button and the comment box for
the whole duration of a download.

Render it through toast.custom so it can be collapsed to a small pill (percent
+ spinner) and expanded again while the download keeps running. The minimized
choice sticks for the rest of the session. The sonner <li> is click-through, so
only the panel itself covers the controls underneath.

Also dismiss the panel on failure — it had duration: Infinity and used to stay
on screen forever after an error.
This commit is contained in:
yusufipk
2026-07-25 16:56:29 +07:00
parent a14eb9fb84
commit 481728b93d
4 changed files with 195 additions and 26 deletions
+9 -2
View File
@@ -40,10 +40,17 @@ export function formatBytes(bytes: number): string {
return `${(mb / 1024).toFixed(2)} GB`;
}
/** Percentage done, or null when the server didn't send a Content-Length. */
export function downloadProgressPercent(progress: DownloadProgress): number | null {
const { receivedBytes, totalBytes } = progress;
if (!totalBytes || totalBytes <= 0) return null;
return Math.min(100, Math.floor((receivedBytes / totalBytes) * 100));
}
export function downloadProgressLabel(progress: DownloadProgress): string {
const { receivedBytes, totalBytes } = progress;
if (totalBytes && totalBytes > 0) {
const pct = Math.min(100, Math.floor((receivedBytes / totalBytes) * 100));
const pct = downloadProgressPercent(progress);
if (pct !== null && totalBytes) {
return `${pct}% · ${formatBytes(receivedBytes)} / ${formatBytes(totalBytes)}`;
}
return formatBytes(receivedBytes);