delete waypoint

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

@@ -1,10 +1,12 @@
 <script lang="ts">
 	import * as Card from '$lib/components/ui/card';
-	import { waypointPopup, currentPopupWaypoint } from './WaypointPopup';
+	import { Button } from '$lib/components/ui/button';
+	import Shortcut from '$lib/components/Shortcut.svelte';
+	import { waypointPopup, currentPopupWaypoint, deleteWaypoint } from './WaypointPopup';
 	import WithUnits from '$lib/components/WithUnits.svelte';
-	import { Dot } from 'lucide-svelte';
+	import { Dot, Trash2 } from 'lucide-svelte';
 	import { onMount } from 'svelte';
-
+	import { Tool, currentTool } from '$lib/stores';
 	import { _ } from 'svelte-i18n';
 
 	let popupElement: HTMLDivElement;
@@ -17,25 +19,39 @@
 
 <div bind:this={popupElement} class="hidden">
 	{#if $currentPopupWaypoint}
-		<Card.Root class="border-none shadow-md text-base max-w-72 p-2">
+		<Card.Root class="border-none shadow-md text-base max-w-80 p-2">
 			<Card.Header class="p-0">
-				<Card.Title class="text-md">{$currentPopupWaypoint.name}</Card.Title>
+				<Card.Title class="text-md">{$currentPopupWaypoint[0].name}</Card.Title>
 			</Card.Header>
 			<Card.Content class="flex flex-col p-0 text-sm">
 				<div class="flex flex-row items-center text-muted-foreground">
-					{$currentPopupWaypoint.getLatitude().toFixed(6)}&deg; {$currentPopupWaypoint
+					{$currentPopupWaypoint[0].getLatitude().toFixed(6)}&deg; {$currentPopupWaypoint[0]
 						.getLongitude()
 						.toFixed(6)}&deg;
-					{#if $currentPopupWaypoint.ele !== undefined}
+					{#if $currentPopupWaypoint[0].ele !== undefined}
 						<Dot size="16" />
-						<WithUnits value={$currentPopupWaypoint.ele} type="elevation" />
+						<WithUnits value={$currentPopupWaypoint[0].ele} type="elevation" />
 					{/if}
 				</div>
-				{#if $currentPopupWaypoint.desc}
-					<span>{$currentPopupWaypoint.desc}</span>
+				{#if $currentPopupWaypoint[0].desc}
+					<span>{$currentPopupWaypoint[0].desc}</span>
 				{/if}
-				{#if $currentPopupWaypoint.cmt}
-					<span>{$currentPopupWaypoint.cmt}</span>
+				{#if $currentPopupWaypoint[0].cmt}
+					<span>{$currentPopupWaypoint[0].cmt}</span>
+				{/if}
+				{#if $currentTool === Tool.WAYPOINT}
+					<div class="mt-2">
+						<Button
+							class="w-full px-2 py-1 h-6 justify-start"
+							variant="ghost"
+							on:click={() =>
+								deleteWaypoint($currentPopupWaypoint[1], $currentPopupWaypoint[0]._data.index)}
+						>
+							<Trash2 size="16" class="mr-1" />
+							{$_('menu.delete')}
+							<Shortcut key="" shift={true} click={true} />
+						</Button>
+					</div>
 				{/if}
 			</Card.Content>
 		</Card.Root>