From 7ae607cc50fc3cd7f912f48ada2deb37a582fa14 Mon Sep 17 00:00:00 2001
From: E44 <129310925+programmer-44@users.noreply.github.com>
Date: Wed, 19 Nov 2025 17:12:26 +0100
Subject: [PATCH] chore(control): add focus_on_start to TextInput

---
 .../frontend/src/components/TextInput.svelte  | 20 +++++++++----------
 control/frontend/src/routes/+page.svelte      |  3 ++-
 2 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/control/frontend/src/components/TextInput.svelte b/control/frontend/src/components/TextInput.svelte
index 118abb3..6b49fc4 100644
--- a/control/frontend/src/components/TextInput.svelte
+++ b/control/frontend/src/components/TextInput.svelte
@@ -10,7 +10,8 @@
 		bg = 'bg-stone-750',
 		title,
 		placeholder = '',
-		is_valid_function = null
+		is_valid_function = null,
+		focused_on_start = false
 	} = $props<{
 		current_value: string;
 		current_valid: boolean;
@@ -19,11 +20,13 @@
 		title: string;
 		placeholder?: string;
 		is_valid_function?: ((input: string) => [boolean, string]) | null;
+		focused_on_start?: boolean;
 	}>();
 
 	let focus_bg = get_shifted_color(bg, 100);
-	let focussed = $state(false);
+	let focused: boolean = $state(false);
 	let current_info = $state('');
+	let input_element: HTMLInputElement;
 
 	function validate_input() {
 		if (!is_valid_function) return;
@@ -40,15 +43,16 @@
 	}
 	onMount(() => {
 		validate_input();
+		if (focused_on_start && input_element) input_element.focus();
 	});
 </script>
 
 <div class="flex flex-col {className}">
-	<div class="flex flex-row justify-between text-sm px-1">
+	<div class="flex flex-row justify-between text-sm px-1 gap-4">
 		<div class="text-stone-400">
 			{title}:
 		</div>
-		{#if is_valid_function && focussed}
+		{#if is_valid_function && focused}
 			<div
 				class={current_valid ? 'text-green-400' : 'text-red-400'}
 				transition:fade={{ duration: 100 }}
@@ -58,15 +62,11 @@
 		{/if}
 	</div>
 	<input
+		bind:this={input_element}
 		bind:value={current_value}
+		bind:focused
 		type="text"
 		oninput={validate_input}
-		onfocus={() => {
-			focussed = true;
-		}}
-		onfocusout={() => {
-			focussed = false;
-		}}
 		class="{bg} focus:{focus_bg} outline-none py-2 px-3 rounded-xl transition-all duration-100 {get_highlighting_string()}"
 		{placeholder}
 	/>
diff --git a/control/frontend/src/routes/+page.svelte b/control/frontend/src/routes/+page.svelte
index 0a90e8b..5fefb1c 100644
--- a/control/frontend/src/routes/+page.svelte
+++ b/control/frontend/src/routes/+page.svelte
@@ -137,6 +137,7 @@
 
 {#snippet add_new_display_popup(existing_display_id: string | null = null)}
 	<TextInput
+		focused_on_start
 		bind:current_value={text_inputs_valid.name.value}
 		bind:current_valid={text_inputs_valid.name.valid}
 		title="Anzeigename"
@@ -250,5 +251,5 @@
 			<FileView />
 		</div>
 	</div>
-	<PopUp content={popup_content} close_function={popup_close_function} className="bg-white/10" />
+	<PopUp content={popup_content} close_function={popup_close_function} className="bg-white/10" snippet_container_class="min-w-115" />
 </main>