copy coordinates button for POIs, closes #195

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

@@ -0,0 +1,23 @@
+<script lang="ts">
+    import { Button } from '$lib/components/ui/button';
+    import { ClipboardCopy } from 'lucide-svelte';
+    import { _ } from 'svelte-i18n';
+    import type { Coordinates } from 'gpx';
+
+    export let coordinates: Coordinates;
+    export let onCopy: () => void = () => {};
+</script>
+
+<Button
+    class="w-full px-2 py-1 h-8 justify-start {$$props.class}"
+    variant="outline"
+    on:click={() => {
+        navigator.clipboard.writeText(
+            `${coordinates.lat.toFixed(6)}, ${coordinates.lon.toFixed(6)}`
+        );
+        onCopy();
+    }}
+>
+    <ClipboardCopy size="16" class="mr-1" />
+    {$_('menu.copy_coordinates')}
+</Button>

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

@@ -1,10 +1,10 @@
 <script lang="ts">
     import type { TrackPoint } from 'gpx';
     import type { PopupItem } from '$lib/components/MapPopup';
+    import CopyCoordinates from '$lib/components/gpx-layer/CopyCoordinates.svelte';
     import * as Card from '$lib/components/ui/card';
-    import { Button } from '$lib/components/ui/button';
     import WithUnits from '$lib/components/WithUnits.svelte';
-    import { Compass, Mountain, Timer, ClipboardCopy } from 'lucide-svelte';
+    import { Compass, Mountain, Timer } from 'lucide-svelte';
     import { df } from '$lib/utils';
     import { _ } from 'svelte-i18n';
 
@@ -34,18 +34,10 @@
                 {df.format(trackpoint.item.time)}
             </div>
         {/if}
-        <Button
-            class="w-full px-2 py-1 h-6 justify-start mt-0.5"
-            variant="secondary"
-            on:click={() => {
-                navigator.clipboard.writeText(
-                    `${trackpoint.item.getLatitude().toFixed(6)}, ${trackpoint.item.getLongitude().toFixed(6)}`
-                );
-                trackpoint.hide?.();
-            }}
-        >
-            <ClipboardCopy size="16" class="mr-1" />
-            {$_('menu.copy_coordinates')}
-        </Button>
+        <CopyCoordinates
+            coordinates={trackpoint.item.attributes}
+            onCopy={() => trackpoint.hide?.()}
+            class="mt-0.5"
+        />
     </Card.Content>
 </Card.Root>

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

@@ -2,6 +2,7 @@
     import * as Card from '$lib/components/ui/card';
     import { Button } from '$lib/components/ui/button';
     import Shortcut from '$lib/components/Shortcut.svelte';
+    import CopyCoordinates from '$lib/components/gpx-layer/CopyCoordinates.svelte';
     import { deleteWaypoint } from './GPXLayerPopup';
     import WithUnits from '$lib/components/WithUnits.svelte';
     import { Dot, ExternalLink, Trash2 } from 'lucide-svelte';
@@ -77,9 +78,11 @@
                 <span class="whitespace-pre-wrap">{@html sanitize(waypoint.item.cmt)}</span>
             {/if}
         </ScrollArea>
+        <div class="mt-2 flex flex-col gap-1">
+            <CopyCoordinates coordinates={waypoint.item.attributes} />
             {#if $currentTool === Tool.WAYPOINT}
                 <Button
-                class="mt-2 w-full px-2 py-1 h-8 justify-start"
+                    class="w-full px-2 py-1 h-8 justify-start"
                     variant="outline"
                     on:click={() => deleteWaypoint(waypoint.fileId, waypoint.item._data.index)}
                 >
@@ -88,6 +91,7 @@
                     <Shortcut shift={true} click={true} />
                 </Button>
             {/if}
+        </div>
     </Card.Content>
 </Card.Root>