Adjust filtering to enable filtering by map contents

src/routes/+page.svelte

@@ -2,19 +2,23 @@
 	import logo from '$lib/assets/round-logo-text.svg';
 	import type { PageData } from './$types';
 	import { resolve } from '$app/paths';
-	export let data: PageData;
-	import favicon from '$lib/assets/favicon.svg';
+	
+	let { data }: { data: PageData } = $props();
+    let searchTerm = $state('');
 
-	let searchTerm = '';
+	let filteredMaps = $derived(
+		data.maps.filter((m) => {
+			const term = searchTerm.toLowerCase();
 
-	$: filteredMaps = data.maps.filter(
-		(m) =>
-			m.routeId.toString().includes(searchTerm) ||
-			m.routeStart.toLowerCase().includes(searchTerm.toLowerCase()) ||
-			m.routeEnd.toLowerCase().includes(searchTerm.toLowerCase())
+			if (m.routeId.toString().includes(term)) return true;
+
+			return m.contents.some(location =>
+				location.toLowerCase().includes(term)
+			);
+		})
 	);
 
-	const vibrate = (patern: number | number[] = 10) => {
+	const vibrate = (pattern: number | number[] = 10) => {
 		if (typeof window !== 'undefined' && window.navigator.vibrate) {
 			window.navigator.vibrate(pattern);
 		}
@@ -53,21 +57,20 @@
 				alt="OwlBoard Logo"
 				class="main-logo"
 			/>
-			<div class="search-container">
-				<input
-					type="text"
-					bind:value={searchTerm}
-					placeholder="Search index..."
-					class="search-input"
-				/>
-			</div>
 		</div>
 	</header>
 
 	<div class="list-container">
 		<a href="https://owlboard.info" class="button-link">Go to OwlBoard Live Departures & PIS</a>
+				
+				<input
+					type="text"
+					bind:value={searchTerm}
+					placeholder="Search"
+					class="search-input"
+				/>
 		{#each filteredMaps as map (map.routeId)}
-			<a href={resolve(`/map/${map.routeId.toString().padStart(4, '0')}`)} class="card" on:click={() => vibrate(10)}>
+			<a href={resolve(`/map/${map.routeId.toString().padStart(4, '0')}`)} class="card" onclick={() => vibrate(10)}>
 				<div class="card-top">
 					<span class="route-id">{map.routeId.toString().padStart(4, '0')}</span>
 					<span class="status-badge {isVerifiedRecently(map.checked)}">
@@ -119,6 +122,7 @@
 	.main-header {
 		margin-bottom: 1.5rem;
 		position: fixed;
+		height: 80px;
 		top: 0;
 		left: 0;
 		box-sizing: border-box;
@@ -143,17 +147,14 @@
 		display: block;
 	}
 
-	.search-container {
-		margin-left: auto;
-	}
-
 	.search-input {
 		width: 100%;
-		margin-left: auto;
-		height: 50px;
+		max-width: 500px;
+		font-family: "urwgothic";
+		margin: auto;
+		height: 40px;
 		padding: 0.8rem 1rem;
 		text-align: center;
-		text-transform: uppercase;
 		border-radius: 30px;
 		border: none;
 		font-size: 1rem;