From 17a8d8b8701593529759199ca5921b1cc21225ed Mon Sep 17 00:00:00 2001
From: Traines <git@traines.eu>
Date: Sun, 19 Jan 2025 00:15:14 +0000
Subject: [PATCH] ui: show backend error msgs, compact transfer display

---
 ui/package.json                    | 2 +-
 ui/src/lib/ConnectionDetail.svelte | 6 +++---
 ui/src/lib/ErrorMessage.svelte     | 2 +-
 ui/src/lib/ItineraryList.svelte    | 6 +++++-
 ui/src/routes/+page.svelte         | 3 ++-
 5 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/ui/package.json b/ui/package.json
index 9d46afd4c..c75621b5e 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -3,7 +3,7 @@
 	"version": "0.0.1",
 	"private": true,
 	"scripts": {
-		"dev": "vite dev --host 0.0.0.0 --port 3000",
+		"dev": "vite dev",
 		"build": "vite build",
 		"preview": "vite preview",
 		"test": "npm run test:integration && npm run test:unit",
diff --git a/ui/src/lib/ConnectionDetail.svelte b/ui/src/lib/ConnectionDetail.svelte
index 978bd2e62..767cd6450 100644
--- a/ui/src/lib/ConnectionDetail.svelte
+++ b/ui/src/lib/ConnectionDetail.svelte
@@ -89,8 +89,8 @@
 			<div class="w-full flex justify-between items-center space-x-1">
 				<Route {onClickTrip} {l} />
 				{#if pred && (pred.from.track || pred.duration !== 0)}
-					<div class="border-t w-full h-0"></div>
-					<div class="text-sm text-muted-foreground text-nowrap px-2">
+					<div class="border-t h-0 grow shrink"></div>
+					<div class="text-sm text-muted-foreground leading-none px-2">
 						{#if pred.from.track}
 							{t.arrivalOnTrack} {pred.from.track}{pred.duration ? ',' : ''}
 						{/if}
@@ -102,7 +102,7 @@
 						{/if}
 					</div>
 				{/if}
-				<div class="border-t w-full h-0"></div>
+				<div class="border-t h-0 grow shrink"></div>
 				{#if l.from.track}
 					<div class="text-nowrap border rounded-xl px-2">
 						{t.track}
diff --git a/ui/src/lib/ErrorMessage.svelte b/ui/src/lib/ErrorMessage.svelte
index 18c023121..9e3c56c64 100644
--- a/ui/src/lib/ErrorMessage.svelte
+++ b/ui/src/lib/ErrorMessage.svelte
@@ -6,4 +6,4 @@
 	} = $props();
 </script>
 
-<div class="m-4 text-red-600">{e}</div>
+<div class="m-4 text-red-600"><div class="min-w-0">{e}</div></div>
diff --git a/ui/src/lib/ItineraryList.svelte b/ui/src/lib/ItineraryList.svelte
index bc647acc8..fa9e40853 100644
--- a/ui/src/lib/ItineraryList.svelte
+++ b/ui/src/lib/ItineraryList.svelte
@@ -32,7 +32,11 @@
 
 	const throwOnError = (promise: RequestResult<PlanResponse, PlanError, false>) =>
 		promise.then((response) => {
-			if (response.error) throw new Error(String(response.error));
+			console.log(response.error);
+			if (response.error)
+				throw new Error(
+					String((response.error as Record<string, unknown>).error ?? response.error)
+				);
 			return response.data!;
 		});
 </script>
diff --git a/ui/src/routes/+page.svelte b/ui/src/routes/+page.svelte
index 8823b1544..aa5c8428c 100644
--- a/ui/src/routes/+page.svelte
+++ b/ui/src/routes/+page.svelte
@@ -224,7 +224,8 @@
 	const onClickTrip = async (tripId: string, replace: boolean = false) => {
 		const { data: itinerary, error } = await trip({ query: { tripId } });
 		if (error) {
-			alert(error);
+			console.log(error);
+			alert(String((error as Record<string, unknown>).error ?? error));
 			return;
 		}
 		pushStateWithQueryString({ tripId }, { selectedItinerary: itinerary, tripId: tripId }, replace);