added open modalpane on search, show TODO on click of route

package.json

@@ -37,6 +37,6 @@
 	"type": "module",
 	"dependencies": {
 		"@fortawesome/free-regular-svg-icons": "^6.6.0",
-		"onebusaway-sdk": "^0.1.0-alpha.40"
+		"onebusaway-sdk": "^1.0.1"
 	}
 }

src/app.css

@@ -1,3 +1,11 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+.scroll-hidden {
+	-ms-overflow-style: none; /* Internet Explorer 10+ */
+	scrollbar-width: none; /* Firefox */
+}
+.scroll-hidden::-webkit-scrollbar {
+	display: none; /* Safari and Chrome */
+}

src/components/navigation/Header.svelte

@@ -17,7 +17,8 @@
 			try {
 				const response = await fetch(`/api/oba/search?query=${encodeURIComponent(searchInput)}`);
 				const results = await response.json();
-				console.log('Search API response:', results);
+				console.log('Route results:', results.routeSearchResults);
+        		console.log('Stop results:', results.stopSearchResults);
 				dispatch('searchResults', results);
 			} catch (error) {
 				console.error('Error fetching search results:', error);

src/components/navigation/ModalPane.svelte

@@ -14,7 +14,11 @@
 	}
 </script>
 
-<div class="modal-pane" in:fly={{ y: 200, duration: 500 }} out:fly={{ y: 200, duration: 500 }}>
+<div
+	class="modal-pane scroll-hidden"
+	in:fly={{ y: 200, duration: 500 }}
+	out:fly={{ y: 200, duration: 500 }}
+>
 	<div class="py-1 text-right">
 		<button
 			type="button"
@@ -32,7 +36,7 @@
 
 <style lang="postcss">
 	.modal-pane {
-		@apply absolute bottom-0 left-0 z-40 w-full bg-transparent px-2 shadow-lg md:max-w-prose;
+		@apply absolute bottom-0 left-0 z-40 max-h-[40rem] w-full overflow-y-scroll bg-transparent px-2 shadow-lg md:max-w-prose;
 		@apply rounded-lg border-b-[1px] border-[#C6C6C8] bg-[#F3F2F8] dark:border-[1px] dark:border-[#C6C6C8] dark:border-opacity-15 dark:bg-black;
 	}
 

src/components/search/SearchResults.svelte

@@ -9,42 +9,46 @@
 	}
 
 	function handleRouteClick(route) {
-		console.log('Route selected:', route);
+		alert(`TODO: show route ${route.id}`);
 	}
-
-	$: console.log('SearchResults component received:', searchResults);
 </script>
 
-<div class="p-4">
-	<h2 class="mb-4 text-xl font-bold">Search Results</h2>
+<div class="p-2">
+	<h2 class="mb-4 text-xl font-semibold uppercase text-[#86858B]">Search Results</h2>
 
-	<h3 class="mb-2 text-lg font-semibold">Stops</h3>
-	{#if searchResults?.stopSearchResults?.list?.length > 0}
-		<ul>
-			{#each searchResults.stopSearchResults.list as stop}
+	<h3 class="mb-2 text-lg font-semibold dark:text-white">Routes</h3>
+	{#if searchResults?.routeSearchResults?.list?.length > 0}
+		<ul class="overflow-hidden rounded-lg">
+			{#each searchResults.routeSearchResults.list as route}
 				<li>
-					<button on:click={() => handleStopClick(stop)} class="text-blue-500 hover:underline">
-						{stop.longName || stop.shortName || stop.name}
+					<button
+						on:click={() => handleRouteClick(route)}
+						class="flex h-auto w-full items-center justify-between border-b-[1px] border-[#C6C6C8] bg-[#ffffff] p-4 hover:cursor-pointer dark:text-white hover:bg-[#e3e3e3] dark:border-[#313135] dark:bg-[#1c1c1c] hover:dark:bg-[#363636]"
+					>
+						{route.name || `Route ${route.id}`}
 					</button>
 				</li>
 			{/each}
 		</ul>
 	{:else}
-		<p>No stops found.</p>
+		<p>No routes found.</p>
 	{/if}
 
-	<h3 class="mt-4 mb-2 text-lg font-semibold">Routes</h3>
-	{#if searchResults?.routeSearchResults?.list?.length > 0}
-		<ul>
-			{#each searchResults.routeSearchResults.list as route}
+	<h3 class="mt-4 mb-2 text-lg font-semibold dark:text-white">Stops</h3>
+	{#if searchResults?.stopSearchResults?.list?.length > 0}
+		<ul class="overflow-hidden rounded-lg ">
+			{#each searchResults.stopSearchResults.list as stop}
 				<li>
-					<button on:click={() => handleRouteClick(route)} class="text-blue-500 hover:underline">
-						{route.shortName || route.longName}
+					<button
+						on:click={() => handleStopClick(stop)}
+						class="flex h-auto w-full items-center justify-between border-b-[1px] border-[#C6C6C8] bg-[#ffffff] p-4 hover:cursor-pointer dark:text-white hover:bg-[#e3e3e3] dark:border-[#313135] dark:bg-[#1c1c1c] hover:dark:bg-[#363636]"
+					>
+						{stop.shortName + ` ` + stop.longName || stop.name || `Stop ${stop.id}`}
 					</button>
 				</li>
 			{/each}
 		</ul>
 	{:else}
-		<p>No routes found.</p>
+		<p>No stops found.</p>
 	{/if}
 </div>

src/routes/+page.svelte

@@ -39,6 +39,13 @@
 		}
 	}
 
+	function routeSelected(event) {
+		const route = event.detail.route;
+		const routeId = route?.id || searchQuery;
+        alert(`TODO: show route ${routeId}`);
+		closeModal();
+	}
+
 	function handleUpdateRouteMap(event) {
 		showRouteMap = event.detail.show;
 		showAllStops = !event.detail.show;
@@ -75,7 +82,7 @@
 
 {#if searchResults && (searchResults.stopSearchResults?.list?.length > 0 || searchResults.routeSearchResults?.list?.length > 0)}
 	<ModalPane on:close={closeModal}>
-		<SearchResults {searchResults} />
+		<SearchResults {searchResults} on:routeSelected={routeSelected} on:stopSelected={stopSelected} />
 	</ModalPane>
 {/if}
 

src/routes/api/oba/search/+server.js

@@ -12,11 +12,12 @@ export async function GET({ url }) {
 
 	try {
 		const [stopResponse, routeResponse] = await Promise.all([
-			oba.searchForRoute.retrieve({ input: searchInput }),
-			oba.searchForStop.retrieve({ input: searchInput })
+			oba.searchForRoute.list({ input: searchInput }),
+			oba.searchForStop.list({ input: searchInput })
 		]);
 
-		console.log("Data test", routeResponse.data, stopResponse.data);
+		console.log("Route API response:", routeResponse);
+    	console.log("Stop API response:", stopResponse);
 
 		return new Response(JSON.stringify({
 			routeSearchResults: routeResponse.data,