From a2c89926504f7e91d7085d9a69c24a3b8e97bdc7 Mon Sep 17 00:00:00 2001
From: debont80 <dmbont23@mailbox.org>
Date: Wed, 1 Jul 2026 18:00:21 -0400
Subject: [PATCH] =?UTF-8?q?refactor(audit):=20peer-review=20fixes=20?=
 =?UTF-8?q?=E2=80=94=20mergeClasses=20+=20import=20placement?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 src/renderer/src/App.tsx                   | 36 +++++++++++-----------
 src/renderer/src/components/ui/Toaster.tsx | 11 +++++--
 2 files changed, 27 insertions(+), 20 deletions(-)

diff --git a/src/renderer/src/App.tsx b/src/renderer/src/App.tsx
index f96a8ec..b20bd3d 100644
--- a/src/renderer/src/App.tsx
+++ b/src/renderer/src/App.tsx
@@ -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
diff --git a/src/renderer/src/components/ui/Toaster.tsx b/src/renderer/src/components/ui/Toaster.tsx
index 0866a8d..dc8f468 100644
--- a/src/renderer/src/components/ui/Toaster.tsx
+++ b/src/renderer/src/components/ui/Toaster.tsx
@@ -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"