Add station modal logic and station data for part of route 0210

2026-03-12 00:54:42 +00:00
parent 06861f4037
commit 0fc2c0177b
33 changed files with 2394 additions and 2045 deletions
--- a/src/app.html
+++ b/src/app.html
@@ -7,8 +7,14 @@
 			content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"
 		/>
 		<link rel="manifest" href="/manifest.webmanifest" />
-		<meta name="title" content="OwlBoard Maps | Railway route schematics to assist with learning & refreshing routes" />
-		<meta name="description" content="Schematic route diagrams showing stations, junctions, crossings, bridges and more" />
+		<meta
+			name="title"
+			content="OwlBoard Maps | Railway route schematics to assist with learning & refreshing routes"
+		/>
+		<meta
+			name="description"
+			content="Schematic route diagrams showing stations, junctions, crossings, bridges and more"
+		/>
 		<meta name="theme-color" content="#4fd1d1" />
 		<link rel="canonical" href="https://maps.owlboard.info" />
 		<meta property="og:type" content="website" />
--- a/src/lib/assets/station/nby.json
+++ b/src/lib/assets/station/nby.json
@@ -1 +1 @@
-{"name":"Newbury","crs":"nby","updated":"2026-03-11T00:00:00.000Z","checked":"2026-03-11T00:00:00.000Z","platforms":[{"platformId":"1Dn","platformLength":291,"signal":true,"dispatch":true,"dispatchNote":"Staffed until 22:00 Daily","stepFree":true,"stepFreeNote":"Accessible from street & via lifts","doorPattern":[{"kind":"IET5","doors":"all"},{"kind":"IET9","doors":"all"},{"kind":"IET10","doors":"all"},{"kind":"DMU","max-car":12}]},{"platformId":"1Up","platformLength":291,"signal":true,"dispatch":true,"dispatchNote":"Staffed until 22:00 Daily","stepFree":true,"stepFreeNote":"Accessible from street & via lifts","doorPattern":[{"kind":"IET5","doors":"all"},{"kind":"IET9","doors":"all"},{"kind":"IET10","doors":"all"},{"kind":"DMU","max-car":12}]},{"platformId":"2Dn","platformLength":327,"signal":true,"dispatch":true,"dispatchNote":"Staffed until 22:00 Daily","stepFree":true,"stepFreeNote":"Accessible from street & via lifts","doorPattern":[{"kind":"IET5","doors":"all"},{"kind":"IET9","doors":"all"},{"kind":"IET10","doors":"all"},{"kind":"DMU","max-car":14}]},{"platformId":"2Up","platformLength":327,"signal":true,"dispatch":true,"dispatchNote":"Staffed until 22:00 Daily","stepFree":true,"stepFreeNote":"Accessible from street & via lifts","doorPattern":[{"kind":"IET5","doors":"all"},{"kind":"IET9","doors":"all"},{"kind":"IET10","doors":"all"},{"kind":"DMU","max-car":14}]},{"platformId":3,"platformLength":129,"signal":true,"dispatch":true,"dispatchNote":"Staffed until 22:00 Daily","stepFree":true,"stepFreeNote":"Accessible from street & via lifts","doorPattern":[{"kind":"IET5","doors":"all"},{"kind":"IET9","doors":null},{"kind":"IET10","doors":null},{"kind":"DMU","max-car":5}]}]}
+{"name":"Newbury","crs":"nby","updated":"2026-03-11T00:00:00.000Z","checked":"2026-03-11T00:00:00.000Z","platforms":[{"platformId":"1Dn","platformLength":291,"signal":true,"dispatch":true,"dispatchNote":"Staffed until 22:00 Daily","stepFree":true,"stepFreeNote":"Accessible from street & via lifts","doorPattern":[{"kind":"IET5","doors":[1,10]},{"kind":"IET9","doors":[1,18]},{"kind":"IET10","doors":[1,20]},{"kind":"DMU","max-car":12}]},{"platformId":"1Up","platformLength":291,"signal":true,"dispatch":true,"dispatchNote":"Staffed until 22:00 Daily","stepFree":true,"stepFreeNote":"Accessible from street & via lifts","doorPattern":[{"kind":"IET5","doors":[1,10]},{"kind":"IET9","doors":[1,18]},{"kind":"IET10","doors":[1,20]},{"kind":"DMU","max-car":12}]},{"platformId":"2Dn","platformLength":327,"signal":true,"dispatch":true,"dispatchNote":"Staffed until 22:00 Daily","stepFree":true,"stepFreeNote":"Accessible from street & via lifts","doorPattern":[{"kind":"IET5","doors":[1,10]},{"kind":"IET9","doors":[1,18]},{"kind":"IET10","doors":[1,20]},{"kind":"DMU","max-car":14}]},{"platformId":"2Up","platformLength":327,"signal":true,"dispatch":true,"dispatchNote":"Staffed until 22:00 Daily","stepFree":true,"stepFreeNote":"Accessible from street & via lifts","doorPattern":[{"kind":"IET5","doors":[1,10]},{"kind":"IET9","doors":[1,18]},{"kind":"IET10","doors":[1,20]},{"kind":"DMU","max-car":14}]},{"platformId":3,"platformLength":129,"signal":true,"dispatch":true,"dispatchNote":"Staffed until 22:00 Daily","stepFree":true,"stepFreeNote":"Accessible from street & via lifts","doorPattern":[{"kind":"IET5","doors":[1,10]},{"kind":"IET9","doors":null},{"kind":"IET10","doors":null},{"kind":"DMU","max-car":5}]}]}
--- a/src/lib/components/RouteRow.svelte
+++ b/src/lib/components/RouteRow.svelte
@@ -2,25 +2,55 @@
 	import { components } from '$lib/mapRegistry';
 	import type { ElecType } from '$lib/railStyles';
 	import { IconArrowNarrowRight, IconInfoCircle } from '@tabler/icons-svelte';
+	import StationInfo from '$lib/components/StationInfo.svelte';

-	type featureType = "station" | "junction" | "crossovers" | "siteof" | "bridge" | "minorBridge" | "crossover" | "crossing" | "loop" | "loops" | "signallerChange" | "electrificationChange" | "default" | "tunnel";
-	export let feature: {name: string; type: featureType; goto?: string; entryPoint?: string; miles: number; chains: number; description?: string}; // Raw Object
-	export let activeElec: ElecType; // Active Electrification Type
-	export let reversed: boolean = false;
+	type featureType =
+		| 'station'
+		| 'junction'
+		| 'crossovers'
+		| 'siteof'
+		| 'bridge'
+		| 'minorBridge'
+		| 'crossover'
+		| 'crossing'
+		| 'loop'
+		| 'loops'
+		| 'signallerChange'
+		| 'electrificationChange'
+		| 'default'
+		| 'tunnel';

-	$: Icon = components[feature.type] || components.default;
+	let {
+		feature,
+		activeElec,
+		reversed = false,
+		onShowInfo
+	}: {
+		feature: {
+			name: string;
+			type: featureType;
+			goto?: string;
+			entryPoint?: string;
+			miles: number;
+			chains: number;
+			description?: string;
+			stationInfo?: boolean;
+			crs?: string;
+		};
+		activeElec: ElecType;
+		reversed?: boolean;
+		onShowInfo: (crs: string) => void;
+	} = $props();
+
+	let Icon = $derived(components[feature.type] || components.default);

 	// Linking Logic
-	$: isLinkable = !!(feature.goto && feature.entryPoint);
-	$: href = `/map/${feature.goto}#${feature.entryPoint}`;
-	$: stationInfo = (feature.type === "station" && feature.stationInfo && feature.crs);
+	let isLinkable = $derived(!!(feature?.goto && feature?.entryPoint));
+	let href = $derived(`/map/${feature.goto}#${feature.entryPoint}`);
+	let stationInfo = $derived(feature.type === 'station' && feature.stationInfo && feature.crs);

 	const slugify = (str?: string) =>
 		str?.toLocaleLowerCase().trim().replace(/\s+/g, '-') ?? 'unknown';
-
-	function stationInfo(crs) {
-		console.log(`Date requested for CRS: ${crs}`)
-	}
 </script>

 <div class="row-container" id={slugify(feature.name)}>
@@ -30,39 +60,42 @@
 	</div>

 	<div class="icon-col">
-		<svelte:component this={Icon} feature={feature as any} {activeElec} {reversed} />
+		<svelte:component this={Icon} {feature} {activeElec} {reversed} />
 	</div>

-	<svelte:element this={isLinkable ? 'a' : 'div'} {...(isLinkable ? { href } : {})} class="link-wrapper">
-	<div class="label-col">
-		{#if feature.name}
-			<div class="feature-name">{feature.name}</div>
-		{/if}
-		{#if feature.description}
-			<div class="feature-desc">{feature.description}</div>
-		{/if}
-	</div>
+	<svelte:element
+		this={isLinkable ? 'a' : 'div'}
+		{...isLinkable ? { href } : {}}
+		class="link-wrapper"
+	>
+		<div class="label-col">
+			{#if feature.name}
+				<div class="feature-name">{feature.name}</div>
+			{/if}
+			{#if feature.description}
+				<div class="feature-desc">{feature.description}</div>
+			{/if}
+		</div>

-				{#if isLinkable}
+		{#if isLinkable}
 			<div class="link-indicator">
 				<IconArrowNarrowRight />
 			</div>
 		{/if}
+
+		{#if stationInfo}
+			<div class="info-indicator" onclick={() => onShowInfo(feature.crs)}>
+				<IconInfoCircle />
+			</div>
+		{/if}
 	</svelte:element>
-
-		<!-- {#if stationInfo}
-	<div class="link-indicator" on:click={stationInfo(feature.crs)}>
-		<IconInfoCircle />
-	</div>
-	{/if} -->
-
 </div>

 <style>
-a {
-	cursor: pointer;
-	text-decoration: none;
-}
+	a {
+		cursor: pointer;
+		text-decoration: none;
+	}
 	.row-container {
 		display: grid;
 		grid-template-columns: 3.5rem 64px 1fr;
@@ -73,6 +106,7 @@ a {
 		margin: 0;
 		padding: 0;
 		overflow: hidden;
+		scroll-padding: 80px;
 	}

 	.mileage-col {
@@ -94,7 +128,6 @@ a {
 		font-size: 0.7rem;
 	}

-
 	.icon-col {
 		width: 64px;
 		height: 64px;
@@ -104,7 +137,6 @@ a {
 		overflow: visible;
 	}

-
 	.link-wrapper {
 		display: flex;
 		flex-direction: row;
@@ -136,6 +168,24 @@ a {
 		transform: rotate(-45deg);
 	}

+	.info-indicator {
+		position: relative;
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		cursor: pointer;
+	}
+
+	.info-indicator::before {
+		content: '';
+		position: absolute;
+		width: 44px;
+		height: 44px;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -50%);
+	}
+
 	.label-col {
 		padding-left: 16px;
 		display: flex;
--- a/src/lib/components/StationInfo.svelte
+++ b/src/lib/components/StationInfo.svelte
@@ -1,16 +1,399 @@
 <script lang="ts">
-
-/*
+	/*
    Loads and displayes a 'Station Info' Modal
 */

-let crs = $props();
+	import { fade, fly } from 'svelte/transition';
+	import { quintOut } from 'svelte/easing';

-const allStations = import.meta.glob('$lib/assets/station/*.json', { query: '?json' });
+	import { IconDisabled, IconUserCheck, IconTrafficLights } from '@tabler/icons-svelte';

-const stationData = $derived(allStations[`../data/stations/${crs}.json`]);
+	let { crs, onclose }: { crs: string; onclose: () => void } = $props();
+
+	let dialogRef = $state<HTMLDialogElement>();
+
+	$effect(() => {
+		if (dialogRef) {
+			dialogRef.showModal();
+			console.log('Modal Diaplayes');
+		}
+	});
+
+	const allStations = import.meta.glob('$lib/assets/station/*.json', { query: '?json' });
+
+	let stationData = $state<any>(null);
+	let error = $state<string | null>(null);
+
+	$effect(() => {
+		stationData = null;
+		error = null;
+
+		const path = `/src/lib/assets/station/${crs.toLowerCase()}.json`;
+
+		if (path in allStations) {
+			allStations[path]()
+				.then((mod: any) => {
+					stationData = mod.default;
+					console.log('Modal is present in page...');
+				})
+				.catch((err) => {
+					error = `Could not parse data for ${crs}`;
+					console.error(err);
+				});
+		} else {
+			error = `Station ${crs} not found in database`;
+		}
+	});
+
+	function parsePlatform(id: string) {
+		id = String(id || '');
+		const match = id.match(/^(.*?)(Up|Dn)$/);
+		if (match) {
+			return { plat: match[1], direction: match[2] };
+		}
+		return { plat: id, direction: null };
+	}
+
+	const getTrainLayout = (pattern: any) => {
+		let coachCount = 0;
+		if (pattern.kind === 'IET5') coachCount = 5;
+		else if (pattern.kind === 'IET9') coachCount = 9;
+		else if (pattern.kind === 'IET10') coachCount = 10;
+		else if (pattern.kind === 'DMU') coachCount = pattern['max-car'] || 0;
+
+		const [startDoor, endDoor] = pattern.doors || [1, coachCount * 2];
+
+		return Array.from({ length: coachCount }, (_, i) => {
+			const coachNum = i + 1;
+			const doorA = i * 2 + 1;
+			const doorB = i * 2 + 2;
+
+			return {
+				label: coachNum,
+				doorAOpen: doorA >= startDoor && doorA <= endDoor,
+				doorBOpen: doorB >= startDoor && doorB <= endDoor
+			};
+		});
+	};
 </script>

-{#if stationData}
-<!-- RENDER STATION DATA DISPLAY HERE -->
-{/if}
+<dialog bind:this={dialogRef} {onclose} onclick={(e) => e.target === dialogRef && onclose()}>
+	{#if stationData || error}
+		<div class="modal-wrapper" in:fly={{ y: 20, duration: 400, easing: quintOut }}>
+			<header>
+				<div class="title-group">
+					<span class="crs-badge">{crs.toUpperCase()}</span>
+					<h2>{stationData?.name || 'Loading...'}</h2>
+				</div>
+				<button class="close-icon" onclick={onclose} aria-label="Close">&times;</button>
+			</header>
+		</div>
+		<div class="content">
+			{#if error}
+				<div class="error-box">{error}</div>
+			{:else if stationData}
+				<div class="platform-data">
+					{#each stationData['platforms'] ?? [] as platform}
+						{@const { plat, direction } = parsePlatform(platform.platformId)}
+						<div class="platform-card">
+							<div class="platform-main">
+								<span class="platform-label">Platform</span>
+								<span class="platform-number">{plat}</span>
+								{#if direction}
+									<span class="platform-direction">({direction})</span>
+								{/if}
+							</div>
+<span class="length-tag">{platform.platformLength}m</span>
+							<div class="platform-meta">
+								
+								{#if platform.stepFree}
+									<span class="icon-tag" title="Step-free access"
+										><IconDisabled color="#2563eb" /></span
+									>
+								{/if}
+								{#if platform.dispatch}
+									<span class="icon-tag" title="Dispatch staff present"
+										><IconUserCheck color="#ea580c" /></span
+									>
+								{/if}
+								{#if platform.signal}
+									<span class="icon-tag" title="Starting Signal"
+										><IconTrafficLights color="#dc2626" /></span
+									>
+								{/if}
+							</div>
+                                {#if platform.dispatchNote}
+                                    <span class="platform-note">{platform.dispatchNote}</span>
+                                {/if}
+                                {#if platform.stepFreeNote}
+                                    <span class="platform-note">{platform.stepFreeNote}</span>
+                                {/if}
+
+							<div class="train-visualiser">
+								{#each platform.doorPattern as pattern}
+									<div class="train-row">
+										<span class="door-pattern-kind">{pattern.kind}</span>
+										<div class="coach-row">
+											{#each getTrainLayout(pattern) as coach}
+												<div class="coach-unit">
+													<div class="coach-body">{coach.label}</div>
+													<div class="door-status">
+														<span class="dot" class:open={coach.doorAOpen}></span>
+														<span class="dot" class:open={coach.doorBOpen}></span>
+													</div>
+												</div>
+											{/each}
+										</div>
+									</div>
+								{/each}
+							</div>
+						</div>
+					{/each}
+				</div>
+			{/if}
+		</div>
+	{/if}
+</dialog>
+
+<style>
+	dialog {
+		border: none;
+		border-radius: 16px;
+		padding: 0;
+		max-width: 500px;
+		width: 90%;
+		box-shadow:
+			0 20px 25px -5px rgba(0, 0, 0, 0.1),
+			0 10px 10px -5px rgba(0, 0, 0, 0.04);
+		overflow: hidden;
+		background: white;
+		max-height: 80vh;
+		display: flex;
+		flex-direction: column;
+	}
+
+	dialog::backdrop {
+		background: rgba(15, 23, 42, 0.5);
+		backdrop-filter: blur(4px);
+	}
+
+	.modal-wrapper {
+		display: flex;
+		flex: 1;
+		flex-direction: column;
+		min-height: 0;
+	}
+
+	header {
+		background: #f8fafc;
+		padding: 1rem 1.5rem;
+        margin-bottom: 50px;
+		border-bottom: 1px solid #e2e8f0;
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+        z-index: 500;
+	}
+
+	.title-group {
+		display: flex;
+		align-items: center;
+		gap: 0.75rem;
+	}
+
+	.crs-badge {
+		background: #1e293b;
+		color: white;
+		font-family: monospace;
+		font-weight: bold;
+		padding: 0.2rem 0.5rem;
+		border-radius: 4px;
+		font-size: 0.85rem;
+	}
+
+	h2 {
+		margin: 0;
+		font-size: 1.1rem;
+		color: #0f172a;
+	}
+
+	.close-icon {
+		background: #ef4444;
+		border-radius: 50%;
+		width: 32px;
+		height: 32px;
+		padding: 0;
+		border: none;
+		font-size: 1.5rem;
+		cursor: pointer;
+		color: #ebebeb;
+		transition: all 0.2s;
+	}
+
+	.close-icon:hover {
+		background: #dc2626;
+		transform: scale(1.05);
+		transform: rotate(180deg);
+	}
+	.content {
+		padding: 1.5rem;
+		overflow-y: auto;
+		overflow-x: hidden;
+		box-sizing: border-box;
+		width: 100%;
+		word-wrap: break-word;
+		flex: 1;
+		-webkit-overflow-scrolling: touch;
+	}
+
+	.content::-webkit-scrollbar {
+		width: 6px;
+	}
+
+	.content::-webkit-scrollbar-thumb {
+		background: #cbd5e1;
+		border-radius: 10px;
+	}
+
+    .platform-card:first-child {
+        margin-top: 20px;
+    }
+
+	.platform-card {
+		display: flex;
+        flex-direction: column;
+		justify-content: space-between;
+		align-items: center;
+		background: #ffffff;
+		border: 1px solid #e2e8f0;
+		border-radius: 8px;
+		padding: 0.75rem 1.25rem;
+		margin-bottom: 0.75rem;
+		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+		transition: transform 0.15s ease-in-out;
+	}
+
+	.platform-main {
+		display: flex;
+		align-items: baseline;
+		gap: 0.5rem;
+	}
+
+	.platform-label {
+		font-size: 0.7rem;
+		text-transform: uppercase;
+		font-weight: 700;
+	}
+
+	.platform-number {
+		font-size: 1.5rem;
+		font-weight: 700;
+		color: #0f172a;
+		line-height: 1;
+		font-family: sans-serif;
+	}
+
+	.platform-direction {
+		font-size: 1rem;
+		color: #475569;
+		font-weight: 500;
+	}
+
+	.platform-meta {
+		display: flex;
+		align-items: center;
+		gap: 1rem;
+	}
+
+	.length-tag {
+		font-family: 'JetBrains Mono', 'Fira Code', monospace;
+		font-size: 0.85rem;
+		background: #f1f5f9;
+		padding: 0.25rem 0.6rem;
+		border-radius: 4px;
+		border: 1px solid #e2e8f0;
+	}
+
+	.icon-tag {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+    .train-visualiser {
+        margin-top: 1.25rem;
+        width: 100%;
+        padding: 1rem;
+        background: #f8fafc;
+        border-radius: 6px;
+        border: 1px solid #e2e8f0;
+        display: flex;
+        flex-direction: column;
+        gap: 1rem;
+    }
+
+    .train-row {
+        display: flex;
+        flex-direction: column;
+        gap: 0.5rem;
+    }
+
+    .door-pattern-kind {
+        font-size: 0.7rem;
+        font-weight: 800;
+        color: #101316;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+    }
+
+    .coach-row {
+        display: flex;
+        gap: 4px;
+        overflow-x: auto;
+        padding-bottom: 4px;
+    }
+
+    .coach-unit {
+        flex: 0 0 32px;
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+    }
+
+    .coach-body {
+        height: 20px;
+        background: #334155;
+        color: #f8fafc;
+        font-size: 0.65rem;
+        font-weight: 700;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: 2px;
+    }
+
+    .coach-unit:first-child .coach-body {
+        border-top-left-radius: 8px;
+        border-bottom-left-radius: 8px;
+        background: #0f172a;
+    }
+
+    .door-status {
+        display: flex;
+        justify-content: space-around;
+        padding: 0 4px;
+    }
+
+    .dot {
+        width: 6px;
+        height: 6px;
+        background: #b65151;
+        border-radius: 50%;
+        transition: all 0.2s ease;
+    }
+
+    .dot.open {
+        background: #22c55e;
+        box-shadow: 0 0 8px #22c55e;
+    }
+</style>
--- a/src/lib/components/mapIcons/RouteEndLink.svelte
+++ b/src/lib/components/mapIcons/RouteEndLink.svelte
@@ -61,14 +61,14 @@
 		font-weight: 700;
 		text-transform: uppercase;
 		letter-spacing: 0.05em;
-		font-family: "urwgothic";
+		font-family: 'urwgothic';
 		color: #64748b;
 	}

 	.route-id-chip {
 		font-size: 0.6rem;
 		font-weight: 800;
-	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+		font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
 		background: #f1f5f9;
 		color: #475569;
 		padding: 2px 6px;
@@ -77,7 +77,7 @@
 	}

 	.main-text {
-		font-family: "urwgothic";
+		font-family: 'urwgothic';
 		font-size: 1rem;
 		font-weight: 800;
 		color: #0f172a;
@@ -90,7 +90,7 @@
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		
+
 		color: #e1ebeb;
 		background-color: #3c6f79;
 		padding: 4px 4px;
--- a/src/lib/components/mapIcons/Tunnel.svelte
+++ b/src/lib/components/mapIcons/Tunnel.svelte
@@ -13,7 +13,8 @@
 	const portalColour = '#475569'; // Slate grey

 	$: effectiveType = (() => {
-		if (!reversed || feature.tunnelType === 'whole' || feature.tunnelType === 'mid') return feature.tunnelType;
+		if (!reversed || feature.tunnelType === 'whole' || feature.tunnelType === 'mid')
+			return feature.tunnelType;
 		return feature.tunnelType === 'start' ? 'end' : 'start';
 	})();
 </script>
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -57,7 +57,12 @@
 	<div class="list-container">
 		<a href="https://owlboard.info" class="button-link">Go to OwlBoard Live Departures & PIS</a>

-		<input type="text" bind:value={searchTerm} placeholder="Search Station/Jn" class="search-input" />
+		<input
+			type="text"
+			bind:value={searchTerm}
+			placeholder="Search Station/Jn"
+			class="search-input"
+		/>
 		{#each filteredMaps as map (map.routeId)}
 			<a
 				href={resolve(`/map/${map.routeId.toString().padStart(4, '0')}`)}
--- a/src/routes/map/[slug]/+page.svelte
+++ b/src/routes/map/[slug]/+page.svelte
@@ -1,18 +1,30 @@
 <script lang="ts">
 	import RouteRow from '$lib/components/RouteRow.svelte';
 	import RouteEndLink from '$lib/components/mapIcons/RouteEndLink.svelte';
+	import StationInfo from '$lib/components/StationInfo.svelte';
 	import { slide } from 'svelte/transition';
 	import { resolve } from '$app/paths';

 	import logo from '$lib/assets/round-logo.svg';
-    import { IconArrowsExchange, IconSettings } from '@tabler/icons-svelte';
+	import { IconArrowsExchange, IconSettings } from '@tabler/icons-svelte';

 	// data.route contains: routeStart, routeEnd, routeId, elecStart, elecEnd, routeDetail[]
-	export let data;
+	let { data } = $props();

-	let reversed = false; // Reverses Array, and passes value down to children
+	let activeCrs = $state<string | null>(null);
+	let isModalOpen = $derived(activeCrs !== null);

-	let visibleTypes = {
+	function openStationModal(crs: string) {
+		activeCrs = crs;
+	}
+
+	function closeStationModal() {
+		activeCrs = null;
+	}
+
+	let reversed = $state(false); // Reverses Array, and passes value down to children
+
+	let visibleTypes = $state({
 		station: true,
 		minorBridge: false,
 		bridge: true,
@@ -23,10 +35,10 @@
 		siteof: true,
 		junction: true,
 		tunnel: true,
-		crossing: true,
-	};
+		crossing: true
+	});

-	let showFilters = false;
+	let showFilters = $state(false);

 	// Toggle feature types
 	const toggleFilter = (type: string) => {
@@ -38,31 +50,29 @@
 	const formatLabel = (str: string) =>
 		str.replace(/([A-Z])/g, ' $1').replace(/^./, (s) => s.toUpperCase());

-	$: processedFeatures = (() => {
+	const processedFeatures = $derived.by(() => {
 		const list = reversed ? [...data.route.routeDetail].reverse() : [...data.route.routeDetail];

-		// Seed currentElec from the YAML header boundary
 		let currentElec = reversed ? data.route.elecEnd.elec : data.route.elecStart.elec;

 		return list.map((f) => {
 			if (f.type === 'electrificationChange') {
-				// Transition state: this tile and everything after it
-				// adopts the new electrification.
 				currentElec = reversed ? f.from.elec : f.to.elec;
 			}
-
 			return {
 				...f,
 				activeElec: currentElec
 			};
 		});
-	})();
-
-	$: filteredFeatures = processedFeatures.filter((f) => {
-		return visibleTypes[f.type] ?? true;
 	});
+
+	const filteredFeatures = $derived(processedFeatures.filter((f) => visibleTypes[f.type] ?? true));
 </script>

+{#if isModalOpen && activeCrs}
+	<StationInfo crs={activeCrs} onclose={closeStationModal} />
+{/if}
+
 <div class="map-layout">
 	<header class="top-nav">
 		<div class="nav-cluster">
@@ -76,8 +86,8 @@
 						{reversed ? data.route.routeEnd : data.route.routeStart}
 					</h1>
 					<span class="secondary-station">
-						<span class="route-stack-to">
-							to</span> {reversed ? data.route.routeStart : data.route.routeEnd}
+						<span class="route-stack-to"> to</span>
+						{reversed ? data.route.routeStart : data.route.routeEnd}
 					</span>
 				{/if}
 			</div>
@@ -87,7 +97,9 @@
 			<button class="icon-btn" onclick={() => (reversed = !reversed)}>
 				<IconArrowsExchange />
 			</button>
-			<button class="icon-btn" onclick={() => (showFilters = !showFilters)}> <IconSettings /> </button>
+			<button class="icon-btn" onclick={() => (showFilters = !showFilters)}>
+				<IconSettings />
+			</button>
 		</div>
 	</header>

@@ -139,7 +151,12 @@
 				{#if f.type === 'continues'}
 					<RouteEndLink feature={f} />
 				{:else}
-					<RouteRow feature={f} activeElec={f.activeElec} {reversed} />
+					<RouteRow
+						feature={f}
+						activeElec={f.activeElec}
+						{reversed}
+						onShowInfo={openStationModal}
+					/>
 				{/if}
 			{/each}
 		</div>
@@ -212,7 +229,7 @@

 	.route-stack {
 		display: flex;
-		font-family: "urwgothic";
+		font-family: 'urwgothic';
 		flex-direction: column;
 		min-width: 0;
 		margin-left: 0;
@@ -250,7 +267,7 @@
 	}

 	@media (min-width: 536px) {
-.primary-station {
+		.primary-station {
 			font-size: 1.5rem;
 		}
 		.secondary-station {
--- a/src/routes/map/[slug]/+page.ts
+++ b/src/routes/map/[slug]/+page.ts
@@ -20,9 +20,8 @@ export const load: PageLoad = async ({ params }) => {

 		return {
 			route: rawData,
-			slug: slug,
+			slug: slug
 		};
-
 	} catch (err) {
 		console.error(`Error loading map ${slug}: `, err);
 		throw error(500, {