From d2892353cb199032052b116395c285462ebc52bf Mon Sep 17 00:00:00 2001
From: patrick <patrickjaroszewski@protonmail.com>
Date: Tue, 11 Aug 2026 20:23:31 -0400
Subject: [PATCH] fix: reset the edit dialog when switching books

---
 .../lib/components/forms/edit-book/edit-book.svelte    | 10 ++++++++++
 .../lib/components/forms/edit-book/edit-cover.svelte   |  3 ++-
 .../components/forms/edit-book/edit-metadata.svelte    | 10 ++++++----
 3 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/frontend/src/lib/components/forms/edit-book/edit-book.svelte b/frontend/src/lib/components/forms/edit-book/edit-book.svelte
index 1b0a5e0..cfcc300 100644
--- a/frontend/src/lib/components/forms/edit-book/edit-book.svelte
+++ b/frontend/src/lib/components/forms/edit-book/edit-book.svelte
@@ -9,8 +9,17 @@
 	let { book, open = $bindable() }: { book?: Book; open: boolean } = $props();
 </script>
 
+<!--
+	This dialog is mounted once, in (root)/(library)/+layout.svelte, and `book`
+	changes underneath it as different books are edited. bookToEdit is never
+	cleared, so {#if book} stays true and the tab forms never unmount — they seed
+	local state from `book` on mount, so without this key you would open Edit on a
+	second book and see the first book's authors, tags and cover, then save them
+	onto the wrong record. Keying on the id remounts the forms per book.
+-->
 <Dialog.Root bind:open>
 	{#if book}
+		{#key book.id}
 		<Dialog.Content class="sm:max-w-xl">
 			<Tabs.Root value="metadata" class="h-[500px] max-w-xl py-4 md:h-[700px]">
 				<Tabs.List class="grid w-full grid-cols-3">
@@ -35,5 +44,6 @@
 				</Tabs.Content>
 			</Tabs.Root>
 		</Dialog.Content>
+		{/key}
 	{/if}
 </Dialog.Root>
diff --git a/frontend/src/lib/components/forms/edit-book/edit-cover.svelte b/frontend/src/lib/components/forms/edit-book/edit-cover.svelte
index db2578c..86b31f4 100644
--- a/frontend/src/lib/components/forms/edit-book/edit-cover.svelte
+++ b/frontend/src/lib/components/forms/edit-book/edit-cover.svelte
@@ -18,7 +18,8 @@
 	let { book, open = $bindable() }: { book: Book; open: boolean } = $props();
 
 	let formEl = $state<HTMLFormElement>();
-	let coverImagePreview = $state(`/api/${book.cover_image}`);
+	// Seeded once per mount — see the key in edit-book.svelte
+	let coverImagePreview = $state(untrack(() => `/api/${book.cover_image}`));
 	let autoUploadOnDrop = $state(true);
 
 	const onUpload: FileDropZoneProps['onUpload'] = async (uploadedFiles) => {
diff --git a/frontend/src/lib/components/forms/edit-book/edit-metadata.svelte b/frontend/src/lib/components/forms/edit-book/edit-metadata.svelte
index 7b935be..5345d6c 100644
--- a/frontend/src/lib/components/forms/edit-book/edit-metadata.svelte
+++ b/frontend/src/lib/components/forms/edit-book/edit-metadata.svelte
@@ -14,10 +14,12 @@
 
 	let { book, open = $bindable() }: { book: Book; open: boolean } = $props();
 
-	let authors = $state(book.authors.map((author) => author.name) || []);
-	let tags = $state(book.tags.map((tag) => tag.name) || []);
-	let identifierKeys = $state(Object.keys(book.identifiers));
-	let identifierValues = $state(Object.values(book.identifiers));
+	// Seeded once per mount; edit-book.svelte keys this form on book.id so a
+	// different book gets a fresh form rather than the previous book's values.
+	let authors = $state(untrack(() => book.authors.map((author) => author.name) || []));
+	let tags = $state(untrack(() => book.tags.map((tag) => tag.name) || []));
+	let identifierKeys = $state(untrack(() => Object.keys(book.identifiers)));
+	let identifierValues = $state(untrack(() => Object.values(book.identifiers)));
 
 	function handleAddIdentifier() {
 		// Add empty strings to both arrays