From f94edf3e3a45b382adfec14fefad0f332e85e8c7 Mon Sep 17 00:00:00 2001
From: vcoppe <vianney.coppe@gmail.com>
Date: Fri, 20 Sep 2024 10:15:28 +0200
Subject: [PATCH] fix urls

---
 .../lib/components/toolbar/tools/Clean.svelte |   6 +-
 .../components/toolbar/tools/Elevation.svelte |  57 +-
 .../components/toolbar/tools/Extract.svelte   |   5 +-
 .../lib/components/toolbar/tools/Merge.svelte | 155 ++--
 .../components/toolbar/tools/Reduce.svelte    | 318 ++++----
 .../lib/components/toolbar/tools/Time.svelte  | 734 +++++++++---------
 .../components/toolbar/tools/Waypoint.svelte  | 494 ++++++------
 .../toolbar/tools/routing/Routing.svelte      |   6 +-
 .../toolbar/tools/scissors/Scissors.svelte    |   5 +-
 website/src/lib/docs/en/files-and-stats.mdx   |   2 +-
 10 files changed, 884 insertions(+), 898 deletions(-)

diff --git a/website/src/lib/components/toolbar/tools/Clean.svelte b/website/src/lib/components/toolbar/tools/Clean.svelte
index 5c4ed5f6..04da25c5 100644
--- a/website/src/lib/components/toolbar/tools/Clean.svelte
+++ b/website/src/lib/components/toolbar/tools/Clean.svelte
@@ -11,9 +11,9 @@
 	import * as RadioGroup from '$lib/components/ui/radio-group';
 	import { Button } from '$lib/components/ui/button';
 	import Help from '$lib/components/Help.svelte';
-	import { _ } from 'svelte-i18n';
+	import { _, locale } from 'svelte-i18n';
 	import { onDestroy, onMount } from 'svelte';
-	import { resetCursor, setCrosshairCursor } from '$lib/utils';
+	import { getURLForLanguage, resetCursor, setCrosshairCursor } from '$lib/utils';
 	import { Trash2 } from 'lucide-svelte';
 	import { map } from '$lib/stores';
 	import { selection } from '$lib/components/file-list/Selection';
@@ -178,7 +178,7 @@
 		<Trash2 size="16" class="mr-1" />
 		{$_('toolbar.clean.button')}
 	</Button>
-	<Help link="./help/toolbar/clean">
+	<Help link={getURLForLanguage($locale, '/help/toolbar/clean')}>
 		{#if validSelection}
 			{$_('toolbar.clean.help')}
 		{:else}
diff --git a/website/src/lib/components/toolbar/tools/Elevation.svelte b/website/src/lib/components/toolbar/tools/Elevation.svelte
index de365be7..2c920e79 100644
--- a/website/src/lib/components/toolbar/tools/Elevation.svelte
+++ b/website/src/lib/components/toolbar/tools/Elevation.svelte
@@ -1,34 +1,35 @@
 <script lang="ts">
-    import { Button } from '$lib/components/ui/button';
-    import { selection } from '$lib/components/file-list/Selection';
-    import Help from '$lib/components/Help.svelte';
-    import { MountainSnow } from 'lucide-svelte';
-    import { dbUtils } from '$lib/db';
-    import { map } from '$lib/stores';
-    import { _ } from 'svelte-i18n';
+	import { Button } from '$lib/components/ui/button';
+	import { selection } from '$lib/components/file-list/Selection';
+	import Help from '$lib/components/Help.svelte';
+	import { MountainSnow } from 'lucide-svelte';
+	import { dbUtils } from '$lib/db';
+	import { map } from '$lib/stores';
+	import { _, locale } from 'svelte-i18n';
+	import { getURLForLanguage } from '$lib/utils';
 
-    $: validSelection = $selection.size > 0;
+	$: validSelection = $selection.size > 0;
 </script>
 
 <div class="flex flex-col gap-3 w-full max-w-80 {$$props.class ?? ''}">
-    <Button
-        variant="outline"
-        class="whitespace-normal h-fit"
-        disabled={!validSelection}
-        on:click={async () => {
-            if ($map) {
-                dbUtils.addElevationToSelection($map);
-            }
-        }}
-    >
-        <MountainSnow size="16" class="mr-1 shrink-0" />
-        {$_('toolbar.elevation.button')}
-    </Button>
-    <Help link="./help/toolbar/elevation">
-        {#if validSelection}
-            {$_('toolbar.elevation.help')}
-        {:else}
-            {$_('toolbar.elevation.help_no_selection')}
-        {/if}
-    </Help>
+	<Button
+		variant="outline"
+		class="whitespace-normal h-fit"
+		disabled={!validSelection}
+		on:click={async () => {
+			if ($map) {
+				dbUtils.addElevationToSelection($map);
+			}
+		}}
+	>
+		<MountainSnow size="16" class="mr-1 shrink-0" />
+		{$_('toolbar.elevation.button')}
+	</Button>
+	<Help link={getURLForLanguage($locale, '/help/toolbar/elevation')}>
+		{#if validSelection}
+			{$_('toolbar.elevation.help')}
+		{:else}
+			{$_('toolbar.elevation.help_no_selection')}
+		{/if}
+	</Help>
 </div>
diff --git a/website/src/lib/components/toolbar/tools/Extract.svelte b/website/src/lib/components/toolbar/tools/Extract.svelte
index ce341993..c101be0f 100644
--- a/website/src/lib/components/toolbar/tools/Extract.svelte
+++ b/website/src/lib/components/toolbar/tools/Extract.svelte
@@ -11,7 +11,8 @@
 	} from '$lib/components/file-list/FileList';
 	import Help from '$lib/components/Help.svelte';
 	import { dbUtils, getFile } from '$lib/db';
-	import { _ } from 'svelte-i18n';
+	import { _, locale } from 'svelte-i18n';
+	import { getURLForLanguage } from '$lib/utils';
 
 	$: validSelection =
 		$selection.size > 0 &&
@@ -42,7 +43,7 @@
 		<Ungroup size="16" class="mr-1" />
 		{$_('toolbar.extract.button')}
 	</Button>
-	<Help link="./help/toolbar/extract">
+	<Help link={getURLForLanguage($locale, '/help/toolbar/extract')}>
 		{#if validSelection}
 			{$_('toolbar.extract.help')}
 		{:else}
diff --git a/website/src/lib/components/toolbar/tools/Merge.svelte b/website/src/lib/components/toolbar/tools/Merge.svelte
index aae32a47..5c2a0a70 100644
--- a/website/src/lib/components/toolbar/tools/Merge.svelte
+++ b/website/src/lib/components/toolbar/tools/Merge.svelte
@@ -1,89 +1,90 @@
 <script lang="ts" context="module">
-    enum MergeType {
-        TRACES = 'traces',
-        CONTENTS = 'contents'
-    }
+	enum MergeType {
+		TRACES = 'traces',
+		CONTENTS = 'contents'
+	}
 </script>
 
 <script lang="ts">
-    import { ListFileItem, ListTrackItem } from '$lib/components/file-list/FileList';
-    import Help from '$lib/components/Help.svelte';
-    import { selection } from '$lib/components/file-list/Selection';
-    import { Button } from '$lib/components/ui/button';
-    import { Label } from '$lib/components/ui/label/index.js';
-    import * as RadioGroup from '$lib/components/ui/radio-group';
-    import { _ } from 'svelte-i18n';
-    import { dbUtils, getFile } from '$lib/db';
-    import { Group } from 'lucide-svelte';
+	import { ListFileItem, ListTrackItem } from '$lib/components/file-list/FileList';
+	import Help from '$lib/components/Help.svelte';
+	import { selection } from '$lib/components/file-list/Selection';
+	import { Button } from '$lib/components/ui/button';
+	import { Label } from '$lib/components/ui/label/index.js';
+	import * as RadioGroup from '$lib/components/ui/radio-group';
+	import { _, locale } from 'svelte-i18n';
+	import { dbUtils, getFile } from '$lib/db';
+	import { Group } from 'lucide-svelte';
+	import { getURLForLanguage } from '$lib/utils';
 
-    let canMergeTraces = false;
-    let canMergeContents = false;
+	let canMergeTraces = false;
+	let canMergeContents = false;
 
-    $: if ($selection.size > 1) {
-        canMergeTraces = true;
-    } else if ($selection.size === 1) {
-        let selected = $selection.getSelected()[0];
-        if (selected instanceof ListFileItem) {
-            let file = getFile(selected.getFileId());
-            if (file) {
-                canMergeTraces = file.getSegments().length > 1;
-            } else {
-                canMergeTraces = false;
-            }
-        } else if (selected instanceof ListTrackItem) {
-            let trackIndex = selected.getTrackIndex();
-            let file = getFile(selected.getFileId());
-            if (file && trackIndex < file.trk.length) {
-                canMergeTraces = file.trk[trackIndex].getSegments().length > 1;
-            } else {
-                canMergeTraces = false;
-            }
-        } else {
-            canMergeContents = false;
-        }
-    }
+	$: if ($selection.size > 1) {
+		canMergeTraces = true;
+	} else if ($selection.size === 1) {
+		let selected = $selection.getSelected()[0];
+		if (selected instanceof ListFileItem) {
+			let file = getFile(selected.getFileId());
+			if (file) {
+				canMergeTraces = file.getSegments().length > 1;
+			} else {
+				canMergeTraces = false;
+			}
+		} else if (selected instanceof ListTrackItem) {
+			let trackIndex = selected.getTrackIndex();
+			let file = getFile(selected.getFileId());
+			if (file && trackIndex < file.trk.length) {
+				canMergeTraces = file.trk[trackIndex].getSegments().length > 1;
+			} else {
+				canMergeTraces = false;
+			}
+		} else {
+			canMergeContents = false;
+		}
+	}
 
-    $: canMergeContents =
-        $selection.size > 1 &&
-        $selection
-            .getSelected()
-            .some((item) => item instanceof ListFileItem || item instanceof ListTrackItem);
+	$: canMergeContents =
+		$selection.size > 1 &&
+		$selection
+			.getSelected()
+			.some((item) => item instanceof ListFileItem || item instanceof ListTrackItem);
 
-    let mergeType = MergeType.TRACES;
+	let mergeType = MergeType.TRACES;
 </script>
 
 <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} />
-            {$_('toolbar.merge.merge_traces')}
-        </Label>
-        <Label class="flex flex-row items-center gap-2 leading-5">
-            <RadioGroup.Item value={MergeType.CONTENTS} />
-            {$_('toolbar.merge.merge_contents')}
-        </Label>
-    </RadioGroup.Root>
-    <Button
-        variant="outline"
-        class="whitespace-normal h-fit"
-        disabled={(mergeType === MergeType.TRACES && !canMergeTraces) ||
-            (mergeType === MergeType.CONTENTS && !canMergeContents)}
-        on:click={() => {
-            dbUtils.mergeSelection(mergeType === MergeType.TRACES);
-        }}
-    >
-        <Group size="16" class="mr-1 shrink-0" />
-        {$_('toolbar.merge.merge_selection')}
-    </Button>
-    <Help link="./help/toolbar/merge">
-        {#if mergeType === MergeType.TRACES && canMergeTraces}
-            {$_('toolbar.merge.help_merge_traces')}
-        {:else if mergeType === MergeType.TRACES && !canMergeTraces}
-            {$_('toolbar.merge.help_cannot_merge_traces')}
-        {:else if mergeType === MergeType.CONTENTS && canMergeContents}
-            {$_('toolbar.merge.help_merge_contents')}
-        {:else if mergeType === MergeType.CONTENTS && !canMergeContents}
-            {$_('toolbar.merge.help_cannot_merge_contents')}
-        {/if}
-    </Help>
+	<RadioGroup.Root bind:value={mergeType}>
+		<Label class="flex flex-row items-center gap-2 leading-5">
+			<RadioGroup.Item value={MergeType.TRACES} />
+			{$_('toolbar.merge.merge_traces')}
+		</Label>
+		<Label class="flex flex-row items-center gap-2 leading-5">
+			<RadioGroup.Item value={MergeType.CONTENTS} />
+			{$_('toolbar.merge.merge_contents')}
+		</Label>
+	</RadioGroup.Root>
+	<Button
+		variant="outline"
+		class="whitespace-normal h-fit"
+		disabled={(mergeType === MergeType.TRACES && !canMergeTraces) ||
+			(mergeType === MergeType.CONTENTS && !canMergeContents)}
+		on:click={() => {
+			dbUtils.mergeSelection(mergeType === MergeType.TRACES);
+		}}
+	>
+		<Group size="16" class="mr-1 shrink-0" />
+		{$_('toolbar.merge.merge_selection')}
+	</Button>
+	<Help link={getURLForLanguage($locale, '/help/toolbar/merge')}>
+		{#if mergeType === MergeType.TRACES && canMergeTraces}
+			{$_('toolbar.merge.help_merge_traces')}
+		{:else if mergeType === MergeType.TRACES && !canMergeTraces}
+			{$_('toolbar.merge.help_cannot_merge_traces')}
+		{:else if mergeType === MergeType.CONTENTS && canMergeContents}
+			{$_('toolbar.merge.help_merge_contents')}
+		{:else if mergeType === MergeType.CONTENTS && !canMergeContents}
+			{$_('toolbar.merge.help_cannot_merge_contents')}
+		{/if}
+	</Help>
 </div>
diff --git a/website/src/lib/components/toolbar/tools/Reduce.svelte b/website/src/lib/components/toolbar/tools/Reduce.svelte
index cb06f91d..ef4210a6 100644
--- a/website/src/lib/components/toolbar/tools/Reduce.svelte
+++ b/website/src/lib/components/toolbar/tools/Reduce.svelte
@@ -1,183 +1,175 @@
 <script lang="ts">
-    import { Label } from '$lib/components/ui/label/index.js';
-    import { Button } from '$lib/components/ui/button';
-    import { Slider } from '$lib/components/ui/slider';
-    import { selection } from '$lib/components/file-list/Selection';
-    import {
-        ListItem,
-        ListRootItem,
-        ListTrackSegmentItem
-    } from '$lib/components/file-list/FileList';
-    import Help from '$lib/components/Help.svelte';
-    import { Filter } from 'lucide-svelte';
-    import { _ } from 'svelte-i18n';
-    import WithUnits from '$lib/components/WithUnits.svelte';
-    import { dbUtils, fileObservers } from '$lib/db';
-    import { map } from '$lib/stores';
-    import { onDestroy } from 'svelte';
-    import { ramerDouglasPeucker, TrackPoint, type SimplifiedTrackPoint } from 'gpx';
-    import { derived } from 'svelte/store';
+	import { Label } from '$lib/components/ui/label/index.js';
+	import { Button } from '$lib/components/ui/button';
+	import { Slider } from '$lib/components/ui/slider';
+	import { selection } from '$lib/components/file-list/Selection';
+	import { ListItem, ListRootItem, ListTrackSegmentItem } from '$lib/components/file-list/FileList';
+	import Help from '$lib/components/Help.svelte';
+	import { Filter } from 'lucide-svelte';
+	import { _, locale } from 'svelte-i18n';
+	import WithUnits from '$lib/components/WithUnits.svelte';
+	import { dbUtils, fileObservers } from '$lib/db';
+	import { map } from '$lib/stores';
+	import { onDestroy } from 'svelte';
+	import { ramerDouglasPeucker, TrackPoint, type SimplifiedTrackPoint } from 'gpx';
+	import { derived } from 'svelte/store';
+	import { getURLForLanguage } from '$lib/utils';
 
-    let sliderValue = [50];
-    let maxPoints = 0;
-    let currentPoints = 0;
+	let sliderValue = [50];
+	let maxPoints = 0;
+	let currentPoints = 0;
 
-    $: validSelection = $selection.hasAnyChildren(new ListRootItem(), true, ['waypoints']);
+	$: validSelection = $selection.hasAnyChildren(new ListRootItem(), true, ['waypoints']);
 
-    $: tolerance = 2 ** (sliderValue[0] / (100 / Math.log2(10000)));
+	$: tolerance = 2 ** (sliderValue[0] / (100 / Math.log2(10000)));
 
-    let simplified = new Map<string, [ListItem, number, SimplifiedTrackPoint[]]>();
-    let unsubscribes = new Map<string, () => void>();
+	let simplified = new Map<string, [ListItem, number, SimplifiedTrackPoint[]]>();
+	let unsubscribes = new Map<string, () => void>();
 
-    function update() {
-        maxPoints = 0;
-        currentPoints = 0;
+	function update() {
+		maxPoints = 0;
+		currentPoints = 0;
 
-        let data: GeoJSON.FeatureCollection = {
-            type: 'FeatureCollection',
-            features: []
-        };
+		let data: GeoJSON.FeatureCollection = {
+			type: 'FeatureCollection',
+			features: []
+		};
 
-        simplified.forEach(([item, maxPts, points], itemFullId) => {
-            maxPoints += maxPts;
+		simplified.forEach(([item, maxPts, points], itemFullId) => {
+			maxPoints += maxPts;
 
-            let current = points.filter(
-                (point) => point.distance === undefined || point.distance >= tolerance
-            );
-            currentPoints += current.length;
+			let current = points.filter(
+				(point) => point.distance === undefined || point.distance >= tolerance
+			);
+			currentPoints += current.length;
 
-            data.features.push({
-                type: 'Feature',
-                geometry: {
-                    type: 'LineString',
-                    coordinates: current.map((point) => [
-                        point.point.getLongitude(),
-                        point.point.getLatitude()
-                    ])
-                },
-                properties: {}
-            });
-        });
+			data.features.push({
+				type: 'Feature',
+				geometry: {
+					type: 'LineString',
+					coordinates: current.map((point) => [
+						point.point.getLongitude(),
+						point.point.getLatitude()
+					])
+				},
+				properties: {}
+			});
+		});
 
-        if ($map) {
-            let source = $map.getSource('simplified');
-            if (source) {
-                source.setData(data);
-            } else {
-                $map.addSource('simplified', {
-                    type: 'geojson',
-                    data: data
-                });
-            }
-            if (!$map.getLayer('simplified')) {
-                $map.addLayer({
-                    id: 'simplified',
-                    type: 'line',
-                    source: 'simplified',
-                    paint: {
-                        'line-color': 'white',
-                        'line-width': 3
-                    }
-                });
-            } else {
-                $map.moveLayer('simplified');
-            }
-        }
-    }
+		if ($map) {
+			let source = $map.getSource('simplified');
+			if (source) {
+				source.setData(data);
+			} else {
+				$map.addSource('simplified', {
+					type: 'geojson',
+					data: data
+				});
+			}
+			if (!$map.getLayer('simplified')) {
+				$map.addLayer({
+					id: 'simplified',
+					type: 'line',
+					source: 'simplified',
+					paint: {
+						'line-color': 'white',
+						'line-width': 3
+					}
+				});
+			} else {
+				$map.moveLayer('simplified');
+			}
+		}
+	}
 
-    $: if ($fileObservers) {
-        unsubscribes.forEach((unsubscribe, fileId) => {
-            if (!$fileObservers.has(fileId)) {
-                unsubscribe();
-                unsubscribes.delete(fileId);
-            }
-        });
-        $fileObservers.forEach((fileStore, fileId) => {
-            if (!unsubscribes.has(fileId)) {
-                let unsubscribe = derived([fileStore, selection], ([fs, sel]) => [
-                    fs,
-                    sel
-                ]).subscribe(([fs, sel]) => {
-                    if (fs) {
-                        fs.file.forEachSegment((segment, trackIndex, segmentIndex) => {
-                            let segmentItem = new ListTrackSegmentItem(
-                                fileId,
-                                trackIndex,
-                                segmentIndex
-                            );
-                            if (sel.hasAnyParent(segmentItem)) {
-                                let statistics = fs.statistics.getStatisticsFor(segmentItem);
-                                simplified.set(segmentItem.getFullId(), [
-                                    segmentItem,
-                                    statistics.local.points.length,
-                                    ramerDouglasPeucker(statistics.local.points, 1)
-                                ]);
-                                update();
-                            } else if (simplified.has(segmentItem.getFullId())) {
-                                simplified.delete(segmentItem.getFullId());
-                                update();
-                            }
-                        });
-                    }
-                });
-                unsubscribes.set(fileId, unsubscribe);
-            }
-        });
-    }
+	$: if ($fileObservers) {
+		unsubscribes.forEach((unsubscribe, fileId) => {
+			if (!$fileObservers.has(fileId)) {
+				unsubscribe();
+				unsubscribes.delete(fileId);
+			}
+		});
+		$fileObservers.forEach((fileStore, fileId) => {
+			if (!unsubscribes.has(fileId)) {
+				let unsubscribe = derived([fileStore, selection], ([fs, sel]) => [fs, sel]).subscribe(
+					([fs, sel]) => {
+						if (fs) {
+							fs.file.forEachSegment((segment, trackIndex, segmentIndex) => {
+								let segmentItem = new ListTrackSegmentItem(fileId, trackIndex, segmentIndex);
+								if (sel.hasAnyParent(segmentItem)) {
+									let statistics = fs.statistics.getStatisticsFor(segmentItem);
+									simplified.set(segmentItem.getFullId(), [
+										segmentItem,
+										statistics.local.points.length,
+										ramerDouglasPeucker(statistics.local.points, 1)
+									]);
+									update();
+								} else if (simplified.has(segmentItem.getFullId())) {
+									simplified.delete(segmentItem.getFullId());
+									update();
+								}
+							});
+						}
+					}
+				);
+				unsubscribes.set(fileId, unsubscribe);
+			}
+		});
+	}
 
-    $: if (tolerance) {
-        update();
-    }
+	$: if (tolerance) {
+		update();
+	}
 
-    onDestroy(() => {
-        if ($map) {
-            if ($map.getLayer('simplified')) {
-                $map.removeLayer('simplified');
-            }
-            if ($map.getSource('simplified')) {
-                $map.removeSource('simplified');
-            }
-        }
-        unsubscribes.forEach((unsubscribe) => unsubscribe());
-        simplified.clear();
-    });
+	onDestroy(() => {
+		if ($map) {
+			if ($map.getLayer('simplified')) {
+				$map.removeLayer('simplified');
+			}
+			if ($map.getSource('simplified')) {
+				$map.removeSource('simplified');
+			}
+		}
+		unsubscribes.forEach((unsubscribe) => unsubscribe());
+		simplified.clear();
+	});
 
-    function reduce() {
-        let itemsAndPoints = new Map<ListItem, TrackPoint[]>();
-        simplified.forEach(([item, maxPts, points], itemFullId) => {
-            itemsAndPoints.set(
-                item,
-                points
-                    .filter((point) => point.distance === undefined || point.distance >= tolerance)
-                    .map((point) => point.point)
-            );
-        });
-        dbUtils.reduce(itemsAndPoints);
-    }
+	function reduce() {
+		let itemsAndPoints = new Map<ListItem, TrackPoint[]>();
+		simplified.forEach(([item, maxPts, points], itemFullId) => {
+			itemsAndPoints.set(
+				item,
+				points
+					.filter((point) => point.distance === undefined || point.distance >= tolerance)
+					.map((point) => point.point)
+			);
+		});
+		dbUtils.reduce(itemsAndPoints);
+	}
 </script>
 
 <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>
-    <Label class="flex flex-row justify-between">
-        <span>{$_('toolbar.reduce.tolerance')}</span>
-        <WithUnits value={tolerance / 1000} type="distance" decimals={3} class="font-normal" />
-    </Label>
-    <Label class="flex flex-row justify-between">
-        <span>{$_('toolbar.reduce.number_of_points')}</span>
-        <span class="font-normal">{currentPoints}/{maxPoints}</span>
-    </Label>
-    <Button variant="outline" disabled={!validSelection} on:click={reduce}>
-        <Filter size="16" class="mr-1" />
-        {$_('toolbar.reduce.button')}
-    </Button>
+	<div class="p-2">
+		<Slider bind:value={sliderValue} min={0} max={100} step={1} />
+	</div>
+	<Label class="flex flex-row justify-between">
+		<span>{$_('toolbar.reduce.tolerance')}</span>
+		<WithUnits value={tolerance / 1000} type="distance" decimals={3} class="font-normal" />
+	</Label>
+	<Label class="flex flex-row justify-between">
+		<span>{$_('toolbar.reduce.number_of_points')}</span>
+		<span class="font-normal">{currentPoints}/{maxPoints}</span>
+	</Label>
+	<Button variant="outline" disabled={!validSelection} on:click={reduce}>
+		<Filter size="16" class="mr-1" />
+		{$_('toolbar.reduce.button')}
+	</Button>
 
-    <Help link="./help/toolbar/minify">
-        {#if validSelection}
-            {$_('toolbar.reduce.help')}
-        {:else}
-            {$_('toolbar.reduce.help_no_selection')}
-        {/if}
-    </Help>
+	<Help link={getURLForLanguage($locale, '/help/toolbar/minify')}>
+		{#if validSelection}
+			{$_('toolbar.reduce.help')}
+		{:else}
+			{$_('toolbar.reduce.help_no_selection')}
+		{/if}
+	</Help>
 </div>
diff --git a/website/src/lib/components/toolbar/tools/Time.svelte b/website/src/lib/components/toolbar/tools/Time.svelte
index bfea92fe..31ef6ed2 100644
--- a/website/src/lib/components/toolbar/tools/Time.svelte
+++ b/website/src/lib/components/toolbar/tools/Time.svelte
@@ -1,403 +1,393 @@
 <script lang="ts">
-    import DatePicker from '$lib/components/ui/date-picker/DatePicker.svelte';
-    import { Input } from '$lib/components/ui/input';
-    import { Label } from '$lib/components/ui/label/index.js';
-    import { Button } from '$lib/components/ui/button';
-    import { Checkbox } from '$lib/components/ui/checkbox';
-    import TimePicker from '$lib/components/ui/time-picker/TimePicker.svelte';
-    import { dbUtils, settings } from '$lib/db';
-    import { gpxStatistics } from '$lib/stores';
-    import {
-        distancePerHourToSecondsPerDistance,
-        getConvertedVelocity,
-        milesToKilometers,
-        nauticalMilesToKilometers
-    } from '$lib/units';
-    import { CalendarDate, type DateValue } from '@internationalized/date';
-    import { CalendarClock, CirclePlay, CircleStop, CircleX, Timer, Zap } from 'lucide-svelte';
-    import { tick } from 'svelte';
-    import { _, locale } from 'svelte-i18n';
-    import { get } from 'svelte/store';
-    import { selection } from '$lib/components/file-list/Selection';
-    import {
-        ListFileItem,
-        ListRootItem,
-        ListTrackItem,
-        ListTrackSegmentItem
-    } from '$lib/components/file-list/FileList';
-    import Help from '$lib/components/Help.svelte';
+	import DatePicker from '$lib/components/ui/date-picker/DatePicker.svelte';
+	import { Input } from '$lib/components/ui/input';
+	import { Label } from '$lib/components/ui/label/index.js';
+	import { Button } from '$lib/components/ui/button';
+	import { Checkbox } from '$lib/components/ui/checkbox';
+	import TimePicker from '$lib/components/ui/time-picker/TimePicker.svelte';
+	import { dbUtils, settings } from '$lib/db';
+	import { gpxStatistics } from '$lib/stores';
+	import {
+		distancePerHourToSecondsPerDistance,
+		getConvertedVelocity,
+		milesToKilometers,
+		nauticalMilesToKilometers
+	} from '$lib/units';
+	import { CalendarDate, type DateValue } from '@internationalized/date';
+	import { CalendarClock, CirclePlay, CircleStop, CircleX, Timer, Zap } from 'lucide-svelte';
+	import { tick } from 'svelte';
+	import { _, locale } from 'svelte-i18n';
+	import { get } from 'svelte/store';
+	import { selection } from '$lib/components/file-list/Selection';
+	import {
+		ListFileItem,
+		ListRootItem,
+		ListTrackItem,
+		ListTrackSegmentItem
+	} from '$lib/components/file-list/FileList';
+	import Help from '$lib/components/Help.svelte';
+	import { getURLForLanguage } from '$lib/utils';
 
-    let startDate: DateValue | undefined = undefined;
-    let startTime: string | undefined = undefined;
-    let endDate: DateValue | undefined = undefined;
-    let endTime: string | undefined = undefined;
-    let movingTime: number | undefined = undefined;
-    let speed: number | undefined = undefined;
-    let artificial = false;
+	let startDate: DateValue | undefined = undefined;
+	let startTime: string | undefined = undefined;
+	let endDate: DateValue | undefined = undefined;
+	let endTime: string | undefined = undefined;
+	let movingTime: number | undefined = undefined;
+	let speed: number | undefined = undefined;
+	let artificial = false;
 
-    function toCalendarDate(date: Date): CalendarDate {
-        return new CalendarDate(date.getFullYear(), date.getMonth() + 1, date.getDate());
-    }
+	function toCalendarDate(date: Date): CalendarDate {
+		return new CalendarDate(date.getFullYear(), date.getMonth() + 1, date.getDate());
+	}
 
-    function toTimeString(date: Date): string {
-        return date.toTimeString().split(' ')[0];
-    }
+	function toTimeString(date: Date): string {
+		return date.toTimeString().split(' ')[0];
+	}
 
-    const { velocityUnits, distanceUnits } = settings;
+	const { velocityUnits, distanceUnits } = settings;
 
-    function setSpeed(value: number) {
-        let speedValue = getConvertedVelocity(value);
-        if ($velocityUnits === 'speed') {
-            speedValue = parseFloat(speedValue.toFixed(2));
-        }
-        speed = speedValue;
-    }
+	function setSpeed(value: number) {
+		let speedValue = getConvertedVelocity(value);
+		if ($velocityUnits === 'speed') {
+			speedValue = parseFloat(speedValue.toFixed(2));
+		}
+		speed = speedValue;
+	}
 
-    function setGPXData() {
-        if ($gpxStatistics.global.time.start) {
-            startDate = toCalendarDate($gpxStatistics.global.time.start);
-            startTime = toTimeString($gpxStatistics.global.time.start);
-        } else {
-            startDate = undefined;
-            startTime = undefined;
-        }
-        if ($gpxStatistics.global.time.end) {
-            endDate = toCalendarDate($gpxStatistics.global.time.end);
-            endTime = toTimeString($gpxStatistics.global.time.end);
-        } else {
-            endDate = undefined;
-            endTime = undefined;
-        }
-        if ($gpxStatistics.global.time.moving) {
-            movingTime = $gpxStatistics.global.time.moving;
-        } else {
-            movingTime = undefined;
-        }
-        if ($gpxStatistics.global.speed.moving) {
-            setSpeed($gpxStatistics.global.speed.moving);
-        } else {
-            speed = undefined;
-        }
-    }
+	function setGPXData() {
+		if ($gpxStatistics.global.time.start) {
+			startDate = toCalendarDate($gpxStatistics.global.time.start);
+			startTime = toTimeString($gpxStatistics.global.time.start);
+		} else {
+			startDate = undefined;
+			startTime = undefined;
+		}
+		if ($gpxStatistics.global.time.end) {
+			endDate = toCalendarDate($gpxStatistics.global.time.end);
+			endTime = toTimeString($gpxStatistics.global.time.end);
+		} else {
+			endDate = undefined;
+			endTime = undefined;
+		}
+		if ($gpxStatistics.global.time.moving) {
+			movingTime = $gpxStatistics.global.time.moving;
+		} else {
+			movingTime = undefined;
+		}
+		if ($gpxStatistics.global.speed.moving) {
+			setSpeed($gpxStatistics.global.speed.moving);
+		} else {
+			speed = undefined;
+		}
+	}
 
-    $: if ($gpxStatistics && $velocityUnits && $distanceUnits) {
-        setGPXData();
-    }
+	$: if ($gpxStatistics && $velocityUnits && $distanceUnits) {
+		setGPXData();
+	}
 
-    function getDate(date: DateValue, time: string): Date {
-        if (date === undefined) {
-            return new Date();
-        }
-        let [hours, minutes, seconds] = time.split(':').map((x) => parseInt(x));
-        if (seconds === undefined) {
-            seconds = 0;
-        }
-        return new Date(date.year, date.month - 1, date.day, hours, minutes, seconds);
-    }
+	function getDate(date: DateValue, time: string): Date {
+		if (date === undefined) {
+			return new Date();
+		}
+		let [hours, minutes, seconds] = time.split(':').map((x) => parseInt(x));
+		if (seconds === undefined) {
+			seconds = 0;
+		}
+		return new Date(date.year, date.month - 1, date.day, hours, minutes, seconds);
+	}
 
-    function updateEnd() {
-        if (startDate && movingTime !== undefined) {
-            if (startTime === undefined) {
-                startTime = '00:00:00';
-            }
-            let start = getDate(startDate, startTime);
-            let ratio =
-                $gpxStatistics.global.time.moving > 0
-                    ? $gpxStatistics.global.time.total / $gpxStatistics.global.time.moving
-                    : 1;
-            let end = new Date(start.getTime() + ratio * movingTime * 1000);
-            endDate = toCalendarDate(end);
-            endTime = toTimeString(end);
-        }
-    }
+	function updateEnd() {
+		if (startDate && movingTime !== undefined) {
+			if (startTime === undefined) {
+				startTime = '00:00:00';
+			}
+			let start = getDate(startDate, startTime);
+			let ratio =
+				$gpxStatistics.global.time.moving > 0
+					? $gpxStatistics.global.time.total / $gpxStatistics.global.time.moving
+					: 1;
+			let end = new Date(start.getTime() + ratio * movingTime * 1000);
+			endDate = toCalendarDate(end);
+			endTime = toTimeString(end);
+		}
+	}
 
-    function updateStart() {
-        if (endDate && movingTime !== undefined) {
-            if (endTime === undefined) {
-                endTime = '00:00:00';
-            }
-            let end = getDate(endDate, endTime);
-            let ratio =
-                $gpxStatistics.global.time.moving > 0
-                    ? $gpxStatistics.global.time.total / $gpxStatistics.global.time.moving
-                    : 1;
-            let start = new Date(end.getTime() - ratio * movingTime * 1000);
-            startDate = toCalendarDate(start);
-            startTime = toTimeString(start);
-        }
-    }
+	function updateStart() {
+		if (endDate && movingTime !== undefined) {
+			if (endTime === undefined) {
+				endTime = '00:00:00';
+			}
+			let end = getDate(endDate, endTime);
+			let ratio =
+				$gpxStatistics.global.time.moving > 0
+					? $gpxStatistics.global.time.total / $gpxStatistics.global.time.moving
+					: 1;
+			let start = new Date(end.getTime() - ratio * movingTime * 1000);
+			startDate = toCalendarDate(start);
+			startTime = toTimeString(start);
+		}
+	}
 
-    function getSpeed() {
-        if (speed === undefined) {
-            return undefined;
-        }
+	function getSpeed() {
+		if (speed === undefined) {
+			return undefined;
+		}
 
-        let speedValue = speed;
-        if ($velocityUnits === 'pace') {
-            speedValue = distancePerHourToSecondsPerDistance(speed);
-        }
-        if ($distanceUnits === 'imperial') {
-            speedValue = milesToKilometers(speedValue);
-        } else if ($distanceUnits === 'nautical') {
-            speedValue = nauticalMilesToKilometers(speedValue);
-        }
-        return speedValue;
-    }
+		let speedValue = speed;
+		if ($velocityUnits === 'pace') {
+			speedValue = distancePerHourToSecondsPerDistance(speed);
+		}
+		if ($distanceUnits === 'imperial') {
+			speedValue = milesToKilometers(speedValue);
+		} else if ($distanceUnits === 'nautical') {
+			speedValue = nauticalMilesToKilometers(speedValue);
+		}
+		return speedValue;
+	}
 
-    function updateDataFromSpeed() {
-        let speedValue = getSpeed();
-        if (speedValue === undefined) {
-            return;
-        }
+	function updateDataFromSpeed() {
+		let speedValue = getSpeed();
+		if (speedValue === undefined) {
+			return;
+		}
 
-        let distance =
-            $gpxStatistics.global.distance.moving > 0
-                ? $gpxStatistics.global.distance.moving
-                : $gpxStatistics.global.distance.total;
-        movingTime = (distance / speedValue) * 3600;
+		let distance =
+			$gpxStatistics.global.distance.moving > 0
+				? $gpxStatistics.global.distance.moving
+				: $gpxStatistics.global.distance.total;
+		movingTime = (distance / speedValue) * 3600;
 
-        updateEnd();
-    }
+		updateEnd();
+	}
 
-    function updateDataFromTotalTime() {
-        if (movingTime === undefined) {
-            return;
-        }
-        let distance =
-            $gpxStatistics.global.distance.moving > 0
-                ? $gpxStatistics.global.distance.moving
-                : $gpxStatistics.global.distance.total;
-        setSpeed(distance / (movingTime / 3600));
-        updateEnd();
-    }
+	function updateDataFromTotalTime() {
+		if (movingTime === undefined) {
+			return;
+		}
+		let distance =
+			$gpxStatistics.global.distance.moving > 0
+				? $gpxStatistics.global.distance.moving
+				: $gpxStatistics.global.distance.total;
+		setSpeed(distance / (movingTime / 3600));
+		updateEnd();
+	}
 
-    $: canUpdate =
-        $selection.size === 1 && $selection.hasAnyChildren(new ListRootItem(), true, ['waypoints']);
+	$: canUpdate =
+		$selection.size === 1 && $selection.hasAnyChildren(new ListRootItem(), true, ['waypoints']);
 </script>
 
 <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 grow">
-                <Label for="speed" class="flex flex-row">
-                    <Zap size="16" class="mr-1" />
-                    {#if $velocityUnits === 'speed'}
-                        {$_('quantities.speed')}
-                    {:else}
-                        {$_('quantities.pace')}
-                    {/if}
-                </Label>
-                <div class="flex flex-row gap-1 items-center">
-                    {#if $velocityUnits === 'speed'}
-                        <Input
-                            id="speed"
-                            type="number"
-                            step={0.01}
-                            min={0.01}
-                            disabled={!canUpdate}
-                            bind:value={speed}
-                            on:change={updateDataFromSpeed}
-                        />
-                        <span class="text-sm shrink-0">
-                            {#if $distanceUnits === 'imperial'}
-                                {$_('units.miles_per_hour')}
-                            {:else if $distanceUnits === 'metric'}
-                                {$_('units.kilometers_per_hour')}
-                            {:else if $distanceUnits === 'nautical'}
-                                {$_('units.knots')}
-                            {/if}
-                        </span>
-                    {:else}
-                        <TimePicker
-                            bind:value={speed}
-                            showHours={false}
-                            disabled={!canUpdate}
-                            onChange={updateDataFromSpeed}
-                        />
-                        <span class="text-sm shrink-0">
-                            {#if $distanceUnits === 'imperial'}
-                                {$_('units.minutes_per_mile')}
-                            {:else if $distanceUnits === 'metric'}
-                                {$_('units.minutes_per_kilometer')}
-                            {:else if $distanceUnits === 'nautical'}
-                                {$_('units.minutes_per_nautical_mile')}
-                            {/if}
-                        </span>
-                    {/if}
-                </div>
-            </div>
-            <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')}
-                </Label>
-                <TimePicker
-                    bind:value={movingTime}
-                    disabled={!canUpdate}
-                    onChange={updateDataFromTotalTime}
-                />
-            </div>
-        </div>
-        <Label class="flex flex-row">
-            <CirclePlay size="16" class="mr-1" />
-            {$_('toolbar.time.start')}
-        </Label>
-        <div class="flex flex-row gap-2">
-            <DatePicker
-                bind:value={startDate}
-                disabled={!canUpdate}
-                locale={get(locale) ?? 'en'}
-                placeholder={$_('toolbar.time.pick_date')}
-                class="w-fit grow"
-                onValueChange={async () => {
-                    await tick();
-                    updateEnd();
-                }}
-            />
-            <input
-                type="time"
-                step={1}
-                disabled={!canUpdate}
-                bind:value={startTime}
-                class="w-fit"
-                on:change={updateEnd}
-            />
-        </div>
-        <Label class="flex flex-row">
-            <CircleStop size="16" class="mr-1" />
-            {$_('toolbar.time.end')}
-        </Label>
-        <div class="flex flex-row gap-2">
-            <DatePicker
-                bind:value={endDate}
-                disabled={!canUpdate}
-                locale={get(locale) ?? 'en'}
-                placeholder={$_('toolbar.time.pick_date')}
-                class="w-fit grow"
-                onValueChange={async () => {
-                    await tick();
-                    updateStart();
-                }}
-            />
-            <input
-                type="time"
-                step={1}
-                disabled={!canUpdate}
-                bind:value={endTime}
-                class="w-fit"
-                on:change={updateStart}
-            />
-        </div>
-        {#if $gpxStatistics.global.time.moving === 0 || $gpxStatistics.global.time.moving === undefined}
-            <div class="mt-0.5 flex flex-row gap-1 items-center">
-                <Checkbox id="artificial-time" bind:checked={artificial} disabled={!canUpdate} />
-                <Label for="artificial-time">
-                    {$_('toolbar.time.artificial')}
-                </Label>
-            </div>
-        {/if}
-    </fieldset>
-    <div class="flex flex-row gap-2 items-center">
-        <Button
-            variant="outline"
-            disabled={!canUpdate}
-            class="grow whitespace-normal h-fit"
-            on:click={() => {
-                let effectiveSpeed = getSpeed();
-                if (
-                    startDate === undefined ||
-                    startTime === undefined ||
-                    effectiveSpeed === undefined
-                ) {
-                    return;
-                }
+	<fieldset class="flex flex-col gap-2">
+		<div class="flex flex-row gap-2 justify-center">
+			<div class="flex flex-col gap-2 grow">
+				<Label for="speed" class="flex flex-row">
+					<Zap size="16" class="mr-1" />
+					{#if $velocityUnits === 'speed'}
+						{$_('quantities.speed')}
+					{:else}
+						{$_('quantities.pace')}
+					{/if}
+				</Label>
+				<div class="flex flex-row gap-1 items-center">
+					{#if $velocityUnits === 'speed'}
+						<Input
+							id="speed"
+							type="number"
+							step={0.01}
+							min={0.01}
+							disabled={!canUpdate}
+							bind:value={speed}
+							on:change={updateDataFromSpeed}
+						/>
+						<span class="text-sm shrink-0">
+							{#if $distanceUnits === 'imperial'}
+								{$_('units.miles_per_hour')}
+							{:else if $distanceUnits === 'metric'}
+								{$_('units.kilometers_per_hour')}
+							{:else if $distanceUnits === 'nautical'}
+								{$_('units.knots')}
+							{/if}
+						</span>
+					{:else}
+						<TimePicker
+							bind:value={speed}
+							showHours={false}
+							disabled={!canUpdate}
+							onChange={updateDataFromSpeed}
+						/>
+						<span class="text-sm shrink-0">
+							{#if $distanceUnits === 'imperial'}
+								{$_('units.minutes_per_mile')}
+							{:else if $distanceUnits === 'metric'}
+								{$_('units.minutes_per_kilometer')}
+							{:else if $distanceUnits === 'nautical'}
+								{$_('units.minutes_per_nautical_mile')}
+							{/if}
+						</span>
+					{/if}
+				</div>
+			</div>
+			<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')}
+				</Label>
+				<TimePicker
+					bind:value={movingTime}
+					disabled={!canUpdate}
+					onChange={updateDataFromTotalTime}
+				/>
+			</div>
+		</div>
+		<Label class="flex flex-row">
+			<CirclePlay size="16" class="mr-1" />
+			{$_('toolbar.time.start')}
+		</Label>
+		<div class="flex flex-row gap-2">
+			<DatePicker
+				bind:value={startDate}
+				disabled={!canUpdate}
+				locale={get(locale) ?? 'en'}
+				placeholder={$_('toolbar.time.pick_date')}
+				class="w-fit grow"
+				onValueChange={async () => {
+					await tick();
+					updateEnd();
+				}}
+			/>
+			<input
+				type="time"
+				step={1}
+				disabled={!canUpdate}
+				bind:value={startTime}
+				class="w-fit"
+				on:change={updateEnd}
+			/>
+		</div>
+		<Label class="flex flex-row">
+			<CircleStop size="16" class="mr-1" />
+			{$_('toolbar.time.end')}
+		</Label>
+		<div class="flex flex-row gap-2">
+			<DatePicker
+				bind:value={endDate}
+				disabled={!canUpdate}
+				locale={get(locale) ?? 'en'}
+				placeholder={$_('toolbar.time.pick_date')}
+				class="w-fit grow"
+				onValueChange={async () => {
+					await tick();
+					updateStart();
+				}}
+			/>
+			<input
+				type="time"
+				step={1}
+				disabled={!canUpdate}
+				bind:value={endTime}
+				class="w-fit"
+				on:change={updateStart}
+			/>
+		</div>
+		{#if $gpxStatistics.global.time.moving === 0 || $gpxStatistics.global.time.moving === undefined}
+			<div class="mt-0.5 flex flex-row gap-1 items-center">
+				<Checkbox id="artificial-time" bind:checked={artificial} disabled={!canUpdate} />
+				<Label for="artificial-time">
+					{$_('toolbar.time.artificial')}
+				</Label>
+			</div>
+		{/if}
+	</fieldset>
+	<div class="flex flex-row gap-2 items-center">
+		<Button
+			variant="outline"
+			disabled={!canUpdate}
+			class="grow whitespace-normal h-fit"
+			on:click={() => {
+				let effectiveSpeed = getSpeed();
+				if (startDate === undefined || startTime === undefined || effectiveSpeed === undefined) {
+					return;
+				}
 
-                if (Math.abs(effectiveSpeed - $gpxStatistics.global.speed.moving) < 0.01) {
-                    effectiveSpeed = $gpxStatistics.global.speed.moving;
-                }
+				if (Math.abs(effectiveSpeed - $gpxStatistics.global.speed.moving) < 0.01) {
+					effectiveSpeed = $gpxStatistics.global.speed.moving;
+				}
 
-                let ratio = 1;
-                if (
-                    $gpxStatistics.global.speed.moving > 0 &&
-                    $gpxStatistics.global.speed.moving !== effectiveSpeed
-                ) {
-                    ratio = $gpxStatistics.global.speed.moving / effectiveSpeed;
-                }
+				let ratio = 1;
+				if (
+					$gpxStatistics.global.speed.moving > 0 &&
+					$gpxStatistics.global.speed.moving !== effectiveSpeed
+				) {
+					ratio = $gpxStatistics.global.speed.moving / effectiveSpeed;
+				}
 
-                let item = $selection.getSelected()[0];
-                let fileId = item.getFileId();
-                dbUtils.applyToFile(fileId, (file) => {
-                    if (item instanceof ListFileItem) {
-                        if (artificial) {
-                            file.createArtificialTimestamps(
-                                getDate(startDate, startTime),
-                                movingTime
-                            );
-                        } else {
-                            file.changeTimestamps(
-                                getDate(startDate, startTime),
-                                effectiveSpeed,
-                                ratio
-                            );
-                        }
-                    } else if (item instanceof ListTrackItem) {
-                        if (artificial) {
-                            file.createArtificialTimestamps(
-                                getDate(startDate, startTime),
-                                movingTime,
-                                item.getTrackIndex()
-                            );
-                        } else {
-                            file.changeTimestamps(
-                                getDate(startDate, startTime),
-                                effectiveSpeed,
-                                ratio,
-                                item.getTrackIndex()
-                            );
-                        }
-                    } else if (item instanceof ListTrackSegmentItem) {
-                        if (artificial) {
-                            file.createArtificialTimestamps(
-                                getDate(startDate, startTime),
-                                movingTime,
-                                item.getTrackIndex(),
-                                item.getSegmentIndex()
-                            );
-                        } else {
-                            file.changeTimestamps(
-                                getDate(startDate, startTime),
-                                effectiveSpeed,
-                                ratio,
-                                item.getTrackIndex(),
-                                item.getSegmentIndex()
-                            );
-                        }
-                    }
-                });
-            }}
-        >
-            <CalendarClock size="16" class="mr-1 shrink-0" />
-            {$_('toolbar.time.update')}
-        </Button>
-        <Button variant="outline" on:click={setGPXData}>
-            <CircleX size="16" />
-        </Button>
-    </div>
-    <Help link="./help/toolbar/time">
-        {#if canUpdate}
-            {$_('toolbar.time.help')}
-        {:else}
-            {$_('toolbar.time.help_invalid_selection')}
-        {/if}
-    </Help>
+				let item = $selection.getSelected()[0];
+				let fileId = item.getFileId();
+				dbUtils.applyToFile(fileId, (file) => {
+					if (item instanceof ListFileItem) {
+						if (artificial) {
+							file.createArtificialTimestamps(getDate(startDate, startTime), movingTime);
+						} else {
+							file.changeTimestamps(getDate(startDate, startTime), effectiveSpeed, ratio);
+						}
+					} else if (item instanceof ListTrackItem) {
+						if (artificial) {
+							file.createArtificialTimestamps(
+								getDate(startDate, startTime),
+								movingTime,
+								item.getTrackIndex()
+							);
+						} else {
+							file.changeTimestamps(
+								getDate(startDate, startTime),
+								effectiveSpeed,
+								ratio,
+								item.getTrackIndex()
+							);
+						}
+					} else if (item instanceof ListTrackSegmentItem) {
+						if (artificial) {
+							file.createArtificialTimestamps(
+								getDate(startDate, startTime),
+								movingTime,
+								item.getTrackIndex(),
+								item.getSegmentIndex()
+							);
+						} else {
+							file.changeTimestamps(
+								getDate(startDate, startTime),
+								effectiveSpeed,
+								ratio,
+								item.getTrackIndex(),
+								item.getSegmentIndex()
+							);
+						}
+					}
+				});
+			}}
+		>
+			<CalendarClock size="16" class="mr-1 shrink-0" />
+			{$_('toolbar.time.update')}
+		</Button>
+		<Button variant="outline" on:click={setGPXData}>
+			<CircleX size="16" />
+		</Button>
+	</div>
+	<Help link={getURLForLanguage($locale, '/help/toolbar/time')}>
+		{#if canUpdate}
+			{$_('toolbar.time.help')}
+		{:else}
+			{$_('toolbar.time.help_invalid_selection')}
+		{/if}
+	</Help>
 </div>
 
 <style lang="postcss">
-    div :global(input[type='time']) {
-        /*
+	div :global(input[type='time']) {
+		/*
         Style copy-pasted from shadcn-svelte Input.
         Needed to use native time input to avoid a bug with 2-level bind:value.
         */
-        @apply flex h-10 rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50;
-    }
+		@apply flex h-10 rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50;
+	}
 </style>
diff --git a/website/src/lib/components/toolbar/tools/Waypoint.svelte b/website/src/lib/components/toolbar/tools/Waypoint.svelte
index 5dd62609..f9629c95 100644
--- a/website/src/lib/components/toolbar/tools/Waypoint.svelte
+++ b/website/src/lib/components/toolbar/tools/Waypoint.svelte
@@ -1,272 +1,272 @@
 <script lang="ts" context="module">
-    import { writable } from 'svelte/store';
+	import { writable } from 'svelte/store';
 
-    export const selectedWaypoint = writable<[Waypoint, string] | undefined>(undefined);
+	export const selectedWaypoint = writable<[Waypoint, string] | undefined>(undefined);
 </script>
 
 <script lang="ts">
-    import { Input } from '$lib/components/ui/input';
-    import { Textarea } from '$lib/components/ui/textarea';
-    import { Label } from '$lib/components/ui/label/index.js';
-    import { Button } from '$lib/components/ui/button';
-    import * as Select from '$lib/components/ui/select';
-    import { selection } from '$lib/components/file-list/Selection';
-    import { Waypoint } from 'gpx';
-    import { _, locale } from 'svelte-i18n';
-    import { ListWaypointItem } from '$lib/components/file-list/FileList';
-    import { dbUtils, fileObservers, getFile, settings, type GPXFileWithStatistics } from '$lib/db';
-    import { get } from 'svelte/store';
-    import Help from '$lib/components/Help.svelte';
-    import { onDestroy, onMount } from 'svelte';
-    import { map } from '$lib/stores';
-    import { resetCursor, setCrosshairCursor } from '$lib/utils';
-    import { CirclePlus, CircleX, Save } from 'lucide-svelte';
-    import { getSymbolKey, symbols } from '$lib/assets/symbols';
+	import { Input } from '$lib/components/ui/input';
+	import { Textarea } from '$lib/components/ui/textarea';
+	import { Label } from '$lib/components/ui/label/index.js';
+	import { Button } from '$lib/components/ui/button';
+	import * as Select from '$lib/components/ui/select';
+	import { selection } from '$lib/components/file-list/Selection';
+	import { Waypoint } from 'gpx';
+	import { _, locale } from 'svelte-i18n';
+	import { ListWaypointItem } from '$lib/components/file-list/FileList';
+	import { dbUtils, fileObservers, getFile, settings, type GPXFileWithStatistics } from '$lib/db';
+	import { get } from 'svelte/store';
+	import Help from '$lib/components/Help.svelte';
+	import { onDestroy, onMount } from 'svelte';
+	import { map } from '$lib/stores';
+	import { getURLForLanguage, resetCursor, setCrosshairCursor } from '$lib/utils';
+	import { CirclePlus, CircleX, Save } from 'lucide-svelte';
+	import { getSymbolKey, symbols } from '$lib/assets/symbols';
 
-    let name: string;
-    let description: string;
-    let link: string;
-    let longitude: number;
-    let latitude: number;
+	let name: string;
+	let description: string;
+	let link: string;
+	let longitude: number;
+	let latitude: number;
 
-    let selectedSymbol = {
-        value: '',
-        label: ''
-    };
+	let selectedSymbol = {
+		value: '',
+		label: ''
+	};
 
-    const { verticalFileView } = settings;
+	const { verticalFileView } = settings;
 
-    $: canCreate = $selection.size > 0;
+	$: canCreate = $selection.size > 0;
 
-    $: if ($verticalFileView && $selection) {
-        selectedWaypoint.update(() => {
-            if ($selection.size === 1) {
-                let item = $selection.getSelected()[0];
-                if (item instanceof ListWaypointItem) {
-                    let file = getFile(item.getFileId());
-                    let waypoint = file?.wpt[item.getWaypointIndex()];
-                    if (waypoint) {
-                        return [waypoint, item.getFileId()];
-                    }
-                }
-            }
-            return undefined;
-        });
-    }
+	$: if ($verticalFileView && $selection) {
+		selectedWaypoint.update(() => {
+			if ($selection.size === 1) {
+				let item = $selection.getSelected()[0];
+				if (item instanceof ListWaypointItem) {
+					let file = getFile(item.getFileId());
+					let waypoint = file?.wpt[item.getWaypointIndex()];
+					if (waypoint) {
+						return [waypoint, item.getFileId()];
+					}
+				}
+			}
+			return undefined;
+		});
+	}
 
-    let unsubscribe: (() => void) | undefined = undefined;
-    function updateWaypointData(fileStore: GPXFileWithStatistics | undefined) {
-        if ($selectedWaypoint) {
-            if (fileStore) {
-                if ($selectedWaypoint[0]._data.index < fileStore.file.wpt.length) {
-                    $selectedWaypoint[0] = fileStore.file.wpt[$selectedWaypoint[0]._data.index];
-                    name = $selectedWaypoint[0].name ?? '';
-                    description = $selectedWaypoint[0].desc ?? '';
-                    if (
-                        $selectedWaypoint[0].cmt !== undefined &&
-                        $selectedWaypoint[0].cmt !== $selectedWaypoint[0].desc
-                    ) {
-                        description += '\n\n' + $selectedWaypoint[0].cmt;
-                    }
-                    link = $selectedWaypoint[0].link?.attributes?.href ?? '';
-                    let symbol = $selectedWaypoint[0].sym ?? '';
-                    let symbolKey = getSymbolKey(symbol);
-                    if (symbolKey) {
-                        selectedSymbol = {
-                            value: symbol,
-                            label: $_(`gpx.symbol.${symbolKey}`)
-                        };
-                    } else {
-                        selectedSymbol = {
-                            value: symbol,
-                            label: ''
-                        };
-                    }
-                    longitude = parseFloat($selectedWaypoint[0].getLongitude().toFixed(6));
-                    latitude = parseFloat($selectedWaypoint[0].getLatitude().toFixed(6));
-                } else {
-                    selectedWaypoint.set(undefined);
-                }
-            } else {
-                selectedWaypoint.set(undefined);
-            }
-        }
-    }
+	let unsubscribe: (() => void) | undefined = undefined;
+	function updateWaypointData(fileStore: GPXFileWithStatistics | undefined) {
+		if ($selectedWaypoint) {
+			if (fileStore) {
+				if ($selectedWaypoint[0]._data.index < fileStore.file.wpt.length) {
+					$selectedWaypoint[0] = fileStore.file.wpt[$selectedWaypoint[0]._data.index];
+					name = $selectedWaypoint[0].name ?? '';
+					description = $selectedWaypoint[0].desc ?? '';
+					if (
+						$selectedWaypoint[0].cmt !== undefined &&
+						$selectedWaypoint[0].cmt !== $selectedWaypoint[0].desc
+					) {
+						description += '\n\n' + $selectedWaypoint[0].cmt;
+					}
+					link = $selectedWaypoint[0].link?.attributes?.href ?? '';
+					let symbol = $selectedWaypoint[0].sym ?? '';
+					let symbolKey = getSymbolKey(symbol);
+					if (symbolKey) {
+						selectedSymbol = {
+							value: symbol,
+							label: $_(`gpx.symbol.${symbolKey}`)
+						};
+					} else {
+						selectedSymbol = {
+							value: symbol,
+							label: ''
+						};
+					}
+					longitude = parseFloat($selectedWaypoint[0].getLongitude().toFixed(6));
+					latitude = parseFloat($selectedWaypoint[0].getLatitude().toFixed(6));
+				} else {
+					selectedWaypoint.set(undefined);
+				}
+			} else {
+				selectedWaypoint.set(undefined);
+			}
+		}
+	}
 
-    function resetWaypointData() {
-        name = '';
-        description = '';
-        link = '';
-        selectedSymbol = {
-            value: '',
-            label: ''
-        };
-        longitude = 0;
-        latitude = 0;
-    }
+	function resetWaypointData() {
+		name = '';
+		description = '';
+		link = '';
+		selectedSymbol = {
+			value: '',
+			label: ''
+		};
+		longitude = 0;
+		latitude = 0;
+	}
 
-    $: {
-        if (unsubscribe) {
-            unsubscribe();
-            unsubscribe = undefined;
-        }
-        if ($selectedWaypoint) {
-            let fileStore = get(fileObservers).get($selectedWaypoint[1]);
-            if (fileStore) {
-                unsubscribe = fileStore.subscribe(updateWaypointData);
-            }
-        } else {
-            resetWaypointData();
-        }
-    }
+	$: {
+		if (unsubscribe) {
+			unsubscribe();
+			unsubscribe = undefined;
+		}
+		if ($selectedWaypoint) {
+			let fileStore = get(fileObservers).get($selectedWaypoint[1]);
+			if (fileStore) {
+				unsubscribe = fileStore.subscribe(updateWaypointData);
+			}
+		} else {
+			resetWaypointData();
+		}
+	}
 
-    function createOrUpdateWaypoint() {
-        if (typeof latitude === 'string') {
-            latitude = parseFloat(latitude);
-        }
-        if (typeof longitude === 'string') {
-            longitude = parseFloat(longitude);
-        }
-        latitude = parseFloat(latitude.toFixed(6));
-        longitude = parseFloat(longitude.toFixed(6));
+	function createOrUpdateWaypoint() {
+		if (typeof latitude === 'string') {
+			latitude = parseFloat(latitude);
+		}
+		if (typeof longitude === 'string') {
+			longitude = parseFloat(longitude);
+		}
+		latitude = parseFloat(latitude.toFixed(6));
+		longitude = parseFloat(longitude.toFixed(6));
 
-        dbUtils.addOrUpdateWaypoint(
-            {
-                attributes: {
-                    lat: latitude,
-                    lon: longitude
-                },
-                name: name.length > 0 ? name : undefined,
-                desc: description.length > 0 ? description : undefined,
-                cmt: description.length > 0 ? description : undefined,
-                link: link.length > 0 ? { attributes: { href: link } } : undefined,
-                sym: selectedSymbol.value.length > 0 ? selectedSymbol.value : undefined
-            },
-            $selectedWaypoint
-                ? new ListWaypointItem($selectedWaypoint[1], $selectedWaypoint[0]._data.index)
-                : undefined
-        );
+		dbUtils.addOrUpdateWaypoint(
+			{
+				attributes: {
+					lat: latitude,
+					lon: longitude
+				},
+				name: name.length > 0 ? name : undefined,
+				desc: description.length > 0 ? description : undefined,
+				cmt: description.length > 0 ? description : undefined,
+				link: link.length > 0 ? { attributes: { href: link } } : undefined,
+				sym: selectedSymbol.value.length > 0 ? selectedSymbol.value : undefined
+			},
+			$selectedWaypoint
+				? new ListWaypointItem($selectedWaypoint[1], $selectedWaypoint[0]._data.index)
+				: undefined
+		);
 
-        selectedWaypoint.set(undefined);
-        resetWaypointData();
-    }
+		selectedWaypoint.set(undefined);
+		resetWaypointData();
+	}
 
-    function setCoordinates(e: any) {
-        latitude = e.lngLat.lat.toFixed(6);
-        longitude = e.lngLat.lng.toFixed(6);
-    }
+	function setCoordinates(e: any) {
+		latitude = e.lngLat.lat.toFixed(6);
+		longitude = e.lngLat.lng.toFixed(6);
+	}
 
-    $: sortedSymbols = Object.entries(symbols).sort((a, b) => {
-        return $_(`gpx.symbol.${a[0]}`).localeCompare($_(`gpx.symbol.${b[0]}`), $locale ?? 'en');
-    });
+	$: sortedSymbols = Object.entries(symbols).sort((a, b) => {
+		return $_(`gpx.symbol.${a[0]}`).localeCompare($_(`gpx.symbol.${b[0]}`), $locale ?? 'en');
+	});
 
-    onMount(() => {
-        let m = get(map);
-        m?.on('click', setCoordinates);
-        setCrosshairCursor();
-    });
+	onMount(() => {
+		let m = get(map);
+		m?.on('click', setCoordinates);
+		setCrosshairCursor();
+	});
 
-    onDestroy(() => {
-        let m = get(map);
-        m?.off('click', setCoordinates);
-        resetCursor();
+	onDestroy(() => {
+		let m = get(map);
+		m?.off('click', setCoordinates);
+		resetCursor();
 
-        if (unsubscribe) {
-            unsubscribe();
-            unsubscribe = undefined;
-        }
-    });
+		if (unsubscribe) {
+			unsubscribe();
+			unsubscribe = undefined;
+		}
+	});
 </script>
 
 <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" />
-        <Label for="description">{$_('menu.metadata.description')}</Label>
-        <Textarea bind:value={description} id="description" />
-        <Label for="symbol">{$_('toolbar.waypoint.icon')}</Label>
-        <Select.Root bind:selected={selectedSymbol}>
-            <Select.Trigger id="symbol" class="w-full h-8">
-                <Select.Value />
-            </Select.Trigger>
-            <Select.Content class="max-h-60 overflow-y-scroll">
-                {#each sortedSymbols as [key, symbol]}
-                    <Select.Item value={symbol.value}>
-                        <span>
-                            {#if symbol.icon}
-                                <svelte:component
-                                    this={symbol.icon}
-                                    size="14"
-                                    class="inline-block align-sub mr-0.5"
-                                />
-                            {:else}
-                                <span class="w-4 inline-block" />
-                            {/if}
-                            {$_(`gpx.symbol.${key}`)}
-                        </span>
-                    </Select.Item>
-                {/each}
-            </Select.Content>
-        </Select.Root>
-        <Label for="link">{$_('toolbar.waypoint.link')}</Label>
-        <Input bind:value={link} id="link" class="h-8" />
-        <div class="flex flex-row gap-2">
-            <div class="grow">
-                <Label for="latitude">{$_('toolbar.waypoint.latitude')}</Label>
-                <Input
-                    bind:value={latitude}
-                    type="number"
-                    id="latitude"
-                    step={1e-6}
-                    min={-90}
-                    max={90}
-                    class="text-xs h-8 "
-                />
-            </div>
-            <div class="grow">
-                <Label for="longitude">{$_('toolbar.waypoint.longitude')}</Label>
-                <Input
-                    bind:value={longitude}
-                    type="number"
-                    id="longitude"
-                    step={1e-6}
-                    min={-180}
-                    max={180}
-                    class="text-xs h-8"
-                />
-            </div>
-        </div>
-    </fieldset>
-    <div class="flex flex-row gap-2 items-center">
-        <Button
-            variant="outline"
-            disabled={!canCreate && !$selectedWaypoint}
-            class="grow whitespace-normal h-fit"
-            on:click={createOrUpdateWaypoint}
-        >
-            {#if $selectedWaypoint}
-                <Save size="16" class="mr-1 shrink-0" />
-                {$_('menu.metadata.save')}
-            {:else}
-                <CirclePlus size="16" class="mr-1 shrink-0" />
-                {$_('toolbar.waypoint.create')}
-            {/if}
-        </Button>
-        <Button
-            variant="outline"
-            on:click={() => {
-                selectedWaypoint.set(undefined);
-                resetWaypointData();
-            }}
-        >
-            <CircleX size="16" />
-        </Button>
-    </div>
-    <Help link="./help/toolbar/poi">
-        {#if $selectedWaypoint || canCreate}
-            {$_('toolbar.waypoint.help')}
-        {:else}
-            {$_('toolbar.waypoint.help_no_selection')}
-        {/if}
-    </Help>
+	<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" />
+		<Label for="description">{$_('menu.metadata.description')}</Label>
+		<Textarea bind:value={description} id="description" />
+		<Label for="symbol">{$_('toolbar.waypoint.icon')}</Label>
+		<Select.Root bind:selected={selectedSymbol}>
+			<Select.Trigger id="symbol" class="w-full h-8">
+				<Select.Value />
+			</Select.Trigger>
+			<Select.Content class="max-h-60 overflow-y-scroll">
+				{#each sortedSymbols as [key, symbol]}
+					<Select.Item value={symbol.value}>
+						<span>
+							{#if symbol.icon}
+								<svelte:component
+									this={symbol.icon}
+									size="14"
+									class="inline-block align-sub mr-0.5"
+								/>
+							{:else}
+								<span class="w-4 inline-block" />
+							{/if}
+							{$_(`gpx.symbol.${key}`)}
+						</span>
+					</Select.Item>
+				{/each}
+			</Select.Content>
+		</Select.Root>
+		<Label for="link">{$_('toolbar.waypoint.link')}</Label>
+		<Input bind:value={link} id="link" class="h-8" />
+		<div class="flex flex-row gap-2">
+			<div class="grow">
+				<Label for="latitude">{$_('toolbar.waypoint.latitude')}</Label>
+				<Input
+					bind:value={latitude}
+					type="number"
+					id="latitude"
+					step={1e-6}
+					min={-90}
+					max={90}
+					class="text-xs h-8 "
+				/>
+			</div>
+			<div class="grow">
+				<Label for="longitude">{$_('toolbar.waypoint.longitude')}</Label>
+				<Input
+					bind:value={longitude}
+					type="number"
+					id="longitude"
+					step={1e-6}
+					min={-180}
+					max={180}
+					class="text-xs h-8"
+				/>
+			</div>
+		</div>
+	</fieldset>
+	<div class="flex flex-row gap-2 items-center">
+		<Button
+			variant="outline"
+			disabled={!canCreate && !$selectedWaypoint}
+			class="grow whitespace-normal h-fit"
+			on:click={createOrUpdateWaypoint}
+		>
+			{#if $selectedWaypoint}
+				<Save size="16" class="mr-1 shrink-0" />
+				{$_('menu.metadata.save')}
+			{:else}
+				<CirclePlus size="16" class="mr-1 shrink-0" />
+				{$_('toolbar.waypoint.create')}
+			{/if}
+		</Button>
+		<Button
+			variant="outline"
+			on:click={() => {
+				selectedWaypoint.set(undefined);
+				resetWaypointData();
+			}}
+		>
+			<CircleX size="16" />
+		</Button>
+	</div>
+	<Help link={getURLForLanguage($locale, '/help/toolbar/poi')}>
+		{#if $selectedWaypoint || canCreate}
+			{$_('toolbar.waypoint.help')}
+		{:else}
+			{$_('toolbar.waypoint.help_no_selection')}
+		{/if}
+	</Help>
 </div>
diff --git a/website/src/lib/components/toolbar/tools/routing/Routing.svelte b/website/src/lib/components/toolbar/tools/routing/Routing.svelte
index b4638dac..c254af57 100644
--- a/website/src/lib/components/toolbar/tools/routing/Routing.svelte
+++ b/website/src/lib/components/toolbar/tools/routing/Routing.svelte
@@ -25,7 +25,7 @@
 	import { dbUtils, getFile, getFileIds, settings } from '$lib/db';
 	import { brouterProfiles, routingProfileSelectItem } from './Routing';
 
-	import { _ } from 'svelte-i18n';
+	import { _, locale } from 'svelte-i18n';
 	import { RoutingControls } from './RoutingControls';
 	import mapboxgl from 'mapbox-gl';
 	import { fileObservers } from '$lib/db';
@@ -38,7 +38,7 @@
 		ListTrackSegmentItem,
 		type ListItem
 	} from '$lib/components/file-list/FileList';
-	import { flyAndScale, resetCursor, setCrosshairCursor } from '$lib/utils';
+	import { flyAndScale, getURLForLanguage, resetCursor, setCrosshairCursor } from '$lib/utils';
 	import { onDestroy, onMount } from 'svelte';
 	import { TrackPoint } from 'gpx';
 
@@ -236,7 +236,7 @@
 			</Tooltip>
 		</div>
 		<div class="w-full flex flex-row gap-2 items-end justify-between">
-			<Help link="./help/toolbar/routing">
+			<Help link={getURLForLanguage($locale, '/help/toolbar/routing')}>
 				{#if !validSelection}
 					{$_('toolbar.routing.help_no_file')}
 				{:else}
diff --git a/website/src/lib/components/toolbar/tools/scissors/Scissors.svelte b/website/src/lib/components/toolbar/tools/scissors/Scissors.svelte
index 05ff6143..ce002072 100644
--- a/website/src/lib/components/toolbar/tools/scissors/Scissors.svelte
+++ b/website/src/lib/components/toolbar/tools/scissors/Scissors.svelte
@@ -17,11 +17,12 @@
 	import { Separator } from '$lib/components/ui/separator';
 	import { gpxStatistics, map, slicedGPXStatistics, splitAs } from '$lib/stores';
 	import { get } from 'svelte/store';
-	import { _ } from 'svelte-i18n';
+	import { _, locale } from 'svelte-i18n';
 	import { onDestroy, tick } from 'svelte';
 	import { Crop } from 'lucide-svelte';
 	import { dbUtils } from '$lib/db';
 	import { SplitControls } from './SplitControls';
+	import { getURLForLanguage } from '$lib/utils';
 
 	let splitControls: SplitControls | undefined = undefined;
 	let canCrop = false;
@@ -135,7 +136,7 @@
 			</Select.Content>
 		</Select.Root>
 	</Label>
-	<Help link="./help/toolbar/scissors">
+	<Help link={getURLForLanguage($locale, '/help/toolbar/scissors')}>
 		{#if validSelection}
 			{$_('toolbar.scissors.help')}
 		{:else}
diff --git a/website/src/lib/docs/en/files-and-stats.mdx b/website/src/lib/docs/en/files-and-stats.mdx
index b29c8323..507b8778 100644
--- a/website/src/lib/docs/en/files-and-stats.mdx
+++ b/website/src/lib/docs/en/files-and-stats.mdx
@@ -40,7 +40,7 @@ By right-clicking on a file tab, you can access the same actions as in the [edit
 ### Vertical layout
 
 As mentioned in the [view options section](./menu/view), you can switch between a horizontal and a vertical layout for the file list.
-The vertical file list is useful when you have many files open, or files with multiple [tracks, segments, or points of interest](../gpx).
+The vertical file list is useful when you have many files open, or files with multiple [tracks, segments, or points of interest](./gpx).
 Indeed, this layout allows you to inspect the content of the files through collapsible sections.
 
 You can also apply [edit actions](./menu/edit) and [tools](./toolbar/) to internal file items.