From 0d2000f3073ad8479a47807da0e3823cc6a4cf33 Mon Sep 17 00:00:00 2001 From: debont80 Date: Tue, 30 Jun 2026 15:29:19 -0400 Subject: [PATCH] Fix L106/L107/L122: unify refresh icons, spinner size, busy-button feedback MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit L106: Established the convention — ArrowClockwise = retry/redo a local action (retry-all, re-download, retry queue item); ArrowSync = network sync/ update (sync sources, reindex, check/apply updates). Flipped the two misclassified sites (LibraryView "check for new" sync, SettingsView "Update yt-dlp") to ArrowSync and dropped the now-unused imports. L107: QueueItem queued-row Spinner was size="extra-tiny"; every other spinner is "tiny". Standardized to "tiny". L122: The app-update and yt-dlp-update buttons showed "Checking…"/"Updating…" in the label AND a separate sibling Spinner. Folded the spinner into the button icon (icon swaps to Spinner while busy), matching DownloadBar/ LibraryView, and removed the redundant sibling Spinner. typecheck + 242 tests + eslint green. Co-Authored-By: Claude Opus 4.8 --- CODE-AUDIT.md | 6 +++--- src/renderer/src/components/LibraryView.tsx | 3 +-- src/renderer/src/components/QueueItem.tsx | 2 +- src/renderer/src/components/SettingsView.tsx | 11 ++++++----- 4 files changed, 11 insertions(+), 11 deletions(-) diff --git a/CODE-AUDIT.md b/CODE-AUDIT.md index c0f4129..8352726 100644 --- a/CODE-AUDIT.md +++ b/CODE-AUDIT.md @@ -587,9 +587,9 @@ token system + shared primitives (UI/SIMP — high value, larger effort) · i18n [store/downloads.ts](src/renderer/src/store/downloads.ts); components import it from both. Single source it. *Fixed: the store now imports `MediaKind` from `@shared/ipc` and re-exports it, so the duplicate local `type MediaKind` is gone while existing `import { MediaKind } from '../store/downloads'` sites still resolve.* -- [ ] **L106 — Refresh icons used interchangeably.** `ArrowClockwiseRegular` (retry, re-download, +- [x] **L106 — Refresh icons used interchangeably.** `ArrowClockwiseRegular` (retry, re-download, check-for-new, update-yt-dlp) vs `ArrowSyncRegular` (re-index, check-for-updates) for the same "redo/refresh" idea. -- [ ] **L107 — Spinner sizes mixed** — `"tiny"` almost everywhere, `"extra-tiny"` for the QueueItem queued row. +- [x] **L107 — Spinner sizes mixed** — `"tiny"` almost everywhere, `"extra-tiny"` for the QueueItem queued row. - [x] **L108 — Main window sets no explicit `title`** (relies on the document ``). - [ ] **L109 — Versions auto-load with no indicator.** yt-dlp/ffmpeg versions in About just appear; only the manual "Check" button shows a spinner. @@ -612,7 +612,7 @@ token system + shared primitives (UI/SIMP — high value, larger effort) · i18n other card surface is a bespoke styled `<div>`. - [ ] **L121 — Raw scrim literal.** CommandPalette backdrop is `rgba(0,0,0,0.32)` (the only raw rgba in the renderer), identical in light/dark — low contrast over a dark UI. -- [ ] **L122 — "Checking…" indicated twice** — the Settings update button changes its label to "Checking…" *and* a separate Spinner renders beside it. +- [x] **L122 — "Checking…" indicated twice** — the Settings update button changes its label to "Checking…" *and* a separate Spinner renders beside it. - [ ] **L123 — `Caption1` is overloaded** for hints, metadata, counts, and timestamps — one size doing four jobs. - [ ] **L124 — `Body1` vs `Text` role overlap** — `Body1` appears only in empty states/onboarding/gate; `Text` carries titles; the split isn't principled. - [ ] **L125 — Icon sizing has two syntaxes** — px strings (`fontSize: '20px'`) on icon *containers* vs numeric `fontSize={28}` on inline icons. diff --git a/src/renderer/src/components/LibraryView.tsx b/src/renderer/src/components/LibraryView.tsx index 23b8a80..1cebc47 100644 --- a/src/renderer/src/components/LibraryView.tsx +++ b/src/renderer/src/components/LibraryView.tsx @@ -16,7 +16,6 @@ import { import { SearchRegular, ArrowSyncRegular, - ArrowClockwiseRegular, DeleteRegular, ArrowDownloadRegular, ChevronDownRegular, @@ -551,7 +550,7 @@ export function LibraryView(): React.JSX.Element { <Button size="small" appearance="secondary" - icon={syncing ? <Spinner size="tiny" /> : <ArrowClockwiseRegular />} + icon={syncing ? <Spinner size="tiny" /> : <ArrowSyncRegular />} onClick={onCheckNew} disabled={syncing || watchedCount === 0} > diff --git a/src/renderer/src/components/QueueItem.tsx b/src/renderer/src/components/QueueItem.tsx index 803b14c..e5a650b 100644 --- a/src/renderer/src/components/QueueItem.tsx +++ b/src/renderer/src/components/QueueItem.tsx @@ -204,7 +204,7 @@ export const QueueItem = memo(function QueueItem({ {item.status === 'queued' && ( <div className={styles.progressRow}> - <Spinner size="extra-tiny" /> + <Spinner size="tiny" /> <Caption1 className={styles.stats}>Waiting to start…</Caption1> </div> )} diff --git a/src/renderer/src/components/SettingsView.tsx b/src/renderer/src/components/SettingsView.tsx index 45ecac2..45649ab 100644 --- a/src/renderer/src/components/SettingsView.tsx +++ b/src/renderer/src/components/SettingsView.tsx @@ -25,7 +25,6 @@ import { GlobeRegular, CookiesRegular, CodeRegular, - ArrowClockwiseRegular, DocumentArrowDownRegular, DocumentArrowUpRegular, BugRegular, @@ -1039,13 +1038,12 @@ export function SettingsView(): React.JSX.Element { <div className={styles.folderRow}> <Button - icon={<ArrowSyncRegular />} + icon={appChecking ? <Spinner size="tiny" /> : <ArrowSyncRegular />} onClick={checkAppUpdate} disabled={appChecking || appDownloading} > {appChecking ? 'Checking…' : 'Check for updates'} </Button> - {appChecking && <Spinner size="tiny" />} </div> {(updateToken.trim() !== '' || !!appUpdError) && ( @@ -1175,10 +1173,13 @@ export function SettingsView(): React.JSX.Element { /> </Field> <div className={styles.folderRow}> - <Button icon={<ArrowClockwiseRegular />} onClick={runUpdate} disabled={updating}> + <Button + icon={updating ? <Spinner size="tiny" /> : <ArrowSyncRegular />} + onClick={runUpdate} + disabled={updating} + > {updating ? 'Updating…' : 'Update yt-dlp'} </Button> - {updating && <Spinner size="tiny" />} </div> {updateResult?.ok && ( <Text style={{ fontFamily: tokens.fontFamilyMonospace, whiteSpace: 'pre-wrap' }}>