From e86dcb7750ee8b776e27068febda4cc2bb85081c Mon Sep 17 00:00:00 2001
From: vcoppe <vianney.coppe@gmail.com>
Date: Tue, 9 Jul 2024 22:49:57 +0200
Subject: [PATCH] docs progress

---
 .../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 +-
 .../components/toolbar/tools/Scissors.svelte  |  2 +-
 .../lib/components/toolbar/tools/Time.svelte  |  2 +-
 .../components/toolbar/tools/Waypoint.svelte  |  2 +-
 website/src/lib/docs/en/toolbar/clean.mdx     | 11 ++++++++-
 website/src/lib/docs/en/toolbar/extract.mdx   | 11 ++++++++-
 website/src/lib/docs/en/toolbar/merge.mdx     | 11 ++++++++-
 website/src/lib/docs/en/toolbar/poi.mdx       | 24 ++++++++++++++++++-
 website/src/lib/docs/en/toolbar/reduce.mdx    | 13 ++++++++--
 website/src/lib/docs/en/toolbar/routing.mdx   |  2 +-
 website/src/lib/docs/en/toolbar/scissors.mdx  | 13 ++++++++--
 website/src/lib/docs/en/toolbar/time.mdx      | 11 ++++++++-
 .../routes/[...language]/help/+layout.svelte  |  2 +-
 16 files changed, 94 insertions(+), 18 deletions(-)

diff --git a/website/src/lib/components/toolbar/tools/Clean.svelte b/website/src/lib/components/toolbar/tools/Clean.svelte
index 8052e66b..386224a7 100644
--- a/website/src/lib/components/toolbar/tools/Clean.svelte
+++ b/website/src/lib/components/toolbar/tools/Clean.svelte
@@ -127,7 +127,7 @@
 	$: validSelection = $selection.size > 0;
 </script>
 
-<div class="flex flex-col gap-3 w-full max-w-80 items-center">
+<div class="flex flex-col gap-3 w-full max-w-80 items-center {$$props.class ?? ''}">
 	<fieldset class="flex flex-col gap-3">
 		<Label class="flex flex-row items-center gap-[6.4px] h-3">
 			<Checkbox bind:checked={deleteTrackpoints} class="scale-90" />
diff --git a/website/src/lib/components/toolbar/tools/Extract.svelte b/website/src/lib/components/toolbar/tools/Extract.svelte
index e20196e0..ba93ad22 100644
--- a/website/src/lib/components/toolbar/tools/Extract.svelte
+++ b/website/src/lib/components/toolbar/tools/Extract.svelte
@@ -37,7 +37,7 @@
 		});
 </script>
 
-<div class="flex flex-col gap-3 w-full max-w-80">
+<div class="flex flex-col gap-3 w-full max-w-80 {$$props.class ?? ''}">
 	<Button variant="outline" disabled={!validSelection} on:click={dbUtils.extractSelection}>
 		<Ungroup size="16" class="mr-1" />
 		{$_('toolbar.extract.button')}
diff --git a/website/src/lib/components/toolbar/tools/Merge.svelte b/website/src/lib/components/toolbar/tools/Merge.svelte
index 2d631c7a..c2537ac4 100644
--- a/website/src/lib/components/toolbar/tools/Merge.svelte
+++ b/website/src/lib/components/toolbar/tools/Merge.svelte
@@ -52,7 +52,7 @@
 	let mergeType = MergeType.TRACES;
 </script>
 
-<div class="flex flex-col gap-3 w-full max-w-80">
+<div class="flex flex-col gap-3 w-full max-w-80 {$$props.class ?? ''}">
 	<RadioGroup.Root bind:value={mergeType}>
 		<Label class="flex flex-row items-center gap-2 leading-5">
 			<RadioGroup.Item value={MergeType.TRACES} />
diff --git a/website/src/lib/components/toolbar/tools/Reduce.svelte b/website/src/lib/components/toolbar/tools/Reduce.svelte
index 7de3d3c4..226cff7d 100644
--- a/website/src/lib/components/toolbar/tools/Reduce.svelte
+++ b/website/src/lib/components/toolbar/tools/Reduce.svelte
@@ -147,7 +147,7 @@
 	}
 </script>
 
-<div class="flex flex-col gap-3 w-full max-w-80">
+<div class="flex flex-col gap-3 w-full max-w-80 {$$props.class ?? ''}">
 	<div class="p-2">
 		<Slider bind:value={sliderValue} min={0} max={100} step={1} />
 	</div>
diff --git a/website/src/lib/components/toolbar/tools/Scissors.svelte b/website/src/lib/components/toolbar/tools/Scissors.svelte
index b18aba3b..26fa27c3 100644
--- a/website/src/lib/components/toolbar/tools/Scissors.svelte
+++ b/website/src/lib/components/toolbar/tools/Scissors.svelte
@@ -76,7 +76,7 @@
 	});
 </script>
 
-<div class="flex flex-col gap-3 w-full max-w-80">
+<div class="flex flex-col gap-3 w-full max-w-80 {$$props.class ?? ''}">
 	<div class="p-2">
 		<Slider bind:value={sliderValues} max={maxSliderValue} step={1} disabled={!validSelection} />
 	</div>
diff --git a/website/src/lib/components/toolbar/tools/Time.svelte b/website/src/lib/components/toolbar/tools/Time.svelte
index 0b605ab9..3e46a114 100644
--- a/website/src/lib/components/toolbar/tools/Time.svelte
+++ b/website/src/lib/components/toolbar/tools/Time.svelte
@@ -160,7 +160,7 @@
 		$selection.size === 1 && $selection.hasAnyChildren(new ListRootItem(), true, ['waypoints']);
 </script>
 
-<div class="flex flex-col gap-3 w-80">
+<div class="flex flex-col gap-3 w-96 {$$props.class ?? ''}">
 	<fieldset class="flex flex-col gap-2">
 		<div class="flex flex-row gap-2 justify-center">
 			<div class="flex flex-col gap-2">
diff --git a/website/src/lib/components/toolbar/tools/Waypoint.svelte b/website/src/lib/components/toolbar/tools/Waypoint.svelte
index d34b6b1d..aedb9792 100644
--- a/website/src/lib/components/toolbar/tools/Waypoint.svelte
+++ b/website/src/lib/components/toolbar/tools/Waypoint.svelte
@@ -162,7 +162,7 @@
 	});
 </script>
 
-<div class="flex flex-col gap-3 w-full max-w-96">
+<div class="flex flex-col gap-3 w-full max-w-96 {$$props.class ?? ''}">
 	<fieldset class="flex flex-col gap-2">
 		<Label for="name">{$_('menu.metadata.name')}</Label>
 		<Input bind:value={name} id="name" class="font-semibold h-8" />
diff --git a/website/src/lib/docs/en/toolbar/clean.mdx b/website/src/lib/docs/en/toolbar/clean.mdx
index faabb36a..6b90d637 100644
--- a/website/src/lib/docs/en/toolbar/clean.mdx
+++ b/website/src/lib/docs/en/toolbar/clean.mdx
@@ -2,4 +2,13 @@
 title: Clean
 ---
 
-# { title }
\ No newline at end of file
+<script>
+    import { SquareDashedMousePointer } from 'lucide-svelte';
+    import Clean from '$lib/components/toolbar/tools/Clean.svelte';
+</script>
+
+# <SquareDashedMousePointer size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+<div class="flex flex-row justify-center">
+    <Clean class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
\ No newline at end of file
diff --git a/website/src/lib/docs/en/toolbar/extract.mdx b/website/src/lib/docs/en/toolbar/extract.mdx
index 33537405..fcf2ac59 100644
--- a/website/src/lib/docs/en/toolbar/extract.mdx
+++ b/website/src/lib/docs/en/toolbar/extract.mdx
@@ -2,4 +2,13 @@
 title: Extract
 ---
 
-# { title }
\ No newline at end of file
+<script>
+    import { Ungroup } from 'lucide-svelte';
+    import Extract from '$lib/components/toolbar/tools/Extract.svelte';
+</script>
+
+# <Ungroup size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+<div class="flex flex-row justify-center">
+    <Extract class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
\ No newline at end of file
diff --git a/website/src/lib/docs/en/toolbar/merge.mdx b/website/src/lib/docs/en/toolbar/merge.mdx
index 1608d7f2..f8fbb51f 100644
--- a/website/src/lib/docs/en/toolbar/merge.mdx
+++ b/website/src/lib/docs/en/toolbar/merge.mdx
@@ -2,4 +2,13 @@
 title: Merge
 ---
 
-# { title }
\ No newline at end of file
+<script>
+    import { Group } from 'lucide-svelte';
+    import Merge from '$lib/components/toolbar/tools/Merge.svelte';
+</script>
+
+# <Group size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+<div class="flex flex-row justify-center">
+    <Merge class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
\ No newline at end of file
diff --git a/website/src/lib/docs/en/toolbar/poi.mdx b/website/src/lib/docs/en/toolbar/poi.mdx
index 9ea9d82d..f3d7ba63 100644
--- a/website/src/lib/docs/en/toolbar/poi.mdx
+++ b/website/src/lib/docs/en/toolbar/poi.mdx
@@ -2,4 +2,26 @@
 title: Points of interest
 ---
 
-# { title }
\ No newline at end of file
+<script>
+    import { MapPin } from 'lucide-svelte';
+    import Waypoint from '$lib/components/toolbar/tools/Waypoint.svelte';
+</script>
+
+# <MapPin size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+[Points of interest](../gpx) can be added to GPX files to mark locations of interest on the map.
+
+### Creating a point of interest
+
+To create a point of interest, fill in the form as shown below.
+You can choose the location of the point of interest either by clicking on the map or by entering the coordinates manually.
+Validate the form when you are done.
+
+<div class="flex flex-row justify-center">
+    <Waypoint class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+### Editing a point of interest
+
+You can also use the above form to edit an existing point of interest after selecting it on the map.
+If you only need to move the point of interest, you can drag it to the desired location.
\ No newline at end of file
diff --git a/website/src/lib/docs/en/toolbar/reduce.mdx b/website/src/lib/docs/en/toolbar/reduce.mdx
index df9974c4..f3a3f93d 100644
--- a/website/src/lib/docs/en/toolbar/reduce.mdx
+++ b/website/src/lib/docs/en/toolbar/reduce.mdx
@@ -1,5 +1,14 @@
 ---
-title: Reduce
+title: Minify
 ---
 
-# { title }
\ No newline at end of file
+<script>
+    import { Filter } from 'lucide-svelte';
+    import Reduce from '$lib/components/toolbar/tools/Reduce.svelte';
+</script>
+
+# <Filter size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+<div class="flex flex-row justify-center">
+    <Reduce class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
\ No newline at end of file
diff --git a/website/src/lib/docs/en/toolbar/routing.mdx b/website/src/lib/docs/en/toolbar/routing.mdx
index 4916b2d2..47c3f939 100644
--- a/website/src/lib/docs/en/toolbar/routing.mdx
+++ b/website/src/lib/docs/en/toolbar/routing.mdx
@@ -19,7 +19,7 @@ The route planning and editing tool allows you to create and edit routes by plac
 As shown below, the tool dialog contains a few settings to control the routing behavior.
 
 <div class="flex flex-row justify-center">
-    <Routing minimizable={false} class="text-foreground p-3 border rounded-md" />
+    <Routing minimizable={false} class="text-foreground p-3 border rounded-md shadow-lg" />
 </div>
 
 ### <Route size="16" class="inline-block" style="margin-bottom: 2px" /> Routing
diff --git a/website/src/lib/docs/en/toolbar/scissors.mdx b/website/src/lib/docs/en/toolbar/scissors.mdx
index b5bf3399..b92bfbd4 100644
--- a/website/src/lib/docs/en/toolbar/scissors.mdx
+++ b/website/src/lib/docs/en/toolbar/scissors.mdx
@@ -1,5 +1,14 @@
 ---
-title: Scissors
+title: Crop and split
 ---
 
-# { title }
\ No newline at end of file
+<script>
+    import { ScissorsIcon } from 'lucide-svelte';
+    import Scissors from '$lib/components/toolbar/tools/Scissors.svelte';
+</script>
+
+# <ScissorsIcon size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+<div class="flex flex-row justify-center">
+    <Scissors class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
\ No newline at end of file
diff --git a/website/src/lib/docs/en/toolbar/time.mdx b/website/src/lib/docs/en/toolbar/time.mdx
index 3c903bf1..c76795ce 100644
--- a/website/src/lib/docs/en/toolbar/time.mdx
+++ b/website/src/lib/docs/en/toolbar/time.mdx
@@ -2,4 +2,13 @@
 title: Time
 ---
 
-# { title }
\ No newline at end of file
+<script>
+    import { CalendarClock } from 'lucide-svelte';
+    import Time from '$lib/components/toolbar/tools/Time.svelte';
+</script>
+
+# <CalendarClock size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+<div class="flex flex-row justify-center">
+    <Time class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
\ No newline at end of file
diff --git a/website/src/routes/[...language]/help/+layout.svelte b/website/src/routes/[...language]/help/+layout.svelte
index de5d423a..d07028a4 100644
--- a/website/src/routes/[...language]/help/+layout.svelte
+++ b/website/src/routes/[...language]/help/+layout.svelte
@@ -11,7 +11,7 @@
 	<div
 		class="{$page.params.guide
 			? 'hidden md:flex'
-			: 'flex'} flex-col gap-1 w-40 sticky top-28 self-start"
+			: 'flex'} flex-col gap-1 w-40 sticky top-[105px] self-start"
 	>
 		{#each Object.keys(guides) as guide}
 			<Button