work on showing old stops in trip and better colors for dialog

backend/src/routes/stops.rs

@@ -115,6 +115,11 @@ pub async fn times(
                 t.id = st.trip_id
             WHERE
                 st.arrival BETWEEN $1 AND ($1 + INTERVAL '4 hours')
+            OR t.id IN (
+                SELECT DISTINCT trip_id
+                FROM stop_times
+                WHERE arrival > $1
+            )
             ORDER BY
                 st.arrival
         ",

frontend/src/app.html

@@ -24,7 +24,7 @@
 			property="og:description"
 			content="The best website to view MTA subway (and bus) times and alerts."
 		/>
-		<meta property="og:image" content="https://trainstat.us/logo.png" />
+		<!-- <meta property="og:image" content="https://trainstat.us/logo.png" /> -->
 
 		<!-- Twitter Meta Tags -->
 		<meta name="twitter:card" content="summary_large_image" />
@@ -35,7 +35,7 @@
 			name="twitter:description"
 			content="The best website to view MTA subway (and bus) times and alerts."
 		/>
-		<meta name="twitter:image" content="https://trainstat.us/logo.png" />
+		<!-- <meta name="twitter:image" content="https://trainstat.us/logo.png" /> -->
 
 		<meta name="apple-mobile-web-app-capable" content="yes" />
 		<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

frontend/src/lib/components/ContentList.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+	import { onDestroy, onMount } from 'svelte';
+
+	let list_el: HTMLDivElement;
+
+	let max_item_height = 0;
+	let interval: number;
+
+	onMount(() => {
+		setInterval(() => {
+			if (list_el == null) return;
+
+			const els = Array.from(list_el.querySelectorAll('#list-item'))
+				.map((e) => e.clientHeight)
+				.sort((a, b) => b - a);
+			const largest = els[0];
+			// console.log(largest);
+			// list_el.querySelectorAll('#list-item').forEach((e) => {
+			// 	e.style.height = `${largest}px`;
+			// });
+
+			// list_height = els.reduce((h, e) => e.clientHeight + h, 0);
+			// list_height += 10;
+		}, 100);
+	});
+
+	onDestroy(() => {
+		clearInterval(interval);
+	});
+</script>
+
+<div bind:this={list_el} class="flex flex-col overflow-auto max-h-96 px-2">
+	<slot />
+</div>

frontend/src/lib/components/Dialog.svelte

@@ -178,7 +178,7 @@
 		}
 	});
 	// used to set the max width of the content titles
-	let actions_width: number;
+	let actions_width: number = 0;
 </script>
 
 <!-- TODO: figure out transitions -->
@@ -204,30 +204,8 @@
 				<BusTripContent bind:actions_width bind:trip_id={item_id} />
 			{/if}
 
-			<div
-				bind:offsetWidth={actions_width}
-				class="z-40 absolute right-[5px] top-[10px] inline-flex gap-1 items-center"
-			>
-				<Pin
-					store={pin_store}
-					item_id={$page.state.dialog_type === 'bus_trip'
-						? `${item_id}_${$bus_trips.find((t) => t.id === item_id)?.route_id}`
-						: item_id}
-				/>
-
-				{#if !copied}
-					<button class="appearance-none inline-flex h-8 w-8" aria-label="Share" on:click={share}>
-						<Share class="h-6 w-6" />
-					</button>
-				{:else}
-					<button
-						class="appearance-none inline-flex h-8 w-8 text-green-600"
-						aria-label="Link copied to clipboard"
-					>
-						<ClipboardCheck class="h-6 w-6" />
-					</button>
-				{/if}
-
+			<!-- bind:offsetWidth={actions_width} -->
+			<div class="z-40 flex items-center gap-1 justify-between px-2 pt-2">
 				<button
 					on:click={() => {
 						pushState('', {
@@ -241,6 +219,28 @@
 				>
 					<CircleX />
 				</button>
+
+				<div class="flex gap-1 items-center">
+					{#if !copied}
+						<button class="appearance-none inline-flex h-8 w-8" aria-label="Share" on:click={share}>
+							<Share class="h-6 w-6" />
+						</button>
+					{:else}
+						<button
+							class="appearance-none inline-flex h-8 w-8 text-green-600"
+							aria-label="Link copied to clipboard"
+						>
+							<ClipboardCheck class="h-6 w-6" />
+						</button>
+					{/if}
+					<Pin
+						size={'size-6'}
+						store={pin_store}
+						item_id={$page.state.dialog_type === 'bus_trip'
+							? `${item_id}_${$bus_trips.find((t) => t.id === item_id)?.route_id}`
+							: item_id}
+					/>
+				</div>
 			</div>
 		{:else}
 			<h2 class="p-4 items-center text-lg text-red-400 flex gap-2">

frontend/src/lib/components/Pin.svelte

@@ -6,6 +6,7 @@
 	// should probably use generic types
 	export let item_id: string | number;
 	export let store: Writable<string[] | number[]>;
+	export let size: string = 'size-8';
 
 	const {
 		elements: { root },
@@ -26,10 +27,9 @@
 	use:melt={$root}
 	on:click|stopPropagation
 	aria-label="Pin to home screen"
-	class="z-30 grid h-8 w-8 place-items-center items-center justify-center rounded-md
+	class={`z-30 ${size} items-center justify-center rounded-md
 text-base text-indigo-300 data-[state=on]:text-indigo-600
-data-[disabled]:cursor-not-allowed
-"
+data-[disabled]:cursor-not-allowed`}
 >
 	{#if $pressed}
 		<Pin fill="#4f46e5" />

frontend/src/lib/components/Stop/Arrivals.svelte

@@ -17,15 +17,18 @@
 	// if user provided date, we use that as now
 
 	const stop_times = derived(stop_time_store, ($stop_time_store) => {
+		const now = $data_at ?? new Date();
+
 		const st = $stop_time_store.filter(
 			(st) =>
-				// st.arrival > new Date() &&
-				st.stop_id === stop.id && st.direction === direction && st.route_id === route_id
+				st.stop_id === stop.id &&
+				st.direction === direction &&
+				st.route_id === route_id &&
+				st.arrival > now
 		);
 
 		return st.map((st) => {
 			const arrival = st.arrival.getTime();
-			const now = $data_at ?? new Date();
 			const eta = (arrival - now.getTime()) / 1000 / 60;
 
 			st.eta = eta;

frontend/src/lib/components/Stop/Content.svelte

@@ -41,32 +41,28 @@
 	{/if}
 </svelte:head>
 
-<div class="p-2">
+<div class="">
 	{#if $stop}
-		<div style={`max-width: calc(100% - ${actions_width}px);`} class="flex items-center gap-2 py-1">
-			<Routes link={true} routes={$stop.routes} />
-
+		<div class="flex items-center gap-2 p-1">
 			<h2 class="font-bold text-xl text-indigo-300">{$stop.name}</h2>
+
+			<Routes link={true} routes={$stop.routes} />
 		</div>
 
 		{#if $stop.transfers.length}
-			<div class="flex gap-2 pb-1 items-center flex-wrap">
-				<h2 class="text-lg">Transfers:</h2>
+			<div class="flex gap-2 pb-1 px-1 items-center flex-wrap">
+				<h2 class="text-base text-indigo-200">Transfers:</h2>
 
 				{#each $stop.transfers as stop_id}
 					<Transfer {stop_id} />
 				{/each}
 			</div>
 		{/if}
 
-		<div
-			use:melt={$root}
-			class="flex border border-neutral-800 flex-col rounded-xl shadow-lg data-[orientation=vertical]:flex-row bg-neutral-900/50 text-indigo-400"
-		>
+		<div use:melt={$root} class="flex flex-col shadow-2xl text-indigo-400 bg-neutral-900/70">
 			<div
 				use:melt={$list}
-				class="flex shrink-0 overflow-x-auto text-indigo-100
-		  data-[orientation=vertical]:flex-col data-[orientation=vertical]:border-r"
+				class="flex shrink-0 overflow-x-auto text-indigo-100"
 				aria-label="Trip information"
 			>
 				{#each triggers as triggerItem}
@@ -76,16 +72,16 @@
 							<div
 								in:send={{ key: 'trigger' }}
 								out:receive={{ key: 'trigger' }}
-								class="absolute bottom-1 left-1/2 h-1 w-full -translate-x-1/2 rounded-full bg-indigo-400"
+								class="absolute bottom-1 left-1/2 h-1 w-1/2 -translate-x-1/2 rounded-full bg-indigo-400"
 							/>
 						{/if}
 					</button>
 				{/each}
 			</div>
-			<div use:melt={$content('northbound')} class="bg-neutral-900/50 p-2">
+			<div use:melt={$content('northbound')}>
 				<TripList stop={$stop} direction={Direction.North} />
 			</div>
-			<div use:melt={$content('southbound')} class=" bg-neutral-900/50 p-2">
+			<div use:melt={$content('southbound')}>
 				<TripList stop={$stop} direction={Direction.South} />
 			</div>
 		</div>

frontend/src/lib/components/Stop/Transfer.svelte

@@ -9,7 +9,7 @@
 
 <button
 	on:click={() => pushState('', { dialog_id: stop_id, dialog_open: true, dialog_type: 'stop' })}
-	class="flex rounded gap-1 border border-neutral-700 bg-neutral-900 shadow-2xl"
+	class="flex rounded gap-1 border border-neutral-300 shadow-2xl active:border-indigo-400 hover:border-indigo-400"
 >
 	<Routes routes={stop.routes} />
 </button>

frontend/src/lib/components/Trip/Content.svelte

@@ -8,6 +8,8 @@
 	export let trip_id: string;
 	export let actions_width: number;
 
+	let show_previous_stops = false;
+
 	$: trip = derived(trips, ($trips) => {
 		return $trips.find((t) => t.id === trip_id);
 	});

frontend/src/lib/components/Trip/ListBusTrigger.svelte

@@ -48,7 +48,7 @@
 			</div>
 		{/if}
 
-		<div>
+		<div class="flex gap-2">
 			<span class="text-neutral-300">Current stop:</span>
 			{current_stop?.name}
 		</div>

frontend/src/lib/components/Trip/StopTimeList.svelte

@@ -3,18 +3,20 @@
 	import { type Direction, type Stop } from '$lib/api';
 	import { stop_times as stop_time_store, data_at } from '$lib/stores';
 	import Trigger from '$lib/components/Trip/Trigger.svelte';
+	import List from '$lib/components/ContentList.svelte';
 
 	export let stop: Stop;
 	export let direction: Direction;
 
 	const stop_times = derived(stop_time_store, ($stop_time_store) => {
+		const now = $data_at ?? new Date();
+
 		const st = $stop_time_store.filter(
-			(st) => st.stop_id === stop.id && st.direction === direction
+			(st) => st.stop_id === stop.id && st.direction === direction && st.arrival > now
 		);
 
 		return st.map((st) => {
 			const arrival = st.arrival.getTime();
-			const now = $data_at ?? new Date();
 			const eta = (arrival - now.getTime()) / 1000 / 60;
 
 			st.eta = eta;
@@ -24,12 +26,13 @@
 	});
 </script>
 
-<div class="flex gap-1 flex-col overflow-auto max-h-96">
+<!-- <div class="flex gap-1 flex-col overflow-auto max-h-96"> -->
+<List>
 	{#if $stop_times.length}
 		{#each $stop_times as stop_time (stop_time.trip_id)}
 			<Trigger {stop_time} />
 		{/each}
 	{:else}
 		<div class="text-neutral-300 text-center">No trips found</div>
 	{/if}
-</div>
+</List>

frontend/src/lib/components/Trip/Trigger.svelte

@@ -23,7 +23,8 @@
 </script>
 
 <button
-	class="w-full flex justify-between items-center"
+	id="list-item"
+	class="w-full border-y border-neutral-400 mt-[-1px] p-[.5rem] flex justify-between items-center text-indigo-200 px-1"
 	on:click={() => {
 		pushState('', {
 			dialog_open: true,
@@ -32,27 +33,31 @@
 		});
 	}}
 >
-	<div
+	<!-- <div
 		class="w-full border-neutral-700 bg-neutral-800 rounded border shadow-2xl hover:bg-neutral-900 px-1 text-neutral-300"
-	>
-		<!-- TODO: Some sort of animation when trip status is stopped to / arriving at this stop  -->
-		<div class="flex gap-12 items-center justify-between mx-1">
-			<div class="flex gap-2 items-center">
-				<!-- maybe enable link here -->
-				<Icon express={$trip?.express} link={false} name={stop_time.route_id} />
-				<div class={`${!$trip?.assigned ? 'italic' : ''}`}>
-					{stop_time.eta?.toFixed(0)}m
-				</div>
+	> -->
+	<!-- TODO: Some sort of animation when trip status is stopped to / arriving at this stop  -->
+	<div class="flex gap-2 items-center">
+		<!-- maybe enable link here -->
+		<Icon
+			width="20px"
+			height="20px"
+			express={$trip?.express}
+			link={false}
+			name={stop_time.route_id}
+		/>
+		<div class={`${!$trip?.assigned ? 'italic' : ''}`}>
+			{stop_time.eta?.toFixed(0)}m
+		</div>
 
-				<!-- {#if stops_away > 0}
+		<!-- {#if stops_away > 0}
 					<div class="text-indigo-200 text-xs">
 						{stops_away} stop{stops_away > 1 ? 's' : ''} away
 					</div>
 				{/if} -->
-			</div>
-			<div class="text-right">
-				{last_stop?.name}
-			</div>
-		</div>
 	</div>
+	<div class="text-right">
+		{last_stop?.name}
+	</div>
+	<!-- </div> -->
 </button>