save changes, bin aber noch nicht fertig

src/lib/components/NameItemEditor.svelte

@@ -10,27 +10,20 @@
 		token?: string;
 		// add other properties as needed
 	}
-	let {
-		list,
-		editedName = $bindable(),
-		currentName,
-		onSave = () => {},
-		onDelete = () => {}
-	} = $props();
+	let { list, currentName, onSave = () => {}, onDelete = () => {} } = $props();
 
 	let localName = $state(currentName);
-	let wasCancelled = $state(false);
-
-	let error: string = $derived(validateName(localName));
 	let isEditing = $state(false);
-	let inputRef: HTMLInputElement;
 
-	function validateName(name: string) {
+	let error = $derived(() => validateName(localName));
+
+	let inputRef = $state<HTMLInputElement | null>(null);
+
+	function validateName(name: string | undefined | null) {
+		if (!name) return 'Name darf nicht leer sein.';
 		const trimmed = name.trim();
 
-		if (!trimmed) {
-			return 'Name darf nicht leer sein.';
-		}
+		if (!trimmed) return 'Name darf nicht leer sein.';
 
 		const duplicate = list.some(
 			(item: ListItem) => item.name === trimmed && item.name !== currentName
@@ -41,67 +34,44 @@
 		return '';
 	}
 
-	function commitIfValid() {
-		if (!error && !wasCancelled && localName != currentName) {
-			const trimmedName: string = localName.trim();
-			inputRef?.blur();
-			isEditing = false;
-			onSave(trimmedName, currentName);
-		} else {
-			cancelEdit();
-		}
+	function startEdit() {
+		isEditing = true;
+		tick().then(() => inputRef?.focus());
 	}
 
-	function resetEdit() {
-		inputRef?.blur();
+	function cancelEdit() {
+		localName = currentName;
+		isEditing = false;
+	}
+
+	function commitEdit() {
+		if (!error() && localName != currentName) onSave(localName, currentName);
+
 		isEditing = false;
 	}
 
 	function handleKeydown(event: KeyboardEvent) {
-		if (event.key === 'Enter') {
-			event.preventDefault();
-			commitIfValid();
-		} else if (event.key === 'Escape') {
-			event.preventDefault();
-			localName = currentName;
-			resetEdit();
-		}
-	}
-
-	async function startEdit() {
-		isEditing = true;
-		await tick();
-		inputRef?.focus();
-	}
-
-	function cancelEdit() {
-		resetEdit();
-		wasCancelled = true;
-		localName = currentName;
+		if (event.key === 'Enter') commitEdit();
+		if (event.key === 'Escape') cancelEdit();
 	}
 </script>
 
 <div data-testid="test-nameItemEditor">
-	<input
-		data-testid="test-input"
-		bind:this={inputRef}
-		bind:value={localName}
-		onfocus={() => {
-			isEditing = true;
-		}}
-		onblur={commitIfValid}
-		onkeydown={handleKeydown}
-	/>
 	{#if isEditing}
-		<button data-testid="commit-button" disabled={wasCancelled} onclick={commitIfValid}
-			><Check /></button
-		>
+		<input
+			data-testid="test-input"
+			bind:this={inputRef}
+			bind:value={localName}
+			onkeydown={handleKeydown}
+		/>
+		<button data-testid="commit-button" onclick={commitEdit}><Check /></button>
 		<button data-testid="cancel-button" onclick={cancelEdit}><X /></button>
 	{:else}
+		<span>{localName}</span>
 		<button data-testid="edit-button" onclick={startEdit}><Edit /></button>
 		<button data-testid="delete-button" onclick={() => onDelete(currentName)}><Trash /></button>
 	{/if}
-	{#if error}
-		<p class="text-red-500">{error}</p>
+	{#if error()}
+		<p class="text-red-500">{error()}</p>
 	{/if}
 </div>