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 */}
+			<BulkImportToasts
-			{bulkImport.state.status === "loading" && !sidePanel.bulkImportMode && (
+				state={bulkImport.state}
-				<Toast
+				visible={!sidePanel.bulkImportMode}
-					message={`Loading sources... ${bulkImport.state.completed + bulkImport.state.failed}/${bulkImport.state.total}`}
+				onReset={bulkImport.reset}
-					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}
-					/>
-				)}
 
 			{rollSkippedCount > 0 && (
 				<Toast

apps/web/src/components/bulk-import-toasts.tsx

@@ -0,0 +1,49 @@
+import type { BulkImportState } from "../hooks/use-bulk-import.js";
+import { Toast } from "./toast.js";
+
+interface BulkImportToastsProps {
+	state: BulkImportState;
+	visible: boolean;
+	onReset: () => void;
+}
+
+export function BulkImportToasts({
+	state,
+	visible,
+	onReset,
+}: BulkImportToastsProps) {
+	if (!visible) return null;
+
+	if (state.status === "loading") {
+		return (
+			<Toast
+				message={`Loading sources... ${state.completed + state.failed}/${state.total}`}
+				progress={
+					state.total > 0 ? (state.completed + state.failed) / state.total : 0
+				}
+				onDismiss={() => {}}
+			/>
+		);
+	}
+
+	if (state.status === "complete") {
+		return (
+			<Toast
+				message="All sources loaded"
+				onDismiss={onReset}
+				autoDismissMs={3000}
+			/>
+		);
+	}
+
+	if (state.status === "partial-failure") {
+		return (
+			<Toast
+				message={`Loaded ${state.completed}/${state.total} sources (${state.failed} failed)`}
+				onDismiss={onReset}
+			/>
+		);
+	}
+
+	return null;
+}