From 8dee6db813295a3c49285db673e2f04903ed5c82 Mon Sep 17 00:00:00 2001
From: vcoppe <vianney.coppe@gmail.com>
Date: Wed, 7 Aug 2024 16:54:48 +0200
Subject: [PATCH] add link to docs in help boxes

---
 website/src/lib/components/Help.svelte        | 20 ++++++++++++++++---
 .../lib/components/toolbar/tools/Clean.svelte |  2 +-
 .../components/toolbar/tools/Extract.svelte   |  2 +-
 .../lib/components/toolbar/tools/Merge.svelte |  2 +-
 .../components/toolbar/tools/Reduce.svelte    |  2 +-
 .../lib/components/toolbar/tools/Time.svelte  |  2 +-
 .../components/toolbar/tools/Waypoint.svelte  |  2 +-
 .../toolbar/tools/routing/Routing.svelte      |  6 +++---
 .../toolbar/tools/scissors/Scissors.svelte    |  2 +-
 website/src/locales/en.json                   |  1 +
 10 files changed, 28 insertions(+), 13 deletions(-)

diff --git a/website/src/lib/components/Help.svelte b/website/src/lib/components/Help.svelte
index 5c0e4a51..b9e6aa32 100644
--- a/website/src/lib/components/Help.svelte
+++ b/website/src/lib/components/Help.svelte
@@ -1,8 +1,22 @@
-<script>
+<script lang="ts">
 	import { CircleHelp } from 'lucide-svelte';
+	import { _ } from 'svelte-i18n';
+
+	export let link: string | undefined = undefined;
 </script>
 
-<div class="{$$props.class || ''} text-sm bg-muted rounded border flex flex-row items-center p-2">
+<div class="text-sm bg-muted rounded border flex flex-row items-center p-2 {$$props.class || ''}">
 	<CircleHelp size="16" class="w-4 mr-2 shrink-0 grow-0" />
-	<slot />
+	<div>
+		<slot />
+		{#if link}
+			<a
+				href={link}
+				target="_blank"
+				class="text-sm text-blue-500 dark:text-blue-300 hover:underline"
+			>
+				{$_('menu.more')}
+			</a>
+		{/if}
+	</div>
 </div>
diff --git a/website/src/lib/components/toolbar/tools/Clean.svelte b/website/src/lib/components/toolbar/tools/Clean.svelte
index 21e22186..5c4ed5f6 100644
--- a/website/src/lib/components/toolbar/tools/Clean.svelte
+++ b/website/src/lib/components/toolbar/tools/Clean.svelte
@@ -178,7 +178,7 @@
 		<Trash2 size="16" class="mr-1" />
 		{$_('toolbar.clean.button')}
 	</Button>
-	<Help>
+	<Help link="./help/toolbar/clean">
 		{#if validSelection}
 			{$_('toolbar.clean.help')}
 		{:else}
diff --git a/website/src/lib/components/toolbar/tools/Extract.svelte b/website/src/lib/components/toolbar/tools/Extract.svelte
index ba93ad22..ce341993 100644
--- a/website/src/lib/components/toolbar/tools/Extract.svelte
+++ b/website/src/lib/components/toolbar/tools/Extract.svelte
@@ -42,7 +42,7 @@
 		<Ungroup size="16" class="mr-1" />
 		{$_('toolbar.extract.button')}
 	</Button>
-	<Help>
+	<Help link="./help/toolbar/extract">
 		{#if validSelection}
 			{$_('toolbar.extract.help')}
 		{:else}
diff --git a/website/src/lib/components/toolbar/tools/Merge.svelte b/website/src/lib/components/toolbar/tools/Merge.svelte
index c2537ac4..438d11f1 100644
--- a/website/src/lib/components/toolbar/tools/Merge.svelte
+++ b/website/src/lib/components/toolbar/tools/Merge.svelte
@@ -74,7 +74,7 @@
 		<Group size="16" class="mr-1" />
 		{$_('toolbar.merge.merge_selection')}
 	</Button>
-	<Help>
+	<Help link="./help/toolbar/merge">
 		{#if mergeType === MergeType.TRACES && canMergeTraces}
 			{$_('toolbar.merge.help_merge_traces')}
 		{:else if mergeType === MergeType.TRACES && !canMergeTraces}
diff --git a/website/src/lib/components/toolbar/tools/Reduce.svelte b/website/src/lib/components/toolbar/tools/Reduce.svelte
index 226cff7d..bfc426eb 100644
--- a/website/src/lib/components/toolbar/tools/Reduce.svelte
+++ b/website/src/lib/components/toolbar/tools/Reduce.svelte
@@ -164,7 +164,7 @@
 		{$_('toolbar.reduce.button')}
 	</Button>
 
-	<Help>
+	<Help link="./help/toolbar/minify">
 		{#if validSelection}
 			{$_('toolbar.reduce.help')}
 		{:else}
diff --git a/website/src/lib/components/toolbar/tools/Time.svelte b/website/src/lib/components/toolbar/tools/Time.svelte
index 04a294d8..2d942a56 100644
--- a/website/src/lib/components/toolbar/tools/Time.svelte
+++ b/website/src/lib/components/toolbar/tools/Time.svelte
@@ -332,7 +332,7 @@
 			<CircleX size="16" />
 		</Button>
 	</div>
-	<Help>
+	<Help link="./help/toolbar/time">
 		{#if canUpdate}
 			{$_('toolbar.time.help')}
 		{:else}
diff --git a/website/src/lib/components/toolbar/tools/Waypoint.svelte b/website/src/lib/components/toolbar/tools/Waypoint.svelte
index bd72f588..2914e77b 100644
--- a/website/src/lib/components/toolbar/tools/Waypoint.svelte
+++ b/website/src/lib/components/toolbar/tools/Waypoint.svelte
@@ -204,7 +204,7 @@
 			<CircleX size="16" />
 		</Button>
 	</div>
-	<Help>
+	<Help link="./help/toolbar/poi">
 		{#if $selectedWaypoint || canCreate}
 			{$_('toolbar.waypoint.help')}
 		{:else}
diff --git a/website/src/lib/components/toolbar/tools/routing/Routing.svelte b/website/src/lib/components/toolbar/tools/routing/Routing.svelte
index 346b0ebf..b4638dac 100644
--- a/website/src/lib/components/toolbar/tools/routing/Routing.svelte
+++ b/website/src/lib/components/toolbar/tools/routing/Routing.svelte
@@ -236,11 +236,11 @@
 			</Tooltip>
 		</div>
 		<div class="w-full flex flex-row gap-2 items-end justify-between">
-			<Help>
+			<Help link="./help/toolbar/routing">
 				{#if !validSelection}
-					<div>{$_('toolbar.routing.help_no_file')}</div>
+					{$_('toolbar.routing.help_no_file')}
 				{:else}
-					<div>{$_('toolbar.routing.help')}</div>
+					{$_('toolbar.routing.help')}
 				{/if}
 			</Help>
 			<Button
diff --git a/website/src/lib/components/toolbar/tools/scissors/Scissors.svelte b/website/src/lib/components/toolbar/tools/scissors/Scissors.svelte
index 00c026cb..9c51406b 100644
--- a/website/src/lib/components/toolbar/tools/scissors/Scissors.svelte
+++ b/website/src/lib/components/toolbar/tools/scissors/Scissors.svelte
@@ -135,7 +135,7 @@
 			</Select.Content>
 		</Select.Root>
 	</Label>
-	<Help>
+	<Help link="./help/toolbar/scissors">
 		{#if validSelection}
 			{$_('toolbar.scissors.help')}
 		{:else}
diff --git a/website/src/locales/en.json b/website/src/locales/en.json
index 05c64095..63ae05a9 100644
--- a/website/src/locales/en.json
+++ b/website/src/locales/en.json
@@ -55,6 +55,7 @@
         "distance_markers": "Distance markers",
         "direction_markers": "Direction arrows",
         "help": "Help",
+        "more": "More...",
         "donate": "Donate",
         "ctrl": "Ctrl",
         "click": "Click",