From 47f94617d7ac80bb65a78e8b00a2ec3d0afd6f13 Mon Sep 17 00:00:00 2001
From: Mads Taanquist <hello@taaken.dk>
Date: Thu, 30 Jul 2026 19:46:11 +0200
Subject: [PATCH 1/2] Move story import into a modal with drag-and-drop

Importing from the library no longer lands on the settings page next to
the danger zone. The New menus and the settings Import block open a
modal instead: pick or drop a file (zip, docx, epub), the preview runs
at once, then confirm. The form posts to the target universe's existing
actions from wherever the modal is mounted, so the server flow is
unchanged.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 e2e/import-story.spec.ts                      |  19 +-
 src/lib/components/ImportStoryModal.svelte    | 354 ++++++++++++++++++
 src/lib/docs/getting-started.md               |   4 +-
 src/routes/+page.svelte                       |  18 +-
 .../universes/[id]/[[section]]/+page.svelte   | 153 +-------
 5 files changed, 398 insertions(+), 150 deletions(-)
 create mode 100644 src/lib/components/ImportStoryModal.svelte

diff --git a/e2e/import-story.spec.ts b/e2e/import-story.spec.ts
index c5ad9a1..12c788f 100644
--- a/e2e/import-story.spec.ts
+++ b/e2e/import-story.spec.ts
@@ -3,7 +3,7 @@ import { gotoReady } from './navigate';
 import { pickFromLibraryMenu, startStoryInUniverse } from './library';
 
 // The story import round trip: write a story, download its export zip, and
-// import the zip back through the universe settings preview flow.
+// import the zip back through the library's import modal preview flow.
 test('story import: preview and import a story export zip', async ({ page }) => {
 	await gotoReady(page, '/');
 
@@ -63,16 +63,23 @@ test('story import: preview and import a story export zip', async ({ page }) =>
 	expect(archive.status()).toBe(200);
 	const zipBytes = await archive.body();
 
-	await gotoReady(page, `/universes/importland-${stamp}`);
-	await page.getByRole('link', { name: 'Import and export' }).click();
-	await page.locator('input[name="archive"]').setInputFiles({
+	// Feed it back through the import modal, opened from the universe's New
+	// story menu on the library. Picking a file previews it at once.
+	await gotoReady(page, '/');
+	await page
+		.locator('.universe-section', { hasText: universeName })
+		.getByRole('button', { name: 'New story', exact: true })
+		.click();
+	await page.getByRole('menuitem', { name: 'Import a story into this universe...' }).click();
+	const dialog = page.getByRole('dialog', { name: 'Import a story' });
+	await expect(dialog).toBeVisible();
+	await dialog.locator('input[name="archive"]').setInputFiles({
 		name: 'roundtrip.zip',
 		mimeType: 'application/zip',
 		buffer: zipBytes
 	});
-	await page.getByRole('button', { name: 'Preview' }).click();
 
-	const report = page.locator('.import-report');
+	const report = dialog.locator('.import-report');
 	await expect(report).toContainText('"Roundtrip": 1 chapter, 1 scene');
 	await expect(report).toContainText('A story named "Roundtrip" already exists');
 	await expect(report).toContainText('Bram');
diff --git a/src/lib/components/ImportStoryModal.svelte b/src/lib/components/ImportStoryModal.svelte
new file mode 100644
index 0000000..dea7c77
--- /dev/null
+++ b/src/lib/components/ImportStoryModal.svelte
@@ -0,0 +1,354 @@
+<script lang="ts">
+	import { enhance } from '$app/forms';
+	import { invalidateAll } from '$app/navigation';
+	import { resolve } from '$app/paths';
+	import { formatNumber } from '$lib/format';
+
+	// The two-step story import (upload, preview the collisions, confirm) in a
+	// modal, opened from the library's New menus and from the universe settings
+	// page. The form posts to the target universe's settings actions from
+	// wherever the modal is mounted, and the chosen file rides both submits, so
+	// picking a file is the only upload step the writer sees.
+
+	type ImportNote = { kind: string; name: string; outcome: 'match' | 'create' | 'ambiguous' };
+	type ImportPreview = {
+		storyTitle: string;
+		chapterCount: number;
+		sceneCount: number;
+		words: number;
+		assetCount: number;
+		assetsConfigured: boolean;
+		titleTaken: boolean;
+		notes: ImportNote[];
+		problems: string[];
+	};
+	type ImportResult = {
+		slug: string;
+		sceneCount: number;
+		notesAttached: number;
+		entitiesCreated: number;
+		problems: string[];
+	};
+
+	let {
+		universe,
+		onClose
+	}: {
+		// The universe the story lands in; null keeps the modal closed.
+		universe: { slug: string; name: string; standalone?: boolean } | null;
+		onClose: () => void;
+	} = $props();
+
+	const settingsPath = $derived(
+		universe ? resolve('/universes/[id]/[[section]]', { id: universe.slug, section: 'export' }) : ''
+	);
+
+	const NOTE_OUTCOMES = {
+		match: 'matches an existing entry; the note attaches to it.',
+		create: 'has no match; a new entry will be created.',
+		ambiguous: 'matches more than one entry; the note will be skipped.'
+	} as const;
+
+	let formEl = $state<HTMLFormElement>();
+	let fileInput = $state<HTMLInputElement>();
+	let fileName = $state<string | null>(null);
+	let busy = $state(false);
+	let busyLabel = $state('');
+	let dragOver = $state(false);
+	let preview = $state<ImportPreview | null>(null);
+	let imported = $state<ImportResult | null>(null);
+	let message = $state<string | null>(null);
+
+	// A fresh open starts the flow over. Keyed on the object itself: the
+	// callers hold the target in state, so a new reference is a new open.
+	let lastUniverse: typeof universe = null;
+	$effect(() => {
+		if (universe && universe !== lastUniverse) {
+			fileName = null;
+			preview = null;
+			imported = null;
+			message = null;
+			dragOver = false;
+		}
+		lastUniverse = universe;
+	});
+
+	// Picking or dropping a file previews it at once; the confirm button then
+	// posts the same file to the run action.
+	function takeFile(file: File | null | undefined) {
+		if (!file || !fileInput || busy) return;
+		if (!/\.(zip|docx|epub)$/i.test(file.name)) {
+			message = 'Choose a Codex export zip, a Word document (.docx), or an EPUB (.epub).';
+			return;
+		}
+		if (fileInput.files?.[0] !== file) {
+			const carrier = new DataTransfer();
+			carrier.items.add(file);
+			fileInput.files = carrier.files;
+		}
+		fileName = file.name;
+		preview = null;
+		imported = null;
+		message = null;
+		formEl?.requestSubmit();
+	}
+
+	const submit = () => {
+		busy = true;
+		busyLabel = preview ? 'Importing...' : 'Reading the file...';
+		return async ({ result }: { result: import('@sveltejs/kit').ActionResult }) => {
+			busy = false;
+			if (result.type === 'success') {
+				const data = result.data as
+					{ preview?: ImportPreview; imported?: ImportResult } | undefined;
+				if (data?.imported) {
+					imported = data.imported;
+					preview = null;
+					// The story list behind the modal picks up the new story.
+					await invalidateAll();
+				} else if (data?.preview) {
+					preview = data.preview;
+				}
+			} else if (result.type === 'failure') {
+				const failure = result.data as { message?: string } | undefined;
+				message = failure?.message ?? 'That file could not be read.';
+				preview = null;
+			} else if (result.type === 'error') {
+				message = 'Something went wrong. Try again.';
+			}
+		};
+	};
+
+	function onDrop(event: DragEvent) {
+		event.preventDefault();
+		dragOver = false;
+		takeFile(event.dataTransfer?.files?.[0]);
+	}
+
+	function onKeydown(event: KeyboardEvent) {
+		if (event.key === 'Escape') {
+			event.preventDefault();
+			onClose();
+		}
+	}
+</script>
+
+{#if universe}
+	<div
+		class="modal-backdrop"
+		role="presentation"
+		onclick={(event) => {
+			if (event.target === event.currentTarget) onClose();
+		}}
+		onkeydown={onKeydown}
+	>
+		<div class="modal-panel modal-lg" role="dialog" aria-modal="true" aria-label="Import a story">
+			<div class="modal-head">
+				<div class="modal-head-main">
+					<h2 class="modal-title">Import a story</h2>
+					<p class="modal-sub">
+						{universe.standalone
+							? 'The story comes in as a new standalone story.'
+							: `The story comes in as a new story in ${universe.name}.`}
+					</p>
+				</div>
+			</div>
+
+			<div class="modal-body">
+				<form
+					id="story-import-form"
+					bind:this={formEl}
+					method="POST"
+					action="{settingsPath}?/previewImport"
+					enctype="multipart/form-data"
+					use:enhance={submit}
+				>
+					<input
+						bind:this={fileInput}
+						type="file"
+						name="archive"
+						accept=".zip,application/zip,.docx,.epub"
+						hidden
+						onchange={() => takeFile(fileInput?.files?.[0])}
+					/>
+					{#if !imported}
+						<!-- Dragging is a pointer-only extra; the button inside is the
+						     keyboard and screen-reader path. -->
+						<div
+							class="drop-zone"
+							role="presentation"
+							class:over={dragOver}
+							ondragover={(event) => {
+								event.preventDefault();
+								dragOver = true;
+							}}
+							ondragleave={() => (dragOver = false)}
+							ondrop={onDrop}
+						>
+							{#if fileName}
+								<p class="drop-file">{fileName}</p>
+							{/if}
+							<button
+								type="button"
+								class="btn btn-secondary btn-sm"
+								disabled={busy}
+								onclick={() => fileInput?.click()}
+							>
+								{fileName ? 'Choose a different file' : 'Choose a file'}
+							</button>
+							<p class="drop-hint">
+								or drop one here: a Codex export zip, a Word document (.docx), or an EPUB (.epub).
+								Chapters and scenes are read from the document's own headings and breaks.
+							</p>
+						</div>
+					{/if}
+				</form>
+
+				{#if message}
+					<p class="import-error" role="alert">{message}</p>
+				{/if}
+				{#if busy}
+					<p class="import-busy" role="status">{busyLabel}</p>
+				{/if}
+
+				{#if imported}
+					<div class="import-report" role="status">
+						<p>
+							Imported {imported.sceneCount}
+							{imported.sceneCount === 1 ? 'scene' : 'scenes'}{imported.notesAttached > 0
+								? ` and ${imported.notesAttached} ${imported.notesAttached === 1 ? 'story note' : 'story notes'}`
+								: ''}{imported.entitiesCreated > 0
+								? `, creating ${imported.entitiesCreated} ${imported.entitiesCreated === 1 ? 'new entry' : 'new entries'}`
+								: ''}.
+						</p>
+						{#each imported.problems as problem (problem)}
+							<p class="import-flag">{problem}</p>
+						{/each}
+					</div>
+				{:else if preview}
+					<div class="import-report">
+						<p>
+							"{preview.storyTitle}": {preview.chapterCount}
+							{preview.chapterCount === 1 ? 'chapter' : 'chapters'},
+							{preview.sceneCount}
+							{preview.sceneCount === 1 ? 'scene' : 'scenes'},
+							{formatNumber(preview.words)} words{preview.assetCount > 0
+								? `, ${preview.assetCount} ${preview.assetCount === 1 ? 'image' : 'images'}`
+								: ''}.
+						</p>
+						{#if preview.titleTaken}
+							<p class="import-flag">
+								A story named "{preview.storyTitle}" already exists here; this import creates a
+								second one.
+							</p>
+						{/if}
+						{#if preview.assetCount > 0 && !preview.assetsConfigured}
+							<p class="import-flag">
+								Image storage is not configured, so the bundled images will not be imported.
+							</p>
+						{/if}
+						{#if preview.notes.length > 0}
+							<ul class="import-notes">
+								{#each preview.notes as note (note.kind + note.name)}
+									<li>
+										<strong>{note.name}</strong>
+										({note.kind === 'lore' ? 'lore entry' : note.kind})
+										{NOTE_OUTCOMES[note.outcome]}
+									</li>
+								{/each}
+							</ul>
+						{/if}
+						{#each preview.problems as problem (problem)}
+							<p class="import-flag">{problem}</p>
+						{/each}
+					</div>
+				{/if}
+			</div>
+
+			<div class="modal-foot">
+				<div class="modal-foot-note"></div>
+				{#if imported}
+					<button class="btn btn-sm btn-secondary" type="button" onclick={onClose}>Done</button>
+					<!-- eslint-disable-next-line svelte/no-navigation-without-resolve (slug known at runtime) -->
+					<a class="btn btn-sm btn-primary" href="/stories/{imported.slug}">Open the story</a>
+				{:else}
+					<button class="btn btn-sm btn-secondary" type="button" onclick={onClose}>Cancel</button>
+					<button
+						class="btn btn-sm btn-primary"
+						type="submit"
+						form="story-import-form"
+						formaction="{settingsPath}?/runImport"
+						disabled={!preview || busy}
+					>
+						Import story
+					</button>
+				{/if}
+			</div>
+		</div>
+	</div>
+{/if}
+
+<style>
+	.drop-zone {
+		display: grid;
+		justify-items: center;
+		gap: 8px;
+		padding: 22px 16px;
+		border: 1.5px dashed var(--border-strong);
+		border-radius: var(--radius-md);
+		background: var(--bg-inset);
+		text-align: center;
+	}
+	.drop-zone.over {
+		border-color: var(--accent);
+		background: color-mix(in oklab, var(--accent) 8%, var(--bg-inset));
+	}
+	.drop-file {
+		margin: 0;
+		font-size: var(--text-base);
+		font-weight: 600;
+		color: var(--text);
+		overflow-wrap: anywhere;
+	}
+	.drop-hint {
+		margin: 0;
+		font-size: var(--text-meta);
+		color: var(--text-faint);
+		max-width: 36ch;
+	}
+	.import-error {
+		color: var(--danger);
+		font-size: var(--text-sm);
+		margin: 10px 0 0;
+	}
+	.import-busy {
+		color: var(--text-muted);
+		font-size: var(--text-sm);
+		margin: 10px 0 0;
+	}
+	.import-report {
+		margin-top: 12px;
+		padding: 12px 14px;
+		border: 1px solid var(--border);
+		border-radius: var(--radius-md);
+		background: var(--bg-inset);
+		display: grid;
+		gap: 8px;
+		justify-items: start;
+	}
+	.import-report p {
+		margin: 0;
+		font-size: 13px;
+	}
+	.import-flag {
+		color: var(--text-muted);
+	}
+	.import-notes {
+		margin: 0;
+		padding-left: 18px;
+		font-size: 13px;
+		color: var(--text-muted);
+		display: grid;
+		gap: 2px;
+	}
+</style>
diff --git a/src/lib/docs/getting-started.md b/src/lib/docs/getting-started.md
index 49e6c9f..23b88a8 100644
--- a/src/lib/docs/getting-started.md
+++ b/src/lib/docs/getting-started.md
@@ -26,9 +26,9 @@ Right-click a scene in a story's sidebar to delete it; it sits in the story's "D
 
 Everything you write can leave as markdown: each story's settings offer a zip of its scenes, a universe's settings bundle the whole world, and your account page has a download of everything you own.
 
-A story export zip can also come back in. Open the universe's settings, go to "Import and export", and upload the zip under "Import a story". You get a preview first: how many chapters, scenes, and words are coming, and how each story note will be handled. A note whose character, place, or lore entry already exists in the universe (matched by name) attaches to it; a name with no match creates a new entry; a name shared by more than one entry is skipped, and the preview says so. Nothing is written until you press "Import story", and the import always creates a new story, even if one with the same title exists.
+A story export zip can also come back in. Choose "Import a story" from a New menu on the library, or from the universe's settings under "Import and export". A dialog opens: pick the zip or drag it in, and a preview appears at once - how many chapters, scenes, and words are coming, and how each story note will be handled. A note whose character, place, or lore entry already exists in the universe (matched by name) attaches to it; a name with no match creates a new entry; a name shared by more than one entry is skipped, and the preview says so. Nothing is written until you press "Import story", and the import always creates a new story, even if one with the same title exists.
 
-You can bring in a manuscript written elsewhere the same way. Upload a Word document (.docx) or an EPUB (.epub) in that same "Import a story" box, or choose "Import a story from a file..." from a New menu on the library, which opens that same box. Codex reads the chapters and scenes from the way the document marks them: chapter headings, "Chapter 1" lines, and scene breaks such as a centered row of asterisks. When a document has no such markers, the whole text comes in as a single scene that you can split up afterward. Pictures embedded in the document come along when image storage is set up; the preview tells you if any will be left out. As with a zip, you check the preview before anything is written.
+You can bring in a manuscript written elsewhere the same way. Pick a Word document (.docx) or an EPUB (.epub) in that same "Import a story" dialog. Codex reads the chapters and scenes from the way the document marks them: chapter headings, "Chapter 1" lines, and scene breaks such as a centered row of asterisks. When a document has no such markers, the whole text comes in as a single scene that you can split up afterward. Pictures embedded in the document come along when image storage is set up; the preview tells you if any will be left out. As with a zip, you check the preview before anything is written.
 
 ## Jumping around
 
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 8d46c6b..cadab9c 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { resolve } from '$app/paths';
 	import Icon from '$lib/components/Icon.svelte';
+	import ImportStoryModal from '$lib/components/ImportStoryModal.svelte';
 	import Landing from '$lib/components/Landing.svelte';
 	import NewMenu from '$lib/components/NewMenu.svelte';
 	import AppBar from '$lib/components/AppBar.svelte';
@@ -52,12 +53,13 @@
 		[...data.universes].sort((a, b) => Number(a.standalone) - Number(b.standalone))
 	);
 
-	// Importing lands a story in a universe, so the link carries one: the
+	// Importing lands a story in a universe, so the modal carries one: the
 	// standalone home when there is one, otherwise the first universe. With no
 	// universes at all there is nowhere to import into yet, and the row is left
-	// out rather than pointing at a page that cannot exist.
-	function importHref(slug: string): string {
-		return `${resolve('/universes/[id]/[[section]]', { id: slug, section: 'export' })}#import-story`;
+	// out rather than opening a dialog that cannot finish.
+	let importFor = $state<{ slug: string; name: string; standalone?: boolean } | null>(null);
+	function startImport(universe: { slug: string; name: string; standalone?: boolean }) {
+		importFor = { slug: universe.slug, name: universe.name, standalone: universe.standalone };
 	}
 	const libraryImportTarget = $derived(standaloneUniverse ?? data.universes[0]);
 
@@ -157,7 +159,7 @@
 								importItem={libraryImportTarget
 									? {
 											label: 'Import a story from a file...',
-											href: importHref(libraryImportTarget.slug)
+											onSelect: () => startImport(libraryImportTarget)
 										}
 									: undefined}
 								note={IMPORT_NOTE}
@@ -239,7 +241,7 @@
 										label: universe.standalone
 											? 'Import a story from a file...'
 											: 'Import a story into this universe...',
-										href: importHref(universe.slug)
+										onSelect: () => startImport(universe)
 									}}
 									note={universe.standalone ? STANDALONE_NOTE : UNIVERSE_STORY_NOTE}
 								/>
@@ -307,7 +309,7 @@
 											label: universe.standalone
 												? 'Import a story from a file...'
 												: 'Import a story into this universe...',
-											href: importHref(universe.slug)
+											onSelect: () => startImport(universe)
 										}}
 										note={universe.standalone ? STANDALONE_NOTE : UNIVERSE_STORY_NOTE}
 									/>
@@ -437,6 +439,8 @@
 			</div>
 		</div>
 	</div>
+
+	<ImportStoryModal universe={importFor} onClose={() => (importFor = null)} />
 {/snippet}
 
 <style>
diff --git a/src/routes/universes/[id]/[[section]]/+page.svelte b/src/routes/universes/[id]/[[section]]/+page.svelte
index ab8f80f..d4fec15 100644
--- a/src/routes/universes/[id]/[[section]]/+page.svelte
+++ b/src/routes/universes/[id]/[[section]]/+page.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
-	import { enhance } from '$app/forms';
 	import { invalidateAll } from '$app/navigation';
 	import { resolve } from '$app/paths';
 	import { page } from '$app/state';
 	import { CATEGORY_COLORS, entityColor } from '$lib/entity-color';
 	import Icon from '$lib/components/Icon.svelte';
+	import ImportStoryModal from '$lib/components/ImportStoryModal.svelte';
 	import ExportPanel from '$lib/components/ExportPanel.svelte';
 	import AppBar from '$lib/components/AppBar.svelte';
 	import { universePath } from '$lib/chrome';
@@ -33,16 +33,8 @@
 		});
 	}
 
-	// The import form is enhanced so the chosen file survives the preview
-	// step; the Import button then posts the same file to the run action.
-	let importBusy = $state(false);
-	const importPreview = $derived(form?.action === 'import' ? (form.preview ?? null) : null);
-	const importResult = $derived(form?.action === 'import' ? (form.imported ?? null) : null);
-	const NOTE_OUTCOMES = {
-		match: 'matches an existing entry; the note attaches to it.',
-		create: 'has no match; a new entry will be created.',
-		ambiguous: 'matches more than one entry; the note will be skipped.'
-	} as const;
+	// The import runs in the shared modal; opening it hands over this universe.
+	let importFor = $state<{ slug: string; name: string; standalone?: boolean } | null>(null);
 
 	const universeColor = $derived(entityColor(data.universe.name));
 
@@ -505,94 +497,22 @@
 				<h2 class="admin-block-title">Import a story</h2>
 				<p class="admin-block-sub">
 					Bring a manuscript in as a new story in this universe: a Codex export zip, a Word document
-					(.docx), or an EPUB (.epub). Chapters and scenes are detected from the document where it
-					marks them; otherwise the whole text comes in as a single scene. Upload the file, check
-					the preview, then import.
+					(.docx), or an EPUB (.epub). You check a preview of what is coming before anything is
+					written.
 				</p>
 			</div>
-			<form
-				method="POST"
-				action="?/previewImport"
-				enctype="multipart/form-data"
-				use:enhance={() => {
-					importBusy = true;
-					return async ({ update }) => {
-						importBusy = false;
-						await update({ reset: false });
-					};
-				}}
+			<button
+				class="btn btn-secondary"
+				type="button"
+				onclick={() =>
+					(importFor = {
+						slug: data.universe.slug,
+						name: data.universe.name,
+						standalone: data.universe.standalone
+					})}
 			>
-				<div class="import-pick">
-					<input type="file" name="archive" accept=".zip,application/zip,.docx,.epub" required />
-					<button class="btn btn-secondary" type="submit" disabled={importBusy}> Preview </button>
-				</div>
-				{#if form?.action === 'import' && form.message}
-					<p class="field-hint import-error" role="status">{form.message}</p>
-				{/if}
-				{#if importResult}
-					<div class="import-report" role="status">
-						<p>
-							Imported {importResult.sceneCount}
-							{importResult.sceneCount === 1 ? 'scene' : 'scenes'}{importResult.notesAttached > 0
-								? ` and ${importResult.notesAttached} ${importResult.notesAttached === 1 ? 'story note' : 'story notes'}`
-								: ''}{importResult.entitiesCreated > 0
-								? `, creating ${importResult.entitiesCreated} ${importResult.entitiesCreated === 1 ? 'new entry' : 'new entries'}`
-								: ''}.
-						</p>
-						{#each importResult.problems as problem (problem)}
-							<p class="import-flag">{problem}</p>
-						{/each}
-						<!-- eslint-disable svelte/no-navigation-without-resolve (slug known at runtime) -->
-						<a class="btn btn-secondary" href="/stories/{importResult.slug}">Open the story</a>
-						<!-- eslint-enable svelte/no-navigation-without-resolve -->
-					</div>
-				{:else if importPreview}
-					<div class="import-report">
-						<p>
-							"{importPreview.storyTitle}": {importPreview.chapterCount}
-							{importPreview.chapterCount === 1 ? 'chapter' : 'chapters'},
-							{importPreview.sceneCount}
-							{importPreview.sceneCount === 1 ? 'scene' : 'scenes'},
-							{formatNumber(importPreview.words)} words{importPreview.assetCount > 0
-								? `, ${importPreview.assetCount} ${importPreview.assetCount === 1 ? 'image' : 'images'}`
-								: ''}.
-						</p>
-						{#if importPreview.titleTaken}
-							<p class="import-flag">
-								A story named "{importPreview.storyTitle}" already exists here; this import creates
-								a second one.
-							</p>
-						{/if}
-						{#if importPreview.assetCount > 0 && !importPreview.assetsConfigured}
-							<p class="import-flag">
-								Image storage is not configured, so the bundled images will not be imported.
-							</p>
-						{/if}
-						{#if importPreview.notes.length > 0}
-							<ul class="import-notes">
-								{#each importPreview.notes as note (note.kind + note.name)}
-									<li>
-										<strong>{note.name}</strong>
-										({note.kind === 'lore' ? 'lore entry' : note.kind})
-										{NOTE_OUTCOMES[note.outcome]}
-									</li>
-								{/each}
-							</ul>
-						{/if}
-						{#each importPreview.problems as problem (problem)}
-							<p class="import-flag">{problem}</p>
-						{/each}
-						<button
-							class="btn btn-primary"
-							type="submit"
-							formaction="?/runImport"
-							disabled={importBusy}
-						>
-							Import story
-						</button>
-					</div>
-				{/if}
-			</form>
+				Import a story...
+			</button>
 		</div>
 
 		<div class="admin-block danger">
@@ -639,46 +559,9 @@
 	</section>
 </SettingsShell>
 
+<ImportStoryModal universe={importFor} onClose={() => (importFor = null)} />
+
 <style>
-	.import-pick {
-		display: flex;
-		align-items: center;
-		gap: 10px;
-		flex-wrap: wrap;
-	}
-	.import-pick input[type='file'] {
-		font-size: 13px;
-		color: var(--text-muted);
-	}
-	.import-error {
-		color: var(--danger);
-		margin: 8px 0 0;
-	}
-	.import-report {
-		margin-top: 12px;
-		padding: 12px 14px;
-		border: 1px solid var(--border);
-		border-radius: var(--radius-md);
-		background: var(--bg-inset);
-		display: grid;
-		gap: 8px;
-		justify-items: start;
-	}
-	.import-report p {
-		margin: 0;
-		font-size: 13px;
-	}
-	.import-flag {
-		color: var(--text-muted);
-	}
-	.import-notes {
-		margin: 0;
-		padding-left: 18px;
-		font-size: 13px;
-		color: var(--text-muted);
-		display: grid;
-		gap: 2px;
-	}
 	.category-tools {
 		display: inline-flex;
 		gap: 1px;

From dfbd5e2f81aba45d6578fac74f6546528c575e06 Mon Sep 17 00:00:00 2001
From: Mads Taanquist <hello@taaken.dk>
Date: Thu, 30 Jul 2026 20:49:54 +0200
Subject: [PATCH 2/2] Drive the Word-manuscript import spec through the modal

Missed when import-story.spec moved: this one now exercises the
settings-page entry point.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 e2e/import-document.spec.ts | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/e2e/import-document.spec.ts b/e2e/import-document.spec.ts
index 0c40811..8e9c93b 100644
--- a/e2e/import-document.spec.ts
+++ b/e2e/import-document.spec.ts
@@ -57,16 +57,21 @@ test('story import: preview and import a Word manuscript', async ({ page }) => {
 		title
 	);
 
+	// The settings page's Import button is the modal's second entry point;
+	// import-story.spec covers the library-menu one. Picking a file previews
+	// it at once.
 	await gotoReady(page, `/universes/docland-${stamp}`);
 	await page.getByRole('link', { name: 'Import and export' }).click();
-	await page.locator('input[name="archive"]').setInputFiles({
+	await page.getByRole('button', { name: 'Import a story...' }).click();
+	const dialog = page.getByRole('dialog', { name: 'Import a story' });
+	await expect(dialog).toBeVisible();
+	await dialog.locator('input[name="archive"]').setInputFiles({
 		name: 'manuscript.docx',
 		mimeType: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
 		buffer: docx
 	});
-	await page.getByRole('button', { name: 'Preview' }).click();
 
-	const report = page.locator('.import-report');
+	const report = dialog.locator('.import-report');
 	await expect(report).toContainText(`"${title}": 2 chapters, 3 scenes`);
 
 	await page.getByRole('button', { name: 'Import story' }).click();