Modal Pane Fit and Finish

src/components/navigation/ModalPane.svelte

@@ -8,6 +8,8 @@
 
 	const dispatch = createEventDispatcher();
 
+	export let title = '';
+
 	function closePane() {
 		pushState('/');
 		dispatch('close');
@@ -19,20 +21,27 @@
 	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>
+	<div class="flex h-full flex-col">
+		<div class="flex py-1">
+			<div class="text-normal flex-1 self-center font-semibold">{title}</div>
+			<div>
+				<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>
+		</div>
 
-	<div class="modal-content">
-		<slot></slot>
+		<div class="relative flex-1">
+			<div class="absolute inset-0 overflow-y-auto">
+				<slot></slot>
+			</div>
+		</div>
 	</div>
 </div>
 

src/components/navigation/TripDetailsModal.svelte

@@ -8,7 +8,7 @@
 	export let onClose;
 </script>
 
-<div class="trip-details-modal scrollbar-hidden">
+<div class="trip-details-modal">
 	<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" />
@@ -54,10 +54,4 @@
 		@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/routes/RouteModal.svelte

@@ -0,0 +1,47 @@
+<script>
+	import StopItem from '$components/StopItem.svelte';
+	import ModalPane from '$components/navigation/ModalPane.svelte';
+	import { t } from 'svelte-i18n';
+
+	export let selectedRoute;
+	export let stops;
+	export let mapProvider;
+
+	function handleStopItemClick(event) {
+		const { stop } = event.detail;
+
+		mapProvider.panTo(stop.lat, stop.lon);
+		mapProvider.setZoom(20);
+	}
+
+	function title() {
+		if (!selectedRoute) {
+			return '';
+		}
+
+		return $t('route_modal_title', { values: { name: selectedRoute.shortName } });
+	}
+</script>
+
+<ModalPane on:close title={title()}>
+	{#if stops && selectedRoute}
+		<div class="space-y-4">
+			<div>
+				<div class="h-36 rounded-lg bg-[#1C1C1E] bg-opacity-80 p-4">
+					<h1 class="mb-6 text-center text-2xl font-bold text-white">
+						Route: {selectedRoute.shortName}
+					</h1>
+					<h2 class="mb-6 text-center text-xl text-white">{selectedRoute.description}</h2>
+				</div>
+			</div>
+
+			<div class="space-y-2 overflow-y-scroll rounded-lg">
+				<div>
+					{#each stops as stop}
+						<StopItem {stop} on:stopClick={handleStopItemClick} />
+					{/each}
+				</div>
+			</div>
+		</div>
+	{/if}
+</ModalPane>

src/components/navigation/ViewAllRoutesModal.svelte → src/components/routes/ViewAllRoutesModal.svelte

@@ -1,4 +1,5 @@
 <script>
+	import ModalPane from '$components/navigation/ModalPane.svelte';
 	import LoadingSpinner from '$components/LoadingSpinner.svelte';
 	import RouteItem from '$components/RouteItem.svelte';
 	import { onMount } from 'svelte';
@@ -65,18 +66,14 @@
 	}
 </script>
 
-<div>
+<ModalPane on:close title={$t('search.all_routes')}>
 	{#if loading}
 		<LoadingSpinner />
 	{/if}
 
 	{#if routes.length > 0}
-		<div class="h-25 rounded-lg bg-[#1C1C1E] bg-opacity-80 p-4">
-			<h1 class="mb-6 text-center text-2xl font-bold text-white">{$t('search.all_routes')}</h1>
-		</div>
-
-		<div class="mt-4">
-			<div class="relative mb-4">
+		<div>
+			<div class="sticky top-0">
 				<input
 					type="text"
 					placeholder={$t('search.search_for_routes')}
@@ -101,7 +98,7 @@
 				</svg>
 			</div>
 
-			<div class="scrollbar-hidden fixed-height relative mt-4 max-h-96 overflow-y-auto rounded-lg">
+			<div>
 				{#if filteredRoutes.length > 0}
 					{#each filteredRoutes as route}
 						<RouteItem {route} on:routeClick={handleRouteClick} />
@@ -114,17 +111,4 @@
 			</div>
 		</div>
 	{/if}
-</div>
-
-<style>
-	.scrollbar-hidden {
-		scrollbar-width: none;
-		-ms-overflow-style: none;
-	}
-	.scrollbar-hidden::-webkit-scrollbar {
-		display: none;
-	}
-	.fixed-height {
-		height: 500px;
-	}
-</style>
+</ModalPane>

src/components/stops/StopModal.svelte

@@ -0,0 +1,24 @@
+<!--
+    @component
+    A modal component that displays stop information using StopPane.
+
+    @prop {boolean} showAllStops - Flag to control visibility of all stops
+    @prop {Object} stop - Stop object containing stop details
+
+    @fires {CustomEvent} close - Emitted when the modal is closed
+    @fires {CustomEvent} tripSelected - Forwarded from StopPane when a trip is selected
+    @fires {CustomEvent} updateRouteMap - Forwarded from StopPane when route map needs updating
+    @fires {CustomEvent} showAllStops - Forwarded from StopPane when all stops should be shown
+-->
+
+<script>
+	import ModalPane from '$components/navigation/ModalPane.svelte';
+	import StopPane from '$components/stops/StopPane.svelte';
+
+	export let showAllStops;
+	export let stop;
+</script>
+
+<ModalPane on:close title={stop.name}>
+	<StopPane on:tripSelected on:updateRouteMap on:showAllStops {showAllStops} {stop} />
+</ModalPane>

src/components/oba/StopPane.svelte → src/components/stops/StopPane.svelte

@@ -121,11 +121,11 @@
 					</div>
 				</div>
 				{#if arrivalsAndDepartures.arrivalsAndDepartures.length === 0}
-					<div class="flex h-96 items-center justify-center">
+					<div class="flex items-center justify-center">
 						<p>{$t('no_arrivals_or_departures_in_next_30_minutes')}</p>
 					</div>
 				{:else}
-					<div class="scrollbar-hidden h-96 space-y-2 overflow-y-scroll rounded-lg">
+					<div class="space-y-2 overflow-y-scroll rounded-lg">
 						<div>
 							{#each arrivalsAndDepartures.arrivalsAndDepartures as arrival}
 								<ArrivalDeparture
@@ -150,12 +150,3 @@
 		{/if}
 	</div>
 {/if}
-
-<style lang="postcss">
-	.scrollbar-hidden {
-		scrollbar-width: none;
-		-ms-overflow-style: none;
-		overflow: -moz-scrollbars-none;
-		-webkit-scrollbar: none;
-	}
-</style>

src/locales/am.json

@@ -34,6 +34,7 @@
 	"stop": "ቆሻሻ",
 	"routes": "መንገዶች",
 	"route": "መንገድ",
+	"route_modal_title": "መስመር {name}",
 	"loading": "በመጫን ላይ",
 	"arrives": "ይደርሳል",
 	"NA": "አቅርኛ",

src/locales/en.json

@@ -34,6 +34,7 @@
 	"stop": "Stop",
 	"routes": "Routes",
 	"route": "route",
+	"route_modal_title": "Route {name}",
 	"loading": "Loading",
 	"arrives": "arrives",
 	"NA": "N/A",

src/locales/es.json

@@ -34,6 +34,7 @@
 	"stop": "Parada",
 	"routes": "Rutas",
 	"route": "Ruta",
+	"route_modal_title": "Ruta {name}",
 	"loading": "Cargando",
 	"arrives": "llega",
 	"NA": "N/D",

src/locales/pl.json

@@ -34,6 +34,7 @@
 	"stop": "Przystanek",
 	"routes": "Trasy",
 	"route": "trasa",
+	"route_modal_title": "Trasa {name}",
 	"loading": "Ładowanie",
 	"arrives": "przyjeżdża",
 	"NA": "N/D",

src/locales/so.json

@@ -32,11 +32,12 @@
 	"arrivals_and_departures": "Imaatinka iyo baxsashada",
 	"no_arrivals_or_departures_in_next_30_minutes": "Ma jiraan soo gaadhis ama bixitaan 30-ka daqiiqo ee soo socda",
 	"stop": "Joogsi",
-	"routes": "Wadooyin",
-	"route": "waddo",
+	"routes": "Jidadka",
+	"route": "Jidka",
+	"route_modal_title": "Jidka {name}",
 	"loading": "Shaqeynaya",
 	"arrives": "imaataa",
-	"NA": "M/J",
+	"NA": "M/Q",
 	"time": {
 		"ago": "hore",
 		"sec": "ilbiriqsi",

src/locales/tl.json

@@ -34,6 +34,7 @@
 	"stop": "Hintuan",
 	"routes": "Mga ruta",
 	"route": "ruta",
+	"route_modal_title": "Ruta {name}",
 	"loading": "Naglo-load",
 	"arrives": "dumarating",
 	"NA": "W/A",

src/locales/vi.json

@@ -34,6 +34,7 @@
 	"stop": "Trạm dừng",
 	"routes": "Tuyến đường",
 	"route": "tuyến đường",
+	"route_modal_title": "Tuyến đường {name}",
 	"loading": "Đang tải",
 	"arrives": "đến",
 	"NA": "KAD",

src/routes/+page.svelte

@@ -1,14 +1,13 @@
 <script>
 	import { pushState } from '$app/navigation';
 	import SearchPane from '$components/search/SearchPane.svelte';
-	import ModalPane from '$components/navigation/ModalPane.svelte';
-	import StopPane from '$components/oba/StopPane.svelte';
 	import MapContainer from '$components/MapContainer.svelte';
-	import RouteModal from '$components/navigation/RouteModal.svelte';
-	import ViewAllRoutesModal from '$components/navigation/ViewAllRoutesModal.svelte';
+	import RouteModal from '$components/routes/RouteModal.svelte';
+	import ViewAllRoutesModal from '$components/routes/ViewAllRoutesModal.svelte';
 	import { isLoading } from 'svelte-i18n';
 	import AlertsModal from '$components/navigation/AlertsModal.svelte';
 	import { onMount } from 'svelte';
+	import StopModal from '$components/stops/StopModal.svelte';
 
 	let stop;
 	let selectedTrip = null;
@@ -160,29 +159,28 @@
 				on:clearResults={clearPolylines}
 				on:viewAllRoutes={handleShowAllRoutes}
 			/>
+
 			<div class="mt-4 flex-1">
 				{#if stop}
-					<ModalPane on:close={closePane}>
-						<StopPane
-							{showAllStops}
-							{stop}
-							on:tripSelected={tripSelected}
-							on:updateRouteMap={handleUpdateRouteMap}
-							on:showAllStops={handleShowAllStops}
-						/>
-					</ModalPane>
+					<StopModal
+						on:close={closePane}
+						on:tripSelected={tripSelected}
+						on:updateRouteMap={handleUpdateRouteMap}
+						on:showAllStops={handleShowAllStops}
+						{stop}
+						{showAllStops}
+					/>
 				{/if}
 
 				{#if showRouteModal}
-					<ModalPane on:close={closePane}>
-						<RouteModal {mapProvider} {stops} {selectedRoute} />
-					</ModalPane>
+					<RouteModal on:close={closePane} {mapProvider} {stops} {selectedRoute} />
 				{/if}
 
 				{#if showAllRoutesModal}
-					<ModalPane on:close={closePane}>
-						<ViewAllRoutesModal on:routeSelected={handleRouteSelectedFromModal} />
-					</ModalPane>
+					<ViewAllRoutesModal
+						on:close={closePane}
+						on:routeSelected={handleRouteSelectedFromModal}
+					/>
 				{/if}
 			</div>
 		</div>