Jonathan
9561e6e196
Replace the misleading 6-micro-step progress bar with three honest
phases (Searching -> Downloading -> Finishing). Downloading now shows
a live determinate percentage sourced from job.downloadProgress (Slice
A), with a "NN% · done/total tracks" caption when the track count is
known. Searching and Finishing stay indeterminate.
- status.ts: describeJob collapses to {label, kind}; drop step/totalSteps
and the STAGES array.
- progress-bar.tsx: ProgressBar takes {kind, indeterminate?, percent?,
caption?} instead of step/total/stageLabel.
- job-row.tsx: JobRow takes a `bar?: ReactNode` slot instead of
step/total/indeterminate/stageLabel props.
- queue.tsx: builds the per-state bar + meta; downloading meta drops
the track count (now shown in the bar). Retry button + error note
from the retry feature preserved exactly.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
36 lines
865 B
TypeScript
36 lines
865 B
TypeScript
import type { Kind } from "./status";
|
|
|
|
/** A thin ruled progress bar. `indeterminate` for open-ended phases (searching,
|
|
* finishing); otherwise a determinate fill to `percent` with a live readout. */
|
|
export function ProgressBar({
|
|
kind,
|
|
indeterminate,
|
|
percent,
|
|
caption,
|
|
}: {
|
|
kind: Kind;
|
|
indeterminate?: boolean;
|
|
percent?: number;
|
|
caption?: string;
|
|
}) {
|
|
if (indeterminate) {
|
|
return (
|
|
<div className="prog">
|
|
<div className="bar indet">
|
|
<span />
|
|
</div>
|
|
<div className="pct muted">{caption ?? "…"}</div>
|
|
</div>
|
|
);
|
|
}
|
|
const pct = Math.min(100, Math.max(0, percent ?? 0));
|
|
return (
|
|
<div className="prog">
|
|
<div className="bar">
|
|
<span style={{ width: `${pct}%` }} />
|
|
</div>
|
|
<div className="pct">{caption ?? `${Math.round(percent ?? 0)}%`}</div>
|
|
</div>
|
|
);
|
|
}
|