feat(web): three-phase progress with live download % on The Floor

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>
This commit is contained in:
Jonathan
2026-07-13 23:29:33 +02:00
parent 9d5e1ff58a
commit 9561e6e196
5 changed files with 52 additions and 61 deletions
+3 -14
View File
@@ -1,6 +1,5 @@
import type { ReactNode } from "react";
import type { Kind } from "./status";
import { ProgressBar } from "./progress-bar";
import { StatusChip } from "./status-chip";
// Map the severity kind to the row's visual class (stripe/bar color).
@@ -15,23 +14,17 @@ export function JobRow({
album,
kind,
label,
step,
total,
meta,
note,
indeterminate,
stageLabel,
bar,
}: {
artist: string;
album: string;
kind: Kind;
label: string;
step: number;
total: number;
meta?: ReactNode;
note?: ReactNode;
indeterminate?: boolean;
stageLabel?: string;
bar?: ReactNode;
}) {
return (
<article className={`job ${rowClass(kind)}`}>
@@ -41,11 +34,7 @@ export function JobRow({
{album} <span className="artist">· {artist}</span>
</h3>
{meta ? <div className="meta">{meta}</div> : null}
{note ? (
<div className="note">{note}</div>
) : kind !== "attention" ? (
<ProgressBar kind={kind} step={step} total={total} indeterminate={indeterminate} stageLabel={stageLabel} />
) : null}
{note ? <div className="note">{note}</div> : kind !== "attention" ? bar : null}
</div>
<StatusChip kind={kind} label={label} />
</article>