finish tools docs

website/src/lib/components/toolbar/Toolbar.svelte

@@ -18,7 +18,8 @@
 
 <div class="flex flex-row w-full items-center pr-12">
 	<div
-		class="h-fit flex flex-col p-1 gap-1.5 bg-background rounded-r-md pointer-events-auto shadow-md"
+		class="h-fit flex flex-col p-1 gap-1.5 bg-background rounded-r-md pointer-events-auto shadow-md {$$props.class ??
+			''}"
 	>
 		<ToolbarItem tool={Tool.ROUTING}>
 			<Pencil slot="icon" size="18" class="h-" />
@@ -53,5 +54,5 @@
 			<span slot="tooltip">{$_('toolbar.clean.tooltip')}</span>
 		</ToolbarItem>
 	</div>
-	<ToolbarItemMenu />
+	<ToolbarItemMenu class={$$props.class ?? ''} />
 </div>

website/src/lib/components/toolbar/tools/Scissors.svelte

@@ -33,13 +33,19 @@
 
 	function updateSlicedGPXStatistics() {
 		if (validSelection && canCrop) {
-			slicedGPXStatistics.set([
+			$slicedGPXStatistics = [
 				get(gpxStatistics).slice(sliderValues[0], sliderValues[1]),
 				sliderValues[0],
 				sliderValues[1]
-			]);
+			];
 		} else {
-			slicedGPXStatistics.set(undefined);
+			$slicedGPXStatistics = undefined;
+		}
+	}
+
+	function updateSliderValues() {
+		if ($slicedGPXStatistics !== undefined) {
+			sliderValues = [$slicedGPXStatistics[1], $slicedGPXStatistics[2]];
 		}
 	}
 
@@ -61,6 +67,13 @@
 		updateSlicedGPXStatistics();
 	}
 
+	$: if (
+		$slicedGPXStatistics !== undefined &&
+		($slicedGPXStatistics[1] !== sliderValues[0] || $slicedGPXStatistics[2] !== sliderValues[1])
+	) {
+		updateSliderValues();
+	}
+
 	const splitTypes = [
 		{ value: SplitType.FILES, label: $_('gpx.files') },
 		{ value: SplitType.TRACKS, label: $_('gpx.tracks') },
@@ -72,7 +85,7 @@
 	$: splitAs.set(splitType.value);
 
 	onDestroy(() => {
-		slicedGPXStatistics.set(undefined);
+		$slicedGPXStatistics = undefined;
 	});
 </script>
 
@@ -88,12 +101,12 @@
 		<Crop size="16" class="mr-1" />{$_('toolbar.scissors.crop')}
 	</Button>
 	<Separator />
-	<Label class="flex flex-row gap-3 items-center">
+	<Label class="flex flex-row flex-wrap gap-3 items-center">
 		<span class="shrink-0">
 			{$_('toolbar.scissors.split_as')}
 		</span>
 		<Select.Root bind:selected={splitType}>
-			<Select.Trigger class="h-8">
+			<Select.Trigger class="h-8 w-fit grow">
 				<Select.Value />
 			</Select.Trigger>
 			<Select.Content>

website/src/lib/components/toolbar/tools/Time.svelte

@@ -160,10 +160,10 @@
 		$selection.size === 1 && $selection.hasAnyChildren(new ListRootItem(), true, ['waypoints']);
 </script>
 
-<div class="flex flex-col gap-3 w-96 {$$props.class ?? ''}">
+<div class="flex flex-col gap-3 w-full max-w-80 {$$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">
+			<div class="flex flex-col gap-2 grow">
 				<Label for="speed" class="flex flex-row">
 					<Zap size="16" class="mr-1" />
 					{#if $velocityUnits === 'speed'}
@@ -207,7 +207,7 @@
 					{/if}
 				</div>
 			</div>
-			<div class="flex flex-col gap-2">
+			<div class="flex flex-col gap-2 grow">
 				<Label for="duration" class="flex flex-row">
 					<Timer size="16" class="mr-1" />
 					{$_('toolbar.time.total_time')}
@@ -229,7 +229,7 @@
 				disabled={!canUpdate}
 				locale={get(locale) ?? 'en'}
 				placeholder={$_('toolbar.time.pick_date')}
-				class="w-[211px]"
+				class="w-fit grow"
 				onValueChange={async () => {
 					await tick();
 					updateEnd();
@@ -240,7 +240,7 @@
 				step={1}
 				disabled={!canUpdate}
 				bind:value={startTime}
-				class="w-[100px]"
+				class="w-fit"
 				on:input={updateEnd}
 			/>
 		</div>
@@ -254,7 +254,7 @@
 				disabled={!canUpdate}
 				locale={get(locale) ?? 'en'}
 				placeholder={$_('toolbar.time.pick_date')}
-				class="w-[211px]"
+				class="w-fit grow"
 				onValueChange={async () => {
 					await tick();
 					updateStart();
@@ -265,7 +265,7 @@
 				step={1}
 				disabled={!canUpdate}
 				bind:value={endTime}
-				class="w-[100px]"
+				class="w-fit"
 				on:change={updateStart}
 			/>
 		</div>

website/src/lib/components/toolbar/tools/Waypoint.svelte

@@ -195,7 +195,7 @@
 			</div>
 		</div>
 	</fieldset>
-	<div class="flex flex-row gap-2">
+	<div class="flex flex-row flex-wrap gap-2">
 		<Button
 			variant="outline"
 			disabled={!canCreate && !$selectedWaypoint}
@@ -212,6 +212,7 @@
 		</Button>
 		<Button
 			variant="outline"
+			class="ml-auto"
 			on:click={() => {
 				selectedWaypoint.set(undefined);
 				resetWaypointData();

website/src/lib/components/ui/time-picker/TimePicker.svelte

@@ -64,7 +64,7 @@
 
 <div
 	bind:this={container}
-	class="flex flex-row items-center w-fit border rounded-md px-3 focus-within:outline-none focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2 {disabled
+	class="flex flex-row items-center w-full min-w-fit border rounded-md px-3 focus-within:outline-none focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2 {disabled
 		? 'opacity-50 cursor-not-allowed'
 		: ''}"
 >

website/src/lib/docs/en/files-and-stats.mdx

@@ -12,8 +12,8 @@ title: Files and statistics
 ## File list
 
 Once you have [opened](./menu/file) files, they will be shown as tabs in the file list located at the bottom of the map.
-You can reorder the files by dragging and dropping the tabs.
-When many files are open, you can scroll through the list of tabs to navigate between them.
+You can reorder them by dragging and dropping the tabs.
+And when many files are open, you can scroll through the list of tabs to navigate between them.
 
 ### File selection
 
@@ -35,7 +35,7 @@ As mentioned in the [view options section](./menu/view), you can switch between
 The vertical file list is useful when you have many files open, or files with multiple [tracks, segments or waypoints](../gpx).
 Indeed, this layout allows to inspect the content of the files through collapsible sections.
 
-You can apply [edit actions](./menu/edit) and [tools](./toolbar/) to inner file items.
+You also can apply [edit actions](./menu/edit) and [tools](./toolbar/) to inner file items.
 Furthermore, you can drag and drop the inner items to reorder them, or move them in the hierarchy or even to another file.
 
 ## Elevation profile and statistics

website/src/lib/docs/en/menu.mdx

@@ -8,12 +8,8 @@ title: Menu
 
 # { title }
 
-The main menu, located at the top of the interface, provides access to actions, options and settings divided into several categories:
-- [File actions](./menu/file)
-- [Edit actions](./menu/edit)
-- [View options](./menu/view)
-- [Settings](./menu/settings)
+The main menu, located at the top of the interface, provides access to actions, options and settings divided into several categories explained separately in the following sections.
 
 <DocsNote>
-    Most of the menu actions can also be performed using keyboard shortcuts that are displayed in the menu.
+    Most of the menu actions can also be performed using the keyboard shortcuts displayed in the menu.
 </DocsNote>

website/src/lib/docs/en/menu/file.mdx

@@ -41,4 +41,8 @@ Open the export dialog to save the currently selected files to your computer.
 
 ### <Download size="16" class="inline-block" style="margin-bottom: 2px" /> Export all...
 
-Open the export dialog to save all files to your computer.
+Open the export dialog to save all files to your computer.
+
+<DocsNote type="warning">
+    If your download does not start after clicking the download button, please check your browser settings to allow downloads from this website.
+</DocsNote>

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

@@ -2,9 +2,31 @@
 title: Toolbar
 ---
 
+<script lang="ts">
+    import Toolbar from '$lib/components/toolbar/Toolbar.svelte';
+	import { currentTool, Tool } from '$lib/stores';
+	import { onMount, onDestroy } from 'svelte';
+
+    onMount(() => {
+        currentTool.set(Tool.ROUTING);
+    });
+
+    onDestroy(() => {
+        currentTool.set(null);
+    });
+</script>
+
 # { title }
 
 The toolbar is located on the left side of the map, and is the heart of the application, as it provides access to the main features of **gpx.studio**.
-As for the [edit actions](./menu/edit), most of the tools can be applied to multiple files at once.
+Each tool is represented by an icon, and can be activated by clicking on it.
 
-The next sections describe the tools individually.
+<div class="flex flex-row justify-center text-foreground">
+    <div>
+        <Toolbar class="border rounded-md shadow-lg" />
+    </div>
+</div>
+
+As with [edit actions](./menu/edit), most tools can be applied to multiple files at once, and to [inner tracks and segments](./gpx).
+
+The next sections describe each tool in detail.

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

@@ -9,6 +9,10 @@ title: Clean
 
 # <SquareDashedMousePointer size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
 
+When the clean tool is selected, dragging the map will create a rectangle selection.
+
+Depending on the options selected in the dialog shown below, clicking the delete button will remove GPS points and/or [points of interest](../gpx) located either inside or outside the selection.
+
 <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

@@ -5,10 +5,20 @@ title: Extract
 <script>
     import { Ungroup } from 'lucide-svelte';
     import Extract from '$lib/components/toolbar/tools/Extract.svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
 </script>
 
 # <Ungroup size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
 
+This tool allows you to extract [tracks (or segments)](../gpx) from files (or tracks) containing multiple of them.
+
 <div class="flex flex-row justify-center">
     <Extract class="text-foreground p-3 border rounded-md shadow-lg" />
-</div>
+</div>
+
+Applying the tool to a file containing multiple tracks will create a new file for each of the tracks it contains.
+Similarly, applying the tool to a track containing multiple segments will create (in the same file) a new track for each of the segments it contains.
+
+<DocsNote>
+    When extracting the tracks of a file containing [points of interest](../gpx), the tool will automatically assign each point of interest to the track it is closest to.
+</DocsNote>

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

@@ -9,6 +9,12 @@ title: Merge
 
 # <Group size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
 
+To use this tool, you need to [select](../files-and-stats) multiple files, [tracks or segments](../gpx).
+
+- If your goal is to create a single continuous trace from your selection, use the **Connect the traces** option and validate.
+- The second option can be used to create or manage files with multiple [tracks or segments](../gpx).
+Merging files (or tracks) will result in a single file (or track) containing all tracks (or segments) from the selection.
+
 <div class="flex flex-row justify-center">
     <Merge class="text-foreground p-3 border rounded-md shadow-lg" />
-</div>
+</div>

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

@@ -5,10 +5,20 @@ title: Minify
 <script>
     import { Filter } from 'lucide-svelte';
     import Reduce from '$lib/components/toolbar/tools/Reduce.svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
 </script>
 
 # <Filter size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
 
+This tool can be used to reduce the number of GPS points of a trace, which can be useful to reduce its size.
+
+You can play with the slider to adjust the tolerance of the simplification algorithm, and see the number of points that will be kept as well as the simplified trace on the map.
+
 <div class="flex flex-row justify-center">
     <Reduce class="text-foreground p-3 border rounded-md shadow-lg" />
-</div>
+</div>
+
+<DocsNote>
+    The tolerance value represents the maximum distance allowed between the original trace and the simplified trace.
+    You can read more about the algorithm used <a href="https://en.wikipedia.org/wiki/Ramer%E2%80%93Douglas%E2%80%93Peucker_algorithm" target="_blank">here</a>.
+</DocsNote>

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

@@ -9,11 +9,11 @@ title: Points of interest
 
 # <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.
+[Points of interest](../gpx) can be added to GPX files to mark locations of interest on the map and show them on your GPS device.
 
 ### Creating a point of interest
 
-To create a point of interest, fill in the form as shown below.
+To create a point of interest, fill in the form 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.
 
@@ -23,5 +23,5 @@ Validate the form when you are done.
 
 ### 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.
+The above form can also be used 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/scissors.mdx

@@ -5,10 +5,28 @@ title: Crop and split
 <script>
     import { ScissorsIcon } from 'lucide-svelte';
     import Scissors from '$lib/components/toolbar/tools/Scissors.svelte';
+    import splitScreenshot from '$lib/assets/img/docs/tools/split.png?enhanced';
+    import DocsImage from '$lib/components/docs/DocsImage.svelte';
 </script>
 
 # <ScissorsIcon size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
 
+## Crop
+
+Using the slider, you can define the part of the selected trace that you want to keep.
+The start and end markers on the map and the [statistics and elevation profile](../files-and-stats) are updated in real time to reflect the selection.
+Alternatively, you can drag a selection rectangle directly on the elevation profile.
+Validate the selection when you are satisfied with the result.
+
 <div class="flex flex-row justify-center">
     <Scissors class="text-foreground p-3 border rounded-md shadow-lg" />
-</div>
+</div>
+
+## Split
+
+To split the selected trace into two parts, you can hover over the trace on the map.
+Scissors will appear at the cursor position, and you can click to split the trace at that point.
+
+You can choose to split the trace into two GPX files, or to keep the split parts in the same file as [tracks or segments](../gpx).
+
+<DocsImage src={splitScreenshot} alt="Hovering over the selected trace turns your cursor into scissors." />

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

@@ -5,10 +5,21 @@ title: Time
 <script>
     import { CalendarClock } from 'lucide-svelte';
     import Time from '$lib/components/toolbar/tools/Time.svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
 </script>
 
 # <CalendarClock size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
 
+This tool allows you to change or add timestamps to a trace.
+You simply need to use the form shown below, and validate it when you are done.
+
 <div class="flex flex-row justify-center">
     <Time class="text-foreground p-3 border rounded-md shadow-lg" />
-</div>
+</div>
+
+When you edit the speed, the moving time is adapted accordingly in the form, and vice versa.
+Similarly, when you edit the start time, the end time is updated to keep the same total duration, and vice versa.
+
+<DocsNote>
+    When using this tool with existing timestamps, changing the time or speed will simply shift, stretch or compress them accordingly.
+</DocsNote>