add routing docs

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.