docs progress

website/src/lib/docs/en/toolbar/clean.mdx

@@ -2,4 +2,13 @@
 title: Clean
 ---
 
-# { title }
+<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>

website/src/lib/docs/en/toolbar/extract.mdx

@@ -2,4 +2,13 @@
 title: Extract
 ---
 
-# { title }
+<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>

website/src/lib/docs/en/toolbar/merge.mdx

@@ -2,4 +2,13 @@
 title: Merge
 ---
 
-# { title }
+<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>

website/src/lib/docs/en/toolbar/poi.mdx

@@ -2,4 +2,26 @@
 title: Points of interest
 ---
 
-# { title }
+<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.

website/src/lib/docs/en/toolbar/reduce.mdx

@@ -1,5 +1,14 @@
 ---
-title: Reduce
+title: Minify
 ---
 
-# { title }
+<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>

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

website/src/lib/docs/en/toolbar/scissors.mdx

@@ -1,5 +1,14 @@
 ---
-title: Scissors
+title: Crop and split
 ---
 
-# { title }
+<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>

website/src/lib/docs/en/toolbar/time.mdx

@@ -2,4 +2,13 @@
 title: Time
 ---
 
-# { title }
+<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>