New translations faq.mdx (Polish)

website/src/lib/docs/es/integration.mdx

@@ -1,5 +1,5 @@
 ---
-title: Integración
+title: Integraciones
 ---
 
 <script>

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

@@ -37,7 +37,7 @@ Cerrar los archivos seleccionados actualmente.
 
 Cerrar todos los archivos.
 
-### <Download size="16" class="inline-block" style="margin-bottom: 2px" /> Exportar...
+### <Down load cine="16" clase="inclinevueltoboStiloUCPUbotón
 
 Abrir el cuadro de diálogo de exportación para guardar en su equipo los archivos seleccionados actualmente.
 

website/src/lib/docs/es/menu/view.mdx

@@ -1,5 +1,5 @@
 ---
-title: Opciones de vista
+title: View options
 ---
 
 <script lang="ts">

website/src/lib/docs/id/faq.mdx

@@ -0,0 +1,35 @@
+---
+title: FAQ
+---
+
+<script>
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+### Do I need to donate to use the website?
+
+No.
+The website is free to use and always will be (as long as it is financially sustainable).
+However, donations are appreciated and help keep the website running.
+
+### Why is this route chosen over that one? _Or_ how can I add something to the map?
+
+**gpx.studio** uses data from <a href="https://www.openstreetmap.org/" target="_blank">OpenStreetMap</a>, which is an open and collaborative world map.
+This means you can contribute to the map by adding or editing data on OpenStreetMap.
+
+If you have never contributed to OpenStreetMap before, here is how you can suggest changes:
+
+1. Go to the location where you want to add or edit data on the <a href="https://www.openstreetmap.org/" target="_blank">map</a>.
+2. Use the <button>Query features</button> tool on the right to inspect the existing data.
+3. Right-click on the location and select <button>Add a note here</button>.
+4. Explain what is incorrect or missing in the note and click <button>Add note</button> to submit it.
+
+Someone more experienced with OpenStreetMap will then review your note and make the necessary changes.
+
+<DocsNote>
+
+More information on how to contribute to OpenStreetMap can be found <a href="https://wiki.openstreetmap.org/wiki/How_to_contribute" target="_blank">here</a>.
+
+</DocsNote>

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

@@ -0,0 +1,110 @@
+---
+title: Files and statistics
+---
+
+<script lang="ts">
+    import { ChartNoAxesColumn } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+    import ElevationProfile from '$lib/components/ElevationProfile.svelte';
+    import GPXStatistics from '$lib/components/GPXStatistics.svelte';
+    import { exampleGPXFile } from '$lib/assets/example';
+    import { writable } from 'svelte/store';
+
+    let gpxStatistics = writable(exampleGPXFile.getStatistics());
+    let slicedGPXStatistics = writable(undefined);
+    let additionalDatasets = writable(['speed', 'atemp']);
+    let elevationFill = writable<'slope' | 'surface' | undefined>(undefined);
+</script>
+
+# { title }
+
+## 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 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.
+
+<DocsNote>
+
+When using a mouse, you need to hold <kbd>Shift</kbd> to scroll horizontally.
+
+</DocsNote>
+
+### 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 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>
+
+You can also navigate through the files using the arrow keys on your keyboard, and use <kbd>Shift</kbd> to add files to the selection.
+
+</DocsNote>
+
+### Edit actions
+
+By right-clicking on a file tab, you can access the same actions as in the [edit menu](./menu/edit).
+
+### Tree layout
+
+As mentioned in the [view options section](./menu/view), you can switch to a tree layout for the files list.
+This layout is ideal for managing a large number of open files, as it organizes them into a vertical list on the right side of the map.
+In addition, the file tree view enables you to inspect the [tracks, segments, and points of interest](./gpx) contained inside the files through collapsible sections.
+
+You can also apply [edit actions](./menu/edit) and [tools](./toolbar) to internal 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.
+
+<DocsNote>
+
+The size of the file list can be adjusted by dragging the separator between the map and the file list.
+
+</DocsNote>
+
+## Elevation profile and statistics
+
+At the bottom of the interface, you can find the elevation profile and statistics for the current selection.
+
+<DocsNote>
+
+The size of the elevation profile can be adjusted by dragging the separator between the map and the elevation profile.
+
+</DocsNote>
+
+### Interactive statistics
+
+When hovering over the elevation profile, a tooltip will show statistics at the cursor position.
+
+To get the statistics for a specific section of the elevation profile, you can drag a selection rectangle on the profile.
+Click on the profile to reset the selection.
+
+You can also use the mouse wheel to zoom in and out on the elevation profile, and move left and right by dragging the profile while holding the <kbd>Shift</kbd> key.
+
+<div class="h-48 w-full">
+    <ElevationProfile
+        {gpxStatistics}
+        {slicedGPXStatistics}
+        additionalDatasets={$additionalDatasets}
+        elevationFill={$elevationFill}
+    />
+</div>
+<div class="flex flex-col items-center -mt-6">
+    <div class="h-10 w-fit">
+        <GPXStatistics
+            {gpxStatistics}
+            {slicedGPXStatistics}
+            panelSize={120}
+            orientation={'horizontal'}
+        />
+    </div>
+</div>
+
+### Additional data
+
+Using the <kbd><ChartNoAxesColumn size="16" class="inline-block" style="margin-bottom: 2px"/></kbd> button at the bottom-right of the elevation profile, you can optionally color the elevation profile by:
+
+- **slope** information computed from the elevation data, or
+- **surface** or **category** data coming from <a href="https://www.openstreetmap.org/" target="_blank">OpenStreetMap</a>'s <a href="https://wiki.openstreetmap.org/wiki/Key:surface" target="_blank">surface</a> and <a href="https://wiki.openstreetmap.org/wiki/Key:highway" target="_blank">highway</a> tags.
+  This is only available for files created with **gpx.studio**.
+
+If your selection includes it, you can also visualize: **speed**, **heart rate**, **cadence**, **temperature** and **power** data on the elevation profile.

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

@@ -0,0 +1,37 @@
+---
+title: Getting started
+---
+
+<script lang="ts">
+    import DocsImage from '$lib/components/docs/DocsImage.svelte';
+</script>
+
+# { title }
+
+Welcome to the official guide for **gpx.studio**!
+This guide will walk you through all the components and tools of the interface, helping you become a proficient user of the application.
+
+<DocsImage src="getting-started/interface" alt="The gpx.studio interface." />
+
+As shown in 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.
+
+## Menu
+
+At the top of the interface, you will find the [main menu](./menu).
+This is where you can access common actions such as opening, closing, and exporting files, undoing and redoing actions, and adjusting the application settings.
+
+## Files and statistics
+
+At the bottom of the interface, you will find the list of files currently open in the application.
+You can click on a file to select it and display its statistics below the list.
+In the [dedicated section](./files-and-stats), we will explain how to select multiple files and switch to a tree layout for advanced file management.
+
+## Toolbar
+
+On the left side of the interface, you will find the [toolbar](./toolbar), which contains all the tools you can use to edit your files.
+
+## Map controls
+
+Finally, on the right side of the interface, you will find the [map controls](./map-controls).
+These controls allow you to navigate the map, zoom in and out, and switch between different map styles.

website/src/lib/docs/id/gpx.mdx

@@ -0,0 +1,34 @@
+---
+title: GPX file format
+---
+
+<script>
+    import { Waypoints, MapPin } from 'lucide-svelte';
+</script>
+
+# { title }
+
+The <a href="https://www.topografix.com/gpx.asp" target="_blank">GPX file format</a> is an open standard for exchanging GPS data between applications and GPS devices.
+It essentially consists of a series of GPS points encoding one or multiple GPS traces, and, optionally, some points of interest.
+
+GPX files may also contain metadata, of which the **name** and **description** fields are the most useful for users.
+
+### <Waypoints size="16" class="inline-block" style="margin-bottom: 2px" /> Tracks, segments, and GPS points
+
+As mentioned above, a GPX file can contain multiple GPS traces.
+These are organized in a hierarchical structure, with tracks at the top level.
+
+- A **track** is made of a sequence of disconnected segments.
+  Furthermore, it can contain metadata such as a **name**, a **description**, and **appearance properties**.
+- A **segment** is a sequence of GPS points that form a continuous path.
+- A **GPS point** is a location with a latitude, a longitude, and optionally a timestamp and an altitude.
+  Some devices also store additional information such as heart rate, cadence, temperature, and power.
+
+In most cases, GPX files contain a single track with a single segment.
+However, the hierarchy described above allows for more advanced use cases, such as planning multi-day trips with several variants for each day.
+
+### <MapPin size="16" class="inline-block" style="margin-bottom: 2px" /> Points of interest
+
+**Points of interest** (technically called _waypoints_) represent locations of interest to show either on a GPS device or on a digital map.
+
+In addition to its coordinates, a point of interest can have a **name** and a **description**.

website/src/lib/docs/id/home/funding.mdx

@@ -0,0 +1,13 @@
+<script>
+    import { HeartHandshake } from 'lucide-svelte';
+</script>
+
+## <HeartHandshake size="18" class="mr-1 inline-block align-baseline" /> Help keep the website free (and ad-free)
+
+Each time you add or move GPS points, our servers calculate the best route on the road network.
+We also use APIs from <a href="https://mapbox.com" target="_blank">Mapbox</a> to display beautiful maps, retrieve elevation data and allow you to search for places.
+
+Unfortunately, this is expensive.
+If you enjoy using this tool and find it valuable, please consider making a small donation to help keep the website free and ad-free.
+
+Thank you very much for your support! ❤️

website/src/lib/docs/id/home/mapbox.mdx

@@ -0,0 +1,5 @@
+Mapbox is the company that provides some of the beautiful maps on this website.
+They also develop the <a href="https://github.com/mapbox/mapbox-gl-js" target="_blank">map engine</a> which powers **gpx.studio**.
+
+We are incredibly fortunate and grateful to be part of their <a href="https://mapbox.com/community" target="_blank">Community</a> program, which supports nonprofits, educational institutions, and positive impact organizations.
+This partnership allows **gpx.studio** to benefit from Mapbox tools at discounted prices, greatly contributing to the financial viability of the project and enabling us to offer the best possible user experience.

website/src/lib/docs/id/home/translation.mdx

@@ -0,0 +1,12 @@
+<script>
+    import { Languages } from 'lucide-svelte';
+</script>
+
+## <Languages size="18" class="mr-1 inline-block align-baseline" /> Translation
+
+The website is translated by volunteers using a collaborative translation platform.
+You can contribute by adding or improving translations on our <a href="https://crowdin.com/project/gpxstudio" target="_blank">Crowdin project</a>.
+
+If you would like to start translating into a new language, please <a href="#contact">get in touch</a>.
+
+Any help is greatly appreciated!

website/src/lib/docs/id/integration.mdx

@@ -0,0 +1,27 @@
+---
+title: Integration
+---
+
+<script>
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+    import EmbeddingPlayground from '$lib/components/embedding/EmbeddingPlayground.svelte';
+</script>
+
+# { title }
+
+You can use **gpx.studio** to create maps showing your GPX files and embed them in your website.
+
+All you need is:
+
+1. A <a href="https://account.mapbox.com/auth/signup" target="_blank">Mapbox access token</a> to load the map, and
+2. GPX files hosted on your server or on Google Drive, or accessible via a public URL.
+
+You can then play with the configurator below to customize your map and generate the corresponding HTML code.
+
+<DocsNote type="warning">
+
+You will need to set up <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS" target="_blank">Cross-Origin Resource Sharing (CORS)</a> headers on your server to allow <b>gpx.studio</b> to load your GPX files.
+
+</DocsNote>
+
+<EmbeddingPlayground />

website/src/lib/docs/id/map-controls.mdx

@@ -0,0 +1,70 @@
+---
+title: Map controls
+---
+
+<script>
+    import { Plus, Minus, Diff, Compass, Search, LocateFixed, PersonStanding, Layers } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+    import DocsLayers from '$lib/components/docs/DocsLayers.svelte';
+</script>
+
+# { title }
+
+The map controls are located on the right side of the interface.
+These controls allow you to navigate the map, zoom in and out, and switch between different map styles.
+
+### <Diff size="16" class="inline-block" style="margin-bottom: 2px" /> Map navigation
+
+The controls at the top allow you to zoom in <Plus size="16" class="inline-block" style="margin-bottom: 2px" /> and out <Minus size="16" class="inline-block" style="margin-bottom: 2px" />, and to change the orientation and tilt of the map <Compass size="16" class="inline-block" style="margin-bottom: 2px" />.
+
+<DocsNote>
+
+To control the orientation and tilt of the map, you can also drag the map while holding <kbd>Ctrl</kbd>.
+
+</DocsNote>
+
+### <Search size="16" class="inline-block" style="margin-bottom: 2px" /> Search bar
+
+You can use the search bar to look for an address and navigate to it on the map.
+
+### <LocateFixed size="16" class="inline-block" style="margin-bottom: 2px" /> Locate button
+
+The locate button centers the map on your current location.
+
+<DocsNote>
+
+This only works if you have allowed your browser and <b>gpx.studio</b> to access your location.
+
+</DocsNote>
+
+### <PersonStanding size="16" class="inline-block" style="margin-bottom: 2px" /> Street view
+
+This button can be used to enable street view mode on the map.
+Depending on the street view source chosen in the [settings](./menu/settings), street view imagery can be accessed differently.
+
+- <a href="https://www.mapillary.com/" target="_blank">Mapillary</a>: the street view coverage will appear as green lines on the map. When zoomed in enough, green dots will show the exact locations where street view imagery is available. Hovering over a green dot will show the street view image at that location.
+- <a href="https://www.google.com/streetview/" target="_blank">Google Street View</a>: click on the map to open a new tab with the street view imagery at that location.
+
+### <Layers size="16" class="inline-block" style="margin-bottom: 2px" /> Map layers
+
+The map layers button allows you to switch between different basemaps, and toggle map overlays and categories of points of interest.
+
+- **Basemaps** are background maps that present the main geographic features of the world.
+  Depending on their purpose, basemaps have different styles and levels of detail.
+  Only one basemap can be displayed at a time.
+- **Overlays** are additional layers that can be displayed on top of the basemap to provide complementary information.
+- **Points of interest** can be added to the map to show different categories of places, such as shops, restaurants, or accommodations.
+
+<div class="flex flex-col items-center">
+    <DocsLayers />
+    <span class="text-sm text-center mt-2">
+        Hover over the map to show the <a href="https://hiking.waymarkedtrails.org" target="_blank">Waymarked Trails hiking</a> overlay on top of the <a href="https://www.mapbox.com/maps/outdoors" target="_blank">Mapbox Outdoors</a> basemap.
+    </span>
+</div>
+
+A large collection of global and local basemaps and overlays is available in **gpx.studio**, as well as a selection of point-of-interest categories.
+They can be enabled in the [map layer settings dialog](./menu/settings).
+
+In these settings, you can also manage the opacity of the overlays.
+
+For advanced users, it is possible to add custom basemaps and overlays by providing <a href="https://en.wikipedia.org/wiki/Web_Map_Tile_Service" target="_blank">WMTS</a>, <a href="https://en.wikipedia.org/wiki/Web_Map_Service" target="_blank">WMS</a>, or <a href="https://docs.mapbox.com/help/glossary/style/" target="_blank">Mapbox style JSON</a> URLs.

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

@@ -0,0 +1,17 @@
+---
+title: Menu
+---
+
+<script lang="ts">
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+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 the keyboard shortcuts displayed in the menu.
+
+</DocsNote>

website/src/lib/docs/id/menu/edit.mdx

@@ -0,0 +1,96 @@
+---
+title: Edit actions
+---
+
+<script lang="ts">
+    import { Undo2, Redo2, Info, PaintBucket, EyeOff, FileStack, ClipboardCopy, Scissors, ClipboardPaste, Trash2, Maximize, Plus } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+Unlike the file actions, the edit actions can potentially modify the content of the currently selected files.
+Moreover, when the tree layout of the files list is enabled (see [Files and statistics](../files-and-stats)), they can also be applied to [tracks, segments, and points of interest](../gpx).
+Therefore, we will refer to the elements that can be modified by these actions as _file items_.
+Note that except for the undo and redo actions, the edit actions are also accessible through the context menu (right-click) of the file items.
+
+### <Undo2 size="16" class="inline-block" style="margin-bottom: 2px" /><Redo2 size="16" class="inline-block" style="margin-bottom: 2px" /> Undo and redo
+
+Using these buttons, you can undo or redo the last actions you performed.
+This applies to all actions of the interface but not to view options, application settings, or map navigation.
+
+### <Info size="16" class="inline-block" style="margin-bottom: 2px" /> Info...
+
+Open the information dialog of the currently selected file item, where you can see and edit its name and description.
+
+### <PaintBucket size="16" class="inline-block" style="margin-bottom: 2px" /> Appearance...
+
+Open the appearance dialog, where you can change the color, opacity, and width of the selected file items on the map.
+
+### <EyeOff size="16" class="inline-block" style="margin-bottom: 2px" /> Hide/unhide
+
+Toggle the visibility of the selected file items on the map.
+
+### <Plus size="16" class="inline-block" style="margin-bottom: 2px" /> New track
+
+Create a new track in the selected file.
+
+<DocsNote>
+
+This action is only available when the tree layout of the files list is enabled.
+Additionally, the selection must be a single file.
+
+</DocsNote>
+
+### <Plus size="16" class="inline-block" style="margin-bottom: 2px" /> New segment
+
+Create a new segment in the selected track.
+
+<DocsNote>
+
+This action is only available when the tree layout of the files list is enabled.
+Additionally, the selection must be a single track.
+
+</DocsNote>
+
+### <FileStack size="16" class="inline-block" style="margin-bottom: 2px" /> Select all
+
+Add all file items in the current hierarchy level to the selection.
+
+### <Maximize size="16" class="inline-block" style="margin-bottom: 2px" /> Center
+
+Center the map on the selected file items.
+
+### <ClipboardCopy size="16" class="inline-block" style="margin-bottom: 2px" /> Copy
+
+Copy the selected file items to the clipboard.
+
+<DocsNote>
+
+This action is only available when the tree layout of the files list is enabled.
+
+</DocsNote>
+
+### <Scissors size="16" class="inline-block" style="margin-bottom: 2px" /> Cut
+
+Cut the selected file items to the clipboard.
+
+<DocsNote>
+
+This action is only available when the tree layout of the files list is enabled.
+
+</DocsNote>
+
+### <ClipboardPaste size="16" class="inline-block" style="margin-bottom: 2px" /> Paste
+
+Paste the file items from the clipboard to the current hierarchy level if they are compatible with it.
+
+<DocsNote>
+
+This action is only available when the tree layout of the files list is enabled.
+
+</DocsNote>
+
+### <Trash2 size="16" class="inline-block" style="margin-bottom: 2px" /> Delete
+
+Delete the selected file items.

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

@@ -0,0 +1,52 @@
+---
+title: File actions
+---
+
+<script lang="ts">
+    import { Plus, FolderOpen, Copy, FileX, Download } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+The file actions menu contains a set of pretty self-explanatory file operations.
+
+### <Plus size="16" class="inline-block" style="margin-bottom: 2px" /> New
+
+Create a new empty file.
+
+### <FolderOpen size="16" class="inline-block" style="margin-bottom: 2px" /> Open...
+
+Open files from your computer. 
+
+<DocsNote>
+
+You can also drag and drop files directly from your file system into the window.
+
+</DocsNote>
+
+### <Copy size="16" class="inline-block" style="margin-bottom: 2px" /> Duplicate
+
+Create a copy of the currently selected files.
+
+### <FileX size="16" class="inline-block" style="margin-bottom: 2px" /> Close
+
+Close the currently selected files.
+
+### <FileX size="16" class="inline-block" style="margin-bottom: 2px" /> Close all
+
+Close all files.
+
+### <Download size="16" class="inline-block" style="margin-bottom: 2px" /> Export...
+
+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.
+
+<DocsNote type="warning">
+
+If your download does not start after clicking the download button, please check your browser settings to allow downloads from <b>gpx.studio</b>.
+
+</DocsNote>

website/src/lib/docs/id/menu/settings.mdx

@@ -0,0 +1,50 @@
+---
+title: Settings
+---
+
+<script lang="ts">
+    import { Ruler, Zap, Thermometer, Languages, Sun, PersonStanding, Layers } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+### <Ruler size="16" class="inline-block" style="margin-bottom: 2px" /> Distance units
+
+Change the units used to display distances in the interface.
+
+### <Zap size="16" class="inline-block" style="margin-bottom: 2px" /> Velocity units
+
+Change the units used to display velocities in the interface.
+You can choose between distance per hour or minutes per distance, which can be more suitable for running activities.
+
+### <Thermometer size="16" class="inline-block" style="margin-bottom: 2px" /> Temperature units
+
+Change the units used to display temperatures in the interface.
+
+### <Languages size="16" class="inline-block" style="margin-bottom: 2px" /> Language
+
+Change the language used in the interface.
+
+<DocsNote>
+
+You can contribute by adding or improving translations on our <a href="https://crowdin.com/project/gpxstudio" target="_blank">Crowdin project</a>.
+If you would like to start translating into a new language, please <a href="#contact">get in touch</a>.
+Any help is greatly appreciated!
+
+</DocsNote>
+
+### <Sun size="16" class="inline-block" style="margin-bottom: 2px" /> Theme
+
+Change the theme used in the interface.
+
+### <PersonStanding size="16" class="inline-block" style="margin-bottom: 2px" /> Street view source
+
+Change the source used for the [street view control](../map-controls).
+The default one is <a href="https://www.mapillary.com" target="_blank">Mapillary</a>, but you can also use <a href="https://www.google.com/streetview/" target="_blank">Google Street View</a>.
+Learn more about how to use the street view control in the [map controls section](../map-controls).
+
+### <Layers size="16" class="inline-block" style="margin-bottom: 2px" /> Map layers...
+
+Open a dialog where you can enable or disable map layers, add custom ones, change the opacity of overlays, and more.
+More information about map layers can be found in the [map controls section](../map-controls).

website/src/lib/docs/id/menu/view.mdx

@@ -0,0 +1,49 @@
+---
+title: View options
+---
+
+<script lang="ts">
+    import { ChartArea, ListTree, Map, Layers2, Coins, Milestone, Box } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+This menu provides options to rearrange the interface and the map view.
+
+### <ChartArea size="16" class="inline-block" style="margin-bottom: 2px" /> Elevation profile
+
+Hide the elevation profile to make room for the map, or show it to inspect the current selection.
+
+### <ListTree size="16" class="inline-block" style="margin-bottom: 2px" /> File tree
+
+Toggle the tree layout for the [file list](../files-and-stats).
+This layout is ideal for managing a large number of open files, as it organizes them into a vertical list on the right side of the map.
+In addition, the file tree view enables you to inspect the [tracks, segments, and points of interest](../gpx) contained inside the files through collapsible sections.
+
+### <Map size="16" class="inline-block" style="margin-bottom: 2px" /> Switch to previous basemap
+
+Change the basemap to the one previously selected through the [map layer control](../map-controls).
+
+### <Layers2 size="16" class="inline-block" style="margin-bottom: 2px" /> Toggle overlays
+
+Toggle the visibility of the map overlays selected through the [map layer control](../map-controls).
+
+### <Coins size="16" class="inline-block" style="margin-bottom: 2px" /> Distance markers
+
+Toggle the visibility of distance markers on the map.
+They are displayed for the current selection, like the [elevation profile](../files-and-stats).
+
+### <Milestone size="16" class="inline-block" style="margin-bottom: 2px" /> Direction arrows
+
+Toggle the visibility of direction arrows on the map.
+
+### <Box size="16" class="inline-block" style="margin-bottom: 2px" /> Toggle 3D
+
+Enter or exit the 3D map view.
+
+<DocsNote>
+
+To control the orientation and tilt of the map, you can also drag the map while holding <kbd>Ctrl</kbd>.
+
+</DocsNote>

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

@@ -0,0 +1,32 @@
+---
+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**.
+Each tool is represented by an icon and can be activated by clicking on it.
+
+<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/id/toolbar/clean.mdx

@@ -0,0 +1,18 @@
+---
+title: Clean
+---
+
+<script>
+    import { SquareDashedMousePointer } from 'lucide-svelte';
+    import Clean from '$lib/components/toolbar/tools/Clean.svelte';
+</script>
+
+# <SquareDashedMousePointer size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+When the clean tool is selected, dragging the map will create a rectangular 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/id/toolbar/elevation.mdx

@@ -0,0 +1,24 @@
+---
+title: Elevation
+---
+
+<script>
+    import { MountainSnow } from 'lucide-svelte';
+    import Elevation from '$lib/components/toolbar/tools/Elevation.svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# <MountainSnow size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+This tool allows you to add elevation data to traces and [points of interest](../gpx), or to replace the existing data.
+
+<div class="flex flex-row justify-center">
+    <Elevation class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+<DocsNote>
+
+Elevation data is provided by <a href="https://mapbox.com" target="_blank">Mapbox</a>.
+You can learn more about its origin and accuracy in the <a href="https://docs.mapbox.com/data/tilesets/reference/mapbox-terrain-dem-v1/#elevation-data" target="_blank">documentation</a>.
+
+</DocsNote>

website/src/lib/docs/id/toolbar/extract.mdx

@@ -0,0 +1,26 @@
+---
+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>
+
+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 from a file containing <a href="../gpx">points of interest</a>, the tool will automatically assign each point of interest to the track it is closest to.
+
+</DocsNote>

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

@@ -0,0 +1,20 @@
+---
+title: Merge
+---
+
+<script>
+    import { Group } from 'lucide-svelte';
+    import Merge from '$lib/components/toolbar/tools/Merge.svelte';
+</script>
+
+# <Group size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+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>

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

@@ -0,0 +1,26 @@
+---
+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 in a trace, which can be useful for decreasing its size.
+
+You can adjust the tolerance of the simplification algorithm using the slider, 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>
+
+<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/id/toolbar/poi.mdx

@@ -0,0 +1,27 @@
+---
+title: Points of interest
+---
+
+<script>
+    import { MapPin } from 'lucide-svelte';
+    import Waypoint from '$lib/components/toolbar/tools/Waypoint.svelte';
+</script>
+
+# <MapPin size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+[Points of interest](../gpx) can be added to GPX files to mark locations of interest on the map and display them on your GPS device.
+
+### Creating a point of interest
+
+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.
+
+<div class="flex flex-row justify-center">
+    <Waypoint class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+### Editing a point of interest
+
+The form above 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/id/toolbar/routing.mdx

@@ -0,0 +1,84 @@
+---
+title: Route planning and editing
+---
+
+<script>
+    import { Pencil, Route, Bike, TriangleAlert, ArrowRightLeft, Home, Repeat, Trash2, CirclePlay, SquareArrowUpLeft } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+    import Routing from '$lib/components/toolbar/tools/routing/Routing.svelte';
+    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.
+You can minimize the dialog to save space by clicking on <button><SquareArrowUpLeft size="16" class="inline-block" style="margin-bottom: 2px" /></button>.
+
+<div class="flex flex-row justify-center">
+    <Routing minimizable={false} class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+### <Route size="16" class="inline-block" style="margin-bottom: 2px" /> Routing
+
+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.
+This setting can also be toggled by pressing <kbd>F5</kbd>.
+
+### <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 point.
+
+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.
+On touch devices, you can tap on the segment to insert a new anchor point.
+
+<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="tools/routing" alt="Anchor points allow you 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/lib/docs/id/toolbar/scissors.mdx

@@ -0,0 +1,32 @@
+---
+title: Crop and split
+---
+
+<script>
+    import { ScissorsIcon } from 'lucide-svelte';
+    import Scissors from '$lib/components/toolbar/tools/scissors/Scissors.svelte';
+    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>
+
+## Split
+
+To split the selected trace into two parts, click on one of the split markers displayed along the trace.
+To split at a specific point of your choice, hover over the trace on the map.
+Scissors will appear at the cursor position, showing that you can 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="tools/split" alt="Hovering over the selected trace turns your cursor into scissors." />

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

@@ -0,0 +1,27 @@
+---
+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>
+
+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>

website/src/lib/docs/it/toolbar/elevation.mdx

@@ -18,7 +18,7 @@ Questo strumento ti permette di aggiungere dati di altimetria a tracce e [punti
 
 <DocsNote>
 
-I dati di altimetria sono forniti da <a href="https://mapbox.com" target="_blank">Mapbox</a>.
+I dati altimertrici sono forniti da <a href="https://mapbox.com" target="_blank">Mapbox</a>.
 Puoi saperne di più sulla sua origine e accuratezza nella <a href="https://docs.mapbox.com/data/tilesets/reference/mapbox-terrain-dem-v1/#elevation-data" target="_blank">documentazione</a>.
 
 </DocsNote>

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

@@ -18,8 +18,8 @@ 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**.
+Verktøylinjen ligger på venstre side av kartet og er kjernen i applikasjonen, fordi den gir tilgang til hovedfunksjonene i **gpx. studio**.
-Each tool is represented by an icon and can be activated by clicking on it.
+Hvert verktøy vises med et ikon og kan aktiveres ved å klikke på det.
 
 <div class="flex flex-row justify-center text-foreground">
     <div>
@@ -27,6 +27,6 @@ Each tool is represented by an icon and can be activated by clicking on it.
     </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).
+Som med [edit actions](./menu/edit), kan de fleste verktøyene anvendes på flere filer med en gang og på [indre spor og segmenter](./gpx).
 
-The next sections describe each tool in detail.
+I de neste avsnittene beskrives hvert verktøy i detalj.

website/src/lib/docs/pl/faq.mdx

@@ -10,7 +10,7 @@ title: FAQ
 
 ### Do I need to donate to use the website?
 
-No.
+Nie.
 The website is free to use and always will be (as long as it is financially sustainable).
 However, donations are appreciated and help keep the website running.
 

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

@@ -1,5 +1,5 @@
 ---
-title: Files and statistics
+title: Pliki i statystyki
 ---
 
 <script lang="ts">
@@ -18,35 +18,35 @@ title: Files and statistics
 
 # { title }
 
-## File list
+## Lista plików
 
-Once you have [opened](./menu/file) files, they will be shown as tabs in the file list located at the bottom of the map.
+Raz [otwarte](./menu/file) pliki, będą widoczne jako zakładki na liście plików zlokalizowanej na dole mapy.
-You can reorder them by dragging and dropping the tabs.
+Możesz zmieniać ich kolejność poprzez przeciągnięcie i upuszczenie zakładek.
-And when many files are open, you can scroll through the list of tabs to navigate between them.
+Gdy wiele plików jest otwartych, możesz przewijać listę zakładek, aby przełączać się pomiędzy nimi.
 
 <DocsNote>
 
-When using a mouse, you need to hold <kbd>Shift</kbd> to scroll horizontally.
+Gdy używasz myszki, musisz przytrzymać <kbd>Shift</kbd> żeby przewijać w poziomie.
 
 </DocsNote>
 
-### File selection
+### Wybieranie plików
 
-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.
+Poprzez kliknięcia w zakładki możesz przełączać się pomiędzy plikami, aby sprawdzać ich statystyki i stosować na nich [akcje menu edycji](./menu/edit) oraz [narzędzia](./toolbar).
-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.
+Poprzez przytrzymanie klawisza <kbd>Ctrl/Cmd</kbd> możesz dodawać lub usuwać pliki z zaznaczenia, a przytrzymując <kbd>Shift</kbd> możesz zaznaczyć zakres plików.
-Most of the [edit actions](./menu/edit) and [tools](./toolbar) can be applied to multiple files at once.
+Większość [akcji menu edycji](./menu/edit) i [narzędzi](./toolbar) może być stosowanych do wielu plików naraz.
 
 <DocsNote>
 
-You can also navigate through the files using the arrow keys on your keyboard, and use <kbd>Shift</kbd> to add files to the selection.
+Możesz też przełączać się pomiędzy plikami z użyciem klawiszy strzałek na klawiaturze i używając klawisza <kbd>Shift</kbd>, aby dodać pliki do zaznaczenia.
 
 </DocsNote>
 
-### Edit actions
+### Akcje menu edycji
 
 By right-clicking on a file tab, you can access the same actions as in the [edit menu](./menu/edit).
 
-### Tree layout
+### Układ drzewa
 
 As mentioned in the [view options section](./menu/view), you can switch to a tree layout for the files list.
 This layout is ideal for managing a large number of open files, as it organizes them into a vertical list on the right side of the map.
@@ -71,7 +71,7 @@ The size of the elevation profile can be adjusted by dragging the separator betw
 
 </DocsNote>
 
-### Interactive statistics
+### Interaktywne statystyki
 
 When hovering over the elevation profile, a tooltip will show statistics at the cursor position.
 
@@ -99,7 +99,7 @@ You can also use the mouse wheel to zoom in and out on the elevation profile, an
     </div>
 </div>
 
-### Additional data
+### Dodatkowe informacje
 
 Using the <kbd><ChartNoAxesColumn size="16" class="inline-block" style="margin-bottom: 2px"/></kbd> button at the bottom-right of the elevation profile, you can optionally color the elevation profile by:
 

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

@@ -1,5 +1,5 @@
 ---
-title: Getting started
+title: Wprowadzenie
 ---
 
 <script lang="ts">
@@ -16,18 +16,18 @@ This guide will walk you through all the components and tools of the interface,
 As shown in 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.
 
-## Menu
+## Menu główne
 
 At the top of the interface, you will find the [main menu](./menu).
 This is where you can access common actions such as opening, closing, and exporting files, undoing and redoing actions, and adjusting the application settings.
 
-## Files and statistics
+## Pliki i statystyki
 
 At the bottom of the interface, you will find the list of files currently open in the application.
 You can click on a file to select it and display its statistics below the list.
 In the [dedicated section](./files-and-stats), we will explain how to select multiple files and switch to a tree layout for advanced file management.
 
-## Toolbar
+## Narzędzia
 
 On the left side of the interface, you will find the [toolbar](./toolbar), which contains all the tools you can use to edit your files.
 

website/src/lib/docs/pl/gpx.mdx

@@ -1,5 +1,5 @@
 ---
-title: GPX file format
+title: Format plików GPX
 ---
 
 <script>

website/src/lib/docs/pl/integration.mdx

@@ -11,7 +11,7 @@ title: Integration
 
 You can use **gpx.studio** to create maps showing your GPX files and embed them in your website.
 
-All you need is:
+Wszystko, czego potrzebujesz to:
 
 1. A <a href="https://account.mapbox.com/auth/signup" target="_blank">Mapbox access token</a> to load the map, and
 2. GPX files hosted on your server or on Google Drive, or accessible via a public URL.

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

@@ -1,5 +1,5 @@
 ---
-title: Menu
+title: Menu główne
 ---
 
 <script lang="ts">
@@ -8,10 +8,10 @@ title: Menu
 
 # { title }
 
-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.
+Główne menu, znajdujące się w górnej części interfejsu, zapewnia dostęp do akcji, opcji, i ustawień podzielone na kilka kategorii, objaśnionych w poniższych sekcjach.
 
 <DocsNote>
 
-Większość działań może być również wykonywana przy użyciu skrótów klawiszowych wyświetlanych w menu.
+Większość akcji może być również wykonana przy użyciu skrótów klawiszowych wyświetlanych w menu.
 
 </DocsNote>

website/src/lib/docs/pl/menu/edit.mdx

@@ -1,5 +1,5 @@
 ---
-title: Edit actions
+title: Akcje menu edycji
 ---
 
 <script lang="ts">
@@ -10,7 +10,7 @@ title: Edit actions
 # { title }
 
 W przeciwieństwie do pliku, edycja może potencjalnie modyfikować zawartość aktualnie wybranych plików.
-Moreover, when the tree layout of the files list is enabled (see [Files and statistics](../files-and-stats)), they can also be applied to [tracks, segments, and points of interest](../gpx).
+Ponadto, gdy lista plików jest włączona (patrz [Pliki i statystyki](../files-and-stats)), może być również zastosowane do [ścieżek, segmentów i punktów zainteresowania](../gpx).
 Dlatego będziemy odnosić się do elementów, które mogą być modyfikowane przez te działania jako _elementy pliku_.
 Zauważ, że z wyjątkiem akcji cofania i powtarzania, akcje edycji są również dostępne w menu kontekstowym (prawy przycisk myszy) elementów pliku.
 
@@ -37,19 +37,19 @@ Utwórz nowy ślad w wybranym pliku.
 
 <DocsNote>
 
-This action is only available when the tree layout of the files list is enabled.
+Ta akcja jest dostępna tylko wtedy, gdy lista plików jest włączona.
-Additionally, the selection must be a single file.
+Dodatkowo wybór musi być pojedynczym plikiem.
 
 </DocsNote>
 
 ### <Plus size="16" class="inline-block" style="margin-bottom: 2px" /> Nowy segment
 
-Create a new segment in the selected track.
+Utwórz nowy segment w wybranej ścieżce.
 
 <DocsNote>
 
-This action is only available when the tree layout of the files list is enabled.
+Ta akcja jest dostępna tylko wtedy, gdy lista plików jest włączona.
-Additionally, the selection must be a single track.
+Dodatkowo wybór musi być jedną ścieżką.
 
 </DocsNote>
 
@@ -59,7 +59,7 @@ Dodaj do zaznaczenia wszystkie pliki na bieżącym poziomie hierarchii.
 
 ### <Maximize size="16" class="inline-block" style="margin-bottom: 2px" /> Wycentruj
 
-Center the map on the selected file items.
+Wyśrodkuj mapę na elementach wybranego pliku.
 
 ### <ClipboardCopy size="16" class="inline-block" style="margin-bottom: 2px" /> Kopiuj
 
@@ -67,7 +67,7 @@ Skopiuj zaznaczone pliki do schowka.
 
 <DocsNote>
 
-This action is only available when the tree layout of the files list is enabled.
+Ta akcja jest dostępna tylko wtedy, gdy lista plików jest włączona.
 
 </DocsNote>
 
@@ -77,7 +77,7 @@ Wytnij zaznaczone pliki do schowka.
 
 <DocsNote>
 
-This action is only available when the tree layout of the files list is enabled.
+Ta akcja jest dostępna tylko wtedy, gdy lista plików jest włączona.
 
 </DocsNote>
 
@@ -87,7 +87,7 @@ Wklej elementy pliku ze schowka do bieżącego poziomu hierarchii, jeśli są z
 
 <DocsNote>
 
-This action is only available when the tree layout of the files list is enabled.
+Ta akcja jest dostępna tylko wtedy, gdy lista plików jest włączona.
 
 </DocsNote>
 

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

@@ -1,5 +1,5 @@
 ---
-title: File actions
+title: Akcje menu Plik
 ---
 
 <script lang="ts">
@@ -13,7 +13,7 @@ The file actions menu contains a set of pretty self-explanatory file operations.
 
 ### <Plus size="16" class="inline-block" style="margin-bottom: 2px" /> New
 
-Create a new empty file.
+Tworzy nowy pusty plik.
 
 ### <FolderOpen size="16" class="inline-block" style="margin-bottom: 2px" /> Open...
 
@@ -35,7 +35,7 @@ Close the currently selected files.
 
 ### <FileX size="16" class="inline-block" style="margin-bottom: 2px" /> Close all
 
-Close all files.
+Zamyka wszystkie pliki.
 
 ### <Download size="16" class="inline-block" style="margin-bottom: 2px" /> Export...
 

website/src/lib/docs/pl/menu/view.mdx

@@ -1,5 +1,5 @@
 ---
-title: View options
+title: Akcje menu Widok
 ---
 
 <script lang="ts">
@@ -40,7 +40,7 @@ Toggle the visibility of direction arrows on the map.
 
 ### <Box size="16" class="inline-block" style="margin-bottom: 2px" /> Toggle 3D
 
-Enter or exit the 3D map view.
+Włącza lub wychodzi z widoku mapy 3D.
 
 <DocsNote>
 

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

@@ -1,5 +1,5 @@
 ---
-title: Toolbar
+title: Narzędzia
 ---
 
 <script lang="ts">
@@ -27,6 +27,6 @@ Każde narzędzie jest reprezentowane przez ikonę i może być aktywowane przez
     </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).
+Tak jak w przypadku [edycji akcji](./menu/edit), większość narzędzi może być zastosowana do wielu plików jednocześnie, do [wewnętrznych ścieżek i segmentów](./gpx).
 
 Kolejne sekcje szczegółowo opisują każde z narzędzi.

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

@@ -9,9 +9,9 @@ title: Wyczyść
 
 # <SquareDashedMousePointer size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
 
-When the clean tool is selected, dragging the map will create a rectangular selection.
+Po wybraniu narzędzia wyczyszczenia, przesunięcie mapy spowoduje zaznaczenie prostokątne.
 
-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.
+W zależności od opcji zaznaczonych w oknie dialogowym pokazanym poniżej, kliknięcie przycisku usuwania usunie punkty GPS i/lub [punkty zainteresowania](../gpx) znajdujące się wewnątrz lub poza wyborem.
 
 <div class="flex flex-row justify-center">
     <Clean class="text-foreground p-3 border rounded-md shadow-lg" />

website/src/lib/docs/pl/toolbar/extract.mdx

@@ -1,5 +1,5 @@
 ---
-title: Extract
+title: Wyodrębnij
 ---
 
 <script>
@@ -10,7 +10,7 @@ title: Extract
 
 # <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.
+To narzędzie pozwala na wyodrębnienie [ścieżek (lub segmentów)](../gpx) z plików (lub ścieżek) zawierających wiele z nich.
 
 <div class="flex flex-row justify-center">
     <Extract class="text-foreground p-3 border rounded-md shadow-lg" />

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

@@ -1,5 +1,5 @@
 ---
-title: Merge
+title: Połącz
 ---
 
 <script>

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

@@ -1,5 +1,5 @@
 ---
-title: Minify
+title: Zredukuj
 ---
 
 <script>
@@ -10,9 +10,9 @@ title: Minify
 
 # <Filter size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
 
-This tool can be used to reduce the number of GPS points in a trace, which can be useful for decreasing its size.
+To narzędzie może być użyte do zredukowania liczby punktów GPS w ścieżce, co może być przydatne do zmniejszenia jej rozmiaru.
 
-You can adjust the tolerance of the simplification algorithm using the slider, and see the number of points that will be kept, as well as the simplified trace on the map.
+Możesz dostosować tolerancję algorytmu upraszczającego za pomocą suwaka, i zobaczyć liczbę punktów, które zostaną zachowane, jak również uproszczoną ścieżkę na mapie.
 
 <div class="flex flex-row justify-center">
     <Reduce class="text-foreground p-3 border rounded-md shadow-lg" />
@@ -20,7 +20,7 @@ You can adjust the tolerance of the simplification algorithm using the slider, a
 
 <DocsNote>
 
-The tolerance value represents the maximum distance allowed between the original trace and the simplified trace.
+Wartość tolerancji oznacza maksymalną dopuszczalną odległość między oryginalną ścieżką a uproszczoną.
-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>.
+Więcej na temat użytego algorytmu <a href="https://en.wikipedia.org/wiki/Ramer%E2%80%93Douglas%E2%80%93Peucker_algorithm" target="_blank">można przeczytać tutaj</a>.
 
 </DocsNote>

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

@@ -1,5 +1,5 @@
 ---
-title: Points of interest
+title: Punkty zainteresowania
 ---
 
 <script>
@@ -9,19 +9,19 @@ 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 and display them on your GPS device.
+[Punkty zainteresowania](../gpx) można dodać do plików GPX, aby oznaczyć interesujące lokalizacje na mapie i wyświetlić je na urządzeniu GPS.
 
-### Creating a point of interest
+### Utwórz punkt zainteresowania
 
-To create a point of interest, fill in the form shown below.
+Aby utworzyć punkt zainteresowania, wypełnij poniższy formularz.
-You can choose the location of the point of interest either by clicking on the map or by entering the coordinates manually.
+Możesz wybrać lokalizację punktu zainteresowania, klikając na mapę lub wprowadzając współrzędne ręcznie.
-Validate the form when you are done.
+Potwierdź formularz po zakończeniu.
 
 <div class="flex flex-row justify-center">
     <Waypoint class="text-foreground p-3 border rounded-md shadow-lg" />
 </div>
 
-### Editing a point of interest
+### Edytowanie punktu zainteresowania
 
-The form above can also be used to edit an existing point of interest after selecting it on the map.
+Powyższy formularz może być również użyty do edycji istniejącego punktu zainteresowania po wybraniu go na mapie.
-If you only need to move the point of interest, you can drag it to the desired location.
+Jeśli chcesz tylko przesunąć punkt zainteresowania, możesz przeciągnąć go na żądaną lokalizację.

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

@@ -63,7 +63,7 @@ Finally, you can delete anchor points by clicking on them and selecting <button>
 
 <DocsImage src="tools/routing" alt="Anchor points allow you to easily edit a route." />
 
-## Additional tools
+## Narzędzia dodatkowe
 
 The following tools automate some common route modification operations.
 

website/src/lib/docs/pl/toolbar/scissors.mdx

@@ -1,5 +1,5 @@
 ---
-title: Crop and split
+title: Przytnij i podziel
 ---
 
 <script>
@@ -10,7 +10,7 @@ title: Crop and split
 
 # <ScissorsIcon size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
 
-## Crop
+## Przytnij
 
 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.
@@ -21,7 +21,7 @@ Validate the selection when you are satisfied with the result.
     <Scissors class="text-foreground p-3 border rounded-md shadow-lg" />
 </div>
 
-## Split
+## Podziel
 
 To split the selected trace into two parts, click on one of the split markers displayed along the trace.
 To split at a specific point of your choice, hover over the trace on the map.

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

@@ -1,5 +1,5 @@
 ---
-title: Time
+title: Czas
 ---
 
 <script>

website/src/lib/docs/pt/gpx.mdx

@@ -18,8 +18,8 @@ GPX files may also contain metadata, of which the **name** and **description** f
 As mentioned above, a GPX file can contain multiple GPS traces.
 These are organized in a hierarchical structure, with tracks at the top level.
 
-- A **track** is made of a sequence of disconnected segments.
+- Uma **faixa** é feita de uma sequência de segmentos desconectados.
-  Furthermore, it can contain metadata such as a **name**, a **description**, and **appearance properties**.
+  Além disso, ele pode conter metadados como **nome**, **descrição** e **propriedades de aparência**.
 - A **segment** is a sequence of GPS points that form a continuous path.
 - A **GPS point** is a location with a latitude, a longitude, and optionally a timestamp and an altitude.
   Some devices also store additional information such as heart rate, cadence, temperature, and power.

website/src/lib/docs/sv/menu/edit.mdx

@@ -25,7 +25,7 @@ This applies to all actions of the interface but not to view options, applicatio
 
 ### <PaintBucket size="16" class="inline-block" style="margin-bottom: 2px" /> Appearance...
 
-Öppma Utseende-dialogen där du kan ändra färg, opacitet och bredden på de valda filobjekten på kartan.
+Öppna Utseende-dialogen där du kan ändra färg, opacitet och bredden på de valda filobjekten på kartan.
 
 ### <EyeOff size="16" class="inline-block" style="margin-bottom: 2px" /> Hide/unhide
 

website/src/lib/docs/th/faq.mdx

@@ -0,0 +1,35 @@
+---
+title: FAQ
+---
+
+<script>
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+### Do I need to donate to use the website?
+
+No.
+The website is free to use and always will be (as long as it is financially sustainable).
+However, donations are appreciated and help keep the website running.
+
+### Why is this route chosen over that one? _Or_ how can I add something to the map?
+
+**gpx.studio** uses data from <a href="https://www.openstreetmap.org/" target="_blank">OpenStreetMap</a>, which is an open and collaborative world map.
+This means you can contribute to the map by adding or editing data on OpenStreetMap.
+
+If you have never contributed to OpenStreetMap before, here is how you can suggest changes:
+
+1. Go to the location where you want to add or edit data on the <a href="https://www.openstreetmap.org/" target="_blank">map</a>.
+2. Use the <button>Query features</button> tool on the right to inspect the existing data.
+3. Right-click on the location and select <button>Add a note here</button>.
+4. Explain what is incorrect or missing in the note and click <button>Add note</button> to submit it.
+
+Someone more experienced with OpenStreetMap will then review your note and make the necessary changes.
+
+<DocsNote>
+
+More information on how to contribute to OpenStreetMap can be found <a href="https://wiki.openstreetmap.org/wiki/How_to_contribute" target="_blank">here</a>.
+
+</DocsNote>

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

@@ -0,0 +1,110 @@
+---
+title: Files and statistics
+---
+
+<script lang="ts">
+    import { ChartNoAxesColumn } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+    import ElevationProfile from '$lib/components/ElevationProfile.svelte';
+    import GPXStatistics from '$lib/components/GPXStatistics.svelte';
+    import { exampleGPXFile } from '$lib/assets/example';
+    import { writable } from 'svelte/store';
+
+    let gpxStatistics = writable(exampleGPXFile.getStatistics());
+    let slicedGPXStatistics = writable(undefined);
+    let additionalDatasets = writable(['speed', 'atemp']);
+    let elevationFill = writable<'slope' | 'surface' | undefined>(undefined);
+</script>
+
+# { title }
+
+## 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 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.
+
+<DocsNote>
+
+When using a mouse, you need to hold <kbd>Shift</kbd> to scroll horizontally.
+
+</DocsNote>
+
+### 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 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>
+
+You can also navigate through the files using the arrow keys on your keyboard, and use <kbd>Shift</kbd> to add files to the selection.
+
+</DocsNote>
+
+### Edit actions
+
+By right-clicking on a file tab, you can access the same actions as in the [edit menu](./menu/edit).
+
+### Tree layout
+
+As mentioned in the [view options section](./menu/view), you can switch to a tree layout for the files list.
+This layout is ideal for managing a large number of open files, as it organizes them into a vertical list on the right side of the map.
+In addition, the file tree view enables you to inspect the [tracks, segments, and points of interest](./gpx) contained inside the files through collapsible sections.
+
+You can also apply [edit actions](./menu/edit) and [tools](./toolbar) to internal 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.
+
+<DocsNote>
+
+The size of the file list can be adjusted by dragging the separator between the map and the file list.
+
+</DocsNote>
+
+## Elevation profile and statistics
+
+At the bottom of the interface, you can find the elevation profile and statistics for the current selection.
+
+<DocsNote>
+
+The size of the elevation profile can be adjusted by dragging the separator between the map and the elevation profile.
+
+</DocsNote>
+
+### Interactive statistics
+
+When hovering over the elevation profile, a tooltip will show statistics at the cursor position.
+
+To get the statistics for a specific section of the elevation profile, you can drag a selection rectangle on the profile.
+Click on the profile to reset the selection.
+
+You can also use the mouse wheel to zoom in and out on the elevation profile, and move left and right by dragging the profile while holding the <kbd>Shift</kbd> key.
+
+<div class="h-48 w-full">
+    <ElevationProfile
+        {gpxStatistics}
+        {slicedGPXStatistics}
+        additionalDatasets={$additionalDatasets}
+        elevationFill={$elevationFill}
+    />
+</div>
+<div class="flex flex-col items-center -mt-6">
+    <div class="h-10 w-fit">
+        <GPXStatistics
+            {gpxStatistics}
+            {slicedGPXStatistics}
+            panelSize={120}
+            orientation={'horizontal'}
+        />
+    </div>
+</div>
+
+### Additional data
+
+Using the <kbd><ChartNoAxesColumn size="16" class="inline-block" style="margin-bottom: 2px"/></kbd> button at the bottom-right of the elevation profile, you can optionally color the elevation profile by:
+
+- **slope** information computed from the elevation data, or
+- **surface** or **category** data coming from <a href="https://www.openstreetmap.org/" target="_blank">OpenStreetMap</a>'s <a href="https://wiki.openstreetmap.org/wiki/Key:surface" target="_blank">surface</a> and <a href="https://wiki.openstreetmap.org/wiki/Key:highway" target="_blank">highway</a> tags.
+  This is only available for files created with **gpx.studio**.
+
+If your selection includes it, you can also visualize: **speed**, **heart rate**, **cadence**, **temperature** and **power** data on the elevation profile.

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

@@ -0,0 +1,37 @@
+---
+title: Getting started
+---
+
+<script lang="ts">
+    import DocsImage from '$lib/components/docs/DocsImage.svelte';
+</script>
+
+# { title }
+
+Welcome to the official guide for **gpx.studio**!
+This guide will walk you through all the components and tools of the interface, helping you become a proficient user of the application.
+
+<DocsImage src="getting-started/interface" alt="The gpx.studio interface." />
+
+As shown in 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.
+
+## Menu
+
+At the top of the interface, you will find the [main menu](./menu).
+This is where you can access common actions such as opening, closing, and exporting files, undoing and redoing actions, and adjusting the application settings.
+
+## Files and statistics
+
+At the bottom of the interface, you will find the list of files currently open in the application.
+You can click on a file to select it and display its statistics below the list.
+In the [dedicated section](./files-and-stats), we will explain how to select multiple files and switch to a tree layout for advanced file management.
+
+## Toolbar
+
+On the left side of the interface, you will find the [toolbar](./toolbar), which contains all the tools you can use to edit your files.
+
+## Map controls
+
+Finally, on the right side of the interface, you will find the [map controls](./map-controls).
+These controls allow you to navigate the map, zoom in and out, and switch between different map styles.

website/src/lib/docs/th/gpx.mdx

@@ -0,0 +1,34 @@
+---
+title: GPX file format
+---
+
+<script>
+    import { Waypoints, MapPin } from 'lucide-svelte';
+</script>
+
+# { title }
+
+The <a href="https://www.topografix.com/gpx.asp" target="_blank">GPX file format</a> is an open standard for exchanging GPS data between applications and GPS devices.
+It essentially consists of a series of GPS points encoding one or multiple GPS traces, and, optionally, some points of interest.
+
+GPX files may also contain metadata, of which the **name** and **description** fields are the most useful for users.
+
+### <Waypoints size="16" class="inline-block" style="margin-bottom: 2px" /> Tracks, segments, and GPS points
+
+As mentioned above, a GPX file can contain multiple GPS traces.
+These are organized in a hierarchical structure, with tracks at the top level.
+
+- A **track** is made of a sequence of disconnected segments.
+  Furthermore, it can contain metadata such as a **name**, a **description**, and **appearance properties**.
+- A **segment** is a sequence of GPS points that form a continuous path.
+- A **GPS point** is a location with a latitude, a longitude, and optionally a timestamp and an altitude.
+  Some devices also store additional information such as heart rate, cadence, temperature, and power.
+
+In most cases, GPX files contain a single track with a single segment.
+However, the hierarchy described above allows for more advanced use cases, such as planning multi-day trips with several variants for each day.
+
+### <MapPin size="16" class="inline-block" style="margin-bottom: 2px" /> Points of interest
+
+**Points of interest** (technically called _waypoints_) represent locations of interest to show either on a GPS device or on a digital map.
+
+In addition to its coordinates, a point of interest can have a **name** and a **description**.

website/src/lib/docs/th/home/funding.mdx

@@ -0,0 +1,13 @@
+<script>
+    import { HeartHandshake } from 'lucide-svelte';
+</script>
+
+## <HeartHandshake size="18" class="mr-1 inline-block align-baseline" /> Help keep the website free (and ad-free)
+
+Each time you add or move GPS points, our servers calculate the best route on the road network.
+We also use APIs from <a href="https://mapbox.com" target="_blank">Mapbox</a> to display beautiful maps, retrieve elevation data and allow you to search for places.
+
+Unfortunately, this is expensive.
+If you enjoy using this tool and find it valuable, please consider making a small donation to help keep the website free and ad-free.
+
+Thank you very much for your support! ❤️

website/src/lib/docs/th/home/mapbox.mdx

@@ -0,0 +1,5 @@
+Mapbox is the company that provides some of the beautiful maps on this website.
+They also develop the <a href="https://github.com/mapbox/mapbox-gl-js" target="_blank">map engine</a> which powers **gpx.studio**.
+
+We are incredibly fortunate and grateful to be part of their <a href="https://mapbox.com/community" target="_blank">Community</a> program, which supports nonprofits, educational institutions, and positive impact organizations.
+This partnership allows **gpx.studio** to benefit from Mapbox tools at discounted prices, greatly contributing to the financial viability of the project and enabling us to offer the best possible user experience.

website/src/lib/docs/th/home/translation.mdx

@@ -0,0 +1,12 @@
+<script>
+    import { Languages } from 'lucide-svelte';
+</script>
+
+## <Languages size="18" class="mr-1 inline-block align-baseline" /> Translation
+
+The website is translated by volunteers using a collaborative translation platform.
+You can contribute by adding or improving translations on our <a href="https://crowdin.com/project/gpxstudio" target="_blank">Crowdin project</a>.
+
+If you would like to start translating into a new language, please <a href="#contact">get in touch</a>.
+
+Any help is greatly appreciated!

website/src/lib/docs/th/integration.mdx

@@ -0,0 +1,27 @@
+---
+title: Integration
+---
+
+<script>
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+    import EmbeddingPlayground from '$lib/components/embedding/EmbeddingPlayground.svelte';
+</script>
+
+# { title }
+
+You can use **gpx.studio** to create maps showing your GPX files and embed them in your website.
+
+All you need is:
+
+1. A <a href="https://account.mapbox.com/auth/signup" target="_blank">Mapbox access token</a> to load the map, and
+2. GPX files hosted on your server or on Google Drive, or accessible via a public URL.
+
+You can then play with the configurator below to customize your map and generate the corresponding HTML code.
+
+<DocsNote type="warning">
+
+You will need to set up <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS" target="_blank">Cross-Origin Resource Sharing (CORS)</a> headers on your server to allow <b>gpx.studio</b> to load your GPX files.
+
+</DocsNote>
+
+<EmbeddingPlayground />

website/src/lib/docs/th/map-controls.mdx

@@ -0,0 +1,70 @@
+---
+title: Map controls
+---
+
+<script>
+    import { Plus, Minus, Diff, Compass, Search, LocateFixed, PersonStanding, Layers } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+    import DocsLayers from '$lib/components/docs/DocsLayers.svelte';
+</script>
+
+# { title }
+
+The map controls are located on the right side of the interface.
+These controls allow you to navigate the map, zoom in and out, and switch between different map styles.
+
+### <Diff size="16" class="inline-block" style="margin-bottom: 2px" /> Map navigation
+
+The controls at the top allow you to zoom in <Plus size="16" class="inline-block" style="margin-bottom: 2px" /> and out <Minus size="16" class="inline-block" style="margin-bottom: 2px" />, and to change the orientation and tilt of the map <Compass size="16" class="inline-block" style="margin-bottom: 2px" />.
+
+<DocsNote>
+
+To control the orientation and tilt of the map, you can also drag the map while holding <kbd>Ctrl</kbd>.
+
+</DocsNote>
+
+### <Search size="16" class="inline-block" style="margin-bottom: 2px" /> Search bar
+
+You can use the search bar to look for an address and navigate to it on the map.
+
+### <LocateFixed size="16" class="inline-block" style="margin-bottom: 2px" /> Locate button
+
+The locate button centers the map on your current location.
+
+<DocsNote>
+
+This only works if you have allowed your browser and <b>gpx.studio</b> to access your location.
+
+</DocsNote>
+
+### <PersonStanding size="16" class="inline-block" style="margin-bottom: 2px" /> Street view
+
+This button can be used to enable street view mode on the map.
+Depending on the street view source chosen in the [settings](./menu/settings), street view imagery can be accessed differently.
+
+- <a href="https://www.mapillary.com/" target="_blank">Mapillary</a>: the street view coverage will appear as green lines on the map. When zoomed in enough, green dots will show the exact locations where street view imagery is available. Hovering over a green dot will show the street view image at that location.
+- <a href="https://www.google.com/streetview/" target="_blank">Google Street View</a>: click on the map to open a new tab with the street view imagery at that location.
+
+### <Layers size="16" class="inline-block" style="margin-bottom: 2px" /> Map layers
+
+The map layers button allows you to switch between different basemaps, and toggle map overlays and categories of points of interest.
+
+- **Basemaps** are background maps that present the main geographic features of the world.
+  Depending on their purpose, basemaps have different styles and levels of detail.
+  Only one basemap can be displayed at a time.
+- **Overlays** are additional layers that can be displayed on top of the basemap to provide complementary information.
+- **Points of interest** can be added to the map to show different categories of places, such as shops, restaurants, or accommodations.
+
+<div class="flex flex-col items-center">
+    <DocsLayers />
+    <span class="text-sm text-center mt-2">
+        Hover over the map to show the <a href="https://hiking.waymarkedtrails.org" target="_blank">Waymarked Trails hiking</a> overlay on top of the <a href="https://www.mapbox.com/maps/outdoors" target="_blank">Mapbox Outdoors</a> basemap.
+    </span>
+</div>
+
+A large collection of global and local basemaps and overlays is available in **gpx.studio**, as well as a selection of point-of-interest categories.
+They can be enabled in the [map layer settings dialog](./menu/settings).
+
+In these settings, you can also manage the opacity of the overlays.
+
+For advanced users, it is possible to add custom basemaps and overlays by providing <a href="https://en.wikipedia.org/wiki/Web_Map_Tile_Service" target="_blank">WMTS</a>, <a href="https://en.wikipedia.org/wiki/Web_Map_Service" target="_blank">WMS</a>, or <a href="https://docs.mapbox.com/help/glossary/style/" target="_blank">Mapbox style JSON</a> URLs.

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

@@ -0,0 +1,17 @@
+---
+title: Menu
+---
+
+<script lang="ts">
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+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 the keyboard shortcuts displayed in the menu.
+
+</DocsNote>

website/src/lib/docs/th/menu/edit.mdx

@@ -0,0 +1,96 @@
+---
+title: Edit actions
+---
+
+<script lang="ts">
+    import { Undo2, Redo2, Info, PaintBucket, EyeOff, FileStack, ClipboardCopy, Scissors, ClipboardPaste, Trash2, Maximize, Plus } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+Unlike the file actions, the edit actions can potentially modify the content of the currently selected files.
+Moreover, when the tree layout of the files list is enabled (see [Files and statistics](../files-and-stats)), they can also be applied to [tracks, segments, and points of interest](../gpx).
+Therefore, we will refer to the elements that can be modified by these actions as _file items_.
+Note that except for the undo and redo actions, the edit actions are also accessible through the context menu (right-click) of the file items.
+
+### <Undo2 size="16" class="inline-block" style="margin-bottom: 2px" /><Redo2 size="16" class="inline-block" style="margin-bottom: 2px" /> Undo and redo
+
+Using these buttons, you can undo or redo the last actions you performed.
+This applies to all actions of the interface but not to view options, application settings, or map navigation.
+
+### <Info size="16" class="inline-block" style="margin-bottom: 2px" /> Info...
+
+Open the information dialog of the currently selected file item, where you can see and edit its name and description.
+
+### <PaintBucket size="16" class="inline-block" style="margin-bottom: 2px" /> Appearance...
+
+Open the appearance dialog, where you can change the color, opacity, and width of the selected file items on the map.
+
+### <EyeOff size="16" class="inline-block" style="margin-bottom: 2px" /> Hide/unhide
+
+Toggle the visibility of the selected file items on the map.
+
+### <Plus size="16" class="inline-block" style="margin-bottom: 2px" /> New track
+
+Create a new track in the selected file.
+
+<DocsNote>
+
+This action is only available when the tree layout of the files list is enabled.
+Additionally, the selection must be a single file.
+
+</DocsNote>
+
+### <Plus size="16" class="inline-block" style="margin-bottom: 2px" /> New segment
+
+Create a new segment in the selected track.
+
+<DocsNote>
+
+This action is only available when the tree layout of the files list is enabled.
+Additionally, the selection must be a single track.
+
+</DocsNote>
+
+### <FileStack size="16" class="inline-block" style="margin-bottom: 2px" /> Select all
+
+Add all file items in the current hierarchy level to the selection.
+
+### <Maximize size="16" class="inline-block" style="margin-bottom: 2px" /> Center
+
+Center the map on the selected file items.
+
+### <ClipboardCopy size="16" class="inline-block" style="margin-bottom: 2px" /> Copy
+
+Copy the selected file items to the clipboard.
+
+<DocsNote>
+
+This action is only available when the tree layout of the files list is enabled.
+
+</DocsNote>
+
+### <Scissors size="16" class="inline-block" style="margin-bottom: 2px" /> Cut
+
+Cut the selected file items to the clipboard.
+
+<DocsNote>
+
+This action is only available when the tree layout of the files list is enabled.
+
+</DocsNote>
+
+### <ClipboardPaste size="16" class="inline-block" style="margin-bottom: 2px" /> Paste
+
+Paste the file items from the clipboard to the current hierarchy level if they are compatible with it.
+
+<DocsNote>
+
+This action is only available when the tree layout of the files list is enabled.
+
+</DocsNote>
+
+### <Trash2 size="16" class="inline-block" style="margin-bottom: 2px" /> Delete
+
+Delete the selected file items.

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

@@ -0,0 +1,52 @@
+---
+title: File actions
+---
+
+<script lang="ts">
+    import { Plus, FolderOpen, Copy, FileX, Download } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+The file actions menu contains a set of pretty self-explanatory file operations.
+
+### <Plus size="16" class="inline-block" style="margin-bottom: 2px" /> New
+
+Create a new empty file.
+
+### <FolderOpen size="16" class="inline-block" style="margin-bottom: 2px" /> Open...
+
+Open files from your computer. 
+
+<DocsNote>
+
+You can also drag and drop files directly from your file system into the window.
+
+</DocsNote>
+
+### <Copy size="16" class="inline-block" style="margin-bottom: 2px" /> Duplicate
+
+Create a copy of the currently selected files.
+
+### <FileX size="16" class="inline-block" style="margin-bottom: 2px" /> Close
+
+Close the currently selected files.
+
+### <FileX size="16" class="inline-block" style="margin-bottom: 2px" /> Close all
+
+Close all files.
+
+### <Download size="16" class="inline-block" style="margin-bottom: 2px" /> Export...
+
+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.
+
+<DocsNote type="warning">
+
+If your download does not start after clicking the download button, please check your browser settings to allow downloads from <b>gpx.studio</b>.
+
+</DocsNote>

website/src/lib/docs/th/menu/settings.mdx

@@ -0,0 +1,50 @@
+---
+title: Settings
+---
+
+<script lang="ts">
+    import { Ruler, Zap, Thermometer, Languages, Sun, PersonStanding, Layers } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+### <Ruler size="16" class="inline-block" style="margin-bottom: 2px" /> Distance units
+
+Change the units used to display distances in the interface.
+
+### <Zap size="16" class="inline-block" style="margin-bottom: 2px" /> Velocity units
+
+Change the units used to display velocities in the interface.
+You can choose between distance per hour or minutes per distance, which can be more suitable for running activities.
+
+### <Thermometer size="16" class="inline-block" style="margin-bottom: 2px" /> Temperature units
+
+Change the units used to display temperatures in the interface.
+
+### <Languages size="16" class="inline-block" style="margin-bottom: 2px" /> Language
+
+Change the language used in the interface.
+
+<DocsNote>
+
+You can contribute by adding or improving translations on our <a href="https://crowdin.com/project/gpxstudio" target="_blank">Crowdin project</a>.
+If you would like to start translating into a new language, please <a href="#contact">get in touch</a>.
+Any help is greatly appreciated!
+
+</DocsNote>
+
+### <Sun size="16" class="inline-block" style="margin-bottom: 2px" /> Theme
+
+Change the theme used in the interface.
+
+### <PersonStanding size="16" class="inline-block" style="margin-bottom: 2px" /> Street view source
+
+Change the source used for the [street view control](../map-controls).
+The default one is <a href="https://www.mapillary.com" target="_blank">Mapillary</a>, but you can also use <a href="https://www.google.com/streetview/" target="_blank">Google Street View</a>.
+Learn more about how to use the street view control in the [map controls section](../map-controls).
+
+### <Layers size="16" class="inline-block" style="margin-bottom: 2px" /> Map layers...
+
+Open a dialog where you can enable or disable map layers, add custom ones, change the opacity of overlays, and more.
+More information about map layers can be found in the [map controls section](../map-controls).

website/src/lib/docs/th/menu/view.mdx

@@ -0,0 +1,49 @@
+---
+title: View options
+---
+
+<script lang="ts">
+    import { ChartArea, ListTree, Map, Layers2, Coins, Milestone, Box } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+This menu provides options to rearrange the interface and the map view.
+
+### <ChartArea size="16" class="inline-block" style="margin-bottom: 2px" /> Elevation profile
+
+Hide the elevation profile to make room for the map, or show it to inspect the current selection.
+
+### <ListTree size="16" class="inline-block" style="margin-bottom: 2px" /> File tree
+
+Toggle the tree layout for the [file list](../files-and-stats).
+This layout is ideal for managing a large number of open files, as it organizes them into a vertical list on the right side of the map.
+In addition, the file tree view enables you to inspect the [tracks, segments, and points of interest](../gpx) contained inside the files through collapsible sections.
+
+### <Map size="16" class="inline-block" style="margin-bottom: 2px" /> Switch to previous basemap
+
+Change the basemap to the one previously selected through the [map layer control](../map-controls).
+
+### <Layers2 size="16" class="inline-block" style="margin-bottom: 2px" /> Toggle overlays
+
+Toggle the visibility of the map overlays selected through the [map layer control](../map-controls).
+
+### <Coins size="16" class="inline-block" style="margin-bottom: 2px" /> Distance markers
+
+Toggle the visibility of distance markers on the map.
+They are displayed for the current selection, like the [elevation profile](../files-and-stats).
+
+### <Milestone size="16" class="inline-block" style="margin-bottom: 2px" /> Direction arrows
+
+Toggle the visibility of direction arrows on the map.
+
+### <Box size="16" class="inline-block" style="margin-bottom: 2px" /> Toggle 3D
+
+Enter or exit the 3D map view.
+
+<DocsNote>
+
+To control the orientation and tilt of the map, you can also drag the map while holding <kbd>Ctrl</kbd>.
+
+</DocsNote>

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

@@ -0,0 +1,32 @@
+---
+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**.
+Each tool is represented by an icon and can be activated by clicking on it.
+
+<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/th/toolbar/clean.mdx

@@ -0,0 +1,18 @@
+---
+title: Clean
+---
+
+<script>
+    import { SquareDashedMousePointer } from 'lucide-svelte';
+    import Clean from '$lib/components/toolbar/tools/Clean.svelte';
+</script>
+
+# <SquareDashedMousePointer size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+When the clean tool is selected, dragging the map will create a rectangular 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/th/toolbar/elevation.mdx

@@ -0,0 +1,24 @@
+---
+title: Elevation
+---
+
+<script>
+    import { MountainSnow } from 'lucide-svelte';
+    import Elevation from '$lib/components/toolbar/tools/Elevation.svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# <MountainSnow size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+This tool allows you to add elevation data to traces and [points of interest](../gpx), or to replace the existing data.
+
+<div class="flex flex-row justify-center">
+    <Elevation class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+<DocsNote>
+
+Elevation data is provided by <a href="https://mapbox.com" target="_blank">Mapbox</a>.
+You can learn more about its origin and accuracy in the <a href="https://docs.mapbox.com/data/tilesets/reference/mapbox-terrain-dem-v1/#elevation-data" target="_blank">documentation</a>.
+
+</DocsNote>

website/src/lib/docs/th/toolbar/extract.mdx

@@ -0,0 +1,26 @@
+---
+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>
+
+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 from a file containing <a href="../gpx">points of interest</a>, the tool will automatically assign each point of interest to the track it is closest to.
+
+</DocsNote>

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

@@ -0,0 +1,20 @@
+---
+title: Merge
+---
+
+<script>
+    import { Group } from 'lucide-svelte';
+    import Merge from '$lib/components/toolbar/tools/Merge.svelte';
+</script>
+
+# <Group size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+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>

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

@@ -0,0 +1,26 @@
+---
+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 in a trace, which can be useful for decreasing its size.
+
+You can adjust the tolerance of the simplification algorithm using the slider, 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>
+
+<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/th/toolbar/poi.mdx

@@ -0,0 +1,27 @@
+---
+title: Points of interest
+---
+
+<script>
+    import { MapPin } from 'lucide-svelte';
+    import Waypoint from '$lib/components/toolbar/tools/Waypoint.svelte';
+</script>
+
+# <MapPin size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+[Points of interest](../gpx) can be added to GPX files to mark locations of interest on the map and display them on your GPS device.
+
+### Creating a point of interest
+
+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.
+
+<div class="flex flex-row justify-center">
+    <Waypoint class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+### Editing a point of interest
+
+The form above 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/th/toolbar/routing.mdx

@@ -0,0 +1,84 @@
+---
+title: Route planning and editing
+---
+
+<script>
+    import { Pencil, Route, Bike, TriangleAlert, ArrowRightLeft, Home, Repeat, Trash2, CirclePlay, SquareArrowUpLeft } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+    import Routing from '$lib/components/toolbar/tools/routing/Routing.svelte';
+    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.
+You can minimize the dialog to save space by clicking on <button><SquareArrowUpLeft size="16" class="inline-block" style="margin-bottom: 2px" /></button>.
+
+<div class="flex flex-row justify-center">
+    <Routing minimizable={false} class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+### <Route size="16" class="inline-block" style="margin-bottom: 2px" /> Routing
+
+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.
+This setting can also be toggled by pressing <kbd>F5</kbd>.
+
+### <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 point.
+
+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.
+On touch devices, you can tap on the segment to insert a new anchor point.
+
+<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="tools/routing" alt="Anchor points allow you 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/lib/docs/th/toolbar/scissors.mdx

@@ -0,0 +1,32 @@
+---
+title: Crop and split
+---
+
+<script>
+    import { ScissorsIcon } from 'lucide-svelte';
+    import Scissors from '$lib/components/toolbar/tools/scissors/Scissors.svelte';
+    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>
+
+## Split
+
+To split the selected trace into two parts, click on one of the split markers displayed along the trace.
+To split at a specific point of your choice, hover over the trace on the map.
+Scissors will appear at the cursor position, showing that you can 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="tools/split" alt="Hovering over the selected trace turns your cursor into scissors." />

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

@@ -0,0 +1,27 @@
+---
+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>
+
+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>

website/src/lib/docs/uk/home/funding.mdx

@@ -2,12 +2,12 @@
     import { HeartHandshake } from 'lucide-svelte';
 </script>
 
-## <HeartHandshake size="18" class="mr-1 inline-block align-baseline" /> Help keep the website free (and ad-free)
+## <HeartHandshake size="18" class="mr-1 inline-block align-baseline" /> Допоможіть зберегти сайт безплатним (і вільним від реклами)
 
-Each time you add or move GPS points, our servers calculate the best route on the road network.
+Кожного разу, коли ви додаєте або переміщуєте GPS точки, наші сервери обчислюють найкращий маршрут на мережі доріг.
-We also use APIs from <a href="https://mapbox.com" target="_blank">Mapbox</a> to display beautiful maps, retrieve elevation data and allow you to search for places.
+Ми також використовуємо API від <a href="https://mapbox.com" target="_blank">Mapbox</a> для зображення красивих карт, отримання даних висот та можливості пошуку місць.
 
-Unfortunately, this is expensive.
+На жаль, це дорого.
-If you enjoy using this tool and find it valuable, please consider making a small donation to help keep the website free and ad-free.
+Якщо Вам подобається користуватися цим інструментом і він є цінним для Вас, будь ласка, зробіть невелику пожертву, щоб допомогти зберегти сайт безплатним та вільним від реклами.
 
-Thank you very much for your support! ❤️
+Дуже дякуємо за підтримку! ❤️

website/src/lib/docs/uk/home/mapbox.mdx

@@ -1,5 +1,5 @@
-Mapbox is the company that provides some of the beautiful maps on this website.
+Mapbox — це компанія, що надає деякі гарні карти на цьому сайті.
-They also develop the <a href="https://github.com/mapbox/mapbox-gl-js" target="_blank">map engine</a> which powers **gpx.studio**.
+Вони також розробили <a href="https://github.com/mapbox/mapbox-gl-js" target="_blank">картографічний двигун</a>, який забезпечує діяльність **gpx.studio**.
 
-We are incredibly fortunate and grateful to be part of their <a href="https://mapbox.com/community" target="_blank">Community</a> program, which supports nonprofits, educational institutions, and positive impact organizations.
+Нам неймовірно пощастило бути частиною їх програми <a href="https://mapbox.com/community" target="_blank">Громада</a>, яка підтримує некомерційні організації, освітні заклади та організації з позитивним впливом.
-This partnership allows **gpx.studio** to benefit from Mapbox tools at discounted prices, greatly contributing to the financial viability of the project and enabling us to offer the best possible user experience.
+Це партнерство дозволяє **gpx.studio** користуватися інструментами Mapbox за зниженими цінами, що значною мірою сприяє фінансовій життєздатності проєкту та дозволяє нам надавати найкращий користувацький досвід.

website/src/lib/docs/uk/home/translation.mdx

@@ -2,11 +2,11 @@
     import { Languages } from 'lucide-svelte';
 </script>
 
-## <Languages size="18" class="mr-1 inline-block align-baseline" /> Translation
+## <Languages size="18" class="mr-1 inline-block align-baseline" /> Переклад
 
-The website is translated by volunteers using a collaborative translation platform.
+Сайт перекладається волонтерами з використанням платформи для спільного перекладу.
-You can contribute by adding or improving translations on our <a href="https://crowdin.com/project/gpxstudio" target="_blank">Crowdin project</a>.
+Ви можете зробити свій внесок, додаючи або покращуючи переклади в нашому <a href="https://crowdin.com/project/gpxstudio" target="_blank">проєкті Crowdin</a>.
 
-If you would like to start translating into a new language, please <a href="#contact">get in touch</a>.
+Якщо Ви хочете розпочати переклад новою мовою, будь ласка, <a href="#contact">зв'яжіться з нами</a>.
 
-Any help is greatly appreciated!
+Будемо дуже вдячні за будь-яку допомогу!

website/src/lib/docs/uk/menu/edit.mdx

@@ -9,88 +9,88 @@ title: Edit actions
 
 # { title }
 
-Unlike the file actions, the edit actions can potentially modify the content of the currently selected files.
+На відміну від дій з файлами, дії редагування можуть потенційно змінювати вміст обраних файлів.
-Moreover, when the tree layout of the files list is enabled (see [Files and statistics](../files-and-stats)), they can also be applied to [tracks, segments, and points of interest](../gpx).
+Щобільше, коли ввімкнено деревоподібне розташування списку файлів (див. [Файли та статистика](../files-and-stats)), це також можна застосовувати до [треків, сегментів та точок інтересу](../gpx).
-Therefore, we will refer to the elements that can be modified by these actions as _file items_.
+Тому ми називатимемо елементи, які можна змінити цими діями, _елементами файлу_.
-Note that except for the undo and redo actions, the edit actions are also accessible through the context menu (right-click) of the file items.
+Зверніть увагу, що окрім дій скасування та повторного виконання, редагування доступне також в контекстному меню файлів (права кнопка миші).
 
-### <Undo2 size="16" class="inline-block" style="margin-bottom: 2px" /><Redo2 size="16" class="inline-block" style="margin-bottom: 2px" /> Undo and redo
+### <Undo2 size="16" class="inline-block" style="margin-bottom: 2px" /><Redo2 size="16" class="inline-block" style="margin-bottom: 2px" /> Скасувати та повторити
 
-Using these buttons, you can undo or redo the last actions you performed.
+За допомогою цих кнопок, Ви можете скасувати або повторити останні виконані дії.
-This applies to all actions of the interface but not to view options, application settings, or map navigation.
+Це стосується всіх дій інтерфейсу, але не параметрів перегляду, налаштувань програми чи навігації по карті.
 
-### <Info size="16" class="inline-block" style="margin-bottom: 2px" /> Info...
+### <Info size="16" class="inline-block" style="margin-bottom: 2px" /> Інформація...
 
-Open the information dialog of the currently selected file item, where you can see and edit its name and description.
+Відкрити діалогове вікно інформації про вибраний елемент файлу, де можна переглянути та редагувати його назву й опис.
 
-### <PaintBucket size="16" class="inline-block" style="margin-bottom: 2px" /> Appearance...
+### <PaintBucket size="16" class="inline-block" style="margin-bottom: 2px" /> Зовнішній вигляд...
 
-Open the appearance dialog, where you can change the color, opacity, and width of the selected file items on the map.
+Відкрийте діалогове вікно зовнішнього вигляду, де можна змінити колір, прозорість та ширину вибраних файлових елементів на карті.
 
-### <EyeOff size="16" class="inline-block" style="margin-bottom: 2px" /> Hide/unhide
+### <EyeOff size="16" class="inline-block" style="margin-bottom: 2px" /> Сховати/показати
 
-Toggle the visibility of the selected file items on the map.
+Перемкнути видимість вибраних файлових елементів на мапі.
 
-### <Plus size="16" class="inline-block" style="margin-bottom: 2px" /> New track
+### <Plus size="16" class="inline-block" style="margin-bottom: 2px" /> Новий трек
 
-Create a new track in the selected file.
+Створити новий трек в обраному файлі.
 
 <DocsNote>
 
-This action is only available when the tree layout of the files list is enabled.
+Ця дія доступна, лише якщо ввімкнено деревоподібне розташування списку файлів.
-Additionally, the selection must be a single file.
+Крім того, вибір має бути одним файлом.
 
 </DocsNote>
 
-### <Plus size="16" class="inline-block" style="margin-bottom: 2px" /> New segment
+### <Plus size="16" class="inline-block" style="margin-bottom: 2px" /> Новий сегмент
 
-Create a new segment in the selected track.
+Створити новий сегмент в обраному треку.
 
 <DocsNote>
 
-This action is only available when the tree layout of the files list is enabled.
+Ця дія доступна, лише якщо ввімкнено деревоподібне розташування списку файлів.
-Additionally, the selection must be a single track.
+Крім того, вибір має бути одним треком.
 
 </DocsNote>
 
-### <FileStack size="16" class="inline-block" style="margin-bottom: 2px" /> Select all
+### <FileStack size="16" class="inline-block" style="margin-bottom: 2px" /> Вибрати все
 
-Add all file items in the current hierarchy level to the selection.
+Додати до виділення всі елементи файлу на поточному рівні ієрархії.
 
-### <Maximize size="16" class="inline-block" style="margin-bottom: 2px" /> Center
+### <Maximize size="16" class="inline-block" style="margin-bottom: 2px" /> Центрувати
 
-Center the map on the selected file items.
+Центрувати карту на вибраних елементах файлу.
 
-### <ClipboardCopy size="16" class="inline-block" style="margin-bottom: 2px" /> Copy
+### <ClipboardCopy size="16" class="inline-block" style="margin-bottom: 2px" /> Копіювати
 
-Copy the selected file items to the clipboard.
+Копіювати вибрані елементи файлу в буфер обміну.
 
 <DocsNote>
 
-This action is only available when the tree layout of the files list is enabled.
+Ця дія доступна, лише якщо ввімкнено деревоподібне розташування списку файлів.
 
 </DocsNote>
 
-### <Scissors size="16" class="inline-block" style="margin-bottom: 2px" /> Cut
+### <Scissors size="16" class="inline-block" style="margin-bottom: 2px" /> Вирізати
 
-Cut the selected file items to the clipboard.
+Вирізати вибрані елементи файлу в буфер обміну.
 
 <DocsNote>
 
-This action is only available when the tree layout of the files list is enabled.
+Ця дія доступна, лише якщо ввімкнено деревоподібне розташування списку файлів.
 
 </DocsNote>
 
-### <ClipboardPaste size="16" class="inline-block" style="margin-bottom: 2px" /> Paste
+### <ClipboardPaste size="16" class="inline-block" style="margin-bottom: 2px" /> Вставити
 
-Paste the file items from the clipboard to the current hierarchy level if they are compatible with it.
+Вставити елементи файлу з буфера обміну на поточний рівень ієрархії, якщо вони з ним сумісні.
 
 <DocsNote>
 
-This action is only available when the tree layout of the files list is enabled.
+Ця дія доступна, лише якщо ввімкнено деревоподібне розташування списку файлів.
 
 </DocsNote>
 
-### <Trash2 size="16" class="inline-block" style="margin-bottom: 2px" /> Delete
+### <Trash2 size="16" class="inline-block" style="margin-bottom: 2px" /> Видалити
 
-Delete the selected file items.
+Видалити вибрані елементи файлу.

website/src/lib/docs/uk/menu/settings.mdx

@@ -28,9 +28,9 @@ Change the language used in the interface.
 
 <DocsNote>
 
-You can contribute by adding or improving translations on our <a href="https://crowdin.com/project/gpxstudio" target="_blank">Crowdin project</a>.
+Ви можете зробити свій внесок, додаючи або покращуючи переклади в нашому <a href="https://crowdin.com/project/gpxstudio" target="_blank">проєкті Crowdin</a>.
-If you would like to start translating into a new language, please <a href="#contact">get in touch</a>.
+Якщо Ви хочете розпочати переклад новою мовою, будь ласка, <a href="#contact">зв'яжіться з нами</a>.
-Any help is greatly appreciated!
+Будемо дуже вдячні за будь-яку допомогу!
 
 </DocsNote>
 

website/src/lib/docs/zh-HK/faq.mdx

@@ -0,0 +1,35 @@
+---
+title: FAQ
+---
+
+<script>
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+### Do I need to donate to use the website?
+
+No.
+The website is free to use and always will be (as long as it is financially sustainable).
+However, donations are appreciated and help keep the website running.
+
+### Why is this route chosen over that one? _Or_ how can I add something to the map?
+
+**gpx.studio** uses data from <a href="https://www.openstreetmap.org/" target="_blank">OpenStreetMap</a>, which is an open and collaborative world map.
+This means you can contribute to the map by adding or editing data on OpenStreetMap.
+
+If you have never contributed to OpenStreetMap before, here is how you can suggest changes:
+
+1. Go to the location where you want to add or edit data on the <a href="https://www.openstreetmap.org/" target="_blank">map</a>.
+2. Use the <button>Query features</button> tool on the right to inspect the existing data.
+3. Right-click on the location and select <button>Add a note here</button>.
+4. Explain what is incorrect or missing in the note and click <button>Add note</button> to submit it.
+
+Someone more experienced with OpenStreetMap will then review your note and make the necessary changes.
+
+<DocsNote>
+
+More information on how to contribute to OpenStreetMap can be found <a href="https://wiki.openstreetmap.org/wiki/How_to_contribute" target="_blank">here</a>.
+
+</DocsNote>

website/src/lib/docs/zh-HK/files-and-stats.mdx

@@ -0,0 +1,110 @@
+---
+title: Files and statistics
+---
+
+<script lang="ts">
+    import { ChartNoAxesColumn } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+    import ElevationProfile from '$lib/components/ElevationProfile.svelte';
+    import GPXStatistics from '$lib/components/GPXStatistics.svelte';
+    import { exampleGPXFile } from '$lib/assets/example';
+    import { writable } from 'svelte/store';
+
+    let gpxStatistics = writable(exampleGPXFile.getStatistics());
+    let slicedGPXStatistics = writable(undefined);
+    let additionalDatasets = writable(['speed', 'atemp']);
+    let elevationFill = writable<'slope' | 'surface' | undefined>(undefined);
+</script>
+
+# { title }
+
+## 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 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.
+
+<DocsNote>
+
+When using a mouse, you need to hold <kbd>Shift</kbd> to scroll horizontally.
+
+</DocsNote>
+
+### 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 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>
+
+You can also navigate through the files using the arrow keys on your keyboard, and use <kbd>Shift</kbd> to add files to the selection.
+
+</DocsNote>
+
+### Edit actions
+
+By right-clicking on a file tab, you can access the same actions as in the [edit menu](./menu/edit).
+
+### Tree layout
+
+As mentioned in the [view options section](./menu/view), you can switch to a tree layout for the files list.
+This layout is ideal for managing a large number of open files, as it organizes them into a vertical list on the right side of the map.
+In addition, the file tree view enables you to inspect the [tracks, segments, and points of interest](./gpx) contained inside the files through collapsible sections.
+
+You can also apply [edit actions](./menu/edit) and [tools](./toolbar) to internal 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.
+
+<DocsNote>
+
+The size of the file list can be adjusted by dragging the separator between the map and the file list.
+
+</DocsNote>
+
+## Elevation profile and statistics
+
+At the bottom of the interface, you can find the elevation profile and statistics for the current selection.
+
+<DocsNote>
+
+The size of the elevation profile can be adjusted by dragging the separator between the map and the elevation profile.
+
+</DocsNote>
+
+### Interactive statistics
+
+When hovering over the elevation profile, a tooltip will show statistics at the cursor position.
+
+To get the statistics for a specific section of the elevation profile, you can drag a selection rectangle on the profile.
+Click on the profile to reset the selection.
+
+You can also use the mouse wheel to zoom in and out on the elevation profile, and move left and right by dragging the profile while holding the <kbd>Shift</kbd> key.
+
+<div class="h-48 w-full">
+    <ElevationProfile
+        {gpxStatistics}
+        {slicedGPXStatistics}
+        additionalDatasets={$additionalDatasets}
+        elevationFill={$elevationFill}
+    />
+</div>
+<div class="flex flex-col items-center -mt-6">
+    <div class="h-10 w-fit">
+        <GPXStatistics
+            {gpxStatistics}
+            {slicedGPXStatistics}
+            panelSize={120}
+            orientation={'horizontal'}
+        />
+    </div>
+</div>
+
+### Additional data
+
+Using the <kbd><ChartNoAxesColumn size="16" class="inline-block" style="margin-bottom: 2px"/></kbd> button at the bottom-right of the elevation profile, you can optionally color the elevation profile by:
+
+- **slope** information computed from the elevation data, or
+- **surface** or **category** data coming from <a href="https://www.openstreetmap.org/" target="_blank">OpenStreetMap</a>'s <a href="https://wiki.openstreetmap.org/wiki/Key:surface" target="_blank">surface</a> and <a href="https://wiki.openstreetmap.org/wiki/Key:highway" target="_blank">highway</a> tags.
+  This is only available for files created with **gpx.studio**.
+
+If your selection includes it, you can also visualize: **speed**, **heart rate**, **cadence**, **temperature** and **power** data on the elevation profile.

website/src/lib/docs/zh-HK/getting-started.mdx

@@ -0,0 +1,37 @@
+---
+title: Getting started
+---
+
+<script lang="ts">
+    import DocsImage from '$lib/components/docs/DocsImage.svelte';
+</script>
+
+# { title }
+
+Welcome to the official guide for **gpx.studio**!
+This guide will walk you through all the components and tools of the interface, helping you become a proficient user of the application.
+
+<DocsImage src="getting-started/interface" alt="The gpx.studio interface." />
+
+As shown in 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.
+
+## Menu
+
+At the top of the interface, you will find the [main menu](./menu).
+This is where you can access common actions such as opening, closing, and exporting files, undoing and redoing actions, and adjusting the application settings.
+
+## Files and statistics
+
+At the bottom of the interface, you will find the list of files currently open in the application.
+You can click on a file to select it and display its statistics below the list.
+In the [dedicated section](./files-and-stats), we will explain how to select multiple files and switch to a tree layout for advanced file management.
+
+## Toolbar
+
+On the left side of the interface, you will find the [toolbar](./toolbar), which contains all the tools you can use to edit your files.
+
+## Map controls
+
+Finally, on the right side of the interface, you will find the [map controls](./map-controls).
+These controls allow you to navigate the map, zoom in and out, and switch between different map styles.

website/src/lib/docs/zh-HK/gpx.mdx

@@ -0,0 +1,34 @@
+---
+title: GPX file format
+---
+
+<script>
+    import { Waypoints, MapPin } from 'lucide-svelte';
+</script>
+
+# { title }
+
+The <a href="https://www.topografix.com/gpx.asp" target="_blank">GPX file format</a> is an open standard for exchanging GPS data between applications and GPS devices.
+It essentially consists of a series of GPS points encoding one or multiple GPS traces, and, optionally, some points of interest.
+
+GPX files may also contain metadata, of which the **name** and **description** fields are the most useful for users.
+
+### <Waypoints size="16" class="inline-block" style="margin-bottom: 2px" /> Tracks, segments, and GPS points
+
+As mentioned above, a GPX file can contain multiple GPS traces.
+These are organized in a hierarchical structure, with tracks at the top level.
+
+- A **track** is made of a sequence of disconnected segments.
+  Furthermore, it can contain metadata such as a **name**, a **description**, and **appearance properties**.
+- A **segment** is a sequence of GPS points that form a continuous path.
+- A **GPS point** is a location with a latitude, a longitude, and optionally a timestamp and an altitude.
+  Some devices also store additional information such as heart rate, cadence, temperature, and power.
+
+In most cases, GPX files contain a single track with a single segment.
+However, the hierarchy described above allows for more advanced use cases, such as planning multi-day trips with several variants for each day.
+
+### <MapPin size="16" class="inline-block" style="margin-bottom: 2px" /> Points of interest
+
+**Points of interest** (technically called _waypoints_) represent locations of interest to show either on a GPS device or on a digital map.
+
+In addition to its coordinates, a point of interest can have a **name** and a **description**.

website/src/lib/docs/zh-HK/home/funding.mdx

@@ -0,0 +1,13 @@
+<script>
+    import { HeartHandshake } from 'lucide-svelte';
+</script>
+
+## <HeartHandshake size="18" class="mr-1 inline-block align-baseline" /> Help keep the website free (and ad-free)
+
+Each time you add or move GPS points, our servers calculate the best route on the road network.
+We also use APIs from <a href="https://mapbox.com" target="_blank">Mapbox</a> to display beautiful maps, retrieve elevation data and allow you to search for places.
+
+Unfortunately, this is expensive.
+If you enjoy using this tool and find it valuable, please consider making a small donation to help keep the website free and ad-free.
+
+Thank you very much for your support! ❤️

website/src/lib/docs/zh-HK/home/mapbox.mdx

@@ -0,0 +1,5 @@
+Mapbox is the company that provides some of the beautiful maps on this website.
+They also develop the <a href="https://github.com/mapbox/mapbox-gl-js" target="_blank">map engine</a> which powers **gpx.studio**.
+
+We are incredibly fortunate and grateful to be part of their <a href="https://mapbox.com/community" target="_blank">Community</a> program, which supports nonprofits, educational institutions, and positive impact organizations.
+This partnership allows **gpx.studio** to benefit from Mapbox tools at discounted prices, greatly contributing to the financial viability of the project and enabling us to offer the best possible user experience.

website/src/lib/docs/zh-HK/home/translation.mdx

@@ -0,0 +1,12 @@
+<script>
+    import { Languages } from 'lucide-svelte';
+</script>
+
+## <Languages size="18" class="mr-1 inline-block align-baseline" /> Translation
+
+The website is translated by volunteers using a collaborative translation platform.
+You can contribute by adding or improving translations on our <a href="https://crowdin.com/project/gpxstudio" target="_blank">Crowdin project</a>.
+
+If you would like to start translating into a new language, please <a href="#contact">get in touch</a>.
+
+Any help is greatly appreciated!

website/src/lib/docs/zh-HK/integration.mdx

@@ -0,0 +1,27 @@
+---
+title: Integration
+---
+
+<script>
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+    import EmbeddingPlayground from '$lib/components/embedding/EmbeddingPlayground.svelte';
+</script>
+
+# { title }
+
+You can use **gpx.studio** to create maps showing your GPX files and embed them in your website.
+
+All you need is:
+
+1. A <a href="https://account.mapbox.com/auth/signup" target="_blank">Mapbox access token</a> to load the map, and
+2. GPX files hosted on your server or on Google Drive, or accessible via a public URL.
+
+You can then play with the configurator below to customize your map and generate the corresponding HTML code.
+
+<DocsNote type="warning">
+
+You will need to set up <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS" target="_blank">Cross-Origin Resource Sharing (CORS)</a> headers on your server to allow <b>gpx.studio</b> to load your GPX files.
+
+</DocsNote>
+
+<EmbeddingPlayground />

website/src/lib/docs/zh-HK/map-controls.mdx

@@ -0,0 +1,70 @@
+---
+title: Map controls
+---
+
+<script>
+    import { Plus, Minus, Diff, Compass, Search, LocateFixed, PersonStanding, Layers } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+    import DocsLayers from '$lib/components/docs/DocsLayers.svelte';
+</script>
+
+# { title }
+
+The map controls are located on the right side of the interface.
+These controls allow you to navigate the map, zoom in and out, and switch between different map styles.
+
+### <Diff size="16" class="inline-block" style="margin-bottom: 2px" /> Map navigation
+
+The controls at the top allow you to zoom in <Plus size="16" class="inline-block" style="margin-bottom: 2px" /> and out <Minus size="16" class="inline-block" style="margin-bottom: 2px" />, and to change the orientation and tilt of the map <Compass size="16" class="inline-block" style="margin-bottom: 2px" />.
+
+<DocsNote>
+
+To control the orientation and tilt of the map, you can also drag the map while holding <kbd>Ctrl</kbd>.
+
+</DocsNote>
+
+### <Search size="16" class="inline-block" style="margin-bottom: 2px" /> Search bar
+
+You can use the search bar to look for an address and navigate to it on the map.
+
+### <LocateFixed size="16" class="inline-block" style="margin-bottom: 2px" /> Locate button
+
+The locate button centers the map on your current location.
+
+<DocsNote>
+
+This only works if you have allowed your browser and <b>gpx.studio</b> to access your location.
+
+</DocsNote>
+
+### <PersonStanding size="16" class="inline-block" style="margin-bottom: 2px" /> Street view
+
+This button can be used to enable street view mode on the map.
+Depending on the street view source chosen in the [settings](./menu/settings), street view imagery can be accessed differently.
+
+- <a href="https://www.mapillary.com/" target="_blank">Mapillary</a>: the street view coverage will appear as green lines on the map. When zoomed in enough, green dots will show the exact locations where street view imagery is available. Hovering over a green dot will show the street view image at that location.
+- <a href="https://www.google.com/streetview/" target="_blank">Google Street View</a>: click on the map to open a new tab with the street view imagery at that location.
+
+### <Layers size="16" class="inline-block" style="margin-bottom: 2px" /> Map layers
+
+The map layers button allows you to switch between different basemaps, and toggle map overlays and categories of points of interest.
+
+- **Basemaps** are background maps that present the main geographic features of the world.
+  Depending on their purpose, basemaps have different styles and levels of detail.
+  Only one basemap can be displayed at a time.
+- **Overlays** are additional layers that can be displayed on top of the basemap to provide complementary information.
+- **Points of interest** can be added to the map to show different categories of places, such as shops, restaurants, or accommodations.
+
+<div class="flex flex-col items-center">
+    <DocsLayers />
+    <span class="text-sm text-center mt-2">
+        Hover over the map to show the <a href="https://hiking.waymarkedtrails.org" target="_blank">Waymarked Trails hiking</a> overlay on top of the <a href="https://www.mapbox.com/maps/outdoors" target="_blank">Mapbox Outdoors</a> basemap.
+    </span>
+</div>
+
+A large collection of global and local basemaps and overlays is available in **gpx.studio**, as well as a selection of point-of-interest categories.
+They can be enabled in the [map layer settings dialog](./menu/settings).
+
+In these settings, you can also manage the opacity of the overlays.
+
+For advanced users, it is possible to add custom basemaps and overlays by providing <a href="https://en.wikipedia.org/wiki/Web_Map_Tile_Service" target="_blank">WMTS</a>, <a href="https://en.wikipedia.org/wiki/Web_Map_Service" target="_blank">WMS</a>, or <a href="https://docs.mapbox.com/help/glossary/style/" target="_blank">Mapbox style JSON</a> URLs.

website/src/lib/docs/zh-HK/menu.mdx

@@ -0,0 +1,17 @@
+---
+title: Menu
+---
+
+<script lang="ts">
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+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 the keyboard shortcuts displayed in the menu.
+
+</DocsNote>

website/src/lib/docs/zh-HK/menu/edit.mdx

@@ -0,0 +1,96 @@
+---
+title: Edit actions
+---
+
+<script lang="ts">
+    import { Undo2, Redo2, Info, PaintBucket, EyeOff, FileStack, ClipboardCopy, Scissors, ClipboardPaste, Trash2, Maximize, Plus } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+與文件操作不同，編輯操作可能會修改目前選定文件的內容。
+Moreover, when the tree layout of the files list is enabled (see [Files and statistics](../files-and-stats)), they can also be applied to [tracks, segments, and points of interest](../gpx).
+Therefore, we will refer to the elements that can be modified by these actions as _file items_.
+Note that except for the undo and redo actions, the edit actions are also accessible through the context menu (right-click) of the file items.
+
+### <Undo2 size="16" class="inline-block" style="margin-bottom: 2px" /><Redo2 size="16" class="inline-block" style="margin-bottom: 2px" /> Undo and redo
+
+Using these buttons, you can undo or redo the last actions you performed.
+This applies to all actions of the interface but not to view options, application settings, or map navigation.
+
+### <Info size="16" class="inline-block" style="margin-bottom: 2px" /> Info...
+
+Open the information dialog of the currently selected file item, where you can see and edit its name and description.
+
+### <PaintBucket size="16" class="inline-block" style="margin-bottom: 2px" /> Appearance...
+
+Open the appearance dialog, where you can change the color, opacity, and width of the selected file items on the map.
+
+### <EyeOff size="16" class="inline-block" style="margin-bottom: 2px" /> Hide/unhide
+
+Toggle the visibility of the selected file items on the map.
+
+### <Plus size="16" class="inline-block" style="margin-bottom: 2px" /> New track
+
+Create a new track in the selected file.
+
+<DocsNote>
+
+This action is only available when the tree layout of the files list is enabled.
+Additionally, the selection must be a single file.
+
+</DocsNote>
+
+### <Plus size="16" class="inline-block" style="margin-bottom: 2px" /> New segment
+
+Create a new segment in the selected track.
+
+<DocsNote>
+
+This action is only available when the tree layout of the files list is enabled.
+Additionally, the selection must be a single track.
+
+</DocsNote>
+
+### <FileStack size="16" class="inline-block" style="margin-bottom: 2px" /> Select all
+
+Add all file items in the current hierarchy level to the selection.
+
+### <Maximize size="16" class="inline-block" style="margin-bottom: 2px" /> Center
+
+Center the map on the selected file items.
+
+### <ClipboardCopy size="16" class="inline-block" style="margin-bottom: 2px" /> Copy
+
+Copy the selected file items to the clipboard.
+
+<DocsNote>
+
+This action is only available when the tree layout of the files list is enabled.
+
+</DocsNote>
+
+### <Scissors size="16" class="inline-block" style="margin-bottom: 2px" /> Cut
+
+Cut the selected file items to the clipboard.
+
+<DocsNote>
+
+This action is only available when the tree layout of the files list is enabled.
+
+</DocsNote>
+
+### <ClipboardPaste size="16" class="inline-block" style="margin-bottom: 2px" /> Paste
+
+Paste the file items from the clipboard to the current hierarchy level if they are compatible with it.
+
+<DocsNote>
+
+This action is only available when the tree layout of the files list is enabled.
+
+</DocsNote>
+
+### <Trash2 size="16" class="inline-block" style="margin-bottom: 2px" /> Delete
+
+Delete the selected file items.

website/src/lib/docs/zh-HK/menu/file.mdx

@@ -0,0 +1,52 @@
+---
+title: File actions
+---
+
+<script lang="ts">
+    import { Plus, FolderOpen, Copy, FileX, Download } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+The file actions menu contains a set of pretty self-explanatory file operations.
+
+### <Plus size="16" class="inline-block" style="margin-bottom: 2px" /> New
+
+Create a new empty file.
+
+### <FolderOpen size="16" class="inline-block" style="margin-bottom: 2px" /> Open...
+
+Open files from your computer. 
+
+<DocsNote>
+
+You can also drag and drop files directly from your file system into the window.
+
+</DocsNote>
+
+### <Copy size="16" class="inline-block" style="margin-bottom: 2px" /> Duplicate
+
+Create a copy of the currently selected files.
+
+### <FileX size="16" class="inline-block" style="margin-bottom: 2px" /> Close
+
+Close the currently selected files.
+
+### <FileX size="16" class="inline-block" style="margin-bottom: 2px" /> Close all
+
+Close all files.
+
+### <Download size="16" class="inline-block" style="margin-bottom: 2px" /> Export...
+
+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.
+
+<DocsNote type="warning">
+
+If your download does not start after clicking the download button, please check your browser settings to allow downloads from <b>gpx.studio</b>.
+
+</DocsNote>

website/src/lib/docs/zh-HK/menu/settings.mdx

@@ -0,0 +1,50 @@
+---
+title: Settings
+---
+
+<script lang="ts">
+    import { Ruler, Zap, Thermometer, Languages, Sun, PersonStanding, Layers } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+### <Ruler size="16" class="inline-block" style="margin-bottom: 2px" /> Distance units
+
+Change the units used to display distances in the interface.
+
+### <Zap size="16" class="inline-block" style="margin-bottom: 2px" /> Velocity units
+
+Change the units used to display velocities in the interface.
+You can choose between distance per hour or minutes per distance, which can be more suitable for running activities.
+
+### <Thermometer size="16" class="inline-block" style="margin-bottom: 2px" /> Temperature units
+
+Change the units used to display temperatures in the interface.
+
+### <Languages size="16" class="inline-block" style="margin-bottom: 2px" /> Language
+
+Change the language used in the interface.
+
+<DocsNote>
+
+You can contribute by adding or improving translations on our <a href="https://crowdin.com/project/gpxstudio" target="_blank">Crowdin project</a>.
+If you would like to start translating into a new language, please <a href="#contact">get in touch</a>.
+Any help is greatly appreciated!
+
+</DocsNote>
+
+### <Sun size="16" class="inline-block" style="margin-bottom: 2px" /> Theme
+
+Change the theme used in the interface.
+
+### <PersonStanding size="16" class="inline-block" style="margin-bottom: 2px" /> Street view source
+
+Change the source used for the [street view control](../map-controls).
+The default one is <a href="https://www.mapillary.com" target="_blank">Mapillary</a>, but you can also use <a href="https://www.google.com/streetview/" target="_blank">Google Street View</a>.
+Learn more about how to use the street view control in the [map controls section](../map-controls).
+
+### <Layers size="16" class="inline-block" style="margin-bottom: 2px" /> Map layers...
+
+Open a dialog where you can enable or disable map layers, add custom ones, change the opacity of overlays, and more.
+More information about map layers can be found in the [map controls section](../map-controls).

website/src/lib/docs/zh-HK/menu/view.mdx

@@ -0,0 +1,49 @@
+---
+title: View options
+---
+
+<script lang="ts">
+    import { ChartArea, ListTree, Map, Layers2, Coins, Milestone, Box } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+This menu provides options to rearrange the interface and the map view.
+
+### <ChartArea size="16" class="inline-block" style="margin-bottom: 2px" /> Elevation profile
+
+Hide the elevation profile to make room for the map, or show it to inspect the current selection.
+
+### <ListTree size="16" class="inline-block" style="margin-bottom: 2px" /> File tree
+
+Toggle the tree layout for the [file list](../files-and-stats).
+This layout is ideal for managing a large number of open files, as it organizes them into a vertical list on the right side of the map.
+In addition, the file tree view enables you to inspect the [tracks, segments, and points of interest](../gpx) contained inside the files through collapsible sections.
+
+### <Map size="16" class="inline-block" style="margin-bottom: 2px" /> Switch to previous basemap
+
+Change the basemap to the one previously selected through the [map layer control](../map-controls).
+
+### <Layers2 size="16" class="inline-block" style="margin-bottom: 2px" /> Toggle overlays
+
+Toggle the visibility of the map overlays selected through the [map layer control](../map-controls).
+
+### <Coins size="16" class="inline-block" style="margin-bottom: 2px" /> Distance markers
+
+Toggle the visibility of distance markers on the map.
+They are displayed for the current selection, like the [elevation profile](../files-and-stats).
+
+### <Milestone size="16" class="inline-block" style="margin-bottom: 2px" /> Direction arrows
+
+Toggle the visibility of direction arrows on the map.
+
+### <Box size="16" class="inline-block" style="margin-bottom: 2px" /> Toggle 3D
+
+Enter or exit the 3D map view.
+
+<DocsNote>
+
+To control the orientation and tilt of the map, you can also drag the map while holding <kbd>Ctrl</kbd>.
+
+</DocsNote>

website/src/lib/docs/zh-HK/toolbar.mdx

@@ -0,0 +1,32 @@
+---
+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**.
+Each tool is represented by an icon and can be activated by clicking on it.
+
+<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/zh-HK/toolbar/clean.mdx

@@ -0,0 +1,18 @@
+---
+title: Clean
+---
+
+<script>
+    import { SquareDashedMousePointer } from 'lucide-svelte';
+    import Clean from '$lib/components/toolbar/tools/Clean.svelte';
+</script>
+
+# <SquareDashedMousePointer size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+When the clean tool is selected, dragging the map will create a rectangular 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/zh-HK/toolbar/elevation.mdx

@@ -0,0 +1,24 @@
+---
+title: Elevation
+---
+
+<script>
+    import { MountainSnow } from 'lucide-svelte';
+    import Elevation from '$lib/components/toolbar/tools/Elevation.svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# <MountainSnow size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+This tool allows you to add elevation data to traces and [points of interest](../gpx), or to replace the existing data.
+
+<div class="flex flex-row justify-center">
+    <Elevation class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+<DocsNote>
+
+Elevation data is provided by <a href="https://mapbox.com" target="_blank">Mapbox</a>.
+You can learn more about its origin and accuracy in the <a href="https://docs.mapbox.com/data/tilesets/reference/mapbox-terrain-dem-v1/#elevation-data" target="_blank">documentation</a>.
+
+</DocsNote>

website/src/lib/docs/zh-HK/toolbar/extract.mdx

@@ -0,0 +1,26 @@
+---
+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>
+
+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 from a file containing <a href="../gpx">points of interest</a>, the tool will automatically assign each point of interest to the track it is closest to.
+
+</DocsNote>

website/src/lib/docs/zh-HK/toolbar/merge.mdx

@@ -0,0 +1,20 @@
+---
+title: Merge
+---
+
+<script>
+    import { Group } from 'lucide-svelte';
+    import Merge from '$lib/components/toolbar/tools/Merge.svelte';
+</script>
+
+# <Group size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+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>

website/src/lib/docs/zh-HK/toolbar/minify.mdx

@@ -0,0 +1,26 @@
+---
+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 in a trace, which can be useful for decreasing its size.
+
+You can adjust the tolerance of the simplification algorithm using the slider, 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>
+
+<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/zh-HK/toolbar/poi.mdx

@@ -0,0 +1,27 @@
+---
+title: Points of interest
+---
+
+<script>
+    import { MapPin } from 'lucide-svelte';
+    import Waypoint from '$lib/components/toolbar/tools/Waypoint.svelte';
+</script>
+
+# <MapPin size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+[Points of interest](../gpx) can be added to GPX files to mark locations of interest on the map and display them on your GPS device.
+
+### Creating a point of interest
+
+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.
+
+<div class="flex flex-row justify-center">
+    <Waypoint class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+### Editing a point of interest
+
+The form above 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/zh-HK/toolbar/routing.mdx

@@ -0,0 +1,84 @@
+---
+title: Route planning and editing
+---
+
+<script>
+    import { Pencil, Route, Bike, TriangleAlert, ArrowRightLeft, Home, Repeat, Trash2, CirclePlay, SquareArrowUpLeft } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+    import Routing from '$lib/components/toolbar/tools/routing/Routing.svelte';
+    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.
+You can minimize the dialog to save space by clicking on <button><SquareArrowUpLeft size="16" class="inline-block" style="margin-bottom: 2px" /></button>.
+
+<div class="flex flex-row justify-center">
+    <Routing minimizable={false} class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+### <Route size="16" class="inline-block" style="margin-bottom: 2px" /> Routing
+
+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.
+This setting can also be toggled by pressing <kbd>F5</kbd>.
+
+### <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 point.
+
+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.
+On touch devices, you can tap on the segment to insert a new anchor point.
+
+<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="tools/routing" alt="Anchor points allow you 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.