chore(control): add enter action to TextInput

control/frontend/src/components/FileView.svelte

@@ -52,6 +52,21 @@
 		popup_content.open = false;
 	}
 
+	async function create_new_folder() {
+		for (const display_id of $selected_display_ids) {
+			const display = get_display_by_id(display_id, $displays);
+			if (!display) continue;
+			const path_data = get_longest_existing_path_and_needed_parts(
+				$current_file_path,
+				display_id,
+				$all_files
+			);
+			await create_folders(display.ip, path_data.existing, [...path_data.needed, current_name]);
+		}
+		await update_current_folder_on_selected_displays();
+		popup_close_function();
+	}
+
 	const show_new_folder_popup = () => {
 		current_name = '';
 		current_valid = false;
@@ -115,25 +130,12 @@
 				return [false, 'Name bereits verwendet'];
 			return [true, 'Gültiger Name'];
 		}}
+		enter_mode="submit"
+		enter_function={create_new_folder}
 	/>
 	<div class="flex flex-row justify-end gap-2">
-		<Button
+		<Button className="px-4 font-bold" click_function={create_new_folder} disabled={!current_valid}
-			className="px-4 font-bold"
+			>Neuen Ordner erstellen</Button
-			click_function={async () => {
-				for (const display_id of $selected_display_ids) {
-					const display = get_display_by_id(display_id, $displays);
-					if (!display) continue;
-					const path_data = get_longest_existing_path_and_needed_parts(
-						$current_file_path,
-						display_id,
-						$all_files
-					);
-					await create_folders(display.ip, path_data.existing, [...path_data.needed, current_name]);
-				}
-				await update_current_folder_on_selected_displays();
-				popup_close_function();
-			}}
-			disabled={!current_valid}>Neuen Ordner erstellen</Button
 		>
 	</div>
 {/snippet}

control/frontend/src/components/TextInput.svelte

@@ -12,7 +12,9 @@
 		title,
 		placeholder = '',
 		is_valid_function = null,
-		focused_on_start = false
+		focused_on_start = false,
+		enter_mode = 'none',
+		enter_function = null
 	} = $props<{
 		current_value: string;
 		current_valid: boolean;
@@ -22,6 +24,8 @@
 		placeholder?: string;
 		is_valid_function?: ((input: string) => [boolean, string]) | null;
 		focused_on_start?: boolean;
+		enter_mode?: 'none' | 'focus_next' | 'submit';
+		enter_function?: (() => void) | null;
 	}>();
 
 	let focus_bg = get_shifted_color(bg, 100);
@@ -42,6 +46,30 @@
 			return 'inset-ring-2 inset-ring-red-400';
 		}
 	}
+
+	function focus_next_element() {
+		const focusable = Array.from(document.querySelectorAll<HTMLElement>('input')).filter(
+			(el) => !el.hasAttribute('disabled')
+		);
+
+		const index = focusable.indexOf(input_element);
+		if (index !== -1 && index < focusable.length - 1) {
+			focusable[index + 1].focus();
+		}
+	}
+
+	function handle_keydown(event: KeyboardEvent) {
+		if (event.key !== 'Enter') return;
+
+		if (enter_mode === 'focus_next') {
+			event.preventDefault();
+			focus_next_element();
+		} else if (enter_mode === 'submit' && enter_function) {
+			event.preventDefault();
+			enter_function();
+		}
+	}
+
 	onMount(() => {
 		validate_input();
 		if (focused_on_start && input_element) input_element.focus();
@@ -70,6 +98,7 @@
 		bind:this={input_element}
 		bind:value={current_value}
 		bind:focused
+		onkeydown={handle_keydown}
 		type="text"
 		oninput={validate_input}
 		class="{bg} focus:{focus_bg} outline-none py-2 px-3 rounded-xl transition-all duration-100 {get_highlighting_string()}"

control/frontend/src/routes/+page.svelte

@@ -73,7 +73,7 @@
 		text_inputs_valid = text_inputs_valid_null_values;
 		popup_content = {
 			open: true,
-			snippet: add_new_display_popup,
+			snippet: display_popup,
 			title: 'Neuen Bildschirm hinzufügen',
 			title_icon: Monitor,
 			title_class: '!text-xl',
@@ -103,7 +103,7 @@
 		}
 		popup_content = {
 			open: true,
-			snippet: add_new_display_popup,
+			snippet: display_popup,
 			snippet_arg: display_id,
 			title: 'Bildschirm bearbeiten',
 			title_icon: Monitor,
@@ -138,7 +138,7 @@
 	</div>
 {/snippet}
 
-{#snippet add_new_display_popup(existing_display_id: string | null = null)}
+{#snippet display_popup(existing_display_id: string | null = null)}
 	<TextInput
 		focused_on_start
 		bind:current_value={text_inputs_valid.name.value}
@@ -154,6 +154,7 @@
 			if (is_display_name_taken(input)) return [false, 'Name bereits verwendet'];
 			return [true, 'Gültiger Name'];
 		}}
+		enter_mode="focus_next"
 	/>
 	<div class="flex flex-row gap-2">
 		<TextInput
@@ -167,6 +168,7 @@
 					: [false, 'Ungültige IP-Adresse'];
 			}}
 			className="grow"
+			enter_mode="focus_next"
 		/>
 		<div class="flex items-end shrink-0">
 			<Button
@@ -196,6 +198,10 @@
 					? [true, 'Gültige MAC-Adresse']
 					: [false, 'Ungültige MAC-Adresse'];
 		}}
+		enter_mode="submit"
+		enter_function={() => {
+			finalize_add_edit_display(existing_display_id);
+		}}
 	/>
 	<div class="flex flex-row gap-2 justify-end pt-2">
 		{#if !!existing_display_id}
@@ -218,7 +224,6 @@
 	</div>
 {/snippet}
 
-
 <main class="bg-stone-900 h-dvh w-dvw text-stone-200 px-4 py-2 gap-2 grid grid-rows-[3rem_auto]">
 	<!-- {@html SplashScreen} -->
 
@@ -262,4 +267,3 @@
 		snippet_container_class="min-w-115"
 	/>
 </main>
-