Add import method dialog with file upload and paste options

Replace direct file picker trigger with a modal offering two import
methods: file upload and paste JSON content. Uses a textarea instead
of navigator.clipboard.readText() to avoid browser permission prompts.
Also centers both import dialogs and updates spec for clipboard import.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

apps/web/src/components/action-bar.tsx

@@ -30,9 +30,11 @@ import {
 	assembleExportBundle,
 	readImportFile,
 	triggerDownload,
+	validateImportBundle,
 } from "../persistence/export-import.js";
 import { D20Icon } from "./d20-icon.js";
 import { ImportConfirmDialog } from "./import-confirm-prompt.js";
+import { ImportMethodDialog } from "./import-method-dialog.js";
 import { PLAYER_COLOR_HEX, PLAYER_ICON_MAP } from "./player-icon-map.js";
 import { RollModeMenu } from "./roll-mode-menu.js";
 import { Toast } from "./toast.js";
@@ -447,6 +449,7 @@ export function ActionBar({
 
 	const importFileRef = useRef<HTMLInputElement>(null);
 	const [importError, setImportError] = useState<string | null>(null);
+	const [showImportMethod, setShowImportMethod] = useState(false);
 	const [showImportConfirm, setShowImportConfirm] = useState(false);
 	const pendingBundleRef = useRef<
 		import("@initiative/domain").ExportBundle | null
@@ -473,14 +476,8 @@ export function ActionBar({
 		[setEncounter, setUndoRedoState, replacePlayerCharacters],
 	);
 
-	const handleImportFile = useCallback(
-		async (e: React.ChangeEvent<HTMLInputElement>) => {
-			const file = e.target.files?.[0];
-			if (!file) return;
-			if (importFileRef.current) importFileRef.current.value = "";
-
-			setImportError(null);
-			const result = await readImportFile(file);
+	const handleValidatedBundle = useCallback(
+		(result: import("@initiative/domain").ExportBundle | string) => {
 			if (typeof result === "string") {
 				setImportError(result);
 				return;
@@ -495,6 +492,31 @@ export function ActionBar({
 		[encounterIsEmpty, applyImport],
 	);
 
+	const handleImportFile = useCallback(
+		async (e: React.ChangeEvent<HTMLInputElement>) => {
+			const file = e.target.files?.[0];
+			if (!file) return;
+			if (importFileRef.current) importFileRef.current.value = "";
+
+			setImportError(null);
+			handleValidatedBundle(await readImportFile(file));
+		},
+		[handleValidatedBundle],
+	);
+
+	const handleImportClipboard = useCallback(
+		(text: string) => {
+			setImportError(null);
+			try {
+				const parsed: unknown = JSON.parse(text);
+				handleValidatedBundle(validateImportBundle(parsed));
+			} catch {
+				setImportError("Invalid file format");
+			}
+		},
+		[handleValidatedBundle],
+	);
+
 	const handleImportConfirm = useCallback(() => {
 		if (pendingBundleRef.current) {
 			applyImport(pendingBundleRef.current);
@@ -515,7 +537,7 @@ export function ActionBar({
 		onBulkImport: showBulkImport,
 		bulkImportDisabled: bulkImportState.status === "loading",
 		onExportEncounter: handleExport,
-		onImportEncounter: () => importFileRef.current?.click(),
+		onImportEncounter: () => setShowImportMethod(true),
 		onOpenSettings,
 	});
 
@@ -611,6 +633,12 @@ export function ActionBar({
 					autoDismissMs={5000}
 				/>
 			)}
+			<ImportMethodDialog
+				open={showImportMethod}
+				onSelectFile={() => importFileRef.current?.click()}
+				onSubmitClipboard={handleImportClipboard}
+				onClose={() => setShowImportMethod(false)}
+			/>
 			<ImportConfirmDialog
 				open={showImportConfirm}
 				onConfirm={handleImportConfirm}