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 { 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
|
||||||
|
|||||||
@@ -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"
|
||||||
|
|||||||
Reference in New Issue
Block a user