add routing docs

website/src/lib/components/docs/DocsImage.svelte

@@ -4,7 +4,7 @@
 </script>
 
 <div class="flex flex-col items-center py-6 w-full">
-	<div class="rounded-md overflow-clip shadow-lg mx-auto">
+	<div class="rounded-md overflow-clip shadow-xl mx-auto">
 		<enhanced:img {src} {alt} class="w-full max-w-3xl" />
 	</div>
 	<p class="text-center text-sm text-muted-foreground mt-2">{alt}</p>

website/src/lib/components/docs/DocsLoader.svelte

@@ -33,26 +33,37 @@
 
 <style lang="postcss">
 	:global(.markdown) {
+		@apply text-muted-foreground;
 	}
 
 	:global(.markdown h1) {
+		@apply text-foreground;
 		@apply text-3xl;
 		@apply font-semibold;
 		@apply mb-6;
 	}
 
 	:global(.markdown h2) {
+		@apply text-foreground;
 		@apply text-2xl;
 		@apply font-semibold;
 		@apply mb-3;
+		@apply pt-3;
 	}
 
 	:global(.markdown h3) {
+		@apply text-foreground;
 		@apply text-lg;
 		@apply font-semibold;
 		@apply pt-1.5;
 	}
 
+	:global(.markdown p > button) {
+		@apply border;
+		@apply rounded-md;
+		@apply px-1;
+	}
+
 	:global(.markdown a) {
 		@apply text-blue-500;
 		@apply hover:underline;

website/src/lib/components/docs/DocsNote.svelte

@@ -2,6 +2,10 @@
 	export let type: 'note' | 'warning' = 'note';
 </script>
 
-<div class="bg-accent border-l-8 border-blue-500 p-2 text-sm rounded-md">
+<div
+	class="bg-accent border-l-8 {type === 'note'
+		? 'border-blue-500'
+		: 'border-destructive'} p-2 text-sm rounded-md"
+>
 	<slot />
 </div>

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

@@ -16,7 +16,7 @@
 	import ToolbarItemMenu from './ToolbarItemMenu.svelte';
 </script>
 
-<div class="flex flex-row w-full items-center">
+<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"
 	>

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-80">
+<div class="flex flex-col gap-3 w-full max-w-80 items-center">
 	<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" />
@@ -150,6 +150,7 @@
 	</fieldset>
 	<Button
 		variant="outline"
+		class="w-full"
 		disabled={!validSelection || rectangleCoordinates.length != 2}
 		on:click={() => {
 			dbUtils.cleanSelection(

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

@@ -37,7 +37,7 @@
 		});
 </script>
 
-<div class="flex flex-col gap-3 w-80">
+<div class="flex flex-col gap-3 w-full max-w-80">
 	<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-80">
+<div class="flex flex-col gap-3 w-full max-w-80">
 	<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-80">
+<div class="flex flex-col gap-3 w-full max-w-80">
 	<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-80">
+<div class="flex flex-col gap-3 w-full max-w-80">
 	<div class="p-2">
 		<Slider bind:value={sliderValues} max={maxSliderValue} step={1} disabled={!validSelection} />
 	</div>

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

@@ -162,7 +162,7 @@
 	});
 </script>
 
-<div class="flex flex-col gap-3 w-96">
+<div class="flex flex-col gap-3 w-full max-w-96">
 	<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/components/toolbar/tools/routing/Routing.svelte

@@ -102,7 +102,10 @@
 		</Button>
 	</div>
 {:else}
-	<div class="flex flex-col gap-3 w-80" in:flyAndScale={{ x: -2, y: 0, duration: 50 }}>
+	<div
+		class="flex flex-col gap-3 w-full max-w-80 {$$props.class ?? ''}"
+		in:flyAndScale={{ x: -2, y: 0, duration: 50 }}
+	>
 		<div class="grow flex flex-col gap-3">
 			<Tooltip>
 				<Label slot="data" class="w-full flex flex-row justify-between items-center gap-2">

website/src/lib/components/toolbar/tools/routing/Routing.ts

@@ -2,7 +2,7 @@ import type { Coordinates } from "gpx";
 import { TrackPoint, distance } from "gpx";
 import { derived, get, writable } from "svelte/store";
 import { settings } from "$lib/db";
-import { _, locale } from "svelte-i18n";
+import { _, isLoading, locale } from "svelte-i18n";
 import { map } from "$lib/stores";
 
 const { routing, routingProfile, privateRoads } = settings;
@@ -17,12 +17,12 @@ export const brouterProfiles: { [key: string]: string } = {
     railway: 'rail'
 };
 export const routingProfileSelectItem = writable({
-    value: 'bike',
+    value: '',
     label: ''
 });
 
-derived([routingProfile, locale], ([profile, l]) => [profile, l]).subscribe(([profile, l]) => {
-    if (profile !== get(routingProfileSelectItem).value && l !== null) {
+derived([routingProfile, locale, isLoading], ([profile, l, i]) => [profile, l, i]).subscribe(([profile, l, i]) => {
+    if (!i && profile !== get(routingProfileSelectItem).value && l !== null) {
         routingProfileSelectItem.update((item) => {
             item.value = profile;
             item.label = get(_)(`toolbar.routing.activities.${profile}`);

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

@@ -18,7 +18,7 @@ When many files are open, you can scroll through the list of tabs to navigate be
 ### File selection
 
 By clicking on a tab, you can switch between the files to inspect their statistics, and apply [edit actions](./menu/edit) and [tools](./toolbar/) to them.
-By holding the <kbd>Ctrl/Cmd</kbd> key, you add files to the selection, and by holding <kbd>Shift</kbd>, you can select a range of files.
+By holding the <kbd>Ctrl/Cmd</kbd> key, you can add files to the selection or remove them, and by holding <kbd>Shift</kbd>, you can select a range of files.
 Most of the [edit actions](./menu/edit) and [tools](./toolbar/) can be applied to multiple files at once.
 
 <DocsNote>

website/src/lib/docs/en/getting-started.mdx

@@ -12,7 +12,7 @@ title: Getting started
 Welcome to the official guide of **gpx.studio**!
 It will walk you through all the components and tools of the interface, and help you become a proficient user of the application.
 
-<DocsImage src={interfaceScreenshot} alt="Screenshot of the gpx.studio interface" />
+<DocsImage src={interfaceScreenshot} alt="The gpx.studio interface." />
 
 As you can see on the screenshot above, the interface is divided into four main sections organized around the map.
 Before we dive into the details of each section, let's have a quick overview of the interface.

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

@@ -4,3 +4,7 @@ title: Toolbar
 
 # { 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.
+
+The next sections describe the tools individually.

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

@@ -2,4 +2,77 @@
 title: Route planning and editing
 ---
 
-# { title }
+<script>
+    import { Pencil, Route, Bike, TriangleAlert, ArrowRightLeft, Home, Repeat, Trash2, CirclePlay } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+    import Routing from '$lib/components/toolbar/tools/routing/Routing.svelte';
+    import routingScreenshot from '$lib/assets/img/docs/tools/routing.png?enhanced';
+    import DocsImage from '$lib/components/docs/DocsImage.svelte';
+</script>
+
+# <Pencil size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+The route planning and editing tool allows you to create and edit routes by placing or moving anchor points on the map.
+
+## Settings
+
+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" />
+</div>
+
+### <Route size="16" class="inline-block" style="margin-bottom: 2px" /> Routing
+
+When routing is enabled, anchor points placed or moved on the map will be connected by a route calculated on the <a href="https://www.openstreetmap.org" target="_blank">OpenStreetMap</a> road network.
+Disable routing to connect anchor points with straight lines.
+
+### <Bike size="16" class="inline-block" style="margin-bottom: 2px" /> Activity
+
+Select the activity type to tailor the routes for.
+
+### <TriangleAlert size="16" class="inline-block" style="margin-bottom: 2px" /> Allow private roads
+
+When enabled, the routing engine will consider private roads when computing routes.
+
+<DocsNote type="warning">
+    Only use this option if you have local knowledge of the area and have permission to use the roads in question.
+</DocsNote>
+
+## Plotting and editing routes
+
+Creating a route or extending an existing one is as simple as clicking on the map to place a new anchor point.
+
+You can also drag an existing anchor point to reroute the segment connecting it with the previous and next anchor points.
+
+Furthermore, new anchor points can be inserted between existing ones by hovering over the segment connecting them and dragging the anchor point that appears to the desired location.
+
+<DocsNote>
+    When editing imported GPX files, an initial set of anchor points is created automatically.
+    To ease the editing process, the more the map is zoomed in, the more anchor points are displayed.
+    This allows the route to be edited at different levels of detail.
+</DocsNote>
+
+Finally, you can delete anchor points by clicking on them and selecting <button><Trash2 size="16" class="inline-block" style="margin-bottom: 4px" /> Delete</button> from the context menu.
+
+<DocsImage src={routingScreenshot} alt="Anchor points allow to easily edit a route." />
+
+## Additional tools
+
+The following tools automate some common route modification operations.
+
+### <ArrowRightLeft size="16" class="inline-block" style="margin-bottom: 2px" /> Reverse
+
+Reverse the direction of the route.
+
+### <Home size="16" class="inline-block" style="margin-bottom: 2px" /> Back to start
+
+Connect the last point of the route with the starting point, using the chosen routing settings.
+
+### <Repeat size="16" class="inline-block" style="margin-bottom: 2px" /> Round trip
+
+Return to the starting point by the same route.
+
+### <CirclePlay size="16" class="inline-block" style="margin-bottom: 2px" /> Change the start of the loop
+
+When the end point of the route is close enough to the start, you can change the start of the loop by clicking on any anchor point and selecting <button><CirclePlay size="16" class="inline-block" style="margin-bottom: 2px" /> Start loop here</button> from the context menu.

website/src/routes/[...language]/+page.svelte

@@ -80,7 +80,7 @@
 				</h1>
 				<p class="text-muted-foreground">{$_('homepage.route_planning_description')}</p>
 			</div>
-			<div class="p-3 w-fit rounded-md border shadow-xl">
+			<div class="p-3 w-fit rounded-md border shadow-xl md:shrink-0">
 				<Routing minimizable={false} />
 			</div>
 		</div>
@@ -94,7 +94,7 @@
 				</h1>
 				<p class="text-muted-foreground">{$_('homepage.file_processing_description')}</p>
 			</div>
-			<div class="relative">
+			<div class="relative md:shrink-0 max-w-[400px]">
 				<Toolbar />
 			</div>
 			<div class="markdown text-center hidden md:block">

website/src/routes/[...language]/help/+layout.svelte

@@ -8,7 +8,11 @@
 </script>
 
 <div class="p-12 flex flex-row gap-24">
-	<div class="hidden md:flex flex-col gap-1 w-40 sticky top-28 self-start">
+	<div
+		class="{$page.params.guide
+			? 'hidden md:flex'
+			: 'flex'} flex-col gap-1 w-40 sticky top-28 self-start"
+	>
 		{#each Object.keys(guides) as guide}
 			<Button
 				variant="link"

website/src/routes/[...language]/help/[...guide]/+page.svelte

@@ -12,7 +12,7 @@
 
 <DocsLoader path="{$page.params.guide}.mdx" />
 
-<div class="flex flex-row pt-6">
+<div class="flex flex-row flex-wrap gap-3 pt-6">
 	{#if previousGuide}
 		<Button
 			variant="outline"