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:
+18
-18
@@ -3,24 +3,6 @@ import { FluentProvider, makeStyles, tokens } from '@fluentui/react-components'
|
||||
import { Sidebar } from './components/Sidebar'
|
||||
import { DownloadsView } from './components/DownloadsView'
|
||||
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 { LiveRegion } from './components/LiveRegion'
|
||||
import { Toaster } from './components/ui/Toaster'
|
||||
@@ -39,6 +21,24 @@ import { queueSummaryOf } from './store/queueStats'
|
||||
import { useResolvedDark } from './store/systemTheme'
|
||||
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
|
||||
// to the queue. 15s is plenty for the minute-granularity times the picker offers.
|
||||
const SCHEDULE_TICK_MS = 15_000
|
||||
|
||||
@@ -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 {
|
||||
DismissRegular,
|
||||
ErrorCircleFilled,
|
||||
@@ -76,7 +83,7 @@ export function Toaster(): React.JSX.Element | null {
|
||||
<div className={styles.stack} role="status" aria-live="polite">
|
||||
{toasts.map((t) => (
|
||||
<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>
|
||||
<Button
|
||||
size="small"
|
||||
|
||||
Reference in New Issue
Block a user