From ce974d7791bdc1c6cddf56401245af36c9fbefc5 Mon Sep 17 00:00:00 2001
From: vcoppe <vianney.coppe@gmail.com>
Date: Thu, 26 Sep 2024 13:31:19 +0200
Subject: [PATCH] add multiple selection tip

---
 website/src/lib/components/Shortcut.svelte    | 45 +++++++++++--------
 .../components/gpx-layer/WaypointPopup.svelte |  2 +-
 .../lib/components/toolbar/tools/Merge.svelte | 15 +++++++
 .../tools/routing/RoutingControlPopup.svelte  |  2 +-
 website/src/locales/en.json                   |  3 +-
 5 files changed, 46 insertions(+), 21 deletions(-)

diff --git a/website/src/lib/components/Shortcut.svelte b/website/src/lib/components/Shortcut.svelte
index 914716b4..7c78d26d 100644
--- a/website/src/lib/components/Shortcut.svelte
+++ b/website/src/lib/components/Shortcut.svelte
@@ -1,27 +1,36 @@
 <script lang="ts">
-    import { isMac, isSafari } from '$lib/utils';
-    import { onMount } from 'svelte';
-    import { _ } from 'svelte-i18n';
+	import { isMac, isSafari } from '$lib/utils';
+	import { onMount } from 'svelte';
+	import { _ } from 'svelte-i18n';
 
-    export let key: string;
-    export let shift: boolean = false;
-    export let ctrl: boolean = false;
-    export let click: boolean = false;
+	export let key: string | undefined = undefined;
+	export let shift: boolean = false;
+	export let ctrl: boolean = false;
+	export let click: boolean = false;
 
-    let mac = false;
-    let safari = false;
+	let mac = false;
+	let safari = false;
 
-    onMount(() => {
-        mac = isMac();
-        safari = isSafari();
-    });
+	onMount(() => {
+		mac = isMac();
+		safari = isSafari();
+	});
 </script>
 
 <div
-    class="ml-auto pl-2 text-xs tracking-widest text-muted-foreground flex flex-row gap-0 items-baseline"
+	class="ml-auto pl-2 text-xs tracking-widest text-muted-foreground flex flex-row gap-0 items-baseline"
+	{...$$props}
 >
-    <span>{shift ? '⇧' : ''}</span>
-    <span>{ctrl ? (mac && !safari ? '⌘' : $_('menu.ctrl') + '+') : ''}</span>
-    <span class={key === '+' ? 'font-medium text-sm/4' : ''}>{key}</span>
-    <span>{click ? $_('menu.click') : ''}</span>
+	{#if shift}
+		<span>⇧</span>
+	{/if}
+	{#if ctrl}
+		<span>{mac && !safari ? '⌘' : $_('menu.ctrl') + '+'}</span>
+	{/if}
+	{#if key}
+		<span class={key === '+' ? 'font-medium text-sm/4' : ''}>{key}</span>
+	{/if}
+	{#if click}
+		<span>{$_('menu.click')}</span>
+	{/if}
 </div>
diff --git a/website/src/lib/components/gpx-layer/WaypointPopup.svelte b/website/src/lib/components/gpx-layer/WaypointPopup.svelte
index bd1002f1..0f0adf1a 100644
--- a/website/src/lib/components/gpx-layer/WaypointPopup.svelte
+++ b/website/src/lib/components/gpx-layer/WaypointPopup.svelte
@@ -89,7 +89,7 @@
 					>
 						<Trash2 size="16" class="mr-1" />
 						{$_('menu.delete')}
-						<Shortcut key="" shift={true} click={true} />
+						<Shortcut shift={true} click={true} />
 					</Button>
 				{/if}
 			</Card.Content>
diff --git a/website/src/lib/components/toolbar/tools/Merge.svelte b/website/src/lib/components/toolbar/tools/Merge.svelte
index 5c2a0a70..57c2c901 100644
--- a/website/src/lib/components/toolbar/tools/Merge.svelte
+++ b/website/src/lib/components/toolbar/tools/Merge.svelte
@@ -16,6 +16,7 @@
 	import { dbUtils, getFile } from '$lib/db';
 	import { Group } from 'lucide-svelte';
 	import { getURLForLanguage } from '$lib/utils';
+	import Shortcut from '$lib/components/Shortcut.svelte';
 
 	let canMergeTraces = false;
 	let canMergeContents = false;
@@ -81,10 +82,24 @@
 			{$_('toolbar.merge.help_merge_traces')}
 		{:else if mergeType === MergeType.TRACES && !canMergeTraces}
 			{$_('toolbar.merge.help_cannot_merge_traces')}
+			{$_('toolbar.merge.selection_tip').split('{KEYBOARD_SHORTCUT}')[0]}
+			<Shortcut
+				ctrl={true}
+				click={true}
+				class="inline-flex text-muted-foreground text-xs border rounded p-0.5 gap-0"
+			/>
+			{$_('toolbar.merge.selection_tip').split('{KEYBOARD_SHORTCUT}')[1]}
 		{:else if mergeType === MergeType.CONTENTS && canMergeContents}
 			{$_('toolbar.merge.help_merge_contents')}
 		{:else if mergeType === MergeType.CONTENTS && !canMergeContents}
 			{$_('toolbar.merge.help_cannot_merge_contents')}
+			{$_('toolbar.merge.selection_tip').split('{KEYBOARD_SHORTCUT}')[0]}
+			<Shortcut
+				ctrl={true}
+				click={true}
+				class="inline-flex text-muted-foreground text-xs border rounded p-0.5 gap-0"
+			/>
+			{$_('toolbar.merge.selection_tip').split('{KEYBOARD_SHORTCUT}')[1]}
 		{/if}
 	</Help>
 </div>
diff --git a/website/src/lib/components/toolbar/tools/routing/RoutingControlPopup.svelte b/website/src/lib/components/toolbar/tools/routing/RoutingControlPopup.svelte
index a9e8e3fd..532536c6 100644
--- a/website/src/lib/components/toolbar/tools/routing/RoutingControlPopup.svelte
+++ b/website/src/lib/components/toolbar/tools/routing/RoutingControlPopup.svelte
@@ -30,7 +30,7 @@
 			>
 				<Trash2 size="16" class="mr-1" />
 				{$_('menu.delete')}
-				<Shortcut key="" shift={true} click={true} />
+				<Shortcut shift={true} click={true} />
 			</Button>
 		</Card.Content>
 	</Card.Root>
diff --git a/website/src/locales/en.json b/website/src/locales/en.json
index fb3c4d89..8d262c9a 100644
--- a/website/src/locales/en.json
+++ b/website/src/locales/en.json
@@ -177,7 +177,8 @@
             "help_merge_traces": "Connecting the selected traces will create a single continuous trace.",
             "help_cannot_merge_traces": "Your selection must contain several traces to connect them.",
             "help_merge_contents": "Merging the contents of the selected items will group all the contents inside the first item.",
-            "help_cannot_merge_contents": "Your selection must contain several items to merge their contents."
+            "help_cannot_merge_contents": "Your selection must contain several items to merge their contents.",
+            "selection_tip": "Tip: use {KEYBOARD_SHORTCUT} to add items to the selection."
         },
         "extract": {
             "tooltip": "Extract contents to separate items",