Superseded: Fit and finish

src/components/ArrivalDeparture.svelte

@@ -79,7 +79,7 @@
 
 <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]"
+	class="flex h-auto w-full items-center justify-between bg-[#ffffff] p-4 hover:cursor-pointer"
 >
 	<div class="flex flex-col gap-1">
 		<p class="text-left text-xl font-semibold text-black dark:text-white">

src/components/containers/Accordion.svelte

@@ -0,0 +1,35 @@
+<script>
+	import { setContext } from 'svelte';
+	import { writable, derived } from 'svelte/store';
+
+	// Create a store to track the active item
+	const activeItem = writable(null);
+
+	// Create dispatch for activeChanged event
+	import { createEventDispatcher } from 'svelte';
+	const dispatch = createEventDispatcher();
+
+	// Watch for changes to activeItem and dispatch event
+	$: {
+		dispatch('activeChanged', { activeItem: $activeItem });
+	}
+
+	// Provide context for child AccordionItems
+	setContext('accordion', {
+		registerItem: (id) => {
+			const isActive = derived(activeItem, ($activeItem) => $activeItem === id);
+			return {
+				isActive,
+				activate: () => {
+					activeItem.set($activeItem === id ? null : id);
+				}
+			};
+		}
+	});
+</script>
+
+<div
+	class="divide-y divide-gray-200 border-y border-gray-200 dark:divide-gray-700 dark:border-gray-700"
+>
+	<slot />
+</div>

src/components/containers/AccordionItem.svelte

@@ -0,0 +1,46 @@
+<script>
+	import { getContext } from 'svelte';
+	import { slide } from 'svelte/transition';
+
+	const id = crypto.randomUUID();
+	const { registerItem } = getContext('accordion');
+	const { isActive, activate } = registerItem(id);
+
+	function toggle() {
+		activate();
+	}
+</script>
+
+<div class="relative">
+	<!-- Added sticky positioning to the button wrapper -->
+	<div class="sticky top-0 z-10 bg-white dark:bg-gray-800">
+		<button
+			type="button"
+			class="flex w-full items-center justify-between py-3 text-left text-base font-medium text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white"
+			class:text-gray-900={$isActive}
+			class:dark:text-white={$isActive}
+			on:click={toggle}
+			aria-expanded={$isActive}
+		>
+			<slot name="header" />
+			<svg
+				class="h-6 w-6 shrink-0 transition-transform"
+				class:rotate-180={$isActive}
+				fill="none"
+				stroke="currentColor"
+				viewBox="0 0 24 24"
+				xmlns="http://www.w3.org/2000/svg"
+			>
+				<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
+			</svg>
+		</button>
+	</div>
+
+	{#if $isActive}
+		<div transition:slide|local>
+			<div class="py-3">
+				<slot />
+			</div>
+		</div>
+	{/if}
+</div>

src/components/oba/TripDetailsPane.svelte

@@ -93,7 +93,7 @@
 				{#each tripDetails.schedule.stopTimes as tripStop, index}
 					<div class="relative mb-4 flex items-center">
 						<div
-							class="relative z-10 flex size-8 items-center justify-center rounded-md border border-neutral-400 bg-white dark:bg-neutral-800"
+							class="relative z-0 flex size-8 items-center justify-center rounded-md border border-neutral-400 bg-white dark:bg-neutral-800"
 						>
 							{#if index === busPosition}
 								<FontAwesomeIcon

src/components/stops/StopPane.svelte

@@ -1,12 +1,15 @@
 <script>
 	import ArrivalDeparture from '../ArrivalDeparture.svelte';
-	import TripDetailsModal from '../navigation/TripDetailsModal.svelte';
+	// import TripDetailsModal from '../navigation/TripDetailsModal.svelte';
+	import TripDetailsPane from '$components/oba/TripDetailsPane.svelte';
 	import LoadingSpinner from '$components/LoadingSpinner.svelte';
 	import { onDestroy, onMount } from 'svelte';
 	import { createEventDispatcher } from 'svelte';
+	import Accordion from '$components/containers/Accordion.svelte';
+	import AccordionItem from '$components/containers/AccordionItem.svelte';
 
 	import '$lib/i18n.js';
 	import { t } from 'svelte-i18n';
 
 	import { isLoading } from 'svelte-i18n';
 
@@ -17,7 +20,6 @@
 	let loading = false;
 	let error;
 
-	let showTripDetails = false;
 	let selectedTripDetails = null;
 	let interval = null;
 	let initialDataLoaded = false;
@@ -62,7 +64,7 @@
 	});
 
 	let _routeShortNames = null;
 	function routeShortNames() {
 		if (!_routeShortNames && arrivalsAndDeparturesResponse?.data?.references?.routes) {
 			_routeShortNames = arrivalsAndDeparturesResponse.data.references.routes
 				.filter((r) => stop.routeIds.includes(r.id))
@@ -79,16 +81,19 @@
 			tripHeadsign: event.detail.tripHeadsign,
 			scheduledArrivalTime: event.detail.scheduledArrivalTime
 		};
-		showTripDetails = true;
 		dispatch('tripSelected', selectedTripDetails);
 		dispatch('updateRouteMap', { show: true });
 	}
 
 	function handleCloseTripDetailModal() {
-		showTripDetails = false;
+		selectedTripDetails = null;
 		dispatch('tripSelected', null);
 		dispatch('updateRouteMap', { show: false });
 	}
+
+	function selectionChanged() {
+		console.log('bonk');
+	}
 </script>
 
 {#if $isLoading}
@@ -104,10 +109,34 @@
 		{/if}
 
 		{#if arrivalsAndDepartures}
-			<div class="space-y-4">
+			<Accordion on:activeChanged={selectionChanged}>
+				{#each arrivalsAndDepartures.arrivalsAndDepartures as arrival}
+					<AccordionItem>
+						<span slot="header">
+							<ArrivalDeparture
+								routeShortName={arrival.routeShortName}
+								tripHeadsign={arrival.tripHeadsign}
+								scheduledArrivalTime={arrival.scheduledArrivalTime}
+								predictedArrivalTime={arrival.predictedArrivalTime}
+								tripId={arrival.tripId}
+								vehicleId={arrival.vehicleId}
+								serviceDate={arrival.serviceDate}
+								on:showTripDetails={handleShowTripDetails}
+							/>
+						</span>
+
+						<TripDetailsPane
+							{stop}
+							tripId={selectedTripDetails.tripId}
+							serviceDate={selectedTripDetails.serviceDate}
+						/>
+					</AccordionItem>
+				{/each}
+			</Accordion>
+
+			<!-- <div class="space-y-4 h-full bg-white">
 				<div>
 					<div class="relative flex flex-col gap-y-1 rounded-lg bg-[#1C1C1E] bg-opacity-80 p-4">
-						<h1 class="h1 mb-0 text-white">{stop.name}</h1>
 						<h2 class="h2 mb-0 text-white">{$t('stop')} #{stop.id}</h2>
 						{#if routeShortNames()}
 							<h2 class="h2 mb-0 text-white">{$t('routes')}: {routeShortNames().join(', ')}</h2>
@@ -128,9 +157,9 @@
 						<p>{$t('no_arrivals_or_departures_in_next_30_minutes')}</p>
 					</div>
 				{:else}
-					<div class="space-y-2 overflow-y-scroll rounded-lg">
-						<div>
-							{#each arrivalsAndDepartures.arrivalsAndDepartures as arrival}
+					<div class="h-full bg-white">
+						{#each arrivalsAndDepartures.arrivalsAndDepartures as arrival}
+							<div class="sticky top-0">
 								<ArrivalDeparture
 									routeShortName={arrival.routeShortName}
 									tripHeadsign={arrival.tripHeadsign}
@@ -141,15 +170,19 @@
 									serviceDate={arrival.serviceDate}
 									on:showTripDetails={handleShowTripDetails}
 								/>
-							{/each}
-						</div>
+							</div>
+
+							{#if arrival.tripId == selectedTripDetails?.tripId}
+								<TripDetailsPane
+									{stop}
+									tripId={selectedTripDetails.tripId}
+									serviceDate={selectedTripDetails.serviceDate}
+								/>
+							{/if}
+						{/each}
 					</div>
 				{/if}
-			</div>
-		{/if}
-
-		{#if showTripDetails}
-			<TripDetailsModal {stop} {selectedTripDetails} onClose={handleCloseTripDetailModal} />
+			</div> -->
 		{/if}
 	</div>
 {/if}