Fills in the stop ID and route list on the stop pane

src/components/oba/StopPane.svelte

@@ -5,13 +5,18 @@
 	let arrivalsAndDepartures;
 	let loading = false;
 	let error;
+	let routeShortNames = null;
 
 	async function loadData(stopID) {
 		loading = true;
 		const response = await fetch(`/api/oba/arrivals-and-departures-for-stop/${stopID}`);
 		if (response.ok) {
 			const json = await response.json();
 			arrivalsAndDepartures = json.data.entry;
+			routeShortNames = json.data.references.routes
+				.filter((r) => stop.routeIds.includes(r.id))
+				.map((r) => r.nullSafeShortName)
+				.sort();
 		} else {
 			error = 'Unable to fetch arrival/departure data';
 		}
@@ -58,8 +63,10 @@
 			<div>
 				<div class="h-36 rounded-lg bg-[#1C1C1E] bg-opacity-80 p-4">
 					<h1 class="text-xl font-semibold text-white">{stop.name}</h1>
-					<h1 class="text-lg text-white">Stop #{stop.name}</h1>
-					<h1 class="text-lg text-white">Routes: {stop.name}</h1>
+					<h1 class="text-lg text-white">Stop #{stop.id}</h1>
+					{#if routeShortNames}
+						<h1 class="text-lg text-white">Routes: {routeShortNames.join(', ')}</h1>
+					{/if}
 				</div>
 			</div>
 			<div>