dostulata/initiative
1
0
Fork 0
Code Issues 7 Pull Requests Actions Packages Projects Releases Wiki Activity

Add import method dialog with file upload and paste options

Browse Source 
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>
This commit is contained in:
Lukas
2026-03-27 14:43:22 +01:00
parent fba83bebd6
commit 4969ed069b
4 changed files with 200 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
apps/web/src/components/action-bar.tsx
View File

@@ -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}

2
apps/web/src/components/import-confirm-prompt.tsx
View File

@@ -42,7 +42,7 @@ export function ImportConfirmDialog({
return (
<dialog
ref={dialogRef}
className="rounded-lg border border-border bg-card p-6 text-foreground shadow-xl backdrop:bg-black/50"
className="m-auto rounded-lg border border-border bg-card p-6 text-foreground shadow-xl backdrop:bg-black/50"
>
<h2 className="mb-2 font-semibold text-lg">Replace current encounter?</h2>
<p className="mb-4 text-muted-foreground text-sm">

153
apps/web/src/components/import-method-dialog.tsx Normal file
View File

@@ -0,0 +1,153 @@
import { ClipboardPaste, FileUp, X } from "lucide-react";
import { useCallback, useEffect, useRef, useState } from "react";
import { Button } from "./ui/button.js";
interface ImportMethodDialogProps {
open: boolean;
onSelectFile: () => void;
onSubmitClipboard: (text: string) => void;
onClose: () => void;
}
export function ImportMethodDialog({
open,
onSelectFile,
onSubmitClipboard,
onClose,
}: Readonly<ImportMethodDialogProps>) {
const dialogRef = useRef<HTMLDialogElement>(null);
const textareaRef = useRef<HTMLTextAreaElement>(null);
const [mode, setMode] = useState<"pick" | "paste">("pick");
const [pasteText, setPasteText] = useState("");
const reset = useCallback(() => {
setMode("pick");
setPasteText("");
}, []);
const handleClose = useCallback(() => {
reset();
onClose();
}, [reset, onClose]);
useEffect(() => {
const dialog = dialogRef.current;
if (!dialog) return;
if (open && !dialog.open) dialog.showModal();
else if (!open && dialog.open) {
dialog.close();
reset();
}
}, [open, reset]);
useEffect(() => {
if (mode === "paste") {
textareaRef.current?.focus();
}
}, [mode]);
useEffect(() => {
const dialog = dialogRef.current;
if (!dialog) return;
function handleCancel(e: Event) {
e.preventDefault();
handleClose();
}
function handleBackdropClick(e: MouseEvent) {
if (e.target === dialog) handleClose();
}
dialog.addEventListener("cancel", handleCancel);
dialog.addEventListener("mousedown", handleBackdropClick);
return () => {
dialog.removeEventListener("cancel", handleCancel);
dialog.removeEventListener("mousedown", handleBackdropClick);
};
}, [handleClose]);
return (
<dialog
ref={dialogRef}
className="m-auto w-80 rounded-lg border border-border bg-card p-6 text-foreground shadow-xl backdrop:bg-black/50"
>
<div className="mb-4 flex items-center justify-between">
<h2 className="font-semibold text-lg">Import Encounter</h2>
<Button
type="button"
variant="ghost"
size="icon-sm"
onClick={handleClose}
className="text-muted-foreground"
>
<X className="h-4 w-4" />
</Button>
</div>
{mode === "pick" && (
<div className="flex flex-col gap-2">
<button
type="button"
className="flex items-center gap-3 rounded-lg border border-border px-4 py-3 text-left text-foreground text-sm hover:bg-hover-neutral-bg"
onClick={() => {
handleClose();
onSelectFile();
}}
>
<FileUp className="h-5 w-5 text-muted-foreground" />
<div>
<div className="font-medium">From file</div>
<div className="text-muted-foreground text-xs">
Upload a JSON file
</div>
</div>
</button>
<button
type="button"
className="flex items-center gap-3 rounded-lg border border-border px-4 py-3 text-left text-foreground text-sm hover:bg-hover-neutral-bg"
onClick={() => setMode("paste")}
>
<ClipboardPaste className="h-5 w-5 text-muted-foreground" />
<div>
<div className="font-medium">Paste content</div>
<div className="text-muted-foreground text-xs">
Paste JSON content directly
</div>
</div>
</button>
</div>
)}
{mode === "paste" && (
<div className="flex flex-col gap-3">
<textarea
ref={textareaRef}
value={pasteText}
onChange={(e) => setPasteText(e.target.value)}
placeholder="Paste exported JSON here..."
className="h-32 w-full resize-none rounded-md border border-border bg-background px-3 py-2 font-mono text-foreground text-xs placeholder:text-muted-foreground focus:border-accent focus:outline-none"
/>
<div className="flex justify-end gap-2">
<Button
type="button"
variant="ghost"
onClick={() => {
setMode("pick");
setPasteText("");
}}
>
Back
</Button>
<Button
type="button"
disabled={pasteText.trim().length === 0}
onClick={() => {
const text = pasteText;
handleClose();
onSubmitClipboard(text);
}}
>
Import
</Button>
</div>
</div>
)}
</dialog>
);
}

16
specs/007-json-import-export/spec.md
View File

@@ -25,18 +25,19 @@ A DM has set up an encounter (combatants, HP, initiative, conditions) and wants
### Story IE-2 — Import encounter from file (Priority: P1)
A DM receives a `.json` file from another DM (or from their own earlier export) and wants to load it. They click an import button, select the file, and the application replaces the current state with the imported data.
A DM receives a `.json` file from another DM (or from their own earlier export) and wants to load it. They click an import button, choose an import method (file upload or clipboard paste), and the application replaces the current state with the imported data.
**Why this priority**: Import completes the core value proposition — without it, export is just a read-only backup. Both are needed for the feature to be useful.
**Independent Test**: Can be tested by importing a valid `.json` file and verifying the encounter, undo/redo history, and player characters are replaced with the imported data.
**Independent Test**: Can be tested by importing a valid `.json` file (or pasting valid JSON from the clipboard) and verifying the encounter, undo/redo history, and player characters are replaced with the imported data.
**Acceptance Scenarios**:
1. **Given** the current encounter is empty, **When** the user selects a valid exported `.json` file, **Then** the application loads the imported encounter, undo/redo history, and player characters without any confirmation prompt.
2. **Given** the current encounter has combatants, **When** the user selects a valid `.json` file, **Then** a confirmation dialog appears warning that the current encounter will be replaced.
3. **Given** the confirmation dialog is shown, **When** the user confirms, **Then** the current encounter, undo/redo history, and player characters are replaced with the imported data.
4. **Given** the confirmation dialog is shown, **When** the user cancels, **Then** the current state remains unchanged.
1. **Given** the user clicks the import action, **Then** a dialog appears offering two import methods: file upload and clipboard paste.
2. **Given** the current encounter is empty, **When** the user imports valid encounter data (via file or clipboard), **Then** the application loads the imported encounter, undo/redo history, and player characters without any confirmation prompt.
3. **Given** the current encounter has combatants, **When** the user imports valid encounter data, **Then** a confirmation dialog appears warning that the current encounter will be replaced.
4. **Given** the confirmation dialog is shown, **When** the user confirms, **Then** the current encounter, undo/redo history, and player characters are replaced with the imported data.
5. **Given** the confirmation dialog is shown, **When** the user cancels, **Then** the current state remains unchanged.
---
@@ -53,6 +54,7 @@ A DM accidentally selects a wrong file (a non-JSON file, a corrupted export, or
1. **Given** the user selects a non-JSON file (e.g., an image), **When** the import attempts to parse it, **Then** a user-facing error message is shown and the current state is unchanged.
2. **Given** the user selects a JSON file with missing required fields, **When** the import validates it, **Then** a user-facing error message is shown and the current state is unchanged.
3. **Given** the user selects a JSON file with a valid top-level structure but individual combatants with invalid fields (e.g., negative HP, unknown condition IDs), **When** the import validates it, **Then** invalid fields on otherwise valid combatants are dropped/defaulted (same as localStorage rehydration), but if the top-level structure is malformed (missing `encounter` key, wrong types), the file is rejected with an error message.
4. **Given** the user chooses clipboard import but the clipboard is empty or contains non-JSON text, **Then** a user-facing error message is shown and the current state is unchanged.
---
@@ -70,7 +72,7 @@ A DM accidentally selects a wrong file (a non-JSON file, a corrupted export, or
- **FR-001**: The system MUST provide an export action accessible from the UI that downloads the full application state as a `.json` file.
- **FR-002**: The exported file MUST contain the current encounter (combatants and turn/round state), undo/redo stacks, and player character templates.
- **FR-003**: The exported file MUST use a human-readable filename that includes context (e.g., date or encounter info).
- **FR-004**: The system MUST provide an import action accessible from the UI that opens a file picker for `.json` files.
- **FR-004**: The system MUST provide an import action accessible from the UI that lets the user choose between uploading a `.json` file or pasting from the clipboard.
- **FR-005**: On import, the system MUST replace the current encounter, undo/redo history, and player characters with the imported data.
- **FR-006**: The system MUST show a confirmation dialog before importing if the current encounter is non-empty (has at least one combatant).
- **FR-007**: The system MUST validate imported data using the same rules applied when loading from localStorage — invalid fields are cleaned or dropped, structurally malformed files are rejected entirely.