feat: add speed limit display

src/lib/components/lnv/Sidebar.svelte

@@ -14,6 +14,7 @@
 	import RequiresCapability from "./RequiresCapability.svelte";
 	import {
 		advertiseRemoteLocation,
+		getRoadMetadata,
 		location,
 		remoteLocation,
 	} from "./location.svelte";
@@ -27,6 +28,7 @@
 	import Progressbar from "../Progressbar.svelte";
 	import { postHazard } from "$lib/services/lnv";
 	import { fetchHazards } from "./hazards.svelte";
+	import { getSpeed } from "$lib/services/TileMeta";
 
 	const views: Record<string, string> = {
 		main: "MainSidebar",
@@ -180,6 +182,17 @@
 		{(location.speed * 3.6 | 0).toFixed(0)}
 	</div>
 {/if}
+{#if getRoadMetadata()}
+	{@const meta = getRoadMetadata()!}
+	{#if meta.maxspeed}
+		{@const maxspeed = getSpeed(meta.maxspeed)}
+		{#if maxspeed && maxspeed < 100}
+			<div id="max-speed" style="position: fixed; {mobileView ? `bottom: calc(50px + ${sidebarHeight.current}px + 10px + 2ch + 20px + 10px); right: 10px;` : "bottom: calc(10px + 2ch + 20px + 10px); right: 10px;"}">
+				{meta.maxspeed}
+			</div>
+		{/if}
+	{/if}
+{/if}
 
 <div
 	id="sidebar"
@@ -406,7 +419,8 @@
 		padding-bottom: calc(40px + env(safe-area-inset-bottom));
 	}
 
-	#speedometer {
+	#speedometer,
+	#max-speed {
 		z-index: 30;
 		background-color: hsla(0, 0%, 5%, 0.6);
 		backdrop-filter: blur(5px);
@@ -417,5 +431,12 @@
 		border-radius: 10px;
 		text-align: center;
 		width: calc(2ch + 20px);
+		height: calc(2ch + 20px);
+	}
+
+	#max-speed {
+		border-radius: 50%;
+		border: 5px solid red;
+		padding: 5px;
 	}
 </style>