feat(navigation): add maneuver icons based on type

src/App.svelte

@@ -5,8 +5,8 @@
 	import { onMount } from "svelte";
 	import Map from "$lib/components/lnv/Map.svelte";
 	import { routing } from "$lib/services/navigation/routing.svelte";
-	import LanesDisplay from "$lib/services/navigation/LanesDisplay.svelte";
 	import { checkWebGL } from "$lib/webgl";
+	import RoutingInfo from "$lib/components/lnv/RoutingInfo.svelte";
 
 	onMount(() => {
 		if(!checkWebGL()) {
@@ -19,11 +19,6 @@
 {#if !routing.currentTrip}
 	<Sidebar></Sidebar>
 {:else}
-	<div class="fixed top-4 left-4 z-50 w-3/4 h-10 bg-background text-white">
-		{routing.currentTripInfo.currentManeuver?.instruction}
-		<LanesDisplay
-			lanes={routing.currentTripInfo.currentManeuver?.lanes}
-		/>
-	</div>
+	<RoutingInfo />
 {/if}
 <Map></Map>

src/lib/components/lnv/ManeuverIcon.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+	import { maneuverTypes } from "$lib/services/navigation/Maneuver";
+
+	let { maneuver }: { maneuver: number } = $props();
+
+	let name = $derived(maneuverTypes[maneuver] || "none");
+</script>
+
+<img src="/img/maneuver/{name}.svg" alt={name}>
+
+<style>
+	img {
+		/* the images are black, recolor them white */
+		filter: invert(1);
+		width: 24px;
+		height: 24px;
+	}
+</style>

src/lib/components/lnv/RoutingInfo.svelte

@@ -0,0 +1,15 @@
+<script>
+	import LanesDisplay from "$lib/services/navigation/LanesDisplay.svelte";
+	import { routing } from "$lib/services/navigation/routing.svelte";
+	import ManeuverIcon from "./ManeuverIcon.svelte";
+</script>
+
+<div class="fixed top-4 left-4 z-50 w-3/4 h-10 bg-background text-white">
+	<div class="flex gap-2">
+		<ManeuverIcon maneuver={routing.currentTripInfo.currentManeuver?.type ?? 0} />
+		{routing.currentTripInfo.currentManeuver?.instruction}
+	</div>
+	<LanesDisplay
+		lanes={routing.currentTripInfo.currentManeuver?.lanes}
+	/>
+</div>

src/lib/components/lnv/sidebar/MainSidebar.svelte

@@ -5,7 +5,7 @@
 	import { circInOut } from "svelte/easing";
 	import { map, pin } from "../map.svelte";
 	import VehicleSelector from "../VehicleSelector.svelte";
-    import Post from "../Post.svelte";
+	import Post from "../Post.svelte";
 </script>
 
 <div id="saved" class="mt-2 mb-2" in:fly={{ y: 20, duration: 200, easing: circInOut }}>

src/lib/services/navigation/Maneuver.ts

@@ -6,41 +6,41 @@ export const maneuverTypes = [
 	"destination",
 	"destinationRight",
 	"destinationLeft",
-	"becomes",
+	"becomes", // ???
 	"continue",
 	"slightRight",
 	"right",
 	"sharpRight",
-	"uTurnRight",
-	"uTurnLeft",
+	"uTurnRight", // ???
+	"uTurnLeft", // ???
 	"sharpLeft",
 	"left",
 	"slightLeft",
-	"rampStraight",
-	"rampRight",
-	"rampLeft",
-	"exitRight",
-	"exitLeft",
+	"rampStraight", // ???
+	"rampRight", // ???
+	"rampLeft", // ???
+	"exitRight", // ???
+	"exitLeft", // ???
 	"stayStraight",
 	"stayRight",
 	"stayLeft",
-	"merge",
-	"roundaboutEnter",
-	"roundaboutExit",
-	"ferryEnter",
-	"ferryExit",
-	"transit",
-	"transitTransfer",
-	"transitRemainsOn",
-	"transitConnectionStart",
-	"transitConnectionTransfer",
-	"transitConnectionDestination",
-	"postTransitConnectionDestination",
+	"merge", // ???
+	"roundaboutEnter", // ???
+	"roundaboutExit", // ???
+	"ferryEnter", // ???
+	"ferryExit", // ???
+	"transit", // ???
+	"transitTransfer", // ???
+	"transitRemainsOn", // ???
+	"transitConnectionStart", // ???
+	"transitConnectionTransfer", // ???
+	"transitConnectionDestination", // ???
+	"postTransitConnectionDestination", // ???
 	"mergeRight",
 	"mergeLeft",
-	"elevatorEnter",
-	"stepsEnter",
-	"escalatorEnter",
-	"buildingEnter",
-	"buildingExit",
+	"elevatorEnter", // ???
+	"stepsEnter", // ???
+	"escalatorEnter", // ???
+	"buildingEnter", // ???
+	"buildingExit", // ???
 ];