fix: update the search to submit on enter

src/components/navigation/Header.svelte

@@ -6,13 +6,12 @@
 	} from '$env/static/public';
 	import ThemeSwitcher from '$lib/ThemeSwitch/ThemeSwitcher.svelte';
 	import { createEventDispatcher } from 'svelte';
-	import { debounce } from '$lib/utils';
 
 	const dispatch = createEventDispatcher();
 
 	let searchInput = '';
 
-	const debouncedSearch = debounce(async () => {
+	async function handleSearch() {
 		if (searchInput.length > 2) {
 			try {
 				const response = await fetch(`/api/oba/search?query=${encodeURIComponent(searchInput)}`);
@@ -24,13 +23,17 @@
 				console.error('Error fetching search results:', error);
 			}
 		}
-	}, 300);
+	}
 
-	$: if (searchInput) debouncedSearch();
+	const onHandleSearch = (event) => {
+		if (event.key === 'Enter') {
+			handleSearch();
+		}
+	};
 </script>
 
 <div
-	class="bg-blur-md flex items-center justify-between border-b border-neutral-300 bg-white/80 px-4 dark:bg-black dark:text-white"
+	class="flex items-center justify-between px-4 border-b bg-blur-md border-neutral-300 bg-white/80 dark:bg-black dark:text-white"
 >
 	<div class="flex items-center justify-center gap-4 px-2 py-2">
 		<div>
@@ -39,15 +42,15 @@
 			</a>
 		</div>
 		{#if PUBLIC_OBA_SEARCH_ENABLED === 'true'}
-			<div class="mx-auto max-w-md">
+			<div class="max-w-md mx-auto">
 				<label
 					for="default-search"
-					class="sr-only mb-2 text-sm font-medium text-gray-900 dark:text-white">Search</label
+					class="mb-2 text-sm font-medium text-gray-900 sr-only dark:text-white">Search</label
 				>
 				<div class="relative">
-					<div class="pointer-events-none absolute inset-y-0 start-0 flex items-center ps-3">
+					<div class="absolute inset-y-0 flex items-center pointer-events-none start-0 ps-3">
 						<svg
-							class="h-4 w-4 text-gray-500 dark:text-gray-400"
+							class="w-4 h-4 text-gray-500 dark:text-gray-400"
 							aria-hidden="true"
 							xmlns="http://www.w3.org/2000/svg"
 							fill="none"
@@ -65,10 +68,11 @@
 					<input
 						type="search"
 						id="search"
-						class="block w-full rounded-full border border-gray-300 bg-gray-50 p-2 ps-10 text-sm text-gray-900 dark:border-gray-600 dark:text-white dark:placeholder-gray-400"
+						class="block w-full p-2 text-sm text-gray-900 border border-gray-300 rounded-full bg-gray-50 ps-10 dark:border-gray-600 dark:text-white dark:placeholder-gray-400"
 						placeholder="Search a stop or route"
 						required
 						bind:value={searchInput}
+						on:keydown={onHandleSearch}
 					/>
 				</div>
 			</div>