added the api for trip details, created the tripdetailpane with all information

package.json

@@ -34,5 +34,8 @@
 		"vite": "^5.0.3",
 		"vitest": "^1.2.0"
 	},
-	"type": "module"
+	"type": "module",
+	"dependencies": {
+		"@fortawesome/free-regular-svg-icons": "^6.6.0"
+	}
 }

src/components/ArrivalDeparture.svelte

@@ -3,6 +3,12 @@
 	export let tripHeadsign;
 	export let scheduledArrivalTime;
 	export let predictedArrivalTime;
+	export let tripId;
+	export let vehicleId;
+	export let serviceDate;
+	import { createEventDispatcher } from 'svelte';
+
+	const dispatch = createEventDispatcher();
 
 	function formatTime(time) {
 		const date = new Date(time);
@@ -45,10 +51,24 @@
 
 		return `${Math.floor((chosenTime - now) / 60000)}m`;
 	}
+
+	function handleTripDetail() {
+		dispatch('showTripDetails', {
+			tripId,
+			vehicleId,
+			serviceDate,
+			routeShortName,
+			tripHeadsign,
+			scheduledArrivalTime,
+			timeToReach: calculateTimeToReach(predictedArrivalTime, scheduledArrivalTime),
+			arrivalStatus: getArrivalStatus(predictedArrivalTime, scheduledArrivalTime)
+		});
+	}
 </script>
 
-<div
-	class="flex h-auto items-center justify-between border-b-[1px] border-[#C6C6C8] bg-[#ffffff] p-4 hover:cursor-pointer hover:bg-[#e3e3e3] dark:border-[#313135] dark:bg-[#1c1c1c] hover:dark:bg-[#363636]"
+<button
+	on:click={handleTripDetail}
+	class="flex h-auto w-full items-center justify-between border-b-[1px] border-[#C6C6C8] bg-[#ffffff] p-4 hover:cursor-pointer hover:bg-[#e3e3e3] dark:border-[#313135] dark:bg-[#1c1c1c] hover:dark:bg-[#363636]"
 >
 	<div class="flex flex-col gap-1">
 		<p class="text-xl font-semibold text-black dark:text-white">
@@ -66,4 +86,4 @@
 			{calculateTimeToReach(predictedArrivalTime, scheduledArrivalTime)}
 		</p>
 	</div>
-</div>
+</button>

src/components/map/GoogleMap.svelte

@@ -158,10 +158,6 @@
 			}
 		});
 	});
-
-	function handleStopSelected(stop) {
-		dispatch('stopSelected', { stop });
-	}
 </script>
 
 <div id="map"></div>

src/components/navigation/ModalPane.svelte

@@ -33,7 +33,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 rounded-lg bg-[#F3F2F8] dark:bg-black;
+		@apply rounded-lg border-b-[1px] border-[#C6C6C8] bg-[#F3F2F8] dark:border-[1px] dark:border-[#C6C6C8] dark:border-opacity-15 dark:bg-black;
 	}
 
 	.close-button {

src/components/navigation/TripDetailsModal.svelte

@@ -0,0 +1,63 @@
+<script>
+	import { FontAwesomeIcon } from '@fortawesome/svelte-fontawesome';
+	import { faArrowLeft } from '@fortawesome/free-solid-svg-icons';
+	import TripDetailsPane from '../oba/TripDetailsPane.svelte';
+
+	export let stop;
+	export let selectedTripDetails;
+	export let onClose;
+</script>
+
+<div class="trip-details-modal scrollbar-hidden">
+	<div class="py-1 text-left">
+		<button type="button" on:click={onClose} class="close-button">
+			<FontAwesomeIcon icon={faArrowLeft} class="font-black text-black dark:text-white" />
+			<h1 class="font-semibold text-black dark:text-white">Back to {stop.name}</h1>
+		</button>
+	</div>
+	<div
+		class="flex items-center justify-between rounded-lg bg-[#ffffff] p-4 hover:bg-[#e3e3e3] dark:bg-[#1c1c1c] hover:dark:bg-[#363636]"
+	>
+		<div>
+			<h2 class="text-lg font-semibold text-black dark:text-white">
+				{selectedTripDetails.routeShortName} - {selectedTripDetails.tripHeadsign}
+			</h2>
+			<p class="text-sm font-semibold text-gray-600 dark:text-gray-400">
+				{new Date(selectedTripDetails.scheduledArrivalTime).toLocaleTimeString([], {
+					hour: '2-digit',
+					minute: '2-digit'
+				})} -
+				<span class={selectedTripDetails.arrivalStatus.color}>
+					{selectedTripDetails.arrivalStatus.text}
+				</span>
+			</p>
+		</div>
+		<p class={`mt-1 text-sm font-semibold ${selectedTripDetails.arrivalStatus.color}`}>
+			{selectedTripDetails.timeToReach}
+		</p>
+	</div>
+	<div class="px-4 py-2">
+		<TripDetailsPane
+			{stop}
+			tripId={selectedTripDetails.tripId}
+			serviceDate={selectedTripDetails.serviceDate}
+		/>
+	</div>
+</div>
+
+<style lang="postcss">
+	.trip-details-modal {
+		@apply absolute bottom-0 left-0 z-40 h-full w-full overflow-y-scroll rounded-lg bg-white px-2 shadow-lg md:max-w-prose;
+		@apply rounded-lg border-b-[1px] border-[#C6C6C8] bg-white p-4 shadow-lg dark:border-[1px] dark:border-[#C6C6C8] dark:border-opacity-15 dark:bg-black;
+	}
+	.close-button {
+		@apply flex items-center gap-2 rounded px-4 py-2;
+		@apply transition duration-300 ease-in-out hover:bg-neutral-200 dark:hover:bg-neutral-200/50;
+	}
+	.scrollbar-hidden {
+		scrollbar-width: none;
+		-ms-overflow-style: none;
+		overflow: -moz-scrollbars-none;
+		-webkit-scrollbar: none;
+	}
+</style>

src/components/oba/StopPane.svelte

@@ -1,12 +1,18 @@
 <script>
 	import ArrivalDeparture from '../ArrivalDeparture.svelte';
+	import { onMount } from 'svelte';
+	import TripDetailsModal from '../navigation/TripDetailsModal.svelte';
 
 	export let stop;
 	export let arrivalsAndDeparturesResponse = null;
 	let arrivalsAndDepartures;
 	let loading = false;
 	let error;
 
+	let showTripDetails = false;
+	let selectedTripDetails = null;
+	let interval;
+
 	async function loadData(stopID) {
 		loading = true;
 		const response = await fetch(`/api/oba/arrivals-and-departures-for-stop/${stopID}`);
@@ -25,12 +31,19 @@
 		// instead of loading fresh data.
 		if (arrDep) {
 			arrivalsAndDepartures = arrDep.data.entry;
-		}
-		else {
+		} else {
 			await loadData(s.id);
 		}
 	})(stop, arrivalsAndDeparturesResponse);
 
+	onMount(() => {
+		interval = setInterval(() => {
+			loadData(stop.id);
+		}, 30000);
+
+		return () => clearInterval(interval);
+	});
+
 	let _routeShortNames = null;
 	function routeShortNames() {
 		if (!_routeShortNames) {
@@ -41,6 +54,18 @@
 		}
 		return _routeShortNames;
 	}
+	function handleShowTripDetails(event) {
+		selectedTripDetails = {
+			...event.detail,
+			routeShortName: event.detail.routeShortName,
+			tripHeadsign: event.detail.tripHeadsign,
+			scheduledArrivalTime: event.detail.scheduledArrivalTime
+		};
+		showTripDetails = true;
+	}
+	function handleCloseTripDetailModal() {
+		showTripDetails = false;
+	}
 </script>
 
 <div>
@@ -96,15 +121,23 @@
 							tripHeadsign={arrival.tripHeadsign}
 							scheduledArrivalTime={arrival.scheduledArrivalTime}
 							predictedArrivalTime={arrival.predictedArrivalTime}
+							tripId={arrival.tripId}
+							vehicleId={arrival.vehicleId}
+							serviceDate={arrival.serviceDate}
+							on:showTripDetails={handleShowTripDetails}
 						/>
 					{/each}
 				</div>
 			</div>
 		</div>
 	{/if}
+
+	{#if showTripDetails}
+		<TripDetailsModal {stop} {selectedTripDetails} onClose={handleCloseTripDetailModal} />
+	{/if}
 </div>
 
-<style>
+<style lang="postcss">
 	.scrollbar-hidden {
 		scrollbar-width: none;
 		-ms-overflow-style: none;