Add LocationSearchCard and add to homepage for testing.

Run `npm run format`

.gitea/workflows/build-push.yaml

@@ -3,7 +3,7 @@ run-name: ${{ gitea.actor }} is building and pushing
 
 on:
   create:
-    tags: "*"
+    tags: '*'
 
 env:
   GITEA_DOMAIN: git.fjla.uk

src/lib/components/ui/LocationSearchBox.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
 	import Textbox from '$lib/components/ui/Textbox.svelte';
 	import { onMount } from 'svelte';
+	import { fade } from 'svelte/transition';
+	import { goto } from '$app/navigation';
 
 	interface LocationRecord {
 		n: string; // name
@@ -9,28 +11,25 @@
 		s: string; // search string
 	}
 
-    let value = $state("");
+	let { value = $bindable() } = $props();
+
 	let results = $state<LocationRecord[]>([]);
 	let locations: LocationRecord[] = [];
 
 	let showResults = $state(false);
 	let selectedIndex = $state(-1);
 
-    const MAX_RESULTS = 10;
+	const MAX_RESULTS = 5;
 
 	async function loadLocations() {
-        const res = await fetch("/api/tiplocs");
+		const res = await fetch('/api/tiplocs');
 		locations = await res.json();
 	}
 
 	onMount(loadLocations);
 
 	function tokenize(query: string) {
-        return query
+		return query.toLowerCase().trim().split(/\s+/).filter(Boolean);
-            .toLowerCase()
-            .trim()
-            .split(/\s+/)
-            .filter(Boolean);
 	}
 
 	function search(query: string) {
@@ -40,9 +39,22 @@
 		}
 
 		const tokens = tokenize(query);
+		const lowerQuery = query.toLowerCase().trim();
 
 		results = locations
-            .filter(r => tokens.every(t => r.s.includes(t)))
+			.filter((r) => tokens.every((t) => r.s.includes(t)))
+			.sort((a, b) => {
+				// Check if query matches CRS
+				const aIsCrs = a.c?.toLowerCase() === lowerQuery;
+				const bIsCrs = b.c?.toLowerCase() === lowerQuery;
+
+				// Sort matching CRS first
+				if (aIsCrs && !bIsCrs) return -1;
+				if (!aIsCrs && bIsCrs) return 1;
+
+				// Alphabetical Sort
+				return a.n.localeCompare(b.n);
+			})
 			.slice(0, MAX_RESULTS);
 	}
 
@@ -50,28 +62,43 @@
 		search(value);
 	});
 
+	// Hide results when click outside of container
+	$effect(() => {
+		if (showResults) {
+			const onClick = (e: MouseEvent) => {
+				const target = e.target as HTMLElement;
+				if (!target.closest('.location-search')) {
+					showResults = false;
+				}
+			};
+
+			document.addEventListener('click', onClick);
+			return () => document.removeEventListener('click', onClick);
+		}
+	});
+
 	function choose(loc: LocationRecord) {
-        value = loc.n;
 		showResults = false;
 		selectedIndex = -1;
-
+		value = '';
-        console.log("Selected Location: ", JSON.stringify(loc))
+		console.log('Selected Location: ', JSON.stringify(loc));
+		goto(`/board?stn=${loc.c.toLowerCase()}`);
 	}
 
 	function handleKey(e: KeyboardEvent) {
 		if (!results.length) return;
 
-        if (e.key === "ArrowDown") {
+		if (e.key === 'ArrowDown') {
 			e.preventDefault();
 			selectedIndex = Math.min(selectedIndex + 1, results.length - 1);
 		}
 
-        if (e.key === "ArrowUp") {
+		if (e.key === 'ArrowUp') {
 			e.preventDefault();
 			selectedIndex = Math.max(selectedIndex - 1, 0);
 		}
 
-        if (e.key === "Enter" && selectedIndex >= 0) {
+		if (e.key === 'Enter' && selectedIndex >= 0) {
 			choose(results[selectedIndex]);
 		}
 	}
@@ -81,23 +108,30 @@
 	<Textbox
 		bind:value
 		placeholder="Enter Location"
-        oninput={() => showResults = true}
+		oninput={() => (showResults = true)}
 		onkeydown={handleKey}
 		capital
 	/>
 
 	{#if showResults && results.length}
-        <ul class="suggestions">
+		<ul
-            {#each results as loc, i}
+			id="location-results"
-                <li
+			popover={showResults && results.length ? 'manual' : null}
-                    class:selected={i === selectedIndex}
+			role="listbox"
-                    onclick={() => choose(loc)}
+			class="suggestions"
+			transition:fade={{ duration: 200 }}
 		>
-                    <span class="name">{loc.n}</span>
+			{#each results as loc, i}
-
+				<li class="result-item" class:selected={i === selectedIndex} onclick={() => choose(loc)}>
+					<div class="crs-badge-container">
 						{#if loc.c}
-                        <span class="crs">{loc.c}</span>
+							<span class="crs-badge">{loc.c}</span>
 						{/if}
+					</div>
+					<div class="details">
+						<span class="name">{loc.n || loc.t}</span>
+						<span class="tiploc">{loc.t}</span>
+					</div>
 				</li>
 			{/each}
 		</ul>
@@ -105,8 +139,83 @@
 </div>
 
 <style>
-    .suggestions {
+	.location-search {
+		position: relative;
+		width: 100%;
+	}
+
+	.suggestions[popover] {
+		position: absolute;
+		inset: unset;
+		margin: 0;
+		margin-top: 3px;
+		border: none;
+		border-radius: 5px;
+		padding: 0;
+		width: 100%;
+		max-height: 350px;
+		top: 100%;
 		background-color: var(--color-title);
 		color: var(--color-bg-dark);
+		box-shadow: var(--shadow-std);
+		display: block;
+		z-index: 9999;
+	}
+
+	.suggestions:not([popover]) {
+		display: none;
+	}
+
+	.result-item {
+		font-family: 'URW Gothic', sans-serif;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: 0.5rem 1rem;
+		cursor: pointer;
+		min-height: 48px;
+		transition: all 0.15s;
+		border-bottom: 1px solid rgba(0, 0, 0, 0.4);
+	}
+
+	.result-item.selected,
+	.result-item:hover {
+		background-color: var(--color-accent);
+		color: var(--color-title);
+	}
+
+	.crs-badge {
+		font-family: ui-monospace, monospace;
+		font-size: 1.1rem;
+		font-weight: 700;
+		background: var(--color-accent);
+		color: var(--color-title);
+		padding: 3px 6px;
+		border-radius: 10px;
+		transition: all 0.1s;
+	}
+
+	.crs-badge.empty {
+		filter: opacity(0);
+	}
+
+	.result-item:hover .crs-badge {
+		filter: brightness(1.3);
+	}
+
+	.details {
+		display: flex;
+		flex-direction: column;
+	}
+
+	.name {
+		font-size: 1.1rem;
+		font-weight: 700;
+		text-align: right;
+	}
+
+	.tiploc {
+		text-align: right;
+		font-size: 0.8rem;
 	}
 </style>

src/lib/components/ui/Textbox.svelte

@@ -35,9 +35,9 @@
 		class:all-caps={uppercase}
 		{type}
 		{placeholder}
-        bind:value={value}
+		bind:value
-        onfocus={() => isFocussed = true}
+		onfocus={() => (isFocussed = true)}
-        onblur={() => isFocussed = false}
+		onblur={() => (isFocussed = false)}
 		{...rest}
 	/>
 
@@ -58,17 +58,17 @@
 	label {
 		font-size: 0.9rem;
 		font-weight: 400;
-        color: var(--color-title)
+		color: var(--color-title);
 	}
 
 	input {
-        min-height: 48px;
+		min-height: 40px;
 		padding: 0 16px;
 		background-color: var(--color-title);
 		border: 2px solid transparent;
 		border-radius: 20px;
 		color: var(--color-bg-dark);
-        font-size: 1.5rem;
+		font-size: 1.2rem;
 		transition: all 0.2s ease-in-out;
 		outline: none;
 		text-align: center;

src/lib/components/ui/cards/BaseCard.svelte

@@ -9,11 +9,7 @@
 		helpText?: string;
 	}
 
-    let {
+	let { children, header = '', helpText }: Props = $props();
-        children,
-        header = "",
-        helpText,
-    }: Props = $props();
 
 	let showHelp = $state(false);
 </script>
@@ -28,10 +24,14 @@
 				<button
 					type="button"
 					class="help-toggle"
-                    onclick={() => showHelp = !showHelp}
+					onclick={() => (showHelp = !showHelp)}
 					aria-label="Show Help"
 				>
-                    <IconHelpCircle size={26} stroke={2.25} color={showHelp ? 'var(--color-brand)' : 'var(--color-title)'} />
+					<IconHelpCircle
+						size={26}
+						stroke={2.25}
+						color={showHelp ? 'var(--color-brand)' : 'var(--color-title)'}
+					/>
 				</button>
 			{/if}
 		</header>
@@ -53,16 +53,21 @@
 		background: var(--color-accent);
 		position: relative;
 		border-radius: 20px;
-        overflow: hidden;
+		overflow: visible;
 		width: 95%;
 		max-width: 600px;
 		text-align: center;
 		font-family: 'URW Gothic', sans-serif;
-        color: var(--color-title);
+		color: var(--color-brand);
+		padding: 10px 0;
 	}
 
-    .header-content { flex: 1;
+	.header-content {
-    font-size: 1.5rem; font-weight: 600; }
+		flex: 1;
+		margin: 0;
+		font-size: 1.3rem;
+		font-weight: 600;
+	}
 
 	.help-toggle {
 		position: absolute;
@@ -74,7 +79,9 @@
 		cursor: help;
 		opacity: 0.6;
 		z-index: 2;
-        transition: opacity 0.2s, transform 0.2s;
+		transition:
+			opacity 0.2s,
+			transform 0.2s;
 	}
 
 	.help-toggle:hover {
@@ -88,7 +95,7 @@
 		font-size: 0.95rem;
 		line-height: 1.2;
 		margin: auto;
-        border-bottom: 1px solid rgba(255,255,255,0.05);
+		border-bottom: 1px solid rgba(255, 255, 255, 0.05);
 		color: var(--color-title);
 	}
 </style>

src/lib/components/ui/cards/LocationBoardCard.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+	import BaseCard from '$lib/components/ui/cards/BaseCard.svelte';
+	import LocationSearchBox from '$lib/components/ui/LocationSearchBox.svelte';
+
+	let locationValue = $state('');
+
+	function resetSearchBox() {
+		value = '';
+	}
+</script>
+
+<BaseCard header={'Live Arrivals & Departures'}>
+	<div class="card-content">
+		<LocationSearchBox bind:value={locationValue} />
+	</div>
+</BaseCard>
+
+<style>
+	.card-content {
+		text-align: center;
+		width: 90%;
+		margin: auto;
+		padding: 10px 0 10px 0;
+	}
+</style>

src/routes/+layout.svelte

@@ -34,7 +34,7 @@
 		if (navWidth === 0) return navItems.length;
 		const available = navWidth;
 		const totalItems = navItems.length;
-		const countWithoutMore = Math.floor(available/ ITEM_WIDTH);
+		const countWithoutMore = Math.floor(available / ITEM_WIDTH);
 
 		if (countWithoutMore >= totalItems) return totalItems;
 
@@ -128,10 +128,11 @@
 </nav>
 
 <div class="viewport-guard">
-	<img src={logoPlain} alt="OwlBoard Logo" width=100 height=100>
+	<img src={logoPlain} alt="OwlBoard Logo" width="100" height="100" />
 	<h1 class="viewport-guard-title">Narrow Gauge Detected</h1>
 	<p>
-		Just as trains need the right track width, our data needs a bit more room to stay on the rails. Please expand your view to at least 300px to view the app.
+		Just as trains need the right track width, our data needs a bit more room to stay on the rails.
+		Please expand your view to at least 300px to view the app.
 	</p>
 </div>
 
@@ -193,7 +194,8 @@
 		box-shadow: var(--shadow-up);
 	}
 
-	.nav-item, .more-menu-wrapper {
+	.nav-item,
+	.more-menu-wrapper {
 		display: flex;
 		flex: 1;
 		flex-direction: column;
@@ -318,7 +320,9 @@
 			padding-top: 30px;
 		}
 
-		header, main, nav {
+		header,
+		main,
+		nav {
 			display: none;
 		}
 	}

src/routes/+page.svelte

@@ -1,22 +1,18 @@
 <script lang="ts">
-	import Button from '$lib/components/ui/Button.svelte';
+	import LocationBoardCard from '$lib/components/ui/cards/LocationBoardCard.svelte';
-	import LocationSearchBox from '$lib/components/ui/LocationSearchBox.svelte';
-	import Textbox from '$lib/components/ui/Textbox.svelte';
-	import BaseCard from '$lib/components/ui/cards/BaseCard.svelte';
-
-	function test() {
-		console.log('Button Clicked');
-	}
 </script>
 
-<br /><br /><br />
+<div class="card-container">
-<Button>Default</Button>
+	<LocationBoardCard />
-<Button color={'brand'} onclick={test}>Brand</Button>
+</div>
-<Button color={'accent'}>Accent</Button>
-<Textbox placeholder={"Textbox am I"} uppercase={true} error={""} />
 
-<BaseCard header={"Hello"} helpText={"This is help text"}>Hello</BaseCard>
+<style>
-
+	.card-container {
-<LocationSearchBox />
+		display: flex;
-
+		align-items: center;
-<h2>OwlBoard</h2>
+		flex-direction: column;
+		gap: 20px;
+		justify-content: center;
+		padding: 20px 10px;
+	}
+</style>

src/routes/about/+page.svelte

@@ -29,7 +29,10 @@
 		daily basis.
 	</p>
 	<p class="amble">
-Why OwlBoard? The name was chosen as an evolution of its predecessor, 'Athena'; owls are associated with the Roman Goddess as well as with wisdom. The name also links to Bath, where the app has been built and is run, representing the 'Minerva Owl' sculpture trail in the city, with many of the sculptures still in the area.
+		Why OwlBoard? The name was chosen as an evolution of its predecessor, 'Athena'; owls are
+		associated with the Roman Goddess as well as with wisdom. The name also links to Bath, where the
+		app has been built and is run, representing the 'Minerva Owl' sculpture trail in the city, with
+		many of the sculptures still in the area.
 	</p>
 	<p class="opensource">
 		Some components that combine to form OwlBoard are open-source, see the <a