docs progress

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" />

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')}

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} />

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>

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>

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">

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" />

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>

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