fix: resolve recipe edit modal issues and improve dark mode visibility

- Migrate TranslationApproval and edit page to Svelte 5 runes ($props, $state, $derived) - Fix empty modal issue by eagerly initializing editableEnglish from germanData - Fix modal state isolation by adding language-specific modal IDs (en/de) - Resolve cross-contamination where English modals opened German ingredient/instruction editors - Improve button icon visibility in dark mode by setting white fill color - Replace createEventDispatcher with callback props for Svelte 5 compatibility
2026-01-10 10:47:55 +01:00
parent 1628f8ba23
commit 2c370363f5
5 changed files with 249 additions and 233 deletions
--- a/src/lib/components/CreateIngredientList.svelte
+++ b/src/lib/components/CreateIngredientList.svelte
@@ -191,7 +191,7 @@ function editItemFromReference(list_index: number, position: 'before' | 'after',
 		ingredient_index: "",
 	};

-	const modal_el = document.querySelector("#edit_ingredient_modal") as HTMLDialogElement;
+	const modal_el = document.querySelector(`#edit_ingredient_modal-${lang}`) as HTMLDialogElement;
 	if (modal_el) {
 		modal_el.showModal();
 	}
@@ -214,7 +214,7 @@ function openAddToReferenceModal(list_index: number, position: 'before' | 'after
 		list_index: "",
 		ingredient_index: "",
 	};
-	const modal_el = document.querySelector("#edit_ingredient_modal") as HTMLDialogElement;
+	const modal_el = document.querySelector(`#edit_ingredient_modal-${lang}`) as HTMLDialogElement;
 	if (modal_el) {
 		modal_el.showModal();
 	}
@@ -231,12 +231,12 @@ function get_sublist_index(sublist_name, list){
 export function show_modal_edit_subheading_ingredient(list_index){
 	edit_heading.name = ingredients[list_index].name
 	edit_heading.list_index = list_index
-	const el = document.querySelector('#edit_subheading_ingredient_modal')
+	const el = document.querySelector(`#edit_subheading_ingredient_modal-${lang}`)
 	el.showModal()
 }
 export function edit_subheading_and_close_modal(){
 	ingredients[edit_heading.list_index].name = edit_heading.name
-	const el = document.querySelector('#edit_subheading_ingredient_modal')
+	const el = document.querySelector(`#edit_subheading_ingredient_modal-${lang}`)
 	el.close()
 }

@@ -286,7 +286,7 @@ export function show_modal_edit_ingredient(list_index, ingredient_index){
 	edit_ingredient.list_index = list_index
 	edit_ingredient.ingredient_index = ingredient_index
 	edit_ingredient.sublist = ingredients[list_index].name
-	const modal_el = document.querySelector("#edit_ingredient_modal");
+	const modal_el = document.querySelector(`#edit_ingredient_modal-${lang}`);
 	modal_el.showModal();
 }
 export function edit_ingredient_and_close_modal(){
@@ -301,7 +301,7 @@ export function edit_ingredient_and_close_modal(){
 				editing: false,
 				item_index: -1
 			};
-			const modal_el = document.querySelector("#edit_ingredient_modal") as HTMLDialogElement;
+			const modal_el = document.querySelector(`#edit_ingredient_modal-${lang}`) as HTMLDialogElement;
 			if (modal_el) {
 				setTimeout(() => modal_el.close(), 0);
 			}
@@ -341,7 +341,7 @@ export function edit_ingredient_and_close_modal(){
 		}
 		ingredients[edit_ingredient.list_index].name = edit_ingredient.sublist
 	}
-	const modal_el = document.querySelector("#edit_ingredient_modal") as HTMLDialogElement;
+	const modal_el = document.querySelector(`#edit_ingredient_modal-${lang}`) as HTMLDialogElement;
 	if (modal_el) {
 		// Defer closing to next tick to ensure all bindings are updated
 		setTimeout(() => modal_el.close(), 0);
@@ -887,7 +887,7 @@ h3{
 		</button>
 	</div>
 </div>
-<dialog id=edit_ingredient_modal oncancel={handleIngredientModalCancel}>
+<dialog id="edit_ingredient_modal-{lang}" oncancel={handleIngredientModalCancel}>
 	<h2>{t[lang].editIngredient}</h2>
 	<div class=adder>
 	<input class=category type="text" bind:value={edit_ingredient.sublist} placeholder={t[lang].categoryOptional}>
@@ -902,7 +902,7 @@ h3{
 	</div>
 </dialog>

-<dialog id=edit_subheading_ingredient_modal>
+<dialog id="edit_subheading_ingredient_modal-{lang}">
 	<h2>{t[lang].renameCategory}</h2>
 	<div class=heading_wrapper>
 		<input class=heading type="text" bind:value={edit_heading.name} onkeydown={(event) => do_on_key(event, 'Enter', false, edit_subheading_and_close_modal)} >
--- a/src/lib/components/CreateStepList.svelte
+++ b/src/lib/components/CreateStepList.svelte
@@ -186,7 +186,7 @@ function editStepFromReference(list_index: number, position: 'before' | 'after',
 		step_index: 0,
 	};

-	const modal_el = document.querySelector("#edit_step_modal") as HTMLDialogElement;
+	const modal_el = document.querySelector(`#edit_step_modal-${lang}`) as HTMLDialogElement;
 	if (modal_el) {
 		modal_el.showModal();
 	}
@@ -207,7 +207,7 @@ function openAddToReferenceModal(list_index: number, position: 'before' | 'after
 		list_index: 0,
 		step_index: 0,
 	};
-	const modal_el = document.querySelector("#edit_step_modal") as HTMLDialogElement;
+	const modal_el = document.querySelector(`#edit_step_modal-${lang}`) as HTMLDialogElement;
 	if (modal_el) {
 		modal_el.showModal();
 	}
@@ -270,7 +270,7 @@ export function show_modal_edit_step(list_index, step_index){
 	}
 	edit_step.list_index = list_index
 	edit_step.step_index = step_index
-	const modal_el = document.querySelector("#edit_step_modal");
+	const modal_el = document.querySelector(`#edit_step_modal-${lang}`);
 	modal_el.showModal();
 }

@@ -286,7 +286,7 @@ export function edit_step_and_close_modal(){
 				editing: false,
 				step_index: -1
 			};
-			const modal_el = document.querySelector("#edit_step_modal") as HTMLDialogElement;
+			const modal_el = document.querySelector(`#edit_step_modal-${lang}`) as HTMLDialogElement;
 			if (modal_el) {
 				setTimeout(() => modal_el.close(), 0);
 			}
@@ -315,7 +315,7 @@ export function edit_step_and_close_modal(){
 		// Normal edit behavior
 		instructions[edit_step.list_index].steps[edit_step.step_index] = edit_step.step
 	}
-	const modal_el = document.querySelector("#edit_step_modal") as HTMLDialogElement;
+	const modal_el = document.querySelector(`#edit_step_modal-${lang}`) as HTMLDialogElement;
 	if (modal_el) {
 		// Defer closing to next tick to ensure all bindings are updated
 		setTimeout(() => modal_el.close(), 0);
@@ -325,7 +325,7 @@ export function edit_step_and_close_modal(){
 export function show_modal_edit_subheading_step(list_index){
 	edit_heading.name = instructions[list_index].name
 	edit_heading.list_index = list_index
-	const el = document.querySelector('#edit_subheading_steps_modal')
+	const el = document.querySelector(`#edit_subheading_steps_modal-${lang}`)
 	el.showModal()
 }

@@ -942,7 +942,7 @@ h3{

 </div>
 </div>
-<dialog id=edit_step_modal oncancel={handleStepModalCancel}>
+<dialog id="edit_step_modal-{lang}" oncancel={handleStepModalCancel}>
 	<h2>{t[lang].editStep}</h2>
 	<div class=adder>
 	<input class=category type="text" bind:value={edit_step.name} placeholder={t[lang].subcategoryOptional} onkeydown={(event) => do_on_key(event, 'Enter', false , edit_step_and_close_modal)}>
@@ -955,7 +955,7 @@ h3{
 	</div>
 </dialog>

-<dialog id=edit_subheading_steps_modal>
+<dialog id="edit_subheading_steps_modal-{lang}">
 	<h2>{t[lang].renameCategory}</h2>
 	<div class=heading_wrapper>
 		<input class="heading" type="text" bind:value={edit_heading.name} onkeydown={(event) => do_on_key(event, 'Enter', false, edit_subheading_steps_and_close_modal)}>
--- a/src/lib/components/TranslationApproval.svelte
+++ b/src/lib/components/TranslationApproval.svelte
@@ -1,22 +1,38 @@
 <script lang="ts">
-	import { createEventDispatcher } from 'svelte';
 	import type { TranslatedRecipeType } from '$types/types';
 	import TranslationFieldComparison from './TranslationFieldComparison.svelte';
 	import CreateIngredientList from './CreateIngredientList.svelte';
 	import CreateStepList from './CreateStepList.svelte';
 	import GenerateAltTextButton from './GenerateAltTextButton.svelte';

-	export let germanData: any;
-	export let englishData: TranslatedRecipeType | null = null;
-	export let changedFields: string[] = [];
-	export let isEditMode: boolean = false; // true when editing existing recipe
+	interface Props {
+		germanData: any;
+		englishData?: TranslatedRecipeType | null;
+		changedFields?: string[];
+		isEditMode?: boolean;
+		oldRecipeData?: any;
+		onapproved?: (event: CustomEvent) => void;
+		onskipped?: () => void;
+		oncancelled?: () => void;
+		onforceFullRetranslation?: () => void;
+	}

-	const dispatch = createEventDispatcher();
+	let {
+		germanData,
+		englishData = null,
+		changedFields = [],
+		isEditMode = false,
+		oldRecipeData = null,
+		onapproved,
+		onskipped,
+		oncancelled,
+		onforceFullRetranslation
+	}: Props = $props();

 	type TranslationState = 'idle' | 'translating' | 'preview' | 'approved' | 'error';
-	let translationState: TranslationState = englishData ? 'preview' : 'idle';
-	let errorMessage: string = '';
-	let validationErrors: string[] = [];
+	let translationState = $state<TranslationState>(englishData ? 'preview' : 'idle');
+	let errorMessage = $state('');
+	let validationErrors = $state<string[]>([]);

 	// Helper function to initialize images array for English translation
 	function initializeImagesArray(germanImages: any[]): any[] {
@@ -27,22 +43,26 @@
 		}));
 	}

-	// Editable English data (clone of englishData or initialized from germanData)
-	let editableEnglish: any = englishData ? {
-		...englishData,
-		// Ensure images array exists and matches German images length
-		images: englishData.images || initializeImagesArray(germanData.images || [])
-	} : null;
-
-	// Store old recipe data for granular change detection
-	export let oldRecipeData: any = null;
+	// Eagerly initialize editableEnglish from germanData if no English translation exists
+	let editableEnglish = $state<any>(
+		englishData ? {
+			...englishData,
+			images: englishData.images || initializeImagesArray(germanData.images || [])
+		} : {
+			...germanData,
+			translationStatus: 'pending',
+			ingredients: JSON.parse(JSON.stringify(germanData.ingredients || [])),
+			instructions: JSON.parse(JSON.stringify(germanData.instructions || [])),
+			images: initializeImagesArray(germanData.images || [])
+		}
+	);

 	// Translation metadata (tracks which items were re-translated)
-	let translationMetadata: any = null;
+	let translationMetadata = $state<any>(null);

 	// Track base recipes that need translation
-	let untranslatedBaseRecipes: { shortName: string, name: string }[] = [];
-	let checkingBaseRecipes = false;
+	let untranslatedBaseRecipes = $state<{ shortName: string, name: string }[]>([]);
+	let checkingBaseRecipes = $state(false);

 	// Sync base recipe references from German to English
 	async function syncBaseRecipeReferences() {
@@ -74,17 +94,8 @@
 			}
 		});

-		// If no base recipes in German, just initialize editableEnglish from German data if needed
+		// If no base recipes in German, we're done
 		if (germanBaseRecipeShortNames.size === 0) {
-			if (!editableEnglish) {
-				editableEnglish = {
-					...germanData,
-					translationStatus: 'pending',
-					ingredients: JSON.parse(JSON.stringify(germanData.ingredients || [])),
-					instructions: JSON.parse(JSON.stringify(germanData.instructions || [])),
-					images: editableEnglish?.images || initializeImagesArray(germanData.images || [])
-				};
-			}
 			checkingBaseRecipes = false;
 			return;
 		}
@@ -120,96 +131,68 @@
 			return;
 		}

-		// Now merge German base recipe references into editableEnglish
-		// This works for both new translations and existing translations
+		// Merge German base recipe references into editableEnglish
+		// Update ingredients with English base recipe names
+		editableEnglish.ingredients = germanData.ingredients.map((germanIng: any, index: number) => {
+			if (germanIng.type === 'reference' && germanIng.baseRecipeRef) {
+				const shortName = getShortName(germanIng.baseRecipeRef);
+				const translation = baseRecipeTranslations.get(shortName);
+				const englishIng = editableEnglish.ingredients[index];

-		if (!editableEnglish) {
-			// No existing English translation - create from German structure with English base recipe names
-			editableEnglish = {
-				...germanData,
-				translationStatus: 'pending',
-				ingredients: JSON.parse(JSON.stringify(germanData.ingredients || [])).map((ing: any) => {
-					if (ing.type === 'reference' && ing.baseRecipeRef) {
-						const shortName = getShortName(ing.baseRecipeRef);
-						const translation = baseRecipeTranslations.get(shortName);
-						return translation ? { ...ing, name: translation.enName } : ing;
-					}
-					return ing;
-				}),
-				instructions: JSON.parse(JSON.stringify(germanData.instructions || [])).map((inst: any) => {
-					if (inst.type === 'reference' && inst.baseRecipeRef) {
-						const shortName = getShortName(inst.baseRecipeRef);
-						const translation = baseRecipeTranslations.get(shortName);
-						return translation ? { ...inst, name: translation.enName } : inst;
-					}
-					return inst;
-				}),
-				images: initializeImagesArray(germanData.images || [])
-			};
-		} else {
-			// Existing English translation - merge German structure with English translations
-			// Use German structure but keep English translations where they exist
-			editableEnglish = {
-				...editableEnglish,
-				ingredients: germanData.ingredients.map((germanIng: any, index: number) => {
-					if (germanIng.type === 'reference' && germanIng.baseRecipeRef) {
-						// This is a base recipe reference - use English base recipe name
-						const shortName = getShortName(germanIng.baseRecipeRef);
-						const translation = baseRecipeTranslations.get(shortName);
-						const englishIng = editableEnglish.ingredients[index];
+				// If English already has this reference at same position, keep it
+				if (englishIng?.type === 'reference' && englishIng.baseRecipeRef === germanIng.baseRecipeRef) {
+					return englishIng;
+				}

-						// If English already has this reference at same position, keep it
-						if (englishIng?.type === 'reference' && englishIng.baseRecipeRef === germanIng.baseRecipeRef) {
-							return englishIng;
-						}
+				// Otherwise, create new reference with English base recipe name
+				return translation ? { ...germanIng, name: translation.enName } : germanIng;
+			} else {
+				// Regular ingredient section - keep existing English translation if it exists
+				const englishIng = editableEnglish.ingredients[index];
+				if (englishIng && englishIng.type !== 'reference') {
+					return englishIng;
+				}
+				// If no English translation exists, use German structure (will be translated later)
+				return germanIng;
+			}
+		});

-						// Otherwise, create new reference with English base recipe name
-						return translation ? { ...germanIng, name: translation.enName } : germanIng;
-					} else {
-						// Regular ingredient section - keep existing English translation if it exists
-						const englishIng = editableEnglish.ingredients[index];
-						if (englishIng && englishIng.type !== 'reference') {
-							return englishIng;
-						}
-						// If no English translation exists, use German structure (will be translated later)
-						return germanIng;
-					}
-				}),
-				instructions: germanData.instructions.map((germanInst: any, index: number) => {
-					if (germanInst.type === 'reference' && germanInst.baseRecipeRef) {
-						// This is a base recipe reference - use English base recipe name
-						const shortName = getShortName(germanInst.baseRecipeRef);
-						const translation = baseRecipeTranslations.get(shortName);
-						const englishInst = editableEnglish.instructions[index];
+		// Update instructions with English base recipe names
+		editableEnglish.instructions = germanData.instructions.map((germanInst: any, index: number) => {
+			if (germanInst.type === 'reference' && germanInst.baseRecipeRef) {
+				const shortName = getShortName(germanInst.baseRecipeRef);
+				const translation = baseRecipeTranslations.get(shortName);
+				const englishInst = editableEnglish.instructions[index];

-						// If English already has this reference at same position, keep it
-						if (englishInst?.type === 'reference' && englishInst.baseRecipeRef === germanInst.baseRecipeRef) {
-							return englishInst;
-						}
+				// If English already has this reference at same position, keep it
+				if (englishInst?.type === 'reference' && englishInst.baseRecipeRef === germanInst.baseRecipeRef) {
+					return englishInst;
+				}

-						// Otherwise, create new reference with English base recipe name
-						return translation ? { ...germanInst, name: translation.enName } : germanInst;
-					} else {
-						// Regular instruction section - keep existing English translation if it exists
-						const englishInst = editableEnglish.instructions[index];
-						if (englishInst && englishInst.type !== 'reference') {
-							return englishInst;
-						}
-						// If no English translation exists, use German structure (will be translated later)
-						return germanInst;
-					}
-				}),
-				// Sync images array - keep existing English alt/caption or initialize empty
-				images: germanData.images?.map((germanImg: any, index: number) => {
-					const existingEnImage = editableEnglish.images?.[index];
-					return existingEnImage || { alt: '', caption: '' };
-				}) || []
-			};
-		}
+				// Otherwise, create new reference with English base recipe name
+				return translation ? { ...germanInst, name: translation.enName } : germanInst;
+			} else {
+				// Regular instruction section - keep existing English translation if it exists
+				const englishInst = editableEnglish.instructions[index];
+				if (englishInst && englishInst.type !== 'reference') {
+					return englishInst;
+				}
+				// If no English translation exists, use German structure (will be translated later)
+				return germanInst;
+			}
+		});
+
+		// Sync images array - keep existing English alt/caption or initialize empty
+		editableEnglish.images = germanData.images?.map((germanImg: any, index: number) => {
+			const existingEnImage = editableEnglish.images?.[index];
+			return existingEnImage || { alt: '', caption: '' };
+		}) || [];
 	}

-	// Always sync base recipe references when component mounts
-	syncBaseRecipeReferences();
+	// Run base recipe check in background (non-blocking)
+	$effect(() => {
+		syncBaseRecipeReferences();
+	});

 	// Handle auto-translate button click
 	async function handleAutoTranslate() {
@@ -251,9 +234,6 @@

 			translationState = 'preview';

-			// Notify parent component
-			dispatch('translated', { translatedRecipe: editableEnglish });
-
 		} catch (error: any) {
 			console.error('Translation error:', error);
 			translationState = 'error';
@@ -262,30 +242,26 @@
 	}

 	// Handle field changes from TranslationFieldComparison components
-	function handleFieldChange(event: CustomEvent) {
-		const { field, value } = event.detail;
-		if (editableEnglish) {
-			// Special handling for tags (comma-separated string -> array)
-			if (field === 'tags') {
-				editableEnglish[field] = value.split(',').map((t: string) => t.trim()).filter((t: string) => t);
+	function handleFieldChange(value: string, field: string) {
+		// Special handling for tags (comma-separated string -> array)
+		if (field === 'tags') {
+			editableEnglish[field] = value.split(',').map((t: string) => t.trim()).filter((t: string) => t);
+		}
+		// Handle nested fields (e.g., baking.temperature, fermentation.bulk)
+		else if (field.includes('.')) {
+			const [parent, child] = field.split('.');
+			if (!editableEnglish[parent]) {
+				editableEnglish[parent] = {};
 			}
-			// Handle nested fields (e.g., baking.temperature, fermentation.bulk)
-			else if (field.includes('.')) {
-				const [parent, child] = field.split('.');
-				if (!editableEnglish[parent]) {
-					editableEnglish[parent] = {};
-				}
-				editableEnglish[parent][child] = value;
-			} else {
-				editableEnglish[field] = value;
-			}
-			editableEnglish = editableEnglish; // Trigger reactivity
+			editableEnglish[parent][child] = value;
+		} else {
+			editableEnglish[field] = value;
 		}
 	}

 	// Create add_info object for CreateStepList that references editableEnglish properties
 	// This allows CreateStepList to modify the values directly
-	$: englishAddInfo = editableEnglish ? {
+	let englishAddInfo = $derived({
 		get preparation() { return editableEnglish.preparation || ''; },
 		set preparation(value) { editableEnglish.preparation = value; },
 		fermentation: {
@@ -321,7 +297,7 @@
 		set total_time(value) { editableEnglish.total_time = value; },
 		get cooking() { return editableEnglish.cooking || ''; },
 		set cooking(value) { editableEnglish.cooking = value; },
-	} : null;
+	});

 	// Handle approval
 	function handleApprove() {
@@ -343,31 +319,39 @@
 		}

 		translationState = 'approved';
-		dispatch('approved', {
-			translatedRecipe: {
-				...editableEnglish,
-				translationStatus: 'approved',
-				lastTranslated: new Date(),
-				changedFields: [],
+		onapproved?.(new CustomEvent('approved', {
+			detail: {
+				translatedRecipe: {
+					...editableEnglish,
+					translationStatus: 'approved',
+					lastTranslated: new Date(),
+					changedFields: [],
+				}
 			}
-		});
+		}));
 	}

 	// Handle skip translation
 	function handleSkip() {
-		dispatch('skipped');
+		onskipped?.();
 	}

 	// Handle cancel
 	function handleCancel() {
 		translationState = 'idle';
-		editableEnglish = null;
-		dispatch('cancelled');
+		editableEnglish = {
+			...germanData,
+			translationStatus: 'pending',
+			ingredients: JSON.parse(JSON.stringify(germanData.ingredients || [])),
+			instructions: JSON.parse(JSON.stringify(germanData.instructions || [])),
+			images: initializeImagesArray(germanData.images || [])
+		};
+		oncancelled?.();
 	}

 	// Handle force full retranslation
 	function handleForceFullRetranslation() {
-		dispatch('forceFullRetranslation');
+		onforceFullRetranslation?.();
 	}

 	// Get status badge color
@@ -463,6 +447,16 @@
 	}
 }

+/* Fix button icon visibility in dark mode */
+@media (prefers-color-scheme: dark) {
+	.list-wrapper :global(svg) {
+		fill: white !important;
+	}
+	.list-wrapper :global(.button_arrow) {
+		fill: var(--nord4) !important;
+	}
+}
+
 .column-header {
 	font-weight: 700;
 	font-size: 1.1rem;
@@ -687,7 +681,7 @@ button:disabled {
 					englishValue={editableEnglish?.name || ''}
 					fieldName="name"
 					readonly={false}
-					on:change={handleFieldChange}
+					onchange={(value) => handleFieldChange(value, 'name')}
 				/>
 			</div>

@@ -698,7 +692,7 @@ button:disabled {
 					englishValue={editableEnglish?.short_name || ''}
 					fieldName="short_name"
 					readonly={false}
-					on:change={handleFieldChange}
+					onchange={(value) => handleFieldChange(value, 'short_name')}
 				/>
 			</div>

@@ -710,7 +704,7 @@ button:disabled {
 					fieldName="description"
 					readonly={false}
 					multiline={true}
-					on:change={handleFieldChange}
+					onchange={(value) => handleFieldChange(value, 'description')}
 				/>
 			</div>

@@ -721,7 +715,7 @@ button:disabled {
 					englishValue={editableEnglish?.category || ''}
 					fieldName="category"
 					readonly={false}
-					on:change={handleFieldChange}
+					onchange={(value) => handleFieldChange(value, 'category')}
 				/>
 			</div>

@@ -733,7 +727,7 @@ button:disabled {
 						englishValue={editableEnglish.tags.join(', ')}
 						fieldName="tags"
 						readonly={false}
-						on:change={handleFieldChange}
+						onchange={(value) => handleFieldChange(value, 'tags')}
 					/>
 				</div>
 			{/if}
@@ -747,7 +741,7 @@ button:disabled {
 						fieldName="preamble"
 						readonly={false}
 						multiline={true}
-						on:change={handleFieldChange}
+						onchange={(value) => handleFieldChange(value, 'preamble')}
 					/>
 				</div>
 			{/if}
@@ -761,7 +755,7 @@ button:disabled {
 						fieldName="note"
 						readonly={false}
 						multiline={true}
-						on:change={handleFieldChange}
+						onchange={(value) => handleFieldChange(value, 'note')}
 					/>
 				</div>
 			{/if}
@@ -774,7 +768,7 @@ button:disabled {
 						englishValue={editableEnglish.portions}
 						fieldName="portions"
 						readonly={false}
-						on:change={handleFieldChange}
+						onchange={(value) => handleFieldChange(value, 'portions')}
 					/>
 				</div>
 			{/if}
@@ -875,7 +869,7 @@ button:disabled {
 						fieldName="addendum"
 						readonly={false}
 						multiline={true}
-						on:change={handleFieldChange}
+						onchange={(value) => handleFieldChange(value, 'addendum')}
 					/>
 				</div>
 			{/if}
--- a/src/lib/components/TranslationFieldComparison.svelte
+++ b/src/lib/components/TranslationFieldComparison.svelte
@@ -1,21 +1,27 @@
 <script lang="ts">
-	import { createEventDispatcher } from 'svelte';
+	interface Props {
+		label: string;
+		germanValue: string;
+		englishValue: string;
+		fieldName: string;
+		readonly?: boolean;
+		multiline?: boolean;
+		onchange?: (value: string) => void;
+	}

-	export let label: string;
-	export let germanValue: string;
-	export let englishValue: string;
-	export let fieldName: string;
-	export let readonly: boolean = false;
-	export let multiline: boolean = false;
-
-	const dispatch = createEventDispatcher();
+	let {
+		label,
+		germanValue,
+		englishValue,
+		fieldName,
+		readonly = false,
+		multiline = false,
+		onchange
+	}: Props = $props();

 	function handleInput(event: Event) {
 		const target = event.target as HTMLInputElement | HTMLTextAreaElement;
-		dispatch('change', {
-			field: fieldName,
-			value: target.value
-		});
+		onchange?.(target.value);
 	}
 </script>

--- a/src/routes/[recipeLang=recipeLang]/edit/[name]/+page.svelte
+++ b/src/routes/[recipeLang=recipeLang]/edit/[name]/+page.svelte
@@ -8,53 +8,64 @@
 	import '$lib/css/nordtheme.css'
 	import { redirect } from '@sveltejs/kit';
 	import EditRecipeNote from '$lib/components/EditRecipeNote.svelte';
+	import type { PageData } from './$types';
+	import CardAdd from '$lib/components/CardAdd.svelte';
+	import CreateIngredientList from '$lib/components/CreateIngredientList.svelte';
+	import CreateStepList from '$lib/components/CreateStepList.svelte';
+	import { season } from '$lib/js/season_store';
+	import { portions } from '$lib/js/portions_store';
+	import { img } from '$lib/js/img_store';

-    	export let data: PageData;
-	let preamble = data.recipe.preamble
-	let addendum = data.recipe.addendum
-	let image_preview_url="https://bocken.org/static/rezepte/thumb/" + (data.recipe.images?.[0]?.mediapath || `${data.recipe.short_name}.webp`);
-	let note = data.recipe.note
+	let { data }: { data: PageData } = $props();
+
+	let preamble = $state(data.recipe.preamble);
+	let addendum = $state(data.recipe.addendum);
+	let image_preview_url = $state("https://bocken.org/static/rezepte/thumb/" + (data.recipe.images?.[0]?.mediapath || `${data.recipe.short_name}.webp`));
+	let note = $state(data.recipe.note);

 	// Translation workflow state
-	let showTranslationWorkflow = false;
-	let translationData: any = data.recipe.translations?.en || null;
-	let changedFields: string[] = [];
+	let showTranslationWorkflow = $state(false);
+	let translationData = $state<any>(data.recipe.translations?.en || null);
+	let changedFields = $state<string[]>([]);

 	// Store original recipe data for change detection
 	const originalRecipe = JSON.parse(JSON.stringify(data.recipe));

-	import { season } from '$lib/js/season_store';
-	import { portions } from '$lib/js/portions_store';
-
-	portions.update(() => data.recipe.portions)
-	let portions_local
-	portions.subscribe((p) => {
-		portions_local = p
+	portions.update(() => data.recipe.portions);
+	let portions_local = $state<any>(data.recipe.portions);
+	$effect(() => {
+		portions.subscribe((p) => {
+			portions_local = p;
 		});
-
-	season.update(() => data.recipe.season)
-	let season_local
-	season.subscribe((s) => {
-		season_local = s
 	});

+	season.update(() => data.recipe.season);
+	let season_local = $state<any>(data.recipe.season);
+	$effect(() => {
+		season.subscribe((s) => {
+			season_local = s;
+		});
+	});

-	import { img } from '$lib/js/img_store';
-	let img_local
-	img.update(() => "")
-	img.subscribe((i) => {
-		img_local = i});
+	let img_local = $state<string>('');
+	img.update(() => '');
+	$effect(() => {
+		img.subscribe((i) => {
+			img_local = i;
+		});
+	});

-	let old_short_name = data.recipe.short_name
+	let old_short_name = $state(data.recipe.short_name);

-	export let card_data ={
+	let card_data = $state({
 		icon: data.recipe.icon,
 		category: data.recipe.category,
 		name: data.recipe.name,
 		description: data.recipe.description,
 		tags: data.recipe.tags,
-	}
-	export let add_info ={
+	});
+
+	let add_info = $state({
 		preparation: data.recipe.preparation,
 		fermentation: {
 			bulk: data.recipe.fermentation.bulk,
@@ -67,23 +78,17 @@
 		},
 		total_time: data.recipe.total_time,
 		cooking: data.recipe.cooking,
-	}
+	});

-	let images = data.recipe.images
+	let images = $state(data.recipe.images);

-	let short_name = data.recipe.short_name
-	let datecreated = data.recipe.datecreated
-	let datemodified = new Date()
-	let isBaseRecipe = data.recipe.isBaseRecipe || false
+	let short_name = $state(data.recipe.short_name);
+	let datecreated = $state(data.recipe.datecreated);
+	let datemodified = $state(new Date());
+	let isBaseRecipe = $state(data.recipe.isBaseRecipe || false);

-    	import type { PageData } from './$types';
-	import CardAdd from '$lib/components/CardAdd.svelte';
-
-	import CreateIngredientList from '$lib/components/CreateIngredientList.svelte';
-	export let ingredients = data.recipe.ingredients
-
-	import CreateStepList from '$lib/components/CreateStepList.svelte';
-	export let instructions = data.recipe.instructions
+	let ingredients = $state(data.recipe.ingredients);
+	let instructions = $state(data.recipe.instructions);


 	function get_season(){
@@ -389,6 +394,17 @@ input:focus-visible
 		flex-direction: column;
 	}
 }
+
+/* Fix button icon visibility in dark mode */
+@media (prefers-color-scheme: dark) {
+	.list_wrapper :global(svg) {
+		fill: white !important;
+	}
+	.list_wrapper :global(.button_arrow) {
+		fill: var(--nord4) !important;
+	}
+}
+
 h1{
 	text-align: center;
 	margin-bottom: 2rem;
@@ -609,10 +625,10 @@ button.action_button{
 		oldRecipeData={originalRecipe}
 		{changedFields}
 		isEditMode={true}
-		on:approved={handleTranslationApproved}
-		on:skipped={handleTranslationSkipped}
-		on:cancelled={handleTranslationCancelled}
-		on:forceFullRetranslation={forceFullRetranslation}
+		onapproved={handleTranslationApproved}
+		onskipped={handleTranslationSkipped}
+		oncancelled={handleTranslationCancelled}
+		onforceFullRetranslation={forceFullRetranslation}
 	/>
 </div>
 {/if}