continue working on list ui

backend/src/main.rs

@@ -13,6 +13,7 @@ mod bus;
 // mod geo;
 mod routes;
 mod static_data;
+mod trip;
 mod trips;
 
 pub mod feed {

backend/src/trip.rs

@@ -0,0 +1,6 @@
+pub trait Trip {
+    fn trip_id(&self) -> &str;
+    fn route_id(&self) -> &str;
+    fn direction(&self) -> i16;
+    fn start_date(&self) -> &str;
+}

frontend/src/lib/components/ContentList.svelte

@@ -3,7 +3,6 @@
 
 	let list_el: HTMLDivElement;
 
-	let max_item_height = 0;
 	let interval: number;
 
 	onMount(() => {
@@ -31,7 +30,7 @@
 
 <div
 	bind:this={list_el}
-	class="flex flex-col divide-y divide-neutral-500 overflow-auto max-h-96 px-2"
+	class="flex flex-col divide-y bg-neutral-900 divide-neutral-800 text-indigo-200 overflow-auto max-h-96 px-2"
 >
 	<slot />
 </div>

frontend/src/lib/components/Dialog.svelte

@@ -215,31 +215,33 @@
 						});
 					}}
 					aria-label="Close dialog"
-					class="appearance-none inline-flex h-8 w-8"
+					class="appearance-none h-8 w-8 flex"
 				>
 					<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}>
+						<button class="appearance-none h-8 w-8 flex" 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"
+							class="appearance-none 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}
-					/>
+					<!-- TODO: fix so we don't need pb-1 to center -->
+					<div class="pb-1">
+						<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}
+						/>
+					</div>
 				</div>
 			</div>
 		{:else}
@@ -271,7 +273,7 @@
 					});
 				}}
 				aria-label="Close dialog"
-				class="appearance none inline-flex h-8 w-8 absolute right-[5px] top-[5px]"
+				class="appearance none h-8 w-8 absolute right-[5px] top-[5px]"
 			>
 				<CircleX />
 			</button>

frontend/src/lib/components/List.svelte

@@ -7,9 +7,7 @@
 	// manage the min/max height of the list
 	export let manage_height: boolean = true;
 	export let title: string = 'List';
-	export let show_search: boolean = false;
-
-	export const tab_value = persisted(`${title.toLowerCase()}_tab`, 'Train');
+	export let tab_value = persisted(`${title.toLowerCase()}_tab`, 'Train');
 
 	const {
 		elements: { root, list, content, trigger },
@@ -25,6 +23,7 @@
 	}
 
 	let list_height = 0;
+	let title_height: number = 0;
 	let interval: number;
 
 	if (manage_height) {
@@ -43,17 +42,23 @@
 		});
 	}
 
-	const list_classes = `flex flex-col ${show_search ? 'max-h-[calc(100dvh-14rem)] overflow-auto' : 'max-h-[calc(100dvh-4rem)]'}`;
+	// ${show_search ? 'max-h-[calc(100dvh-11rem)] overflow-auto' : 'max-h-[calc(100dvh-4rem)]'}
+
+	const list_classes = `flex flex-col overflow-auto ${$$props.class} ?? 'max-h-[calc(100dvh-4rem)]'}`;
 </script>
 
 <div
 	use:melt={$root}
 	bind:this={list_el}
 	style={manage_height ? `min-height: ${list_height}px; max-height: ${list_height}px;` : ''}
-	class={`relative flex flex-col text-indigo-200 border-2 border-neutral-800 rounded overflow-auto ${$$props.class} ?? ''}`}
+	class={`relative flex flex-col text-indigo-200 overflow-auto ${$$props.class} ?? ''}`}
 >
-	<div id="list-item" class="flex pb-1 justify-between p-1 bg-neutral-800">
-		<div class="font-bold text-lg text-indigo-300 flex gap-1">
+	<div
+		id="list-item"
+		bind:clientHeight={title_height}
+		class="flex z-40 w-full md:w-[60%] fixed justify-between bg-neutral-800 p-1 items-center"
+	>
+		<div class="font-bold text-lg text-indigo-300 flex gap-1 items-center">
 			{title}
 			<!-- for geolocate -->
 			<slot name="title" />
@@ -80,11 +85,15 @@
 	</div>
 
 	{#if $value === 'Train'}
-		<div class={list_classes} use:melt={$content('Train')}>
+		<div
+			style={`padding-top: ${title_height}px;`}
+			class={list_classes}
+			use:melt={$content('Train')}
+		>
 			<slot name="train" />
 		</div>
 	{:else if $value === 'Bus'}
-		<div class={list_classes} use:melt={$content('Bus')}>
+		<div style={`padding-top: ${title_height}px;`} class={list_classes} use:melt={$content('Bus')}>
 			<slot name="bus" />
 		</div>
 	{/if}

frontend/src/lib/components/Pin.svelte

@@ -6,7 +6,6 @@
 	// 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 },
@@ -27,7 +26,7 @@
 	use:melt={$root}
 	on:click|stopPropagation
 	aria-label="Pin to home screen"
-	class={`z-30 ${size} items-center justify-center rounded-md
+	class={`z-30 flex items-center justify-center rounded-md
 text-base text-indigo-300 data-[state=on]:text-indigo-600
 data-[disabled]:cursor-not-allowed`}
 >

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

@@ -57,15 +57,13 @@
 	>
 		{#each $route_alerts as alert}
 			<swiper-slide>
-				<div class="relative flex flex-col max-h-[82dvh] p-2">
-					<h2 class="sticky top-0 font-bold flex items-center gap-2 text-indigo-300">
+				<div class="relative flex flex-col max-h-[80dvh]">
+					<h2 class="sticky top-0 font-bold flex items-center gap-2 text-indigo-300 p-1">
 						<Icon link={false} width="2rem" height="2rem" name={route_id} />
 						{alert.alert_type}
 					</h2>
 
-					<div
-						class="text-indigo-200 max-h-[80dvh] overflow-auto border border-neutral-700 rounded my-2"
-					>
+					<div class="text-indigo-200 max-h-[80dvh] overflow-auto bg-neutral-900 p-1">
 						<!-- hypothetically, the MTA could XSS this website (that would be silly) -->
 						{@html alert.header_html}
 						<!-- TODO: remove links or mark them as links -->
@@ -74,7 +72,7 @@
 						{/if}
 					</div>
 
-					<div class="text-sm text-neutral-400 flex justify-between">
+					<div class="text-sm text-neutral-400 flex justify-between bg-neutral-900">
 						<div>Updated {dayjs(alert.updated_at).fromNow()}</div>
 						{#if alert.end_time}
 							<!-- TODO: get the earliest end_time from API -->
@@ -86,10 +84,8 @@
 		{/each}
 	</swiper-container>
 {:else}
-	<div class="p-2">
-		<h2 class="sticky top-0 font-bold flex items-center gap-2 text-indigo-300">
-			<Icon width="2rem" height="2rem" name={route_id} />
-		</h2>
+	<div class="flex items-center gap-2 bg-neutral-900 p-2">
+		<Icon width="2rem" height="2rem" name={route_id} />
 		<div class="text-indigo-200">No alerts</div>
 	</div>
 {/if}
@@ -98,7 +94,7 @@
 
 <style lang="postcss">
 	swiper-container::part(pagination) {
-		@apply sticky bottom-2;
+		@apply sticky bottom-0;
 	}
 
 	/* :global(.swiper-slide) {

frontend/src/lib/components/RouteAlert/List.svelte

@@ -10,13 +10,12 @@
 	if (!route_ids.length) route_ids = all_route_ids;
 </script>
 
-<List bind:manage_height class="max-h-[calc(100dvh-8rem)]">
-	<div id="list-item" class="flex text-lg justify-between self-center w-full">
-		<div class="font-semibold text-indigo-300">{title}</div>
-	</div>
-	<div class="flex flex-col mt-1 gap-1">
+<List class={$$props.class ?? 'max-h-[calc(100dvh-7.5rem)]'} bind:manage_height bind:title>
+	<div slot="train" class="divide-y divide-neutral-800">
 		{#each route_ids as route_id (route_id)}
 			<Trigger {route_id} />
 		{/each}
 	</div>
+
+	<div slot="bus">Bus alerts coming soon</div>
 </List>

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

@@ -3,6 +3,7 @@
 	import { bus_stops, bus_routes, bus_stop_times, monitored_routes, data_at } from '$lib/stores';
 	import BusTrigger from '$lib/components/Trip/BusTrigger.svelte';
 	import BusIcon from '$lib/components/BusIcon.svelte';
+	import List from '$lib/components/ContentList.svelte';
 
 	export let stop_id: number;
 	// export let actions_width: number;
@@ -45,23 +46,24 @@
 </svelte:head>
 
 {#if stop}
-	<div class="p-4">
-		<div class="flex gap-1">
-			<!-- TODO: fix extra space when wrapping -->
-			<div class={`flex flex-wrap gap-1 my-auto`}>
-				{#each stop_routes as route}
-					<BusIcon {route} />
-				{/each}
-			</div>
-			<div class="flex flex-col gap-1">
-				<span class="text-xs text-neutral-300">#{stop.id}</span>
+	<div class="flex gap-1 p-1">
+		<!-- TODO: fix extra space when wrapping -->
 
-				<h2 class="font-bold text-xl text-indigo-300">{stop.name}</h2>
-			</div>
+		<div class="flex flex-col gap-1">
+			<span class="text-xs text-neutral-300">#{stop.id}</span>
+
+			<h2 class="font-bold text-xl text-indigo-300">{stop.name}</h2>
+		</div>
+
+		<div class={`flex flex-wrap gap-1 my-auto`}>
+			{#each stop_routes as route}
+				<BusIcon {route} />
+			{/each}
 		</div>
+	</div>
 
-		<!-- TODO: get bus transfers and also subway transfers -->
-		<!-- {#if $stop.transfers.length}
+	<!-- TODO: get bus transfers and also subway transfers -->
+	<!-- {#if $stop.transfers.length}
 		<div class="flex gap-2 pb-1 items-center flex-wrap">
 			<h2 class="text-lg">Transfers:</h2>
 
@@ -71,17 +73,16 @@
 		</div>
 	{/if} -->
 
-		<!-- TODO: check if stop sequence 0 is greater than now and then mark that its scheduled -->
-		<div
+	<!-- TODO: check if stop sequence 0 is greater than now and then mark that its scheduled -->
+	<!-- <div
 			class="flex flex-col gap-1 border overflow-auto max-h-96 border-neutral-800 rounded shadow-lg bg-neutral-900/50 text-indigo-400"
-		>
-			{#if $stop_times.length}
-				{#each $stop_times as stop_time}
-					<BusTrigger {stop_time} route={stop_routes.find((r) => r.id === stop_time.route_id)} />
-				{/each}
-			{:else}
-				<h2 class="text-neutral-300 text-center">No upcoming buses</h2>
-			{/if}
-		</div>
-	</div>
+		> -->
+	<List>
+		{#if $stop_times.length}
+			{#each $stop_times as stop_time}
+				<BusTrigger {stop_time} route={stop_routes.find((r) => r.id === stop_time.route_id)} />
+			{/each}
+		{/if}
+	</List>
+	<!-- </div> -->
 {/if}