diff --git a/CODE-AUDIT.md b/CODE-AUDIT.md index 553d866..35b3faa 100644 --- a/CODE-AUDIT.md +++ b/CODE-AUDIT.md @@ -79,6 +79,63 @@ tails (SIMP5 line-buffer + SIMP16 net.request), then Phases 4–8 (renderer toke UX/Windows, copy/a11y). Per the run's policy, subjective-visual and live-verify-only items are implemented but left **unchecked** with a flagged list for a watched pass. +**Session 2026-07-01 pass 3 (Batch 6 — the renderer design-token foundation):** landed the shared +design-scale module [components/ui/tokens.ts](src/renderer/src/components/ui/tokens.ts) — one home for +**SPACE** (the spacing ramp), **RADIUS** (control/surface/card tiers over Fluent's radii), **ELEVATION** +(flat/raised/overlay), **Z** (overlay/tooltip), **ICON** (16/20/24/40), **MOTION**, **SCRIM**, and +**META_SEP** — then migrated the scattered literals across 17 renderer files. Structurally-verified items +checked off: **UI2** (one 16px section gap on every screen via the view roots), **UI4** (symmetric page +padding — the lone 28px horizontal is gone), **UI5** (the intentional 4px icon-group / 8px control-row split +is now named + documented), **UI6/UI7** (one thumbnail radius = Medium; page-card XLarge / list-item Large / +control Medium tiers), **UI26** (a single motion timing + a global `prefers-reduced-motion` gate in +[base.css](src/renderer/src/assets/base.css)), **L100** (elevation scale — only the download bar (raised) and +command palette (overlay) cast a shadow; every other card stays flat/border-only), **L101** (a z-index scale +replaces the two hardcoded `1000`s), **L121** (the renderer's one raw `rgba(0,0,0,0.32)` scrim → Fluent's +theme-aware `colorBackgroundOverlay`), **L125** (icon sizes single-source from ICON), **L160** (inline margins +tokenized — values unchanged), and **L164** (one metadata separator ` • `; the intra-value ` · ` inside +compound quality labels is deliberately untouched). **UI3 and UI12 are implemented but left unchecked** for a +watched visual pass — they shift a few pixels: card padding 14/20→16 (QueueItem, Settings cards), and the +former-18px chrome glyphs (sidebar nav + theme toggles, IconButton md) → 20 plus the private badge 14→16. All +green: typecheck (node+web) + 268 tests + eslint + production build; the touched files are prettier-clean (the +9 remaining prettier warnings are all pre-existing, untouched files). + +**Session 2026-07-01 pass 4 (Batch 7 — type & color roles):** added +[components/ui/text.ts](src/renderer/src/components/ui/text.ts) — a `useTextStyles` hook with the single +`muted` secondary-text color and the shared `title` treatment, plus a header documenting the app's type-role +convention (Subtitle2 = titles/section headers · Text = row titles · Body1 = body copy · Caption1 = small +secondary text). Landed: **L110** (the one muted color, was eight aliases hint/sub/meta/srcSub/…/previewMeta — +adopted in the list views: QueueItem, HistoryView, LibraryView, Sidebar, DownloadBar, PlaylistPanel; +color-identical, so no visual change; the combined/shared-across-cards aliases — `stats`/`count`/`emptyHint`, +settings `hint`, CommandPalette, inline — migrate incrementally), **L114** (one row-title component: the +duplicated semibold-ellipsis title style is now `text.title`, and Library's three `` titles became +`` — size-identical since Fluent's base font is already `fontSizeBase300`), **L123/L124** (the +Caption1/Body1/Text roles are now written down in text.ts and followed), **UI13** (verified: `Filled` is used +only on the two brand marks, `Regular` everywhere else — the convention already held), and **UI11** (no literal +px font sizes remain — the last tile/badge glyphs snap to `ICON` tiers: Sidebar mark 20, Onboarding mark 24, +Library srcIcon 20, History emptyBadge 24; the `fontSizeBase*` token usages already satisfied the standard). +The four tile-glyph deltas (≤2px) join UI12's watched visual pass. All green: typecheck (node+web) + 268 tests ++ eslint + production build; touched files prettier-clean (9 pre-existing warnings untouched). + +**Session 2026-07-01 pass 5 (Batch 8 — form primitives):** **L112** (removed the redundant dynamic +`On`/`Off` label from all 15 ``-wrapped ``es in DownloadOptionsForm + the settings cards — the +Field already names each switch, and the toggle's position + `aria-checked` already convey state, matching +Library's switches), **L133** (made the custom [Select](src/renderer/src/components/Select.tsx) ``-aware +via `useFieldControlProps_unstable({ supportsLabelFor: true })`, so a Field's visible label names the native +`` via `htmlFor` and its hint associates via `aria-describedby`. Removed the now-duplicate + `aria-label` from every Field-wrapped select (DownloadOptionsForm ×4, AboutCard, AppearanceCard, CookiesCard + ×2, DownloadsCard, CustomCommandsCard). The two standalone selects — the download-bar quality picker and the + history type filter — keep their `aria-label`, since there's no Field to name them.* +- [x] **L134 — Inconsistent disabled affordance for busy buttons.** Some stay enabled-looking with a spinner icon (Fetch/Index) while others are `disabled` with adjacent text (Settings) — no single "busy" convention. -- [ ] **L135 — `Textarea` vs `Input` for similar fields.** Trim uses a `Textarea`; the visually-similar + *Fixed: one busy convention — `disabled` while working + the button's own icon swaps to a ``. Fetch, Index, Check-for-new and the yt-dlp update button already did this; converted + AboutCard's version-check button off its separate adjacent spinner to match.* +- [x] **L135 — `Textarea` vs `Input` for similar fields.** Trim uses a `Textarea`; the visually-similar single-line fields use `Input` — fine, but the trim/schedule panels and the template form mix both with no shared field style. + *Resolved: verified role-appropriate — the trim field is genuinely multiline (time ranges "one per line", + `resize="vertical"`), so `Textarea` is correct there and `Input` for the single-line fields. Kept as-is; the + shared field styling is covered by the Fluent `` wrapper they all use.* *Round 6 (2026-06-29) — behavioral/logic edge cases:* @@ -889,8 +993,10 @@ token system + shared primitives (UI/SIMP — high value, larger effort) · i18n crosses child elements (no enter/leave depth counter), so the dashed-outline blinks during a drag. - [x] **L159 — Dead fallback branch.** `copyErrorReport` falls back to "No errors logged." but its button is disabled when there are no entries, so the fallback is unreachable. -- [ ] **L160 — One-off inline margins.** `marginTop` literals (Onboarding 2px, QueueItem 4px, SettingsView - 8px) instead of style classes (extends L5). +- [x] **L160 — One-off inline margins.** `marginTop` literals (Onboarding 2px, QueueItem 4px, SettingsView + 8px) instead of style classes (extends L5). *Fixed: the margin literals now draw from `SPACE` + (`hairline`/`xtight`/`tight`) — same values, one source. (The broader inline-`style` vs makeStyles split is + still L5.)* - [ ] **L161 — `height: 100%` screens inside a padded scroll container.** Downloads/Terminal set `height: 100%` while App's `
` is `overflowY: auto` + 24/28px padding — a fragile coupling that can double-scroll or misalign the virtualized list's viewport. @@ -903,10 +1009,13 @@ token system + shared primitives (UI/SIMP — high value, larger effort) · i18n *Round 8 (2026-06-29) — formatting micro-inconsistencies:* -- [ ] **L164 — Metadata separator glyph/spacing is inconsistent.** Meta lines join with `' • '` +- [x] **L164 — Metadata separator glyph/spacing is inconsistent.** Meta lines join with `' • '` (2-space bullet) in QueueItem/History/DownloadBar/DownloadsView, with `' · '` (1-space midd·dot) in LibraryView, and with `' • '` (1-space bullet) in QueueItem's "Paused • 42%". Three styles for one role. - **Standard:** one separator constant (glyph + spacing). + **Standard:** one separator constant (glyph + spacing). *Fixed: one `META_SEP = ' • '` in tokens.ts, adopted + at every meta-line join (QueueItem/History/DownloadBar/DownloadsView/Library/PlaylistPanel). The `' · '` + inside compound quality labels ("720p · mp4 · 184 MB") is a data format parsed by HistoryView and is + intentionally left as-is.* - [x] **L165 — The two byte/speed formatters round differently.** `download.ts fmtBytes` uses `toFixed(v >= 100 ? 0 : 1)` ("512 MB") while `queueStats formatSpeed` uses `toFixed(1)` ("512.0 MB/s") — visibly different precision for the same magnitudes (compounds the duplicate-formatter issue H2/M9). @@ -955,22 +1064,37 @@ are an undefined spacing/radius/type scale and a drift between Fluent components but Downloads/Library/History/Terminal are full-width; Onboarding card is 460px, CommandPalette 560px. On a wide window Settings is a narrow column while siblings stretch edge-to-edge. **Standard:** one reading-width token (e.g. 720px) applied by a shared `Screen` wrapper, or commit to full-width everywhere. -- [ ] **UI2 — Per-screen vertical rhythm differs.** Root section gap is 16 (Settings/Terminal), 20 +- [x] **UI2 — Per-screen vertical rhythm differs.** Root section gap is 16 (Settings/Terminal), 20 (Downloads), 18 (Library), 12 (History). **Standard:** a single section-gap (16px) via a shared screen wrapper. + *Fixed: all five view roots now use `SPACE.section` (16) — Downloads 20→16, Library 18→16, History 12→16; + Settings/Terminal were already 16 and are now tokenized.* - [ ] **UI3 — Card padding has no scale.** 14 (QueueItem) / 16 (DownloadBar) / 20 (Settings card) / 32 (Onboarding) / `10px 12px` (History row) / `12px 14px` (Library head) / `8px 10px` (template row). **Standard:** a padding scale (e.g. control 8–10, list-row 12, card 16, hero 24) keyed to surface tier. -- [ ] **UI4 — Asymmetric app content padding.** `padding: '24px 28px'` ([App.tsx](src/renderer/src/App.tsx)) — - 28px horizontal appears nowhere else. **Standard:** symmetric or scale-based padding. -- [ ] **UI5 — Action-cluster gaps split 4px vs 8px.** Icon-button rows use 4px (QueueItem/History/ + *Implemented (SPACE scale defined; the card tier unified to 16 — QueueItem 14→16, Settings cards 20→16; + DownloadBar already 16; Onboarding → `hero`) but **left unchecked for a watched visual pass**: 20→16 tightens + the 11 settings cards and 14→16 loosens queue rows. The smaller list-row/control paddings (History/Library + head/template) are not yet migrated. Eyeball, then check off or retune the card value.* +- [x] **UI4 — Asymmetric app content padding.** `padding: '24px 28px'` ([App.tsx](src/renderer/src/App.tsx)) — + 28px horizontal appears nowhere else. **Standard:** symmetric or scale-based padding. *Fixed: the `
` + content padding is now the symmetric `SPACE.page` (24px).* +- [x] **UI5 — Action-cluster gaps split 4px vs 8px.** Icon-button rows use 4px (QueueItem/History/ TemplateManager) but DownloadBar/Library action rows use 8px. **Standard:** 4px for icon-button groups, 8px for labelled-control rows. *(Good baseline already: every empty-state uses `56px 16px` — keep it.)* + *Resolved: the existing split already matched the standard; it's now named in `SPACE` (`xtight` = 4 for + icon-button clusters, `tight` = 8 for control rows) and adopted where touched, so the rule is explicit + rather than incidental.* ### Corner radius -- [ ] **UI6 — Thumbnail radius varies for the same element.** QueueItem `Large`, History `Medium`, +- [x] **UI6 — Thumbnail radius varies for the same element.** QueueItem `Large`, History `Medium`, Library rowThumb `Small`, DownloadBar previewThumb `Medium`. **Standard:** one thumbnail radius (Medium/10px). *(Distinct from L9, which is thumbnail pixel dimensions.)* -- [ ] **UI7 — Card radius (XLarge vs Large) has no stated rule.** Top-level cards use XLarge (16), + *Fixed: every thumbnail uses `RADIUS.control` (Medium) — QueueItem Large→Medium and Library rowThumb + Small→Medium; History/DownloadBar were already Medium and are now tokenized.* +- [x] **UI7 — Card radius (XLarge vs Large) has no stated rule.** Top-level cards use XLarge (16), list rows Large (12), but it's applied by feel. **Standard:** document surface tiers — page-card XLarge, list-item Large, control Medium — and apply uniformly. + *Fixed: `RADIUS` documents the tiers (`card` XLarge / `surface` Large / `control` Medium) and they're + applied on the surfaces touched this batch (page cards → `card`, the QueueItem list-item → `surface`, + thumbnails/controls → `control`); remaining correct-but-untokenized `borderRadius*` calls migrate incrementally.* - [x] **UI8 — Circular shapes mix token and literal.** `borderRadiusCircular` (Library pill/watchBadge) vs literal `'50%'` (SettingsView swatch, History emptyBadge). **Standard:** always the token. @@ -981,16 +1105,28 @@ are an undefined spacing/radius/type scale and a drift between Fluent components (just a count). **Standard:** one page-title style on every screen. - [x] **UI10 — Only Library has a screen subtitle/description.** Others jump straight to content. **Standard:** a consistent header block (title + optional one-line description). -- [ ] **UI11 — Semantic type ramp vs ad-hoc px.** Sidebar `brandName`/`navItem` and Library +- [x] **UI11 — Semantic type ramp vs ad-hoc px.** Sidebar `brandName`/`navItem` and Library `watchBadge`/`pill` set raw `fontSizeBaseXXX`; `sectionIcon`/`mark` use literal `'20px'`/`'26px'`. - **Standard:** Fluent type components/tokens; no literal px font sizes. + **Standard:** Fluent type components/tokens; no literal px font sizes. *Fixed: no literal px font sizes + remain — the last tile/badge glyphs snap to `ICON` tiers (Sidebar mark 20, Onboarding mark 24, Library + srcIcon 20, History emptyBadge 24). The `fontSizeBase*` usages already met the standard (they're tokens, on + interactive ` - {syncNote && {syncNote}} + {syncNote && {syncNote}}
Auto-download new @@ -619,7 +621,7 @@ export function LibraryView(): React.JSX.Element { {sources.length === 0 && !indexing.active ? (
- + No channels or playlists yet. Paste one above to add it.
) : ( @@ -640,9 +642,9 @@ export function LibraryView(): React.JSX.Element { label="Select all" disabled={actionableItems.length === 0} /> - - {items.length} videos · {pendingItems.length} pending · indexed{' '} - {relTime(src.lastIndexedAt)} + + {items.length} videos{META_SEP} + {pendingItems.length} pending{META_SEP}indexed {relTime(src.lastIndexedAt)}
@@ -703,7 +705,7 @@ export function LibraryView(): React.JSX.Element { {confirmRemoveId === src.id ? ( <> - Remove {src.title}? + Remove {src.title}? diff --git a/src/renderer/src/components/Onboarding.tsx b/src/renderer/src/components/Onboarding.tsx index 34bcbb6..04be592 100644 --- a/src/renderer/src/components/Onboarding.tsx +++ b/src/renderer/src/components/Onboarding.tsx @@ -21,6 +21,7 @@ import { VideoClipRegular } from '@fluentui/react-icons' import { useSettings } from '../store/settings' +import { SPACE, ICON } from './ui/tokens' const useStyles = makeStyles({ root: { @@ -30,13 +31,14 @@ const useStyles = makeStyles({ alignItems: 'center', justifyContent: 'center', overflowY: 'auto', - padding: '24px' + padding: SPACE.page }, card: { display: 'flex', flexDirection: 'column', - gap: '20px', - padding: '32px', + gap: SPACE.roomy, + // The welcome hero card (UI3 hero tier). + padding: SPACE.hero, maxWidth: '460px', width: '100%', ...shorthands.borderRadius(tokens.borderRadiusXLarge) @@ -56,11 +58,12 @@ const useStyles = makeStyles({ display: 'flex', alignItems: 'center', justifyContent: 'center', - fontSize: '26px' + // Brand tile glyph, snapped to the nearest ICON tier (UI11 — no literal px). + fontSize: `${ICON.section}px` }, folderNote: { color: tokens.colorNeutralForeground3, - marginBottom: '8px' + marginBottom: SPACE.tight }, folderRow: { display: 'flex', @@ -72,10 +75,10 @@ const useStyles = makeStyles({ border: `1px solid ${tokens.colorNeutralStroke2}` }, folderRowGap: { - marginTop: '8px' + marginTop: SPACE.tight }, folderIcon: { - fontSize: '18px', + fontSize: `${ICON.control}px`, flexShrink: 0, color: tokens.colorCompoundBrandForeground1 }, @@ -106,9 +109,9 @@ const useStyles = makeStyles({ gap: '10px' }, tipIcon: { - fontSize: '18px', + fontSize: `${ICON.control}px`, flexShrink: 0, - marginTop: '2px', + marginTop: SPACE.hairline, color: tokens.colorCompoundBrandForeground1 } }) diff --git a/src/renderer/src/components/QueueItem.tsx b/src/renderer/src/components/QueueItem.tsx index 31024a6..d104680 100644 --- a/src/renderer/src/components/QueueItem.tsx +++ b/src/renderer/src/components/QueueItem.tsx @@ -34,15 +34,18 @@ import { MediaThumb } from './MediaThumb' import { Hint } from './Hint' import { StatusChip } from './ui/StatusChip' import { useFocusStyles } from './ui/focusRing' +import { useTextStyles } from './ui/text' +import { SPACE, RADIUS, ICON, META_SEP } from './ui/tokens' import { THUMB_MD } from '../thumbSizes' const useStyles = makeStyles({ root: { display: 'flex', gap: '14px', - padding: '14px', + // List-item card: card padding + list-item radius (UI3/UI7). + padding: SPACE.section, backgroundColor: tokens.colorNeutralBackground1, - ...shorthands.borderRadius(tokens.borderRadiusLarge), + ...shorthands.borderRadius(RADIUS.surface), border: `1px solid ${tokens.colorNeutralStroke2}` }, thumb: { @@ -52,7 +55,8 @@ const useStyles = makeStyles({ display: 'flex', alignItems: 'center', justifyContent: 'center', - ...shorthands.borderRadius(tokens.borderRadiusLarge) + // One thumbnail radius app-wide (UI6): control tier / Medium. + ...shorthands.borderRadius(RADIUS.control) }, body: { flexGrow: 1, @@ -66,20 +70,11 @@ const useStyles = makeStyles({ alignItems: 'center', gap: '8px' }, - title: { - fontWeight: tokens.fontWeightSemibold, - overflow: 'hidden', - textOverflow: 'ellipsis', - whiteSpace: 'nowrap' - }, - meta: { - color: tokens.colorNeutralForeground3 - }, progressRow: { display: 'flex', alignItems: 'center', gap: '10px', - marginTop: '4px' + marginTop: SPACE.xtight }, progressBar: { flexGrow: 1 @@ -94,7 +89,7 @@ const useStyles = makeStyles({ actions: { display: 'flex', alignItems: 'center', - gap: '4px', + gap: SPACE.xtight, flexShrink: 0, // Icon-only row actions get a >=40px hit target for touch/pen (W16); the // glyph stays its normal size, the subtle button just carries more padding. @@ -116,6 +111,7 @@ export const QueueItem = memo(function QueueItem({ }): React.JSX.Element { const styles = useStyles() const focus = useFocusStyles() + const text = useTextStyles() // One shallow-compared selection instead of 10 separate subscriptions per row // (L163). The actions are stable, so this never re-renders from the store. const { @@ -186,26 +182,29 @@ export const QueueItem = memo(function QueueItem({
{item.status === 'completed' && ( )} {item.status === 'error' && ( )} - {item.title} + {item.title} {item.incognito && ( - + )}
- {metaParts.join(' • ')} + {metaParts.join(META_SEP)} {item.status === 'downloading' && (
@@ -224,8 +223,8 @@ export const QueueItem = memo(function QueueItem({ ) : ( <> {item.sizeUnknown ? 'Downloading…' : pct(item.progress)} - {speedLabel ? ` • ${speedLabel}` : ''} - {etaLabel ? ` • ${etaLabel} left` : ''} + {speedLabel ? `${META_SEP}${speedLabel}` : ''} + {etaLabel ? `${META_SEP}${etaLabel} left` : ''} )} @@ -247,7 +246,10 @@ export const QueueItem = memo(function QueueItem({ thickness="large" aria-label={`Download progress for ${item.title ?? item.url}`} /> - Paused • {pct(item.progress)} + + Paused{META_SEP} + {pct(item.progress)} +
)} diff --git a/src/renderer/src/components/Select.tsx b/src/renderer/src/components/Select.tsx index 8a78545..449fa82 100644 --- a/src/renderer/src/components/Select.tsx +++ b/src/renderer/src/components/Select.tsx @@ -1,4 +1,10 @@ -import { makeStyles, mergeClasses, tokens, shorthands } from '@fluentui/react-components' +import { + makeStyles, + mergeClasses, + tokens, + shorthands, + useFieldControlProps_unstable +} from '@fluentui/react-components' // A native onChange(e.target.value)} - aria-label={ariaLabel} disabled={disabled} > {options.map((o) => ( diff --git a/src/renderer/src/components/SettingsView.tsx b/src/renderer/src/components/SettingsView.tsx index b420930..adca76c 100644 --- a/src/renderer/src/components/SettingsView.tsx +++ b/src/renderer/src/components/SettingsView.tsx @@ -2,6 +2,7 @@ import { useEffect, useRef, useState } from 'react' import { Input, Caption1, makeStyles, mergeClasses, tokens } from '@fluentui/react-components' import { SearchRegular } from '@fluentui/react-icons' import { ScreenHeader, useScreenStyles } from './ui/Screen' +import { SPACE } from './ui/tokens' import { DownloadsCard } from './settings/DownloadsCard' import { AppearanceCard } from './settings/AppearanceCard' import { PostProcessingCard } from './settings/PostProcessingCard' @@ -18,7 +19,7 @@ const useStyles = makeStyles({ root: { display: 'flex', flexDirection: 'column', - gap: '16px' + gap: SPACE.section } }) @@ -77,7 +78,7 @@ export function SettingsView(): React.JSX.Element { style={{ width: '100%' }} /> {noResults && ( - + No settings match "{search}". )} diff --git a/src/renderer/src/components/Sidebar.tsx b/src/renderer/src/components/Sidebar.tsx index 0ca9ed2..58e2d22 100644 --- a/src/renderer/src/components/Sidebar.tsx +++ b/src/renderer/src/components/Sidebar.tsx @@ -17,6 +17,8 @@ import { Hint } from './Hint' import { SegmentedControl } from './ui/SegmentedControl' import { IconButton } from './ui/IconButton' import { useFocusStyles } from './ui/focusRing' +import { useTextStyles } from './ui/text' +import { MOTION, ICON } from './ui/tokens' export type TabValue = 'downloads' | 'library' | 'history' | 'terminal' | 'settings' @@ -30,7 +32,8 @@ const useStyles = makeStyles({ padding: '16px 12px', backgroundColor: tokens.colorNeutralBackground1, borderRight: `1px solid ${tokens.colorNeutralStroke2}`, - transition: 'width 0.15s ease' + // The app's one motion timing, gated globally on prefers-reduced-motion (UI26). + transition: `width ${MOTION.duration} ${MOTION.curve}` }, rootCollapsed: { width: '60px', @@ -64,7 +67,8 @@ const useStyles = makeStyles({ display: 'flex', alignItems: 'center', justifyContent: 'center', - fontSize: '20px' + // Brand tile glyph, snapped to the nearest ICON tier (UI11 — no literal px). + fontSize: `${ICON.control}px` }, brandText: { display: 'flex', @@ -77,9 +81,6 @@ const useStyles = makeStyles({ lineHeight: tokens.lineHeightBase400, color: tokens.colorNeutralForeground1 }, - caption: { - color: tokens.colorNeutralForeground3 - }, nav: { display: 'flex', flexDirection: 'column', @@ -117,7 +118,7 @@ const useStyles = makeStyles({ } }, navIcon: { - fontSize: '18px', + fontSize: `${ICON.control}px`, flexShrink: 0, display: 'flex' }, @@ -169,6 +170,7 @@ export function Sidebar({ }: SidebarProps): React.JSX.Element { const styles = useStyles() const focus = useFocusStyles() + const text = useTextStyles() // Collapsed view shows one button that cycles Light → Dark → Auto. const order: ThemeMode[] = ['light', 'dark', 'system'] @@ -178,11 +180,11 @@ export function Sidebar({ } const themeIcon = theme === 'system' ? ( - + ) : isDark ? ( - + ) : ( - + ) const themeLabel = theme === 'system' ? 'Auto (system)' : isDark ? 'Dark' : 'Light' @@ -209,7 +211,7 @@ export function Sidebar({ {/* Stable tagline so the caption never flips from text to a version string once it loads (L66); the version shows on hover and in Settings → About. */} - + Video downloader
diff --git a/src/renderer/src/components/TerminalView.tsx b/src/renderer/src/components/TerminalView.tsx index f5163cd..424151a 100644 --- a/src/renderer/src/components/TerminalView.tsx +++ b/src/renderer/src/components/TerminalView.tsx @@ -13,6 +13,7 @@ import { PlayRegular, DismissRegular, DeleteRegular } from '@fluentui/react-icon import { useSettings } from '../store/settings' import { newId } from '../id' import { ScreenHeader, useScreenStyles } from './ui/Screen' +import { SPACE } from './ui/tokens' type LineKind = 'stdout' | 'stderr' | 'cmd' | 'sys' interface Line { @@ -29,7 +30,7 @@ const mkLine = (text: string, kind: LineKind): Line => ({ id: ++lineSeq, text, k const MAX_LOG_LINES = 2000 const useStyles = makeStyles({ - root: { display: 'flex', flexDirection: 'column', gap: '16px', height: '100%' }, + root: { display: 'flex', flexDirection: 'column', gap: SPACE.section, height: '100%' }, gate: { padding: '12px 14px', backgroundColor: tokens.colorStatusWarningBackground1, @@ -180,7 +181,7 @@ export function TerminalView(): React.JSX.Element {
{running ? ( - ) : ( diff --git a/src/renderer/src/components/downloadBar/PlaylistPanel.tsx b/src/renderer/src/components/downloadBar/PlaylistPanel.tsx index d6d9839..a8f3d28 100644 --- a/src/renderer/src/components/downloadBar/PlaylistPanel.tsx +++ b/src/renderer/src/components/downloadBar/PlaylistPanel.tsx @@ -4,6 +4,8 @@ import { type PlaylistInfo } from '@shared/ipc' import { type MediaKind } from '../../store/downloads' import { Hint } from '../Hint' import { IconButton } from '../ui/IconButton' +import { useTextStyles } from '../ui/text' +import { META_SEP } from '../ui/tokens' import { useDownloadBarStyles } from './styles' interface PlaylistPanelProps { @@ -28,15 +30,16 @@ export function PlaylistPanel({ onToggleItemKind }: PlaylistPanelProps): React.JSX.Element { const styles = useDownloadBarStyles() + const text = useTextStyles() return (
{playlist.title} - {playlist.uploader ? ` • ${playlist.uploader}` : ''} + {playlist.uploader ? `${META_SEP}${playlist.uploader}` : ''} - + {selected.size} of {playlist.count} selected - {checking && }
update({ theme: v as ThemeMode })} diff --git a/src/renderer/src/components/settings/CookiesCard.tsx b/src/renderer/src/components/settings/CookiesCard.tsx index 8ce6046..fc99fe8 100644 --- a/src/renderer/src/components/settings/CookiesCard.tsx +++ b/src/renderer/src/components/settings/CookiesCard.tsx @@ -77,7 +77,6 @@ export function CookiesCard(): React.JSX.Element { update({ cookiesBrowser: v as CookieBrowser })} diff --git a/src/renderer/src/components/settings/CustomCommandsCard.tsx b/src/renderer/src/components/settings/CustomCommandsCard.tsx index 73e7c4c..e66b89d 100644 --- a/src/renderer/src/components/settings/CustomCommandsCard.tsx +++ b/src/renderer/src/components/settings/CustomCommandsCard.tsx @@ -32,14 +32,12 @@ export function CustomCommandsCard(): React.JSX.Element { update({ customCommandEnabled: d.checked })} - label={customCommandEnabled ? 'On' : 'Off'} /> {customCommandEnabled && ( +