From 795b85da135a144f8610ec79a9bf1a2f4d56ca4d Mon Sep 17 00:00:00 2001
From: vcoppe <vianney.coppe@gmail.com>
Date: Sun, 11 Aug 2024 19:43:28 +0200
Subject: [PATCH] show alphabetically sorted list of POI icons

---
 website/src/lib/components/toolbar/tools/Waypoint.svelte | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/website/src/lib/components/toolbar/tools/Waypoint.svelte b/website/src/lib/components/toolbar/tools/Waypoint.svelte
index 309b129a..6b1cb329 100644
--- a/website/src/lib/components/toolbar/tools/Waypoint.svelte
+++ b/website/src/lib/components/toolbar/tools/Waypoint.svelte
@@ -12,7 +12,7 @@
 	import * as Select from '$lib/components/ui/select';
 	import { selection } from '$lib/components/file-list/Selection';
 	import { Waypoint } from 'gpx';
-	import { _ } from 'svelte-i18n';
+	import { _, locale } from 'svelte-i18n';
 	import { ListWaypointItem } from '$lib/components/file-list/FileList';
 	import { dbUtils, fileObservers, getFile, settings, type GPXFileWithStatistics } from '$lib/db';
 	import { get } from 'svelte/store';
@@ -156,6 +156,10 @@
 		longitude = e.lngLat.lng.toFixed(6);
 	}
 
+	$: sortedSymbols = Object.entries(symbols).sort((a, b) => {
+		return $_(`gpx.symbol.${a[0]}`).localeCompare($_(`gpx.symbol.${b[0]}`), $locale ?? 'en');
+	});
+
 	onMount(() => {
 		let m = get(map);
 		m?.on('click', setCoordinates);
@@ -186,7 +190,7 @@
 				<Select.Value />
 			</Select.Trigger>
 			<Select.Content class="max-h-60 overflow-y-scroll">
-				{#each Object.entries(symbols) as [key, symbol]}
+				{#each sortedSymbols as [key, symbol]}
 					<Select.Item value={symbol.value}>
 						<span>
 							{#if symbol.icon}