refactor map popups and add inspect trackpoint feature

website/src/lib/components/gpx-layer/TrackpointPopup.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+	import type { TrackPoint } from 'gpx';
+	import type { PopupItem } from '$lib/components/MapPopup';
+	import * as Card from '$lib/components/ui/card';
+	import WithUnits from '$lib/components/WithUnits.svelte';
+	import { Compass, Mountain, Timer } from 'lucide-svelte';
+	import { df } from '$lib/utils';
+
+	export let trackpoint: PopupItem<TrackPoint>;
+</script>
+
+<Card.Root class="border-none shadow-md text-base p-2">
+	<Card.Header class="p-0">
+		<Card.Title class="text-md"></Card.Title>
+	</Card.Header>
+	<Card.Content class="flex flex-col p-0 text-xs gap-1">
+		<div class="flex flex-row items-center gap-1">
+			<Compass size="14" />
+			{trackpoint.item.getLatitude().toFixed(6)}&deg; {trackpoint.item
+				.getLongitude()
+				.toFixed(6)}&deg;
+		</div>
+		{#if trackpoint.item.ele !== undefined}
+			<div class="flex flex-row items-center gap-1">
+				<Mountain size="14" />
+				<WithUnits value={trackpoint.item.ele} type="elevation" />
+			</div>
+		{/if}
+		{#if trackpoint.item.time}
+			<div class="flex flex-row items-center gap-1">
+				<Timer size="14" />
+				{df.format(trackpoint.item.time)}
+			</div>
+		{/if}
+	</Card.Content>
+</Card.Root>