Extract BulkImportToasts component from App.tsx

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

apps/web/src/App.tsx

@@ -16,6 +16,7 @@ import {
 	useState,
 } from "react";
 import { ActionBar } from "./components/action-bar";
+import { BulkImportToasts } from "./components/bulk-import-toasts";
 import { CombatantRow } from "./components/combatant-row";
 import {
 	PlayerCharacterSection,
@@ -368,33 +369,11 @@ export function App() {
 				sourceManagerMode={sidePanel.sourceManagerMode}
 			/>
 
-			{/* Toast for bulk import progress when panel is closed */}
-			{bulkImport.state.status === "loading" && !sidePanel.bulkImportMode && (
-				<Toast
-					message={`Loading sources... ${bulkImport.state.completed + bulkImport.state.failed}/${bulkImport.state.total}`}
-					progress={
-						bulkImport.state.total > 0
-							? (bulkImport.state.completed + bulkImport.state.failed) /
-								bulkImport.state.total
-							: 0
-					}
-					onDismiss={() => {}}
-				/>
-			)}
-			{bulkImport.state.status === "complete" && !sidePanel.bulkImportMode && (
-				<Toast
-					message="All sources loaded"
-					onDismiss={bulkImport.reset}
-					autoDismissMs={3000}
-				/>
-			)}
-			{bulkImport.state.status === "partial-failure" &&
-				!sidePanel.bulkImportMode && (
-					<Toast
-						message={`Loaded ${bulkImport.state.completed}/${bulkImport.state.total} sources (${bulkImport.state.failed} failed)`}
-						onDismiss={bulkImport.reset}
-					/>
-				)}
+			<BulkImportToasts
+				state={bulkImport.state}
+				visible={!sidePanel.bulkImportMode}
+				onReset={bulkImport.reset}
+			/>
 
 			{rollSkippedCount > 0 && (
 				<Toast