feat(navigation): add maneuver icons based on type

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 }}>