route-maps/src/routes/map/[slug]/+page.svelte

<script lang="ts">
	import RouteRow from '$lib/components/RouteRow.svelte';
	import RouteEndLink from '$lib/components/mapIcons/RouteEndLink.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';

	// data.route contains: routeStart, routeEnd, routeId, elecStart, elecEnd, routeDetail[]
	export let data;

	let reversed = false; // Reverses Array, and passes value down to children

	let visibleTypes = {
		station: true,
		minorBridge: false,
		bridge: true,
		crossovers: true,
		loop: true,
		signallerChange: true,
		electrificationChange: true,
		siteof: true,
		junction: true,
		tunnel: true,
		crossing: true,
	};

	let showFilters = false;

	// Toggle feature types
	const toggleFilter = (type: string) => {
		visibleTypes[type] = !visibleTypes[type];
		visibleTypes = visibleTypes;
	};

	// Helper to prettify 'types'
	const formatLabel = (str: string) =>
		str.replace(/([A-Z])/g, ' $1').replace(/^./, (s) => s.toUpperCase());

	$: processedFeatures = (() => {
		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;
	});
</script>

<div class="map-layout">
	<header class="top-nav">
		<div class="nav-cluster">
			<a href={resolve('/')} aria-label="Home" class="home-link" title="Back to Index">
				<img src={logo} alt="OwlBoard Logo" class="nav-logo" />
			</a>

			<div class="route-stack">
				{#if data?.route}
					<h1 class="primary-station">
						{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>
				{/if}
			</div>
		</div>

		<div class="quick-actions">
			<button class="icon-btn" onclick={() => (reversed = !reversed)}>
				<IconArrowsExchange />
			</button>
			<button class="icon-btn" onclick={() => (showFilters = !showFilters)}> <IconSettings /> </button>
		</div>
	</header>

	{#if showFilters}
		<div
			class="backdrop"
			role="button"
			tabindex="0"
			onclick={() => (showFilters = false)}
			onkeydown={(e) => (e.key === 'Enter' || e.key === ' ') && (showFilters = false)}
		></div>

		<div class="filter-drawer" transition:slide>
			<div class="drawer-header">
				<h3>Visibility Filters</h3>
				<button class="close-icon" onclick={() => (showFilters = false)} aria-label="Close">
					<svg
						viewBox="0 0 24 24"
						width="20"
						height="20"
						fill="none"
						stroke="currentColor"
						stroke-width="2.5"
					>
						<path d="M18 6L6 18M6 6l12 12" stroke-linecap="round" stroke-linejoin="round" />
					</svg>
				</button>
			</div>

			<div class="drawer-content">
				<div class="filter-flex">
					{#each Object.keys(visibleTypes) as type (type)}
						<button
							class="filter-chip"
							class:active={visibleTypes[type]}
							onclick={() => toggleFilter(type)}
						>
							{formatLabel(type)}
						</button>
					{/each}
				</div>
			</div>
		</div>
	{/if}

	<main class="map-spine">
		<div class="container">
			{#each filteredFeatures as f, i (`${f.type}-${f.miles}-${f.chains}-${i}`)}
				{#if f.type === 'continues'}
					<RouteEndLink feature={f} />
				{:else}
					<RouteRow feature={f} activeElec={f.activeElec} {reversed} />
				{/if}
			{/each}
		</div>
	</main>
</div>

<style>
	.map-layout {
		display: flex;
		flex-direction: column;
		background: #ffffff;
		min-height: 100vh;
		margin-top: 0;
		padding-top: 0;
	}

	.top-nav {
		position: fixed;
		width: 100%;
		box-sizing: border-box;
		top: 0;
		height: 80px;
		left: 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 0;
		background: #3c6f79;
		color: #e1ebeb;
		gap: 1rem;
		z-index: 10000;
	}

	.nav-cluster {
		display: flex;
		align-items: center;
		gap: 1rem;
		min-width: 0; /* Prevents flex children from overflowing */
	}

	.home-link {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 52px;
		height: 52px;
		padding-left: 0;
		margin-left: 15px;
		margin-right: 0;
		padding-right: 0;
		flex-shrink: 0;
		transition: all 0.3s ease;
	}

	@media (max-width: 350px) {
		.home-link {
			width: 42px;
			height: 42px;
		}
	}

	.home-link:hover {
		transform: translateY(-1px) scale(1.05);
		filter: brightness(1.1);
	}

	.home-link:active {
		transform: scale(0.95);
	}

	.route-stack {
		display: flex;
		font-family: "urwgothic";
		flex-direction: column;
		min-width: 0;
		margin-left: 0;
	}

	.route-stack-to {
		text-transform: lowercase;
	}

	.primary-station {
		font-size: 1rem;
		font-weight: 800;
		margin: 0;
		white-space: nowrap;
		color: #cce9e9;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.secondary-station {
		font-size: 0.7rem;
		color: #cce9e9;
		text-transform: capitalize;
		font-weight: 600;
	}

	.quick-actions {
		display: flex;
		gap: 0.5rem;
		margin-right: 15px;
	}

	.map-spine {
		padding-top: 72px;
	}

	@media (min-width: 536px) {
.primary-station {
			font-size: 1.5rem;
		}
		.secondary-station {
			font-size: 1rem;
		}
	}

	@media (min-width: 768px) {
		h1 {
			font-size: 1.5rem;
			letter-spacing: -0.03em;
		}
	}

	.container {
		width: 100%;
		max-width: 500px;
		margin: 0 auto;
		padding-top: 1rem;
	}

	.backdrop {
		position: fixed;
		inset: 0;
		background: rgba(0, 0, 0, 0.4);
		z-index: 150;
		transition: all 0.3s ease;
	}

	.filter-drawer {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background: #3c6f79;
		z-index: 200;
		border-radius: 20px 20px 0 0;
		box-shadow: 0 -8px 20px rgba(0, 0, 0, 0.15);
		/* Ensure it handles iOS home bar spacing */
		padding-bottom: env(safe-area-inset-bottom, 1rem);
	}

	.drawer-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 1.25rem 1.5rem 0.75rem;
		border-bottom: 1px solid #e1ebeb;
	}

	.drawer-header h3 {
		margin: 0;
		font-size: 1rem;
		color: #e1ebeb;
	}

	.close-icon {
		background: #404c55;
		border: none;
		border-radius: 50%;
		width: 32px;
		height: 32px;
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		color: #e1ebeb;
		transition: all 0.3s ease;
	}

	.close-icon:hover {
		background: #2d2d2d;
	}

	.drawer-content {
		padding: 1.25rem 1.5rem;
	}

	.filter-flex {
		display: flex;
		flex-wrap: wrap;
		gap: 0.75rem;
	}

	.filter-chip {
		padding: 0.5rem 1rem;
		border-radius: 999px;
		border: 1px solid #e2e8f0;
		background: #ff6060;
		font-size: 0.875rem;
		cursor: pointer;
		transition: all 0.2s;
	}

	.filter-chip.active {
		background: #00725b;
		color: white;
		border-color: #1e293b;
	}

	.quick-actions {
		display: flex;
		gap: 0.5rem;
		flex-shrink: 0;
	}

	.icon-btn {
		display: inline-flex;
		align-items: center;
		gap: 0.4rem;
		border: none;
		padding: 0.5rem 0.8rem;
		border-radius: 12px;
		background: #404c55;
		color: #e1ebeb;
		font-size: 0.75rem;
		font-weight: 700;
		cursor: pointer;
		transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
		text-transform: uppercase;
		letter-spacing: 0.02em;
		transition: all 0.3s ease;
	}

	@media (max-width: 390px) {
		.icon-btn {
			padding: 0.3rem 0.3rem;
		}
	}

	.icon-btn:hover {
		background: #2d2d2d;
	}

	.icon-btn:active {
		transform: scale(0.96);
	}
</style>