Adjust button minimum sizing to improve presentation of quick-links, while ensuring adequate touch target. Number of displayed quicklinks reduced from 9 to six, for improved presentation.

src/lib/components/ui/Button.svelte

@@ -39,7 +39,7 @@
 		align-items: center;
 		justify-content: center;
 		min-height: 48px;
-		min-width: 98px;
+		min-width: 48px;
 		appearance: none;
 		background: transparent;
 		border: none;
@@ -55,7 +55,7 @@
 		width: fit-content;
 		flex-shrink: 0;
 		padding: 0 1.2rem;
-		min-width: 90px;
+		min-width: 40px;
 		height: 36px;
 		border-radius: 20px;
 		border: none;

src/lib/components/ui/TrainService.svelte

@@ -3,9 +3,10 @@
 	import { OwlClient, ApiError, ValidationError } from '$lib/owlClient';
 	import { slide } from 'svelte/transition';
 	import { quintOut } from 'svelte/easing';
-	import { formatUkTime } from '$lib/utils/time';
+	import { formatUkTime, calculateDelay } from '$lib/utils/time';
 	import TocStyle from '$lib/components/ui/TocStyle.svelte';
 	import TiplocConverter from '$lib/components/ui/TiplocConverter.svelte';
+	import { IconCircleArrowDownFilled } from '@tabler/icons-svelte';
 	let { service }: { service: ApiTrainsTrainByHeadcode.TrainByHeadcodeResponse } = $props();
 	let isExpanded = $state(false);
 	let loadingDetails = $state(false);
@@ -66,8 +67,9 @@
 			<div class="location-summary" class:can-all={service.ct}>
 				{service.dt}
 			</div>
-			<!-- Add arrow icon to signify drop-down -->
+			<div class="arrow" class:expanded={isExpanded}>
-			<!-- ADD LOADING STATE -->
+				<IconCircleArrowDownFilled color={"var(--color-title)"} size={25} />
+			</div>
 		</div>
 	</button>
 	{#if isExpanded && details}
@@ -115,9 +117,10 @@
 							<th>Location</th>
 							<th>Plat</th>
 							<th>Sch</th>
-							<th>Act</th>
+							<th><span class="tpl-cell">Est</span>/Act</th>
 							<th>Sch</th>
-							<th>Act</th>
+							<th><span class="tpl-cell">Est</span>/Act</th>
+							<th></th>
 						</tr>
 					</thead>
 					<tbody>
@@ -141,6 +144,10 @@
 										>{formatUkTime(loc.atd || loc.etd || '--')}</td
 									>
 								{/if}
+								{#if loc}
+								{@const delay = calculateDelay(loc)}
+								<td class="delay-{delay.type}">{delay.val}</td>
+								{/if}
 							</tr>
 						{/each}
 					</tbody>
@@ -162,8 +169,10 @@
 		filter: brightness(1.1);
 	}
 
-	.summary:hover {
+	@media (hover: hover) {
-		filter: invert();
+		.train-service:hover {
+			filter: brightness(1.2);
+		}
 	}
 
 	.summary {
@@ -248,6 +257,18 @@
 		color: red;
 	}
 
+	.arrow {
+		padding: 0;
+		margin: 0;
+		margin-left: auto;
+		height: 25px;
+		transition: all 0.3s;
+	}
+
+	.expanded {
+		transform: rotateX(180deg);
+	}
+
 	.box-ext {
 		display: flex;
 		flex-direction: column;
@@ -319,11 +340,13 @@
 
 	.tpl-cell {
 		color: yellow;
+		text-align: left;
 	}
 
 	.pass-loc {
 		color: var(--color-title);
 		opacity: 0.75;
+		font-style: oblique;
 	}
 
 	.can-loc {
@@ -331,11 +354,19 @@
 	}
 
 	.est {
-		font-style: oblique;
+		color: yellow;
 		opacity: 0.5;
 	}
 
 	.act {
-		color: yellow;
+		color: white;
+	}
+
+	.delay-late {
+		color: red;
+	}
+
+	.delay-early {
+		color: blue;
 	}
 </style>

src/lib/quick-links.svelte.ts

@@ -4,7 +4,7 @@ export interface QuickLink {
 	lastAccessed: number;
 }
 
-const RETURNED_LENGTH: number = 9;
+const RETURNED_LENGTH: number = 6;
 const MAX_SCORE: number = 50;
 const MAX_ENTRIES: number = RETURNED_LENGTH * 4;
 

src/lib/utils/time.ts

@@ -1,3 +1,4 @@
+import type { ApiTrainsTrainDetails } from '@owlboard/owlboard-ts';
 /**
  * Converts ISO/JSON time to UK-formatted HH:MM string.
  * Ensures Europe/London timezone irrespective of browser timezone.
@@ -15,3 +16,34 @@ export function formatUkTime(dateStr: string | Date | undefined): string {
 		timeZone: 'Europe/London'
 	});
 }
+
+/**
+ * Calculates a 'delay' value, in the formats:
+ * RT, 1E, 7L, etc.
+ * @param 'Schedule Location' object
+ * @returns Delay string for departure boards
+ */
+export function calculateDelay(loc: ApiTrainsTrainDetails.ServiceLocation): {val: string, type: string} {
+const pairs = [
+        { actual: loc.atd, sched: loc.ptd ?? loc.wtd },
+        { actual: loc.ata, sched: loc.pta ?? loc.wta },
+        { actual: loc.atp, sched: loc.wtp }
+    ];
+
+    const match = pairs.find(p => p.actual && p.sched);
+
+    if (!match || !match.actual || !match.sched) return {val: '', type: 'none'};
+
+    const diffMinutes = Math.round(
+        (Date.parse(match.actual) - Date.parse(match.sched)) / 60000
+    );
+
+    if (diffMinutes === 0) return {val: 'RT', type: 'ontime'};
+
+    const absDiff = Math.abs(diffMinutes);
+    if (diffMinutes > 0) {
+        return { val: `${absDiff}L`, type: 'late' };
+    } else {
+        return { val: `${absDiff}E`, type: 'early' };
+    }
+}