Merge branch 'dev'

* New translations en.json (Spanish)

* New translations merge.mdx (Spanish)

* New translations elevation.mdx (Spanish)

* New translations en.json (Chinese Traditional, Hong Kong)

* New translations en.json (Spanish)

* New translations integration.mdx (Spanish)

* New translations merge.mdx (Spanish)

* New translations integration.mdx (Spanish)

* New translations map-controls.mdx (Spanish)

.github/FUNDING.yml

@@ -1 +1 @@
-ko_fi: gpxstudio
+open_collective: gpxstudio

.github/workflows/deploy.yml

@@ -1,63 +1,63 @@
 name: Deploy to GitHub Pages
 on:
-  push:
+    push:
-    branches: 'main'
+        branches: 'main'
 
 jobs:
-  build_site:
+    build_site:
-    runs-on: ubuntu-latest
+        runs-on: ubuntu-latest
-    steps:
+        steps:
-      - name: Checkout
+            - name: Checkout
-        uses: actions/checkout@v4
+              uses: actions/checkout@v5
 
-      - name: Install Node.js
+            - name: Install Node.js
-        uses: actions/setup-node@v4
+              uses: actions/setup-node@v6
-        with:
+              with:
-          node-version: 20
+                  node-version: 24
-          cache: npm
+                  cache: npm
-          cache-dependency-path: |
+                  cache-dependency-path: |
-            gpx/package-lock.json
+                      gpx/package-lock.json
-            website/package-lock.json
+                      website/package-lock.json
 
-      - name: Install dependencies for gpx
+            - name: Install dependencies for gpx
-        run: npm install --prefix gpx
+              run: npm install --prefix gpx
 
-      - name: Build gpx
+            - name: Build gpx
-        run: npm run build --prefix gpx
+              run: npm run build --prefix gpx
 
-      - name: Install dependencies for website
+            - name: Install dependencies for website
-        run: npm install --prefix website
+              run: npm install --prefix website
 
-      - name: Create env file
+            - name: Create env file
-        run: |
+              run: |
-          touch website/.env
+                  touch website/.env
-          echo PUBLIC_MAPBOX_TOKEN=${{ secrets.PUBLIC_MAPBOX_TOKEN }} >> website/.env
+                  echo PUBLIC_MAPTILER_KEY=${{ secrets.PUBLIC_MAPTILER_KEY }} >> website/.env
-          cat website/.env
+                  cat website/.env
 
-      - name: Build website
+            - name: Build website
-        env:
+              env:
-          BASE_PATH: '/${{ github.event.repository.name }}'
+                  BASE_PATH: ''
-        run: |
+              run: |
-          npm run build --prefix website
+                  npm run build --prefix website
 
-      - name: Upload Artifacts
+            - name: Upload Artifacts
-        uses: actions/upload-pages-artifact@v3
+              uses: actions/upload-pages-artifact@v4
-        with:
+              with:
-          path: 'website/build/'
+                  path: 'website/build/'
 
-  deploy:
+    deploy:
-    needs: build_site
+        needs: build_site
-    runs-on: ubuntu-latest
+        runs-on: ubuntu-latest
 
-    permissions:
+        permissions:
-      pages: write
+            pages: write
-      id-token: write
+            id-token: write
 
-    environment:
+        environment:
-      name: github-pages
+            name: github-pages
-      url: ${{ steps.deployment.outputs.page_url }}
+            url: ${{ steps.deployment.outputs.page_url }}
 
-    steps:
+        steps:
-    - name: Deploy
+            - name: Deploy
-      id: deployment
+              id: deployment
-      uses: actions/deploy-pages@v4
+              uses: actions/deploy-pages@v4

.prettierignore

@@ -0,0 +1,3 @@
+website/src/lib/components/ui
+website/src/lib/docs/**/*.mdx
+**/*.webmanifest

.prettierrc

@@ -0,0 +1,16 @@
+{
+	"useTabs": false,
+	"tabWidth": 4,
+	"singleQuote": true,
+	"trailingComma": "es5",
+	"printWidth": 100,
+	"overrides": [
+    {
+      "files": "**/*.svelte",
+      "options": {
+        "plugins": ["prettier-plugin-svelte"],
+		    "parser": "svelte"
+      }
+    }
+  ]
+}

.vscode/extensions.json

@@ -0,0 +1,7 @@
+{
+    "recommendations": [
+      "esbenp.prettier-vscode",
+      "svelte.svelte-vscode"
+    ]
+  }
+  

.vscode/settings.json

@@ -0,0 +1,13 @@
+{
+    "editor.formatOnSave": true,
+    "[javascript]": {
+      "editor.defaultFormatter": "esbenp.prettier-vscode"
+    },
+    "[typescript]": {
+      "editor.defaultFormatter": "esbenp.prettier-vscode"
+    },
+    "[svelte]": {
+      "editor.defaultFormatter": "svelte.svelte-vscode"
+    }
+  }
+  

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2024 gpx.studio
+Copyright (c) 2026 gpx.studio
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -3,11 +3,11 @@
   <img alt="Logo of gpx.studio." src="website/static/logo.svg">
 </picture>
 
-**gpx.studio** is an online tool for creating and editing GPX files.
+[**gpx.studio**](https://gpx.studio) is an online tool for creating and editing GPX files.
 
-![gpx.studio screenshot](website/src/lib/assets/img/docs/getting-started/interface.png)
+![gpx.studio screenshot](website/src/lib/assets/img/docs/getting-started/interface.webp)
 
-This repository contains the source code of the new website, currently available [here](https://gpx.studio/gpx.studio).
+This repository contains the source code of the website.
 
 ## Contributing
 
@@ -26,6 +26,7 @@ Any help is greatly appreciated!
 ## Development
 
 The code is split into two parts:
+
 - `gpx`: a Typescript library for parsing and manipulating GPX files,
 - `website`: the website itself, which is a [SvelteKit](https://kit.svelte.dev/) application.
 
@@ -41,11 +42,11 @@ npm run build
 
 ### Running the website
 
-To be able to load the map, you will need to create your own <a href="https://account.mapbox.com/auth/signup" target="_blank">Mapbox access token</a> and store it in a `.env` file in the `website` directory.
+To be able to load the map, you will need to create your own <a href="https://cloud.maptiler.com/auth/widget?next=https://cloud.maptiler.com/maps/" target="_blank">MapTiler key</a> and store it in a `.env` file in the `website` directory.
 
 ```bash
 cd website
-echo PUBLIC_MAPBOX_TOKEN={YOUR_MAPBOX_TOKEN} >> .env
+echo PUBLIC_MAPTILER_KEY={YOUR_MAPTILER_KEY} >> .env
 npm install
 npm run dev
 ```
@@ -55,23 +56,24 @@ npm run dev
 This project has been made possible thanks to the following open source projects:
 
 - Development:
-  - [Svelte](https://github.com/sveltejs/svelte) and [SvelteKit](https://github.com/sveltejs/kit) — seamless development experience
+    - [Svelte](https://github.com/sveltejs/svelte) and [SvelteKit](https://github.com/sveltejs/kit) — seamless development experience
-  - [MDsveX](https://github.com/pngwn/MDsveX) — allowing a Markdown-based documentation
+    - [MDsveX](https://github.com/pngwn/MDsveX) — allowing a Markdown-based documentation
-  - [svelte-i18n](https://github.com/kaisermann/svelte-i18n) — easy localization
 - Design:
-  - [shadcn-svelte](https://github.com/huntabyte/shadcn-svelte) — beautiful components
+    - [shadcn-svelte](https://github.com/huntabyte/shadcn-svelte) — beautiful components
-  - [lucide-svelte](https://github.com/lucide-icons/lucide/tree/main/packages/lucide-svelte) — beautiful icons
+    - [@lucide/svelte](https://github.com/lucide-icons/lucide/tree/main/packages/svelte) — beautiful icons
-  - [tailwindcss](https://github.com/tailwindlabs/tailwindcss) — easy styling
+    - [tailwindcss](https://github.com/tailwindlabs/tailwindcss) — easy styling
-  - [Chart.js](https://github.com/chartjs/Chart.js) — beautiful and fast charts
+    - [Chart.js](https://github.com/chartjs/Chart.js) — beautiful and fast charts
 - Logic:
-  - [immer](https://github.com/immerjs/immer) — complex state management
+    - [immer](https://github.com/immerjs/immer) — complex state management
-  - [Dexie.js](https://github.com/dexie/Dexie.js) — IndexedDB wrapper
+    - [Dexie.js](https://github.com/dexie/Dexie.js) — IndexedDB wrapper
-  - [fast-xml-parser](https://github.com/NaturalIntelligence/fast-xml-parser) — fast GPX file parsing
+    - [fast-xml-parser](https://github.com/NaturalIntelligence/fast-xml-parser) — fast GPX file parsing
-  - [SortableJS](https://github.com/SortableJS/Sortable) — creating a sortable file tree
+    - [SortableJS](https://github.com/SortableJS/Sortable) — creating a sortable file tree
 - Mapping:
-  - [Mapbox GL JS](https://github.com/mapbox/mapbox-gl-js) — beautiful and fast interactive maps
+    - [MapLibre GL JS](https://github.com/maplibre/maplibre-gl-js) — beautiful and fast interactive map rendering
-  - [brouter](https://github.com/abrensch/brouter) — routing engine
+    - [GraphHopper](https://github.com/graphhopper/graphhopper) — routing engine
-  - [OpenStreetMap](https://www.openstreetmap.org) — map data used by Mapbox and brouter
+    - [OpenStreetMap](https://www.openstreetmap.org) — map data used by most of the map layers, and by the routing engine
+- Search:
+    - [DocSearch](https://github.com/algolia/docsearch) — search engine for the documentation
 
 ## License
 

gpx/package.json

@@ -11,16 +11,21 @@
     },
     "private": true,
     "dependencies": {
-        "fast-xml-parser": "^4.4.0",
+        "fast-xml-parser": "^4.5.0",
-        "immer": "^10.1.1",
+        "immer": "^10.1.1"
-        "ts-node": "^10.9.2"
-    },
-    "scripts": {
-        "build": "tsc"
     },
     "devDependencies": {
         "@types/geojson": "^7946.0.14",
-        "@types/node": "^20.14.6",
+        "@types/node": "^20.16.10",
-        "typescript": "^5.4.5"
+        "@typescript-eslint/parser": "^8.22.0",
+        "prettier": "^3.4.2",
+        "ts-node": "^10.9.2",
+        "typescript": "^5.6.2"
+    },
+    "scripts": {
+        "build": "tsc",
+        "postinstall": "npm run build",
+        "lint": "prettier --check . --config ../.prettierrc && eslint .",
+        "format": "prettier --write . --config ../.prettierrc"
     }
 }

gpx/src/index.ts

@@ -1,5 +1,5 @@
 export * from './gpx';
+export * from './statistics';
 export { Coordinates, LineStyleExtension, WaypointType } from './types';
 export { parseGPX, buildGPX } from './io';
 export * from './simplify';
-

gpx/src/io.ts

@@ -1,25 +1,68 @@
-import { XMLParser, XMLBuilder } from "fast-xml-parser";
+import { XMLParser, XMLBuilder } from 'fast-xml-parser';
-import { GPXFileType } from "./types";
+import { GPXFileType } from './types';
-import { GPXFile } from "./gpx";
+import { GPXFile } from './gpx';
+
+const attributesWithNamespace = {
+    RoutePointExtension: 'gpxx:RoutePointExtension',
+    rpt: 'gpxx:rpt',
+    TrackPointExtension: 'gpxtpx:TrackPointExtension',
+    PowerExtension: 'gpxpx:PowerExtension',
+    atemp: 'gpxtpx:atemp',
+    hr: 'gpxtpx:hr',
+    cad: 'gpxtpx:cad',
+    Extensions: 'gpxtpx:Extensions',
+    PowerInWatts: 'gpxpx:PowerInWatts',
+    power: 'gpxpx:PowerExtension',
+    line: 'gpx_style:line',
+    color: 'gpx_style:color',
+    opacity: 'gpx_style:opacity',
+    width: 'gpx_style:width',
+};
+
+const floatPatterns = [
+    /[-+]?\d*\.\d+$/, // decimal
+    /[-+]?\d+$/, // integer
+];
+function safeParseFloat(value: string): number {
+    const parsed = parseFloat(value);
+    if (!isNaN(parsed)) {
+        return parsed;
+    }
+    for (const pattern of floatPatterns) {
+        const match = value.match(pattern);
+        if (match) {
+            return parseFloat(match[0]);
+        }
+    }
+    return 0.0;
+}
 
 export function parseGPX(gpxData: string): GPXFile {
     const parser = new XMLParser({
         ignoreAttributes: false,
-        attributeNamePrefix: "",
+        attributeNamePrefix: '',
         attributesGroupName: 'attributes',
+        removeNSPrefix: true,
         isArray(name: string) {
-            return name === 'trk' || name === 'trkseg' || name === 'trkpt' || name === 'wpt' || name === 'rte' || name === 'rtept' || name === 'gpxx:rpt';
+            return (
+                name === 'trk' ||
+                name === 'trkseg' ||
+                name === 'trkpt' ||
+                name === 'wpt' ||
+                name === 'rte' ||
+                name === 'rtept' ||
+                name === 'gpxx:rpt'
+            );
         },
         attributeValueProcessor(attrName, attrValue, jPath) {
             if (attrName === 'lat' || attrName === 'lon') {
-                return parseFloat(attrValue);
+                return safeParseFloat(attrValue);
             }
             return attrValue;
         },
         transformTagName(tagName: string) {
-            if (tagName === 'power') {
+            if (attributesWithNamespace[tagName]) {
-                // Transform the simple <power> tag to the more complex <gpxpx:PowerExtension> tag, the nested <gpxpx:PowerInWatts> tag is then handled by the tagValueProcessor
+                return attributesWithNamespace[tagName];
-                return 'gpxpx:PowerExtension';
             }
             return tagName;
         },
@@ -27,22 +70,29 @@ export function parseGPX(gpxData: string): GPXFile {
         tagValueProcessor(tagName, tagValue, jPath, hasAttributes, isLeafNode) {
             if (isLeafNode) {
                 if (tagName === 'ele') {
-                    return parseFloat(tagValue);
+                    return safeParseFloat(tagValue);
                 }
 
                 if (tagName === 'time') {
                     return new Date(tagValue);
                 }
 
-                if (tagName === 'gpxtpx:hr' || tagName === 'gpxtpx:cad' || tagName === 'gpxtpx:atemp' || tagName === 'gpxpx:PowerInWatts' || tagName === 'opacity' || tagName === 'weight') {
+                if (
-                    return parseFloat(tagValue);
+                    tagName === 'gpxtpx:atemp' ||
+                    tagName === 'gpxtpx:hr' ||
+                    tagName === 'gpxtpx:cad' ||
+                    tagName === 'gpxpx:PowerInWatts' ||
+                    tagName === 'gpx_style:opacity' ||
+                    tagName === 'gpx_style:width'
+                ) {
+                    return safeParseFloat(tagValue);
                 }
 
                 if (tagName === 'gpxpx:PowerExtension') {
                     // Finish the transformation of the simple <power> tag to the more complex <gpxpx:PowerExtension> tag
                     // Note that this only targets the transformed <power> tag, since it must be a leaf node
                     return {
-                        'gpxpx:PowerInWatts': parseFloat(tagValue)
+                        'gpxpx:PowerInWatts': safeParseFloat(tagValue),
                     };
                 }
             }
@@ -54,7 +104,7 @@ export function parseGPX(gpxData: string): GPXFile {
     const parsed: GPXFileType = parser.parse(gpxData).gpx;
 
     // @ts-ignore
-    if (parsed.metadata === "") {
+    if (parsed.metadata === '') {
         parsed.metadata = {};
     }
 
@@ -64,49 +114,67 @@ export function parseGPX(gpxData: string): GPXFile {
 export function buildGPX(file: GPXFile, exclude: string[]): string {
     const gpx = file.toGPXFileType(exclude);
 
+    let lastDate = undefined;
     const builder = new XMLBuilder({
         format: true,
         ignoreAttributes: false,
-        attributeNamePrefix: "",
+        attributeNamePrefix: '',
         attributesGroupName: 'attributes',
         suppressEmptyNode: true,
-        tagValueProcessor: (tagName: string, tagValue: unknown): string => {
+        tagValueProcessor: (tagName: string, tagValue: unknown): string | undefined => {
             if (tagValue instanceof Date) {
+                if (isNaN(tagValue.getTime())) {
+                    return lastDate?.toISOString();
+                }
+                lastDate = tagValue;
                 return tagValue.toISOString();
             }
             return tagValue.toString();
         },
     });
 
-    gpx.attributes.creator = gpx.attributes.creator ?? 'https://gpx.studio';
+    if (!gpx.attributes) gpx.attributes = {};
+    gpx.attributes['creator'] = gpx.attributes['creator'] ?? 'https://gpx.studio';
     gpx.attributes['version'] = '1.1';
     gpx.attributes['xmlns'] = 'http://www.topografix.com/GPX/1/1';
     gpx.attributes['xmlns:xsi'] = 'http://www.w3.org/2001/XMLSchema-instance';
-    gpx.attributes['xsi:schemaLocation'] = 'http://www.topografix.com/GPX/1/1 http://www.topografix.com/GPX/1/1/gpx.xsd http://www.garmin.com/xmlschemas/GpxExtensions/v3 http://www.garmin.com/xmlschemas/GpxExtensionsv3.xsd http://www.garmin.com/xmlschemas/TrackPointExtension/v1 http://www.garmin.com/xmlschemas/TrackPointExtensionv1.xsd http://www.garmin.com/xmlschemas/PowerExtension/v1 http://www.garmin.com/xmlschemas/PowerExtensionv1.xsd http://www.topografix.com/GPX/gpx_style/0/2 http://www.topografix.com/GPX/gpx_style/0/2/gpx_style.xsd';
+    gpx.attributes['xsi:schemaLocation'] =
+        'http://www.topografix.com/GPX/1/1 http://www.topografix.com/GPX/1/1/gpx.xsd http://www.garmin.com/xmlschemas/GpxExtensions/v3 http://www.garmin.com/xmlschemas/GpxExtensionsv3.xsd http://www.garmin.com/xmlschemas/TrackPointExtension/v1 http://www.garmin.com/xmlschemas/TrackPointExtensionv1.xsd http://www.garmin.com/xmlschemas/PowerExtension/v1 http://www.garmin.com/xmlschemas/PowerExtensionv1.xsd http://www.topografix.com/GPX/gpx_style/0/2 http://www.topografix.com/GPX/gpx_style/0/2/gpx_style.xsd';
     gpx.attributes['xmlns:gpxtpx'] = 'http://www.garmin.com/xmlschemas/TrackPointExtension/v1';
     gpx.attributes['xmlns:gpxx'] = 'http://www.garmin.com/xmlschemas/GpxExtensions/v3';
     gpx.attributes['xmlns:gpxpx'] = 'http://www.garmin.com/xmlschemas/PowerExtension/v1';
     gpx.attributes['xmlns:gpx_style'] = 'http://www.topografix.com/GPX/gpx_style/0/2';
-    gpx.metadata.author = {
-        name: 'gpx.studio',
-        link: {
-            attributes: {
-                href: 'https://gpx.studio',
-            }
-        }
-    };
 
     if (gpx.trk.length === 1 && (gpx.trk[0].name === undefined || gpx.trk[0].name === '')) {
         gpx.trk[0].name = gpx.metadata.name;
     }
 
     return builder.build({
-        "?xml": {
+        '?xml': {
             attributes: {
-                version: "1.0",
+                version: '1.0',
-                encoding: "UTF-8",
+                encoding: 'UTF-8',
-            }
+            },
         },
-        gpx
+        gpx: removeEmptyElements(gpx),
     });
 }
+
+function removeEmptyElements(obj: GPXFileType): GPXFileType {
+    for (const key in obj) {
+        if (
+            obj[key] === null ||
+            obj[key] === undefined ||
+            obj[key] === '' ||
+            (Array.isArray(obj[key]) && obj[key].length === 0)
+        ) {
+            delete obj[key];
+        } else if (typeof obj[key] === 'object' && !(obj[key] instanceof Date)) {
+            removeEmptyElements(obj[key]);
+            if (Object.keys(obj[key]).length === 0) {
+                delete obj[key];
+            }
+        }
+    }
+    return obj;
+}

gpx/src/simplify.ts

@@ -1,33 +1,46 @@
-import { TrackPoint } from "./gpx";
+import { TrackPoint } from './gpx';
-import { Coordinates } from "./types";
+import { Coordinates } from './types';
 
-export type SimplifiedTrackPoint = { point: TrackPoint, distance?: number };
+export type SimplifiedTrackPoint = { point: TrackPoint; distance?: number };
 
-const earthRadius = 6371008.8;
+export function ramerDouglasPeucker(
-
+    points: TrackPoint[],
-export function ramerDouglasPeucker(points: TrackPoint[], epsilon: number = 50, measure: (a: TrackPoint, b: TrackPoint, c: TrackPoint) => number = crossarcDistance): SimplifiedTrackPoint[] {
+    epsilon: number = 50,
+    measure: (a: TrackPoint, b: TrackPoint, c: TrackPoint) => number = crossarcDistance
+): SimplifiedTrackPoint[] {
     if (points.length == 0) {
         return [];
     } else if (points.length == 1) {
-        return [{
+        return [
-            point: points[0]
+            {
-        }];
+                point: points[0],
+            },
+        ];
     }
 
-    let simplified = [{
+    let simplified = [
-        point: points[0]
+        {
-    }];
+            point: points[0],
+        },
+    ];
     ramerDouglasPeuckerRecursive(points, epsilon, measure, 0, points.length - 1, simplified);
     simplified.push({
-        point: points[points.length - 1]
+        point: points[points.length - 1],
     });
     return simplified;
 }
 
-function ramerDouglasPeuckerRecursive(points: TrackPoint[], epsilon: number, measure: (a: TrackPoint, b: TrackPoint, c: TrackPoint) => number, start: number, end: number, simplified: SimplifiedTrackPoint[]) {
+function ramerDouglasPeuckerRecursive(
+    points: TrackPoint[],
+    epsilon: number,
+    measure: (a: TrackPoint, b: TrackPoint, c: TrackPoint) => number,
+    start: number,
+    end: number,
+    simplified: SimplifiedTrackPoint[]
+) {
     let largest = {
         index: 0,
-        distance: 0
+        distance: 0,
     };
 
     for (let i = start + 1; i < end; i++) {
@@ -45,60 +58,105 @@ function ramerDouglasPeuckerRecursive(points: TrackPoint[], epsilon: number, mea
     }
 }
 
-export function crossarcDistance(point1: TrackPoint, point2: TrackPoint, point3: TrackPoint | Coordinates): number {
+export function crossarcDistance(
-    return crossarc(point1.getCoordinates(), point2.getCoordinates(), point3 instanceof TrackPoint ? point3.getCoordinates() : point3);
+    point1: TrackPoint | Coordinates,
+    point2: TrackPoint | Coordinates,
+    point3: TrackPoint | Coordinates
+): number {
+    return crossarc(
+        point1 instanceof TrackPoint ? point1.getCoordinates() : point1,
+        point2 instanceof TrackPoint ? point2.getCoordinates() : point2,
+        point3 instanceof TrackPoint ? point3.getCoordinates() : point3
+    );
+}
+
+const metersPerLatitudeDegree = 111320;
+
+function getMetersPerLongitudeDegree(latitude: number): number {
+    return Math.cos((latitude * Math.PI) / 180) * metersPerLatitudeDegree;
 }
 
 function crossarc(coord1: Coordinates, coord2: Coordinates, coord3: Coordinates): number {
-    // Calculates the shortest distance in meters 
+    // Calculates the perpendicular distance in meters
-    // between an arc (defined by p1 and p2) and a third point, p3.
+    // between a line segment (defined by p1 and p2) and a third point, p3.
-    // Input lat1,lon1,lat2,lon2,lat3,lon3 in degrees.
+    // Uses simple planar geometry (ignores earth curvature).
 
-    const rad = Math.PI / 180;
+    // Convert to meters using approximate scaling
-    const lat1 = coord1.lat * rad;
+    const metersPerLongitudeDegree = getMetersPerLongitudeDegree(coord1.lat);
-    const lat2 = coord2.lat * rad;
-    const lat3 = coord3.lat * rad;
 
-    const lon1 = coord1.lon * rad;
+    const x1 = coord1.lon * metersPerLongitudeDegree;
-    const lon2 = coord2.lon * rad;
+    const y1 = coord1.lat * metersPerLatitudeDegree;
-    const lon3 = coord3.lon * rad;
+    const x2 = coord2.lon * metersPerLongitudeDegree;
+    const y2 = coord2.lat * metersPerLatitudeDegree;
+    const x3 = coord3.lon * metersPerLongitudeDegree;
+    const y3 = coord3.lat * metersPerLatitudeDegree;
 
-    // Prerequisites for the formulas
+    const dx = x2 - x1;
-    const bear12 = bearing(lat1, lon1, lat2, lon2);
+    const dy = y2 - y1;
-    const bear13 = bearing(lat1, lon1, lat3, lon3);
+    const segmentLengthSquared = dx * dx + dy * dy;
-    let dis13 = distance(lat1, lon1, lat3, lon3);
 
-    let diff = Math.abs(bear13 - bear12);
+    if (segmentLengthSquared === 0) {
-    if (diff > Math.PI) {
+        // p1 and p2 are the same point
-        diff = 2 * Math.PI - diff;
+        return Math.sqrt((x3 - x1) * (x3 - x1) + (y3 - y1) * (y3 - y1));
     }
 
-    // Is relative bearing obtuse?
+    // Project p3 onto the line defined by p1-p2
-    if (diff > (Math.PI / 2)) {
+    const t = Math.max(0, Math.min(1, ((x3 - x1) * dx + (y3 - y1) * dy) / segmentLengthSquared));
-        return dis13;
+
+    // Find the closest point on the segment
+    const projX = x1 + t * dx;
+    const projY = y1 + t * dy;
+
+    // Return distance from p3 to the projected point
+    return Math.sqrt((x3 - projX) * (x3 - projX) + (y3 - projY) * (y3 - projY));
+}
+
+export function projectedPoint(
+    point1: TrackPoint,
+    point2: TrackPoint,
+    point3: TrackPoint | Coordinates
+): Coordinates {
+    return projected(
+        point1.getCoordinates(),
+        point2.getCoordinates(),
+        point3 instanceof TrackPoint ? point3.getCoordinates() : point3
+    );
+}
+
+function projected(coord1: Coordinates, coord2: Coordinates, coord3: Coordinates): Coordinates {
+    // Calculates the point on the line segment defined by p1 and p2
+    // that is closest to the third point, p3.
+    // Uses simple planar geometry (ignores earth curvature).
+
+    // Convert to meters using approximate scaling
+    const metersPerLongitudeDegree = getMetersPerLongitudeDegree(coord1.lat);
+
+    const x1 = coord1.lon * metersPerLongitudeDegree;
+    const y1 = coord1.lat * metersPerLatitudeDegree;
+    const x2 = coord2.lon * metersPerLongitudeDegree;
+    const y2 = coord2.lat * metersPerLatitudeDegree;
+    const x3 = coord3.lon * metersPerLongitudeDegree;
+    const y3 = coord3.lat * metersPerLatitudeDegree;
+
+    const dx = x2 - x1;
+    const dy = y2 - y1;
+    const segmentLengthSquared = dx * dx + dy * dy;
+
+    if (segmentLengthSquared === 0) {
+        // p1 and p2 are the same point
+        return coord1;
     }
 
-    // Find the cross-track distance.
+    // Project p3 onto the line defined by p1-p2
-    let dxt = Math.asin(Math.sin(dis13 / earthRadius) * Math.sin(bear13 - bear12)) * earthRadius;
+    const t = Math.max(0, Math.min(1, ((x3 - x1) * dx + (y3 - y1) * dy) / segmentLengthSquared));
 
-    // Is p4 beyond the arc?
+    // Find the closest point on the segment
-    let dis12 = distance(lat1, lon1, lat2, lon2);
+    const projX = x1 + t * dx;
-    let dis14 = Math.acos(Math.cos(dis13 / earthRadius) / Math.cos(dxt / earthRadius)) * earthRadius;
+    const projY = y1 + t * dy;
-    if (dis14 > dis12) {
+
-        return distance(lat2, lon2, lat3, lon3);
+    // Convert back to degrees
-    } else {
+    return {
-        return Math.abs(dxt);
+        lat: projY / metersPerLatitudeDegree,
-    }
+        lon: projX / metersPerLongitudeDegree,
-}
+    };
-
-function distance(latA: number, lonA: number, latB: number, lonB: number): number {
-    // Finds the distance between two lat / lon points.
-    return Math.acos(Math.sin(latA) * Math.sin(latB) + Math.cos(latA) * Math.cos(latB) * Math.cos(lonB - lonA)) * earthRadius;
-}
-
-
-function bearing(latA: number, lonA: number, latB: number, lonB: number): number {
-    // Finds the bearing from one lat / lon point to another.
-    return Math.atan2(Math.sin(lonB - lonA) * Math.cos(latB),
-        Math.cos(latA) * Math.sin(latB) - Math.sin(latA) * Math.cos(latB) * Math.cos(lonB - lonA));
 }

gpx/src/statistics.ts

@@ -0,0 +1,391 @@
+import { TrackPoint } from './gpx';
+import { Coordinates } from './types';
+
+export class GPXGlobalStatistics {
+    length: number;
+    distance: {
+        moving: number;
+        total: number;
+    };
+    time: {
+        start: Date | undefined;
+        end: Date | undefined;
+        moving: number;
+        total: number;
+    };
+    speed: {
+        moving: number;
+        total: number;
+    };
+    elevation: {
+        gain: number;
+        loss: number;
+    };
+    bounds: {
+        southWest: Coordinates;
+        northEast: Coordinates;
+    };
+    atemp: {
+        avg: number;
+        count: number;
+    };
+    hr: {
+        avg: number;
+        count: number;
+    };
+    cad: {
+        avg: number;
+        count: number;
+    };
+    power: {
+        avg: number;
+        count: number;
+    };
+    extensions: Record<string, Record<string, number>>;
+
+    constructor() {
+        this.length = 0;
+        this.distance = {
+            moving: 0,
+            total: 0,
+        };
+        this.time = {
+            start: undefined,
+            end: undefined,
+            moving: 0,
+            total: 0,
+        };
+        this.speed = {
+            moving: 0,
+            total: 0,
+        };
+        this.elevation = {
+            gain: 0,
+            loss: 0,
+        };
+        this.bounds = {
+            southWest: {
+                lat: 90,
+                lon: 180,
+            },
+            northEast: {
+                lat: -90,
+                lon: -180,
+            },
+        };
+        this.atemp = {
+            avg: 0,
+            count: 0,
+        };
+        this.hr = {
+            avg: 0,
+            count: 0,
+        };
+        this.cad = {
+            avg: 0,
+            count: 0,
+        };
+        this.power = {
+            avg: 0,
+            count: 0,
+        };
+        this.extensions = {};
+    }
+
+    mergeWith(other: GPXGlobalStatistics): void {
+        this.length += other.length;
+
+        this.distance.total += other.distance.total;
+        this.distance.moving += other.distance.moving;
+
+        this.time.start =
+            this.time.start !== undefined && other.time.start !== undefined
+                ? new Date(Math.min(this.time.start.getTime(), other.time.start.getTime()))
+                : (this.time.start ?? other.time.start);
+        this.time.end =
+            this.time.end !== undefined && other.time.end !== undefined
+                ? new Date(Math.max(this.time.end.getTime(), other.time.end.getTime()))
+                : (this.time.end ?? other.time.end);
+
+        this.time.total += other.time.total;
+        this.time.moving += other.time.moving;
+
+        this.speed.moving =
+            this.time.moving > 0 ? this.distance.moving / (this.time.moving / 3600) : 0;
+        this.speed.total = this.time.total > 0 ? this.distance.total / (this.time.total / 3600) : 0;
+
+        this.elevation.gain += other.elevation.gain;
+        this.elevation.loss += other.elevation.loss;
+
+        this.bounds.southWest.lat = Math.min(this.bounds.southWest.lat, other.bounds.southWest.lat);
+        this.bounds.southWest.lon = Math.min(this.bounds.southWest.lon, other.bounds.southWest.lon);
+        this.bounds.northEast.lat = Math.max(this.bounds.northEast.lat, other.bounds.northEast.lat);
+        this.bounds.northEast.lon = Math.max(this.bounds.northEast.lon, other.bounds.northEast.lon);
+
+        this.atemp.avg =
+            (this.atemp.count * this.atemp.avg + other.atemp.count * other.atemp.avg) /
+            Math.max(1, this.atemp.count + other.atemp.count);
+        this.atemp.count += other.atemp.count;
+        this.hr.avg =
+            (this.hr.count * this.hr.avg + other.hr.count * other.hr.avg) /
+            Math.max(1, this.hr.count + other.hr.count);
+        this.hr.count += other.hr.count;
+        this.cad.avg =
+            (this.cad.count * this.cad.avg + other.cad.count * other.cad.avg) /
+            Math.max(1, this.cad.count + other.cad.count);
+        this.cad.count += other.cad.count;
+        this.power.avg =
+            (this.power.count * this.power.avg + other.power.count * other.power.avg) /
+            Math.max(1, this.power.count + other.power.count);
+        this.power.count += other.power.count;
+
+        Object.keys(other.extensions).forEach((extension) => {
+            if (this.extensions[extension] === undefined) {
+                this.extensions[extension] = {};
+            }
+            Object.keys(other.extensions[extension]).forEach((value) => {
+                if (this.extensions[extension][value] === undefined) {
+                    this.extensions[extension][value] = 0;
+                }
+                this.extensions[extension][value] += other.extensions[extension][value];
+            });
+        });
+    }
+}
+
+export class TrackPointLocalStatistics {
+    distance: {
+        moving: number;
+        total: number;
+    };
+    time: {
+        moving: number;
+        total: number;
+    };
+    speed: number;
+    elevation: {
+        gain: number;
+        loss: number;
+    };
+    slope: {
+        at: number;
+        segment: number;
+        length: number;
+    };
+
+    constructor() {
+        this.distance = {
+            moving: 0,
+            total: 0,
+        };
+        this.time = {
+            moving: 0,
+            total: 0,
+        };
+        this.speed = 0;
+        this.elevation = {
+            gain: 0,
+            loss: 0,
+        };
+        this.slope = {
+            at: 0,
+            segment: 0,
+            length: 0,
+        };
+    }
+}
+
+export class GPXLocalStatistics {
+    points: TrackPoint[];
+    data: TrackPointLocalStatistics[];
+
+    constructor() {
+        this.points = [];
+        this.data = [];
+    }
+}
+
+export type TrackPointWithLocalStatistics = {
+    trkpt: TrackPoint;
+} & TrackPointLocalStatistics;
+
+export class GPXStatistics {
+    global: GPXGlobalStatistics;
+    local: GPXLocalStatistics;
+
+    constructor() {
+        this.global = new GPXGlobalStatistics();
+        this.local = new GPXLocalStatistics();
+    }
+
+    sliced(start: number, end: number): GPXGlobalStatistics {
+        if (start < 0) {
+            start = 0;
+        } else if (start >= this.global.length) {
+            return new GPXGlobalStatistics();
+        }
+
+        if (end < start) {
+            return new GPXGlobalStatistics();
+        } else if (end >= this.global.length) {
+            end = this.global.length - 1;
+        }
+
+        if (start === 0 && end === this.global.length - 1) {
+            return this.global;
+        }
+
+        let statistics = new GPXGlobalStatistics();
+
+        statistics.length = end - start + 1;
+
+        statistics.distance.total =
+            this.local.data[end].distance.total - this.local.data[start].distance.total;
+        statistics.distance.moving =
+            this.local.data[end].distance.moving - this.local.data[start].distance.moving;
+
+        statistics.time.start = this.local.points[start].time;
+        statistics.time.end = this.local.points[end].time;
+
+        statistics.time.total = this.local.data[end].time.total - this.local.data[start].time.total;
+        statistics.time.moving =
+            this.local.data[end].time.moving - this.local.data[start].time.moving;
+
+        statistics.speed.moving =
+            statistics.time.moving > 0
+                ? statistics.distance.moving / (statistics.time.moving / 3600)
+                : 0;
+        statistics.speed.total =
+            statistics.time.total > 0
+                ? statistics.distance.total / (statistics.time.total / 3600)
+                : 0;
+
+        statistics.elevation.gain =
+            this.local.data[end].elevation.gain - this.local.data[start].elevation.gain;
+        statistics.elevation.loss =
+            this.local.data[end].elevation.loss - this.local.data[start].elevation.loss;
+
+        statistics.bounds.southWest.lat = this.global.bounds.southWest.lat;
+        statistics.bounds.southWest.lon = this.global.bounds.southWest.lon;
+        statistics.bounds.northEast.lat = this.global.bounds.northEast.lat;
+        statistics.bounds.northEast.lon = this.global.bounds.northEast.lon;
+
+        statistics.atemp = this.global.atemp;
+        statistics.hr = this.global.hr;
+        statistics.cad = this.global.cad;
+        statistics.power = this.global.power;
+
+        return statistics;
+    }
+}
+
+export class GPXStatisticsGroup {
+    private _statistics: GPXStatistics[];
+    private _cumulative: GPXGlobalStatistics[];
+    private _slice: [number, number] | null = null;
+    global: GPXGlobalStatistics;
+
+    constructor() {
+        this._statistics = [];
+        this._cumulative = [new GPXGlobalStatistics()];
+        this.global = new GPXGlobalStatistics();
+    }
+
+    add(statistics: GPXStatistics | GPXStatisticsGroup): void {
+        if (statistics instanceof GPXStatisticsGroup) {
+            statistics._statistics.forEach((stats) => this._add(stats));
+        } else {
+            this._add(statistics);
+        }
+    }
+
+    _add(statistics: GPXStatistics): void {
+        this._statistics.push(statistics);
+        const cumulative = new GPXGlobalStatistics();
+        cumulative.mergeWith(this._cumulative[this._cumulative.length - 1]);
+        cumulative.mergeWith(statistics.global);
+        this._cumulative.push(cumulative);
+        this.global.mergeWith(statistics.global);
+    }
+
+    sliced(start: number, end: number): GPXGlobalStatistics {
+        let sliced = new GPXGlobalStatistics();
+        for (let i = 0; i < this._statistics.length; i++) {
+            const statistics = this._statistics[i];
+            const cumulative = this._cumulative[i];
+            if (start < cumulative.length + statistics.global.length && end >= cumulative.length) {
+                const localStart = Math.max(0, start - cumulative.length);
+                const localEnd = Math.min(statistics.global.length - 1, end - cumulative.length);
+                sliced.mergeWith(statistics.sliced(localStart, localEnd));
+            }
+        }
+        return sliced;
+    }
+
+    getTrackPoint(index: number): TrackPointWithLocalStatistics | undefined {
+        if (this._slice !== null) {
+            index += this._slice[0];
+        }
+        for (let i = 0; i < this._statistics.length; i++) {
+            const statistics = this._statistics[i];
+            const cumulative = this._cumulative[i];
+            if (index < cumulative.length + statistics.global.length) {
+                return this._getTrackPoint(cumulative, statistics, index - cumulative.length);
+            }
+        }
+        return undefined;
+    }
+
+    _getTrackPoint(
+        cumulative: GPXGlobalStatistics,
+        statistics: GPXStatistics,
+        index: number
+    ): TrackPointWithLocalStatistics {
+        const point = statistics.local.points[index];
+        return {
+            trkpt: point,
+            distance: {
+                moving: statistics.local.data[index].distance.moving + cumulative.distance.moving,
+                total: statistics.local.data[index].distance.total + cumulative.distance.total,
+            },
+            time: {
+                moving: statistics.local.data[index].time.moving + cumulative.time.moving,
+                total: statistics.local.data[index].time.total + cumulative.time.total,
+            },
+            speed: statistics.local.data[index].speed,
+            elevation: {
+                gain: statistics.local.data[index].elevation.gain + cumulative.elevation.gain,
+                loss: statistics.local.data[index].elevation.loss + cumulative.elevation.loss,
+            },
+            slope: {
+                at: statistics.local.data[index].slope.at,
+                segment: statistics.local.data[index].slope.segment,
+                length: statistics.local.data[index].slope.length,
+            },
+        };
+    }
+
+    forEachTrackPoint(
+        callback: (
+            point: TrackPoint,
+            distance: number,
+            speed: number,
+            slope: { at: number; segment: number; length: number },
+            index: number
+        ) => void
+    ): void {
+        for (let i = 0; i < this._statistics.length; i++) {
+            const statistics = this._statistics[i];
+            const cumulative = this._cumulative[i];
+            statistics.local.points.forEach((point, index) =>
+                callback(
+                    point,
+                    cumulative.distance.total + statistics.local.data[index].distance.total,
+                    statistics.local.data[index].speed,
+                    statistics.local.data[index].slope,
+                    cumulative.length + index
+                )
+            );
+        }
+    }
+}

gpx/src/types.ts

@@ -58,8 +58,8 @@ export type TrackType = {
     src?: string;
     link?: Link;
     type?: string;
-    trkseg: TrackSegmentType[];
     extensions?: TrackExtensions;
+    trkseg: TrackSegmentType[];
 };
 
 export type TrackExtensions = {
@@ -67,9 +67,9 @@ export type TrackExtensions = {
 };
 
 export type LineStyleExtension = {
-    color?: string;
+    'gpx_style:color'?: string;
-    opacity?: number;
+    'gpx_style:opacity'?: number;
-    weight?: number;
+    'gpx_style:width'?: number;
 };
 
 export type TrackSegmentType = {
@@ -89,17 +89,15 @@ export type TrackPointExtensions = {
 };
 
 export type TrackPointExtension = {
+    'gpxtpx:atemp'?: number;
     'gpxtpx:hr'?: number;
     'gpxtpx:cad'?: number;
-    'gpxtpx:atemp'?: number;
+    'gpxtpx:Extensions'?: Record<string, string>;
-    'gpxtpx:Extensions'?: {
+};
-        surface?: string;
-    };
-}
 
 export type PowerExtension = {
     'gpxpx:PowerInWatts'?: number;
-}
+};
 
 export type Author = {
     name?: string;
@@ -116,12 +114,12 @@ export type RouteType = {
     type?: string;
     extensions?: TrackExtensions;
     rtept: WaypointType[];
-}
+};
 
 export type RoutePointExtension = {
     'gpxx:rpt'?: GPXXRoutePoint[];
-}
+};
 
 export type GPXXRoutePoint = {
     attributes: Coordinates;
-}
+};

gpx/test-data/with_routes.gpx

@@ -0,0 +1,253 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<gpx xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+    xmlns="http://www.topografix.com/GPX/1/1" xsi:schemaLocation="http://www.topografix.com/GPX/1/1 http://www.topografix.com/GPX/1/1/gpx.xsd http://www.garmin.com/xmlschemas/GpxExtensions/v3 http://www.garmin.com/xmlschemas/GpxExtensionsv3.xsd http://www.garmin.com/xmlschemas/TrackPointExtension/v1 http://www.garmin.com/xmlschemas/TrackPointExtensionv1.xsd http://www.topografix.com/GPX/gpx_style/0/2 http://www.topografix.com/GPX/gpx_style/0/2/gpx_style.xsd"
+    xmlns:gpxtpx="http://www.garmin.com/xmlschemas/TrackPointExtension/v1"
+    xmlns:gpxx="http://www.garmin.com/xmlschemas/GpxExtensions/v3"
+    xmlns:gpx_style="http://www.topografix.com/GPX/gpx_style/0/2" version="1.1" creator="https://gpx.studio">
+    <metadata>
+        <name>with_routes</name>
+        <author>
+            <name>gpx.studio</name>
+            <link href="https://gpx.studio"></link>
+        </author>
+    </metadata>
+    <rte>
+        <name>route 1</name>
+        <type>Cycling</type>
+        <rtept lat="50.790867" lon="4.404968">
+            <ele>109.0</ele>
+        </rtept>
+        <rtept lat="50.790714" lon="4.405036">
+            <ele>110.8</ele>
+        </rtept>
+        <rtept lat="50.790336" lon="4.405259">
+            <ele>110.3</ele>
+        </rtept>
+        <rtept lat="50.790165" lon="4.405331">
+            <ele>110.0</ele>
+        </rtept>
+        <rtept lat="50.790008" lon="4.405359">
+            <ele>110.3</ele>
+        </rtept>
+        <rtept lat="50.789818" lon="4.405359">
+            <ele>109.3</ele>
+        </rtept>
+        <rtept lat="50.789409" lon="4.40534">
+            <ele>107.0</ele>
+        </rtept>
+        <rtept lat="50.789105" lon="4.405411">
+            <ele>106.0</ele>
+        </rtept>
+        <rtept lat="50.788799" lon="4.405527">
+            <ele>108.5</ele>
+        </rtept>
+        <rtept lat="50.788645" lon="4.405606">
+            <ele>109.8</ele>
+        </rtept>
+        <rtept lat="50.7885" lon="4.405711">
+            <ele>110.8</ele>
+        </rtept>
+        <rtept lat="50.78822" lon="4.405959">
+            <ele>112.0</ele>
+        </rtept>
+        <rtept lat="50.787956" lon="4.406092">
+            <ele>112.8</ele>
+        </rtept>
+        <rtept lat="50.787814" lon="4.406143">
+            <ele>113.5</ele>
+        </rtept>
+        <rtept lat="50.787674" lon="4.406177">
+            <ele>114.3</ele>
+        </rtept>
+        <rtept lat="50.787451" lon="4.406199">
+            <ele>115.3</ele>
+        </rtept>
+        <rtept lat="50.787297" lon="4.406177">
+            <ele>114.8</ele>
+        </rtept>
+        <rtept lat="50.78716" lon="4.406098">
+            <ele>114.3</ele>
+        </rtept>
+        <rtept lat="50.787045" lon="4.405984">
+            <ele>114.3</ele>
+        </rtept>
+        <rtept lat="50.786683" lon="4.405653">
+            <ele>114.5</ele>
+        </rtept>
+        <rtept lat="50.786538" lon="4.405543">
+            <ele>115.0</ele>
+        </rtept>
+        <rtept lat="50.78635" lon="4.405441">
+            <ele>115.8</ele>
+        </rtept>
+        <rtept lat="50.786275" lon="4.40542">
+            <ele>115.8</ele>
+        </rtept>
+        <rtept lat="50.786182" lon="4.405435">
+            <ele>116.0</ele>
+        </rtept>
+        <rtept lat="50.786121" lon="4.405475">
+            <ele>115.8</ele>
+        </rtept>
+        <rtept lat="50.786042" lon="4.405558">
+            <ele>115.5</ele>
+        </rtept>
+        <rtept lat="50.785821" lon="4.405925">
+            <ele>114.5</ele>
+        </rtept>
+        <rtept lat="50.785672" lon="4.406119">
+            <ele>112.5</ele>
+        </rtept>
+        <rtept lat="50.785516" lon="4.406256">
+            <ele>110.8</ele>
+        </rtept>
+        <rtept lat="50.785384" lon="4.406364">
+            <ele>109.0</ele>
+        </rtept>
+        <rtept lat="50.785126" lon="4.406475">
+            <ele>106.3</ele>
+        </rtept>
+        <rtept lat="50.784697" lon="4.406537">
+            <ele>104.3</ele>
+        </rtept>
+        <rtept lat="50.784591" lon="4.40657">
+            <ele>104.0</ele>
+        </rtept>
+        <rtept lat="50.784507" lon="4.406612">
+            <ele>103.8</ele>
+        </rtept>
+        <rtept lat="50.784435" lon="4.40669">
+            <ele>103.3</ele>
+        </rtept>
+        <rtept lat="50.784209" lon="4.407148">
+            <ele>103.5</ele>
+        </rtept>
+        <rtept lat="50.784162" lon="4.407257">
+            <ele>103.8</ele>
+        </rtept>
+        <rtept lat="50.784077" lon="4.407372">
+            <ele>104.8</ele>
+        </rtept>
+        <rtept lat="50.784006" lon="4.407435">
+            <ele>105.8</ele>
+        </rtept>
+        <rtept lat="50.783924" lon="4.407471">
+            <ele>106.8</ele>
+        </rtept>
+        <rtept lat="50.783837" lon="4.407486">
+            <ele>107.8</ele>
+        </rtept>
+        <rtept lat="50.783771" lon="4.407472">
+            <ele>108.5</ele>
+        </rtept>
+        <rtept lat="50.783697" lon="4.407428">
+            <ele>109.3</ele>
+        </rtept>
+        <rtept lat="50.783626" lon="4.407363">
+            <ele>110.0</ele>
+        </rtept>
+        <rtept lat="50.783548" lon="4.407274">
+            <ele>110.5</ele>
+        </rtept>
+        <rtept lat="50.783458" lon="4.407134">
+            <ele>110.8</ele>
+        </rtept>
+        <rtept lat="50.783123" lon="4.406435">
+            <ele>111.8</ele>
+        </rtept>
+        <rtept lat="50.782982" lon="4.406168">
+            <ele>112.8</ele>
+        </rtept>
+        <rtept lat="50.782871" lon="4.406044">
+            <ele>113.3</ele>
+        </rtept>
+    </rte>
+    <rte>
+        <name>route 2</name>
+        <type>Cycling</type>
+        <rtept lat="50.782212" lon="4.406377">
+            <ele>115.5</ele>
+        </rtept>
+        <rtept lat="50.782175" lon="4.406413">
+            <ele>115.8</ele>
+        </rtept>
+        <rtept lat="50.781749" lon="4.407018">
+            <ele>118.5</ele>
+        </rtept>
+        <rtept lat="50.781654" lon="4.407316">
+            <ele>119.5</ele>
+        </rtept>
+        <rtept lat="50.781563" lon="4.407764">
+            <ele>121.3</ele>
+        </rtept>
+        <rtept lat="50.781487" lon="4.407984">
+            <ele>122.0</ele>
+        </rtept>
+        <rtept lat="50.781422" lon="4.408216">
+            <ele>122.8</ele>
+        </rtept>
+        <rtept lat="50.781395" lon="4.408508">
+            <ele>123.5</ele>
+        </rtept>
+        <rtept lat="50.781399" lon="4.409114">
+            <ele>126.3</ele>
+        </rtept>
+        <rtept lat="50.781367" lon="4.409428">
+            <ele>128.0</ele>
+        </rtept>
+        <rtept lat="50.781286" lon="4.409607">
+            <ele>129.0</ele>
+        </rtept>
+        <rtept lat="50.78116" lon="4.409789">
+            <ele>130.0</ele>
+        </rtept>
+        <rtept lat="50.780804" lon="4.409993">
+            <ele>130.8</ele>
+        </rtept>
+        <rtept lat="50.780389" lon="4.410334">
+            <ele>131.8</ele>
+        </rtept>
+        <rtept lat="50.780232" lon="4.410563">
+            <ele>132.3</ele>
+        </rtept>
+        <rtept lat="50.780094" lon="4.410827">
+            <ele>132.8</ele>
+        </rtept>
+        <rtept lat="50.779723" lon="4.411582">
+            <ele>135.8</ele>
+        </rtept>
+        <rtept lat="50.779591" lon="4.411791">
+            <ele>135.5</ele>
+        </rtept>
+        <rtept lat="50.779125" lon="4.412435">
+            <ele>132.5</ele>
+        </rtept>
+        <rtept lat="50.778676" lon="4.412979">
+            <ele>134.0</ele>
+        </rtept>
+        <rtept lat="50.778194" lon="4.413466">
+            <ele>136.8</ele>
+        </rtept>
+        <rtept lat="50.777427" lon="4.414302">
+            <ele>137.5</ele>
+        </rtept>
+        <rtept lat="50.777165" lon="4.414736">
+            <ele>137.3</ele>
+        </rtept>
+        <rtept lat="50.776927" lon="4.415201">
+            <ele>137.5</ele>
+        </rtept>
+        <rtept lat="50.776778" lon="4.415613">
+            <ele>137.3</ele>
+        </rtept>
+        <rtept lat="50.776553" lon="4.416425">
+            <ele>134.8</ele>
+        </rtept>
+        <rtept lat="50.776326" lon="4.417304">
+            <ele>132.3</ele>
+        </rtept>
+        <rtept lat="50.776129" lon="4.418383">
+            <ele>129.5</ele>
+        </rtept>
+    </rte>
+</gpx>

gpx/test-data/with_style.gpx

@@ -16,9 +16,9 @@
         <type>Cycling</type>
         <extensions>
             <gpx_style:line>
-                <color>#2d3ee9</color>
+                <gpx_style:color>2d3ee9</gpx_style:color>
-                <opacity>0.5</opacity>
+                <gpx_style:opacity>0.5</gpx_style:opacity>
-                <weight>6</weight>
+                <gpx_style:width>6</gpx_style:width>
             </gpx_style:line>
         </extensions>
         <trkseg>

gpx/tsconfig.json

@@ -4,9 +4,7 @@
         "target": "ES2015",
         "declaration": true,
         "outDir": "./dist",
-        "moduleResolution": "node",
+        "moduleResolution": "node"
     },
-    "include": [
+    "include": ["src"]
-        "src"
-    ],
 }

website/.env.example

@@ -1 +1 @@
-PUBLIC_MAPBOX_TOKEN=YOUR_MAPBOX_TOKEN
+PUBLIC_MAPTILER_KEY=YOUR_MAPTILER_KEY

website/.eslintrc.cjs

@@ -1,31 +1,31 @@
 /** @type { import("eslint").Linter.Config } */
 module.exports = {
-	root: true,
+    root: true,
-	extends: [
+    extends: [
-		'eslint:recommended',
+        'eslint:recommended',
-		'plugin:@typescript-eslint/recommended',
+        'plugin:@typescript-eslint/recommended',
-		'plugin:svelte/recommended',
+        'plugin:svelte/recommended',
-		'prettier'
+        'prettier',
-	],
+    ],
-	parser: '@typescript-eslint/parser',
+    parser: '@typescript-eslint/parser',
-	plugins: ['@typescript-eslint'],
+    plugins: ['@typescript-eslint'],
-	parserOptions: {
+    parserOptions: {
-		sourceType: 'module',
+        sourceType: 'module',
-		ecmaVersion: 2020,
+        ecmaVersion: 2020,
-		extraFileExtensions: ['.svelte']
+        extraFileExtensions: ['.svelte'],
-	},
+    },
-	env: {
+    env: {
-		browser: true,
+        browser: true,
-		es2017: true,
+        es2017: true,
-		node: true
+        node: true,
-	},
+    },
-	overrides: [
+    overrides: [
-		{
+        {
-			files: ['*.svelte'],
+            files: ['*.svelte'],
-			parser: 'svelte-eslint-parser',
+            parser: 'svelte-eslint-parser',
-			parserOptions: {
+            parserOptions: {
-				parser: '@typescript-eslint/parser'
+                parser: '@typescript-eslint/parser',
-			}
+            },
-		}
+        },
-	]
+    ],
 };

website/.gitignore

@@ -8,3 +8,5 @@ node_modules
 !.env.example
 vite.config.js.timestamp-*
 vite.config.ts.timestamp-*
+static/*.webmanifest
+!static/en.manifest.webmanifest

website/.prettierignore

@@ -1,4 +0,0 @@
-# Ignore files for PNPM, NPM and YARN
-pnpm-lock.yaml
-package-lock.json
-yarn.lock

website/.prettierrc

@@ -1,8 +0,0 @@
-{
-	"useTabs": true,
-	"singleQuote": true,
-	"trailingComma": "none",
-	"printWidth": 100,
-	"plugins": ["prettier-plugin-svelte"],
-	"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
-}

website/components.json

@@ -1,14 +1,20 @@
 {
 	"$schema": "https://shadcn-svelte.com/schema.json",
-	"style": "default",
 	"tailwind": {
-		"config": "tailwind.config.js",
 		"css": "src/app.css",
-		"baseColor": "slate"
+		"baseColor": "neutral"
 	},
 	"aliases": {
 		"components": "$lib/components",
-		"utils": "$lib/utils"
+		"utils": "$lib/utils",
+		"ui": "$lib/components/ui",
+		"hooks": "$lib/hooks",
+		"lib": "$lib"
 	},
-	"typescript": true
+	"typescript": true,
+	"registry": "https://shadcn-svelte.com/registry",
+	"style": "nova",
+	"iconLibrary": "lucide",
+	"menuColor": "default",
+	"menuAccent": "subtle"
 }

website/package.json

@@ -5,69 +5,78 @@
     "scripts": {
         "dev": "vite dev",
         "build": "vite build",
-        "postbuild": "npx tsx src/lib/sitemap.ts",
+        "prebuild": "npx tsx src/lib/scripts/pwa-manifest.ts",
+        "postbuild": "npx tsx src/lib/scripts/sitemap.ts",
         "preview": "vite preview",
         "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
         "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-        "lint": "prettier --check . && eslint .",
+        "lint": "prettier --check . --config ../.prettierrc --ignore-path ../.prettierignore --ignore-path ./.gitignore && eslint .",
-        "format": "prettier --write ."
+        "format": "prettier --write . --config ../.prettierrc --ignore-path ../.prettierignore --ignore-path ./.gitignore"
     },
     "devDependencies": {
-        "@sveltejs/adapter-auto": "^3.2.2",
+        "@fontsource-variable/inter": "^5.2.8",
-        "@sveltejs/adapter-static": "^3.0.2",
+        "@internationalized/date": "^3.12.0",
-        "@sveltejs/enhanced-img": "^0.3.0",
+        "@lucide/svelte": "^1.7.0",
-        "@sveltejs/kit": "^2.5.17",
+        "@sveltejs/adapter-static": "^3.0.8",
-        "@sveltejs/vite-plugin-svelte": "^3.1.1",
+        "@sveltejs/enhanced-img": "^0.6.0",
-        "@types/eslint": "^8.56.10",
+        "@sveltejs/kit": "^2.21.2",
+        "@sveltejs/vite-plugin-svelte": "^5.1.0",
+        "@tailwindcss/vite": "^4.1.8",
+        "@types/eslint": "^9.6.1",
         "@types/events": "^3.0.3",
-        "@types/mapbox__mapbox-gl-geocoder": "^5.0.0",
+        "@types/file-saver": "^2.0.7",
-        "@types/mapbox-gl": "^3.1.0",
+        "@types/mapbox__sphericalmercator": "^1.2.3",
-        "@types/node": "^20.14.6",
+        "@types/mapbox__tilebelt": "^1.0.4",
-        "@types/sanitize-html": "^2.11.0",
+        "@types/node": "^22.15.30",
+        "@types/sanitize-html": "^2.16.0",
         "@types/sortablejs": "^1.15.8",
-        "@typescript-eslint/eslint-plugin": "^7.13.1",
+        "@typescript-eslint/eslint-plugin": "^8.33.1",
-        "@typescript-eslint/parser": "^7.13.1",
+        "@typescript-eslint/parser": "^8.33.1",
-        "autoprefixer": "^10.4.19",
+        "bits-ui": "^2.17.2",
-        "eslint": "^8.57.0",
+        "clsx": "^2.1.1",
-        "eslint-config-prettier": "^9.1.0",
+        "eslint": "^9.28.0",
-        "eslint-plugin-svelte": "^2.40.0",
+        "eslint-config-prettier": "^10.1.5",
+        "eslint-plugin-svelte": "^3.9.1",
         "events": "^3.3.0",
-        "glob": "^10.4.3",
+        "glob": "^11.0.2",
-        "mdsvex": "^0.11.2",
+        "lucide-static": "^0.513.0",
-        "postcss": "^8.4.38",
+        "mdsvex": "^0.12.6",
-        "prettier": "^3.3.2",
+        "mode-watcher": "^1.1.0",
-        "prettier-plugin-svelte": "^3.2.4",
+        "paneforge": "^1.0.0-next.5",
-        "svelte": "^4.2.18",
+        "postcss": "^8.4.47",
-        "svelte-check": "^3.8.1",
+        "prettier": "^3.5.3",
-        "tailwindcss": "^3.4.4",
+        "prettier-plugin-svelte": "^3.4.0",
-        "tslib": "^2.6.3",
+        "shadcn-svelte": "^1.2.7",
-        "tsx": "^4.15.7",
+        "svelte": "^5.33.18",
-        "typescript": "^5.4.5",
+        "svelte-check": "^4.0.0",
-        "vite": "^5.3.1"
+        "svelte-dnd-action": "^0.9.65",
+        "svelte-sonner": "^1.1.0",
+        "tailwind-merge": "^3.5.0",
+        "tailwind-variants": "^3.2.2",
+        "tailwindcss": "^4.1.8",
+        "tslib": "^2.8.1",
+        "tsx": "^4.19.1",
+        "tw-animate-css": "^1.4.0",
+        "typescript": "^5.8.3",
+        "vaul-svelte": "^1.0.0-next.7",
+        "vite": "^6.3.5"
     },
     "type": "module",
     "dependencies": {
-        "@internationalized/date": "^3.5.4",
+        "@docsearch/js": "^3.9.0",
-        "@mapbox/mapbox-gl-geocoder": "^5.0.2",
+        "@mapbox/sphericalmercator": "^2.0.1",
-        "@mapbox/sphericalmercator": "^1.2.0",
+        "@mapbox/tilebelt": "^2.0.2",
-        "@types/mapbox__sphericalmercator": "^1.2.3",
+        "@maplibre/maplibre-gl-geocoder": "^1.9.4",
-        "bits-ui": "^0.21.12",
+        "chart.js": "^4.5.1",
-        "chart.js": "^4.4.3",
+        "chartjs-plugin-zoom": "^2.2.0",
-        "chartjs-plugin-zoom": "^2.0.1",
+        "dexie": "^4.0.11",
-        "clsx": "^2.1.1",
+        "file-saver": "^2.0.5",
-        "dexie": "^4.0.7",
         "gpx": "file:../gpx",
         "immer": "^10.1.1",
-        "lucide-static": "^0.427.0",
+        "jszip": "^3.10.1",
-        "lucide-svelte": "^0.427.0",
-        "mapbox-gl": "^3.4.0",
         "mapillary-js": "^4.1.2",
-        "mode-watcher": "^0.3.1",
+        "maplibre-gl": "^5.21.1",
-        "sanitize-html": "^2.13.0",
+        "sanitize-html": "^2.17.0",
-        "sortablejs": "^1.15.2",
+        "sortablejs": "^1.15.6"
-        "svelte-i18n": "^4.0.0",
-        "svelte-sonner": "^0.3.24",
-        "tailwind-merge": "^2.3.0",
-        "tailwind-variants": "^0.2.1"
     }
 }

website/postcss.config.js

@@ -1,6 +0,0 @@
-export default {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-}

website/src/app.css

@@ -0,0 +1,164 @@
+@import 'tailwindcss';
+@import 'tw-animate-css';
+@import "shadcn-svelte/tailwind.css";
+@import "@fontsource-variable/inter";
+
+@custom-variant dark (&:is(.dark *));
+
+:root {
+    --background: oklch(1 0 0);
+    --foreground: oklch(0.145 0 0);
+    --muted: oklch(0.97 0 0);
+    --muted-foreground: oklch(0.556 0 0);
+    --popover: oklch(1 0 0);
+    --popover-foreground: oklch(0.145 0 0);
+    --card: oklch(1 0 0);
+    --card-foreground: oklch(0.145 0 0);
+    --border: oklch(0.922 0 0);
+    --input: oklch(0.922 0 0);
+    --primary: oklch(0.205 0 0);
+    --primary-foreground: oklch(0.985 0 0);
+    --secondary: oklch(0.97 0 0);
+    --secondary-foreground: oklch(0.205 0 0);
+    --accent: oklch(0.97 0 0);
+    --accent-foreground: oklch(0.205 0 0);
+    --destructive: oklch(0.577 0.245 27.325);
+    --destructive-foreground: hsl(0 0% 98%);
+    --ring: oklch(0.708 0 0);
+    --sidebar: oklch(0.985 0 0);
+    --sidebar-foreground: oklch(0.145 0 0);
+    --sidebar-primary: oklch(0.205 0 0);
+    --sidebar-primary-foreground: oklch(0.985 0 0);
+    --sidebar-accent: oklch(0.97 0 0);
+    --sidebar-accent-foreground: oklch(0.205 0 0);
+    --sidebar-border: oklch(0.922 0 0);
+    --sidebar-ring: oklch(0.708 0 0);
+
+    --support: rgb(220 15 130);
+    --link: rgb(0 110 180);
+    --selection: hsl(240 4.8% 93%);
+
+    --radius: 0.5rem;
+
+    --chart-1: oklch(0.87 0 0);
+
+    --chart-2: oklch(0.556 0 0);
+
+    --chart-3: oklch(0.439 0 0);
+
+    --chart-4: oklch(0.371 0 0);
+
+    --chart-5: oklch(0.269 0 0);
+}
+
+.dark {
+    --background: oklch(0.145 0 0);
+    --foreground: oklch(0.985 0 0);
+    --muted: oklch(0.269 0 0);
+    --muted-foreground: oklch(0.708 0 0);
+    --popover: oklch(0.205 0 0);
+    --popover-foreground: oklch(0.985 0 0);
+    --card: oklch(0.205 0 0);
+    --card-foreground: oklch(0.985 0 0);
+    --border: oklch(1 0 0 / 10%);
+    --input: oklch(1 0 0 / 15%);
+    --primary: oklch(0.922 0 0);
+    --primary-foreground: oklch(0.205 0 0);
+    --secondary: oklch(0.269 0 0);
+    --secondary-foreground: oklch(0.985 0 0);
+    --accent: oklch(0.269 0 0);
+    --accent-foreground: oklch(0.985 0 0);
+    --destructive: oklch(0.704 0.191 22.216);
+    --destructive-foreground: hsl(0 0% 98%);
+    --ring: oklch(0.556 0 0);
+    --sidebar: oklch(0.205 0 0);
+    --sidebar-foreground: oklch(0.985 0 0);
+    --sidebar-primary: oklch(0.488 0.243 264.376);
+    --sidebar-primary-foreground: oklch(0.985 0 0);
+    --sidebar-accent: oklch(0.269 0 0);
+    --sidebar-accent-foreground: oklch(0.985 0 0);
+    --sidebar-border: oklch(1 0 0 / 10%);
+    --sidebar-ring: oklch(0.556 0 0);
+
+    --support: rgb(255 110 190);
+    --link: rgb(80 190 255);
+    --selection: hsl(240 3.7% 22%);
+    --chart-1: oklch(0.87 0 0);
+    --chart-2: oklch(0.556 0 0);
+    --chart-3: oklch(0.439 0 0);
+    --chart-4: oklch(0.371 0 0);
+    --chart-5: oklch(0.269 0 0);
+}
+
+@theme inline {
+    /* Radius (for rounded-*) */
+    --radius-sm: calc(var(--radius) - 4px);
+    --radius-md: calc(var(--radius) - 2px);
+    --radius-lg: var(--radius);
+    --radius-xl: calc(var(--radius) + 4px);
+
+    /* Colors */
+    --color-background: var(--background);
+    --color-foreground: var(--foreground);
+    --color-muted: var(--muted);
+    --color-muted-foreground: var(--muted-foreground);
+    --color-popover: var(--popover);
+    --color-popover-foreground: var(--popover-foreground);
+    --color-card: var(--card);
+    --color-card-foreground: var(--card-foreground);
+    --color-border: var(--border);
+    --color-input: var(--input);
+    --color-primary: var(--primary);
+    --color-primary-foreground: var(--primary-foreground);
+    --color-secondary: var(--secondary);
+    --color-secondary-foreground: var(--secondary-foreground);
+    --color-accent: var(--accent);
+    --color-accent-foreground: var(--accent-foreground);
+    --color-destructive: var(--destructive);
+    --color-destructive-foreground: var(--destructive-foreground);
+    --color-ring: var(--ring);
+    --color-radius: var(--radius);
+    --color-sidebar: var(--sidebar);
+    --color-sidebar-foreground: var(--sidebar-foreground);
+    --color-sidebar-primary: var(--sidebar-primary);
+    --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+    --color-sidebar-accent: var(--sidebar-accent);
+    --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+    --color-sidebar-border: var(--sidebar-border);
+    --color-sidebar-ring: var(--sidebar-ring);
+    --color-support: var(--support);
+    --color-link: var(--link);
+
+    --breakpoint-xs: 540px;
+
+    --font-sans: 'Inter Variable', sans-serif;
+
+    --color-chart-5: var(--chart-5);
+
+    --color-chart-4: var(--chart-4);
+
+    --color-chart-3: var(--chart-3);
+
+    --color-chart-2: var(--chart-2);
+
+    --color-chart-1: var(--chart-1);
+
+    --radius-2xl: calc(var(--radius) * 1.8);
+
+    --radius-3xl: calc(var(--radius) * 2.2);
+
+    --radius-4xl: calc(var(--radius) * 2.6);
+}
+
+@layer base {
+    * {
+        @apply border-border outline-ring/50;
+    }
+
+    body {
+        @apply bg-background text-foreground;
+    }
+	html {
+		@apply font-sans;
+    }
+}

website/src/app.d.ts

@@ -1,13 +1,13 @@
 // See https://kit.svelte.dev/docs/types#app
 // for information about these interfaces
 declare global {
-	namespace App {
+    namespace App {
-		// interface Error {}
+        // interface Error {}
-		// interface Locals {}
+        // interface Locals {}
-		// interface PageData {}
+        // interface PageData {}
-		// interface PageState {}
+        // interface PageState {}
-		// interface Platform {}
+        // interface Platform {}
-	}
+    }
 }
 
 export {};

website/src/app.html

@@ -1,15 +1,14 @@
 <!doctype html>
-<html lang="en">
+<html>
-
+    <head>
-<head>
+        <meta charset="utf-8" />
-    <meta charset="utf-8" />
+        <link rel="icon" href="%sveltekit.assets%/favicon.png" />
-    <link rel="icon" href="%sveltekit.assets%/favicon.png" />
+        <link rel="apple-touch-icon" href="%sveltekit.assets%/apple-touch-icon.png" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    %sveltekit.head%
+        %sveltekit.head%
-</head>
+    </head>
-
-<body data-sveltekit-preload-data="hover">
-    <div style="display: contents">%sveltekit.body%</div>
-</body>
 
+    <body data-sveltekit-preload-data="hover">
+        <div style="display: contents">%sveltekit.body%</div>
+    </body>
 </html>

website/src/app.pcss

@@ -1,82 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
- 
-@layer base {
-  :root {
-    --background: 0 0% 100%;
-    --foreground: 222.2 84% 4.9%;
- 
-    --muted: 210 40% 96.1%;
-    --muted-foreground: 215.4 16.3% 46.9%;
- 
-    --popover: 0 0% 100%;
-    --popover-foreground: 222.2 84% 4.9%;
- 
-    --card: 0 0% 100%;
-    --card-foreground: 222.2 84% 4.9%;
- 
-    --border: 214.3 31.8% 91.4%;
-    --input: 214.3 31.8% 91.4%;
- 
-    --primary: 222.2 47.4% 11.2%;
-    --primary-foreground: 210 40% 98%;
- 
-    --secondary: 210 40% 96.1%;
-    --secondary-foreground: 222.2 47.4% 11.2%;
- 
-    --accent: 210 40% 92%;
-    --accent-foreground: 222.2 47.4% 11.2%;
- 
-    --destructive: 0 72.2% 50.6%;
-    --destructive-foreground: 210 40% 98%;
-
-    --support: 220 15 130;
- 
-    --ring: 222.2 84% 4.9%;
- 
-    --radius: 0.5rem;
-  }
- 
-  .dark {
-    --background: 222.2 84% 4.9%;
-    --foreground: 210 40% 98%;
- 
-    --muted: 217.2 32.6% 17.5%;
-    --muted-foreground: 215 20.2% 65.1%;
- 
-    --popover: 222.2 84% 4.9%;
-    --popover-foreground: 210 40% 98%;
- 
-    --card: 222.2 84% 4.9%;
-    --card-foreground: 210 40% 98%;
- 
-    --border: 217.2 32.6% 17.5%;
-    --input: 217.2 32.6% 17.5%;
- 
-    --primary: 210 40% 98%;
-    --primary-foreground: 222.2 47.4% 11.2%;
- 
-    --secondary: 217.2 32.6% 17.5%;
-    --secondary-foreground: 210 40% 98%;
- 
-    --accent: 217.2 32.6% 30%;
-    --accent-foreground: 210 40% 98%;
- 
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 210 40% 98%;
-
-    --support: 255 110 190;
- 
-    --ring: hsl(212.7,26.8%,83.9);
-  }
-}
- 
-@layer base {
-  * {
-    @apply border-border;
-  }
-  body {
-    @apply bg-background text-foreground;
-  }
-}

website/src/hooks.server.js

@@ -0,0 +1,65 @@
+import { base } from '$app/paths';
+import { languages } from '$lib/languages';
+import { getURLForLanguage } from '$lib/utils';
+
+export async function handle({ event, resolve }) {
+    const language = event.params.language ?? 'en';
+    const strings = await import(`./locales/${language}.json`);
+
+    const path = event.url.pathname;
+    const page = event.route.id?.replace('/[[language]]', '').split('/')[1] ?? 'home';
+
+    let title = strings.metadata[`${page}_title`];
+    const description = strings.metadata[`description`];
+
+    if (page === 'help' && event.params.guide) {
+        const [guide, subguide] = event.params.guide.split('/');
+        const guideModule = subguide
+            ? await import(`./lib/docs/${language}/${guide}/${subguide}.mdx`)
+            : await import(`./lib/docs/${language}/${guide}.mdx`);
+        title = `${title} | ${guideModule.metadata.title}`;
+    }
+
+    const htmlTag = `<html lang="${language}" translate="no">`;
+
+    let headTag = `<head>
+    <title>gpx.studio — ${title}</title>
+    <script type="application/ld+json">
+    {
+        "@context": "https://schema.org",
+        "@type": "WebSite",
+        "name": "gpx.studio",
+        "url": "https://gpx.studio"
+    }
+    </script>
+    <meta name="description" content="${description}" />
+    <meta property="og:title" content="gpx.studio — ${title}" />
+    <meta property="og:description" content="${description}" />
+    <meta name="twitter:title" content="gpx.studio — ${title}" />
+    <meta name="twitter:description" content="${description}" />
+    <meta property="og:image" content="https://gpx.studio${base}/og_logo.png" />
+    <meta property="og:url" content="https://gpx.studio/" />
+    <meta property="og:type" content="website" />
+    <meta property="og:site_name" content="gpx.studio" />
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:image" content="https://gpx.studio${base}/og_logo.png" />
+    <meta name="twitter:url" content="https://gpx.studio/" />
+    <meta name="twitter:site" content="@gpxstudio" />
+    <meta name="twitter:creator" content="@gpxstudio" />
+    <link rel="alternate" hreflang="x-default" href="https://gpx.studio${getURLForLanguage('en', path)}" />
+    <link rel="manifest" href="/${language}.manifest.webmanifest" />`;
+
+    if (page !== '404') {
+        for (let lang of Object.keys(languages)) {
+            headTag += `   <link rel="alternate" hreflang="${lang}" href="https://gpx.studio${getURLForLanguage(lang, path)}" />
+`;
+        }
+    }
+
+    const response = await resolve(event, {
+        transformPageChunk: ({ html }) =>
+            html.replace('<html>', htmlTag).replace('<head>', headTag),
+    });
+
+    return response;
+}

website/src/lib/assets/colors.ts

@@ -0,0 +1,171 @@
+export const surfaceColors: { [key: string]: string } = {
+    missing: '#d1d1d1',
+    paved: '#8c8c8c',
+    unpaved: '#6b443a',
+    asphalt: '#8c8c8c',
+    concrete: '#8c8c8c',
+    cobblestone: '#ffd991',
+    paving_stones: '#8c8c8c',
+    sett: '#ffd991',
+    metal: '#8c8c8c',
+    wood: '#6b443a',
+    compacted: '#ffffa8',
+    fine_gravel: '#ffffa8',
+    gravel: '#ffffa8',
+    pebblestone: '#ffffa8',
+    rock: '#ffd991',
+    dirt: '#ffffa8',
+    ground: '#6b443a',
+    earth: '#6b443a',
+    mud: '#6b443a',
+    sand: '#ffffc4',
+    grass: '#61b55c',
+    grass_paver: '#61b55c',
+    clay: '#6b443a',
+    stone: '#ffd991',
+};
+
+export function getSurfaceColor(surface: string): string {
+    return surfaceColors[surface] ? surfaceColors[surface] : surfaceColors.missing;
+}
+
+export const highwayColors: { [key: string]: string } = {
+    missing: '#d1d1d1',
+    motorway: '#ff4d33',
+    motorway_link: '#ff4d33',
+    trunk: '#ff5e4d',
+    trunk_link: '#ff947f',
+    primary: '#ff6e5c',
+    primary_link: '#ff6e5c',
+    secondary: '#ff8d7b',
+    secondary_link: '#ff8d7b',
+    tertiary: '#ffd75f',
+    tertiary_link: '#ffd75f',
+    unclassified: '#f1f2a5',
+    road: '#f1f2a5',
+    residential: '#73b2ff',
+    living_street: '#73b2ff',
+    service: '#9c9cd9',
+    track: '#a8e381',
+    footway: '#a8e381',
+    path: '#a8e381',
+    pedestrian: '#a8e381',
+    cycleway: '#9de2ff',
+    construction: '#e09a4a',
+    bridleway: '#946f43',
+    raceway: '#ff0000',
+    rest_area: '#9c9cd9',
+    services: '#9c9cd9',
+    corridor: '#474747',
+    elevator: '#474747',
+    steps: '#474747',
+    bus_stop: '#8545a3',
+    busway: '#8545a3',
+    via_ferrata: '#474747',
+};
+
+export const sacScaleColors: { [key: string]: string } = {
+    hiking: '#007700',
+    mountain_hiking: '#1843ad',
+    demanding_mountain_hiking: '#ffff00',
+    alpine_hiking: '#ff9233',
+    demanding_alpine_hiking: '#ff0000',
+    difficult_alpine_hiking: '#000000',
+};
+
+export const mtbScaleColors: { [key: string]: string } = {
+    '0-': '#007700',
+    '0': '#007700',
+    '0+': '#007700',
+    '1-': '#1843ad',
+    '1': '#1843ad',
+    '1+': '#1843ad',
+    '2-': '#ffff00',
+    '2': '#ffff00',
+    '2+': '#ffff00',
+    '3': '#ff0000',
+    '4': '#00ff00',
+    '5': '#000000',
+    '6': '#b105eb',
+};
+
+function createPattern(
+    backgroundColor: string,
+    sacScaleColor: string | undefined,
+    mtbScaleColor: string | undefined,
+    size: number = 16,
+    lineWidth: number = 4
+) {
+    let canvas = document.createElement('canvas');
+    canvas.width = size;
+    canvas.height = size;
+    let ctx = canvas.getContext('2d');
+    if (ctx) {
+        ctx.fillStyle = backgroundColor;
+        ctx.fillRect(0, 0, size, size);
+        ctx.lineWidth = lineWidth;
+
+        const halfSize = size / 2;
+        const halfLineWidth = lineWidth / 2;
+        if (sacScaleColor) {
+            ctx.strokeStyle = sacScaleColor;
+            ctx.beginPath();
+            ctx.moveTo(halfSize - halfLineWidth, -halfLineWidth);
+            ctx.lineTo(size + halfLineWidth, halfSize + halfLineWidth);
+            ctx.stroke();
+            ctx.beginPath();
+            ctx.moveTo(-halfLineWidth, halfSize - halfLineWidth);
+            ctx.lineTo(halfSize + halfLineWidth, size + halfLineWidth);
+            ctx.stroke();
+        }
+        if (mtbScaleColor) {
+            ctx.strokeStyle = mtbScaleColor;
+            ctx.beginPath();
+            ctx.moveTo(halfSize - halfLineWidth, size + halfLineWidth);
+            ctx.lineTo(size + halfLineWidth, halfSize - halfLineWidth);
+            ctx.stroke();
+            ctx.beginPath();
+            ctx.moveTo(-halfLineWidth, halfSize + halfLineWidth);
+            ctx.lineTo(halfSize + halfLineWidth, -halfLineWidth);
+            ctx.stroke();
+        }
+    }
+    return ctx?.createPattern(canvas, 'repeat') || backgroundColor;
+}
+
+const patterns: Record<string, string | CanvasPattern> = {};
+export function getHighwayColor(
+    highway: string,
+    sacScale: string | undefined,
+    mtbScale: string | undefined
+) {
+    let backgroundColor = highwayColors[highway] ? highwayColors[highway] : highwayColors.missing;
+    let sacScaleColor = sacScale ? sacScaleColors[sacScale] : undefined;
+    let mtbScaleColor = mtbScale ? mtbScaleColors[mtbScale] : undefined;
+    if (sacScale || mtbScale) {
+        let patternId = `${backgroundColor}-${[sacScale, mtbScale].filter((x) => x).join('-')}`;
+        if (!patterns[patternId]) {
+            patterns[patternId] = createPattern(backgroundColor, sacScaleColor, mtbScaleColor);
+        }
+        return patterns[patternId];
+    }
+    return backgroundColor;
+}
+
+const maxSlope = 20;
+export function getSlopeColor(slope: number): string {
+    if (slope > maxSlope) {
+        slope = maxSlope;
+    } else if (slope < -maxSlope) {
+        slope = -maxSlope;
+    }
+
+    let v = slope / maxSlope;
+    v = 1 / (1 + Math.exp(-6 * v));
+    v = v - 0.5;
+
+    let hue = ((0.5 - v) * 120).toString(10);
+    let lightness = 90 - Math.abs(v) * 70;
+
+    return `hsl(${hue},70%,${lightness}%)`;
+}

website/src/lib/assets/custom/bikerouter-gravel.json

@@ -0,0 +1,863 @@
+{
+    "_info": "Taken from https://github.com/mjaschen/gravel-overlay, with prior authorization from the author (https://github.com/gpxstudio/gpx.studio/issues/32#issuecomment-2320219804).",
+    "version": 8,
+    "name": "Gravel Overlay",
+    "metadata": {
+        "mapbox:autocomposite": false,
+        "mapbox:type": "template",
+        "maputnik:renderer": "mbgljs",
+        "openmaptiles:version": "3.x",
+        "openmaptiles:mapbox:owner": "openmaptiles",
+        "openmaptiles:mapbox:source:url": "mapbox://openmaptiles.4qljc88t"
+    },
+    "sources": {
+        "openmaptiles": {
+            "type": "vector",
+            "url": "https://tiles.bikerouter.de/services/gravel/"
+        }
+    },
+    "sprite": "https://demotiles.maplibre.org/styles/osm-bright-gl-style/sprite",
+    "layers": [
+        {
+            "id": "background",
+            "type": "background",
+            "layout": {
+                "visibility": "none"
+            },
+            "paint": {
+                "background-color": "rgba(145, 211, 164, 1)"
+            }
+        },
+        {
+            "id": "debug_rail",
+            "type": "line",
+            "source": "openmaptiles",
+            "source-layer": "transportation",
+            "filter": ["all", ["==", "$type", "LineString"], ["in", "class", "rail"]],
+            "layout": {
+                "visibility": "none"
+            },
+            "paint": {
+                "line-color": "rgba(144, 144, 144, 1)"
+            }
+        },
+        {
+            "id": "debug_road",
+            "type": "line",
+            "source": "openmaptiles",
+            "source-layer": "transportation",
+            "filter": [
+                "all",
+                ["==", "$type", "LineString"],
+                [
+                    "in",
+                    "class",
+                    "motorway",
+                    "trunk",
+                    "primary",
+                    "secondary",
+                    "tertiary",
+                    "minor",
+                    "residential",
+                    "track",
+                    "path"
+                ]
+            ],
+            "layout": {
+                "visibility": "none"
+            },
+            "paint": {
+                "line-color": "rgba(204, 204, 204, 1)",
+                "line-width": {
+                    "stops": [
+                        [10, 0.5],
+                        [12, 1]
+                    ]
+                }
+            }
+        },
+        {
+            "id": "tr_X_g45-bg",
+            "type": "line",
+            "source": "openmaptiles",
+            "source-layer": "transportation",
+            "minzoom": 10,
+            "filter": [
+                "all",
+                ["==", ["geometry-type"], "LineString"],
+                ["match", ["get", "class"], ["track"], true, false],
+                [
+                    "any",
+                    ["match", ["get", "tracktype"], ["grade5"], true, false],
+                    [
+                        "all",
+                        ["match", ["get", "tracktype"], ["grade4"], true, false],
+                        ["match", ["get", "surface"], ["dirt", "grass", "mud", "sand"], true, false]
+                    ]
+                ]
+            ],
+            "layout": {
+                "line-cap": "square",
+                "line-join": "bevel",
+                "visibility": "visible"
+            },
+            "paint": {
+                "line-color": "rgba(255, 0, 0, 0.7)",
+                "line-width": {
+                    "base": 1.55,
+                    "stops": [
+                        [10, 0.4],
+                        [12, 1.3],
+                        [14, 1.7]
+                    ]
+                },
+                "line-dasharray": [1],
+                "line-offset": {
+                    "stops": [
+                        [12, 0],
+                        [13, 1.8],
+                        [15, 3],
+                        [16, 4]
+                    ],
+                    "base": 1.55
+                }
+            }
+        },
+        {
+            "id": "tr_X_g45",
+            "type": "line",
+            "source": "openmaptiles",
+            "source-layer": "transportation",
+            "minzoom": 10,
+            "filter": [
+                "all",
+                ["==", ["geometry-type"], "LineString"],
+                ["match", ["get", "class"], ["track"], true, false],
+                [
+                    "any",
+                    ["match", ["get", "tracktype"], ["grade5"], true, false],
+                    [
+                        "all",
+                        ["match", ["get", "tracktype"], ["grade4"], true, false],
+                        ["match", ["get", "surface"], ["dirt", "grass", "mud", "sand"], true, false]
+                    ]
+                ]
+            ],
+            "layout": {
+                "line-cap": "square",
+                "line-join": "bevel",
+                "visibility": "visible"
+            },
+            "paint": {
+                "line-color": "rgba(255, 255, 0, 0.7)",
+                "line-width": {
+                    "base": 1.55,
+                    "stops": [
+                        [10, 0.4],
+                        [12, 1.3],
+                        [14, 1.7]
+                    ]
+                },
+                "line-dasharray": [2, 2],
+                "line-offset": {
+                    "stops": [
+                        [12, 0],
+                        [13, 1.8],
+                        [15, 3],
+                        [16, 4]
+                    ],
+                    "base": 1.55
+                }
+            }
+        },
+        {
+            "id": "tr_B_g3",
+            "type": "line",
+            "source": "openmaptiles",
+            "source-layer": "transportation",
+            "minzoom": 10,
+            "filter": [
+                "all",
+                ["==", ["geometry-type"], "LineString"],
+                ["==", ["get", "class"], "track"],
+                ["match", ["get", "tracktype"], ["grade3"], true, false],
+                [
+                    "any",
+                    ["match", ["get", "smoothness"], ["bad", "good", "intermediate"], true, false],
+                    [
+                        "match",
+                        ["get", "surface"],
+                        ["compacted", "fine_gravel", "gravel"],
+                        true,
+                        false
+                    ]
+                ]
+            ],
+            "layout": {
+                "line-cap": "butt",
+                "line-join": "miter",
+                "visibility": "visible"
+            },
+            "paint": {
+                "line-color": "rgba(235, 6, 158, 1)",
+                "line-width": {
+                    "base": 1.55,
+                    "stops": [
+                        [10, 0.4],
+                        [12, 1.3],
+                        [14, 1.7]
+                    ]
+                },
+                "line-offset": {
+                    "stops": [
+                        [12, 0],
+                        [13, 2],
+                        [15, 4],
+                        [16, 5]
+                    ],
+                    "base": 1.55
+                },
+                "line-dasharray": [3, 1.5]
+            }
+        },
+        {
+            "id": "tr_A_g2-plain-case",
+            "type": "line",
+            "source": "openmaptiles",
+            "source-layer": "transportation",
+            "minzoom": 10,
+            "filter": [
+                "all",
+                ["==", ["geometry-type"], "LineString"],
+                ["==", ["get", "class"], "track"],
+                ["match", ["get", "tracktype"], ["grade2"], true, false],
+                ["!", ["has", "surface"]],
+                ["!", ["has", "smoothness"]]
+            ],
+            "layout": {
+                "line-cap": "butt",
+                "line-join": "miter",
+                "visibility": "visible"
+            },
+            "paint": {
+                "line-color": "rgba(255, 255, 255, 0.6)",
+                "line-width": {
+                    "base": 1.55,
+                    "stops": [
+                        [10, 0.8],
+                        [12, 3],
+                        [14, 4]
+                    ]
+                },
+                "line-offset": {
+                    "stops": [
+                        [12, 0],
+                        [13, 1.5],
+                        [15, 3],
+                        [16, 4]
+                    ],
+                    "base": 1.55
+                }
+            }
+        },
+        {
+            "id": "tr_A_g2-plain",
+            "type": "line",
+            "source": "openmaptiles",
+            "source-layer": "transportation",
+            "minzoom": 10,
+            "filter": [
+                "all",
+                ["==", ["geometry-type"], "LineString"],
+                ["==", ["get", "class"], "track"],
+                ["match", ["get", "tracktype"], ["grade2"], true, false],
+                ["!", ["has", "surface"]],
+                ["!", ["has", "smoothness"]]
+            ],
+            "layout": {
+                "line-cap": "butt",
+                "line-join": "miter",
+                "visibility": "visible"
+            },
+            "paint": {
+                "line-color": "rgba(235, 6, 158, 0.6)",
+                "line-width": {
+                    "base": 1.55,
+                    "stops": [
+                        [10, 0.5],
+                        [12, 1.5],
+                        [14, 2]
+                    ]
+                },
+                "line-offset": {
+                    "stops": [
+                        [12, 0],
+                        [13, 1.5],
+                        [15, 3],
+                        [16, 4]
+                    ],
+                    "base": 1.55
+                },
+                "line-dasharray": [5, 1]
+            }
+        },
+        {
+            "id": "tr_A_g2-case",
+            "type": "line",
+            "source": "openmaptiles",
+            "source-layer": "transportation",
+            "minzoom": 10,
+            "filter": [
+                "all",
+                ["==", ["geometry-type"], "LineString"],
+                ["==", ["get", "class"], "track"],
+                ["match", ["get", "tracktype"], ["grade2"], true, false],
+                [
+                    "any",
+                    [
+                        "match",
+                        ["get", "surface"],
+                        ["compacted", "fine_gravel", "gravel"],
+                        true,
+                        false
+                    ],
+                    ["match", ["get", "smoothness"], ["bad", "good", "intermediate"], true, false]
+                ]
+            ],
+            "layout": {
+                "line-cap": "butt",
+                "line-join": "miter",
+                "visibility": "visible"
+            },
+            "paint": {
+                "line-color": "rgba(255, 255, 255, 1)",
+                "line-width": {
+                    "base": 1.55,
+                    "stops": [
+                        [10, 0.8],
+                        [12, 3],
+                        [14, 4]
+                    ]
+                },
+                "line-offset": {
+                    "stops": [
+                        [12, 0],
+                        [13, 2],
+                        [15, 4],
+                        [16, 5]
+                    ],
+                    "base": 1.55
+                }
+            }
+        },
+        {
+            "id": "tr_A_g2",
+            "type": "line",
+            "source": "openmaptiles",
+            "source-layer": "transportation",
+            "minzoom": 10,
+            "filter": [
+                "all",
+                ["==", ["geometry-type"], "LineString"],
+                ["==", ["get", "class"], "track"],
+                ["match", ["get", "tracktype"], ["grade2"], true, false],
+                [
+                    "any",
+                    [
+                        "match",
+                        ["get", "surface"],
+                        ["compacted", "fine_gravel", "gravel"],
+                        true,
+                        false
+                    ],
+                    ["match", ["get", "smoothness"], ["bad", "good", "intermediate"], true, false]
+                ]
+            ],
+            "layout": {
+                "line-cap": "butt",
+                "line-join": "miter",
+                "visibility": "visible"
+            },
+            "paint": {
+                "line-color": "rgba(235, 6, 158, 1)",
+                "line-width": {
+                    "base": 1.55,
+                    "stops": [
+                        [10, 0.5],
+                        [12, 1.5],
+                        [14, 2]
+                    ]
+                },
+                "line-offset": {
+                    "stops": [
+                        [12, 0],
+                        [13, 2],
+                        [15, 4],
+                        [16, 5]
+                    ],
+                    "base": 1.55
+                }
+            }
+        },
+        {
+            "id": "p_X-bg",
+            "type": "line",
+            "source": "openmaptiles",
+            "source-layer": "transportation",
+            "minzoom": 10,
+            "filter": [
+                "all",
+                ["==", "$type", "LineString"],
+                ["in", "class", "path"],
+                ["in", "smoothness", "very_bad", "horrible", "very_horrible", "impassable"],
+                ["!in", "tracktype", "grade5", "grade4"]
+            ],
+            "layout": {
+                "line-cap": "square",
+                "line-join": "bevel",
+                "visibility": "visible"
+            },
+            "paint": {
+                "line-color": "rgba(255, 0, 0, 0.7)",
+                "line-width": {
+                    "base": 1.55,
+                    "stops": [
+                        [10, 0.4],
+                        [12, 1.1],
+                        [14, 1.5]
+                    ]
+                },
+                "line-offset": {
+                    "stops": [
+                        [12, 0],
+                        [13, 1.8],
+                        [15, 3],
+                        [16, 4]
+                    ],
+                    "base": 1.55
+                }
+            }
+        },
+        {
+            "id": "p_X",
+            "type": "line",
+            "source": "openmaptiles",
+            "source-layer": "transportation",
+            "minzoom": 10,
+            "filter": [
+                "all",
+                ["==", "$type", "LineString"],
+                ["in", "class", "path"],
+                ["in", "smoothness", "very_bad", "horrible", "very_horrible", "impassable"],
+                ["!in", "tracktype", "grade5", "grade4"]
+            ],
+            "layout": {
+                "line-cap": "square",
+                "line-join": "bevel",
+                "visibility": "visible"
+            },
+            "paint": {
+                "line-color": "rgba(255, 255, 0, 0.7)",
+                "line-width": {
+                    "base": 1.55,
+                    "stops": [
+                        [10, 0.4],
+                        [12, 1.1],
+                        [14, 1.5]
+                    ]
+                },
+                "line-dasharray": [2, 2],
+                "line-offset": {
+                    "stops": [
+                        [12, 0],
+                        [13, 1.8],
+                        [15, 3],
+                        [16, 4]
+                    ],
+                    "base": 1.55
+                }
+            }
+        },
+        {
+            "id": "p_B",
+            "type": "line",
+            "source": "openmaptiles",
+            "source-layer": "transportation",
+            "minzoom": 10,
+            "filter": [
+                "all",
+                ["==", "$type", "LineString"],
+                ["==", "class", "path"],
+                ["in", "smoothness", "good", "intermediate", "bad"],
+                [
+                    "!in",
+                    "surface",
+                    "gravel",
+                    "fine_gravel",
+                    "compacted",
+                    "cobblestone",
+                    "sett",
+                    "unhewn_cobblestone",
+                    "paving_stones"
+                ],
+                ["!in", "bicycle", "no"],
+                ["!in", "access", "no"]
+            ],
+            "layout": {
+                "line-cap": "butt",
+                "line-join": "miter",
+                "visibility": "visible"
+            },
+            "paint": {
+                "line-color": "rgba(235, 6, 158, 1)",
+                "line-width": {
+                    "base": 1.55,
+                    "stops": [
+                        [10, 0.4],
+                        [12, 1.1],
+                        [14, 1.5]
+                    ]
+                },
+                "line-offset": {
+                    "stops": [
+                        [12, 0],
+                        [13, 2],
+                        [15, 4],
+                        [16, 5]
+                    ],
+                    "base": 1.55
+                },
+                "line-dasharray": [1.5, 1]
+            }
+        },
+        {
+            "id": "p_A-case",
+            "type": "line",
+            "metadata": {
+                "maputnik:comment": "Gravel surface with ok-ish smoothness"
+            },
+            "source": "openmaptiles",
+            "source-layer": "transportation",
+            "minzoom": 10,
+            "filter": [
+                "all",
+                ["==", ["geometry-type"], "LineString"],
+                ["==", ["get", "class"], "path"],
+                [
+                    "any",
+                    ["match", ["get", "surface"], ["compacted", "fine_gravel"], true, false],
+                    [
+                        "all",
+                        ["match", ["get", "surface"], ["gravel"], true, false],
+                        [
+                            "match",
+                            ["get", "smoothness"],
+                            ["bad", "good", "intermediate"],
+                            true,
+                            false
+                        ]
+                    ]
+                ],
+                ["match", ["get", "bicycle"], ["no"], false, true],
+                ["match", ["get", "access"], ["no"], false, true]
+            ],
+            "layout": {
+                "line-cap": "butt",
+                "line-join": "miter",
+                "visibility": "visible"
+            },
+            "paint": {
+                "line-color": "rgba(255, 255, 255, 1)",
+                "line-width": {
+                    "base": 1.55,
+                    "stops": [
+                        [10, 0.7],
+                        [12, 2.5],
+                        [14, 3.2]
+                    ]
+                },
+                "line-offset": {
+                    "stops": [
+                        [12, 0],
+                        [13, 2],
+                        [15, 4],
+                        [16, 5]
+                    ],
+                    "base": 1.55
+                }
+            }
+        },
+        {
+            "id": "p_A",
+            "type": "line",
+            "metadata": {
+                "maputnik:comment": "Gravel surface with ok-ish smoothness"
+            },
+            "source": "openmaptiles",
+            "source-layer": "transportation",
+            "minzoom": 10,
+            "filter": [
+                "all",
+                ["==", ["geometry-type"], "LineString"],
+                ["==", ["get", "class"], "path"],
+                [
+                    "any",
+                    ["match", ["get", "surface"], ["compacted", "fine_gravel"], true, false],
+                    [
+                        "all",
+                        ["match", ["get", "surface"], ["gravel"], true, false],
+                        [
+                            "match",
+                            ["get", "smoothness"],
+                            ["bad", "good", "intermediate"],
+                            true,
+                            false
+                        ]
+                    ]
+                ],
+                ["match", ["get", "bicycle"], ["no"], false, true],
+                ["match", ["get", "access"], ["no"], false, true]
+            ],
+            "layout": {
+                "line-cap": "butt",
+                "line-join": "miter",
+                "visibility": "visible"
+            },
+            "paint": {
+                "line-color": "rgba(235, 6, 158, 1)",
+                "line-width": {
+                    "base": 1.55,
+                    "stops": [
+                        [10, 0.5],
+                        [12, 1.5],
+                        [14, 2]
+                    ]
+                },
+                "line-offset": {
+                    "stops": [
+                        [12, 0],
+                        [13, 2],
+                        [15, 4],
+                        [16, 5]
+                    ],
+                    "base": 1.55
+                }
+            }
+        },
+        {
+            "id": "r_X_cobbles-case",
+            "type": "line",
+            "source": "openmaptiles",
+            "source-layer": "transportation",
+            "minzoom": 10,
+            "filter": [
+                "all",
+                ["==", "$type", "LineString"],
+                ["in", "class", "minor", "service", "track", "path", "residential"],
+                ["in", "surface", "sett", "cobblestone", "unhewn_cobblestone"],
+                ["!in", "service", "driveway"]
+            ],
+            "layout": {
+                "line-cap": "butt",
+                "line-join": "miter",
+                "visibility": "visible"
+            },
+            "paint": {
+                "line-color": "rgba(0, 0, 0, 1)",
+                "line-width": {
+                    "base": 1.55,
+                    "stops": [
+                        [10, 0.5],
+                        [12, 1.5],
+                        [14, 2]
+                    ]
+                }
+            }
+        },
+        {
+            "id": "r_X_cobbles",
+            "type": "line",
+            "source": "openmaptiles",
+            "source-layer": "transportation",
+            "minzoom": 10,
+            "filter": [
+                "all",
+                ["==", "$type", "LineString"],
+                ["in", "class", "minor", "service", "track", "path", "residential"],
+                ["in", "surface", "sett", "cobblestone", "unhewn_cobblestone"],
+                ["!in", "service", "driveway"]
+            ],
+            "layout": {
+                "line-cap": "butt",
+                "line-join": "miter",
+                "visibility": "visible"
+            },
+            "paint": {
+                "line-color": "rgba(245, 255, 0, 1)",
+                "line-width": {
+                    "base": 1.55,
+                    "stops": [
+                        [10, 0.5],
+                        [12, 1.5],
+                        [14, 2]
+                    ]
+                },
+                "line-dasharray": [1.5, 1]
+            }
+        },
+        {
+            "id": "r_X-bg",
+            "type": "line",
+            "source": "openmaptiles",
+            "source-layer": "transportation",
+            "minzoom": 10,
+            "filter": [
+                "all",
+                ["==", "$type", "LineString"],
+                ["in", "class", "minor"],
+                ["in", "smoothness", "very_bad", "horrible", "very_horrible", "impassable"],
+                ["!in", "surface", "sett", "cobblestone", "unhewn_cobblestone"]
+            ],
+            "layout": {
+                "line-cap": "square",
+                "line-join": "bevel",
+                "visibility": "visible"
+            },
+            "paint": {
+                "line-color": "rgba(255, 0, 0, 0.7)",
+                "line-width": {
+                    "base": 1.55,
+                    "stops": [
+                        [10, 0.4],
+                        [12, 1.1],
+                        [14, 1.5]
+                    ]
+                }
+            }
+        },
+        {
+            "id": "r_X",
+            "type": "line",
+            "source": "openmaptiles",
+            "source-layer": "transportation",
+            "minzoom": 10,
+            "filter": [
+                "all",
+                ["==", "$type", "LineString"],
+                ["in", "class", "minor"],
+                ["in", "smoothness", "very_bad", "horrible", "very_horrible", "impassable"],
+                ["!in", "surface", "sett", "cobblestone", "unhewn_cobblestone"]
+            ],
+            "layout": {
+                "line-cap": "square",
+                "line-join": "bevel",
+                "visibility": "visible"
+            },
+            "paint": {
+                "line-color": "rgba(255, 255, 0, 0.7)",
+                "line-width": {
+                    "base": 1.55,
+                    "stops": [
+                        [10, 0.4],
+                        [12, 1.1],
+                        [14, 1.5]
+                    ]
+                },
+                "line-dasharray": [2, 2]
+            }
+        },
+        {
+            "id": "r_A_case",
+            "type": "line",
+            "source": "openmaptiles",
+            "source-layer": "transportation",
+            "minzoom": 10,
+            "filter": [
+                "all",
+                ["==", "$type", "LineString"],
+                ["in", "class", "minor", "residential", "service"],
+                ["in", "surface", "gravel", "compacted", "fine_gravel"],
+                ["!in", "service", "driveway", "parking_aisle", "drive-through", "emergency_access"]
+            ],
+            "layout": {
+                "line-cap": "square",
+                "line-join": "bevel",
+                "visibility": "visible"
+            },
+            "paint": {
+                "line-color": "rgba(255, 255, 255, 1)",
+                "line-width": {
+                    "base": 1.55,
+                    "stops": [
+                        [10, 0.8],
+                        [12, 3],
+                        [14, 4]
+                    ]
+                }
+            }
+        },
+        {
+            "id": "r_A",
+            "type": "line",
+            "source": "openmaptiles",
+            "source-layer": "transportation",
+            "minzoom": 10,
+            "filter": [
+                "all",
+                ["==", "$type", "LineString"],
+                ["in", "class", "minor", "residential", "service"],
+                ["in", "surface", "gravel", "compacted", "fine_gravel"],
+                ["!in", "service", "driveway", "parking_aisle", "drive-through", "emergency_access"]
+            ],
+            "layout": {
+                "line-cap": "square",
+                "line-join": "bevel",
+                "visibility": "visible"
+            },
+            "paint": {
+                "line-color": "rgba(235, 6, 158, 1)",
+                "line-width": {
+                    "base": 1.55,
+                    "stops": [
+                        [10, 0.5],
+                        [12, 1.5],
+                        [14, 2]
+                    ]
+                }
+            }
+        },
+        {
+            "id": "cemetery",
+            "type": "symbol",
+            "source": "openmaptiles",
+            "source-layer": "landuse",
+            "filter": ["all", ["==", "class", "cemetery"]],
+            "layout": {
+                "icon-image": "cemetery_11",
+                "icon-rotation-alignment": "map",
+                "icon-size": 1.5
+            }
+        },
+        {
+            "id": "drinking_water",
+            "type": "symbol",
+            "source": "openmaptiles",
+            "source-layer": "poi",
+            "minzoom": 9,
+            "maxzoom": 20,
+            "filter": [
+                "any",
+                ["==", "class", "drinking_water"],
+                ["==", "subclass", "drinking_water"]
+            ],
+            "layout": {
+                "icon-image": "drinking_water_11",
+                "visibility": "visible",
+                "icon-rotation-alignment": "map",
+                "icon-size": 1.4
+            }
+        }
+    ],
+    "id": "basic",
+    "owner": "Marcus Jaschen"
+}

website/src/lib/assets/surfaces.ts

@@ -1,31 +0,0 @@
-export const surfaceColors: { [key: string]: string } = {
-    'missing': '#d1d1d1',
-    'paved': '#8c8c8c',
-    'unpaved': '#6b443a',
-    'asphalt': '#8c8c8c',
-    'concrete': '#8c8c8c',
-    'chipseal': '#8c8c8c',
-    'cobblestone': '#ffd991',
-    'unhewn_cobblestone': '#ffd991',
-    'paving_stones': '#8c8c8c',
-    'stepping_stones': '#c7b2db',
-    'sett': '#ffd991',
-    'metal': '#8c8c8c',
-    'wood': '#6b443a',
-    'compacted': '#ffffa8',
-    'fine_gravel': '#ffffa8',
-    'gravel': '#ffffa8',
-    'pebblestone': '#ffffa8',
-    'rock': '#ffd991',
-    'dirt': '#ffffa8',
-    'ground': '#6b443a',
-    'earth': '#6b443a',
-    'snow': '#bdfffc',
-    'ice': '#bdfffc',
-    'salt': '#b6c0f2',
-    'mud': '#6b443a',
-    'sand': '#ffffc4',
-    'woodchips': '#6b443a',
-    'grass': '#61b55c',
-    'grass_paver': '#61b55c'
-}

website/src/lib/assets/symbols.ts

@@ -1,10 +1,73 @@
-import { Landmark, Icon, Shell, Bike, Building, Tent, Car, Wrench, ShoppingBasket, Droplet, DoorOpen, Trees, Fuel, Home, Info, TreeDeciduous, CircleParking, Cross, Utensils, Construction, BrickWall, ShowerHead, Mountain, Phone, TrainFront, Bed, Binoculars, TriangleAlert, Anchor } from "lucide-svelte";
+import {
-import { Landmark as LandmarkSvg, Shell as ShellSvg, Bike as BikeSvg, Building as BuildingSvg, Tent as TentSvg, Car as CarSvg, Wrench as WrenchSvg, ShoppingBasket as ShoppingBasketSvg, Droplet as DropletSvg, DoorOpen as DoorOpenSvg, Trees as TreesSvg, Fuel as FuelSvg, Home as HomeSvg, Info as InfoSvg, TreeDeciduous as TreeDeciduousSvg, CircleParking as CircleParkingSvg, Cross as CrossSvg, Utensils as UtensilsSvg, Construction as ConstructionSvg, BrickWall as BrickWallSvg, ShowerHead as ShowerHeadSvg, Mountain as MountainSvg, Phone as PhoneSvg, TrainFront as TrainFrontSvg, Bed as BedSvg, Binoculars as BinocularsSvg, TriangleAlert as TriangleAlertSvg, Anchor as AnchorSvg } from "lucide-static";
+    Landmark,
-import type { ComponentType } from "svelte";
+    Shell,
+    Bike,
+    Building,
+    Tent,
+    Car,
+    Wrench,
+    ShoppingBasket,
+    Droplet,
+    DoorOpen,
+    Trees,
+    Fuel,
+    House,
+    Info,
+    TreeDeciduous,
+    CircleParking,
+    Cross,
+    Utensils,
+    Construction,
+    BrickWall,
+    ShowerHead,
+    Mountain,
+    Phone,
+    TrainFront,
+    Bed,
+    Binoculars,
+    TriangleAlert,
+    Anchor,
+    Toilet,
+    X,
+    type IconProps,
+} from '@lucide/svelte';
+import {
+    Landmark as LandmarkSvg,
+    Shell as ShellSvg,
+    Bike as BikeSvg,
+    Building as BuildingSvg,
+    Tent as TentSvg,
+    Car as CarSvg,
+    Wrench as WrenchSvg,
+    ShoppingBasket as ShoppingBasketSvg,
+    Droplet as DropletSvg,
+    DoorOpen as DoorOpenSvg,
+    Trees as TreesSvg,
+    Fuel as FuelSvg,
+    House as HouseSvg,
+    Info as InfoSvg,
+    TreeDeciduous as TreeDeciduousSvg,
+    CircleParking as CircleParkingSvg,
+    Cross as CrossSvg,
+    Utensils as UtensilsSvg,
+    Construction as ConstructionSvg,
+    BrickWall as BrickWallSvg,
+    ShowerHead as ShowerHeadSvg,
+    Mountain as MountainSvg,
+    Phone as PhoneSvg,
+    TrainFront as TrainFrontSvg,
+    Bed as BedSvg,
+    Binoculars as BinocularsSvg,
+    TriangleAlert as TriangleAlertSvg,
+    Anchor as AnchorSvg,
+    Toilet as ToiletSvg,
+    X as XSvg,
+} from 'lucide-static';
+import type { Component } from 'svelte';
 
 export type Symbol = {
     value: string;
-    icon?: ComponentType<Icon>;
+    icon?: Component<IconProps>;
     iconSvg?: string;
 };
 
@@ -20,18 +83,34 @@ export const symbols: { [key: string]: Symbol } = {
     campground: { value: 'Campground', icon: Tent, iconSvg: TentSvg },
     car: { value: 'Car', icon: Car, iconSvg: CarSvg },
     car_repair: { value: 'Car Repair', icon: Wrench, iconSvg: WrenchSvg },
-    convenience_store: { value: 'Convenience Store', icon: ShoppingBasket, iconSvg: ShoppingBasketSvg },
+    convenience_store: {
-    crossing: { value: 'Crossing' },
+        value: 'Convenience Store',
-    department_store: { value: 'Department Store', icon: ShoppingBasket, iconSvg: ShoppingBasketSvg },
+        icon: ShoppingBasket,
+        iconSvg: ShoppingBasketSvg,
+    },
+    crossing: {
+        value: 'Crossing',
+        icon: X,
+        iconSvg: XSvg,
+    },
+    department_store: {
+        value: 'Department Store',
+        icon: ShoppingBasket,
+        iconSvg: ShoppingBasketSvg,
+    },
     drinking_water: { value: 'Drinking Water', icon: Droplet, iconSvg: DropletSvg },
     exit: { value: 'Exit', icon: DoorOpen, iconSvg: DoorOpenSvg },
-    lodge: { value: 'Lodge', icon: Home, iconSvg: HomeSvg },
+    lodge: { value: 'Lodge', icon: House, iconSvg: HouseSvg },
     lodging: { value: 'Lodging', icon: Bed, iconSvg: BedSvg },
     forest: { value: 'Forest', icon: Trees, iconSvg: TreesSvg },
     gas_station: { value: 'Gas Station', icon: Fuel, iconSvg: FuelSvg },
-    ground_transportation: { value: 'Ground Transportation', icon: TrainFront, iconSvg: TrainFrontSvg },
+    ground_transportation: {
+        value: 'Ground Transportation',
+        icon: TrainFront,
+        iconSvg: TrainFrontSvg,
+    },
     hotel: { value: 'Hotel', icon: Bed, iconSvg: BedSvg },
-    house: { value: 'House', icon: Home, iconSvg: HomeSvg },
+    house: { value: 'House', icon: House, iconSvg: HouseSvg },
     information: { value: 'Information', icon: Info, iconSvg: InfoSvg },
     park: { value: 'Park', icon: TreeDeciduous, iconSvg: TreeDeciduousSvg },
     parking_area: { value: 'Parking Area', icon: CircleParking, iconSvg: CircleParkingSvg },
@@ -39,7 +118,7 @@ export const symbols: { [key: string]: Symbol } = {
     picnic_area: { value: 'Picnic Area', icon: Utensils, iconSvg: UtensilsSvg },
     restaurant: { value: 'Restaurant', icon: Utensils, iconSvg: UtensilsSvg },
     restricted_area: { value: 'Restricted Area', icon: Construction, iconSvg: ConstructionSvg },
-    restroom: { value: 'Restroom' },
+    restroom: { value: 'Restroom', icon: Toilet, iconSvg: ToiletSvg },
     road: { value: 'Road', icon: BrickWall, iconSvg: BrickWallSvg },
     scenic_area: { value: 'Scenic Area', icon: Binoculars, iconSvg: BinocularsSvg },
     shelter: { value: 'Shelter', icon: Tent, iconSvg: TentSvg },
@@ -55,6 +134,6 @@ export function getSymbolKey(value: string | undefined): string | undefined {
     if (value === undefined) {
         return undefined;
     } else {
-        return Object.keys(symbols).find(key => symbols[key].value === value);
+        return Object.keys(symbols).find((key) => symbols[key].value === value);
     }
 }

website/src/lib/components/AlgoliaDocSearch.svelte

@@ -0,0 +1,72 @@
+<script lang="ts">
+    import docsearch from '@docsearch/js';
+    import '@docsearch/css';
+    import { onMount } from 'svelte';
+    import { i18n } from '$lib/i18n.svelte';
+
+    let props: {
+        class?: string;
+    } = $props();
+
+    let mounted = false;
+
+    function initDocsearch() {
+        docsearch({
+            appId: '21XLD94PE3',
+            apiKey: 'd2c1ed6cb0ed12adb2bd84eb2a38494d',
+            indexName: 'gpx',
+            container: '#docsearch',
+            searchParameters: {
+                facetFilters: ['lang:' + i18n.lang],
+            },
+            placeholder: i18n._('docs.search.search'),
+            disableUserPersonalization: true,
+            translations: {
+                button: {
+                    buttonText: i18n._('docs.search.search'),
+                    buttonAriaLabel: i18n._('docs.search.search'),
+                },
+                modal: {
+                    searchBox: {
+                        resetButtonTitle: i18n._('docs.search.clear'),
+                        resetButtonAriaLabel: i18n._('docs.search.clear'),
+                        cancelButtonText: i18n._('docs.search.cancel'),
+                        cancelButtonAriaLabel: i18n._('docs.search.cancel'),
+                        searchInputLabel: i18n._('docs.search.search'),
+                    },
+                    footer: {
+                        selectText: i18n._('docs.search.to_select'),
+                        navigateText: i18n._('docs.search.to_navigate'),
+                        closeText: i18n._('docs.search.to_close'),
+                    },
+                    noResultsScreen: {
+                        noResultsText: i18n._('docs.search.no_results'),
+                        suggestedQueryText: i18n._('docs.search.no_results_suggestion'),
+                    },
+                },
+            },
+        });
+    }
+
+    onMount(() => {
+        mounted = true;
+    });
+
+    $effect(() => {
+        if (mounted && i18n.lang && !i18n.isLoading) {
+            initDocsearch();
+        }
+    });
+</script>
+
+<svelte:head>
+    <link rel="preconnect" href="https://21XLD94PE3-dsn.algolia.net" crossorigin />
+</svelte:head>
+
+<div id="docsearch" class={props.class ?? ''}></div>
+
+<style>
+    #docsearch :global(button) {
+        margin-left: 0px;
+    }
+</style>

website/src/lib/components/ButtonWithTooltip.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+    import { Button } from '$lib/components/ui/button/index.js';
+    import * as Tooltip from '$lib/components/ui/tooltip/index.js';
+    import type { Snippet } from 'svelte';
+
+    const {
+        variant = 'default',
+        label,
+        side = 'top',
+        disabled = false,
+        class: className = '',
+        children,
+        onclick,
+    }: {
+        variant?: 'default' | 'secondary' | 'link' | 'destructive' | 'outline' | 'ghost';
+        label: string;
+        side?: 'top' | 'right' | 'bottom' | 'left';
+        disabled?: boolean;
+        class?: string;
+        children: Snippet;
+        onclick?: (event: MouseEvent) => void;
+    } = $props();
+</script>
+
+<Tooltip.Provider>
+    <Tooltip.Root>
+        <Tooltip.Trigger>
+            {#snippet child({ props })}
+                <Button {...props} {variant} class="bg-inherit {className}" {onclick}>
+                    {@render children()}
+                </Button>
+            {/snippet}
+        </Tooltip.Trigger>
+        <Tooltip.Content {side}>
+            <span>{label}</span>
+        </Tooltip.Content>
+    </Tooltip.Root>
+</Tooltip.Provider>

website/src/lib/components/ElevationProfile.svelte

@@ -1,708 +0,0 @@
-<script lang="ts">
-	import * as ToggleGroup from '$lib/components/ui/toggle-group';
-	import Tooltip from '$lib/components/Tooltip.svelte';
-	import Chart from 'chart.js/auto';
-	import mapboxgl from 'mapbox-gl';
-	import { hoveredTrackPoint, map } from '$lib/stores';
-	import { onDestroy, onMount } from 'svelte';
-	import {
-		BrickWall,
-		TriangleRight,
-		HeartPulse,
-		Orbit,
-		SquareActivity,
-		Thermometer,
-		Zap
-	} from 'lucide-svelte';
-	import { surfaceColors } from '$lib/assets/surfaces';
-	import { _, locale } from 'svelte-i18n';
-	import {
-		getCadenceUnits,
-		getCadenceWithUnits,
-		getConvertedDistance,
-		getConvertedElevation,
-		getConvertedTemperature,
-		getConvertedVelocity,
-		getDistanceUnits,
-		getDistanceWithUnits,
-		getElevationWithUnits,
-		getHeartRateUnits,
-		getHeartRateWithUnits,
-		getPowerUnits,
-		getPowerWithUnits,
-		getTemperatureUnits,
-		getTemperatureWithUnits,
-		getVelocityUnits,
-		getVelocityWithUnits,
-		secondsToHHMMSS
-	} from '$lib/units';
-	import type { Writable } from 'svelte/store';
-	import { DateFormatter } from '@internationalized/date';
-	import type { GPXStatistics } from 'gpx';
-	import { settings } from '$lib/db';
-	import { mode } from 'mode-watcher';
-
-	export let gpxStatistics: Writable<GPXStatistics>;
-	export let slicedGPXStatistics: Writable<[GPXStatistics, number, number] | undefined>;
-	export let panelSize: number;
-	export let additionalDatasets: string[];
-	export let elevationFill: 'slope' | 'surface' | undefined;
-	export let showControls: boolean = true;
-
-	const { distanceUnits, velocityUnits, temperatureUnits } = settings;
-
-	let df: DateFormatter;
-
-	$: if ($locale) {
-		df = new DateFormatter($locale, {
-			dateStyle: 'medium',
-			timeStyle: 'medium'
-		});
-	}
-
-	let canvas: HTMLCanvasElement;
-	let showAdditionalScales = true;
-	let updateShowAdditionalScales = () => {
-		showAdditionalScales = canvas.width / window.devicePixelRatio >= 600;
-	};
-	let overlay: HTMLCanvasElement;
-	let chart: Chart;
-
-	Chart.defaults.font.family =
-		'ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"'; // Tailwind CSS font
-
-	let marker: mapboxgl.Marker | null = null;
-	let dragging = false;
-	let panning = false;
-
-	let options = {
-		animation: false,
-		parsing: false,
-		maintainAspectRatio: false,
-		scales: {
-			x: {
-				type: 'linear',
-				ticks: {
-					callback: function (value: number, index: number, ticks: { value: number }[]) {
-						if (index === ticks.length - 1) {
-							return `${value.toFixed(1).replace(/\.0+$/, '')}`;
-						}
-						return `${value.toFixed(1).replace(/\.0+$/, '')} ${getDistanceUnits()}`;
-					}
-				}
-			},
-			y: {
-				type: 'linear',
-				ticks: {
-					callback: function (value: number) {
-						return getElevationWithUnits(value, false);
-					}
-				}
-			}
-		},
-		datasets: {
-			line: {
-				pointRadius: 0,
-				tension: 0.4,
-				borderWidth: 2
-			}
-		},
-		interaction: {
-			mode: 'nearest',
-			axis: 'x',
-			intersect: false
-		},
-		plugins: {
-			legend: {
-				display: false
-			},
-			decimation: {
-				enabled: true
-			},
-			tooltip: {
-				enabled: () => !dragging && !panning,
-				callbacks: {
-					title: function () {
-						return '';
-					},
-					label: function (context: Chart.TooltipContext) {
-						let point = context.raw;
-						if (context.datasetIndex === 0 && $hoveredTrackPoint === undefined) {
-							if ($map && marker) {
-								if (dragging) {
-									marker.remove();
-								} else {
-									marker.setLngLat(point.coordinates);
-									marker.addTo($map);
-								}
-							}
-							return `${$_('quantities.elevation')}: ${getElevationWithUnits(point.y, false)}`;
-						} else if (context.datasetIndex === 1) {
-							return `${$velocityUnits === 'speed' ? $_('quantities.speed') : $_('quantities.pace')}: ${getVelocityWithUnits(point.y, false)}`;
-						} else if (context.datasetIndex === 2) {
-							return `${$_('quantities.heartrate')}: ${getHeartRateWithUnits(point.y)}`;
-						} else if (context.datasetIndex === 3) {
-							return `${$_('quantities.cadence')}: ${getCadenceWithUnits(point.y)}`;
-						} else if (context.datasetIndex === 4) {
-							return `${$_('quantities.temperature')}: ${getTemperatureWithUnits(point.y, false)}`;
-						} else if (context.datasetIndex === 5) {
-							return `${$_('quantities.power')}: ${getPowerWithUnits(point.y)}`;
-						}
-					},
-					afterBody: function (contexts: Chart.TooltipContext[]) {
-						let context = contexts.filter((context) => context.datasetIndex === 0);
-						if (context.length === 0) return;
-						let point = context[0].raw;
-						let slope = {
-							at: point.slope.at.toFixed(1),
-							segment: point.slope.segment.toFixed(1),
-							length: getDistanceWithUnits(point.slope.length)
-						};
-						let surface = point.surface ? point.surface : 'unknown';
-
-						let labels = [
-							`    ${$_('quantities.distance')}: ${getDistanceWithUnits(point.x, false)}`,
-							`    ${$_('quantities.slope')}: ${slope.at} %${elevationFill === 'slope' ? ` (${slope.length} @${slope.segment} %)` : ''}`
-						];
-
-						if (elevationFill === 'surface') {
-							labels.push(
-								`    ${$_('quantities.surface')}: ${$_(`toolbar.routing.surface.${surface}`)}`
-							);
-						}
-
-						if (point.time) {
-							labels.push(`    ${$_('quantities.time')}: ${df.format(point.time)}`);
-						}
-
-						return labels;
-					}
-				}
-			},
-			zoom: {
-				pan: {
-					enabled: true,
-					mode: 'x',
-					modifierKey: 'shift',
-					onPanStart: function () {
-						// hide tooltip
-						panning = true;
-						$slicedGPXStatistics = undefined;
-					},
-					onPanComplete: function () {
-						panning = false;
-					}
-				},
-				zoom: {
-					wheel: {
-						enabled: true
-					},
-					mode: 'x',
-					onZoomStart: function ({ chart, event }: { chart: Chart; event: any }) {
-						if (
-							event.deltaY < 0 &&
-							Math.abs(
-								chart.getInitialScaleBounds().x.max / chart.options.plugins.zoom.limits.x.minRange -
-									chart.getZoomLevel()
-							) < 0.01
-						) {
-							// Disable wheel pan if zoomed in to the max, and zooming in
-							return false;
-						}
-
-						$slicedGPXStatistics = undefined;
-					}
-				},
-				limits: {
-					x: {
-						min: 'original',
-						max: 'original',
-						minRange: 1
-					}
-				}
-			}
-		},
-		stacked: false,
-		onResize: function () {
-			updateOverlay();
-			updateShowAdditionalScales();
-		}
-	};
-
-	let datasets: {
-		[key: string]: {
-			id: string;
-			getLabel: () => string;
-			getUnits: () => string;
-		};
-	} = {
-		speed: {
-			id: 'speed',
-			getLabel: () => ($velocityUnits === 'speed' ? $_('quantities.speed') : $_('quantities.pace')),
-			getUnits: () => getVelocityUnits()
-		},
-		hr: {
-			id: 'hr',
-			getLabel: () => $_('quantities.heartrate'),
-			getUnits: () => getHeartRateUnits()
-		},
-		cad: {
-			id: 'cad',
-			getLabel: () => $_('quantities.cadence'),
-			getUnits: () => getCadenceUnits()
-		},
-		atemp: {
-			id: 'atemp',
-			getLabel: () => $_('quantities.temperature'),
-			getUnits: () => getTemperatureUnits()
-		},
-		power: {
-			id: 'power',
-			getLabel: () => $_('quantities.power'),
-			getUnits: () => getPowerUnits()
-		}
-	};
-
-	for (let [id, dataset] of Object.entries(datasets)) {
-		options.scales[`y${id}`] = {
-			type: 'linear',
-			position: 'right',
-			title: {
-				display: true,
-				text: dataset.getLabel() + ' (' + dataset.getUnits() + ')',
-				padding: {
-					top: 6,
-					bottom: 0
-				}
-			},
-			grid: {
-				display: false
-			},
-			reverse: () => id === 'speed' && $velocityUnits === 'pace',
-			display: false
-		};
-	}
-	options.scales.yspeed['ticks'] = {
-		callback: function (value: number) {
-			if ($velocityUnits === 'speed') {
-				return value;
-			} else {
-				return secondsToHHMMSS(value);
-			}
-		}
-	};
-
-	onMount(async () => {
-		Chart.register((await import('chartjs-plugin-zoom')).default); // dynamic import to avoid SSR and 'window is not defined' error
-
-		chart = new Chart(canvas, {
-			type: 'line',
-			data: {
-				datasets: []
-			},
-			options,
-			plugins: [
-				{
-					id: 'toggleMarker',
-					events: ['mouseout'],
-					afterEvent: function (chart: Chart, args: { event: Chart.ChartEvent }) {
-						if (args.event.type === 'mouseout') {
-							if ($map && marker) {
-								marker.remove();
-							}
-						}
-					}
-				}
-			]
-		});
-
-		// Map marker to show on hover
-		let element = document.createElement('div');
-		element.className = 'h-4 w-4 rounded-full bg-cyan-500 border-2 border-white';
-		marker = new mapboxgl.Marker({
-			element
-		});
-
-		updateShowAdditionalScales();
-
-		let startIndex = 0;
-		let endIndex = 0;
-		function getIndex(evt) {
-			const points = chart.getElementsAtEventForMode(
-				evt,
-				'x',
-				{
-					intersect: false
-				},
-				true
-			);
-
-			if (points.length === 0) {
-				const rect = canvas.getBoundingClientRect();
-				if (evt.x - rect.left <= chart.chartArea.left) {
-					return 0;
-				} else if (evt.x - rect.left >= chart.chartArea.right) {
-					return $gpxStatistics.local.points.length - 1;
-				} else {
-					return undefined;
-				}
-			}
-
-			let point = points.find((point) => point.element.raw);
-			if (point) {
-				return point.element.raw.index;
-			} else {
-				return points[0].index;
-			}
-		}
-
-		let dragStarted = false;
-		function onMouseDown(evt) {
-			if (evt.shiftKey) {
-				// Panning interaction
-				return;
-			}
-			dragStarted = true;
-			canvas.style.cursor = 'col-resize';
-			startIndex = getIndex(evt);
-		}
-		function onMouseMove(evt) {
-			if (dragStarted) {
-				dragging = true;
-				endIndex = getIndex(evt);
-				if (endIndex !== undefined) {
-					if (startIndex === undefined) {
-						startIndex = endIndex;
-					} else if (startIndex !== endIndex) {
-						$slicedGPXStatistics = [
-							$gpxStatistics.slice(Math.min(startIndex, endIndex), Math.max(startIndex, endIndex)),
-							Math.min(startIndex, endIndex),
-							Math.max(startIndex, endIndex)
-						];
-					}
-				}
-			}
-		}
-		function onMouseUp(evt) {
-			dragStarted = false;
-			dragging = false;
-			canvas.style.cursor = '';
-			endIndex = getIndex(evt);
-			if (startIndex === endIndex) {
-				$slicedGPXStatistics = undefined;
-			}
-		}
-		canvas.addEventListener('pointerdown', onMouseDown);
-		canvas.addEventListener('pointermove', onMouseMove);
-		canvas.addEventListener('pointerup', onMouseUp);
-	});
-
-	$: if (chart && $distanceUnits && $velocityUnits && $temperatureUnits) {
-		let data = $gpxStatistics;
-
-		// update data
-		chart.data.datasets[0] = {
-			label: $_('quantities.elevation'),
-			data: data.local.points.map((point, index) => {
-				return {
-					x: getConvertedDistance(data.local.distance.total[index]),
-					y: point.ele ? getConvertedElevation(point.ele) : 0,
-					time: point.time,
-					slope: {
-						at: data.local.slope.at[index],
-						segment: data.local.slope.segment[index],
-						length: data.local.slope.length[index]
-					},
-					surface: point.getSurface(),
-					coordinates: point.getCoordinates(),
-					index: index
-				};
-			}),
-			normalized: true,
-			fill: 'start',
-			order: 1
-		};
-		chart.data.datasets[1] = {
-			label: datasets.speed.getLabel(),
-			data: data.local.points.map((point, index) => {
-				return {
-					x: getConvertedDistance(data.local.distance.total[index]),
-					y: getConvertedVelocity(data.local.speed[index]),
-					index: index
-				};
-			}),
-			normalized: true,
-			yAxisID: `y${datasets.speed.id}`,
-			hidden: true
-		};
-		chart.data.datasets[2] = {
-			label: datasets.hr.getLabel(),
-			data: data.local.points.map((point, index) => {
-				return {
-					x: getConvertedDistance(data.local.distance.total[index]),
-					y: point.getHeartRate(),
-					index: index
-				};
-			}),
-			normalized: true,
-			yAxisID: `y${datasets.hr.id}`,
-			hidden: true
-		};
-		chart.data.datasets[3] = {
-			label: datasets.cad.getLabel(),
-			data: data.local.points.map((point, index) => {
-				return {
-					x: getConvertedDistance(data.local.distance.total[index]),
-					y: point.getCadence(),
-					index: index
-				};
-			}),
-			normalized: true,
-			yAxisID: `y${datasets.cad.id}`,
-			hidden: true
-		};
-		chart.data.datasets[4] = {
-			label: datasets.atemp.getLabel(),
-			data: data.local.points.map((point, index) => {
-				return {
-					x: getConvertedDistance(data.local.distance.total[index]),
-					y: getConvertedTemperature(point.getTemperature()),
-					index: index
-				};
-			}),
-			normalized: true,
-			yAxisID: `y${datasets.atemp.id}`,
-			hidden: true
-		};
-		chart.data.datasets[5] = {
-			label: datasets.power.getLabel(),
-			data: data.local.points.map((point, index) => {
-				return {
-					x: getConvertedDistance(data.local.distance.total[index]),
-					y: point.getPower(),
-					index: index
-				};
-			}),
-			normalized: true,
-			yAxisID: `y${datasets.power.id}`,
-			hidden: true
-		};
-		chart.options.scales.x['min'] = 0;
-		chart.options.scales.x['max'] = getConvertedDistance(data.global.distance.total);
-
-		// update units
-		for (let [id, dataset] of Object.entries(datasets)) {
-			chart.options.scales[`y${id}`].title.text =
-				dataset.getLabel() + ' (' + dataset.getUnits() + ')';
-		}
-
-		chart.update();
-	}
-
-	let maxSlope = 20;
-	function slopeFillCallback(context) {
-		let slope = context.p0.raw.slope.segment;
-		if (slope > maxSlope) {
-			slope = maxSlope;
-		} else if (slope < -maxSlope) {
-			slope = -maxSlope;
-		}
-
-		let v = slope / maxSlope;
-		v = 1 / (1 + Math.exp(-6 * v));
-		v = v - 0.5;
-
-		let hue = ((0.5 - v) * 120).toString(10);
-		let lightness = 90 - Math.abs(v) * 70;
-
-		return ['hsl(', hue, ',70%,', lightness, '%)'].join('');
-	}
-
-	function surfaceFillCallback(context) {
-		let surface = context.p0.raw.surface;
-		return surfaceColors[surface] ? surfaceColors[surface] : surfaceColors.missing;
-	}
-
-	$: if (chart) {
-		if (elevationFill === 'slope') {
-			chart.data.datasets[0]['segment'] = {
-				backgroundColor: slopeFillCallback
-			};
-		} else if (elevationFill === 'surface') {
-			chart.data.datasets[0]['segment'] = {
-				backgroundColor: surfaceFillCallback
-			};
-		} else {
-			chart.data.datasets[0]['segment'] = {};
-		}
-		chart.update();
-	}
-
-	$: if (additionalDatasets && chart) {
-		let includeSpeed = additionalDatasets.includes('speed');
-		let includeHeartRate = additionalDatasets.includes('hr');
-		let includeCadence = additionalDatasets.includes('cad');
-		let includeTemperature = additionalDatasets.includes('atemp');
-		let includePower = additionalDatasets.includes('power');
-		if (chart.data.datasets.length > 0) {
-			chart.data.datasets[1].hidden = !includeSpeed;
-			chart.data.datasets[2].hidden = !includeHeartRate;
-			chart.data.datasets[3].hidden = !includeCadence;
-			chart.data.datasets[4].hidden = !includeTemperature;
-			chart.data.datasets[5].hidden = !includePower;
-		}
-		chart.options.scales[`y${datasets.speed.id}`].display = includeSpeed && showAdditionalScales;
-		chart.options.scales[`y${datasets.hr.id}`].display = includeHeartRate && showAdditionalScales;
-		chart.options.scales[`y${datasets.cad.id}`].display = includeCadence && showAdditionalScales;
-		chart.options.scales[`y${datasets.atemp.id}`].display =
-			includeTemperature && showAdditionalScales;
-		chart.options.scales[`y${datasets.power.id}`].display = includePower && showAdditionalScales;
-		chart.update();
-	}
-
-	function updateOverlay() {
-		if (!canvas) {
-			return;
-		}
-
-		overlay.width = canvas.width / window.devicePixelRatio;
-		overlay.height = canvas.height / window.devicePixelRatio;
-
-		if ($slicedGPXStatistics) {
-			let startIndex = $slicedGPXStatistics[1];
-			let endIndex = $slicedGPXStatistics[2];
-
-			// Draw selection rectangle
-			let selectionContext = overlay.getContext('2d');
-			if (selectionContext) {
-				selectionContext.fillStyle = $mode === 'dark' ? 'white' : 'black';
-				selectionContext.globalAlpha = $mode === 'dark' ? 0.2 : 0.1;
-				selectionContext.clearRect(0, 0, overlay.width, overlay.height);
-
-				let startPixel = chart.scales.x.getPixelForValue(
-					getConvertedDistance($gpxStatistics.local.distance.total[startIndex])
-				);
-				let endPixel = chart.scales.x.getPixelForValue(
-					getConvertedDistance($gpxStatistics.local.distance.total[endIndex])
-				);
-
-				selectionContext.fillRect(
-					startPixel,
-					chart.chartArea.top,
-					endPixel - startPixel,
-					chart.chartArea.bottom - chart.chartArea.top
-				);
-			}
-		} else if (overlay) {
-			let selectionContext = overlay.getContext('2d');
-			if (selectionContext) {
-				selectionContext.clearRect(0, 0, overlay.width, overlay.height);
-			}
-		}
-	}
-
-	$: $slicedGPXStatistics, $mode, updateOverlay();
-
-	$: if (chart) {
-		if ($hoveredTrackPoint) {
-			let index = chart._metasets[0].data.findIndex(
-				(point) =>
-					$gpxStatistics.local.points[point.raw.index]._data.index ===
-						$hoveredTrackPoint.point._data.index &&
-					$hoveredTrackPoint.point.getLongitude() === point.raw.coordinates.lon &&
-					$hoveredTrackPoint.point.getLatitude() === point.raw.coordinates.lat
-			);
-			if (index >= 0) {
-				chart.tooltip?.setActiveElements(
-					[
-						{
-							datasetIndex: 0,
-							index
-						}
-					],
-					{ x: 0, y: 0 }
-				);
-			}
-		} else {
-			chart.tooltip?.setActiveElements([], { x: 0, y: 0 });
-		}
-		chart.update();
-	}
-
-	onDestroy(() => {
-		if (chart) {
-			chart.destroy();
-		}
-	});
-</script>
-
-<div class="h-full grow min-w-0 flex flex-row gap-4 items-center {$$props.class ?? ''}">
-	<div class="grow h-full min-w-0 relative">
-		<canvas bind:this={overlay} class=" w-full h-full absolute pointer-events-none"></canvas>
-		<canvas bind:this={canvas} class="w-full h-full"></canvas>
-	</div>
-	{#if showControls}
-		<div class="h-full flex flex-col justify-center" style="width: {panelSize > 158 ? 22 : 42}px">
-			<ToggleGroup.Root
-				class="{panelSize > 158
-					? 'flex-col'
-					: 'flex-row'} flex-wrap gap-0 min-h-0 content-center border rounded-t-md"
-				type="single"
-				bind:value={elevationFill}
-			>
-				<ToggleGroup.Item class="p-0 w-5 h-5" value="slope">
-					<Tooltip side="left">
-						<TriangleRight slot="data" size="15" />
-						<span slot="tooltip">{$_('chart.show_slope')}</span>
-					</Tooltip>
-				</ToggleGroup.Item>
-				<ToggleGroup.Item class="p-0 w-5 h-5" value="surface">
-					<Tooltip side="left">
-						<BrickWall slot="data" size="15" />
-						<span slot="tooltip">{$_('chart.show_surface')}</span>
-					</Tooltip>
-				</ToggleGroup.Item>
-			</ToggleGroup.Root>
-			<ToggleGroup.Root
-				class="{panelSize > 158
-					? 'flex-col'
-					: 'flex-row'} flex-wrap gap-0 min-h-0 content-center border rounded-b-md -mt-[1px]"
-				type="multiple"
-				bind:value={additionalDatasets}
-			>
-				<ToggleGroup.Item class="p-0 w-5 h-5" value="speed">
-					<Tooltip side="left">
-						<Zap slot="data" size="15" />
-						<span slot="tooltip"
-							>{$velocityUnits === 'speed' ? $_('chart.show_speed') : $_('chart.show_pace')}</span
-						>
-					</Tooltip>
-				</ToggleGroup.Item>
-				<ToggleGroup.Item class="p-0 w-5 h-5" value="hr">
-					<Tooltip side="left">
-						<HeartPulse slot="data" size="15" />
-						<span slot="tooltip">{$_('chart.show_heartrate')}</span>
-					</Tooltip>
-				</ToggleGroup.Item>
-				<ToggleGroup.Item class="p-0 w-5 h-5" value="cad">
-					<Tooltip side="left">
-						<Orbit slot="data" size="15" />
-						<span slot="tooltip">{$_('chart.show_cadence')}</span>
-					</Tooltip>
-				</ToggleGroup.Item>
-				<ToggleGroup.Item class="p-0 w-5 h-5" value="atemp">
-					<Tooltip side="left">
-						<Thermometer slot="data" size="15" />
-						<span slot="tooltip">{$_('chart.show_temperature')}</span>
-					</Tooltip>
-				</ToggleGroup.Item>
-				<ToggleGroup.Item class="p-0 w-5 h-5" value="power">
-					<Tooltip side="left">
-						<SquareActivity slot="data" size="15" />
-						<span slot="tooltip">{$_('chart.show_power')}</span>
-					</Tooltip>
-				</ToggleGroup.Item>
-			</ToggleGroup.Root>
-		</div>
-	{/if}
-</div>

website/src/lib/components/Export.svelte

@@ -1,181 +0,0 @@
-<script lang="ts">
-	import { Button } from '$lib/components/ui/button';
-	import { Label } from '$lib/components/ui/label';
-	import { Checkbox } from '$lib/components/ui/checkbox';
-	import { Separator } from '$lib/components/ui/separator';
-	import { Dialog } from 'bits-ui';
-	import {
-		currentTool,
-		exportAllFiles,
-		exportSelectedFiles,
-		ExportState,
-		exportState,
-		gpxStatistics
-	} from '$lib/stores';
-	import { fileObservers } from '$lib/db';
-	import {
-		Download,
-		Zap,
-		BrickWall,
-		HeartPulse,
-		Orbit,
-		Thermometer,
-		SquareActivity
-	} from 'lucide-svelte';
-	import { _ } from 'svelte-i18n';
-	import { selection } from './file-list/Selection';
-	import { get } from 'svelte/store';
-	import { GPXStatistics } from 'gpx';
-	import { ListRootItem } from './file-list/FileList';
-
-	let open = false;
-	let exportOptions: Record<string, boolean> = {
-		time: true,
-		surface: true,
-		hr: true,
-		cad: true,
-		atemp: true,
-		power: true
-	};
-	let hide: Record<string, boolean> = {
-		time: false,
-		surface: false,
-		hr: false,
-		cad: false,
-		atemp: false,
-		power: false
-	};
-
-	$: if ($exportState !== ExportState.NONE) {
-		open = true;
-		$currentTool = null;
-
-		let statistics = $gpxStatistics;
-		if ($exportState === ExportState.ALL) {
-			statistics = Array.from($fileObservers.values())
-				.map((file) => get(file)?.statistics)
-				.reduce((acc, cur) => {
-					if (cur !== undefined) {
-						acc.mergeWith(cur.getStatisticsFor(new ListRootItem()));
-					}
-					return acc;
-				}, new GPXStatistics());
-		}
-
-		hide.time = statistics.global.time.total === 0;
-		hide.hr = statistics.global.hr.count === 0;
-		hide.cad = statistics.global.cad.count === 0;
-		hide.atemp = statistics.global.atemp.count === 0;
-		hide.power = statistics.global.power.count === 0;
-	}
-
-	$: exclude = Object.keys(exportOptions).filter((key) => !exportOptions[key]);
-</script>
-
-<Dialog.Root
-	bind:open
-	onOpenChange={(isOpen) => {
-		if (!isOpen) {
-			$exportState = ExportState.NONE;
-		}
-	}}
->
-	<Dialog.Trigger class="hidden" />
-	<Dialog.Portal>
-		<Dialog.Content
-			class="fixed left-[50%] top-[50%] z-50 w-fit max-w-full translate-x-[-50%] translate-y-[-50%] flex flex-col items-center gap-3 border bg-background p-3 shadow-lg rounded-md"
-		>
-			<div
-				class="w-full flex flex-row items-center justify-center gap-4 border rounded-md p-2 bg-accent"
-			>
-				<span>⚠️</span>
-				<span class="max-w-96 text-sm">
-					{$_('menu.support_message')}
-				</span>
-			</div>
-			<div class="w-full flex flex-row flex-wrap gap-2">
-				<Button class="bg-support grow" href="https://ko-fi.com/gpxstudio" target="_blank">
-					{$_('menu.support_button')}
-					<span class="ml-2">🙏</span>
-				</Button>
-				<Button
-					variant="outline"
-					class="grow"
-					on:click={() => {
-						if ($exportState === ExportState.SELECTION) {
-							exportSelectedFiles(exclude);
-						} else if ($exportState === ExportState.ALL) {
-							exportAllFiles(exclude);
-						}
-						open = false;
-						$exportState = ExportState.NONE;
-					}}
-				>
-					<Download size="16" class="mr-1" />
-					{#if $fileObservers.size === 1 || ($exportState === ExportState.SELECTION && $selection.size === 1)}
-						{$_('menu.download_file')}
-					{:else}
-						{$_('menu.download_files')}
-					{/if}
-				</Button>
-			</div>
-			<div class="w-full max-w-xl flex flex-col items-center gap-2">
-				<div class="w-full flex flex-row items-center gap-3">
-					<div class="grow">
-						<Separator />
-					</div>
-					<Label class="shrink-0">
-						{$_('menu.export_options')}
-					</Label>
-					<div class="grow">
-						<Separator />
-					</div>
-				</div>
-				<div class="flex flex-row flex-wrap justify-center gap-x-6 gap-y-2">
-					<div class="flex flex-row items-center gap-1.5 {hide.time ? 'hidden' : ''}">
-						<Checkbox id="export-time" bind:checked={exportOptions.time} />
-						<Label for="export-time" class="flex flex-row items-center gap-1">
-							<Zap size="16" />
-							{$_('quantities.time')}
-						</Label>
-					</div>
-					<div class="flex flex-row items-center gap-1.5">
-						<Checkbox id="export-surface" bind:checked={exportOptions.surface} />
-						<Label for="export-surface" class="flex flex-row items-center gap-1">
-							<BrickWall size="16" />
-							{$_('quantities.surface')}
-						</Label>
-					</div>
-					<div class="flex flex-row items-center gap-1.5 {hide.hr ? 'hidden' : ''}">
-						<Checkbox id="export-heartrate" bind:checked={exportOptions.hr} />
-						<Label for="export-heartrate" class="flex flex-row items-center gap-1">
-							<HeartPulse size="16" />
-							{$_('quantities.heartrate')}
-						</Label>
-					</div>
-					<div class="flex flex-row items-center gap-1.5 {hide.cad ? 'hidden' : ''}">
-						<Checkbox id="export-cadence" bind:checked={exportOptions.cad} />
-						<Label for="export-cadence" class="flex flex-row items-center gap-1">
-							<Orbit size="16" />
-							{$_('quantities.cadence')}
-						</Label>
-					</div>
-					<div class="flex flex-row items-center gap-1.5 {hide.atemp ? 'hidden' : ''}">
-						<Checkbox id="export-temperature" bind:checked={exportOptions.atemp} />
-						<Label for="export-temperature" class="flex flex-row items-center gap-1">
-							<Thermometer size="16" />
-							{$_('quantities.temperature')}
-						</Label>
-					</div>
-					<div class="flex flex-row items-center gap-1.5 {hide.power ? 'hidden' : ''}">
-						<Checkbox id="export-power" bind:checked={exportOptions.power} />
-						<Label for="export-power" class="flex flex-row items-center gap-1">
-							<SquareActivity size="16" />
-							{$_('quantities.power')}
-						</Label>
-					</div>
-				</div>
-			</div>
-		</Dialog.Content>
-	</Dialog.Portal>
-</Dialog.Root>

website/src/lib/components/Footer.svelte

@@ -1,116 +1,119 @@
 <script lang="ts">
-	import { Button } from '$lib/components/ui/button';
+    import { Button } from '$lib/components/ui/button';
-	import LanguageSelect from '$lib/components/LanguageSelect.svelte';
+    import LanguageSelect from '$lib/components/LanguageSelect.svelte';
-	import Logo from '$lib/components/Logo.svelte';
+    import ModeSwitch from '$lib/components/ModeSwitch.svelte';
-	import { AtSign, BookOpenText, Heart, Home, Map } from 'lucide-svelte';
+    import Logo from '$lib/components/Logo.svelte';
-	import { _, locale } from 'svelte-i18n';
+    import { AtSign, BookOpenText, Heart, House, Map } from '@lucide/svelte';
-	import { getURLForLanguage } from '$lib/utils';
+    import { i18n } from '$lib/i18n.svelte';
+    import { getURLForLanguage } from '$lib/utils';
 </script>
 
-<footer class="w-full">
+<footer class="w-full px-12 py-10 border-t flex flex-col items-center">
-	<div class="mx-6 border-t">
+    <div class="w-full max-w-5xl flex flex-row flex-wrap justify-between gap-x-10 gap-y-6">
-		<div class="mx-12 py-10 flex flex-row flex-wrap justify-between gap-x-10 gap-y-6">
+        <div class="grow flex flex-col items-start">
-			<div class="grow flex flex-col items-start">
+            <Logo class="h-8" width="153" />
-				<Logo class="h-8" />
+            <Button
-				<Button
+                variant="link"
-					variant="link"
+                class="h-6 px-0 has-[>svg]:px-0 text-muted-foreground"
-					class="h-6 px-0 text-muted-foreground"
+                href="https://github.com/gpxstudio/gpx.studio/blob/main/LICENSE"
-					href="https://github.com/gpxstudio/gpx.studio/blob/main/LICENSE"
+                target="_blank"
-					target="_blank"
+            >
-				>
+                MIT © 2026 gpx.studio
-					MIT © 2024 gpx.studio
+            </Button>
-				</Button>
+            <div class="mt-3 flex flex-row gap-1.5">
-				<LanguageSelect class="w-40 mt-3" />
+                <LanguageSelect />
-			</div>
+                <ModeSwitch />
-			<div class="grow max-w-2xl flex flex-row flex-wrap justify-between gap-x-10 gap-y-6">
+            </div>
-				<div class="flex flex-col items-start gap-1">
+        </div>
-					<span class="font-semibold">{$_('homepage.website')}</span>
+        <div class="grow max-w-2xl flex flex-row flex-wrap justify-between gap-x-10 gap-y-6">
-					<Button
+            <div class="flex flex-col items-start gap-1">
-						variant="link"
+                <span class="font-semibold">{i18n._('homepage.website')}</span>
-						class="h-6 px-0 text-muted-foreground"
+                <Button
-						href={getURLForLanguage($locale, '/')}
+                    variant="link"
-					>
+                    class="h-6 px-0 has-[>svg]:px-0 text-muted-foreground"
-						<Home size="16" class="mr-1" />
+                    href={getURLForLanguage(i18n.lang, '/')}
-						{$_('homepage.home')}
+                >
-					</Button>
+                    <House size="16" />
-					<Button
+                    {i18n._('homepage.home')}
-						variant="link"
+                </Button>
-						class="h-6 px-0 text-muted-foreground"
+                <Button
-						href={getURLForLanguage($locale, '/app')}
+                    data-sveltekit-reload
-					>
+                    variant="link"
-						<Map size="16" class="mr-1" />
+                    class="h-6 px-0 has-[>svg]:px-0 text-muted-foreground"
-						{$_('homepage.app')}
+                    href={getURLForLanguage(i18n.lang, '/app')}
-					</Button>
+                >
-					<Button
+                    <Map size="16" />
-						variant="link"
+                    {i18n._('homepage.app')}
-						class="h-6 px-0 text-muted-foreground"
+                </Button>
-						href={getURLForLanguage($locale, '/help')}
+                <Button
-					>
+                    variant="link"
-						<BookOpenText size="16" class="mr-1" />
+                    class="h-6 px-0 has-[>svg]:px-0 text-muted-foreground"
-						{$_('menu.help')}
+                    href={getURLForLanguage(i18n.lang, '/help')}
-					</Button>
+                >
-				</div>
+                    <BookOpenText size="16" />
-				<div class="flex flex-col items-start gap-1" id="contact">
+                    {i18n._('menu.help')}
-					<span class="font-semibold">{$_('homepage.contact')}</span>
+                </Button>
-					<Button
+            </div>
-						variant="link"
+            <div class="flex flex-col items-start gap-1" id="contact">
-						class="h-6 px-0 text-muted-foreground"
+                <span class="font-semibold">{i18n._('homepage.contact')}</span>
-						href="https://facebook.com/gpx.studio"
+                <Button
-						target="_blank"
+                    variant="link"
-					>
+                    class="h-6 px-0 has-[>svg]:px-0 text-muted-foreground"
-						<Logo company="facebook" class="h-4 mr-1 fill-muted-foreground" />
+                    href="https://www.reddit.com/r/gpxstudio/"
-						{$_('homepage.facebook')}
+                    target="_blank"
-					</Button>
+                >
-					<Button
+                    <Logo company="reddit" class="h-4 fill-muted-foreground" />
-						variant="link"
+                    {i18n._('homepage.reddit')}
-						class="h-6 px-0 text-muted-foreground"
+                </Button>
-						href="https://x.com/gpxstudio"
+                <Button
-						target="_blank"
+                    variant="link"
-					>
+                    class="h-6 px-0 has-[>svg]:px-0 text-muted-foreground"
-						<Logo company="x" class="h-4 mr-1 fill-muted-foreground" />
+                    href="https://facebook.com/gpx.studio"
-						{$_('homepage.x')}
+                    target="_blank"
-					</Button>
+                >
-					<Button
+                    <Logo company="facebook" class="h-4 fill-muted-foreground" />
-						variant="link"
+                    {i18n._('homepage.facebook')}
-						class="h-6 px-0 text-muted-foreground"
+                </Button>
-						href="mailto:hello@gpx.studio"
+                <Button
-						target="_blank"
+                    variant="link"
-					>
+                    class="h-6 px-0 has-[>svg]:px-0 text-muted-foreground"
-						<AtSign size="16" class="mr-1" />
+                    href="mailto:hello@gpx.studio"
-						{$_('homepage.email')}
+                    target="_blank"
-					</Button>
+                >
-				</div>
+                    <AtSign size="16" />
-				<div class="flex flex-col items-start gap-1">
+                    {i18n._('homepage.email')}
-					<span class="font-semibold">{$_('homepage.contribute')}</span>
+                </Button>
-					<Button
+            </div>
-						variant="link"
+            <div class="flex flex-col items-start gap-1">
-						class="h-6 px-0 text-muted-foreground"
+                <span class="font-semibold">{i18n._('homepage.contribute')}</span>
-						href="https://ko-fi.com/gpxstudio"
+                <Button
-						target="_blank"
+                    variant="link"
-					>
+                    class="h-6 px-0 has-[>svg]:px-0 text-muted-foreground"
-						<Heart size="16" class="mr-1" />
+                    href="https://opencollective.com/gpxstudio"
-						{$_('menu.donate')}
+                    target="_blank"
-					</Button>
+                >
-					<Button
+                    <Heart size="16" />
-						variant="link"
+                    {i18n._('menu.donate')}
-						class="h-6 px-0 text-muted-foreground"
+                </Button>
-						href="https://crowdin.com/project/gpxstudio"
+                <Button
-						target="_blank"
+                    variant="link"
-					>
+                    class="h-6 px-0 has-[>svg]:px-0 text-muted-foreground"
-						<Logo company="crowdin" class="h-4 mr-1 fill-muted-foreground" />
+                    href="https://crowdin.com/project/gpxstudio"
-						{$_('homepage.crowdin')}
+                    target="_blank"
-					</Button>
+                >
-					<Button
+                    <Logo company="crowdin" class="h-4 fill-muted-foreground" />
-						variant="link"
+                    {i18n._('homepage.crowdin')}
-						class="h-6 px-0 text-muted-foreground"
+                </Button>
-						href="https://github.com/gpxstudio/gpx.studio"
+                <Button
-						target="_blank"
+                    variant="link"
-					>
+                    class="h-6 px-0 has-[>svg]:px-0 text-muted-foreground"
-						<Logo company="github" class="h-4 mr-1 fill-muted-foreground" />
+                    href="https://github.com/gpxstudio/gpx.studio"
-						{$_('homepage.github')}
+                    target="_blank"
-					</Button>
+                >
-				</div>
+                    <Logo company="github" class="h-4 fill-muted-foreground" />
-			</div>
+                    {i18n._('homepage.github')}
-		</div>
+                </Button>
-	</div>
+            </div>
+        </div>
+    </div>
 </footer>

website/src/lib/components/GPXStatistics.svelte

@@ -1,84 +1,92 @@
 <script lang="ts">
-	import * as Card from '$lib/components/ui/card';
+    import * as Card from '$lib/components/ui/card';
-	import Tooltip from '$lib/components/Tooltip.svelte';
+    import Tooltip from '$lib/components/Tooltip.svelte';
-	import WithUnits from '$lib/components/WithUnits.svelte';
+    import WithUnits from '$lib/components/WithUnits.svelte';
 
-	import { MoveDownRight, MoveUpRight, Ruler, Timer, Zap } from 'lucide-svelte';
+    import { MoveDownRight, MoveUpRight, Ruler, Timer, Zap } from '@lucide/svelte';
 
-	import { _ } from 'svelte-i18n';
+    import { i18n } from '$lib/i18n.svelte';
-	import type { GPXStatistics } from 'gpx';
+    import type { GPXGlobalStatistics, GPXStatisticsGroup } from 'gpx';
-	import type { Writable } from 'svelte/store';
+    import type { Readable } from 'svelte/store';
-	import { settings } from '$lib/db';
+    import { settings } from '$lib/logic/settings';
 
-	export let gpxStatistics: Writable<GPXStatistics>;
+    const { velocityUnits } = settings;
-	export let slicedGPXStatistics: Writable<[GPXStatistics, number, number] | undefined>;
-	export let orientation: 'horizontal' | 'vertical';
-	export let panelSize: number;
 
-	const { velocityUnits } = settings;
+    let panelHeight: number = $state(0);
+    let panelWidth: number = $state(0);
 
-	let statistics: GPXStatistics;
+    let {
+        gpxStatistics,
+        slicedGPXStatistics,
+        orientation,
+    }: {
+        gpxStatistics: Readable<GPXStatisticsGroup>;
+        slicedGPXStatistics: Readable<[GPXGlobalStatistics, number, number] | undefined>;
+        orientation: 'horizontal' | 'vertical';
+    } = $props();
 
-	$: if ($slicedGPXStatistics !== undefined) {
+    let statistics = $derived(
-		statistics = $slicedGPXStatistics[0];
+        $slicedGPXStatistics !== undefined ? $slicedGPXStatistics[0] : $gpxStatistics.global
-	} else {
+    );
-		statistics = $gpxStatistics;
-	}
 </script>
 
 <Card.Root
-	class="h-full {orientation === 'vertical'
+    class="h-full {orientation === 'vertical'
-		? 'min-w-44 sm:min-w-52 text-sm sm:text-base'
+        ? 'min-w-40 sm:min-w-44'
-		: 'w-full'} border-none shadow-none"
+        : 'w-full h-fit my-1'} ring-0 p-0 text-sm sm:text-base bg-transparent"
 >
-	<Card.Content
+    <Card.Content class="h-full p-0">
-		class="h-full flex {orientation === 'vertical'
+        <div
-			? 'flex-col justify-center'
+            bind:clientHeight={panelHeight}
-			: 'flex-row w-full justify-between'} gap-4  p-0"
+            bind:clientWidth={panelWidth}
-	>
+            class="flex {orientation === 'vertical'
-		<Tooltip>
+                ? 'flex-col h-full justify-center'
-			<span slot="data" class="flex flex-row items-center">
+                : 'flex-row w-full justify-evenly'} gap-4"
-				<Ruler size="18" class="mr-1" />
+        >
-				<WithUnits value={statistics.global.distance.total} type="distance" />
+            <Tooltip label={i18n._('quantities.distance')}>
-			</span>
+                <span class="flex flex-row items-center">
-			<span slot="tooltip">{$_('quantities.distance')}</span>
+                    <Ruler size="16" class="mr-1" />
-		</Tooltip>
+                    <WithUnits value={statistics.distance.total} type="distance" />
-		<Tooltip>
+                </span>
-			<span slot="data" class="flex flex-row items-center">
+            </Tooltip>
-				<MoveUpRight size="18" class="mr-1" />
+            <Tooltip label={i18n._('quantities.elevation_gain_loss')}>
-				<WithUnits value={statistics.global.elevation.gain} type="elevation" />
+                <span class="flex flex-row items-center">
-				<MoveDownRight size="18" class="mx-1" />
+                    <MoveUpRight size="16" class="mr-1" />
-				<WithUnits value={statistics.global.elevation.loss} type="elevation" />
+                    <WithUnits value={statistics.elevation.gain} type="elevation" />
-			</span>
+                    <MoveDownRight size="16" class="mx-1" />
-			<span slot="tooltip">{$_('quantities.elevation')}</span>
+                    <WithUnits value={statistics.elevation.loss} type="elevation" />
-		</Tooltip>
+                </span>
-		{#if panelSize > 120 || orientation === 'horizontal'}
+            </Tooltip>
-			<Tooltip class={orientation === 'horizontal' ? 'hidden xs:block' : ''}>
+            {#if panelHeight > 120 || (orientation === 'horizontal' && panelWidth > 450)}
-				<span slot="data" class="flex flex-row items-center">
+                <Tooltip
-					<Zap size="18" class="mr-1" />
+                    label="{$velocityUnits === 'speed'
-					<WithUnits value={statistics.global.speed.moving} type="speed" showUnits={false} />
+                        ? i18n._('quantities.speed')
-					<span class="mx-1">/</span>
+                        : i18n._('quantities.pace')} ({i18n._('quantities.moving')} / {i18n._(
-					<WithUnits value={statistics.global.speed.total} type="speed" />
+                        'quantities.total'
-				</span>
+                    )})"
-				<span slot="tooltip"
+                >
-					>{$velocityUnits === 'speed' ? $_('quantities.speed') : $_('quantities.pace')} ({$_(
+                    <span class="flex flex-row items-center">
-						'quantities.moving'
+                        <Zap size="16" class="mr-1" />
-					)} / {$_('quantities.total')})</span
+                        <WithUnits value={statistics.speed.moving} type="speed" showUnits={false} />
-				>
+                        <span class="mx-1">/</span>
-			</Tooltip>
+                        <WithUnits value={statistics.speed.total} type="speed" />
-		{/if}
+                    </span>
-		{#if panelSize > 160 || orientation === 'horizontal'}
+                </Tooltip>
-			<Tooltip class={orientation === 'horizontal' ? 'hidden md:block' : ''}>
+            {/if}
-				<span slot="data" class="flex flex-row items-center">
+            {#if panelHeight > 150 || (orientation === 'horizontal' && panelWidth > 620)}
-					<Timer size="18" class="mr-1" />
+                <Tooltip
-					<WithUnits value={statistics.global.time.moving} type="time" />
+                    label="{i18n._('quantities.time')} ({i18n._('quantities.moving')} / {i18n._(
-					<span class="mx-1">/</span>
+                        'quantities.total'
-					<WithUnits value={statistics.global.time.total} type="time" />
+                    )})"
-				</span>
+                >
-				<span slot="tooltip"
+                    <span class="flex flex-row items-center">
-					>{$_('quantities.time')} ({$_('quantities.moving')} / {$_('quantities.total')})</span
+                        <Timer size="16" class="mr-1" />
-				>
+                        <WithUnits value={statistics.time.moving} type="time" />
-			</Tooltip>
+                        <span class="mx-1">/</span>
-		{/if}
+                        <WithUnits value={statistics.time.total} type="time" />
-	</Card.Content>
+                    </span>
+                </Tooltip>
+            {/if}
+        </div>
+    </Card.Content>
 </Card.Root>

website/src/lib/components/Head.svelte

@@ -1,70 +0,0 @@
-<script lang="ts">
-	import { base } from '$app/paths';
-	import { page } from '$app/stores';
-	import { languages } from '$lib/languages';
-	import { _, isLoading } from 'svelte-i18n';
-
-	let location: string;
-	let title: string;
-
-	$: if ($page.route.id) {
-		location = $page.route.id;
-		Object.keys($page.params).forEach((param) => {
-			if (param !== 'language') {
-				location = location.replace(`[${param}]`, $page.params[param]);
-				location = location.replace(`[...${param}]`, $page.params[param]);
-			}
-		});
-		title = location.replace('/[...language]', '').split('/')[1] ?? 'home';
-	}
-</script>
-
-<svelte:head>
-	{#if $isLoading}
-		<title>gpx.studio — the online GPX file editor</title>
-		<meta
-			name="description"
-			content="View, edit and create GPX files online with advanced route planning capabilities and file processing tools, beautiful maps and detailed data visualizations."
-		/>
-		<meta property="og:title" content="gpx.studio — the online GPX file editor" />
-		<meta
-			property="og:description"
-			content="View, edit and create GPX files online with advanced route planning capabilities and file processing tools, beautiful maps and detailed data visualizations."
-		/>
-		<meta name="twitter:title" content="gpx.studio — the online GPX file editor" />
-		<meta
-			name="twitter:description"
-			content="View, edit and create GPX files online with advanced route planning capabilities and file processing tools, beautiful maps and detailed data visualizations."
-		/>
-	{:else}
-		<title>gpx.studio — {$_(`metadata.${title}_title`)}</title>
-		<meta name="description" content={$_('metadata.description')} />
-		<meta property="og:title" content="gpx.studio — {$_(`metadata.${title}_title`)}" />
-		<meta property="og:description" content={$_('metadata.description')} />
-		<meta name="twitter:title" content="gpx.studio — {$_(`metadata.${title}_title`)}" />
-		<meta name="twitter:description" content={$_('metadata.description')} />
-	{/if}
-
-	<meta property="og:image" content="https://gpx.studio/og_logo.png" />
-	<meta property="og:url" content="https://gpx.studio/" />
-	<meta property="og:type" content="website" />
-	<meta property="og:site_name" content="gpx.studio" />
-	<meta name="twitter:card" content="summary_large_image" />
-	<meta name="twitter:image" content="https://gpx.studio/og_logo.png" />
-	<meta name="twitter:url" content="https://gpx.studio/" />
-	<meta name="twitter:site" content="@gpxstudio" />
-	<meta name="twitter:creator" content="@gpxstudio" />
-
-	<link
-		rel="alternate"
-		hreflang="x-default"
-		href="https://gpx.studio{base}{location.replace('/[...language]', '')}"
-	/>
-	{#each Object.keys(languages) as lang}
-		<link
-			rel="alternate"
-			hreflang={lang}
-			href="https://gpx.studio{base}{location.replace('[...language]', lang)}"
-		/>
-	{/each}
-</svelte:head>

website/src/lib/components/Help.svelte

@@ -1,22 +1,27 @@
 <script lang="ts">
-	import { CircleHelp } from 'lucide-svelte';
+    import { CircleQuestionMark } from '@lucide/svelte';
-	import { _ } from 'svelte-i18n';
+    import { i18n } from '$lib/i18n.svelte';
+    import type { Snippet } from 'svelte';
 
-	export let link: string | undefined = undefined;
+    let {
+        link,
+        class: className = '',
+        children,
+    }: {
+        link: string;
+        class?: string;
+        children: Snippet;
+    } = $props();
 </script>
 
-<div class="text-sm bg-muted rounded border flex flex-row items-center p-2 {$$props.class || ''}">
+<div class="text-[13px] bg-secondary rounded border flex flex-row items-center p-2 {className}">
-	<CircleHelp size="16" class="w-4 mr-2 shrink-0 grow-0" />
+    <CircleQuestionMark size="16" class="w-4 mr-2 shrink-0 grow-0" />
-	<div>
+    <div>
-		<slot />
+        {@render children()}
-		{#if link}
+        {#if link}
-			<a
+            <a href={link} target="_blank" class="text-[13px] text-link hover:underline">
-				href={link}
+                {i18n._('menu.more')}
-				target="_blank"
+            </a>
-				class="text-sm text-blue-500 dark:text-blue-300 hover:underline"
+        {/if}
-			>
+    </div>
-				{$_('menu.more')}
-			</a>
-		{/if}
-	</div>
 </div>

website/src/lib/components/LanguageSelect.svelte

@@ -1,42 +1,30 @@
 <script lang="ts">
-	import * as Select from '$lib/components/ui/select';
+    import { page } from '$app/state';
-	import { languages } from '$lib/languages';
+    import * as Select from '$lib/components/ui/select';
-	import { getURLForLanguage } from '$lib/utils';
+    import { languages } from '$lib/languages';
-	import { Languages } from 'lucide-svelte';
+    import { getURLForLanguage } from '$lib/utils';
-	import { _, locale } from 'svelte-i18n';
+    import { Languages } from '@lucide/svelte';
-
+    import { i18n } from '$lib/i18n.svelte';
-	let selected = {
-		value: '',
-		label: ''
-	};
-
-	$: if ($locale) {
-		selected = {
-			value: $locale,
-			label: languages[$locale]
-		};
-	}
 </script>
 
-<Select.Root bind:selected>
+<Select.Root type="single" value={i18n.lang}>
-	<Select.Trigger class="w-[180px] {$$props.class ?? ''}">
+    <Select.Trigger class="w-[180px] px-2" aria-label={i18n._('menu.language')}>
-		<Languages size="16" />
+        <Languages size="16" />
-		<Select.Value class="ml-2 mr-auto" />
+        <span class="mr-auto">
-	</Select.Trigger>
+            {languages[i18n.lang]}
-	<Select.Content>
+        </span>
-		{#each Object.entries(languages) as [lang, label]}
+    </Select.Trigger>
-			<a href={getURLForLanguage(lang)}>
+    <Select.Content>
-				<Select.Item value={lang}>{label}</Select.Item>
+        {#each Object.entries(languages) as [lang, label]}
-			</a>
+            {#if page.url.pathname.includes('404')}
-		{/each}
+                <a href={getURLForLanguage(lang, '/')}>
-	</Select.Content>
+                    <Select.Item value={lang}>{label}</Select.Item>
+                </a>
+            {:else}
+                <a href={getURLForLanguage(lang, page.url.pathname)}>
+                    <Select.Item value={lang}>{label}</Select.Item>
+                </a>
+            {/if}
+        {/each}
+    </Select.Content>
 </Select.Root>
-
-<!-- hidden links for svelte crawling -->
-<div class="hidden">
-	{#each Object.entries(languages) as [lang, label]}
-		<a href={getURLForLanguage(lang)}>
-			{label}
-		</a>
-	{/each}
-</div>

website/src/lib/components/Logo.svelte

@@ -1,63 +1,68 @@
 <script lang="ts">
-	import { base } from '$app/paths';
+    import { mode } from 'mode-watcher';
-	import { mode, systemPrefersMode } from 'mode-watcher';
+    import { base } from '$app/paths';
 
-	export let iconOnly = false;
+    let {
-	export let company = 'gpx.studio';
+        iconOnly = false,
-
+        company = 'gpx.studio',
-	$: effectiveMode = $mode ?? $systemPrefersMode ?? 'light';
+        ...others
+    }: {
+        iconOnly?: boolean;
+        company?: 'gpx.studio' | 'maptiler' | 'github' | 'crowdin' | 'facebook' | 'reddit';
+        [key: string]: any;
+    } = $props();
 </script>
 
 {#if company === 'gpx.studio'}
-	<img
+    <img
-		src="{base}/{iconOnly ? 'icon' : 'logo'}{effectiveMode === 'dark' ? '-dark' : ''}.svg"
+        src="{base}/{iconOnly ? 'icon' : 'logo'}{mode.current === 'dark' ? '-dark' : ''}.svg"
-		alt="Logo of gpx.studio."
+        alt="Logo of gpx.studio."
-		{...$$restProps}
+        {...others}
-	/>
+    />
-{:else if company === 'mapbox'}
+{:else if company === 'maptiler'}
-	<img
+    <img
-		src="{base}/mapbox-logo-{effectiveMode === 'dark' ? 'white' : 'black'}.svg"
+        src="{base}/maptiler-logo{mode.current === 'dark' ? '-dark' : ''}.svg"
-		alt="Logo of Mapbox."
+        alt="Logo of Maptiler."
-		{...$$restProps}
+        {...others}
-	/>
+    />
 {:else if company === 'github'}
-	<svg
+    <svg
-		role="img"
+        role="img"
-		viewBox="0 0 24 24"
+        viewBox="0 0 24 24"
-		xmlns="http://www.w3.org/2000/svg"
+        xmlns="http://www.w3.org/2000/svg"
-		class="fill-foreground {$$restProps.class ?? ''}"
+        class="fill-foreground {others.class ?? ''}"
-		><title>GitHub</title><path
+        ><title>GitHub</title><path
-			d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"
+            d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"
-		/></svg
+        /></svg
-	>
+    >
 {:else if company === 'crowdin'}
-	<svg
+    <svg
-		role="img"
+        role="img"
-		viewBox="0 0 24 24"
+        viewBox="0 0 24 24"
-		xmlns="http://www.w3.org/2000/svg"
+        xmlns="http://www.w3.org/2000/svg"
-		class="fill-foreground {$$restProps.class ?? ''}"
+        class="fill-foreground {others.class ?? ''}"
-		><title>Crowdin</title><path
+        ><title>Crowdin</title><path
-			d="M16.119 17.793a2.619 2.619 0 0 1-1.667-.562c-.546-.436-1.004-1.09-1.018-1.858-.008-.388.414-.388.414-.388l1.018-.008c.332.008.43.47.445.586.128 1.04.717 1.495 1.168 1.702.273.123.204.513-.362.528zm-5.695-5.287L8.5 12.252c-.867-.214-.844-.982-.807-1.247a5.119 5.119 0 0 1 .814-2.125c.545-.804 1.303-1.508 2.29-2.073 1.856-1.074 4.45-1.673 7.31-1.673 2.09 0 4.256.27 4.29.27.197.025.328.213.333.437a.377.377 0 0 1-.355.393l-.92-.01c-2.902 0-4.968.394-6.506 1.248-1.527.837-2.57 2.117-3.287 4.012-.076.163-.335 1.12-1.24 1.022zm2.533 7.823c-1.44 0-2.797-.622-3.825-1.746-.87-.96-1.397-1.931-1.493-3.164-.06-.813.3-1.094.788-1.044l1.988.218c.45.092.75.34.825.854.397 2.736 2.122 3.814 3.15 4.046.18.042.292.157.283.365a.412.412 0 0 1-.322.398c-.458.074-.936.073-1.394.073zm-4.101 2.418a14.216 14.216 0 0 1-2.307-.214c-1.202-.214-2.208-.582-3.072-1.13C1.41 20.095.163 17.786.014 15.048c-.037-.65-.11-1.89 1.427-1.797.638.033 1.653.343 2.368.548.887.247 1.314.933 1.314 1.608 0 3.858 3.494 6.408 5.02 6.408.654 0 .414.701.127.779-.502.136-1.15.153-1.413.153zM3.525 11.419c-.605-.109-1.194-.358-1.768-.5C-.018 10.479.284 8.688.45 8.196c1.617-4.757 6.746-6.35 10.887-6.773 3.898-.4 7.978-.092 11.778.967.31.083 1.269.327.718.891-.35.358-1.7-.016-2.073-.041-2.23-.167-4.434-.192-6.656.15-2.349.357-4.768 1.099-6.71 2.665-.938.758-1.76 1.723-2.313 2.866-.144.3-.256.6-.354.9-.11.327-.47 1.91-2.215 1.6zm9.94.917c.332-1.488 1.81-3.848 6.385-3.686 1.05.033.57.749.052.731-2.586-.09-3.815 1.578-4.457 3.27-.219.546-.68.626-1.271.53-.415-.074-.866-.123-.71-.846Z"
+            d="M16.119 17.793a2.619 2.619 0 0 1-1.667-.562c-.546-.436-1.004-1.09-1.018-1.858-.008-.388.414-.388.414-.388l1.018-.008c.332.008.43.47.445.586.128 1.04.717 1.495 1.168 1.702.273.123.204.513-.362.528zm-5.695-5.287L8.5 12.252c-.867-.214-.844-.982-.807-1.247a5.119 5.119 0 0 1 .814-2.125c.545-.804 1.303-1.508 2.29-2.073 1.856-1.074 4.45-1.673 7.31-1.673 2.09 0 4.256.27 4.29.27.197.025.328.213.333.437a.377.377 0 0 1-.355.393l-.92-.01c-2.902 0-4.968.394-6.506 1.248-1.527.837-2.57 2.117-3.287 4.012-.076.163-.335 1.12-1.24 1.022zm2.533 7.823c-1.44 0-2.797-.622-3.825-1.746-.87-.96-1.397-1.931-1.493-3.164-.06-.813.3-1.094.788-1.044l1.988.218c.45.092.75.34.825.854.397 2.736 2.122 3.814 3.15 4.046.18.042.292.157.283.365a.412.412 0 0 1-.322.398c-.458.074-.936.073-1.394.073zm-4.101 2.418a14.216 14.216 0 0 1-2.307-.214c-1.202-.214-2.208-.582-3.072-1.13C1.41 20.095.163 17.786.014 15.048c-.037-.65-.11-1.89 1.427-1.797.638.033 1.653.343 2.368.548.887.247 1.314.933 1.314 1.608 0 3.858 3.494 6.408 5.02 6.408.654 0 .414.701.127.779-.502.136-1.15.153-1.413.153zM3.525 11.419c-.605-.109-1.194-.358-1.768-.5C-.018 10.479.284 8.688.45 8.196c1.617-4.757 6.746-6.35 10.887-6.773 3.898-.4 7.978-.092 11.778.967.31.083 1.269.327.718.891-.35.358-1.7-.016-2.073-.041-2.23-.167-4.434-.192-6.656.15-2.349.357-4.768 1.099-6.71 2.665-.938.758-1.76 1.723-2.313 2.866-.144.3-.256.6-.354.9-.11.327-.47 1.91-2.215 1.6zm9.94.917c.332-1.488 1.81-3.848 6.385-3.686 1.05.033.57.749.052.731-2.586-.09-3.815 1.578-4.457 3.27-.219.546-.68.626-1.271.53-.415-.074-.866-.123-.71-.846Z"
-		/></svg
+        /></svg
-	>
+    >
 {:else if company === 'facebook'}
-	<svg
+    <svg
-		role="img"
+        role="img"
-		viewBox="0 0 24 24"
+        viewBox="0 0 24 24"
-		xmlns="http://www.w3.org/2000/svg"
+        xmlns="http://www.w3.org/2000/svg"
-		class="fill-foreground {$$restProps.class ?? ''}"
+        class="fill-foreground {others.class ?? ''}"
-		><title>Facebook</title><path
+        ><title>Facebook</title><path
-			d="M9.101 23.691v-7.98H6.627v-3.667h2.474v-1.58c0-4.085 1.848-5.978 5.858-5.978.401 0 .955.042 1.468.103a8.68 8.68 0 0 1 1.141.195v3.325a8.623 8.623 0 0 0-.653-.036 26.805 26.805 0 0 0-.733-.009c-.707 0-1.259.096-1.675.309a1.686 1.686 0 0 0-.679.622c-.258.42-.374.995-.374 1.752v1.297h3.919l-.386 2.103-.287 1.564h-3.246v8.245C19.396 23.238 24 18.179 24 12.044c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.628 3.874 10.35 9.101 11.647Z"
+            d="M9.101 23.691v-7.98H6.627v-3.667h2.474v-1.58c0-4.085 1.848-5.978 5.858-5.978.401 0 .955.042 1.468.103a8.68 8.68 0 0 1 1.141.195v3.325a8.623 8.623 0 0 0-.653-.036 26.805 26.805 0 0 0-.733-.009c-.707 0-1.259.096-1.675.309a1.686 1.686 0 0 0-.679.622c-.258.42-.374.995-.374 1.752v1.297h3.919l-.386 2.103-.287 1.564h-3.246v8.245C19.396 23.238 24 18.179 24 12.044c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.628 3.874 10.35 9.101 11.647Z"
-		/></svg
+        /></svg
-	>
+    >
-{:else if company === 'x'}
+{:else if company === 'reddit'}
-	<svg
+    <svg
-		role="img"
+        role="img"
-		viewBox="0 0 24 24"
+        viewBox="0 0 24 24"
-		xmlns="http://www.w3.org/2000/svg"
+        xmlns="http://www.w3.org/2000/svg"
-		class="fill-foreground {$$restProps.class ?? ''}"
+        class="fill-foreground {others.class ?? ''}"
-		><title>X</title><path
+        ><title>Reddit</title><path
-			d="M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z"
+            d="M12 0C5.373 0 0 5.373 0 12c0 3.314 1.343 6.314 3.515 8.485l-2.286 2.286C.775 23.225 1.097 24 1.738 24H12c6.627 0 12-5.373 12-12S18.627 0 12 0Zm4.388 3.199c1.104 0 1.999.895 1.999 1.999 0 1.105-.895 2-1.999 2-.946 0-1.739-.657-1.947-1.539v.002c-1.147.162-2.032 1.15-2.032 2.341v.007c1.776.067 3.4.567 4.686 1.363.473-.363 1.064-.58 1.707-.58 1.547 0 2.802 1.254 2.802 2.802 0 1.117-.655 2.081-1.601 2.531-.088 3.256-3.637 5.876-7.997 5.876-4.361 0-7.905-2.617-7.998-5.87-.954-.447-1.614-1.415-1.614-2.538 0-1.548 1.255-2.802 2.803-2.802.645 0 1.239.218 1.712.585 1.275-.79 2.881-1.291 4.64-1.365v-.01c0-1.663 1.263-3.034 2.88-3.207.188-.911.993-1.595 1.959-1.595Zm-8.085 8.376c-.784 0-1.459.78-1.506 1.797-.047 1.016.64 1.429 1.426 1.429.786 0 1.371-.369 1.418-1.385.047-1.017-.553-1.841-1.338-1.841Zm7.406 0c-.786 0-1.385.824-1.338 1.841.047 1.017.634 1.385 1.418 1.385.785 0 1.473-.413 1.426-1.429-.046-1.017-.721-1.797-1.506-1.797Zm-3.703 4.013c-.974 0-1.907.048-2.77.135-.147.015-.241.168-.183.305.483 1.154 1.622 1.964 2.953 1.964 1.33 0 2.47-.81 2.953-1.964.057-.137-.037-.29-.184-.305-.863-.087-1.795-.135-2.769-.135Z"
-		/></svg
+        /></svg
-	>
+    >
 {/if}

website/src/lib/components/Map.svelte

@@ -1,331 +0,0 @@
-<script lang="ts">
-	import { onDestroy, onMount } from 'svelte';
-
-	import mapboxgl from 'mapbox-gl';
-	import 'mapbox-gl/dist/mapbox-gl.css';
-
-	import MapboxGeocoder from '@mapbox/mapbox-gl-geocoder';
-	import '@mapbox/mapbox-gl-geocoder/dist/mapbox-gl-geocoder.css';
-
-	import { Button } from '$lib/components/ui/button';
-	import { map } from '$lib/stores';
-	import { settings } from '$lib/db';
-	import { _ } from 'svelte-i18n';
-	import { PUBLIC_MAPBOX_TOKEN } from '$env/static/public';
-	import { page } from '$app/stores';
-
-	export let accessToken = PUBLIC_MAPBOX_TOKEN;
-	export let geolocate = true;
-	export let geocoder = true;
-	export let hash = true;
-
-	mapboxgl.accessToken = accessToken;
-
-	let webgl2Supported = true;
-	let fitBoundsOptions: mapboxgl.FitBoundsOptions = {
-		maxZoom: 15,
-		linear: true,
-		easing: () => 1
-	};
-
-	const { distanceUnits, elevationProfile, verticalFileView, bottomPanelSize, rightPanelSize } =
-		settings;
-	let scaleControl = new mapboxgl.ScaleControl({
-		unit: $distanceUnits
-	});
-
-	onMount(() => {
-		let gl = document.createElement('canvas').getContext('webgl2');
-		if (!gl) {
-			webgl2Supported = false;
-			return;
-		}
-
-		let language = $page.params.language;
-		if (language === 'zh') {
-			language = 'zh-Hans';
-		} else if (language?.includes('-')) {
-			language = language.split('-')[0];
-		} else if (language === '' || language === undefined) {
-			language = 'en';
-		}
-
-		let newMap = new mapboxgl.Map({
-			container: 'map',
-			style: { version: 8, sources: {}, layers: [] },
-			zoom: 0,
-			hash: hash,
-			language,
-			attributionControl: false,
-			logoPosition: 'bottom-right',
-			boxZoom: false
-		});
-		newMap.on('load', () => {
-			$map = newMap; // only set the store after the map has loaded
-			scaleControl.setUnit($distanceUnits);
-		});
-
-		newMap.addControl(
-			new mapboxgl.AttributionControl({
-				compact: true
-			})
-		);
-
-		newMap.addControl(
-			new mapboxgl.NavigationControl({
-				visualizePitch: true
-			})
-		);
-
-		if (geocoder) {
-			newMap.addControl(
-				new MapboxGeocoder({
-					accessToken: mapboxgl.accessToken,
-					mapboxgl: mapboxgl,
-					collapsed: true,
-					flyTo: fitBoundsOptions,
-					language
-				})
-			);
-		}
-
-		if (geolocate) {
-			newMap.addControl(
-				new mapboxgl.GeolocateControl({
-					positionOptions: {
-						enableHighAccuracy: true
-					},
-					fitBoundsOptions,
-					trackUserLocation: true,
-					showUserHeading: true
-				})
-			);
-		}
-
-		newMap.addControl(scaleControl);
-
-		newMap.on('style.load', () => {
-			newMap.addSource('mapbox-dem', {
-				type: 'raster-dem',
-				url: 'mapbox://mapbox.mapbox-terrain-dem-v1',
-				tileSize: 512,
-				maxzoom: 14
-			});
-			newMap.setTerrain({
-				source: 'mapbox-dem',
-				exaggeration: newMap.getPitch() > 0 ? 1 : 0
-			});
-			newMap.setFog({
-				color: 'rgb(186, 210, 235)',
-				'high-color': 'rgb(36, 92, 223)',
-				'horizon-blend': 0.1,
-				'space-color': 'rgb(156, 240, 255)'
-			});
-			newMap.on('pitch', () => {
-				if (newMap.getPitch() > 0) {
-					newMap.setTerrain({
-						source: 'mapbox-dem',
-						exaggeration: 1
-					});
-				} else {
-					newMap.setTerrain({
-						source: 'mapbox-dem',
-						exaggeration: 0
-					});
-				}
-			});
-			// add dummy layer to place the overlay layers below
-			newMap.addLayer({
-				id: 'overlays',
-				type: 'background',
-				paint: {
-					'background-color': 'rgba(0, 0, 0, 0)'
-				}
-			});
-		});
-	});
-
-	onDestroy(() => {
-		if ($map) {
-			$map.remove();
-			$map = null;
-		}
-	});
-
-	$: if (
-		$map &&
-		(!$verticalFileView || !$elevationProfile || $bottomPanelSize || $rightPanelSize)
-	) {
-		$map.resize();
-	}
-</script>
-
-<div {...$$restProps}>
-	<div id="map" class="h-full {webgl2Supported ? '' : 'hidden'}"></div>
-	<div
-		class="flex flex-col items-center justify-center gap-3 h-full {webgl2Supported ? 'hidden' : ''}"
-	>
-		<p>{$_('webgl2_required')}</p>
-		<Button href="https://get.webgl.org/webgl2/" target="_blank">
-			{$_('enable_webgl2')}
-		</Button>
-	</div>
-</div>
-
-<style lang="postcss">
-	div :global(.mapboxgl-map) {
-		@apply font-sans;
-	}
-
-	div :global(.mapboxgl-ctrl-top-right > .mapboxgl-ctrl) {
-		@apply shadow-md;
-		@apply bg-background;
-		@apply text-foreground;
-	}
-
-	div :global(.mapboxgl-ctrl-icon) {
-		@apply dark:brightness-[4.7];
-	}
-
-	div :global(.mapboxgl-ctrl-geocoder) {
-		@apply flex;
-		@apply flex-row;
-		@apply w-fit;
-		@apply min-w-fit;
-		@apply items-center;
-		@apply shadow-md;
-	}
-
-	div :global(.suggestions) {
-		@apply shadow-md;
-		@apply bg-background;
-		@apply text-foreground;
-	}
-
-	div :global(.mapboxgl-ctrl-geocoder .suggestions > li > a) {
-		@apply text-foreground;
-		@apply hover:text-accent-foreground;
-		@apply hover:bg-accent;
-	}
-
-	div :global(.mapboxgl-ctrl-geocoder .suggestions > .active > a) {
-		@apply bg-background;
-	}
-
-	div :global(.mapboxgl-ctrl-geocoder--button) {
-		@apply bg-transparent;
-		@apply hover:bg-transparent;
-	}
-
-	div :global(.mapboxgl-ctrl-geocoder--icon) {
-		@apply fill-foreground;
-		@apply hover:fill-accent-foreground;
-	}
-
-	div :global(.mapboxgl-ctrl-geocoder--icon-search) {
-		@apply relative;
-		@apply top-0;
-		@apply left-0;
-		@apply my-2;
-		@apply w-[29px];
-	}
-
-	div :global(.mapboxgl-ctrl-geocoder--input) {
-		@apply relative;
-		@apply w-64;
-		@apply py-0;
-		@apply pl-2;
-		@apply focus:outline-none;
-		@apply transition-[width];
-		@apply duration-200;
-		@apply text-foreground;
-	}
-
-	div :global(.mapboxgl-ctrl-geocoder--collapsed .mapboxgl-ctrl-geocoder--input) {
-		@apply w-0;
-		@apply p-0;
-	}
-
-	div :global(.mapboxgl-ctrl-top-right) {
-		@apply z-40;
-		@apply flex;
-		@apply flex-col;
-		@apply items-end;
-		@apply h-full;
-		@apply overflow-hidden;
-	}
-
-	.horizontal :global(.mapboxgl-ctrl-bottom-left) {
-		@apply bottom-[42px];
-	}
-
-	.horizontal :global(.mapboxgl-ctrl-bottom-right) {
-		@apply bottom-[42px];
-	}
-
-	div :global(.mapboxgl-ctrl-attrib) {
-		@apply dark:bg-transparent;
-	}
-
-	div :global(.mapboxgl-compact-show.mapboxgl-ctrl-attrib) {
-		@apply dark:bg-background;
-	}
-
-	div :global(.mapboxgl-ctrl-attrib-button) {
-		@apply dark:bg-foreground;
-	}
-
-	div :global(.mapboxgl-compact-show .mapboxgl-ctrl-attrib-button) {
-		@apply dark:bg-foreground;
-	}
-
-	div :global(.mapboxgl-ctrl-attrib a) {
-		@apply text-foreground;
-	}
-
-	div :global(.mapboxgl-popup) {
-		@apply w-fit;
-		@apply z-20;
-	}
-
-	div :global(.mapboxgl-popup-content) {
-		@apply p-0;
-		@apply bg-transparent;
-		@apply shadow-none;
-	}
-
-	div :global(.mapboxgl-popup-anchor-top .mapboxgl-popup-tip) {
-		@apply border-b-background;
-	}
-
-	div :global(.mapboxgl-popup-anchor-top-left .mapboxgl-popup-tip) {
-		@apply border-b-background;
-	}
-
-	div :global(.mapboxgl-popup-anchor-top-right .mapboxgl-popup-tip) {
-		@apply border-b-background;
-	}
-
-	div :global(.mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip) {
-		@apply border-t-background;
-		@apply drop-shadow-md;
-	}
-
-	div :global(.mapboxgl-popup-anchor-bottom-left .mapboxgl-popup-tip) {
-		@apply border-t-background;
-		@apply drop-shadow-md;
-	}
-
-	div :global(.mapboxgl-popup-anchor-bottom-right .mapboxgl-popup-tip) {
-		@apply border-t-background;
-		@apply drop-shadow-md;
-	}
-
-	div :global(.mapboxgl-popup-anchor-left .mapboxgl-popup-tip) {
-		@apply border-r-background;
-	}
-
-	div :global(.mapboxgl-popup-anchor-right .mapboxgl-popup-tip) {
-		@apply border-l-background;
-	}
-</style>

website/src/lib/components/ModeSwitch.svelte

@@ -1,24 +1,28 @@
 <script lang="ts">
-	import { Button } from '$lib/components/ui/button';
+    import { Button } from '$lib/components/ui/button';
-	import { Moon, Sun } from 'lucide-svelte';
+    import { Moon, Sun } from '@lucide/svelte';
-	import { mode, setMode, systemPrefersMode } from 'mode-watcher';
+    import { mode, setMode } from 'mode-watcher';
-	import { _ } from 'svelte-i18n';
+    import { i18n } from '$lib/i18n.svelte';
 
-	export let size = '20';
+    let {
-
+        class: className = '',
-	$: selectedMode = $mode ?? $systemPrefersMode ?? 'light';
+    }: {
+        class?: string;
+    } = $props();
 </script>
 
 <Button
-	variant="ghost"
+    variant="outline"
-	class="h-8 px-1.5 {$$props.class ?? ''}"
+    size="icon"
-	on:click={() => {
+    class={className}
-		setMode(selectedMode === 'light' ? 'dark' : 'light');
+    onclick={() => {
-	}}
+        setMode(mode.current === 'light' ? 'dark' : 'light');
+    }}
+    aria-label={i18n._('menu.mode')}
 >
-	{#if selectedMode === 'light'}
+    {#if mode.current === 'light'}
-		<Sun {size} />
+        <Sun />
-	{:else}
+    {:else}
-		<Moon {size} />
+        <Moon />
-	{/if}
+    {/if}
 </Button>

website/src/lib/components/Nav.svelte

@@ -1,30 +1,44 @@
 <script lang="ts">
-	import Logo from '$lib/components/Logo.svelte';
+    import Logo from '$lib/components/Logo.svelte';
-	import { Button } from '$lib/components/ui/button';
+    import { Button } from '$lib/components/ui/button';
-	import ModeSwitch from '$lib/components/ModeSwitch.svelte';
+    import { BookOpenText, House, Map } from '@lucide/svelte';
-	import { BookOpenText, Home, Map } from 'lucide-svelte';
+    import { i18n } from '$lib/i18n.svelte';
-	import { _, locale } from 'svelte-i18n';
+    import { getURLForLanguage } from '$lib/utils';
-	import { getURLForLanguage } from '$lib/utils';
 </script>
 
-<nav class="w-full sticky top-0 bg-background z-50">
+<nav class="sticky top-0 w-full px-12 py-2 bg-background z-50 flex flex-col items-center border-b">
-	<div class="mx-6 py-2 flex flex-row items-center border-b gap-4 sm:gap-8">
+    <div class="w-full max-w-5xl flex flex-row items-center gap-4 sm:gap-8">
-		<a href={getURLForLanguage($locale, '/')} class="shrink-0 translate-y-0.5">
+        <a
-			<Logo class="h-8 sm:hidden" iconOnly={true} />
+            href={getURLForLanguage(i18n.lang, '/')}
-			<Logo class="h-8 hidden sm:block" />
+            class="shrink-0 translate-y-0.25 justify-self-start"
-		</a>
+        >
-		<Button variant="link" class="text-base px-0" href={getURLForLanguage($locale, '/')}>
+            <Logo class="h-8 xs:hidden" iconOnly={true} width="26" />
-			<Home size="18" class="mr-1.5" />
+            <Logo class="h-8 hidden xs:block" width="153" />
-			{$_('homepage.home')}
+        </a>
-		</Button>
+        <Button
-		<Button variant="link" class="text-base px-0" href={getURLForLanguage($locale, '/app')}>
+            variant="link"
-			<Map size="18" class="mr-1.5" />
+            class="text-base px-0 has-[>svg]:px-0 ml-auto"
-			{$_('homepage.app')}
+            href={getURLForLanguage(i18n.lang, '/')}
-		</Button>
+        >
-		<Button variant="link" class="text-base px-0" href={getURLForLanguage($locale, '/help')}>
+            <House size="18" />
-			<BookOpenText size="18" class="mr-1.5" />
+            {i18n._('homepage.home')}
-			{$_('menu.help')}
+        </Button>
-		</Button>
+        <Button
-		<ModeSwitch class="ml-auto" />
+            data-sveltekit-reload
-	</div>
+            variant="link"
+            class="text-base px-0 has-[>svg]:px-0"
+            href={getURLForLanguage(i18n.lang, '/app')}
+        >
+            <Map size="18" />
+            {i18n._('homepage.app')}
+        </Button>
+        <Button
+            variant="link"
+            class="text-base px-0 has-[>svg]:px-0"
+            href={getURLForLanguage(i18n.lang, '/help')}
+        >
+            <BookOpenText size="18" />
+            {i18n._('menu.help')}
+        </Button>
+    </div>
 </nav>

website/src/lib/components/Resizer.svelte

@@ -1,41 +1,48 @@
 <script lang="ts">
-	export let orientation: 'col' | 'row' = 'col';
+    let {
+        orientation = 'col',
+        after = $bindable(),
+        minAfter = 0,
+        maxAfter = Number.MAX_SAFE_INTEGER,
+    }: {
+        orientation?: 'col' | 'row';
+        after: number;
+        minAfter?: number;
+        maxAfter?: number;
+    } = $props();
 
-	export let after: number;
+    function handleMouseDown(event: PointerEvent) {
-	export let minAfter: number = 0;
+        const startX = event.clientX;
-	export let maxAfter: number = Number.MAX_SAFE_INTEGER;
+        const startY = event.clientY;
+        const startAfter = after;
 
-	function handleMouseDown(event: PointerEvent) {
+        const handleMouseMove = (event: PointerEvent) => {
-		const startX = event.clientX;
+            const newAfter =
-		const startY = event.clientY;
+                startAfter +
-		const startAfter = after;
+                (orientation === 'col' ? startX - event.clientX : startY - event.clientY);
+            if (newAfter >= minAfter && newAfter <= maxAfter) {
+                after = newAfter;
+            } else if (newAfter < minAfter && after !== minAfter) {
+                after = minAfter;
+            } else if (newAfter > maxAfter && after !== maxAfter) {
+                after = maxAfter;
+            }
+        };
 
-		const handleMouseMove = (event: PointerEvent) => {
+        const handleMouseUp = () => {
-			const newAfter =
+            window.removeEventListener('pointermove', handleMouseMove);
-				startAfter + (orientation === 'col' ? startX - event.clientX : startY - event.clientY);
+            window.removeEventListener('pointerup', handleMouseUp);
-			if (newAfter >= minAfter && newAfter <= maxAfter) {
+        };
-				after = newAfter;
-			} else if (newAfter < minAfter && after !== minAfter) {
-				after = minAfter;
-			} else if (newAfter > maxAfter && after !== maxAfter) {
-				after = maxAfter;
-			}
-		};
 
-		const handleMouseUp = () => {
+        window.addEventListener('pointermove', handleMouseMove);
-			window.removeEventListener('pointermove', handleMouseMove);
+        window.addEventListener('pointerup', handleMouseUp);
-			window.removeEventListener('pointerup', handleMouseUp);
+    }
-		};
-
-		window.addEventListener('pointermove', handleMouseMove);
-		window.addEventListener('pointerup', handleMouseUp);
-	}
 </script>
 
-<!-- svelte-ignore a11y-no-static-element-interactions -->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
 <div
-	class="{orientation === 'col'
+    class="{orientation === 'col'
-		? 'w-1 h-full cursor-col-resize border-l'
+        ? 'w-1 h-full cursor-col-resize border-l'
-		: 'w-full h-1 cursor-row-resize border-t'} {orientation}"
+        : 'w-full h-1 cursor-row-resize border-t'} {orientation}"
-	on:pointerdown={handleMouseDown}
+    onpointerdown={handleMouseDown}
-/>
+></div>

website/src/lib/components/Shortcut.svelte

@@ -1,26 +1,43 @@
 <script lang="ts">
-	import { onMount } from 'svelte';
+    import { isMac, isSafari } from '$lib/utils';
-	import { _ } from 'svelte-i18n';
+    import { onMount } from 'svelte';
+    import { i18n } from '$lib/i18n.svelte';
+    import * as Kbd from '$lib/components/ui/kbd/index.js';
 
-	export let key: string;
+    let {
-	export let shift: boolean = false;
+        key = undefined,
-	export let ctrl: boolean = false;
+        shift = false,
-	export let click: boolean = false;
+        ctrl = false,
+        click = false,
+        class: className = '',
+    }: {
+        key?: string;
+        shift?: boolean;
+        ctrl?: boolean;
+        click?: boolean;
+        class?: string;
+    } = $props();
 
-	let isMac = false;
+    let mac = $state(false);
-	let isSafari = false;
+    let safari = $state(false);
 
-	onMount(() => {
+    onMount(() => {
-		isMac = navigator.userAgent.toUpperCase().indexOf('MAC') >= 0;
+        mac = isMac();
-		isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
+        safari = isSafari();
-	});
+    });
 </script>
 
-<div
+<Kbd.Root class="ml-auto {className}">
-	class="ml-auto pl-2 text-xs tracking-widest text-muted-foreground flex flex-row gap-0 items-baseline"
+    {#if shift}
->
+        ⇧
-	<span>{shift ? '⇧' : ''}</span>
+    {/if}
-	<span>{ctrl ? (isMac && !isSafari ? '⌘' : $_('menu.ctrl') + '+') : ''}</span>
+    {#if ctrl}
-	<span class={key === '+' ? 'font-medium text-sm/4' : ''}>{key}</span>
+        {mac && !safari ? '⌘' : i18n._('menu.ctrl')}
-	<span>{click ? $_('menu.click') : ''}</span>
+    {/if}
-</div>
+    {#if key}
+        {key}
+    {/if}
+    {#if click}
+        {i18n._('menu.click')}
+    {/if}
+</Kbd.Root>

website/src/lib/components/Tooltip.svelte

@@ -1,14 +1,32 @@
 <script lang="ts">
-	import * as Tooltip from '$lib/components/ui/tooltip/index.js';
+    import * as Tooltip from '$lib/components/ui/tooltip/index.js';
+    import type { Snippet } from 'svelte';
 
-	export let side: 'top' | 'right' | 'bottom' | 'left' = 'top';
+    let {
+        label,
+        side = 'top',
+        children,
+        extra,
+        class: className = '',
+    }: {
+        label: string;
+        side?: 'top' | 'right' | 'bottom' | 'left';
+        children: Snippet;
+        extra?: Snippet;
+        class?: string;
+    } = $props();
 </script>
 
-<Tooltip.Root>
+<Tooltip.Provider>
-	<Tooltip.Trigger {...$$restProps}>
+    <Tooltip.Root>
-		<slot name="data" />
+        <Tooltip.Trigger class={className} aria-label={label}>
-	</Tooltip.Trigger>
+            {@render children()}
-	<Tooltip.Content {side}>
+        </Tooltip.Trigger>
-		<slot name="tooltip" />
+        <Tooltip.Content {side}>
-	</Tooltip.Content>
+            <div class="flex flex-row items-center gap-2">
-</Tooltip.Root>
+                <span>{label}</span>
+                {@render extra?.()}
+            </div>
+        </Tooltip.Content>
+    </Tooltip.Root>
+</Tooltip.Provider>

website/src/lib/components/Welcome.svelte

@@ -1,29 +0,0 @@
-<script lang="ts">
-	import * as AlertDialog from '$lib/components/ui/alert-dialog';
-	import { settings } from '$lib/db';
-
-	const { showWelcomeMessage } = settings;
-</script>
-
-<AlertDialog.Root
-	open={$showWelcomeMessage === true}
-	closeOnEscape={false}
-	closeOnOutsideClick={false}
-	onOpenChange={() => ($showWelcomeMessage = false)}
->
-	<AlertDialog.Trigger class="hidden"></AlertDialog.Trigger>
-	<AlertDialog.Content>
-		<AlertDialog.Header>
-			<AlertDialog.Title>
-				Welcome to the new version of <b>gpx.studio</b>!
-			</AlertDialog.Title>
-			<AlertDialog.Description class="space-y-1">
-				<p>The website is still under development and may contain bugs.</p>
-				<p>Please report any issues you find by email or on GitHub.</p>
-			</AlertDialog.Description>
-		</AlertDialog.Header>
-		<AlertDialog.Footer>
-			<AlertDialog.Action>Let's go!</AlertDialog.Action>
-		</AlertDialog.Footer>
-	</AlertDialog.Content>
-</AlertDialog.Root>

website/src/lib/components/WithUnits.svelte

@@ -1,58 +1,56 @@
 <script lang="ts">
-	import { settings } from '$lib/db';
+    import {
-	import {
+        celsiusToFahrenheit,
-		celsiusToFahrenheit,
+        getConvertedDistance,
-		distancePerHourToSecondsPerDistance,
+        getConvertedElevation,
-		kilometersToMiles,
+        getConvertedVelocity,
-		metersToFeet,
+        getDistanceUnits,
-		secondsToHHMMSS
+        getElevationUnits,
-	} from '$lib/units';
+        getVelocityUnits,
+        secondsToHHMMSS,
+    } from '$lib/units';
+    import { i18n } from '$lib/i18n.svelte';
+    import { settings } from '$lib/logic/settings';
 
-	import { _ } from 'svelte-i18n';
+    let {
+        value,
+        type,
+        showUnits = true,
+        decimals = undefined,
+        class: className = '',
+    }: {
+        value: number;
+        type: 'distance' | 'elevation' | 'speed' | 'temperature' | 'time';
+        showUnits?: boolean;
+        decimals?: number;
+        class?: string;
+    } = $props();
 
-	export let value: number;
+    const { distanceUnits, velocityUnits, temperatureUnits } = settings;
-	export let type: 'distance' | 'elevation' | 'speed' | 'temperature' | 'time';
-	export let showUnits: boolean = true;
-	export let decimals: number | undefined = undefined;
-
-	const { distanceUnits, velocityUnits, temperatureUnits } = settings;
 </script>
 
-<span class={$$props.class}>
+<span class={className}>
-	{#if type === 'distance'}
+    {#if type === 'distance'}
-		{#if $distanceUnits === 'metric'}
+        {getConvertedDistance(value, $distanceUnits).toFixed(decimals ?? 2)}
-			{value.toFixed(decimals ?? 2)} {showUnits ? $_('units.kilometers') : ''}
+        {showUnits ? getDistanceUnits($distanceUnits) : ''}
-		{:else}
+    {:else if type === 'elevation'}
-			{kilometersToMiles(value).toFixed(decimals ?? 2)} {showUnits ? $_('units.miles') : ''}
+        {getConvertedElevation(value, $distanceUnits).toFixed(decimals ?? 0)}
-		{/if}
+        {showUnits ? getElevationUnits($distanceUnits) : ''}
-	{:else if type === 'elevation'}
+    {:else if type === 'speed'}
-		{#if $distanceUnits === 'metric'}
+        {#if $velocityUnits === 'speed'}
-			{value.toFixed(decimals ?? 0)} {showUnits ? $_('units.meters') : ''}
+            {getConvertedVelocity(value, $velocityUnits, $distanceUnits).toFixed(decimals ?? 2)}
-		{:else}
+            {showUnits ? getVelocityUnits($velocityUnits, $distanceUnits) : ''}
-			{metersToFeet(value).toFixed(decimals ?? 0)} {showUnits ? $_('units.feet') : ''}
+        {:else}
-		{/if}
+            {secondsToHHMMSS(getConvertedVelocity(value, $velocityUnits, $distanceUnits))}
-	{:else if type === 'speed'}
+            {showUnits ? getVelocityUnits($velocityUnits, $distanceUnits) : ''}
-		{#if $distanceUnits === 'metric'}
+        {/if}
-			{#if $velocityUnits === 'speed'}
+    {:else if type === 'temperature'}
-				{value.toFixed(decimals ?? 2)} {showUnits ? $_('units.kilometers_per_hour') : ''}
+        {#if $temperatureUnits === 'celsius'}
-			{:else}
+            {value} {showUnits ? i18n._('units.celsius') : ''}
-				{secondsToHHMMSS(distancePerHourToSecondsPerDistance(value))}
+        {:else}
-				{showUnits ? $_('units.minutes_per_kilometer') : ''}
+            {celsiusToFahrenheit(value)} {showUnits ? i18n._('units.fahrenheit') : ''}
-			{/if}
+        {/if}
-		{:else if $velocityUnits === 'speed'}
+    {:else if type === 'time'}
-			{kilometersToMiles(value).toFixed(decimals ?? 2)}
+        {secondsToHHMMSS(value)}
-			{showUnits ? $_('units.miles_per_hour') : ''}
+    {/if}
-		{:else}
-			{secondsToHHMMSS(distancePerHourToSecondsPerDistance(kilometersToMiles(value)))}
-			{showUnits ? $_('units.minutes_per_mile') : ''}
-		{/if}
-	{:else if type === 'temperature'}
-		{#if $temperatureUnits === 'celsius'}
-			{value} {showUnits ? $_('units.celsius') : ''}
-		{:else}
-			{celsiusToFahrenheit(value)} {showUnits ? $_('units.fahrenheit') : ''}
-		{/if}
-	{:else if type === 'time'}
-		{secondsToHHMMSS(value)}
-	{/if}
 </span>

website/src/lib/components/collapsible-tree/CollapsibleTree.svelte

@@ -1,20 +1,28 @@
 <script lang="ts">
-	import { setContext } from 'svelte';
+    import { setContext, type Snippet } from 'svelte';
-	import { writable } from 'svelte/store';
+    import { CollapsibleTreeState } from './utils.svelte';
 
-	export let defaultState: 'open' | 'closed' = 'open';
+    const {
-	export let side: 'left' | 'right' = 'right';
+        defaultState = 'open',
-	export let nohover: boolean = false;
+        side = 'right',
-	export let slotInsideTrigger: boolean = true;
+        nohover = false,
+        slotInsideTrigger = true,
+        children,
+    }: {
+        defaultState?: 'open' | 'closed';
+        side?: 'left' | 'right';
+        nohover?: boolean;
+        slotInsideTrigger?: boolean;
+        children: Snippet;
+    } = $props();
 
-	let open = writable<Record<string, boolean>>({});
+    let open = $state(new CollapsibleTreeState(defaultState));
 
-	setContext('collapsible-tree-default-state', defaultState);
+    setContext('collapsible-tree-state', open);
-	setContext('collapsible-tree-state', open);
+    setContext('collapsible-tree-side', side);
-	setContext('collapsible-tree-side', side);
+    setContext('collapsible-tree-nohover', nohover);
-	setContext('collapsible-tree-nohover', nohover);
+    setContext('collapsible-tree-parent-id', 'root');
-	setContext('collapsible-tree-parent-id', 'root');
+    setContext('collapsible-tree-slot-inside-trigger', slotInsideTrigger);
-	setContext('collapsible-tree-slot-inside-trigger', slotInsideTrigger);
 </script>
 
-<slot />
+{@render children()}

website/src/lib/components/collapsible-tree/CollapsibleTreeNode.svelte

@@ -1,97 +1,93 @@
 <script lang="ts">
-	import * as Collapsible from '$lib/components/ui/collapsible';
+    import * as Collapsible from '$lib/components/ui/collapsible';
-	import { Button } from '$lib/components/ui/button';
+    import { Button } from '$lib/components/ui/button';
-	import { ChevronDown, ChevronLeft, ChevronRight } from 'lucide-svelte';
+    import { ChevronDown, ChevronLeft, ChevronRight } from '@lucide/svelte';
-	import { getContext, onMount, setContext } from 'svelte';
+    import { getContext, setContext, type Snippet } from 'svelte';
-	import { get, type Writable } from 'svelte/store';
+    import type { ClassValue } from 'svelte/elements';
+    import type { CollapsibleTreeState } from './utils.svelte';
 
-	export let id: string | number;
+    const props: {
+        id: string | number;
+        class?: ClassValue;
+        trigger: Snippet;
+        content: Snippet;
+    } = $props();
 
-	let defaultState = getContext<'open' | 'closed'>('collapsible-tree-default-state');
+    let state = getContext<CollapsibleTreeState>('collapsible-tree-state');
-	let open = getContext<Writable<Record<string, boolean>>>('collapsible-tree-state');
+    let side = getContext<'left' | 'right'>('collapsible-tree-side');
-	let side = getContext<'left' | 'right'>('collapsible-tree-side');
+    let nohover = getContext<boolean>('collapsible-tree-nohover');
-	let nohover = getContext<boolean>('collapsible-tree-nohover');
+    let slotInsideTrigger = getContext<boolean>('collapsible-tree-slot-inside-trigger');
-	let slotInsideTrigger = getContext<boolean>('collapsible-tree-slot-inside-trigger');
+    let parentId = getContext<string>('collapsible-tree-parent-id');
-	let parentId = getContext<string>('collapsible-tree-parent-id');
 
-	let fullId = `${parentId}.${id}`;
+    let fullId = `${parentId}.${props.id}`;
-	setContext('collapsible-tree-parent-id', fullId);
+    setContext('collapsible-tree-parent-id', fullId);
 
-	onMount(() => {
+    let open = state.get(fullId);
-		if (!get(open).hasOwnProperty(fullId)) {
-			open.update((value) => {
-				value[fullId] = defaultState === 'open';
-				return value;
-			});
-		}
-	});
 
-	export function openNode() {
+    export function openNode() {
-		open.update((value) => {
+        open.current = true;
-			value[fullId] = true;
+    }
-			return value;
-		});
-	}
 </script>
 
-<Collapsible.Root bind:open={$open[fullId]} class={$$props.class ?? ''}>
+<Collapsible.Root bind:open={open.current} class={props.class}>
-	{#if slotInsideTrigger}
+    {#if slotInsideTrigger}
-		<Collapsible.Trigger class="w-full">
+        <Collapsible.Trigger class="w-full">
-			<Button
+            <Button
-				variant="ghost"
+                variant="ghost"
-				class="w-full flex flex-row {side === 'right'
+                size="icon"
-					? 'justify-between'
+                class="w-full flex flex-row gap-1 border-none {side === 'right'
-					: 'justify-start'} py-0 px-1 h-fit {nohover
+                    ? 'justify-between'
-					? 'hover:bg-background'
+                    : 'justify-start pl-1'} h-fit {nohover
-					: ''} pointer-events-none"
+                    ? 'hover:bg-background'
-			>
+                    : ''} pointer-events-none"
-				{#if side === 'left'}
+            >
-					{#if $open[fullId]}
+                {#if side === 'left'}
-						<ChevronDown size="16" class="shrink-0" />
+                    {#if open.current}
-					{:else}
+                        <ChevronDown size="16" class="shrink-0" />
-						<ChevronRight size="16" class="shrink-0" />
+                    {:else}
-					{/if}
+                        <ChevronRight size="16" class="shrink-0" />
-				{/if}
+                    {/if}
-				<slot name="trigger" />
+                {/if}
-				{#if side === 'right'}
+                {@render props.trigger()}
-					{#if $open[fullId]}
+                {#if side === 'right'}
-						<ChevronDown size="16" class="shrink-0" />
+                    {#if open.current}
-					{:else}
+                        <ChevronDown size="16" class="shrink-0" />
-						<ChevronLeft size="16" class="shrink-0" />
+                    {:else}
-					{/if}
+                        <ChevronLeft size="16" class="shrink-0" />
-				{/if}
+                    {/if}
-			</Button>
+                {/if}
-		</Collapsible.Trigger>
+            </Button>
-	{:else}
+        </Collapsible.Trigger>
-		<Button
+    {:else}
-			variant="ghost"
+        <Button
-			class="w-full flex flex-row {side === 'right'
+            variant="ghost"
-				? 'justify-between'
+            size="icon"
-				: 'justify-start'} py-0 px-1 h-fit {nohover ? 'hover:bg-background' : ''}"
+            class="w-full flex flex-row gap-1 border-none {side === 'right'
-		>
+                ? 'justify-between'
-			{#if side === 'left'}
+                : 'justify-start pl-1'} h-fit {nohover ? 'hover:bg-background' : ''}"
-				<Collapsible.Trigger>
+        >
-					{#if $open[fullId]}
+            {#if side === 'left'}
-						<ChevronDown size="16" class="shrink-0" />
+                <Collapsible.Trigger>
-					{:else}
+                    {#if open.current}
-						<ChevronRight size="16" class="shrink-0" />
+                        <ChevronDown size="16" class="shrink-0" />
-					{/if}
+                    {:else}
-				</Collapsible.Trigger>
+                        <ChevronRight size="16" class="shrink-0" />
-			{/if}
+                    {/if}
-			<slot name="trigger" />
+                </Collapsible.Trigger>
-			{#if side === 'right'}
+            {/if}
-				<Collapsible.Trigger>
+            {@render props.trigger()}
-					{#if $open[fullId]}
+            {#if side === 'right'}
-						<ChevronDown size="16" class="shrink-0" />
+                <Collapsible.Trigger>
-					{:else}
+                    {#if open.current}
-						<ChevronLeft size="16" class="shrink-0" />
+                        <ChevronDown size="16" class="shrink-0" />
-					{/if}
+                    {:else}
-				</Collapsible.Trigger>
+                        <ChevronLeft size="16" class="shrink-0" />
-			{/if}
+                    {/if}
-		</Button>
+                </Collapsible.Trigger>
-	{/if}
+            {/if}
-
+        </Button>
-	<Collapsible.Content class="ml-2">
+    {/if}
-		<slot name="content" />
+    <Collapsible.Content>
-	</Collapsible.Content>
+        {@render props.content()}
+    </Collapsible.Content>
 </Collapsible.Root>

website/src/lib/components/collapsible-tree/utils.svelte.ts

@@ -0,0 +1,31 @@
+export class CollapsibleNodeState {
+    private _open: boolean;
+
+    constructor(defaultState: 'open' | 'closed') {
+        this._open = $state(defaultState === 'open');
+    }
+
+    get current(): boolean {
+        return this._open;
+    }
+
+    set current(value: boolean) {
+        this._open = value;
+    }
+}
+
+export class CollapsibleTreeState {
+    private _open: Record<string, CollapsibleNodeState> = {};
+    private _defaultState: 'open' | 'closed';
+
+    constructor(defaultState: 'open' | 'closed') {
+        this._defaultState = defaultState;
+    }
+
+    get(id: string): CollapsibleNodeState {
+        if (this._open[id] === undefined) {
+            this._open[id] = new CollapsibleNodeState(this._defaultState);
+        }
+        return this._open[id];
+    }
+}

website/src/lib/components/custom-control/CustomControl.svelte

@@ -1,27 +0,0 @@
-<script lang="ts">
-	import CustomControl from './CustomControl';
-	import { map } from '$lib/stores';
-
-	export let position: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' = 'top-right';
-
-	let container: HTMLDivElement;
-	let control: CustomControl | undefined = undefined;
-
-	$: if ($map && container) {
-		if (position.includes('right')) container.classList.add('float-right');
-		else container.classList.add('float-left');
-		container.classList.remove('hidden');
-		if (control === undefined) {
-			control = new CustomControl(container);
-		}
-		$map.addControl(control, position);
-	}
-</script>
-
-<div
-	bind:this={container}
-	class="{$$props.class ||
-		''} clear-both translate-0 m-[10px] mb-0 last:mb-[10px] pointer-events-auto bg-background rounded shadow-md hidden"
->
-	<slot />
-</div>

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

@@ -0,0 +1,85 @@
+<script lang="ts">
+    import type { Component } from 'svelte';
+
+    let { module: Module }: { module: Component } = $props();
+</script>
+
+<div class="markdown flex flex-col gap-3">
+    <Module />
+</div>
+
+<style lang="postcss">
+    @reference "../../../app.css";
+
+    :global(.markdown) {
+        @apply text-muted-foreground;
+    }
+
+    :global(.markdown h1) {
+        @apply text-foreground;
+        @apply text-3xl;
+        @apply font-semibold;
+        @apply mb-3;
+    }
+
+    :global(.markdown h2) {
+        @apply text-foreground;
+        @apply text-2xl;
+        @apply font-semibold;
+        @apply pt-3;
+    }
+
+    :global(.markdown h3) {
+        @apply text-foreground;
+        @apply text-lg;
+        @apply font-semibold;
+        @apply pt-1.5;
+    }
+
+    :global(.markdown p > button, .markdown li > button) {
+        @apply border;
+        @apply rounded-md;
+        @apply px-1;
+    }
+
+    :global(.markdown > a) {
+        @apply text-link;
+        @apply hover:underline;
+        @apply contents;
+    }
+
+    :global(.markdown p > a) {
+        @apply text-link;
+        @apply hover:underline;
+    }
+
+    :global(.markdown li > a) {
+        @apply text-link;
+        @apply hover:underline;
+    }
+
+    :global(.markdown kbd) {
+        @apply p-1;
+        @apply rounded-md;
+        @apply border;
+    }
+
+    :global(.markdown ul) {
+        @apply list-disc;
+        @apply pl-4;
+    }
+
+    :global(.markdown ol) {
+        @apply list-decimal;
+        @apply pl-4;
+    }
+
+    :global(.markdown li) {
+        @apply mt-1;
+        @apply first:mt-0;
+    }
+
+    :global(.markdown hr) {
+        @apply my-5;
+    }
+</style>

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

@@ -1,11 +1,34 @@
 <script lang="ts">
-	export let src;
+    let {
-	export let alt: string;
+        src,
+        alt,
+    }: {
+        src: 'getting-started/interface' | 'tools/routing' | 'tools/split';
+        alt: string;
+    } = $props();
 </script>
 
 <div class="flex flex-col items-center py-6 w-full">
-	<div class="rounded-md overflow-clip shadow-xl mx-auto">
+    <div class="rounded-md overflow-hidden overflow-clip shadow-xl mx-auto">
-		<enhanced:img {src} {alt} class="w-full max-w-3xl" />
+        {#if src === 'getting-started/interface'}
-	</div>
+            <enhanced:img
-	<p class="text-center text-sm text-muted-foreground mt-2">{alt}</p>
+                src="/src/lib/assets/img/docs/getting-started/interface.webp"
+                {alt}
+                class="w-full max-w-3xl"
+            />
+        {:else if src === 'tools/routing'}
+            <enhanced:img
+                src="/src/lib/assets/img/docs/tools/routing.png"
+                {alt}
+                class="w-full max-w-lg"
+            />
+        {:else if src === 'tools/split'}
+            <enhanced:img
+                src="/src/lib/assets/img/docs/tools/split.png"
+                {alt}
+                class="w-full max-w-lg"
+            />
+        {/if}
+    </div>
+    <p class="text-center text-sm text-muted-foreground mt-2">{alt}</p>
 </div>

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

@@ -1,13 +1,13 @@
 <script lang="ts">
-	import mapboxOutdoorsMap from '$lib/assets/img/home/mapbox-outdoors.png?enhanced';
+    import maptilerTopoMap from '$lib/assets/img/home/maptiler-topo.png?enhanced';
-	import waymarkedMap from '$lib/assets/img/home/waymarked.png?enhanced';
+    import waymarkedMap from '$lib/assets/img/home/waymarked.png?enhanced';
 </script>
 
 <div class="relative h-80 aspect-square rounded-2xl shadow-xl overflow-clip">
-	<enhanced:img src={mapboxOutdoorsMap} alt="Mapbox Outdoors map screenshot." class="absolute" />
+    <enhanced:img src={maptilerTopoMap} alt="MapTiler Topo map screenshot." class="absolute" />
-	<enhanced:img
+    <enhanced:img
-		src={waymarkedMap}
+        src={waymarkedMap}
-		alt="Waymarked Trails map screenshot."
+        alt="Waymarked Trails map screenshot."
-		class="absolute opacity-0 hover:opacity-100 transition-opacity duration-200"
+        class="absolute opacity-0 hover:opacity-100 transition-opacity duration-200"
-	/>
+    />
 </div>

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

@@ -1,112 +0,0 @@
-<script lang="ts">
-	import { browser } from '$app/environment';
-	import { goto } from '$app/navigation';
-	import { base } from '$app/paths';
-	import { _, locale } from 'svelte-i18n';
-
-	export let path: string;
-	export let titleOnly: boolean = false;
-
-	let module = undefined;
-	let metadata: Record<string, any> = {};
-
-	const modules = import.meta.glob('/src/lib/docs/**/*.mdx');
-
-	function loadModule(path: string) {
-		modules[path]?.().then((mod) => {
-			module = mod.default;
-			metadata = mod.metadata;
-		});
-	}
-
-	$: if ($locale) {
-		if (modules.hasOwnProperty(`/src/lib/docs/${$locale}/${path}`)) {
-			loadModule(`/src/lib/docs/${$locale}/${path}`);
-		} else if (browser) {
-			goto(`${base}/404`);
-		}
-	}
-</script>
-
-{#if module !== undefined}
-	{#if titleOnly}
-		{metadata.title}
-	{:else}
-		<div class="markdown flex flex-col gap-3">
-			<svelte:component this={module} />
-		</div>
-	{/if}
-{/if}
-
-<style lang="postcss">
-	:global(.markdown) {
-		@apply text-muted-foreground;
-	}
-
-	:global(.markdown h1) {
-		@apply text-foreground;
-		@apply text-3xl;
-		@apply font-semibold;
-		@apply mb-3 pt-6;
-	}
-
-	:global(.markdown h2) {
-		@apply text-foreground;
-		@apply text-2xl;
-		@apply font-semibold;
-		@apply pt-3;
-	}
-
-	:global(.markdown h3) {
-		@apply text-foreground;
-		@apply text-lg;
-		@apply font-semibold;
-		@apply pt-1.5;
-	}
-
-	:global(.markdown p > button) {
-		@apply border;
-		@apply rounded-md;
-		@apply px-1;
-	}
-
-	:global(.markdown > a) {
-		@apply text-blue-500;
-		@apply hover:underline;
-	}
-
-	:global(.markdown p > a) {
-		@apply text-blue-500;
-		@apply hover:underline;
-	}
-
-	:global(.markdown li > a) {
-		@apply text-blue-500;
-		@apply hover:underline;
-	}
-
-	:global(.markdown kbd) {
-		@apply p-1;
-		@apply rounded-md;
-		@apply border;
-	}
-
-	:global(.markdown ul) {
-		@apply list-disc;
-		@apply pl-4;
-	}
-
-	:global(.markdown ol) {
-		@apply list-decimal;
-		@apply pl-4;
-	}
-
-	:global(.markdown li) {
-		@apply mt-1;
-		@apply first:mt-0;
-	}
-
-	:global(.markdown hr) {
-		@apply my-5;
-	}
-</style>

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

@@ -1,18 +1,22 @@
 <script lang="ts">
-	export let type: 'note' | 'warning' = 'note';
+    import type { Snippet } from 'svelte';
+
+    let { type = 'note', children }: { type?: 'note' | 'warning'; children: Snippet } = $props();
 </script>
 
 <div
-	class="bg-accent border-l-8 {type === 'note'
+    class="bg-secondary border-l-8 {type === 'note'
-		? 'border-blue-500'
+        ? 'border-link'
-		: 'border-destructive'} p-2 text-sm rounded-md"
+        : 'border-destructive'} p-2 text-sm rounded-md"
 >
-	<slot />
+    {@render children()}
 </div>
 
 <style lang="postcss">
-	div :global(a) {
+    @reference "../../../app.css";
-		@apply text-blue-500;
+
-		@apply hover:underline;
+    div :global(a) {
-	}
+        @apply text-link;
+        @apply hover:underline;
+    }
 </style>

website/src/lib/components/docs/docs.ts

@@ -1,36 +1,64 @@
-import { File, FilePen, View, type Icon, Settings, Pencil, MapPin, Scissors, CalendarClock, Group, Ungroup, Filter, SquareDashedMousePointer } from "lucide-svelte";
+import {
-import type { ComponentType } from "svelte";
+    File,
+    FilePen,
+    View,
+    Settings,
+    Pencil,
+    MapPin,
+    Scissors,
+    CalendarClock,
+    Group,
+    Ungroup,
+    Funnel,
+    SquareDashedMousePointer,
+    MountainSnow,
+    type IconProps,
+} from '@lucide/svelte';
+import type { Component } from 'svelte';
 
 export const guides: Record<string, string[]> = {
     'getting-started': [],
     menu: ['file', 'edit', 'view', 'settings'],
     'files-and-stats': [],
-    toolbar: ['routing', 'poi', 'scissors', 'time', 'merge', 'extract', 'minify', 'clean'],
+    toolbar: [
+        'routing',
+        'poi',
+        'scissors',
+        'time',
+        'merge',
+        'extract',
+        'elevation',
+        'minify',
+        'clean',
+    ],
     'map-controls': [],
-    'gpx': [],
+    gpx: [],
-    'integration': [],
+    integration: [],
+    faq: [],
 };
 
-export const guideIcons: Record<string, string | ComponentType<Icon>> = {
+export const guideIcons: Record<string, string | Component<IconProps>> = {
-    "getting-started": "🚀",
+    'getting-started': '🚀',
-    "menu": "📂 ⚙️",
+    menu: '📂 ⚙️',
-    "file": File,
+    file: File,
-    "edit": FilePen,
+    edit: FilePen,
-    "view": View,
+    view: View,
-    "settings": Settings,
+    settings: Settings,
-    "files-and-stats": "🗂 📈",
+    'files-and-stats': '🗂 📈',
-    "toolbar": "🧰",
+    toolbar: '🧰',
-    "routing": Pencil,
+    routing: Pencil,
-    "poi": MapPin,
+    poi: MapPin,
-    "scissors": Scissors,
+    scissors: Scissors,
-    "time": CalendarClock,
+    time: CalendarClock,
-    "merge": Group,
+    merge: Group,
-    "extract": Ungroup,
+    extract: Ungroup,
-    "minify": Filter,
+    elevation: MountainSnow,
-    "clean": SquareDashedMousePointer,
+    minify: Funnel,
-    "map-controls": "🗺",
+    clean: SquareDashedMousePointer,
-    "gpx": "💾",
+    'map-controls': '🗺',
-    "integration": "{ 👩‍💻 }",
+    gpx: '💾',
+    integration: '{ 👩‍💻 }',
+    faq: '🔮',
 };
 
 export function getPreviousGuide(currentGuide: string): string | undefined {

website/src/lib/components/elevation-profile/ElevationProfile.svelte

@@ -0,0 +1,188 @@
+<script lang="ts">
+    import ButtonWithTooltip from '$lib/components/ButtonWithTooltip.svelte';
+    import * as Popover from '$lib/components/ui/popover/index.js';
+    import * as ToggleGroup from '$lib/components/ui/toggle-group/index.js';
+    import Separator from '$lib/components/ui/separator/separator.svelte';
+    import { onDestroy, onMount } from 'svelte';
+    import {
+        BrickWall,
+        TriangleRight,
+        HeartPulse,
+        Orbit,
+        SquareActivity,
+        Thermometer,
+        Zap,
+        Circle,
+        Check,
+        ChartNoAxesColumn,
+        Construction,
+    } from '@lucide/svelte';
+    import type { Readable, Writable } from 'svelte/store';
+    import type { Coordinates, GPXGlobalStatistics, GPXStatisticsGroup } from 'gpx';
+    import { settings } from '$lib/logic/settings';
+    import { i18n } from '$lib/i18n.svelte';
+    import { ElevationProfile } from '$lib/components/elevation-profile/elevation-profile';
+
+    const { velocityUnits } = settings;
+
+    let {
+        gpxStatistics,
+        slicedGPXStatistics,
+        hoveredPoint,
+        additionalDatasets,
+        elevationFill,
+        showControls = true,
+    }: {
+        gpxStatistics: Readable<GPXStatisticsGroup>;
+        slicedGPXStatistics: Writable<[GPXGlobalStatistics, number, number] | undefined>;
+        hoveredPoint: Writable<Coordinates | null>;
+        additionalDatasets: Writable<string[]>;
+        elevationFill: Writable<'slope' | 'surface' | 'highway' | undefined>;
+        showControls?: boolean;
+    } = $props();
+
+    let canvas: HTMLCanvasElement;
+    let overlay: HTMLCanvasElement;
+    let elevationProfile: ElevationProfile | null = null;
+
+    onMount(() => {
+        elevationProfile = new ElevationProfile(
+            gpxStatistics,
+            slicedGPXStatistics,
+            hoveredPoint,
+            additionalDatasets,
+            elevationFill,
+            canvas,
+            overlay
+        );
+    });
+
+    onDestroy(() => {
+        if (elevationProfile) {
+            elevationProfile.destroy();
+        }
+    });
+</script>
+
+<div class="h-full grow min-w-0 min-h-0 relative">
+    <canvas bind:this={overlay} class="w-full h-full absolute pointer-events-none"></canvas>
+    <canvas bind:this={canvas} class="w-full h-full absolute"></canvas>
+    {#if showControls}
+        <div class="absolute bottom-9 right-2.5">
+            <Popover.Root>
+                <Popover.Trigger>
+                    <ButtonWithTooltip
+                        label={i18n._('chart.settings')}
+                        variant="outline"
+                        side="left"
+                        class="w-7 h-7 p-0 flex justify-center opacity-70 hover:opacity-100 transition-opacity duration-300 bg-background"
+                    >
+                        <ChartNoAxesColumn size="18" />
+                    </ButtonWithTooltip>
+                </Popover.Trigger>
+                <Popover.Content
+                    class="w-fit p-0 flex flex-col gap-0 overflow-hidden"
+                    side="top"
+                    align="end"
+                    sideOffset={-32}
+                >
+                    <ToggleGroup.Root
+                        class="flex flex-col w-full border-none"
+                        type="single"
+                        size="sm"
+                        bind:value={$elevationFill}
+                    >
+                        <ToggleGroup.Item value="slope" class="w-full flex flex-row justify-start">
+                            <div class="w-6 flex justify-center items-center">
+                                {#if $elevationFill === 'slope'}
+                                    <Circle class="size-1.5 fill-current text-current" />
+                                {/if}
+                            </div>
+                            <TriangleRight size="15" />
+                            {i18n._('quantities.slope')}
+                        </ToggleGroup.Item>
+                        <ToggleGroup.Item
+                            value="surface"
+                            class="w-full flex flex-row justify-start"
+                        >
+                            <div class="w-6 flex justify-center items-center">
+                                {#if $elevationFill === 'surface'}
+                                    <Circle class="size-1.5 fill-current text-current" />
+                                {/if}
+                            </div>
+                            <BrickWall size="15" />
+                            {i18n._('quantities.surface')}
+                        </ToggleGroup.Item>
+                        <ToggleGroup.Item
+                            value="highway"
+                            class="w-full flex flex-row justify-start"
+                        >
+                            <div class="w-6 flex justify-center items-center">
+                                {#if $elevationFill === 'highway'}
+                                    <Circle class="size-1.5 fill-current text-current" />
+                                {/if}
+                            </div>
+                            <Construction size="15" />
+                            {i18n._('quantities.highway')}
+                        </ToggleGroup.Item>
+                    </ToggleGroup.Root>
+                    <Separator />
+                    <ToggleGroup.Root
+                        class="flex flex-col gap-0"
+                        type="multiple"
+                        size="sm"
+                        bind:value={$additionalDatasets}
+                    >
+                        <ToggleGroup.Item value="speed" class="w-full flex flex-row justify-start">
+                            <div class="w-6 flex justify-center items-center">
+                                {#if $additionalDatasets.includes('speed')}
+                                    <Check size="14" />
+                                {/if}
+                            </div>
+                            <Zap size="15" />
+                            {$velocityUnits === 'speed'
+                                ? i18n._('quantities.speed')
+                                : i18n._('quantities.pace')}
+                        </ToggleGroup.Item>
+                        <ToggleGroup.Item value="hr" class="w-full flex flex-row justify-start">
+                            <div class="w-6 flex justify-center items-center">
+                                {#if $additionalDatasets.includes('hr')}
+                                    <Check size="14" />
+                                {/if}
+                            </div>
+                            <HeartPulse size="15" />
+                            {i18n._('quantities.heartrate')}
+                        </ToggleGroup.Item>
+                        <ToggleGroup.Item value="cad" class="w-full flex flex-row justify-start">
+                            <div class="w-6 flex justify-center items-center">
+                                {#if $additionalDatasets.includes('cad')}
+                                    <Check size="14" />
+                                {/if}
+                            </div>
+                            <Orbit size="15" />
+                            {i18n._('quantities.cadence')}
+                        </ToggleGroup.Item>
+                        <ToggleGroup.Item value="atemp" class="w-full flex flex-row justify-start">
+                            <div class="w-6 flex justify-center items-center">
+                                {#if $additionalDatasets.includes('atemp')}
+                                    <Check size="14" />
+                                {/if}
+                            </div>
+                            <Thermometer size="15" />
+                            {i18n._('quantities.temperature')}
+                        </ToggleGroup.Item>
+                        <ToggleGroup.Item value="power" class="w-full flex flex-row justify-start">
+                            <div class="w-6 flex justify-center items-center">
+                                {#if $additionalDatasets.includes('power')}
+                                    <Check size="14" />
+                                {/if}
+                            </div>
+                            <SquareActivity size="15" />
+                            {i18n._('quantities.power')}
+                        </ToggleGroup.Item>
+                    </ToggleGroup.Root>
+                </Popover.Content>
+            </Popover.Root>
+        </div>
+    {/if}
+</div>

website/src/lib/components/elevation-profile/elevation-profile.ts

@@ -0,0 +1,628 @@
+import { i18n } from '$lib/i18n.svelte';
+import { settings } from '$lib/logic/settings';
+import {
+    getCadenceWithUnits,
+    getConvertedDistance,
+    getConvertedElevation,
+    getConvertedTemperature,
+    getConvertedVelocity,
+    getDistanceUnits,
+    getDistanceWithUnits,
+    getElevationWithUnits,
+    getHeartRateWithUnits,
+    getPowerWithUnits,
+    getTemperatureWithUnits,
+    getVelocityWithUnits,
+} from '$lib/units';
+import Chart, {
+    type ChartEvent,
+    type ChartOptions,
+    type ScriptableLineSegmentContext,
+    type TooltipItem,
+} from 'chart.js/auto';
+import { get, type Readable, type Writable } from 'svelte/store';
+import type { Coordinates, GPXGlobalStatistics, GPXStatisticsGroup } from 'gpx';
+import { mode } from 'mode-watcher';
+import { getHighwayColor, getSlopeColor, getSurfaceColor } from '$lib/assets/colors';
+
+const { distanceUnits, velocityUnits, temperatureUnits } = settings;
+
+Chart.defaults.font.family =
+    'ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"'; // Tailwind CSS font
+
+interface ElevationProfilePoint {
+    x: number;
+    y: number;
+    time?: Date;
+    slope: {
+        at: number;
+        segment: number;
+        length: number;
+    };
+    extensions: Record<string, any>;
+    coordinates: Coordinates;
+    index: number;
+}
+
+export class ElevationProfile {
+    private _chart: Chart | null = null;
+    private _canvas: HTMLCanvasElement;
+    private _overlay: HTMLCanvasElement;
+    private _dragging = false;
+    private _panning = false;
+
+    private _gpxStatistics: Readable<GPXStatisticsGroup>;
+    private _slicedGPXStatistics: Writable<[GPXGlobalStatistics, number, number] | undefined>;
+    private _hoveredPoint: Writable<Coordinates | null>;
+    private _additionalDatasets: Readable<string[]>;
+    private _elevationFill: Readable<'slope' | 'surface' | 'highway' | undefined>;
+
+    constructor(
+        gpxStatistics: Readable<GPXStatisticsGroup>,
+        slicedGPXStatistics: Writable<[GPXGlobalStatistics, number, number] | undefined>,
+        hoveredPoint: Writable<Coordinates | null>,
+        additionalDatasets: Readable<string[]>,
+        elevationFill: Readable<'slope' | 'surface' | 'highway' | undefined>,
+        canvas: HTMLCanvasElement,
+        overlay: HTMLCanvasElement
+    ) {
+        this._gpxStatistics = gpxStatistics;
+        this._slicedGPXStatistics = slicedGPXStatistics;
+        this._hoveredPoint = hoveredPoint;
+        this._additionalDatasets = additionalDatasets;
+        this._elevationFill = elevationFill;
+        this._canvas = canvas;
+        this._overlay = overlay;
+
+        import('chartjs-plugin-zoom').then((module) => {
+            Chart.register(module.default);
+            this.initialize();
+
+            this._gpxStatistics.subscribe(() => {
+                this.updateData();
+            });
+            this._slicedGPXStatistics.subscribe(() => {
+                this.updateOverlay();
+            });
+            distanceUnits.subscribe(() => {
+                this.updateData();
+            });
+            velocityUnits.subscribe(() => {
+                this.updateData();
+            });
+            temperatureUnits.subscribe(() => {
+                this.updateData();
+            });
+            this._additionalDatasets.subscribe(() => {
+                this.updateDataVisibility();
+            });
+            this._elevationFill.subscribe(() => {
+                this.updateFill();
+            });
+        });
+    }
+
+    initialize() {
+        let options: ChartOptions<'line'> = {
+            animation: false,
+            parsing: false,
+            maintainAspectRatio: false,
+            scales: {
+                x: {
+                    type: 'linear',
+                    ticks: {
+                        callback: function (value: number | string) {
+                            return `${(value as number).toFixed(1).replace(/\.0+$/, '')} ${getDistanceUnits()}`;
+                        },
+                        align: 'inner',
+                        maxRotation: 0,
+                    },
+                },
+                y: {
+                    type: 'linear',
+                    ticks: {
+                        callback: function (value: number | string) {
+                            return getElevationWithUnits(value as number, false);
+                        },
+                    },
+                },
+            },
+            datasets: {
+                line: {
+                    pointRadius: 0,
+                    tension: 0.4,
+                    borderWidth: 2,
+                    cubicInterpolationMode: 'monotone',
+                },
+            },
+            interaction: {
+                mode: 'nearest',
+                axis: 'x',
+                intersect: false,
+            },
+            plugins: {
+                legend: {
+                    display: false,
+                },
+                decimation: {
+                    enabled: true,
+                },
+                tooltip: {
+                    enabled: () => !this._dragging && !this._panning,
+                    callbacks: {
+                        title: () => {
+                            return '';
+                        },
+                        label: (context: TooltipItem<'line'>) => {
+                            let point = context.raw as ElevationProfilePoint;
+                            if (context.datasetIndex === 0) {
+                                if (this._dragging) {
+                                    this._hoveredPoint.set(null);
+                                } else {
+                                    this._hoveredPoint.set(point.coordinates);
+                                }
+                                return `${i18n._('quantities.elevation')}: ${getElevationWithUnits(point.y, false)}`;
+                            } else if (context.datasetIndex === 1) {
+                                return `${get(velocityUnits) === 'speed' ? i18n._('quantities.speed') : i18n._('quantities.pace')}: ${getVelocityWithUnits(point.y, false)}`;
+                            } else if (context.datasetIndex === 2) {
+                                return `${i18n._('quantities.heartrate')}: ${getHeartRateWithUnits(point.y)}`;
+                            } else if (context.datasetIndex === 3) {
+                                return `${i18n._('quantities.cadence')}: ${getCadenceWithUnits(point.y)}`;
+                            } else if (context.datasetIndex === 4) {
+                                return `${i18n._('quantities.temperature')}: ${getTemperatureWithUnits(point.y, false)}`;
+                            } else if (context.datasetIndex === 5) {
+                                return `${i18n._('quantities.power')}: ${getPowerWithUnits(point.y)}`;
+                            }
+                        },
+                        afterBody: (contexts: TooltipItem<'line'>[]) => {
+                            let context = contexts.filter((context) => context.datasetIndex === 0);
+                            if (context.length === 0) return;
+                            let point = context[0].raw as ElevationProfilePoint;
+                            let slope = {
+                                at: point.slope.at.toFixed(1),
+                                segment: point.slope.segment.toFixed(1),
+                                length: getDistanceWithUnits(point.slope.length),
+                            };
+                            let surface = point.extensions.surface
+                                ? point.extensions.surface
+                                : 'unknown';
+                            let highway = point.extensions.highway
+                                ? point.extensions.highway
+                                : 'unknown';
+                            let sacScale = point.extensions.sac_scale;
+                            let mtbScale = point.extensions.mtb_scale;
+
+                            let labels = [
+                                `    ${i18n._('quantities.distance')}: ${getDistanceWithUnits(point.x, false)}`,
+                                `    ${i18n._('quantities.slope')}: ${slope.at} %${get(this._elevationFill) === 'slope' ? ` (${slope.length} @${slope.segment} %)` : ''}`,
+                            ];
+
+                            if (get(this._elevationFill) === 'surface') {
+                                labels.push(
+                                    `    ${i18n._('quantities.surface')}: ${i18n._(`toolbar.routing.surface.${surface}`)}`
+                                );
+                            }
+
+                            if (get(this._elevationFill) === 'highway') {
+                                labels.push(
+                                    `    ${i18n._('quantities.highway')}: ${i18n._(`toolbar.routing.highway.${highway}`)}${
+                                        sacScale
+                                            ? ` (${i18n._(`toolbar.routing.sac_scale.${sacScale}`)})`
+                                            : ''
+                                    }`
+                                );
+                                if (mtbScale) {
+                                    labels.push(
+                                        `    ${i18n._('toolbar.routing.mtb_scale')}: ${mtbScale}`
+                                    );
+                                }
+                            }
+
+                            if (point.time) {
+                                labels.push(
+                                    `    ${i18n._('quantities.time')}: ${i18n.df.format(point.time)}`
+                                );
+                            }
+
+                            return labels;
+                        },
+                    },
+                },
+                zoom: {
+                    pan: {
+                        enabled: true,
+                        mode: 'x',
+                        modifierKey: 'shift',
+                        onPanStart: () => {
+                            this._panning = true;
+                            this._slicedGPXStatistics.set(undefined);
+                            return true;
+                        },
+                        onPanComplete: () => {
+                            this._panning = false;
+                        },
+                    },
+                    zoom: {
+                        wheel: {
+                            enabled: true,
+                        },
+                        mode: 'x',
+                        onZoomStart: ({ chart, event }: { chart: Chart; event: any }) => {
+                            if (!this._chart) {
+                                return false;
+                            }
+                            const maxZoom = this._chart.getInitialScaleBounds()?.x?.max ?? 0;
+                            if (
+                                event.deltaY < 0 &&
+                                Math.abs(maxZoom / this._chart.getZoomLevel()) < 0.01
+                            ) {
+                                // Disable wheel pan if zoomed in to the max, and zooming in
+                                return false;
+                            }
+
+                            this._slicedGPXStatistics.set(undefined);
+                        },
+                    },
+                    limits: {
+                        x: {
+                            min: 'original',
+                            max: 'original',
+                            minRange: 1,
+                        },
+                    },
+                },
+            },
+            onResize: () => {
+                this.updateOverlay();
+            },
+        };
+
+        let datasets: string[] = ['speed', 'hr', 'cad', 'atemp', 'power'];
+        datasets.forEach((id) => {
+            options.scales![`y${id}`] = {
+                type: 'linear',
+                position: 'right',
+                grid: {
+                    display: false,
+                },
+                reverse: () => id === 'speed' && get(velocityUnits) === 'pace',
+                display: false,
+            };
+        });
+
+        this._chart = new Chart(this._canvas, {
+            type: 'line',
+            data: {
+                datasets: [],
+            },
+            options,
+            plugins: [
+                {
+                    id: 'toggleMarker',
+                    events: ['mouseout'],
+                    afterEvent: (chart: Chart, args: { event: ChartEvent }) => {
+                        if (args.event.type === 'mouseout') {
+                            this._hoveredPoint.set(null);
+                        }
+                    },
+                },
+            ],
+        });
+
+        let startIndex = 0;
+        let endIndex = 0;
+        const getIndex = (evt: PointerEvent) => {
+            if (!this._chart) {
+                return undefined;
+            }
+            const points = this._chart.getElementsAtEventForMode(
+                evt,
+                'x',
+                {
+                    intersect: false,
+                },
+                true
+            );
+
+            if (points.length === 0) {
+                const rect = this._canvas.getBoundingClientRect();
+                if (evt.x - rect.left <= this._chart.chartArea.left) {
+                    return 0;
+                } else if (evt.x - rect.left >= this._chart.chartArea.right) {
+                    return this._chart.data.datasets[0].data.length - 1;
+                } else {
+                    return undefined;
+                }
+            }
+
+            const point = points.find((point) => (point.element as any).raw);
+            if (point) {
+                return (point.element as any).raw.index;
+            } else {
+                return points[0].index;
+            }
+        };
+
+        let dragStarted = false;
+        const onMouseDown = (evt: PointerEvent) => {
+            if (evt.shiftKey) {
+                // Panning interaction
+                return;
+            }
+            dragStarted = true;
+            this._canvas.style.cursor = 'col-resize';
+            startIndex = getIndex(evt);
+        };
+        const onMouseMove = (evt: PointerEvent) => {
+            if (dragStarted) {
+                this._dragging = true;
+                endIndex = getIndex(evt);
+                if (endIndex !== undefined) {
+                    if (startIndex === undefined) {
+                        startIndex = endIndex;
+                    } else if (startIndex !== endIndex) {
+                        this._slicedGPXStatistics.set([
+                            get(this._gpxStatistics).sliced(
+                                Math.min(startIndex, endIndex),
+                                Math.max(startIndex, endIndex)
+                            ),
+                            Math.min(startIndex, endIndex),
+                            Math.max(startIndex, endIndex),
+                        ]);
+                    }
+                }
+            }
+        };
+        const onMouseUp = (evt: PointerEvent) => {
+            dragStarted = false;
+            this._dragging = false;
+            this._canvas.style.cursor = '';
+            endIndex = getIndex(evt);
+            if (startIndex === endIndex) {
+                this._slicedGPXStatistics.set(undefined);
+            }
+        };
+        this._canvas.addEventListener('pointerdown', onMouseDown);
+        this._canvas.addEventListener('pointermove', onMouseMove);
+        this._canvas.addEventListener('pointerup', onMouseUp);
+    }
+
+    updateData() {
+        if (!this._chart) {
+            return;
+        }
+        const data = get(this._gpxStatistics);
+        const units = {
+            distance: get(distanceUnits),
+            velocity: get(velocityUnits),
+            temperature: get(temperatureUnits),
+        };
+
+        const datasets: Array<Array<any>> = [[], [], [], [], [], []];
+        data.forEachTrackPoint((trkpt, distance, speed, slope, index) => {
+            datasets[0].push({
+                x: getConvertedDistance(distance, units.distance),
+                y: trkpt.ele ? getConvertedElevation(trkpt.ele, units.distance) : 0,
+                time: trkpt.time,
+                slope: slope,
+                extensions: trkpt.getExtensions(),
+                coordinates: trkpt.getCoordinates(),
+                index: index,
+            });
+            if (data.global.time.total > 0) {
+                datasets[1].push({
+                    x: getConvertedDistance(distance, units.distance),
+                    y: getConvertedVelocity(speed, units.velocity, units.distance),
+                    index: index,
+                });
+            }
+            if (data.global.hr.count > 0) {
+                datasets[2].push({
+                    x: getConvertedDistance(distance, units.distance),
+                    y: trkpt.getHeartRate(),
+                    index: index,
+                });
+            }
+            if (data.global.cad.count > 0) {
+                datasets[3].push({
+                    x: getConvertedDistance(distance, units.distance),
+                    y: trkpt.getCadence(),
+                    index: index,
+                });
+            }
+            if (data.global.atemp.count > 0) {
+                datasets[4].push({
+                    x: getConvertedDistance(distance, units.distance),
+                    y: getConvertedTemperature(trkpt.getTemperature(), units.temperature),
+                    index: index,
+                });
+            }
+            if (data.global.power.count > 0) {
+                datasets[5].push({
+                    x: getConvertedDistance(distance, units.distance),
+                    y: trkpt.getPower(),
+                    index: index,
+                });
+            }
+        });
+
+        this._chart.data.datasets[0] = {
+            label: i18n._('quantities.elevation'),
+            data: datasets[0],
+            normalized: true,
+            fill: 'start',
+            order: 1,
+            segment: {},
+        };
+        this._chart.data.datasets[1] = {
+            data: datasets[1],
+            normalized: true,
+            yAxisID: 'yspeed',
+        };
+        this._chart.data.datasets[2] = {
+            data: datasets[2],
+            normalized: true,
+            yAxisID: 'yhr',
+        };
+        this._chart.data.datasets[3] = {
+            data: datasets[3],
+            normalized: true,
+            yAxisID: 'ycad',
+        };
+        this._chart.data.datasets[4] = {
+            data: datasets[4],
+            normalized: true,
+            yAxisID: 'yatemp',
+        };
+        this._chart.data.datasets[5] = {
+            data: datasets[5],
+            normalized: true,
+            yAxisID: 'ypower',
+        };
+
+        this._chart.options.scales!.x!['min'] = 0;
+        this._chart.options.scales!.x!['max'] = getConvertedDistance(
+            data.global.distance.total,
+            units.distance
+        );
+
+        this.setVisibility();
+        this.setFill();
+
+        this._chart.update();
+    }
+
+    updateDataVisibility() {
+        if (!this._chart) {
+            return;
+        }
+        this.setVisibility();
+        this._chart.update();
+    }
+
+    setVisibility() {
+        if (!this._chart) {
+            return;
+        }
+
+        const additionalDatasets = get(this._additionalDatasets);
+        let includeSpeed = additionalDatasets.includes('speed');
+        let includeHeartRate = additionalDatasets.includes('hr');
+        let includeCadence = additionalDatasets.includes('cad');
+        let includeTemperature = additionalDatasets.includes('atemp');
+        let includePower = additionalDatasets.includes('power');
+        if (this._chart.data.datasets.length == 6) {
+            this._chart.data.datasets[1].hidden = !includeSpeed;
+            this._chart.data.datasets[2].hidden = !includeHeartRate;
+            this._chart.data.datasets[3].hidden = !includeCadence;
+            this._chart.data.datasets[4].hidden = !includeTemperature;
+            this._chart.data.datasets[5].hidden = !includePower;
+        }
+    }
+
+    updateFill() {
+        if (!this._chart) {
+            return;
+        }
+        this.setFill();
+        this._chart.update();
+    }
+
+    setFill() {
+        if (!this._chart) {
+            return;
+        }
+        const elevationFill = get(this._elevationFill);
+        const dataset = this._chart.data.datasets[0];
+        let segment: any = {};
+        if (elevationFill === 'slope') {
+            segment = {
+                backgroundColor: this.slopeFillCallback,
+            };
+        } else if (elevationFill === 'surface') {
+            segment = {
+                backgroundColor: this.surfaceFillCallback,
+            };
+        } else if (elevationFill === 'highway') {
+            segment = {
+                backgroundColor: this.highwayFillCallback,
+            };
+        } else {
+            segment = {};
+        }
+        Object.assign(dataset, { segment });
+    }
+
+    updateOverlay() {
+        if (!this._chart) {
+            return;
+        }
+
+        this._overlay.width = this._canvas.width / window.devicePixelRatio;
+        this._overlay.height = this._canvas.height / window.devicePixelRatio;
+        this._overlay.style.width = `${this._overlay.width}px`;
+        this._overlay.style.height = `${this._overlay.height}px`;
+
+        const slicedGPXStatistics = get(this._slicedGPXStatistics);
+        if (slicedGPXStatistics) {
+            let startIndex = slicedGPXStatistics[1];
+            let endIndex = slicedGPXStatistics[2];
+
+            // Draw selection rectangle
+            let selectionContext = this._overlay.getContext('2d');
+            if (selectionContext) {
+                selectionContext.fillStyle = mode.current === 'dark' ? 'white' : 'black';
+                selectionContext.globalAlpha = mode.current === 'dark' ? 0.2 : 0.1;
+                selectionContext.clearRect(0, 0, this._overlay.width, this._overlay.height);
+
+                const gpxStatistics = get(this._gpxStatistics);
+                let startPixel = this._chart.scales.x.getPixelForValue(
+                    getConvertedDistance(
+                        gpxStatistics.getTrackPoint(startIndex)?.distance.total ?? 0
+                    )
+                );
+                let endPixel = this._chart.scales.x.getPixelForValue(
+                    getConvertedDistance(gpxStatistics.getTrackPoint(endIndex)?.distance.total ?? 0)
+                );
+
+                selectionContext.fillRect(
+                    startPixel,
+                    this._chart.chartArea.top,
+                    endPixel - startPixel,
+                    this._chart.chartArea.height
+                );
+            }
+        } else if (this._overlay) {
+            let selectionContext = this._overlay.getContext('2d');
+            if (selectionContext) {
+                selectionContext.clearRect(0, 0, this._overlay.width, this._overlay.height);
+            }
+        }
+    }
+
+    slopeFillCallback(context: ScriptableLineSegmentContext & { p0: { raw: any } }) {
+        const point = context.p0.raw as ElevationProfilePoint;
+        return getSlopeColor(point.slope.segment);
+    }
+
+    surfaceFillCallback(context: ScriptableLineSegmentContext & { p0: { raw: any } }) {
+        const point = context.p0.raw as ElevationProfilePoint;
+        return getSurfaceColor(point.extensions.surface);
+    }
+
+    highwayFillCallback(context: ScriptableLineSegmentContext & { p0: { raw: any } }) {
+        const point = context.p0.raw as ElevationProfilePoint;
+        return getHighwayColor(
+            point.extensions.highway,
+            point.extensions.sac_scale,
+            point.extensions.mtb_scale
+        );
+    }
+
+    destroy() {
+        if (this._chart) {
+            this._chart.destroy();
+            this._chart = null;
+        }
+    }
+}

website/src/lib/components/embedding/Embedding.svelte

@@ -1,264 +1,139 @@
 <script lang="ts">
-	import GPXLayers from '$lib/components/gpx-layer/GPXLayers.svelte';
+    import GPXLayers from '$lib/components/map/gpx-layer/GPXLayers.svelte';
-	import ElevationProfile from '$lib/components/ElevationProfile.svelte';
+    import ElevationProfile from '$lib/components/elevation-profile/ElevationProfile.svelte';
-	import FileList from '$lib/components/file-list/FileList.svelte';
+    import FileList from '$lib/components/file-list/FileList.svelte';
-	import GPXStatistics from '$lib/components/GPXStatistics.svelte';
+    import GPXStatistics from '$lib/components/GPXStatistics.svelte';
-	import Map from '$lib/components/Map.svelte';
+    import Map from '$lib/components/map/Map.svelte';
-	import LayerControl from '$lib/components/layer-control/LayerControl.svelte';
+    import LayerControl from '$lib/components/map/layer-control/LayerControl.svelte';
-	import OpenIn from '$lib/components/embedding/OpenIn.svelte';
+    import OpenIn from '$lib/components/embedding/OpenIn.svelte';
-	import {
+    import { writable } from 'svelte/store';
-		gpxStatistics,
+    import type { GPXFile } from 'gpx';
-		slicedGPXStatistics,
+    import {
-		embedding,
+        allowedEmbeddingBasemaps,
-		loadFile,
+        getFilesFromEmbeddingOptions,
-		map,
+        type EmbeddingOptions,
-		updateGPXData
+    } from './embedding';
-	} from '$lib/stores';
+    import { setMode } from 'mode-watcher';
-	import { onDestroy, onMount } from 'svelte';
+    import { settings } from '$lib/logic/settings';
-	import { fileObservers, settings, GPXStatisticsTree } from '$lib/db';
+    import { fileStateCollection } from '$lib/logic/file-state';
-	import { readable } from 'svelte/store';
+    import { gpxStatistics, hoveredPoint, slicedGPXStatistics } from '$lib/logic/statistics';
-	import type { GPXFile } from 'gpx';
+    import { loadFile } from '$lib/logic/file-actions';
-	import { selection } from '$lib/components/file-list/Selection';
+    import { selection } from '$lib/logic/selection';
-	import { ListFileItem } from '$lib/components/file-list/FileList';
+    import { untrack } from 'svelte';
-	import { allowedEmbeddingBasemaps, type EmbeddingOptions } from './Embedding';
+    import { isSelected, toggle } from '$lib/components/map/layer-control/utils';
-	import { mode, setMode } from 'mode-watcher';
 
-	$embedding = true;
+    let {
+        useHash = true,
+        options = $bindable(),
+        hash = $bindable(),
+    }: { useHash?: boolean; options: EmbeddingOptions; hash: string } = $props();
 
-	const {
+    let additionalDatasets = writable<string[]>([]);
-		currentBasemap,
+    let elevationFill = writable<'slope' | 'surface' | 'highway' | undefined>(undefined);
-		distanceUnits,
-		velocityUnits,
-		temperatureUnits,
-		fileOrder,
-		distanceMarkers,
-		directionMarkers
-	} = settings;
 
-	export let useHash = true;
+    const {
-	export let options: EmbeddingOptions;
+        currentBasemap,
-	export let hash: string;
+        selectedBasemapTree,
+        distanceUnits,
+        velocityUnits,
+        temperatureUnits,
+        fileOrder,
+        distanceMarkers,
+        directionMarkers,
+    } = settings;
 
-	let prevSettings = {
+    settings.initialize();
-		distanceMarkers: false,
-		directionMarkers: false,
-		distanceUnits: 'metric',
-		velocityUnits: 'speed',
-		temperatureUnits: 'celsius',
-		theme: 'system'
-	};
 
-	function applyOptions() {
+    function applyOptions() {
-		fileObservers.update(($fileObservers) => {
+        let downloads: Promise<GPXFile | null>[] = getFilesFromEmbeddingOptions(options).map(
-			$fileObservers.clear();
+            (url) => {
-			return $fileObservers;
+                return fetch(url)
-		});
+                    .then((response) => response.blob())
+                    .then((blob) => new File([blob], url.split('/').pop() ?? url))
+                    .then(loadFile);
+            }
+        );
+        Promise.all(downloads).then((answers) => {
+            const files = answers.filter((file) => file !== null) as GPXFile[];
+            let ids: string[] = [];
+            files.forEach((file, index) => {
+                let id = `gpx-${index}-embed`;
+                file._data.id = id;
+                ids.push(id);
+            });
+            fileStateCollection.setEmbeddedFiles(files);
+            $fileOrder = ids;
+            selection.selectAll();
+        });
+        if (allowedEmbeddingBasemaps.includes(options.basemap)) {
+            $currentBasemap = options.basemap;
+        }
+        if (!isSelected($selectedBasemapTree, options.basemap)) {
+            $selectedBasemapTree = toggle($selectedBasemapTree, options.basemap);
+        }
+        $distanceMarkers = options.distanceMarkers;
+        $directionMarkers = options.directionMarkers;
+        $distanceUnits = options.distanceUnits;
+        $velocityUnits = options.velocityUnits;
+        $temperatureUnits = options.temperatureUnits;
+        if (options.theme != 'system') {
+            setMode(options.theme);
+        }
 
-		let downloads: Promise<GPXFile | null>[] = [];
+        additionalDatasets.set(
-		options.files.forEach((url) => {
+            [
-			downloads.push(
+                options.elevation.speed ? 'speed' : null,
-				fetch(url)
+                options.elevation.hr ? 'hr' : null,
-					.then((response) => response.blob())
+                options.elevation.cad ? 'cad' : null,
-					.then((blob) => new File([blob], url.split('/').pop() ?? url))
+                options.elevation.temp ? 'temp' : null,
-					.then(loadFile)
+                options.elevation.power ? 'power' : null,
-			);
+            ].filter((dataset) => dataset !== null)
-		});
+        );
+        elevationFill.set(options.elevation.fill == 'none' ? undefined : options.elevation.fill);
+    }
 
-		Promise.all(downloads).then((files) => {
+    $effect(() => {
-			let ids: string[] = [];
+        options;
-			let bounds = {
+        untrack(applyOptions);
-				southWest: {
+    });
-					lat: 90,
-					lon: 180
-				},
-				northEast: {
-					lat: -90,
-					lon: -180
-				}
-			};
-
-			fileObservers.update(($fileObservers) => {
-				files.forEach((file, index) => {
-					if (file === null) {
-						return;
-					}
-
-					let id = `gpx-${index}-embed`;
-					file._data.id = id;
-					let statistics = new GPXStatisticsTree(file);
-
-					$fileObservers.set(
-						id,
-						readable({
-							file,
-							statistics
-						})
-					);
-
-					ids.push(id);
-					let fileBounds = statistics.getStatisticsFor(new ListFileItem(id)).global.bounds;
-
-					bounds.southWest.lat = Math.min(bounds.southWest.lat, fileBounds.southWest.lat);
-					bounds.southWest.lon = Math.min(bounds.southWest.lon, fileBounds.southWest.lon);
-					bounds.northEast.lat = Math.max(bounds.northEast.lat, fileBounds.northEast.lat);
-					bounds.northEast.lon = Math.max(bounds.northEast.lon, fileBounds.northEast.lon);
-				});
-
-				return $fileObservers;
-			});
-
-			$fileOrder = [...$fileOrder.filter((id) => !id.includes('embed')), ...ids];
-
-			selection.update(($selection) => {
-				$selection.clear();
-				ids.forEach((id) => {
-					$selection.toggle(new ListFileItem(id));
-				});
-				return $selection;
-			});
-
-			if (hash.length === 0) {
-				map.subscribe(($map) => {
-					if ($map) {
-						$map.fitBounds(
-							[
-								bounds.southWest.lon,
-								bounds.southWest.lat,
-								bounds.northEast.lon,
-								bounds.northEast.lat
-							],
-							{
-								padding: 80,
-								linear: true,
-								easing: () => 1
-							}
-						);
-					}
-				});
-			}
-		});
-
-		if (options.basemap !== $currentBasemap && allowedEmbeddingBasemaps.includes(options.basemap)) {
-			$currentBasemap = options.basemap;
-		}
-
-		if (options.distanceMarkers !== $distanceMarkers) {
-			$distanceMarkers = options.distanceMarkers;
-		}
-
-		if (options.directionMarkers !== $directionMarkers) {
-			$directionMarkers = options.directionMarkers;
-		}
-
-		if (options.distanceUnits !== $distanceUnits) {
-			$distanceUnits = options.distanceUnits;
-		}
-
-		if (options.velocityUnits !== $velocityUnits) {
-			$velocityUnits = options.velocityUnits;
-		}
-
-		if (options.temperatureUnits !== $temperatureUnits) {
-			$temperatureUnits = options.temperatureUnits;
-		}
-
-		if (options.theme !== $mode) {
-			setMode(options.theme);
-		}
-	}
-
-	onMount(() => {
-		prevSettings.distanceMarkers = $distanceMarkers;
-		prevSettings.directionMarkers = $directionMarkers;
-		prevSettings.distanceUnits = $distanceUnits;
-		prevSettings.velocityUnits = $velocityUnits;
-		prevSettings.temperatureUnits = $temperatureUnits;
-		prevSettings.theme = $mode ?? 'system';
-	});
-
-	$: if (options) {
-		applyOptions();
-	}
-
-	$: if ($fileOrder) {
-		updateGPXData();
-	}
-
-	onDestroy(() => {
-		if ($distanceMarkers !== prevSettings.distanceMarkers) {
-			$distanceMarkers = prevSettings.distanceMarkers;
-		}
-
-		if ($directionMarkers !== prevSettings.directionMarkers) {
-			$directionMarkers = prevSettings.directionMarkers;
-		}
-
-		if ($distanceUnits !== prevSettings.distanceUnits) {
-			$distanceUnits = prevSettings.distanceUnits;
-		}
-
-		if ($velocityUnits !== prevSettings.velocityUnits) {
-			$velocityUnits = prevSettings.velocityUnits;
-		}
-
-		if ($temperatureUnits !== prevSettings.temperatureUnits) {
-			$temperatureUnits = prevSettings.temperatureUnits;
-		}
-
-		if ($mode !== prevSettings.theme) {
-			setMode(prevSettings.theme);
-		}
-
-		$selection.clear();
-		$fileObservers.clear();
-		$fileOrder = $fileOrder.filter((id) => !id.includes('embed'));
-	});
 </script>
 
 <div class="absolute flex flex-col h-full w-full border rounded-xl overflow-clip">
-	<div class="grow relative">
+    <div class="grow relative">
-		<Map
+        <Map
-			class="h-full {$fileObservers.size > 1 ? 'horizontal' : ''}"
+            class="h-full {$fileStateCollection.size > 1 ? 'horizontal' : ''}"
-			accessToken={options.token}
+            maptilerKey={options.key}
-			geocoder={false}
+            geocoder={false}
-			geolocate={false}
+            geolocate={true}
-			hash={useHash}
+            hash={useHash}
-		/>
+        />
-		<OpenIn bind:files={options.files} />
+        <OpenIn files={options.files} ids={options.ids} />
-		<LayerControl />
+        <LayerControl />
-		<GPXLayers />
+        <GPXLayers />
-		{#if $fileObservers.size > 1}
+        {#if $fileStateCollection.size > 1}
-			<div class="h-10 -translate-y-10 w-full pointer-events-none absolute z-30">
+            <div class="h-10 -translate-y-10 w-full pointer-events-none absolute z-30">
-				<FileList orientation="horizontal" />
+                <FileList orientation="horizontal" />
-			</div>
+            </div>
-		{/if}
+        {/if}
-	</div>
+    </div>
-	<div
+    <div
-		class="{options.elevation.show ? '' : 'h-10'} flex flex-row gap-2 px-2 sm:px-4"
+        class="{options.elevation.show ? '' : 'h-10'} flex flex-row gap-2 p-2 sm:px-4"
-		style={options.elevation.show ? `height: ${options.elevation.height}px` : ''}
+        style={options.elevation.show ? `height: ${options.elevation.height}px` : ''}
-	>
+    >
-		<GPXStatistics
+        <GPXStatistics
-			{gpxStatistics}
+            {gpxStatistics}
-			{slicedGPXStatistics}
+            {slicedGPXStatistics}
-			panelSize={options.elevation.height}
+            orientation={options.elevation.show ? 'vertical' : 'horizontal'}
-			orientation={options.elevation.show ? 'vertical' : 'horizontal'}
+        />
-		/>
+        {#if options.elevation.show}
-		{#if options.elevation.show}
+            <ElevationProfile
-			<ElevationProfile
+                {gpxStatistics}
-				{gpxStatistics}
+                {slicedGPXStatistics}
-				{slicedGPXStatistics}
+                {hoveredPoint}
-				additionalDatasets={[
+                {additionalDatasets}
-					options.elevation.speed ? 'speed' : null,
+                {elevationFill}
-					options.elevation.hr ? 'hr' : null,
+                showControls={options.elevation.controls}
-					options.elevation.cad ? 'cad' : null,
+            />
-					options.elevation.temp ? 'temp' : null,
+        {/if}
-					options.elevation.power ? 'power' : null
+    </div>
-				].filter((dataset) => dataset !== null)}
-				elevationFill={options.elevation.fill}
-				panelSize={options.elevation.height}
-				showControls={options.elevation.controls}
-				class="py-2"
-			/>
-		{/if}
-	</div>
 </div>

website/src/lib/components/embedding/Embedding.ts

@@ -1,80 +0,0 @@
-import { basemaps } from "$lib/assets/layers";
-
-export type EmbeddingOptions = {
-    token: string;
-    files: string[];
-    basemap: string;
-    elevation: {
-        show: boolean;
-        height: number,
-        controls: boolean,
-        fill: 'slope' | 'surface' | undefined,
-        speed: boolean,
-        hr: boolean,
-        cad: boolean,
-        temp: boolean,
-        power: boolean,
-    },
-    distanceMarkers: boolean,
-    directionMarkers: boolean,
-    distanceUnits: 'metric' | 'imperial',
-    velocityUnits: 'speed' | 'pace',
-    temperatureUnits: 'celsius' | 'fahrenheit',
-    theme: 'system' | 'light' | 'dark',
-};
-
-export const defaultEmbeddingOptions = {
-    token: '',
-    files: [],
-    basemap: 'mapboxOutdoors',
-    elevation: {
-        show: true,
-        height: 170,
-        controls: true,
-        fill: undefined,
-        speed: false,
-        hr: false,
-        cad: false,
-        temp: false,
-        power: false,
-    },
-    distanceMarkers: false,
-    directionMarkers: false,
-    distanceUnits: 'metric',
-    velocityUnits: 'speed',
-    temperatureUnits: 'celsius',
-    theme: 'system',
-};
-
-export function getDefaultEmbeddingOptions(): EmbeddingOptions {
-    return JSON.parse(JSON.stringify(defaultEmbeddingOptions));
-}
-
-export function getMergedEmbeddingOptions(options: any, defaultOptions: any = defaultEmbeddingOptions): EmbeddingOptions {
-    const mergedOptions = JSON.parse(JSON.stringify(defaultOptions));
-    for (const key in options) {
-        if (typeof options[key] === 'object' && options[key] !== null && !Array.isArray(options[key])) {
-            mergedOptions[key] = getMergedEmbeddingOptions(options[key], defaultOptions[key]);
-        } else {
-            mergedOptions[key] = options[key];
-        }
-    }
-    return mergedOptions;
-}
-
-export function getCleanedEmbeddingOptions(options: any, defaultOptions: any = defaultEmbeddingOptions): any {
-    const cleanedOptions = JSON.parse(JSON.stringify(options));
-    for (const key in cleanedOptions) {
-        if (typeof cleanedOptions[key] === 'object' && cleanedOptions[key] !== null && !Array.isArray(cleanedOptions[key])) {
-            cleanedOptions[key] = getCleanedEmbeddingOptions(cleanedOptions[key], defaultOptions[key]);
-            if (Object.keys(cleanedOptions[key]).length === 0) {
-                delete cleanedOptions[key];
-            }
-        } else if (JSON.stringify(cleanedOptions[key]) === JSON.stringify(defaultOptions[key])) {
-            delete cleanedOptions[key];
-        }
-    }
-    return cleanedOptions;
-}
-
-export const allowedEmbeddingBasemaps = Object.keys(basemaps).filter(basemap => !['ordnanceSurvey'].includes(basemap));

website/src/lib/components/embedding/EmbeddingPlayground.svelte

@@ -1,313 +1,329 @@
 <script lang="ts">
-	import * as Card from '$lib/components/ui/card';
+    import * as Card from '$lib/components/ui/card';
-	import { Label } from '$lib/components/ui/label';
+    import { Label } from '$lib/components/ui/label';
-	import { Input } from '$lib/components/ui/input';
+    import { Input } from '$lib/components/ui/input';
-	import * as Select from '$lib/components/ui/select';
+    import * as Select from '$lib/components/ui/select';
-	import { Checkbox } from '$lib/components/ui/checkbox';
+    import { Checkbox } from '$lib/components/ui/checkbox';
-	import * as RadioGroup from '$lib/components/ui/radio-group';
+    import * as RadioGroup from '$lib/components/ui/radio-group';
-	import {
+    import {
-		Zap,
+        Zap,
-		HeartPulse,
+        HeartPulse,
-		Orbit,
+        Orbit,
-		Thermometer,
+        Thermometer,
-		SquareActivity,
+        SquareActivity,
-		Coins,
+        Coins,
-		Milestone,
+        Milestone,
-		Video
+        Video,
-	} from 'lucide-svelte';
+    } from '@lucide/svelte';
-	import { _ } from 'svelte-i18n';
+    import { i18n } from '$lib/i18n.svelte';
-	import {
+    import {
-		allowedEmbeddingBasemaps,
+        allowedEmbeddingBasemaps,
-		getCleanedEmbeddingOptions,
+        defaultEmbeddingOptions,
-		getDefaultEmbeddingOptions
+        getCleanedEmbeddingOptions,
-	} from './Embedding';
+        getMergedEmbeddingOptions,
-	import { PUBLIC_MAPBOX_TOKEN } from '$env/static/public';
+    } from './embedding';
-	import Embedding from './Embedding.svelte';
+    import { PUBLIC_MAPTILER_KEY } from '$env/static/public';
-	import { map } from '$lib/stores';
+    import Embedding from './Embedding.svelte';
-	import { tick } from 'svelte';
+    import { onDestroy } from 'svelte';
-	import { base } from '$app/paths';
+    import { base } from '$app/paths';
+    import { map } from '$lib/components/map/map';
+    import { mode } from 'mode-watcher';
 
-	let options = getDefaultEmbeddingOptions();
+    let options = $state(
-	options.token = 'YOUR_MAPBOX_TOKEN';
+        getMergedEmbeddingOptions(
-	options.files = [
+            {
-		'https://raw.githubusercontent.com/gpxstudio/gpx.studio/main/gpx/test-data/simple.gpx'
+                key: 'YOUR_MAPTILER_KEY',
-	];
+                theme: mode.current,
+            },
+            defaultEmbeddingOptions
+        )
+    );
+    let files = $state(
+        'https://raw.githubusercontent.com/gpxstudio/gpx.studio/main/gpx/test-data/simple.gpx'
+    );
+    let driveIds = $state('');
 
-	let files = options.files[0];
+    let iframeOptions = $derived(
-	$: if (files) {
+        getMergedEmbeddingOptions(
-		let urls = files.split(',');
+            {
-		urls = urls.filter((url) => url.length > 0);
+                key:
-		if (JSON.stringify(urls) !== JSON.stringify(options.files)) {
+                    options.key.length === 0 || options.key === 'YOUR_MAPTILER_KEY'
-			options.files = urls;
+                        ? PUBLIC_MAPTILER_KEY
-		}
+                        : options.key,
-	}
+                files: files.split(',').filter((url) => url.length > 0),
+                ids: driveIds.split(',').filter((id) => id.length > 0),
+                elevation: {
+                    fill: options.elevation.fill === 'none' ? undefined : options.elevation.fill,
+                },
+            },
+            options
+        )
+    );
 
-	let manualCamera = false;
+    let manualCamera = $state(false);
+    let zoom = $state('0');
+    let lat = $state('0');
+    let lon = $state('0');
+    let bearing = $state('0');
+    let pitch = $state('0');
+    let hash = $derived(manualCamera ? `#${zoom}/${lat}/${lon}/${bearing}/${pitch}` : '');
 
-	let zoom = '0';
+    $effect(() => {
-	let lat = '0';
+        if (options.elevation.show || options.elevation.height) {
-	let lon = '0';
+            map.resize();
-	let bearing = '0';
+        }
-	let pitch = '0';
+    });
 
-	$: hash = manualCamera ? `#${zoom}/${lat}/${lon}/${bearing}/${pitch}` : '';
+    function updateCamera() {
+        if ($map) {
+            let center = $map.getCenter();
+            lat = center.lat.toFixed(4);
+            lon = center.lng.toFixed(4);
+            zoom = $map.getZoom().toFixed(2);
+            bearing = $map.getBearing().toFixed(1);
+            pitch = $map.getPitch().toFixed(0);
+        }
+    }
 
-	$: iframeOptions =
+    map.onLoad((map_) => {
-		options.token.length === 0 || options.token === 'YOUR_MAPBOX_TOKEN'
+        map_.on('moveend', updateCamera);
-			? Object.assign({}, options, { token: PUBLIC_MAPBOX_TOKEN })
+    });
-			: options;
 
-	async function resizeMap() {
+    onDestroy(() => {
-		if ($map) {
+        if ($map) {
-			await tick();
+            $map.off('moveend', updateCamera);
-			$map.resize();
+        }
-		}
+    });
-	}
-
-	$: if (options.elevation.height || options.elevation.show) {
-		resizeMap();
-	}
-
-	function updateCamera() {
-		if ($map) {
-			let center = $map.getCenter();
-			lat = center.lat.toFixed(4);
-			lon = center.lng.toFixed(4);
-			zoom = $map.getZoom().toFixed(2);
-			bearing = $map.getBearing().toFixed(1);
-			pitch = $map.getPitch().toFixed(0);
-		}
-	}
-
-	$: if ($map) {
-		$map.on('moveend', updateCamera);
-	}
 </script>
 
-<Card.Root>
+<Card.Root id="embedding-playground">
-	<Card.Header>
+    <Card.Header>
-		<Card.Title>{$_('embedding.title')}</Card.Title>
+        <Card.Title>{i18n._('embedding.title')}</Card.Title>
-	</Card.Header>
+    </Card.Header>
-	<Card.Content>
+    <Card.Content>
-		<fieldset class="flex flex-col gap-3">
+        <fieldset class="flex flex-col gap-3">
-			<Label for="token">{$_('embedding.mapbox_token')}</Label>
+            <Label for="key">{i18n._('embedding.maptiler_key')}</Label>
-			<Input id="token" type="text" class="h-8" bind:value={options.token} />
+            <Input id="key" type="text" class="h-8" bind:value={options.key} />
-			<Label for="file_urls">{$_('embedding.file_urls')}</Label>
+            <Label for="file_urls">{i18n._('embedding.file_urls')}</Label>
-			<Input id="file_urls" type="text" class="h-8" bind:value={files} />
+            <Input id="file_urls" type="text" class="h-8" bind:value={files} />
-			<Label for="basemap">{$_('embedding.basemap')}</Label>
+            <Label for="drive_ids">{i18n._('embedding.drive_ids')}</Label>
-			<Select.Root
+            <Input id="drive_ids" type="text" class="h-8" bind:value={driveIds} />
-				selected={{ value: options.basemap, label: $_(`layers.label.${options.basemap}`) }}
+            <Label for="basemap">{i18n._('embedding.basemap')}</Label>
-				onSelectedChange={(selected) => {
+            <Select.Root type="single" bind:value={options.basemap}>
-					if (selected?.value) {
+                <Select.Trigger id="basemap" class="w-full h-8">
-						options.basemap = selected?.value;
+                    {i18n._(`layers.label.${options.basemap}`)}
-					}
+                </Select.Trigger>
-				}}
+                <Select.Content class="max-h-60 overflow-y-scroll">
-			>
+                    {#each allowedEmbeddingBasemaps as basemap}
-				<Select.Trigger id="basemap" class="w-full h-8">
+                        <Select.Item value={basemap}
-					<Select.Value />
+                            >{i18n._(`layers.label.${basemap}`)}</Select.Item
-				</Select.Trigger>
+                        >
-				<Select.Content class="max-h-60 overflow-y-scroll">
+                    {/each}
-					{#each allowedEmbeddingBasemaps as basemap}
+                </Select.Content>
-						<Select.Item value={basemap}>{$_(`layers.label.${basemap}`)}</Select.Item>
+            </Select.Root>
-					{/each}
+            <div class="flex flex-row items-center gap-2">
-				</Select.Content>
+                <Label for="profile">{i18n._('menu.elevation_profile')}</Label>
-			</Select.Root>
+                <Checkbox id="profile" bind:checked={options.elevation.show} />
-			<div class="flex flex-row items-center gap-2">
+            </div>
-				<Label for="profile">{$_('menu.elevation_profile')}</Label>
+            {#if options.elevation.show}
-				<Checkbox id="profile" bind:checked={options.elevation.show} />
+                <div class="grid grid-cols-2 gap-x-6 gap-y-3 rounded-md border p-3 mt-1">
-			</div>
+                    <Label class="flex flex-row items-center gap-2">
-			{#if options.elevation.show}
+                        {i18n._('embedding.height')}
-				<div class="grid grid-cols-2 gap-x-6 gap-y-3 rounded-md border p-3 mt-1">
+                        <Input
-					<Label class="flex flex-row items-center gap-2">
+                            type="number"
-						{$_('embedding.height')}
+                            bind:value={options.elevation.height}
-						<Input type="number" bind:value={options.elevation.height} class="h-8 w-20" />
+                            class="h-8 w-20"
-					</Label>
+                        />
-					<div class="flex flex-row items-center gap-2">
+                    </Label>
-						<span class="shrink-0">
+                    <div class="flex flex-row items-center gap-2">
-							{$_('embedding.fill_by')}
+                        <span class="shrink-0">
-						</span>
+                            {i18n._('embedding.fill_by')}
-						<Select.Root
+                        </span>
-							selected={{ value: 'none', label: $_('embedding.none') }}
+                        <Select.Root type="single" bind:value={options.elevation.fill}>
-							onSelectedChange={(selected) => {
+                            <Select.Trigger class="grow h-8">
-								let value = selected?.value;
+                                {options.elevation.fill !== 'none'
-								if (value === 'none') {
+                                    ? i18n._(`quantities.${options.elevation.fill}`)
-									options.elevation.fill = undefined;
+                                    : i18n._('embedding.none')}
-								} else if (value === 'slope' || value === 'surface') {
+                            </Select.Trigger>
-									options.elevation.fill = value;
+                            <Select.Content>
-								}
+                                <Select.Item value="slope">{i18n._('quantities.slope')}</Select.Item
-							}}
+                                >
-						>
+                                <Select.Item value="surface"
-							<Select.Trigger class="grow h-8">
+                                    >{i18n._('quantities.surface')}</Select.Item
-								<Select.Value />
+                                >
-							</Select.Trigger>
+                                <Select.Item value="highway"
-							<Select.Content>
+                                    >{i18n._('quantities.highway')}</Select.Item
-								<Select.Item value="slope">{$_('quantities.slope')}</Select.Item>
+                                >
-								<Select.Item value="surface">{$_('quantities.surface')}</Select.Item>
+                                <Select.Item value="none">{i18n._('embedding.none')}</Select.Item>
-								<Select.Item value="none">{$_('embedding.none')}</Select.Item>
+                            </Select.Content>
-							</Select.Content>
+                        </Select.Root>
-						</Select.Root>
+                    </div>
-					</div>
+                    <div class="flex flex-row items-center gap-2">
-					<div class="flex flex-row items-center gap-2">
+                        <Checkbox id="controls" bind:checked={options.elevation.controls} />
-						<Checkbox id="controls" bind:checked={options.elevation.controls} />
+                        <Label for="controls">{i18n._('embedding.show_controls')}</Label>
-						<Label for="controls">{$_('embedding.show_controls')}</Label>
+                    </div>
-					</div>
+                    <div class="flex flex-row items-center gap-2">
-					<div class="flex flex-row items-center gap-2">
+                        <Checkbox id="show-speed" bind:checked={options.elevation.speed} />
-						<Checkbox id="show-speed" bind:checked={options.elevation.speed} />
+                        <Label for="show-speed" class="flex flex-row items-center gap-1">
-						<Label for="show-speed" class="flex flex-row items-center gap-1">
+                            <Zap size="16" />
-							<Zap size="16" />
+                            {i18n._('quantities.speed')}
-							{$_('chart.show_speed')}
+                        </Label>
-						</Label>
+                    </div>
-					</div>
+                    <div class="flex flex-row items-center gap-2">
-					<div class="flex flex-row items-center gap-2">
+                        <Checkbox id="show-hr" bind:checked={options.elevation.hr} />
-						<Checkbox id="show-hr" bind:checked={options.elevation.hr} />
+                        <Label for="show-hr" class="flex flex-row items-center gap-1">
-						<Label for="show-hr" class="flex flex-row items-center gap-1">
+                            <HeartPulse size="16" />
-							<HeartPulse size="16" />
+                            {i18n._('quantities.heartrate')}
-							{$_('chart.show_heartrate')}
+                        </Label>
-						</Label>
+                    </div>
-					</div>
+                    <div class="flex flex-row items-center gap-2">
-					<div class="flex flex-row items-center gap-2">
+                        <Checkbox id="show-cad" bind:checked={options.elevation.cad} />
-						<Checkbox id="show-cad" bind:checked={options.elevation.cad} />
+                        <Label for="show-cad" class="flex flex-row items-center gap-1">
-						<Label for="show-cad" class="flex flex-row items-center gap-1">
+                            <Orbit size="16" />
-							<Orbit size="16" />
+                            {i18n._('quantities.cadence')}
-							{$_('chart.show_cadence')}
+                        </Label>
-						</Label>
+                    </div>
-					</div>
+                    <div class="flex flex-row items-center gap-2">
-					<div class="flex flex-row items-center gap-2">
+                        <Checkbox id="show-temp" bind:checked={options.elevation.temp} />
-						<Checkbox id="show-temp" bind:checked={options.elevation.temp} />
+                        <Label for="show-temp" class="flex flex-row items-center gap-1">
-						<Label for="show-temp" class="flex flex-row items-center gap-1">
+                            <Thermometer size="16" />
-							<Thermometer size="16" />
+                            {i18n._('quantities.temperature')}
-							{$_('chart.show_temperature')}
+                        </Label>
-						</Label>
+                    </div>
-					</div>
+                    <div class="flex flex-row items-center gap-2">
-					<div class="flex flex-row items-center gap-2">
+                        <Checkbox id="show-power" bind:checked={options.elevation.power} />
-						<Checkbox id="show-power" bind:checked={options.elevation.power} />
+                        <Label for="show-power" class="flex flex-row items-center gap-1">
-						<Label for="show-power" class="flex flex-row items-center gap-1">
+                            <SquareActivity size="16" />
-							<SquareActivity size="16" />
+                            {i18n._('quantities.power')}
-							{$_('chart.show_power')}
+                        </Label>
-						</Label>
+                    </div>
-					</div>
+                </div>
-				</div>
+            {/if}
-			{/if}
+            <div class="flex flex-row items-center gap-2">
-			<div class="flex flex-row items-center gap-2">
+                <Checkbox id="distance-markers" bind:checked={options.distanceMarkers} />
-				<Checkbox id="distance-markers" bind:checked={options.distanceMarkers} />
+                <Label for="distance-markers" class="flex flex-row items-center gap-1">
-				<Label for="distance-markers" class="flex flex-row items-center gap-1">
+                    <Coins size="16" />
-					<Coins size="16" />
+                    {i18n._('menu.distance_markers')}
-					{$_('menu.distance_markers')}
+                </Label>
-				</Label>
+            </div>
-			</div>
+            <div class="flex flex-row items-center gap-2">
-			<div class="flex flex-row items-center gap-2">
+                <Checkbox id="direction-markers" bind:checked={options.directionMarkers} />
-				<Checkbox id="direction-markers" bind:checked={options.directionMarkers} />
+                <Label for="direction-markers" class="flex flex-row items-center gap-1">
-				<Label for="direction-markers" class="flex flex-row items-center gap-1">
+                    <Milestone size="16" />
-					<Milestone size="16" />
+                    {i18n._('menu.direction_markers')}
-					{$_('menu.direction_markers')}
+                </Label>
-				</Label>
+            </div>
-			</div>
+            <div class="flex flex-row flex-wrap justify-between gap-3">
-			<div class="flex flex-row flex-wrap justify-between gap-3">
+                <Label class="flex flex-col items-start gap-2">
-				<Label class="flex flex-col items-start gap-2">
+                    {i18n._('menu.distance_units')}
-					{$_('menu.distance_units')}
+                    <RadioGroup.Root bind:value={options.distanceUnits}>
-					<RadioGroup.Root bind:value={options.distanceUnits}>
+                        <div class="flex items-center space-x-2">
-						<div class="flex items-center space-x-2">
+                            <RadioGroup.Item value="metric" id="metric" />
-							<RadioGroup.Item value="metric" id="metric" />
+                            <Label for="metric">{i18n._('menu.metric')}</Label>
-							<Label for="metric">{$_('menu.metric')}</Label>
+                        </div>
-						</div>
+                        <div class="flex items-center space-x-2">
-						<div class="flex items-center space-x-2">
+                            <RadioGroup.Item value="imperial" id="imperial" />
-							<RadioGroup.Item value="imperial" id="imperial" />
+                            <Label for="imperial">{i18n._('menu.imperial')}</Label>
-							<Label for="imperial">{$_('menu.imperial')}</Label>
+                        </div>
-						</div>
+                        <div class="flex items-center space-x-2">
-					</RadioGroup.Root>
+                            <RadioGroup.Item value="nautical" id="nautical" />
-				</Label>
+                            <Label for="nautical">{i18n._('menu.nautical')}</Label>
-				<Label class="flex flex-col items-start gap-2">
+                        </div>
-					{$_('menu.velocity_units')}
+                    </RadioGroup.Root>
-					<RadioGroup.Root bind:value={options.velocityUnits}>
+                </Label>
-						<div class="flex items-center space-x-2">
+                <Label class="flex flex-col items-start gap-2">
-							<RadioGroup.Item value="speed" id="speed" />
+                    {i18n._('menu.velocity_units')}
-							<Label for="speed">{$_('quantities.speed')}</Label>
+                    <RadioGroup.Root bind:value={options.velocityUnits}>
-						</div>
+                        <div class="flex items-center space-x-2">
-						<div class="flex items-center space-x-2">
+                            <RadioGroup.Item value="speed" id="speed" />
-							<RadioGroup.Item value="pace" id="pace" />
+                            <Label for="speed">{i18n._('quantities.speed')}</Label>
-							<Label for="pace">{$_('quantities.pace')}</Label>
+                        </div>
-						</div>
+                        <div class="flex items-center space-x-2">
-					</RadioGroup.Root>
+                            <RadioGroup.Item value="pace" id="pace" />
-				</Label>
+                            <Label for="pace">{i18n._('quantities.pace')}</Label>
-				<Label class="flex flex-col items-start gap-2">
+                        </div>
-					{$_('menu.temperature_units')}
+                    </RadioGroup.Root>
-					<RadioGroup.Root bind:value={options.temperatureUnits}>
+                </Label>
-						<div class="flex items-center space-x-2">
+                <Label class="flex flex-col items-start gap-2">
-							<RadioGroup.Item value="celsius" id="celsius" />
+                    {i18n._('menu.temperature_units')}
-							<Label for="celsius">{$_('menu.celsius')}</Label>
+                    <RadioGroup.Root bind:value={options.temperatureUnits}>
-						</div>
+                        <div class="flex items-center space-x-2">
-						<div class="flex items-center space-x-2">
+                            <RadioGroup.Item value="celsius" id="celsius" />
-							<RadioGroup.Item value="fahrenheit" id="fahrenheit" />
+                            <Label for="celsius">{i18n._('menu.celsius')}</Label>
-							<Label for="fahrenheit">{$_('menu.fahrenheit')}</Label>
+                        </div>
-						</div>
+                        <div class="flex items-center space-x-2">
-					</RadioGroup.Root>
+                            <RadioGroup.Item value="fahrenheit" id="fahrenheit" />
-				</Label>
+                            <Label for="fahrenheit">{i18n._('menu.fahrenheit')}</Label>
-			</div>
+                        </div>
-			<Label class="flex flex-col items-start gap-2">
+                    </RadioGroup.Root>
-				{$_('menu.mode')}
+                </Label>
-				<RadioGroup.Root bind:value={options.theme} class="flex flex-row">
+            </div>
-					<div class="flex items-center space-x-2">
+            <Label class="flex flex-col items-start gap-2">
-						<RadioGroup.Item value="system" id="system" />
+                {i18n._('menu.mode')}
-						<Label for="system">{$_('menu.system')}</Label>
+                <RadioGroup.Root bind:value={options.theme} class="flex flex-row">
-					</div>
+                    <div class="flex items-center space-x-2">
-					<div class="flex items-center space-x-2">
+                        <RadioGroup.Item value="system" id="system" />
-						<RadioGroup.Item value="light" id="light" />
+                        <Label for="system">{i18n._('menu.system')}</Label>
-						<Label for="light">{$_('menu.light')}</Label>
+                    </div>
-					</div>
+                    <div class="flex items-center space-x-2">
-					<div class="flex items-center space-x-2">
+                        <RadioGroup.Item value="light" id="light" />
-						<RadioGroup.Item value="dark" id="dark" />
+                        <Label for="light">{i18n._('menu.light')}</Label>
-						<Label for="dark">{$_('menu.dark')}</Label>
+                    </div>
-					</div>
+                    <div class="flex items-center space-x-2">
-				</RadioGroup.Root>
+                        <RadioGroup.Item value="dark" id="dark" />
-			</Label>
+                        <Label for="dark">{i18n._('menu.dark')}</Label>
-			<div class="flex flex-col gap-3 p-3 border rounded-md">
+                    </div>
-				<div class="flex flex-row items-center gap-2">
+                </RadioGroup.Root>
-					<Checkbox id="manual-camera" bind:checked={manualCamera} />
+            </Label>
-					<Label for="manual-camera" class="flex flex-row items-center gap-1">
+            <div class="flex flex-col gap-3 p-3 border rounded-md">
-						<Video size="16" />
+                <div class="flex flex-row items-center gap-2">
-						{$_('embedding.manual_camera')}
+                    <Checkbox id="manual-camera" bind:checked={manualCamera} />
-					</Label>
+                    <Label for="manual-camera" class="flex flex-row items-center gap-1">
-				</div>
+                        <Video size="16" />
-				<p class="text-sm text-muted-foreground">
+                        {i18n._('embedding.manual_camera')}
-					{$_('embedding.manual_camera_description')}
+                    </Label>
-				</p>
+                </div>
-				<div class="flex flex-row flex-wrap items-center gap-6">
+                <p class="text-sm text-muted-foreground">
-					<Label class="flex flex-col gap-1">
+                    {i18n._('embedding.manual_camera_description')}
-						<span>{$_('embedding.latitude')}</span>
+                </p>
-						<span>{lat}</span>
+                <div class="flex flex-row flex-wrap items-center gap-6">
-					</Label>
+                    <Label class="flex flex-col gap-1">
-					<Label class="flex flex-col gap-1">
+                        <span>{i18n._('embedding.latitude')}</span>
-						<span>{$_('embedding.longitude')}</span>
+                        <span>{lat}</span>
-						<span>{lon}</span>
+                    </Label>
-					</Label>
+                    <Label class="flex flex-col gap-1">
-					<Label class="flex flex-col gap-1">
+                        <span>{i18n._('embedding.longitude')}</span>
-						<span>{$_('embedding.zoom')}</span>
+                        <span>{lon}</span>
-						<span>{zoom}</span>
+                    </Label>
-					</Label>
+                    <Label class="flex flex-col gap-1">
-					<Label class="flex flex-col gap-1">
+                        <span>{i18n._('embedding.zoom')}</span>
-						<span>{$_('embedding.bearing')}</span>
+                        <span>{zoom}</span>
-						<span>{bearing}</span>
+                    </Label>
-					</Label>
+                    <Label class="flex flex-col gap-1">
-					<Label class="flex flex-col gap-1">
+                        <span>{i18n._('embedding.bearing')}</span>
-						<span>{$_('embedding.pitch')}</span>
+                        <span>{bearing}</span>
-						<span>{pitch}</span>
+                    </Label>
-					</Label>
+                    <Label class="flex flex-col gap-1">
-				</div>
+                        <span>{i18n._('embedding.pitch')}</span>
-			</div>
+                        <span>{pitch}</span>
-			<Label>
+                    </Label>
-				{$_('embedding.preview')}
+                </div>
-			</Label>
+            </div>
-			<div class="relative h-[600px]">
+            <Label>
-				<Embedding bind:options={iframeOptions} bind:hash useHash={false} />
+                {i18n._('embedding.preview')}
-			</div>
+            </Label>
-			<Label>
+            <div class="relative h-[600px]">
-				{$_('embedding.code')}
+                <Embedding options={iframeOptions} bind:hash useHash={false} />
-			</Label>
+            </div>
-			<pre class="bg-primary text-primary-foreground p-3 rounded-md whitespace-normal break-all">
+            <Label>
+                {i18n._('embedding.code')}
+            </Label>
+            <pre
+                class="bg-primary text-primary-foreground p-3 rounded-md whitespace-normal break-all">
                 <code class="language-html">
-                    {`<iframe src="https://gpx.studio${base}/embed?options=${encodeURIComponent(JSON.stringify(getCleanedEmbeddingOptions(options)))}${hash}" width="100%" height="600px" frameborder="0" style="outline: none;"/>`}
+                    {`<iframe src="https://gpx.studio${base}/embed?options=${encodeURIComponent(JSON.stringify(getCleanedEmbeddingOptions(iframeOptions)))}${hash}" width="100%" height="600px" frameborder="0" style="outline: none;"/>`}
                 </code>
             </pre>
-		</fieldset>
+        </fieldset>
-	</Card.Content>
+    </Card.Content>
 </Card.Root>

website/src/lib/components/embedding/OpenIn.svelte

@@ -1,18 +1,28 @@
 <script lang="ts">
-	import { Button } from '$lib/components/ui/button';
+    import { Button } from '$lib/components/ui/button';
-	import Logo from '$lib/components/Logo.svelte';
+    import Logo from '$lib/components/Logo.svelte';
-	import { getURLForLanguage } from '$lib/utils';
+    import { getURLForLanguage } from '$lib/utils';
-	import { _, locale } from 'svelte-i18n';
+    import { i18n } from '$lib/i18n.svelte';
 
-	export let files: string[];
+    let {
+        files,
+        ids,
+    }: {
+        files: string[];
+        ids: string[];
+    } = $props();
 </script>
 
 <Button
-	variant="ghost"
+    variant="ghost"
-	class="absolute top-0 flex-wrap h-fit bg-background font-semibold rounded-md py-1 px-2 gap-1.5 xs:text-base mt-2.5 ml-2.5 mr-12"
+    class="absolute top-0 flex-wrap h-fit bg-background font-semibold rounded-md py-1 px-2 gap-1.5 xs:text-base mt-2.5 ml-2.5 mr-12"
-	href="{getURLForLanguage($locale, '/app')}?files={encodeURIComponent(JSON.stringify(files))}"
+    href="{getURLForLanguage(i18n.lang, '/app')}?{files.length > 0
-	target="_blank"
+        ? `files=${encodeURIComponent(JSON.stringify(files))}`
+        : ''}{files.length > 0 && ids.length > 0 ? '&' : ''}{ids.length > 0
+        ? `ids=${encodeURIComponent(JSON.stringify(ids))}`
+        : ''}"
+    target="_blank"
 >
-	{$_('menu.open_in')}
+    {i18n._('menu.open_in')}
-	<Logo class="h-[18px] xs:h-5 translate-y-[1px]" />
+    <Logo class="h-[18px] xs:h-5 translate-y-[1px]" />
 </Button>

website/src/lib/components/embedding/embedding.ts

@@ -0,0 +1,154 @@
+import { PUBLIC_MAPTILER_KEY } from '$env/static/public';
+import { basemaps } from '$lib/assets/layers';
+
+export type EmbeddingOptions = {
+    key: string;
+    files: string[];
+    ids: string[];
+    basemap: string;
+    elevation: {
+        show: boolean;
+        height: number;
+        controls: boolean;
+        fill: 'slope' | 'surface' | 'highway' | 'none';
+        speed: boolean;
+        hr: boolean;
+        cad: boolean;
+        temp: boolean;
+        power: boolean;
+    };
+    distanceMarkers: boolean;
+    directionMarkers: boolean;
+    distanceUnits: 'metric' | 'imperial' | 'nautical';
+    velocityUnits: 'speed' | 'pace';
+    temperatureUnits: 'celsius' | 'fahrenheit';
+    theme: 'system' | 'light' | 'dark';
+};
+
+export const defaultEmbeddingOptions = {
+    key: '',
+    files: [],
+    ids: [],
+    basemap: 'maptilerStreets',
+    elevation: {
+        show: true,
+        height: 170,
+        controls: true,
+        fill: 'none',
+        speed: false,
+        hr: false,
+        cad: false,
+        temp: false,
+        power: false,
+    },
+    distanceMarkers: false,
+    directionMarkers: false,
+    distanceUnits: 'metric',
+    velocityUnits: 'speed',
+    temperatureUnits: 'celsius',
+    theme: 'system',
+};
+
+export function getMergedEmbeddingOptions(
+    options: any,
+    defaultOptions: any = defaultEmbeddingOptions
+): EmbeddingOptions {
+    const mergedOptions = JSON.parse(JSON.stringify(defaultOptions));
+    for (const key in options) {
+        if (
+            typeof options[key] === 'object' &&
+            options[key] !== null &&
+            !Array.isArray(options[key])
+        ) {
+            mergedOptions[key] = getMergedEmbeddingOptions(options[key], defaultOptions[key]);
+        } else {
+            mergedOptions[key] = options[key];
+        }
+    }
+    return mergedOptions;
+}
+
+export function getCleanedEmbeddingOptions(
+    options: any,
+    defaultOptions: any = defaultEmbeddingOptions
+): any {
+    const cleanedOptions = JSON.parse(JSON.stringify(options));
+    for (const key in cleanedOptions) {
+        if (
+            typeof cleanedOptions[key] === 'object' &&
+            cleanedOptions[key] !== null &&
+            !Array.isArray(cleanedOptions[key])
+        ) {
+            cleanedOptions[key] = getCleanedEmbeddingOptions(
+                cleanedOptions[key],
+                defaultOptions[key]
+            );
+            if (Object.keys(cleanedOptions[key]).length === 0) {
+                delete cleanedOptions[key];
+            }
+        } else if (JSON.stringify(cleanedOptions[key]) === JSON.stringify(defaultOptions[key])) {
+            delete cleanedOptions[key];
+        }
+    }
+    if (cleanedOptions['key'] && cleanedOptions['key'] === PUBLIC_MAPTILER_KEY) {
+        delete cleanedOptions['key'];
+    }
+    return cleanedOptions;
+}
+
+export const allowedEmbeddingBasemaps = Object.keys(basemaps).filter(
+    (basemap) => !['ordnanceSurvey'].includes(basemap)
+);
+
+export function getFilesFromEmbeddingOptions(options: EmbeddingOptions): string[] {
+    return options.files.concat(options.ids.map((id) => getURLForGoogleDriveFile(id)));
+}
+
+export function getURLForGoogleDriveFile(fileId: string): string {
+    return `https://www.googleapis.com/drive/v3/files/${fileId}?alt=media&key=AIzaSyA2ZadQob_hXiT2VaYIkAyafPvz_4ZMssk`;
+}
+
+export function convertOldEmbeddingOptions(options: URLSearchParams): any {
+    let newOptions: any = {
+        key: PUBLIC_MAPTILER_KEY,
+        files: [],
+        ids: [],
+    };
+    if (options.has('state')) {
+        let state = JSON.parse(options.get('state')!);
+        if (state.ids) {
+            newOptions.ids.push(...state.ids);
+        }
+        if (state.urls) {
+            newOptions.files.push(...state.urls);
+        }
+    }
+    if (options.has('source')) {
+        let basemap = options.get('source')!;
+        if (basemap === 'satellite') {
+            newOptions.basemap = 'maptilerSatellite';
+        } else if (basemap === 'otm') {
+            newOptions.basemap = 'openTopoMap';
+        } else if (basemap === 'ohm') {
+            newOptions.basemap = 'openHikingMap';
+        }
+    }
+    if (options.has('imperial')) {
+        newOptions.distanceUnits = 'imperial';
+    }
+    if (options.has('running')) {
+        newOptions.velocityUnits = 'pace';
+    }
+    if (options.has('distance')) {
+        newOptions.distanceMarkers = true;
+    }
+    if (options.has('direction')) {
+        newOptions.directionMarkers = true;
+    }
+    if (options.has('slope')) {
+        newOptions.elevation = {
+            fill: 'slope',
+        };
+    }
+    return newOptions;
+}

website/src/lib/components/export/Export.svelte

@@ -0,0 +1,199 @@
+<script lang="ts">
+    import { Button } from '$lib/components/ui/button';
+    import { Label } from '$lib/components/ui/label';
+    import { Checkbox } from '$lib/components/ui/checkbox';
+    import { Separator } from '$lib/components/ui/separator';
+    import { Dialog } from 'bits-ui';
+    import {
+        exportAllFiles,
+        exportSelectedFiles,
+        ExportState,
+        exportState,
+    } from '$lib/components/export/utils.svelte';
+    import { currentTool } from '$lib/components/toolbar/tools';
+    import {
+        Download,
+        Zap,
+        Earth,
+        HeartPulse,
+        Orbit,
+        Thermometer,
+        SquareActivity,
+    } from '@lucide/svelte';
+    import { i18n } from '$lib/i18n.svelte';
+    import { GPXGlobalStatistics } from 'gpx';
+    import { ListRootItem } from '$lib/components/file-list/file-list';
+    import { fileStateCollection } from '$lib/logic/file-state';
+    import { selection } from '$lib/logic/selection';
+    import { gpxStatistics } from '$lib/logic/statistics';
+    import { get } from 'svelte/store';
+
+    let open = $derived(exportState.current !== ExportState.NONE);
+    let exportOptions: Record<string, boolean> = $state({
+        time: true,
+        hr: true,
+        cad: true,
+        atemp: true,
+        power: true,
+        extensions: false,
+    });
+    let hide: Record<string, boolean> = $derived.by(() => {
+        if (exportState.current === ExportState.NONE) {
+            return {
+                time: false,
+                hr: false,
+                cad: false,
+                atemp: false,
+                power: false,
+                extensions: false,
+            };
+        } else {
+            let statistics = $gpxStatistics.global;
+            if (exportState.current === ExportState.ALL) {
+                statistics = Array.from(get(fileStateCollection).values())
+                    .map((file) => file.statistics)
+                    .reduce((acc, cur) => {
+                        if (cur !== undefined) {
+                            acc.mergeWith(cur.getStatisticsFor(new ListRootItem()).global);
+                        }
+                        return acc;
+                    }, new GPXGlobalStatistics());
+            }
+            return {
+                time: statistics.time.total === 0,
+                hr: statistics.hr.count === 0,
+                cad: statistics.cad.count === 0,
+                atemp: statistics.atemp.count === 0,
+                power: statistics.power.count === 0,
+                extensions: Object.keys(statistics.extensions).length === 0,
+            };
+        }
+    });
+    let exclude = $derived(Object.keys(exportOptions).filter((key) => !exportOptions[key]));
+
+    $effect(() => {
+        if (open) {
+            currentTool.set(null);
+        }
+    });
+</script>
+
+<Dialog.Root
+    bind:open
+    onOpenChange={(isOpen) => {
+        if (!isOpen) {
+            exportState.current = ExportState.NONE;
+        }
+    }}
+>
+    <Dialog.Trigger class="hidden" />
+    <Dialog.Portal>
+        <Dialog.Content
+            class="fixed left-[50%] top-[50%] z-50 w-fit max-w-full translate-x-[-50%] translate-y-[-50%] flex flex-col items-center gap-3 border bg-background p-3 shadow-lg rounded-md"
+        >
+            <div
+                class="w-full flex flex-col sm:flex-row items-center justify-center gap-1 sm:gap-2 border rounded-md p-2 bg-secondary"
+            >
+                <span class="w-12 shrink-0 text-center text-xl">⚠️</span>
+                <span class="text-sm">
+                    {i18n._('menu.support_message')}
+                </span>
+            </div>
+            <div class="w-full flex flex-row flex-wrap gap-2">
+                <Button
+                    class="bg-support grow"
+                    href="https://opencollective.com/gpxstudio"
+                    target="_blank"
+                >
+                    {i18n._('menu.support_button')}
+                    <span>🙏</span>
+                </Button>
+                <Button
+                    variant="outline"
+                    class="grow"
+                    onclick={() => {
+                        if (exportState.current === ExportState.SELECTION) {
+                            exportSelectedFiles(exclude);
+                        } else if (exportState.current === ExportState.ALL) {
+                            exportAllFiles(exclude);
+                        }
+                        open = false;
+                        exportState.current = ExportState.NONE;
+                    }}
+                >
+                    <Download size="16" />
+                    {#if $fileStateCollection.size === 1 || (exportState.current === ExportState.SELECTION && $selection.size === 1)}
+                        {i18n._('menu.download_file')}
+                    {:else}
+                        {i18n._('menu.download_files')}
+                    {/if}
+                </Button>
+            </div>
+            <div
+                class="w-full max-w-xl flex flex-col items-center gap-2 {Object.values(hide).some(
+                    (v) => !v
+                )
+                    ? ''
+                    : 'hidden'}"
+            >
+                <div class="w-full flex flex-row items-center gap-3">
+                    <div class="grow">
+                        <Separator />
+                    </div>
+                    <Label class="shrink-0">
+                        {i18n._('menu.export_options')}
+                    </Label>
+                    <div class="grow">
+                        <Separator />
+                    </div>
+                </div>
+                <div class="flex flex-row flex-wrap justify-center gap-x-6 gap-y-2">
+                    <div class="flex flex-row items-center gap-1.5 {hide.time ? 'hidden' : ''}">
+                        <Checkbox id="export-time" bind:checked={exportOptions.time} />
+                        <Label for="export-time" class="flex flex-row items-center gap-1">
+                            <Zap size="16" />
+                            {i18n._('quantities.time')}
+                        </Label>
+                    </div>
+                    <div class="flex flex-row items-center gap-1.5 {hide.hr ? 'hidden' : ''}">
+                        <Checkbox id="export-heartrate" bind:checked={exportOptions.hr} />
+                        <Label for="export-heartrate" class="flex flex-row items-center gap-1">
+                            <HeartPulse size="16" />
+                            {i18n._('quantities.heartrate')}
+                        </Label>
+                    </div>
+                    <div class="flex flex-row items-center gap-1.5 {hide.cad ? 'hidden' : ''}">
+                        <Checkbox id="export-cadence" bind:checked={exportOptions.cad} />
+                        <Label for="export-cadence" class="flex flex-row items-center gap-1">
+                            <Orbit size="16" />
+                            {i18n._('quantities.cadence')}
+                        </Label>
+                    </div>
+                    <div class="flex flex-row items-center gap-1.5 {hide.atemp ? 'hidden' : ''}">
+                        <Checkbox id="export-temperature" bind:checked={exportOptions.atemp} />
+                        <Label for="export-temperature" class="flex flex-row items-center gap-1">
+                            <Thermometer size="16" />
+                            {i18n._('quantities.temperature')}
+                        </Label>
+                    </div>
+                    <div class="flex flex-row items-center gap-1.5 {hide.power ? 'hidden' : ''}">
+                        <Checkbox id="export-power" bind:checked={exportOptions.power} />
+                        <Label for="export-power" class="flex flex-row items-center gap-1">
+                            <SquareActivity size="16" />
+                            {i18n._('quantities.power')}
+                        </Label>
+                    </div>
+                    <div
+                        class="flex flex-row items-center gap-1.5 {hide.extensions ? 'hidden' : ''}"
+                    >
+                        <Checkbox id="export-extensions" bind:checked={exportOptions.extensions} />
+                        <Label for="export-extensions" class="flex flex-row items-center gap-1">
+                            <Earth size="16" />
+                            {i18n._('quantities.osm_extensions')}
+                        </Label>
+                    </div>
+                </div>
+            </div>
+        </Dialog.Content>
+    </Dialog.Portal>
+</Dialog.Root>

website/src/lib/components/export/utils.svelte.ts

@@ -0,0 +1,66 @@
+import { selection } from '$lib/logic/selection';
+import { fileStateCollection } from '$lib/logic/file-state';
+import { settings } from '$lib/logic/settings';
+import { buildGPX, type GPXFile } from 'gpx';
+import FileSaver from 'file-saver';
+import JSZip from 'jszip';
+import { get } from 'svelte/store';
+
+export enum ExportState {
+    NONE,
+    SELECTION,
+    ALL,
+}
+export const exportState = $state({
+    current: ExportState.NONE,
+});
+
+async function exportFiles(fileIds: string[], exclude: string[]) {
+    if (fileIds.length > 1) {
+        await exportFilesAsZip(fileIds, exclude);
+    } else {
+        const firstFileId = fileIds.at(0);
+        if (firstFileId != null) {
+            const file = fileStateCollection.getFile(firstFileId);
+            if (file) {
+                exportFile(file, exclude);
+            }
+        }
+    }
+}
+
+export async function exportSelectedFiles(exclude: string[]) {
+    const fileIds: string[] = [];
+    selection.applyToOrderedSelectedItemsFromFile(async (fileId, level, items) => {
+        fileIds.push(fileId);
+    });
+    await exportFiles(fileIds, exclude);
+}
+
+export async function exportAllFiles(exclude: string[]) {
+    await exportFiles(get(settings.fileOrder), exclude);
+}
+
+function exportFile(file: GPXFile, exclude: string[]) {
+    const blob = new Blob([buildGPX(file, exclude)], { type: 'application/gpx+xml' });
+    FileSaver.saveAs(blob, `${file.metadata.name}.gpx`);
+}
+
+async function exportFilesAsZip(fileIds: string[], exclude: string[]) {
+    const zip = new JSZip();
+    for (const fileId of fileIds) {
+        const file = fileStateCollection.getFile(fileId);
+        if (file) {
+            const gpx = buildGPX(file, exclude);
+            let filename = file.metadata.name;
+            for (let i = 1; zip.files[filename + '.gpx']; i++) {
+                filename = file.metadata.name + `-${i}`;
+            }
+            zip.file(filename + '.gpx', gpx);
+        }
+    }
+    if (Object.keys(zip.files).length > 0) {
+        const blob = await zip.generateAsync({ type: 'blob' });
+        FileSaver.saveAs(blob, 'gpx-files.zip');
+    }
+}

website/src/lib/components/file-list/FileList.svelte

@@ -1,89 +1,91 @@
 <script lang="ts">
-	import { ScrollArea } from '$lib/components/ui/scroll-area/index';
+    import { ScrollArea } from '$lib/components/ui/scroll-area/index';
-	import * as ContextMenu from '$lib/components/ui/context-menu';
+    import * as ContextMenu from '$lib/components/ui/context-menu';
-	import FileListNode from './FileListNode.svelte';
+    import FileListNode from './FileListNode.svelte';
-	import { fileObservers, settings } from '$lib/db';
+    import { onMount, setContext } from 'svelte';
-	import { setContext } from 'svelte';
+    import { ListFileItem, ListLevel, ListRootItem } from './file-list';
-	import { ListFileItem, ListLevel, ListRootItem, allowedPastes } from './FileList';
+    import { ClipboardPaste, FileStack, Plus } from '@lucide/svelte';
-	import { copied, pasteSelection, selectAll, selection } from './Selection';
+    import Shortcut from '$lib/components/Shortcut.svelte';
-	import { ClipboardPaste, FileStack, Plus } from 'lucide-svelte';
+    import { i18n } from '$lib/i18n.svelte';
-	import Shortcut from '$lib/components/Shortcut.svelte';
+    import { fileStateCollection } from '$lib/logic/file-state';
-	import { _ } from 'svelte-i18n';
+    import { createFile, pasteSelection } from '$lib/logic/file-actions';
-	import { createFile } from '$lib/stores';
+    import { selection, copied } from '$lib/logic/selection';
+    import { allowedPastes } from './sortable-file-list';
 
-	export let orientation: 'vertical' | 'horizontal';
+    let {
-	export let recursive = false;
+        orientation,
+        recursive = false,
+        class: className = '',
+        style = '',
+    }: {
+        orientation: 'vertical' | 'horizontal';
+        recursive?: boolean;
+        class?: string;
+        style?: string;
+    } = $props();
 
-	setContext('orientation', orientation);
+    setContext('orientation', orientation);
-	setContext('recursive', recursive);
+    setContext('recursive', recursive);
 
-	const { verticalFileView } = settings;
+    onMount(() => {
-
+        if (orientation === 'horizontal') {
-	verticalFileView.subscribe(($vertical) => {
+            selection.update(($selection) => {
-		if ($vertical) {
+                $selection.forEach((item) => {
-			selection.update(($selection) => {
+                    if (!(item instanceof ListFileItem)) {
-				$selection.forEach((item) => {
+                        $selection.toggle(item);
-					if ($selection.hasAnyChildren(item, false)) {
+                        $selection.set(new ListFileItem(item.getFileId()), true);
-						$selection.toggle(item);
+                    }
-					}
+                });
-				});
+                return $selection;
-				return $selection;
+            });
-			});
+        }
-		} else {
+    });
-			selection.update(($selection) => {
-				$selection.forEach((item) => {
-					if (!(item instanceof ListFileItem)) {
-						$selection.toggle(item);
-						$selection.set(new ListFileItem(item.getFileId()), true);
-					}
-				});
-				return $selection;
-			});
-		}
-	});
 </script>
 
 <ScrollArea
-	class="shrink-0 {orientation === 'vertical' ? 'p-0 pr-3' : 'h-10 px-1'}"
+    class="shrink-0 {orientation === 'vertical' ? 'p-0 pr-3' : 'h-10 px-1'}"
-	{orientation}
+    {orientation}
-	scrollbarXClasses={orientation === 'vertical' ? '' : 'mt-1 h-2'}
+    scrollbarXClasses={orientation === 'vertical' ? '' : 'hidden'}
-	scrollbarYClasses={orientation === 'vertical' ? '' : ''}
+    scrollbarYClasses={orientation === 'vertical' ? '' : ''}
 >
-	<div
+    <div
-		class="flex {orientation === 'vertical'
+        class="flex {orientation === 'vertical'
-			? 'flex-col py-1 pl-1 min-h-screen'
+            ? 'flex-col py-1 pl-1 min-h-screen'
-			: 'flex-row'} {$$props.class ?? ''}"
+            : 'flex-row'} {className ?? ''}"
-		{...$$restProps}
+        {style}
-	>
+    >
-		<FileListNode bind:node={$fileObservers} item={new ListRootItem()} />
+        <FileListNode node={$fileStateCollection} item={new ListRootItem()} />
-		{#if orientation === 'vertical'}
+        {#if orientation === 'vertical'}
-			<ContextMenu.Root>
+            <ContextMenu.Root>
-				<ContextMenu.Trigger class="grow" />
+                <ContextMenu.Trigger class="grow" />
-				<ContextMenu.Content>
+                <ContextMenu.Content>
-					<ContextMenu.Item on:click={createFile}>
+                    <ContextMenu.Item onclick={createFile}>
-						<Plus size="16" class="mr-1" />
+                        <Plus size="16" />
-						{$_('menu.new_file')}
+                        {i18n._('menu.new_file')}
-						<Shortcut key="+" ctrl={true} />
+                        <Shortcut key="+" ctrl={true} />
-					</ContextMenu.Item>
+                    </ContextMenu.Item>
-					<ContextMenu.Separator />
+                    <ContextMenu.Separator />
-					<ContextMenu.Item on:click={selectAll} disabled={$fileObservers.size === 0}>
+                    <ContextMenu.Item
-						<FileStack size="16" class="mr-1" />
+                        onclick={() => selection.selectAll()}
-						{$_('menu.select_all')}
+                        disabled={$fileStateCollection.size === 0}
-						<Shortcut key="A" ctrl={true} />
+                    >
-					</ContextMenu.Item>
+                        <FileStack size="16" />
-					<ContextMenu.Separator />
+                        {i18n._('menu.select_all')}
-					<ContextMenu.Item
+                        <Shortcut key="A" ctrl={true} />
-						disabled={$copied === undefined ||
+                    </ContextMenu.Item>
-							$copied.length === 0 ||
+                    <ContextMenu.Separator />
-							!allowedPastes[$copied[0].level].includes(ListLevel.ROOT)}
+                    <ContextMenu.Item
-						on:click={pasteSelection}
+                        disabled={$copied === undefined ||
-					>
+                            $copied.length === 0 ||
-						<ClipboardPaste size="16" class="mr-1" />
+                            !allowedPastes[$copied[0].level].includes(ListLevel.ROOT)}
-						{$_('menu.paste')}
+                        onclick={pasteSelection}
-						<Shortcut key="V" ctrl={true} />
+                    >
-					</ContextMenu.Item>
+                        <ClipboardPaste size="16" />
-				</ContextMenu.Content>
+                        {i18n._('menu.paste')}
-			</ContextMenu.Root>
+                        <Shortcut key="V" ctrl={true} />
-		{/if}
+                    </ContextMenu.Item>
-	</div>
+                </ContextMenu.Content>
+            </ContextMenu.Root>
+        {/if}
+    </div>
 </ScrollArea>

website/src/lib/components/file-list/FileListNode.svelte

@@ -1,83 +1,89 @@
 <script lang="ts">
-	import {
+    import {
-		GPXFile,
+        GPXFile,
-		Track,
+        Track,
-		TrackSegment,
+        TrackSegment,
-		Waypoint,
+        Waypoint,
-		type AnyGPXTreeElement,
+        type AnyGPXTreeElement,
-		type GPXTreeElement
+        type GPXTreeElement,
-	} from 'gpx';
+    } from 'gpx';
-	import { CollapsibleTreeNode } from '$lib/components/collapsible-tree/index';
+    import { CollapsibleTreeNode } from '$lib/components/collapsible-tree/index';
-	import { settings, type GPXFileWithStatistics } from '$lib/db';
+    import { type Readable } from 'svelte/store';
-	import { get, type Readable } from 'svelte/store';
+    import FileListNodeContent from './FileListNodeContent.svelte';
-	import FileListNodeContent from './FileListNodeContent.svelte';
+    import FileListNodeLabel from './FileListNodeLabel.svelte';
-	import FileListNodeLabel from './FileListNodeLabel.svelte';
+    import { getContext } from 'svelte';
-	import { afterUpdate, getContext } from 'svelte';
+    import {
-	import {
+        ListFileItem,
-		ListFileItem,
+        ListTrackSegmentItem,
-		ListTrackSegmentItem,
+        ListWaypointItem,
-		ListWaypointItem,
+        ListWaypointsItem,
-		ListWaypointsItem,
+        type ListItem,
-		type ListItem,
+        type ListTrackItem,
-		type ListTrackItem
+    } from './file-list';
-	} from './FileList';
+    import { i18n } from '$lib/i18n.svelte';
-	import { _ } from 'svelte-i18n';
+    import { settings } from '$lib/logic/settings';
-	import { selection } from './Selection';
+    import type { GPXFileWithStatistics } from '$lib/logic/statistics-tree';
+    import { selection } from '$lib/logic/selection';
 
-	export let node:
+    let {
-		| Map<string, Readable<GPXFileWithStatistics | undefined>>
+        node,
-		| GPXTreeElement<AnyGPXTreeElement>
+        item,
-		| Waypoint[]
+    }: {
-		| Waypoint;
+        node:
-	export let item: ListItem;
+            | Map<string, Readable<GPXFileWithStatistics | undefined>>
+            | GPXTreeElement<AnyGPXTreeElement>
+            | Waypoint[]
+            | Waypoint;
+        item: ListItem;
+    } = $props();
 
-	let recursive = getContext<boolean>('recursive');
+    let recursive = getContext<boolean>('recursive');
 
-	let collapsible: CollapsibleTreeNode;
+    let collapsible: CollapsibleTreeNode | undefined = $state();
 
-	$: label =
+    let label = $derived(
-		node instanceof GPXFile && item instanceof ListFileItem
+        node instanceof GPXFile && item instanceof ListFileItem
-			? node.metadata.name
+            ? node.metadata.name
-			: node instanceof Track
+            : node instanceof Track
-				? node.name ?? `${$_('gpx.track')} ${(item as ListTrackItem).trackIndex + 1}`
+              ? (node.name ?? `${i18n._('gpx.track')} ${(item as ListTrackItem).trackIndex + 1}`)
-				: node instanceof TrackSegment
+              : node instanceof TrackSegment
-					? `${$_('gpx.segment')} ${(item as ListTrackSegmentItem).segmentIndex + 1}`
+                ? `${i18n._('gpx.segment')} ${(item as ListTrackSegmentItem).segmentIndex + 1}`
-					: node instanceof Waypoint
+                : node instanceof Waypoint
-						? node.name ?? `${$_('gpx.waypoint')} ${(item as ListWaypointItem).waypointIndex + 1}`
+                  ? (node.name ??
-						: node instanceof GPXFile && item instanceof ListWaypointsItem
+                    `${i18n._('gpx.waypoint')} ${(item as ListWaypointItem).waypointIndex + 1}`)
-							? $_('gpx.waypoints')
+                  : node instanceof GPXFile && item instanceof ListWaypointsItem
-							: '';
+                    ? i18n._('gpx.waypoints')
+                    : ''
+    );
 
-	const { verticalFileView } = settings;
+    const { treeFileView } = settings;
 
-	function openIfSelectedChild() {
+    $effect(() => {
-		if (collapsible && get(verticalFileView) && $selection.hasAnyChildren(item, false)) {
+        if (collapsible && $treeFileView && $selection.hasAnyChildren(item, false)) {
-			collapsible.openNode();
+            collapsible.openNode();
-		}
+        }
-	}
+    });
-
-	if ($selection) {
-		openIfSelectedChild();
-	}
-
-	afterUpdate(openIfSelectedChild);
 </script>
 
 {#if node instanceof Map}
-	<FileListNodeContent {node} {item} />
+    <FileListNodeContent {node} {item} />
 {:else if node instanceof TrackSegment}
-	<FileListNodeLabel {node} {item} {label} />
+    <FileListNodeLabel {node} {item} {label} />
 {:else if node instanceof Waypoint}
-	<FileListNodeLabel {node} {item} {label} />
+    <FileListNodeLabel {node} {item} {label} />
 {:else if recursive}
-	<CollapsibleTreeNode id={item.getId()} bind:this={collapsible}>
+    <CollapsibleTreeNode id={item.getId()} bind:this={collapsible}>
-		<FileListNodeLabel {node} {item} {label} slot="trigger" />
+        {#snippet trigger()}
-		<div slot="content" class="ml-2">
+            <FileListNodeLabel {node} {item} {label} />
-			{#key node}
+        {/snippet}
-				<FileListNodeContent {node} {item} />
+        {#snippet content()}
-			{/key}
+            <div class="ml-4">
-		</div>
+                {#key node}
-	</CollapsibleTreeNode>
+                    <FileListNodeContent {node} {item} />
+                {/key}
+            </div>
+        {/snippet}
+    </CollapsibleTreeNode>
 {:else}
-	<FileListNodeLabel {node} {item} {label} />
+    <FileListNodeLabel {node} {item} {label} />
 {/if}

website/src/lib/components/file-list/FileListNodeContent.svelte

@@ -1,364 +1,139 @@
-<script lang="ts" context="module">
-	let dragging: Writable<ListLevel | null> = writable(null);
-
-	let updating = false;
-</script>
-
 <script lang="ts">
-	import { GPXFile, Track, Waypoint, type AnyGPXTreeElement, type GPXTreeElement } from 'gpx';
+    import { GPXFile, Track, Waypoint, type AnyGPXTreeElement, type GPXTreeElement } from 'gpx';
-	import { afterUpdate, getContext, onDestroy, onMount } from 'svelte';
+    import { getContext, onDestroy, onMount } from 'svelte';
-	import Sortable from 'sortablejs/Sortable';
+    import { type Readable } from 'svelte/store';
-	import { getFileIds, settings, type GPXFileWithStatistics } from '$lib/db';
+    import FileListNodeStore from './FileListNodeStore.svelte';
-	import { get, writable, type Readable, type Writable } from 'svelte/store';
+    import FileListNode from './FileListNode.svelte';
-	import FileListNodeStore from './FileListNodeStore.svelte';
+    import FileListNodeContent from './FileListNodeContent.svelte';
-	import FileListNode from './FileListNode.svelte';
+    import { ListFileItem, ListLevel, ListWaypointsItem, type ListItem } from './file-list';
-	import {
+    import type { GPXFileWithStatistics } from '$lib/logic/statistics-tree';
-		ListFileItem,
+    import { allowedMoves, dragging, SortableFileList } from './sortable-file-list';
-		ListLevel,
-		ListRootItem,
-		ListWaypointsItem,
-		allowedMoves,
-		moveItems,
-		type ListItem
-	} from './FileList';
-	import { selection } from './Selection';
-	import { _ } from 'svelte-i18n';
 
-	export let node:
+    let {
-		| Map<string, Readable<GPXFileWithStatistics | undefined>>
+        node,
-		| GPXTreeElement<AnyGPXTreeElement>
+        item,
-		| Waypoint;
+        waypointRoot = false,
-	export let item: ListItem;
+    }: {
-	export let waypointRoot: boolean = false;
+        node:
+            | Map<string, Readable<GPXFileWithStatistics | undefined>>
+            | GPXTreeElement<AnyGPXTreeElement>
+            | Waypoint[]
+            | Waypoint;
+        item: ListItem;
+        waypointRoot?: boolean;
+    } = $props();
 
-	let container: HTMLElement;
+    let container: HTMLElement;
-	let elements: { [id: string]: HTMLElement } = {};
+    let sortableLevel: ListLevel =
-	let sortableLevel: ListLevel =
+        node instanceof Map
-		node instanceof Map
+            ? ListLevel.FILE
-			? ListLevel.FILE
+            : node instanceof GPXFile
-			: node instanceof GPXFile
+              ? waypointRoot
-				? waypointRoot
+                  ? ListLevel.WAYPOINTS
-					? ListLevel.WAYPOINTS
+                  : item instanceof ListWaypointsItem
-					: item instanceof ListWaypointsItem
+                    ? ListLevel.WAYPOINT
-						? ListLevel.WAYPOINT
+                    : ListLevel.TRACK
-						: ListLevel.TRACK
+              : node instanceof Track
-				: node instanceof Track
+                ? ListLevel.SEGMENT
-					? ListLevel.SEGMENT
+                : ListLevel.WAYPOINT;
-					: ListLevel.WAYPOINT;
+    let orientation = getContext<'vertical' | 'horizontal'>('orientation');
-	let sortable: Sortable;
-	let orientation = getContext<'vertical' | 'horizontal'>('orientation');
 
-	let destroyed = false;
+    let canDrop = $derived($dragging !== null && allowedMoves[$dragging].includes(sortableLevel));
-	let lastUpdateStart = 0;
-	function updateToSelection(e) {
-		if (destroyed) {
-			return;
-		}
 
-		lastUpdateStart = Date.now();
+    let sortable: SortableFileList;
-		setTimeout(() => {
-			if (Date.now() - lastUpdateStart >= 40) {
-				if (updating) {
-					return;
-				}
 
-				updating = true;
+    onMount(() => {
-				// Sortable updates selection
+        sortable = new SortableFileList(
-				let changed = getChangedIds();
+            container,
-				if (changed.length > 0) {
+            node,
-					selection.update(($selection) => {
+            item,
-						$selection.clear();
+            waypointRoot,
-						Object.entries(elements).forEach(([id, element]) => {
+            sortableLevel,
-							$selection.set(
+            orientation
-								item.extend(getRealId(id)),
+        );
-								element.classList.contains('sortable-selected')
+    });
-							);
-						});
 
-						if (
+    $effect(() => {
-							e.originalEvent &&
+        if (sortable && node) {
-							!(e.originalEvent.ctrlKey || e.originalEvent.metaKey || e.originalEvent.shiftKey) &&
+            sortable.updateElements();
-							($selection.size > 1 || !$selection.has(item.extend(getRealId(changed[0]))))
+        }
-						) {
+    });
-							// Fix bug that sometimes causes a single select to be treated as a multi-select
-							$selection.clear();
-							$selection.set(item.extend(getRealId(changed[0])), true);
-						}
 
-						return $selection;
+    onDestroy(() => {
-					});
+        sortable.destroy();
-				}
+    });
-				updating = false;
-			}
-		}, 50);
-	}
-
-	function updateFromSelection() {
-		if (destroyed || updating) {
-			return;
-		}
-		updating = true;
-		// Selection updates sortable
-		let changed = getChangedIds();
-		for (let id of changed) {
-			let element = elements[id];
-			if (element) {
-				if ($selection.has(item.extend(id))) {
-					Sortable.utils.select(element);
-					element.scrollIntoView({
-						behavior: 'smooth',
-						block: 'nearest'
-					});
-				} else {
-					Sortable.utils.deselect(element);
-				}
-			}
-		}
-		updating = false;
-	}
-
-	$: if ($selection) {
-		updateFromSelection();
-	}
-
-	const { fileOrder } = settings;
-	function syncFileOrder() {
-		if (!sortable || sortableLevel !== ListLevel.FILE) {
-			return;
-		}
-
-		const currentOrder = sortable.toArray();
-		if (currentOrder.length !== $fileOrder.length) {
-			sortable.sort($fileOrder);
-		} else {
-			for (let i = 0; i < currentOrder.length; i++) {
-				if (currentOrder[i] !== $fileOrder[i]) {
-					sortable.sort($fileOrder);
-					break;
-				}
-			}
-		}
-	}
-
-	$: if ($fileOrder) {
-		syncFileOrder();
-	}
-
-	function createSortable() {
-		sortable = Sortable.create(container, {
-			group: {
-				name: sortableLevel,
-				pull: allowedMoves[sortableLevel],
-				put: true
-			},
-			direction: orientation,
-			forceAutoScrollFallback: true,
-			multiDrag: true,
-			multiDragKey: 'Meta',
-			avoidImplicitDeselect: true,
-			onSelect: updateToSelection,
-			onDeselect: updateToSelection,
-			onStart: () => {
-				dragging.set(sortableLevel);
-			},
-			onEnd: () => {
-				dragging.set(null);
-			},
-			onSort: (e) => {
-				if (sortableLevel === ListLevel.FILE) {
-					let newFileOrder = sortable.toArray();
-					if (newFileOrder.length !== get(fileOrder).length) {
-						fileOrder.set(newFileOrder);
-					} else {
-						for (let i = 0; i < newFileOrder.length; i++) {
-							if (newFileOrder[i] !== get(fileOrder)[i]) {
-								fileOrder.set(newFileOrder);
-								break;
-							}
-						}
-					}
-				}
-
-				let fromItem = Sortable.get(e.from)._item;
-				let toItem = Sortable.get(e.to)._item;
-
-				if (item === toItem && !(fromItem instanceof ListRootItem)) {
-					// Event is triggered on source and destination list, only handle it once
-					let fromItems = [];
-					let toItems = [];
-
-					if (Sortable.get(e.from)._waypointRoot) {
-						fromItems = [fromItem.extend('waypoints')];
-					} else {
-						let oldIndices: number[] =
-							e.oldIndicies.length > 0 ? e.oldIndicies.map((i) => i.index) : [e.oldIndex];
-						oldIndices = oldIndices.filter((i) => i >= 0);
-						oldIndices.sort((a, b) => a - b);
-
-						fromItems = oldIndices.map((i) => fromItem.extend(i));
-					}
-
-					if (Sortable.get(e.from)._waypointRoot && Sortable.get(e.to)._waypointRoot) {
-						toItems = [toItem.extend('waypoints')];
-					} else {
-						if (Sortable.get(e.to)._waypointRoot) {
-							toItem = toItem.extend('waypoints');
-						}
-
-						let newIndices: number[] =
-							e.newIndicies.length > 0 ? e.newIndicies.map((i) => i.index) : [e.newIndex];
-						newIndices = newIndices.filter((i) => i >= 0);
-						newIndices.sort((a, b) => a - b);
-
-						if (toItem instanceof ListRootItem) {
-							let newFileIds = getFileIds(newIndices.length);
-							toItems = newIndices.map((i, index) => {
-								$fileOrder.splice(i, 0, newFileIds[index]);
-								return item.extend(newFileIds[index]);
-							});
-						} else {
-							toItems = newIndices.map((i) => toItem.extend(i));
-						}
-					}
-
-					moveItems(fromItem, toItem, fromItems, toItems);
-				}
-			}
-		});
-		Object.defineProperty(sortable, '_item', {
-			value: item,
-			writable: true
-		});
-
-		Object.defineProperty(sortable, '_waypointRoot', {
-			value: waypointRoot,
-			writable: true
-		});
-	}
-
-	onMount(() => {
-		createSortable();
-		destroyed = false;
-	});
-
-	afterUpdate(() => {
-		elements = {};
-		container.childNodes.forEach((element) => {
-			if (element instanceof HTMLElement) {
-				let attr = element.getAttribute('data-id');
-				if (attr) {
-					if (node instanceof Map && !node.has(attr)) {
-						element.remove();
-					} else {
-						elements[attr] = element;
-					}
-				}
-			}
-		});
-
-		syncFileOrder();
-		updateFromSelection();
-	});
-
-	onDestroy(() => {
-		destroyed = true;
-	});
-
-	function getChangedIds() {
-		let changed: (string | number)[] = [];
-		Object.entries(elements).forEach(([id, element]) => {
-			let realId = getRealId(id);
-			let realItem = item.extend(realId);
-			let inSelection = get(selection).has(realItem);
-			let isSelected = element.classList.contains('sortable-selected');
-			if (inSelection !== isSelected) {
-				changed.push(realId);
-			}
-		});
-		return changed;
-	}
-
-	function getRealId(id: string | number) {
-		return sortableLevel === ListLevel.FILE || sortableLevel === ListLevel.WAYPOINTS
-			? id
-			: parseInt(id);
-	}
-
-	$: canDrop = $dragging !== null && allowedMoves[$dragging].includes(sortableLevel);
 </script>
 
 <div
-	bind:this={container}
+    bind:this={container}
-	class="sortable {orientation} flex {orientation === 'vertical'
+    class="sortable {orientation} flex {orientation === 'vertical'
-		? 'flex-col'
+        ? 'flex-col'
-		: 'flex-row gap-1'} {canDrop ? 'min-h-5' : ''}"
+        : 'flex-row gap-1'} {canDrop ? 'min-h-5' : ''}"
 >
-	{#if node instanceof Map}
+    {#if node instanceof Map}
-		{#each node as [fileId, file] (fileId)}
+        {#each node as [fileId, file] (fileId)}
-			<div data-id={fileId}>
+            <div data-id={fileId}>
-				<FileListNodeStore {file} />
+                <FileListNodeStore {file} />
-			</div>
+            </div>
-		{/each}
+        {/each}
-	{:else if node instanceof GPXFile}
+    {:else if node instanceof GPXFile}
-		{#if item instanceof ListWaypointsItem}
+        {#if item instanceof ListWaypointsItem}
-			{#each node.wpt as wpt, i (wpt)}
+            {#each node.wpt as wpt, i (wpt)}
-				<div data-id={i} class="ml-1">
+                <div data-id={i} class="ml-1">
-					<FileListNode node={wpt} item={item.extend(i)} />
+                    <FileListNode node={wpt} item={item.extend(i)} />
-				</div>
+                </div>
-			{/each}
+            {/each}
-		{:else if waypointRoot}
+        {:else if waypointRoot}
-			{#if node.wpt.length > 0}
+            {#if node.wpt.length > 0}
-				<div data-id="waypoints">
+                <div data-id="waypoints">
-					<FileListNode {node} item={item.extend('waypoints')} />
+                    <FileListNode {node} item={item.extend('waypoints')} />
-				</div>
+                </div>
-			{/if}
+            {/if}
-		{:else}
+        {:else}
-			{#each node.children as child, i (child)}
+            {#each node.children as child, i (child)}
-				<div data-id={i}>
+                <div data-id={i}>
-					<FileListNode node={child} item={item.extend(i)} />
+                    <FileListNode node={child} item={item.extend(i)} />
-				</div>
+                </div>
-			{/each}
+            {/each}
-		{/if}
+        {/if}
-	{:else if node instanceof Track}
+    {:else if node instanceof Track}
-		{#each node.children as child, i (child)}
+        {#each node.children as child, i (child)}
-			<div data-id={i} class="ml-1">
+            <div data-id={i} class="ml-1">
-				<FileListNode node={child} item={item.extend(i)} />
+                <FileListNode node={child} item={item.extend(i)} />
-			</div>
+            </div>
-		{/each}
+        {/each}
-	{/if}
+    {/if}
 </div>
 
 {#if node instanceof GPXFile && item instanceof ListFileItem}
-	{#if !waypointRoot}
+    {#if !waypointRoot}
-		<svelte:self {node} {item} waypointRoot={true} />
+        <FileListNodeContent {node} {item} waypointRoot={true} />
-	{/if}
+    {/if}
 {/if}
 
 <style lang="postcss">
-	.sortable > div {
+    @reference "../../../app.css";
-		@apply rounded-md;
-		@apply h-fit;
-		@apply leading-none;
-	}
 
-	.vertical :global(button) {
+    .sortable > div {
-		@apply hover:bg-muted;
+        @apply rounded-md;
-	}
+        @apply h-fit;
+        @apply leading-none;
+    }
 
-	.vertical :global(.sortable-selected button) {
+    .vertical :global(button) {
-		@apply hover:bg-accent;
+        @apply hover:bg-[var(--selection)];
-	}
+    }
 
-	.vertical :global(.sortable-selected) {
+    .vertical :global(.sortable-selected) {
-		@apply bg-accent;
+        @apply bg-[var(--selection)];
-	}
+    }
 
-	.horizontal :global(button) {
+    .horizontal :global(button) {
-		@apply bg-accent;
+        @apply bg-[var(--selection)];
-		@apply hover:bg-muted;
+        @apply hover:bg-background;
-	}
+    }
 
-	.horizontal :global(.sortable-selected button) {
+    .horizontal :global(.sortable-selected button) {
-		@apply bg-background;
+        @apply bg-background;
-	}
+    }
 </style>

website/src/lib/components/file-list/FileListNodeLabel.svelte

@@ -1,321 +1,316 @@
 <script lang="ts">
-	import { Button } from '$lib/components/ui/button';
+    import { Button } from '$lib/components/ui/button';
-	import * as ContextMenu from '$lib/components/ui/context-menu';
+    import * as ContextMenu from '$lib/components/ui/context-menu';
-	import Shortcut from '$lib/components/Shortcut.svelte';
+    import Shortcut from '$lib/components/Shortcut.svelte';
-	import { dbUtils, getFile } from '$lib/db';
+    import {
-	import {
+        Copy,
-		Copy,
+        Info,
-		Info,
+        MapPin,
-		MapPin,
+        PaintBucket,
-		PaintBucket,
+        Plus,
-		Plus,
+        Trash2,
-		Trash2,
+        Waypoints,
-		Waypoints,
+        Eye,
-		Eye,
+        EyeOff,
-		EyeOff,
+        ClipboardCopy,
-		ClipboardCopy,
+        ClipboardPaste,
-		ClipboardPaste,
+        Maximize,
-		Scissors,
+        Scissors,
-		FileStack,
+        FileStack,
-		FileX
+    } from '@lucide/svelte';
-	} from 'lucide-svelte';
+    import {
-	import {
+        ListFileItem,
-		ListFileItem,
+        ListLevel,
-		ListLevel,
+        ListTrackItem,
-		ListTrackItem,
+        ListWaypointItem,
-		ListWaypointItem,
+        type ListItem,
-		allowedPastes,
+    } from './file-list';
-		type ListItem
+    import { getContext } from 'svelte';
-	} from './FileList';
+    import { GPXTreeElement, Track, type AnyGPXTreeElement, Waypoint, GPXFile } from 'gpx';
-	import {
+    import { i18n } from '$lib/i18n.svelte';
-		copied,
+    import MetadataDialog from '$lib/components/file-list/metadata/MetadataDialog.svelte';
-		copySelection,
+    import { editMetadata } from '$lib/components/file-list/metadata/utils.svelte';
-		cut,
+    import StyleDialog from '$lib/components/file-list/style/StyleDialog.svelte';
-		cutSelection,
+    import { editStyle } from '$lib/components/file-list/style/utils.svelte';
-		pasteSelection,
+    import { getSymbolKey, symbols } from '$lib/assets/symbols';
-		selectAll,
+    import { selection, copied, cut } from '$lib/logic/selection';
-		selectItem,
+    import { fileActions, pasteSelection } from '$lib/logic/file-actions';
-		selection
+    import { allHidden } from '$lib/logic/hidden';
-	} from './Selection';
+    import { boundsManager } from '$lib/logic/bounds';
-	import { getContext } from 'svelte';
+    import { gpxColors, gpxLayers } from '$lib/components/map/gpx-layer/gpx-layers';
-	import { get } from 'svelte/store';
+    import { fileStateCollection } from '$lib/logic/file-state';
-	import { allHidden, editMetadata, editStyle, embedding, gpxLayers, map } from '$lib/stores';
+    import { waypointPopup } from '$lib/components/map/gpx-layer/gpx-layer-popup';
-	import {
+    import { allowedPastes } from './sortable-file-list';
-		GPXTreeElement,
-		Track,
-		TrackSegment,
-		type AnyGPXTreeElement,
-		Waypoint,
-		GPXFile
-	} from 'gpx';
-	import { _ } from 'svelte-i18n';
-	import MetadataDialog from './MetadataDialog.svelte';
-	import StyleDialog from './StyleDialog.svelte';
 
-	export let node: GPXTreeElement<AnyGPXTreeElement> | Waypoint[] | Waypoint;
+    let {
-	export let item: ListItem;
+        node,
-	export let label: string | undefined;
+        item,
+        label,
+    }: {
+        node: GPXTreeElement<AnyGPXTreeElement> | Waypoint[] | Waypoint;
+        item: ListItem;
+        label: string | undefined;
+    } = $props();
 
-	let orientation = getContext<'vertical' | 'horizontal'>('orientation');
+    let orientation = getContext<'vertical' | 'horizontal'>('orientation');
+    let embedding = getContext<boolean>('embedding');
 
-	$: singleSelection = $selection.size === 1;
+    let singleSelection = $derived($selection.size === 1);
 
-	let nodeColors: string[] = [];
+    let nodeColors: string[] = $derived.by(() => {
+        let colors: string[] = [];
+        if (node) {
+            if (node instanceof GPXFile) {
+                let defaultColor = $gpxColors.get(item.getFileId());
+                let style = node.getStyle(defaultColor);
+                colors = style.color;
+            } else if (node instanceof Track) {
+                let style = node.getStyle();
+                if (
+                    style &&
+                    style['gpx_style:color'] &&
+                    !colors.includes(style['gpx_style:color'])
+                ) {
+                    colors.push(style['gpx_style:color']);
+                }
+                if (colors.length === 0) {
+                    let defaultColor = $gpxColors.get(item.getFileId());
+                    if (defaultColor) {
+                        colors.push(defaultColor);
+                    }
+                }
+            }
+        }
+        return colors;
+    });
 
-	$: if (node && $map) {
+    let symbolKey = $derived(node instanceof Waypoint ? getSymbolKey(node.sym) : undefined);
-		nodeColors = [];
 
-		if (node instanceof GPXFile) {
+    let openEditMetadata: boolean = $derived(
-			let style = node.getStyle();
+        editMetadata.current && singleSelection && $selection.has(item)
+    );
+    let openEditStyle: boolean = $derived(
+        editStyle.current &&
+            $selection.has(item) &&
+            $selection.getSelected().findIndex((i) => i.getFullId() === item.getFullId()) === 0
+    );
 
-			let layer = gpxLayers.get(item.getFileId());
+    let hidden = $derived(
-			if (layer) {
+        item.level === ListLevel.WAYPOINTS ? node._data.hiddenWpt : node._data.hidden
-				style.color.push(layer.layerColor);
+    );
-			}
-
-			style.color.forEach((c) => {
-				if (!nodeColors.includes(c)) {
-					nodeColors.push(c);
-				}
-			});
-		} else if (node instanceof Track) {
-			let style = node.getStyle();
-			if (style) {
-				if (style.color && !nodeColors.includes(style.color)) {
-					nodeColors.push(style.color);
-				}
-			}
-			if (nodeColors.length === 0) {
-				let layer = gpxLayers.get(item.getFileId());
-				if (layer) {
-					nodeColors.push(layer.layerColor);
-				}
-			}
-		}
-	}
-
-	let openEditMetadata: boolean = false;
-	let openEditStyle: boolean = false;
-
-	$: openEditMetadata = $editMetadata && singleSelection && $selection.has(item);
-	$: openEditStyle =
-		$editStyle &&
-		$selection.has(item) &&
-		$selection.getSelected().findIndex((i) => i.getFullId() === item.getFullId()) === 0;
-	$: hidden = item.level === ListLevel.WAYPOINTS ? node._data.hiddenWpt : node._data.hidden;
 </script>
 
-<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y_click_events_have_key_events -->
-<!-- svelte-ignore a11y-no-static-element-interactions -->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
 <ContextMenu.Root
-	onOpenChange={(open) => {
+    onOpenChange={(open) => {
-		if (open) {
+        if (open) {
-			if (!get(selection).has(item)) {
+            if (!$selection.has(item)) {
-				selectItem(item);
+                selection.selectItem(item);
-			}
+            }
-		}
+        }
-	}}
+    }}
 >
-	<ContextMenu.Trigger class="grow truncate">
+    <ContextMenu.Trigger class="grow truncate">
-		<Button
+        <Button
-			variant="ghost"
+            variant="ghost"
-			class="relative w-full p-0 px-1 border-none overflow-hidden focus-visible:ring-0 focus-visible:ring-offset-0 {orientation ===
+            class="relative w-full p-0 overflow-hidden border-none focus-visible:ring-0 focus-visible:ring-offset-0 flex flex-row {orientation ===
-			'vertical'
+            'vertical'
-				? 'h-fit'
+                ? 'h-7'
-				: 'h-9 px-1.5 shadow-md'} pointer-events-auto"
+                : 'h-9 px-1.5'} pointer-events-auto"
-		>
+        >
-			{#if item instanceof ListFileItem || item instanceof ListTrackItem}
+            {#if item instanceof ListFileItem || item instanceof ListTrackItem}
-				<MetadataDialog bind:open={openEditMetadata} {node} {item} />
+                <MetadataDialog bind:open={openEditMetadata} {node} {item} />
-				<StyleDialog bind:open={openEditStyle} {item} />
+                <StyleDialog bind:open={openEditStyle} {item} />
-			{/if}
+            {/if}
-			{#if item.level === ListLevel.FILE || item.level === ListLevel.TRACK}
+            {#if item.level === ListLevel.FILE || item.level === ListLevel.TRACK}
-				<div
+                <div
-					class="absolute {orientation === 'vertical'
+                    class="absolute {orientation === 'vertical'
-						? 'top-0 bottom-0 right-1 w-1'
+                        ? 'top-0 bottom-0 right-0 w-1'
-						: 'top-0 h-1 left-0 right-0'}"
+                        : 'top-0 h-1 left-0 right-0'}"
-					style="background:linear-gradient(to {orientation === 'vertical'
+                    style="background:linear-gradient(to {orientation === 'vertical'
-						? 'bottom'
+                        ? 'bottom'
-						: 'right'},{nodeColors
+                        : 'right'},{nodeColors
-						.map(
+                        .map(
-							(c, i) =>
+                            (c, i) =>
-								`${c} ${Math.floor((100 * i) / nodeColors.length)}% ${Math.floor((100 * (i + 1)) / nodeColors.length)}%`
+                                `${c} ${Math.floor((100 * i) / nodeColors.length)}% ${Math.floor((100 * (i + 1)) / nodeColors.length)}%`
-						)
+                        )
-						.join(',')})"
+                        .join(',')})"
-				/>
+                ></div>
-			{/if}
+            {/if}
-			<span
+            <span
-				class="w-full text-left truncate py-1 flex flex-row items-center {hidden
+                class="grow text-left truncate ml-1 flex flex-row items-center {hidden
-					? 'text-muted-foreground'
+                    ? 'text-muted-foreground'
-					: ''} {$cut && $copied?.some((i) => i.getFullId() === item.getFullId())
+                    : ''} {$cut && $copied?.some((i) => i.getFullId() === item.getFullId())
-					? 'text-muted-foreground'
+                    ? 'text-muted-foreground'
-					: ''}"
+                    : ''}"
-				on:contextmenu={(e) => {
+                oncontextmenu={(e) => {
-					if ($embedding) {
+                    if (embedding) {
-						e.preventDefault();
+                        e.preventDefault();
-						e.stopPropagation();
+                        e.stopPropagation();
-						return;
+                        return;
-					}
+                    }
-					if (e.ctrlKey) {
+                    if (e.ctrlKey) {
-						// Add to selection instead of opening context menu
+                        // Add to selection instead of opening context menu
-						e.preventDefault();
+                        e.preventDefault();
-						e.stopPropagation();
+                        e.stopPropagation();
-						$selection.toggle(item);
+                        $selection.toggle(item);
-						$selection = $selection;
+                        $selection = $selection;
-					}
+                    }
-				}}
+                }}
-				on:mouseenter={() => {
+                onmouseenter={() => {
-					if (item instanceof ListWaypointItem) {
+                    if (item instanceof ListWaypointItem) {
-						let layer = gpxLayers.get(item.getFileId());
+                        let layer = gpxLayers.getLayer(item.getFileId());
-						let file = getFile(item.getFileId());
+                        let file = fileStateCollection.getFile(item.getFileId());
-						if (layer && file) {
+                        if (layer && file) {
-							let waypoint = file.wpt[item.getWaypointIndex()];
+                            let waypoint = file.wpt[item.getWaypointIndex()];
-							if (waypoint) {
+                            if (waypoint && !waypoint._data.hidden) {
-								layer.showWaypointPopup(waypoint);
+                                waypointPopup?.setItem({
-							}
+                                    item: waypoint,
-						}
+                                    fileId: item.getFileId(),
-					}
+                                });
-				}}
+                            }
-				on:mouseleave={() => {
+                        }
-					if (item instanceof ListWaypointItem) {
+                    }
-						let layer = gpxLayers.get(item.getFileId());
+                }}
-						if (layer) {
+                onmouseleave={() => {
-							layer.hideWaypointPopup();
+                    if (item instanceof ListWaypointItem) {
-						}
+                        let layer = gpxLayers.getLayer(item.getFileId());
-					}
+                        if (layer) {
-				}}
+                            waypointPopup?.setItem(null);
-			>
+                        }
-				{#if item.level === ListLevel.SEGMENT}
+                    }
-					<Waypoints size="16" class="mr-1 shrink-0" />
+                }}
-				{:else if item.level === ListLevel.WAYPOINT}
+            >
-					<MapPin size="16" class="mr-1 shrink-0" />
+                {#if item.level === ListLevel.SEGMENT}
-				{/if}
+                    <Waypoints size="16" class="mx-1 shrink-0" />
-				<span class="grow select-none truncate {orientation === 'vertical' ? 'last:mr-2' : ''}">
+                {:else if item.level === ListLevel.WAYPOINT}
-					{label}
+                    {#if symbolKey && symbols[symbolKey].icon}
-				</span>
+                        {@const SymbolIcon = symbols[symbolKey].icon}
-				{#if hidden}
+                        <SymbolIcon size="16" class="mx-1 shrink-0" />
-					<EyeOff
+                    {:else}
-						size="12"
+                        <MapPin size="16" class="mx-1 shrink-0" />
-						class="shrink-0 mt-1 ml-1 {orientation === 'vertical' ? 'mr-2' : ''} {item.level ===
+                    {/if}
-							ListLevel.SEGMENT || item.level === ListLevel.WAYPOINT
+                {/if}
-							? 'mr-3'
+                <span
-							: ''}"
+                    class="grow select-none truncate {orientation === 'vertical'
-					/>
+                        ? 'last:mr-2'
-				{/if}
+                        : ''}"
-			</span>
+                >
-		</Button>
+                    {label}
-	</ContextMenu.Trigger>
+                </span>
-	<ContextMenu.Content>
+                {#if hidden}
-		{#if item instanceof ListFileItem || item instanceof ListTrackItem}
+                    <EyeOff
-			<ContextMenu.Item disabled={!singleSelection} on:click={() => ($editMetadata = true)}>
+                        size="10"
-				<Info size="16" class="mr-1" />
+                        class="shrink-0 size-3.5 ml-1 {orientation === 'vertical'
-				{$_('menu.metadata.button')}
+                            ? 'mr-3'
-				<Shortcut key="I" ctrl={true} />
+                            : 'mt-0.5'}"
-			</ContextMenu.Item>
+                    />
-			<ContextMenu.Item on:click={() => ($editStyle = true)}>
+                {/if}
-				<PaintBucket size="16" class="mr-1" />
+            </span>
-				{$_('menu.style.button')}
+        </Button>
-			</ContextMenu.Item>
+    </ContextMenu.Trigger>
-		{/if}
+    <ContextMenu.Content>
-		<ContextMenu.Item
+        {#if item instanceof ListFileItem || item instanceof ListTrackItem}
-			on:click={() => {
+            <ContextMenu.Item
-				if ($allHidden) {
+                disabled={!singleSelection}
-					dbUtils.setHiddenToSelection(false);
+                onclick={() => (editMetadata.current = true)}
-				} else {
+            >
-					dbUtils.setHiddenToSelection(true);
+                <Info size="16" />
-				}
+                {i18n._('menu.metadata.button')}
-			}}
+                <Shortcut key="I" ctrl={true} />
-		>
+            </ContextMenu.Item>
-			{#if $allHidden}
+            <ContextMenu.Item onclick={() => (editStyle.current = true)}>
-				<Eye size="16" class="mr-1" />
+                <PaintBucket size="16" />
-				{$_('menu.unhide')}
+                {i18n._('menu.style.button')}
-			{:else}
+            </ContextMenu.Item>
-				<EyeOff size="16" class="mr-1" />
+        {/if}
-				{$_('menu.hide')}
+        <ContextMenu.Item
-			{/if}
+            onclick={() => {
-			<Shortcut key="H" ctrl={true} />
+                if ($allHidden) {
-		</ContextMenu.Item>
+                    fileActions.setHiddenToSelection(false);
-		<ContextMenu.Separator />
+                } else {
-		{#if orientation === 'vertical'}
+                    fileActions.setHiddenToSelection(true);
-			{#if item instanceof ListFileItem}
+                }
-				<ContextMenu.Item
+            }}
-					disabled={!singleSelection}
+        >
-					on:click={() =>
+            {#if $allHidden}
-						dbUtils.applyToFile(item.getFileId(), (file) =>
+                <Eye size="16" />
-							file.replaceTracks(file.trk.length, file.trk.length, [new Track()])
+                {i18n._('menu.unhide')}
-						)}
+            {:else}
-				>
+                <EyeOff size="16" />
-					<Plus size="16" class="mr-1" />
+                {i18n._('menu.hide')}
-					{$_('menu.new_track')}
+            {/if}
-				</ContextMenu.Item>
+            <Shortcut key="H" ctrl={true} />
-				<ContextMenu.Separator />
+        </ContextMenu.Item>
-			{:else if item instanceof ListTrackItem}
+        <ContextMenu.Separator />
-				<ContextMenu.Item
+        {#if orientation === 'vertical'}
-					disabled={!singleSelection}
+            {#if item instanceof ListFileItem}
-					on:click={() => {
+                <ContextMenu.Item
-						let trackIndex = item.getTrackIndex();
+                    disabled={!singleSelection}
-						dbUtils.applyToFile(item.getFileId(), (file) =>
+                    onclick={() => fileActions.addNewTrack(item.getFileId())}
-							file.replaceTrackSegments(
+                >
-								trackIndex,
+                    <Plus size="16" />
-								file.trk[trackIndex].trkseg.length,
+                    {i18n._('menu.new_track')}
-								file.trk[trackIndex].trkseg.length,
+                </ContextMenu.Item>
-								[new TrackSegment()]
+                <ContextMenu.Separator />
-							)
+            {:else if item instanceof ListTrackItem}
-						);
+                <ContextMenu.Item
-					}}
+                    disabled={!singleSelection}
-				>
+                    onclick={() =>
-					<Plus size="16" class="mr-1" />
+                        fileActions.addNewSegment(item.getFileId(), item.getTrackIndex())}
-					{$_('menu.new_segment')}
+                >
-				</ContextMenu.Item>
+                    <Plus size="16" />
-				<ContextMenu.Separator />
+                    {i18n._('menu.new_segment')}
-			{/if}
+                </ContextMenu.Item>
-		{/if}
+                <ContextMenu.Separator />
-		{#if item.level !== ListLevel.WAYPOINTS}
+            {/if}
-			<ContextMenu.Item on:click={selectAll}>
+        {/if}
-				<FileStack size="16" class="mr-1" />
+        {#if item.level !== ListLevel.WAYPOINTS}
-				{$_('menu.select_all')}
+            <ContextMenu.Item onclick={() => selection.selectAll()}>
-				<Shortcut key="A" ctrl={true} />
+                <FileStack size="16" />
-			</ContextMenu.Item>
+                {i18n._('menu.select_all')}
-			<ContextMenu.Separator />
+                <Shortcut key="A" ctrl={true} />
-		{/if}
+            </ContextMenu.Item>
-		{#if orientation === 'vertical'}
+        {/if}
-			<ContextMenu.Item on:click={dbUtils.duplicateSelection}>
+        <ContextMenu.Item onclick={() => boundsManager.centerMapOnSelection()}>
-				<Copy size="16" class="mr-1" />
+            <Maximize size="16" />
-				{$_('menu.duplicate')}
+            {i18n._('menu.center')}
-				<Shortcut key="D" ctrl={true} /></ContextMenu.Item
+            <Shortcut key="⏎" ctrl={true} />
-			>
+        </ContextMenu.Item>
-			{#if orientation === 'vertical'}
+        <ContextMenu.Separator />
-				<ContextMenu.Item on:click={copySelection}>
+        <ContextMenu.Item onclick={fileActions.duplicateSelection}>
-					<ClipboardCopy size="16" class="mr-1" />
+            <Copy size="16" />
-					{$_('menu.copy')}
+            {i18n._('menu.duplicate')}
-					<Shortcut key="C" ctrl={true} />
+            <Shortcut key="D" ctrl={true} />
-				</ContextMenu.Item>
+        </ContextMenu.Item>
-				<ContextMenu.Item on:click={cutSelection}>
+        {#if orientation === 'vertical'}
-					<Scissors size="16" class="mr-1" />
+            <ContextMenu.Item onclick={() => selection.copySelection()}>
-					{$_('menu.cut')}
+                <ClipboardCopy size="16" />
-					<Shortcut key="X" ctrl={true} />
+                {i18n._('menu.copy')}
-				</ContextMenu.Item>
+                <Shortcut key="C" ctrl={true} />
-				<ContextMenu.Item
+            </ContextMenu.Item>
-					disabled={$copied === undefined ||
+            <ContextMenu.Item onclick={() => selection.cutSelection()}>
-						$copied.length === 0 ||
+                <Scissors size="16" />
-						!allowedPastes[$copied[0].level].includes(item.level)}
+                {i18n._('menu.cut')}
-					on:click={pasteSelection}
+                <Shortcut key="X" ctrl={true} />
-				>
+            </ContextMenu.Item>
-					<ClipboardPaste size="16" class="mr-1" />
+            <ContextMenu.Item
-					{$_('menu.paste')}
+                disabled={$copied === undefined ||
-					<Shortcut key="V" ctrl={true} />
+                    $copied.length === 0 ||
-				</ContextMenu.Item>
+                    !allowedPastes[$copied[0].level].includes(item.level)}
-			{/if}
+                onclick={pasteSelection}
-			<ContextMenu.Separator />
+            >
-		{/if}
+                <ClipboardPaste size="16" />
-		<ContextMenu.Item on:click={dbUtils.deleteSelection}>
+                {i18n._('menu.paste')}
-			{#if item instanceof ListFileItem}
+                <Shortcut key="V" ctrl={true} />
-				<FileX size="16" class="mr-1" />
+            </ContextMenu.Item>
-				{$_('menu.close')}
+        {/if}
-			{:else}
+        <ContextMenu.Separator />
-				<Trash2 size="16" class="mr-1" />
+        <ContextMenu.Item onclick={fileActions.deleteSelection}>
-				{$_('menu.delete')}
+            <Trash2 size="16" />
-			{/if}
+            {i18n._('menu.delete')}
-			<Shortcut key="⌫" ctrl={true} />
+            <Shortcut key="⌫" ctrl={true} />
-		</ContextMenu.Item>
+        </ContextMenu.Item>
-	</ContextMenu.Content>
+    </ContextMenu.Content>
 </ContextMenu.Root>

website/src/lib/components/file-list/FileListNodeStore.svelte

@@ -1,23 +1,27 @@
 <script lang="ts">
-	import CollapsibleTree from '$lib/components/collapsible-tree/CollapsibleTree.svelte';
+    import CollapsibleTree from '$lib/components/collapsible-tree/CollapsibleTree.svelte';
-	import FileListNode from '$lib/components/file-list/FileListNode.svelte';
+    import FileListNode from '$lib/components/file-list/FileListNode.svelte';
 
-	import type { GPXFileWithStatistics } from '$lib/db';
+    import { getContext } from 'svelte';
-	import { getContext } from 'svelte';
+    import type { Readable } from 'svelte/store';
-	import type { Readable } from 'svelte/store';
+    import { ListFileItem } from './file-list';
-	import { ListFileItem } from './FileList';
+    import type { GPXFileWithStatistics } from '$lib/logic/statistics-tree';
 
-	export let file: Readable<GPXFileWithStatistics | undefined>;
+    let {
+        file,
+    }: {
+        file: Readable<GPXFileWithStatistics | undefined>;
+    } = $props();
 
-	let recursive = getContext<boolean>('recursive');
+    let recursive = getContext<boolean>('recursive');
 </script>
 
 {#if $file}
-	{#if recursive}
+    {#if recursive}
-		<CollapsibleTree side="left" defaultState="closed" slotInsideTrigger={false}>
+        <CollapsibleTree side="left" defaultState="closed" slotInsideTrigger={false}>
-			<FileListNode node={$file.file} item={new ListFileItem($file.file._data.id)} />
+            <FileListNode node={$file.file} item={new ListFileItem($file.file._data.id)} />
-		</CollapsibleTree>
+        </CollapsibleTree>
-	{:else}
+    {:else}
-		<FileListNode node={$file.file} item={new ListFileItem($file.file._data.id)} />
+        <FileListNode node={$file.file} item={new ListFileItem($file.file._data.id)} />
-	{/if}
+    {/if}
 {/if}

website/src/lib/components/file-list/MetadataDialog.svelte

@@ -1,62 +0,0 @@
-<script lang="ts">
-	import { Button } from '$lib/components/ui/button';
-	import { Input } from '$lib/components/ui/input';
-	import { Textarea } from '$lib/components/ui/textarea';
-	import { Label } from '$lib/components/ui/label/index.js';
-	import * as Popover from '$lib/components/ui/popover';
-	import { dbUtils } from '$lib/db';
-	import { Save } from 'lucide-svelte';
-	import { ListFileItem, ListTrackItem, type ListItem } from './FileList';
-	import { GPXTreeElement, Track, type AnyGPXTreeElement, Waypoint, GPXFile } from 'gpx';
-	import { _ } from 'svelte-i18n';
-	import { editMetadata } from '$lib/stores';
-
-	export let node: GPXTreeElement<AnyGPXTreeElement> | Waypoint[] | Waypoint;
-	export let item: ListItem;
-	export let open = false;
-
-	let name: string =
-		node instanceof GPXFile
-			? node.metadata.name ?? ''
-			: node instanceof Track
-				? node.name ?? ''
-				: '';
-	let description: string =
-		node instanceof GPXFile
-			? node.metadata.desc ?? ''
-			: node instanceof Track
-				? node.desc ?? ''
-				: '';
-
-	$: if (!open) {
-		$editMetadata = false;
-	}
-</script>
-
-<Popover.Root bind:open>
-	<Popover.Trigger />
-	<Popover.Content side="top" sideOffset={22} alignOffset={30} class="flex flex-col gap-3">
-		<Label for="name">{$_('menu.metadata.name')}</Label>
-		<Input bind:value={name} id="name" class="font-semibold h-8" />
-		<Label for="description">{$_('menu.metadata.description')}</Label>
-		<Textarea bind:value={description} id="description" />
-		<Button
-			variant="outline"
-			on:click={() => {
-				dbUtils.applyToFile(item.getFileId(), (file) => {
-					if (item instanceof ListFileItem && node instanceof GPXFile) {
-						file.metadata.name = name;
-						file.metadata.desc = description;
-					} else if (item instanceof ListTrackItem && node instanceof Track) {
-						file.trk[item.getTrackIndex()].name = name;
-						file.trk[item.getTrackIndex()].desc = description;
-					}
-				});
-				open = false;
-			}}
-		>
-			<Save size="16" class="mr-1" />
-			{$_('menu.metadata.save')}
-		</Button>
-	</Popover.Content>
-</Popover.Root>

website/src/lib/components/file-list/Selection.ts

@@ -1,315 +0,0 @@
-import { get, writable } from "svelte/store";
-import { ListFileItem, ListItem, ListRootItem, ListTrackItem, ListTrackSegmentItem, ListWaypointItem, ListLevel, sortItems, ListWaypointsItem, moveItems } from "./FileList";
-import { fileObservers, getFile, getFileIds, settings } from "$lib/db";
-
-export class SelectionTreeType {
-    item: ListItem;
-    selected: boolean;
-    children: {
-        [key: string | number]: SelectionTreeType
-    };
-    size: number = 0;
-
-    constructor(item: ListItem) {
-        this.item = item;
-        this.selected = false;
-        this.children = {};
-    }
-
-    clear() {
-        this.selected = false;
-        for (let key in this.children) {
-            this.children[key].clear();
-        }
-        this.size = 0;
-    }
-
-    _setOrToggle(item: ListItem, value?: boolean) {
-        if (item.level === this.item.level) {
-            let newSelected = value === undefined ? !this.selected : value;
-            if (this.selected !== newSelected) {
-                this.selected = newSelected;
-                this.size += this.selected ? 1 : -1;
-            }
-        } else {
-            let id = item.getIdAtLevel(this.item.level);
-            if (id !== undefined) {
-                if (!this.children.hasOwnProperty(id)) {
-                    this.children[id] = new SelectionTreeType(this.item.extend(id));
-                }
-                this.size -= this.children[id].size;
-                this.children[id]._setOrToggle(item, value);
-                this.size += this.children[id].size;
-            }
-        }
-    }
-
-    set(item: ListItem, value: boolean) {
-        this._setOrToggle(item, value);
-    }
-
-    toggle(item: ListItem) {
-        this._setOrToggle(item);
-    }
-
-    has(item: ListItem): boolean {
-        if (item.level === this.item.level) {
-            return this.selected;
-        } else {
-            let id = item.getIdAtLevel(this.item.level);
-            if (id !== undefined) {
-                if (this.children.hasOwnProperty(id)) {
-                    return this.children[id].has(item);
-                }
-            }
-        }
-        return false;
-    }
-
-    hasAnyParent(item: ListItem, self: boolean = true): boolean {
-        if (this.selected && this.item.level <= item.level && (self || this.item.level < item.level)) {
-            return this.selected;
-        }
-        let id = item.getIdAtLevel(this.item.level);
-        if (id !== undefined) {
-            if (this.children.hasOwnProperty(id)) {
-                return this.children[id].hasAnyParent(item, self);
-            }
-        }
-        return false;
-    }
-
-    hasAnyChildren(item: ListItem, self: boolean = true, ignoreIds?: (string | number)[]): boolean {
-        if (this.selected && this.item.level >= item.level && (self || this.item.level > item.level)) {
-            return this.selected;
-        }
-        let id = item.getIdAtLevel(this.item.level);
-        if (id !== undefined) {
-            if (ignoreIds === undefined || ignoreIds.indexOf(id) === -1) {
-                if (this.children.hasOwnProperty(id)) {
-                    return this.children[id].hasAnyChildren(item, self, ignoreIds);
-                }
-            }
-        } else {
-            for (let key in this.children) {
-                if (ignoreIds === undefined || ignoreIds.indexOf(key) === -1) {
-                    if (this.children[key].hasAnyChildren(item, self, ignoreIds)) {
-                        return true;
-                    }
-                }
-            }
-        }
-        return false;
-    }
-
-    getSelected(selection: ListItem[] = []): ListItem[] {
-        if (this.selected) {
-            selection.push(this.item);
-        }
-        for (let key in this.children) {
-            this.children[key].getSelected(selection);
-        }
-        return selection;
-    }
-
-    forEach(callback: (item: ListItem) => void) {
-        if (this.selected) {
-            callback(this.item);
-        }
-        for (let key in this.children) {
-            this.children[key].forEach(callback);
-        }
-    }
-
-    getChild(id: string | number): SelectionTreeType | undefined {
-        return this.children[id];
-    }
-
-    deleteChild(id: string | number) {
-        if (this.children.hasOwnProperty(id)) {
-            this.size -= this.children[id].size;
-            delete this.children[id];
-        }
-    }
-};
-
-export const selection = writable<SelectionTreeType>(new SelectionTreeType(new ListRootItem()));
-
-export function selectItem(item: ListItem) {
-    selection.update(($selection) => {
-        $selection.clear();
-        $selection.set(item, true);
-        return $selection;
-    });
-}
-
-export function selectFile(fileId: string) {
-    selectItem(new ListFileItem(fileId));
-}
-
-export function addSelectItem(item: ListItem) {
-    selection.update(($selection) => {
-        $selection.toggle(item);
-        return $selection;
-    });
-}
-
-export function addSelectFile(fileId: string) {
-    addSelectItem(new ListFileItem(fileId));
-}
-
-export function selectAll() {
-    selection.update(($selection) => {
-        let item: ListItem = new ListRootItem();
-        $selection.forEach((i) => {
-            item = i;
-        });
-
-        if (item instanceof ListRootItem || item instanceof ListFileItem) {
-            $selection.clear();
-            get(fileObservers).forEach((_file, fileId) => {
-                $selection.set(new ListFileItem(fileId), true);
-            });
-        } else if (item instanceof ListTrackItem) {
-            let file = getFile(item.getFileId());
-            if (file) {
-                file.trk.forEach((_track, trackId) => {
-                    $selection.set(new ListTrackItem(item.getFileId(), trackId), true);
-                });
-            }
-        } else if (item instanceof ListTrackSegmentItem) {
-            let file = getFile(item.getFileId());
-            if (file) {
-                file.trk[item.getTrackIndex()].trkseg.forEach((_segment, segmentId) => {
-                    $selection.set(new ListTrackSegmentItem(item.getFileId(), item.getTrackIndex(), segmentId), true);
-                });
-            }
-        } else if (item instanceof ListWaypointItem) {
-            let file = getFile(item.getFileId());
-            if (file) {
-                file.wpt.forEach((_waypoint, waypointId) => {
-                    $selection.set(new ListWaypointItem(item.getFileId(), waypointId), true);
-                });
-            }
-        }
-
-        return $selection;
-    });
-}
-
-export function getOrderedSelection(reverse: boolean = false): ListItem[] {
-    let selected: ListItem[] = [];
-    applyToOrderedSelectedItemsFromFile((fileId, level, items) => {
-        selected.push(...items);
-    }, reverse);
-    return selected;
-}
-
-export function applyToOrderedItemsFromFile(selectedItems: ListItem[], callback: (fileId: string, level: ListLevel | undefined, items: ListItem[]) => void, reverse: boolean = true) {
-    get(settings.fileOrder).forEach((fileId) => {
-        let level: ListLevel | undefined = undefined;
-        let items: ListItem[] = [];
-        selectedItems.forEach((item) => {
-            if (item.getFileId() === fileId) {
-                level = item.level;
-                if (item instanceof ListFileItem || item instanceof ListTrackItem || item instanceof ListTrackSegmentItem || item instanceof ListWaypointsItem || item instanceof ListWaypointItem) {
-                    items.push(item);
-                }
-            }
-        });
-
-        if (items.length > 0) {
-            sortItems(items, reverse);
-            callback(fileId, level, items);
-        }
-    });
-}
-
-export function applyToOrderedSelectedItemsFromFile(callback: (fileId: string, level: ListLevel | undefined, items: ListItem[]) => void, reverse: boolean = true) {
-    applyToOrderedItemsFromFile(get(selection).getSelected(), callback, reverse);
-}
-
-export const copied = writable<ListItem[] | undefined>(undefined);
-export const cut = writable(false);
-
-export function copySelection(): boolean {
-    let selected = get(selection).getSelected();
-    if (selected.length > 0) {
-        copied.set(selected);
-        cut.set(false);
-        return true;
-    }
-    return false;
-}
-
-export function cutSelection() {
-    if (copySelection()) {
-        cut.set(true);
-    }
-}
-
-function resetCopied() {
-    copied.set(undefined);
-    cut.set(false);
-}
-
-export function pasteSelection() {
-    let fromItems = get(copied);
-    if (fromItems === undefined || fromItems.length === 0) {
-        return;
-    }
-
-    let selected = get(selection).getSelected();
-    if (selected.length === 0) {
-        selected = [new ListRootItem()];
-    }
-
-    let fromParent = fromItems[0].getParent();
-    let toParent = selected[selected.length - 1];
-
-    let startIndex: number | undefined = undefined;
-
-    if (fromItems[0].level === toParent.level) {
-        if (toParent instanceof ListTrackItem || toParent instanceof ListTrackSegmentItem || toParent instanceof ListWaypointItem) {
-            startIndex = toParent.getId() + 1;
-        }
-        toParent = toParent.getParent();
-    }
-
-    let toItems: ListItem[] = [];
-    if (toParent.level === ListLevel.ROOT) {
-        let fileIds = getFileIds(fromItems.length);
-        fileIds.forEach((fileId) => {
-            toItems.push(new ListFileItem(fileId));
-        });
-    } else {
-        let toFile = getFile(toParent.getFileId());
-        if (toFile) {
-            fromItems.forEach((item, index) => {
-                if (toParent instanceof ListFileItem) {
-                    if (item instanceof ListTrackItem || item instanceof ListTrackSegmentItem) {
-                        toItems.push(new ListTrackItem(toParent.getFileId(), (startIndex ?? toFile.trk.length) + index));
-                    } else if (item instanceof ListWaypointsItem) {
-                        toItems.push(new ListWaypointsItem(toParent.getFileId()));
-                    } else if (item instanceof ListWaypointItem) {
-                        toItems.push(new ListWaypointItem(toParent.getFileId(), (startIndex ?? toFile.wpt.length) + index));
-                    }
-                } else if (toParent instanceof ListTrackItem) {
-                    if (item instanceof ListTrackSegmentItem) {
-                        let toTrackIndex = toParent.getTrackIndex();
-                        toItems.push(new ListTrackSegmentItem(toParent.getFileId(), toTrackIndex, (startIndex ?? toFile.trk[toTrackIndex].trkseg.length) + index));
-                    }
-                } else if (toParent instanceof ListWaypointsItem) {
-                    if (item instanceof ListWaypointItem) {
-                        toItems.push(new ListWaypointItem(toParent.getFileId(), (startIndex ?? toFile.wpt.length) + index));
-                    }
-                }
-            });
-        }
-    }
-
-    if (fromItems.length === toItems.length) {
-        moveItems(fromParent, toParent, fromItems, toItems, get(cut));
-        resetCopied();
-    }
-}