refactor(audit): peer-review fixes — mergeClasses + import placement

Self-review of the Batches 9-15 changes surfaced two style inconsistencies (no
behavior change):
- Toaster.tsx: combine the icon + tone classes with mergeClasses instead of a
  template-literal string, matching how the rest of the codebase composes Griffel
  classes.
- App.tsx: move the PERF8 React.lazy() view declarations below the import block
  (they were interleaved between import statements).

Verified: typecheck (node+web) + 279 tests + eslint + production build green
(code-split chunks intact); touched files prettier-clean.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
2026-07-01 18:00:21 -04:00
parent 4d1c33a081
commit a2c8992650
2 changed files with 27 additions and 20 deletions
+18 -18
View File
@@ -3,24 +3,6 @@ import { FluentProvider, makeStyles, tokens } from '@fluentui/react-components'
import { Sidebar } from './components/Sidebar' import { Sidebar } from './components/Sidebar'
import { DownloadsView } from './components/DownloadsView' import { DownloadsView } from './components/DownloadsView'
import { Onboarding } from './components/Onboarding' import { Onboarding } from './components/Onboarding'
// Code-split the non-default tabs (PERF8): Downloads is the launch tab and stays
// eager, but Library/History/Terminal/Settings load their chunks on first visit so
// they (and their slice of Fluent) aren't in the initial bundle. The stores these
// views use are imported eagerly elsewhere (App's `useDownloads` + `./store/sources`,
// and downloads → history), so lazy-loading the *view* never delays store startup.
const LibraryView = lazy(() =>
import('./components/LibraryView').then((m) => ({ default: m.LibraryView }))
)
const HistoryView = lazy(() =>
import('./components/HistoryView').then((m) => ({ default: m.HistoryView }))
)
const TerminalView = lazy(() =>
import('./components/TerminalView').then((m) => ({ default: m.TerminalView }))
)
const SettingsView = lazy(() =>
import('./components/SettingsView').then((m) => ({ default: m.SettingsView }))
)
import { CommandPalette, type PaletteAction } from './components/CommandPalette' import { CommandPalette, type PaletteAction } from './components/CommandPalette'
import { LiveRegion } from './components/LiveRegion' import { LiveRegion } from './components/LiveRegion'
import { Toaster } from './components/ui/Toaster' import { Toaster } from './components/ui/Toaster'
@@ -39,6 +21,24 @@ import { queueSummaryOf } from './store/queueStats'
import { useResolvedDark } from './store/systemTheme' import { useResolvedDark } from './store/systemTheme'
import { logError } from './reportError' import { logError } from './reportError'
// Code-split the non-default tabs (PERF8): Downloads is the launch tab and stays
// eager, but Library/History/Terminal/Settings load their chunks on first visit so
// they (and their slice of Fluent) aren't in the initial bundle. The stores these
// views use are imported eagerly above (`useDownloads` + `./store/sources`, and
// downloads → history), so lazy-loading the *view* never delays store startup.
const LibraryView = lazy(() =>
import('./components/LibraryView').then((m) => ({ default: m.LibraryView }))
)
const HistoryView = lazy(() =>
import('./components/HistoryView').then((m) => ({ default: m.HistoryView }))
)
const TerminalView = lazy(() =>
import('./components/TerminalView').then((m) => ({ default: m.TerminalView }))
)
const SettingsView = lazy(() =>
import('./components/SettingsView').then((m) => ({ default: m.SettingsView }))
)
// How often to check whether a scheduled ('saved' + due) download should promote // How often to check whether a scheduled ('saved' + due) download should promote
// to the queue. 15s is plenty for the minute-granularity times the picker offers. // to the queue. 15s is plenty for the minute-granularity times the picker offers.
const SCHEDULE_TICK_MS = 15_000 const SCHEDULE_TICK_MS = 15_000
+9 -2
View File
@@ -1,4 +1,11 @@
import { Caption1, Button, makeStyles, tokens, shorthands } from '@fluentui/react-components' import {
Caption1,
Button,
makeStyles,
mergeClasses,
tokens,
shorthands
} from '@fluentui/react-components'
import { import {
DismissRegular, DismissRegular,
ErrorCircleFilled, ErrorCircleFilled,
@@ -76,7 +83,7 @@ export function Toaster(): React.JSX.Element | null {
<div className={styles.stack} role="status" aria-live="polite"> <div className={styles.stack} role="status" aria-live="polite">
{toasts.map((t) => ( {toasts.map((t) => (
<div key={t.id} className={styles.toast}> <div key={t.id} className={styles.toast}>
<span className={`${styles.icon} ${toneClass[t.tone]}`}>{ICONS[t.tone]}</span> <span className={mergeClasses(styles.icon, toneClass[t.tone])}>{ICONS[t.tone]}</span>
<Caption1 className={styles.message}>{t.message}</Caption1> <Caption1 className={styles.message}>{t.message}</Caption1>
<Button <Button
size="small" size="small"