From b2ae9b3a51cec0dbf8ae7947d7b8ef5930a3cc37 Mon Sep 17 00:00:00 2001
From: Aaron Brethorst <aaron@brethorsting.com>
Date: Mon, 2 Sep 2024 20:19:04 -0700
Subject: [PATCH 1/8] DRY up heading styles

Create default component styles for heading tags and use them across the web app
---
 src/app.css                                   | 26 ++++++++++++++-----
 src/components/map/RouteMap.svelte            |  2 +-
 .../navigation/TripDetailsModal.svelte        |  2 +-
 src/components/oba/StopPane.svelte            | 10 +++----
 src/components/oba/TripDetailsPane.svelte     |  2 +-
 src/components/search/SearchResults.svelte    |  6 ++---
 6 files changed, 31 insertions(+), 17 deletions(-)

diff --git a/src/app.css b/src/app.css
index db19a19e..4d107dbe 100644
--- a/src/app.css
+++ b/src/app.css
@@ -2,10 +2,24 @@
 @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 */
+@layer components {
+	.scroll-hidden {
+		-ms-overflow-style: none; /* Internet Explorer 10+ */
+		scrollbar-width: none; /* Firefox */
+	}
+	.scroll-hidden::-webkit-scrollbar {
+		display: none; /* Safari and Chrome */
+	}
+
+	.h1 {
+		@apply mb-4 text-2xl font-semibold text-[#86858B] dark:text-gray-300;
+	}
+
+	.h2 {
+		@apply mb-4 text-xl font-semibold text-[#86858B] dark:text-gray-300;
+	}
+
+	.h3 {
+		@apply mb-2 text-lg font-semibold dark:text-white;
+	}
 }
diff --git a/src/components/map/RouteMap.svelte b/src/components/map/RouteMap.svelte
index a0315109..e3997ac8 100644
--- a/src/components/map/RouteMap.svelte
+++ b/src/components/map/RouteMap.svelte
@@ -74,7 +74,7 @@
 
 			infoWindow = new google.maps.InfoWindow({
 				content: `<div>
-                            <h3>${stop.name}</h3>
+                            <h3 class='h3'>${stop.name}</h3>
                             <p>Arrival time: ${new Date(stopTime.arrivalTime * 1000).toLocaleTimeString()}</p>
                         </div>`
 			});
diff --git a/src/components/navigation/TripDetailsModal.svelte b/src/components/navigation/TripDetailsModal.svelte
index 9f831219..bee38828 100644
--- a/src/components/navigation/TripDetailsModal.svelte
+++ b/src/components/navigation/TripDetailsModal.svelte
@@ -12,7 +12,7 @@
 	<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>
+			<div class="font-semibold text-black dark:text-white">Back to {stop.name}</div>
 		</button>
 	</div>
 	<div
diff --git a/src/components/oba/StopPane.svelte b/src/components/oba/StopPane.svelte
index 0b7187c7..7dd3edbc 100644
--- a/src/components/oba/StopPane.svelte
+++ b/src/components/oba/StopPane.svelte
@@ -119,17 +119,17 @@
 		<div>
 			<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.id}</h1>
+					<h1 class="h1 mb-1">{stop.name}</h1>
+					<h2 class="h2 mb-1">Stop #{stop.id}</h2>
 					{#if routeShortNames()}
-						<h1 class="text-lg text-white">Routes: {routeShortNames().join(', ')}</h1>
+						<h2 class="h2">Routes: {routeShortNames().join(', ')}</h2>
 					{/if}
 				</div>
 			</div>
 			<div>
-				<h3 class="mb-1 ml-7 mt-4 text-xl font-semibold uppercase text-[#86858B]">
+				<h2 class="h2 ml-4 mt-4">
 					Arrivals and Departures
-				</h3>
+				</h2>
 			</div>
 			<div class="scrollbar-hidden h-96 space-y-2 overflow-y-scroll rounded-lg">
 				<div>
diff --git a/src/components/oba/TripDetailsPane.svelte b/src/components/oba/TripDetailsPane.svelte
index 178be534..3a32be0c 100644
--- a/src/components/oba/TripDetailsPane.svelte
+++ b/src/components/oba/TripDetailsPane.svelte
@@ -86,7 +86,7 @@
 	{#if error}
 		<p>{error}</p>
 	{:else if tripDetails}
-		<h2>
+		<h2 class='h2'>
 			{#if routeInfo}
 				Route {routeInfo.shortName} -
 			{/if}
diff --git a/src/components/search/SearchResults.svelte b/src/components/search/SearchResults.svelte
index 09f5c2ab..f7b0fc07 100644
--- a/src/components/search/SearchResults.svelte
+++ b/src/components/search/SearchResults.svelte
@@ -15,9 +15,9 @@
 </script>
 
 <div class="p-2">
-	<h2 class="mb-4 text-xl font-semibold uppercase text-[#86858B]">Search Results</h2>
+	<h2 class="h2">Search Results</h2>
 
-	<h3 class="mb-2 text-lg font-semibold dark:text-white">Routes</h3>
+	<h3 class="h3">Routes</h3>
 	{#if searchResults?.routeSearchResults?.list?.length > 0}
 		<ul class="overflow-hidden rounded-lg">
 			{#each searchResults.routeSearchResults.list as route}
@@ -35,7 +35,7 @@
 		<p>No routes found.</p>
 	{/if}
 
-	<h3 class="mb-2 mt-4 text-lg font-semibold dark:text-white">Stops</h3>
+	<h3 class="h3">Stops</h3>
 	{#if searchResults?.stopSearchResults?.list?.length > 0}
 		<ul class="overflow-hidden rounded-lg">
 			{#each searchResults.stopSearchResults.list as stop}

From cb47e4d7f9c54223100b500757768277e9d8b224 Mon Sep 17 00:00:00 2001
From: Aaron Brethorst <aaron@brethorsting.com>
Date: Mon, 2 Sep 2024 20:19:31 -0700
Subject: [PATCH 2/8] Make the "no results found" search results text appear in
 dark mode

---
 src/routes/+page.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index a21d50c5..25e1f0be 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -89,7 +89,7 @@
 				on:stopSelected={stopSelected}
 			/>
 		{:else}
-			<p class="p-4 text-center">No results found.</p>
+			<p class="p-4 text-center dark:text-gray-200">No results found.</p>
 		{/if}
 	</ModalPane>
 {/if}

From a2aa16496edbf0a8ceb57205b237ff1d2e0180b9 Mon Sep 17 00:00:00 2001
From: Aaron Brethorst <aaron@brethorsting.com>
Date: Mon, 2 Sep 2024 20:33:43 -0700
Subject: [PATCH 3/8] Remove two character limit for issuing searches

Now that we are requiring the user to press return to search instead of doing typeahead, there's no reason to include a limit
---
 src/components/navigation/Header.svelte | 16 ++++++----------
 src/routes/+page.svelte                 |  2 --
 2 files changed, 6 insertions(+), 12 deletions(-)

diff --git a/src/components/navigation/Header.svelte b/src/components/navigation/Header.svelte
index fb302e40..86f77fe3 100644
--- a/src/components/navigation/Header.svelte
+++ b/src/components/navigation/Header.svelte
@@ -12,16 +12,12 @@
 	let searchInput = '';
 
 	async function handleSearch() {
-		if (searchInput.length > 2) {
-			try {
-				const response = await fetch(`/api/oba/search?query=${encodeURIComponent(searchInput)}`);
-				const results = await response.json();
-				console.log('Route results:', results.routeSearchResults);
-				console.log('Stop results:', results.stopSearchResults);
-				dispatch('searchResults', results);
-			} catch (error) {
-				console.error('Error fetching search results:', error);
-			}
+		try {
+			const response = await fetch(`/api/oba/search?query=${encodeURIComponent(searchInput)}`);
+			const results = await response.json();
+			dispatch('searchResults', results);
+		} catch (error) {
+			console.error('Error fetching search results:', error);
 		}
 	}
 
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 25e1f0be..a007a715 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -56,9 +56,7 @@
 		showRouteMap = false;
 	}
 	function handleSearch(event) {
-		console.log('Raw search event:', event);
 		searchResults = event.detail;
-		console.log('Search results set:', searchResults);
 	}
 
 	function closeModal() {

From 2c04cff349605323706964e7253e4b5615cc16fa Mon Sep 17 00:00:00 2001
From: Aaron Brethorst <aaron@brethorsting.com>
Date: Mon, 2 Sep 2024 20:33:59 -0700
Subject: [PATCH 4/8] Make ArrivalDeparture route names left aligned

---
 src/components/ArrivalDeparture.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/ArrivalDeparture.svelte b/src/components/ArrivalDeparture.svelte
index e5b0cc43..4185f49f 100644
--- a/src/components/ArrivalDeparture.svelte
+++ b/src/components/ArrivalDeparture.svelte
@@ -71,7 +71,7 @@
 	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">
+		<p class="text-xl text-left font-semibold text-black dark:text-white">
 			{routeShortName} - {tripHeadsign}
 		</p>
 		<p class="font-semibold text-black dark:text-white">

From 9dee23f22f5ceb7c04f0b7f71e62c52dc1aff220 Mon Sep 17 00:00:00 2001
From: Aaron Brethorst <aaron@brethorsting.com>
Date: Mon, 2 Sep 2024 20:37:47 -0700
Subject: [PATCH 5/8] Left align the scheduled departure time for a route

---
 src/components/ArrivalDeparture.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/ArrivalDeparture.svelte b/src/components/ArrivalDeparture.svelte
index 4185f49f..0de0aff6 100644
--- a/src/components/ArrivalDeparture.svelte
+++ b/src/components/ArrivalDeparture.svelte
@@ -74,7 +74,7 @@
 		<p class="text-xl text-left font-semibold text-black dark:text-white">
 			{routeShortName} - {tripHeadsign}
 		</p>
-		<p class="font-semibold text-black dark:text-white">
+		<p class="font-semibold text-black dark:text-white text-left">
 			<span class="text-md">{formatTime(scheduledArrivalTime)}</span> -
 			<span class={getArrivalStatus(predictedArrivalTime, scheduledArrivalTime).color}>
 				{getArrivalStatus(predictedArrivalTime, scheduledArrivalTime).text}

From eaa19cd83ff199ba421dd5f8d4552782a6ed3ed9 Mon Sep 17 00:00:00 2001
From: Aaron Brethorst <aaron@brethorsting.com>
Date: Mon, 2 Sep 2024 20:38:01 -0700
Subject: [PATCH 6/8] Differentiate scheduled/not real-time data from real-time
 data

---
 src/components/ArrivalDeparture.svelte | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/components/ArrivalDeparture.svelte b/src/components/ArrivalDeparture.svelte
index 0de0aff6..f0a870f5 100644
--- a/src/components/ArrivalDeparture.svelte
+++ b/src/components/ArrivalDeparture.svelte
@@ -23,7 +23,10 @@
 		const predictedDiff = predicted - now;
 		const scheduledDiff = scheduled - now;
 
-		if (predictedDiff <= 0) {
+		if (predictedTime == 0) {
+			return { status: 'scheduled', text: 'Scheduled/not real-time', color: 'text-gray-500' };
+		}
+		else if (predictedDiff <= 0) {
 			return {
 				status: 'early',
 				text: 'arrives ' + Math.abs(Math.floor(predictedDiff / 60000)) + ' min early',

From d75fb8308a4011d037f2b55d55f9898d4b17828c Mon Sep 17 00:00:00 2001
From: Aaron Brethorst <aaron@brethorsting.com>
Date: Mon, 2 Sep 2024 20:43:05 -0700
Subject: [PATCH 7/8] Make the header element on the map absolutely positioned

it was causing the page to extend beyond the height of the viewport
---
 src/components/navigation/Header.svelte | 3 +--
 src/routes/+page.svelte                 | 4 +++-
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/components/navigation/Header.svelte b/src/components/navigation/Header.svelte
index 86f77fe3..dc7e718e 100644
--- a/src/components/navigation/Header.svelte
+++ b/src/components/navigation/Header.svelte
@@ -29,8 +29,7 @@
 </script>
 
 <div
-	class="bg-blur-md flex items-center justify-between border-b border-neutral-300 bg-white/80 px-4 dark:bg-black dark:text-white"
->
+	class="bg-blur-md flex items-center justify-between border-b border-gray-500 bg-white/80 px-4 dark:bg-black dark:text-white">
 	<div class="flex items-center justify-center gap-4 px-2 py-2">
 		<div>
 			<a href="/">
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index a007a715..571a591a 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -64,7 +64,9 @@
 	}
 </script>
 
-<Header on:searchResults={handleSearch} />
+<div class='absolute z-40 top-0 left-0 right-0'>
+	<Header on:searchResults={handleSearch} />
+</div>
 
 {#if stop}
 	<ModalPane on:close={closePane} {stop}>

From ecdc2fc7c1232b004d98936bc4ee2ad7361412a1 Mon Sep 17 00:00:00 2001
From: Aaron Brethorst <aaron@brethorsting.com>
Date: Mon, 2 Sep 2024 20:56:33 -0700
Subject: [PATCH 8/8] Linting and formatting

---
 src/components/ArrivalDeparture.svelte    | 7 +++----
 src/components/navigation/Header.svelte   | 3 ++-
 src/components/oba/StopPane.svelte        | 4 +---
 src/components/oba/TripDetailsPane.svelte | 2 +-
 src/routes/+page.svelte                   | 2 +-
 5 files changed, 8 insertions(+), 10 deletions(-)

diff --git a/src/components/ArrivalDeparture.svelte b/src/components/ArrivalDeparture.svelte
index f0a870f5..c4a32ca6 100644
--- a/src/components/ArrivalDeparture.svelte
+++ b/src/components/ArrivalDeparture.svelte
@@ -25,8 +25,7 @@
 
 		if (predictedTime == 0) {
 			return { status: 'scheduled', text: 'Scheduled/not real-time', color: 'text-gray-500' };
-		}
-		else if (predictedDiff <= 0) {
+		} else if (predictedDiff <= 0) {
 			return {
 				status: 'early',
 				text: 'arrives ' + Math.abs(Math.floor(predictedDiff / 60000)) + ' min early',
@@ -74,10 +73,10 @@
 	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 text-left font-semibold text-black dark:text-white">
+		<p class="text-left text-xl font-semibold text-black dark:text-white">
 			{routeShortName} - {tripHeadsign}
 		</p>
-		<p class="font-semibold text-black dark:text-white text-left">
+		<p class="text-left font-semibold text-black dark:text-white">
 			<span class="text-md">{formatTime(scheduledArrivalTime)}</span> -
 			<span class={getArrivalStatus(predictedArrivalTime, scheduledArrivalTime).color}>
 				{getArrivalStatus(predictedArrivalTime, scheduledArrivalTime).text}
diff --git a/src/components/navigation/Header.svelte b/src/components/navigation/Header.svelte
index dc7e718e..ce2a04bd 100644
--- a/src/components/navigation/Header.svelte
+++ b/src/components/navigation/Header.svelte
@@ -29,7 +29,8 @@
 </script>
 
 <div
-	class="bg-blur-md flex items-center justify-between border-b border-gray-500 bg-white/80 px-4 dark:bg-black dark:text-white">
+	class="bg-blur-md flex items-center justify-between border-b border-gray-500 bg-white/80 px-4 dark:bg-black dark:text-white"
+>
 	<div class="flex items-center justify-center gap-4 px-2 py-2">
 		<div>
 			<a href="/">
diff --git a/src/components/oba/StopPane.svelte b/src/components/oba/StopPane.svelte
index 7dd3edbc..ff01a993 100644
--- a/src/components/oba/StopPane.svelte
+++ b/src/components/oba/StopPane.svelte
@@ -127,9 +127,7 @@
 				</div>
 			</div>
 			<div>
-				<h2 class="h2 ml-4 mt-4">
-					Arrivals and Departures
-				</h2>
+				<h2 class="h2 ml-4 mt-4">Arrivals and Departures</h2>
 			</div>
 			<div class="scrollbar-hidden h-96 space-y-2 overflow-y-scroll rounded-lg">
 				<div>
diff --git a/src/components/oba/TripDetailsPane.svelte b/src/components/oba/TripDetailsPane.svelte
index 3a32be0c..73a1a09a 100644
--- a/src/components/oba/TripDetailsPane.svelte
+++ b/src/components/oba/TripDetailsPane.svelte
@@ -86,7 +86,7 @@
 	{#if error}
 		<p>{error}</p>
 	{:else if tripDetails}
-		<h2 class='h2'>
+		<h2 class="h2">
 			{#if routeInfo}
 				Route {routeInfo.shortName} -
 			{/if}
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 571a591a..54087184 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -64,7 +64,7 @@
 	}
 </script>
 
-<div class='absolute z-40 top-0 left-0 right-0'>
+<div class="absolute left-0 right-0 top-0 z-40">
 	<Header on:searchResults={handleSearch} />
 </div>