fix(downloads): Retry draws the refresh glyph, not Play (E28 S4)

The first UI-review run (Downloads) found a failed row whose Retry wore the
Play glyph in the row and its menu, promising a video. DESIGN.md gains
'a glyph means one thing' and a log row.
This commit is contained in:
2026-09-27 06:35:40 +02:00
parent bd6aaa1e43
commit ae9c248987
4 changed files with 29 additions and 2 deletions
+4
View File
@@ -216,6 +216,9 @@ Also in force:
- A single-select row of filter chips goes through `FilterChipGroup` (its options are `Chip`s).
- A button that starts slow work shows `loading` (a spinner, `aria-busy`) and can't be pressed twice.
[Nielsen #1]
- **A glyph means one thing.** Play (▷) starts playback, or resumes a paused transfer; a retry is the
refresh arrow (`RefreshCw`); a reset or revert is the counter-clockwise arrow (`RotateCcw`). A failed
download's Retry had worn the Play glyph, which promised a video. [Nielsen #4]
## Surfaces and page chrome — _Decided_ (batch B)
@@ -613,3 +616,4 @@ pick a density step; it never changes the anatomy or loses an action. [Nielsen #
| 2026-09-27 | Conformance check (S3g) | A four-step check before a UI change is done: primitive at a named rung, the chapter re-read, the rendered page measured by kind and look, every state seen | A reviewer's eye per sprint | The S1 probe found 69 button looks; after S3 every control kind is drawn by its primitive, and the check keeps a new look from arriving unnoticed |
| 2026-09-27 | Segmented rung | `SegmentedToggle` defaults to the toolbar rung (28, `text-xs`); 24 only for a panel's captioned match toggle | The small default | Two toolbars had inherited 10px type from the default beside 28px buttons |
| 2026-09-27 | Copy rule (S3g) | One name per feature (the rail may shorten it); four verbs for four meanings; sentence case with the app's places capitalised; "…" when a command asks first; one-sentence messages without a stop; curly quotes; dates relative in lists with the exact minute on hover, three absolute forms; units from Intl, short | Word-for-word names everywhere; the verbs as they were; all lower case; no "…"; always a stop; always absolute dates; long or compact units | The copy survey found 7 EN and 6 HU double names, 22 Delete against 27 Remove, five date shapes and three spellings of a minute; the owner picked every recommended option |
| 2026-09-27 | One glyph, one meaning (S4) | Play only for playback or resuming a paused transfer; Retry = `RefreshCw`; reset / revert = `RotateCcw` | Retry drawn with Play | The first UI-review run (Downloads) found a failed row whose Retry showed ▷ in the row and its menu |
@@ -132,6 +132,22 @@ describe("DownloadCenter · the queue row", () => {
]);
});
it("draws Retry as 'do it again', never the Play glyph (row and menu)", async () => {
mocks.jobs = [job(1, "error"), job(2, "paused")];
mount();
const glyph = (el: Element) => el.querySelector("svg")?.getAttribute("class") ?? "";
const retry = rowOf("Clip 1").querySelector('[aria-label="downloads.actions.retry"]')!;
expect(glyph(retry)).toContain("lucide-refresh-cw");
// A paused job resumes: that one keeps the transport glyph.
const resume = rowOf("Clip 2").querySelector('[aria-label="downloads.actions.resume"]')!;
expect(glyph(resume)).toContain("lucide-play");
await openMenu(() => fireEvent.contextMenu(rowOf("Clip 1")));
const row = screen
.getAllByRole("menuitem", { hidden: true })
.find((b) => b.textContent === "downloads.actions.retry")!;
expect(glyph(row)).toContain("lucide-refresh-cw");
});
it("closes on a second press of the same '…'", async () => {
mocks.jobs = [job(1, "running")];
mount();
+7 -1
View File
@@ -9,6 +9,7 @@ import {
Play,
PlayCircle,
Plus,
RefreshCw,
Settings2,
Share2,
UploadCloud,
@@ -225,7 +226,12 @@ export default function DownloadCenter() {
: "downloads.actions.resume",
)}
>
<Play className="w-4 h-4" />
{/* Retry is "do it again", not playback: the Play glyph promised a video. */}
{job.status === "error" ? (
<RefreshCw className="w-4 h-4" />
) : (
<Play className="w-4 h-4" />
)}
</IconBtn>
)}
</DownloadRow>
@@ -9,6 +9,7 @@ import {
Pencil,
Play,
PlayCircle,
RefreshCw,
RotateCcw,
Scissors,
Share2,
@@ -139,7 +140,7 @@ export function useDownloadActions({
label: t(
job.status === "error" ? "downloads.actions.retry" : "downloads.actions.resume",
),
icon: icon(Play),
icon: icon(job.status === "error" ? RefreshCw : Play),
onSelect: () => act.mutate({ id: job.id, op: "resume" }),
},
],