chore(control): add focus_on_start to TextInput

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}
 	/>