From ae92622578e679bc17d9b175b40b56b3ab56db5a Mon Sep 17 00:00:00 2001
From: Aaron Brethorst <aaron@brethorsting.com>
Date: Thu, 11 Jul 2024 15:14:21 -0700
Subject: [PATCH 1/2] Extracts a reusable ModalPane component from StopPane

---
 src/components/navigation/ModalPane.svelte | 41 ++++++++++++++++++++++
 src/components/oba/StopPane.svelte         | 20 ++---------
 src/routes/+page.svelte                    | 12 +++----
 svelte.config.js                           |  4 ++-
 4 files changed, 50 insertions(+), 27 deletions(-)
 create mode 100644 src/components/navigation/ModalPane.svelte

diff --git a/src/components/navigation/ModalPane.svelte b/src/components/navigation/ModalPane.svelte
new file mode 100644
index 0000000..f3b829e
--- /dev/null
+++ b/src/components/navigation/ModalPane.svelte
@@ -0,0 +1,41 @@
+<script>
+	import { fly } from 'svelte/transition';
+	import { FontAwesomeIcon } from '@fortawesome/svelte-fontawesome';
+	import { faX } from '@fortawesome/free-solid-svg-icons';
+	import { keybinding } from '$lib/keybinding';
+	import { createEventDispatcher } from 'svelte';
+
+	const dispatch = createEventDispatcher();
+
+	function closePane() {
+		dispatch('close');
+	}
+</script>
+
+<div class="modal-pane" in:fly={{ y: 200, duration: 500 }} out:fly={{ y: 200, duration: 500 }}>
+	<div class="py-1 text-right">
+		<button
+			type="button"
+			on:click={closePane}
+			use:keybinding={{ code: 'Escape' }}
+			class="close-button"
+		>
+			<FontAwesomeIcon icon={faX} class="font-black text-black dark:text-white" />
+			<span class="sr-only">Close</span>
+		</button>
+	</div>
+
+	<slot></slot>
+</div>
+
+<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;
+	}
+
+	.close-button {
+		@apply rounded px-4 py-2;
+		@apply transition duration-300 ease-in-out hover:bg-neutral-200 dark:hover:bg-neutral-200/50;
+	}
+</style>
diff --git a/src/components/oba/StopPane.svelte b/src/components/oba/StopPane.svelte
index 0c017ab..a235df2 100644
--- a/src/components/oba/StopPane.svelte
+++ b/src/components/oba/StopPane.svelte
@@ -1,8 +1,4 @@
 <script>
-	import { FontAwesomeIcon } from '@fortawesome/svelte-fontawesome';
-	import { faX } from '@fortawesome/free-solid-svg-icons';
-	import { createEventDispatcher } from 'svelte';
-	import { keybinding } from '$lib/keybinding';
 	import ArrivalDeparture from '../ArrivalDeparture.svelte';
 
 	export let stop;
@@ -10,12 +6,6 @@
 	let loading = false;
 	let error;
 
-	const dispatch = createEventDispatcher();
-
-	function closePane() {
-		dispatch('closePane');
-	}
-
 	async function loadData(stopID) {
 		loading = true;
 		const response = await fetch(`/api/oba/arrivals-and-departures-for-stop/${stopID}`);
@@ -34,7 +24,7 @@
 	})(stop);
 </script>
 
-<div class="relative rounded-lg bg-[#F3F2F8] p-6 dark:bg-black">
+<div>
 	{#if loading}
 		<div
 			class="absolute inset-0 z-10 flex items-center justify-center rounded-lg bg-[#1C1C1E] bg-opacity-80"
@@ -65,18 +55,12 @@
 
 	{#if arrivalsAndDepartures}
 		<div>
-			<div class="relative">
+			<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>
 				</div>
-				<div class="absolute -right-4 -top-6">
-					<button type="button" on:click={closePane} use:keybinding={{ code: 'Escape' }}>
-						<FontAwesomeIcon icon={faX} class="text-black dark:text-white" />
-						<span class="sr-only">Close</span>
-					</button>
-				</div>
 			</div>
 			<div>
 				<h3 class="mb-1 ml-7 mt-4 text-xl font-semibold uppercase text-[#86858B]">
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index c3db15b..23df7f8 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,6 +1,6 @@
 <script>
-	import { fly } from 'svelte/transition';
 	import GoogleMap from '../components/map/GoogleMap.svelte';
+	import ModalPane from '../components/navigation/ModalPane.svelte';
 	import StopPane from '../components/oba/StopPane.svelte';
 
 	let stop;
@@ -15,13 +15,9 @@
 </script>
 
 {#if stop}
-	<div
-		class="absolute bottom-0 left-0 z-40 w-full bg-transparent px-2 shadow-lg md:max-w-prose"
-		in:fly={{ y: 200, duration: 500 }}
-		out:fly={{ y: 200, duration: 500 }}
-	>
-		<StopPane {stop} on:closePane={closePane} />
-	</div>
+	<ModalPane on:close={closePane}>
+		<StopPane {stop} />
+	</ModalPane>
 {/if}
 
 <GoogleMap on:stopSelected={stopSelected} />
diff --git a/svelte.config.js b/svelte.config.js
index 1b9bd7f..b5d2a9a 100644
--- a/svelte.config.js
+++ b/svelte.config.js
@@ -1,4 +1,5 @@
 import adapter from '@sveltejs/adapter-auto';
+import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
@@ -10,7 +11,8 @@ const config = {
 		alias: {
 			$images: './src/assets/images'
 		}
-	}
+	},
+	preprocess: vitePreprocess()
 };
 
 export default config;

From 9c27ccccb75927c83e910b3dd149e5c9cd192107 Mon Sep 17 00:00:00 2001
From: Aaron Brethorst <aaron@brethorsting.com>
Date: Thu, 11 Jul 2024 15:36:40 -0700
Subject: [PATCH 2/2] Fills in the stop ID and route list on the stop pane

---
 src/components/oba/StopPane.svelte | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/components/oba/StopPane.svelte b/src/components/oba/StopPane.svelte
index a235df2..6b5fff7 100644
--- a/src/components/oba/StopPane.svelte
+++ b/src/components/oba/StopPane.svelte
@@ -5,6 +5,7 @@
 	let arrivalsAndDepartures;
 	let loading = false;
 	let error;
+	let routeShortNames = null;
 
 	async function loadData(stopID) {
 		loading = true;
@@ -12,6 +13,10 @@
 		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>