New translations settings.mdx (Chinese Simplified)

* New translations settings.mdx (Turkish)

* New translations edit.mdx (Turkish)

* New translations file.mdx (Turkish)

* New translations view.mdx (Turkish)

* New translations files-and-stats.mdx (Turkish)

* New translations gpx.mdx (Turkish)

* New translations map-controls.mdx (Turkish)

* New translations routing.mdx (Turkish)

* New translations files-and-stats.mdx (French)

* New translations files-and-stats.mdx (Spanish)

* New translations files-and-stats.mdx (Catalan)

* New translations files-and-stats.mdx (Czech)

* New translations files-and-stats.mdx (German)

* New translations files-and-stats.mdx (Basque)

* New translations files-and-stats.mdx (Italian)

* New translations files-and-stats.mdx (Dutch)

* New translations files-and-stats.mdx (Chinese Simplified)

.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"
+    }
+  }
+  

gpx/.prettierignore

@@ -0,0 +1 @@
+package-lock.json

gpx/package.json

@@ -12,16 +12,20 @@
     "private": true,
     "dependencies": {
         "fast-xml-parser": "^4.5.0",
-        "immer": "^10.1.1",
+        "immer": "^10.1.1"
-        "ts-node": "^10.9.2"
     },
     "devDependencies": {
         "@types/geojson": "^7946.0.14",
         "@types/node": "^20.16.10",
+        "@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"
+        "postinstall": "npm run build",
+        "lint": "prettier --check . && eslint .",
+        "format": "prettier --write ."
     }
 }

gpx/src/index.ts

@@ -2,4 +2,3 @@ export * from './gpx';
 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:atemp' || tagName === 'gpxtpx:hr' || tagName === 'gpxtpx:cad' || 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,25 +114,32 @@ 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';
@@ -93,19 +150,24 @@ export function buildGPX(file: GPXFile, exclude: string[]): string {
     }
 
     return builder.build({
-        "?xml": {
+        '?xml': {
             attributes: {
-                version: "1.0",
+                version: '1.0',
-                encoding: "UTF-8",
+                encoding: 'UTF-8',
-            }
+            },
         },
-        gpx: removeEmptyElements(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)) {
+        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]);
@@ -115,4 +177,4 @@ function removeEmptyElements(obj: GPXFileType): GPXFileType {
         }
     }
     return obj;
-}
+}

gpx/src/simplify.ts

@@ -1,33 +1,48 @@
-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[], epsilon: number = 50, measure: (a: TrackPoint, b: TrackPoint, c: TrackPoint) => number = crossarcDistance): SimplifiedTrackPoint[] {
+export function ramerDouglasPeucker(
+    points: TrackPoint[],
+    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,12 +60,20 @@ 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,
+    point2: TrackPoint,
+    point3: TrackPoint | Coordinates
+): number {
+    return crossarc(
+        point1.getCoordinates(),
+        point2.getCoordinates(),
+        point3 instanceof TrackPoint ? point3.getCoordinates() : point3
+    );
 }
 
 function crossarc(coord1: Coordinates, coord2: Coordinates, coord3: Coordinates): number {
-    // Calculates the shortest distance in meters 
+    // Calculates the shortest distance in meters
     // between an arc (defined by p1 and p2) and a third point, p3.
     // Input lat1,lon1,lat2,lon2,lat3,lon3 in degrees.
 
@@ -74,7 +97,7 @@ function crossarc(coord1: Coordinates, coord2: Coordinates, coord3: Coordinates)
     }
 
     // Is relative bearing obtuse?
-    if (diff > (Math.PI / 2)) {
+    if (diff > Math.PI / 2) {
         return dis13;
     }
 
@@ -83,7 +106,8 @@ function crossarc(coord1: Coordinates, coord2: Coordinates, coord3: Coordinates)
 
     // Is p4 beyond the arc?
     let dis12 = distance(lat1, lon1, lat2, lon2);
-    let dis14 = Math.acos(Math.cos(dis13 / earthRadius) / Math.cos(dxt / earthRadius)) * earthRadius;
+    let dis14 =
+        Math.acos(Math.cos(dis13 / earthRadius) / Math.cos(dxt / earthRadius)) * earthRadius;
     if (dis14 > dis12) {
         return distance(lat2, lon2, lat3, lon3);
     } else {
@@ -93,18 +117,32 @@ function crossarc(coord1: Coordinates, coord2: Coordinates, coord3: Coordinates)
 
 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;
+    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),
+    return Math.atan2(
-        Math.cos(latA) * Math.sin(latB) - Math.sin(latA) * Math.cos(latB) * Math.cos(lonB - lonA));
+        Math.sin(lonB - lonA) * Math.cos(latB),
+        Math.cos(latA) * Math.sin(latB) - Math.sin(latA) * Math.cos(latB) * Math.cos(lonB - lonA)
+    );
 }
 
-export function projectedPoint(point1: TrackPoint, point2: TrackPoint, point3: TrackPoint | Coordinates): Coordinates {
+export function projectedPoint(
-    return projected(point1.getCoordinates(), point2.getCoordinates(), point3 instanceof TrackPoint ? point3.getCoordinates() : point3);
+    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 {
@@ -132,7 +170,7 @@ function projected(coord1: Coordinates, coord2: Coordinates, coord3: Coordinates
     }
 
     // Is relative bearing obtuse?
-    if (diff > (Math.PI / 2)) {
+    if (diff > Math.PI / 2) {
         return coord1;
     }
 
@@ -141,15 +179,23 @@ function projected(coord1: Coordinates, coord2: Coordinates, coord3: Coordinates
 
     // Is p4 beyond the arc?
     let dis12 = distance(lat1, lon1, lat2, lon2);
-    let dis14 = Math.acos(Math.cos(dis13 / earthRadius) / Math.cos(dxt / earthRadius)) * earthRadius;
+    let dis14 =
+        Math.acos(Math.cos(dis13 / earthRadius) / Math.cos(dxt / earthRadius)) * earthRadius;
     if (dis14 > dis12) {
         return coord2;
     } else {
         // Determine the closest point (p4) on the great circle
         const f = dis14 / earthRadius;
-        const lat4 = Math.asin(Math.sin(lat1) * Math.cos(f) + Math.cos(lat1) * Math.sin(f) * Math.cos(bear12));
+        const lat4 = Math.asin(
-        const lon4 = lon1 + Math.atan2(Math.sin(bear12) * Math.sin(f) * Math.cos(lat1), Math.cos(f) - Math.sin(lat1) * Math.sin(lat4));
+            Math.sin(lat1) * Math.cos(f) + Math.cos(lat1) * Math.sin(f) * Math.cos(bear12)
+        );
+        const lon4 =
+            lon1 +
+            Math.atan2(
+                Math.sin(bear12) * Math.sin(f) * Math.cos(lat1),
+                Math.cos(f) - Math.sin(lat1) * Math.sin(lat4)
+            );
 
         return { lat: lat4 / rad, lon: lon4 / rad };
     }
-}
+}

gpx/src/types.ts

@@ -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 = {
@@ -93,11 +93,11 @@ export type TrackPointExtension = {
     'gpxtpx:hr'?: number;
     'gpxtpx:cad'?: number;
     'gpxtpx:Extensions'?: Record<string, string>;
-}
+};
 
 export type PowerExtension = {
     'gpxpx:PowerInWatts'?: number;
-}
+};
 
 export type Author = {
     name?: string;
@@ -114,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_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/.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/.prettierignore

@@ -2,3 +2,5 @@
 pnpm-lock.yaml
 package-lock.json
 yarn.lock
+src/lib/components/ui
+*.mdx

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,14 @@
 {
-	"$schema": "https://shadcn-svelte.com/schema.json",
+    "$schema": "https://shadcn-svelte.com/schema.json",
-	"style": "default",
+    "style": "default",
-	"tailwind": {
+    "tailwind": {
-		"config": "tailwind.config.js",
+        "config": "tailwind.config.js",
-		"css": "src/app.css",
+        "css": "src/app.css",
-		"baseColor": "slate"
+        "baseColor": "slate"
-	},
+    },
-	"aliases": {
+    "aliases": {
-		"components": "$lib/components",
+        "components": "$lib/components",
-		"utils": "$lib/utils"
+        "utils": "$lib/utils"
-	},
+    },
-	"typescript": true
+    "typescript": true
-}
+}

website/package.json

@@ -5,6 +5,7 @@
     "scripts": {
         "dev": "vite dev",
         "build": "vite build",
+        "prebuild": "npx tsx src/lib/pwa-manifest.ts",
         "postbuild": "npx tsx src/lib/sitemap.ts",
         "preview": "vite preview",
         "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
@@ -20,7 +21,7 @@
         "@sveltejs/vite-plugin-svelte": "^3.1.2",
         "@types/eslint": "^8.56.12",
         "@types/events": "^3.0.3",
-        "@types/mapbox__mapbox-gl-geocoder": "^5.0.0",
+        "@types/file-saver": "^2.0.7",
         "@types/mapbox__tilebelt": "^1.0.4",
         "@types/mapbox-gl": "^3.4.0",
         "@types/node": "^20.16.10",
@@ -35,7 +36,7 @@
         "eslint-plugin-svelte": "^2.44.1",
         "events": "^3.3.0",
         "glob": "^10.4.5",
-        "mdsvex": "^0.11.2",
+        "mdsvex": "^0.12.6",
         "postcss": "^8.4.47",
         "prettier": "^3.3.3",
         "prettier-plugin-svelte": "^3.2.7",
@@ -61,11 +62,13 @@
         "chartjs-plugin-zoom": "^2.0.1",
         "clsx": "^2.1.1",
         "dexie": "^4.0.8",
+        "file-saver": "^2.0.5",
         "gpx": "file:../gpx",
         "immer": "^10.1.1",
-        "lucide-static": "^0.427.0",
+        "jszip": "^3.10.1",
-        "lucide-svelte": "^0.427.0",
+        "lucide-static": "^0.460.0",
-        "mapbox-gl": "^3.7.0",
+        "lucide-svelte": "^0.460.1",
+        "mapbox-gl": "^3.11.1",
         "mapillary-js": "^4.1.2",
         "mode-watcher": "^0.3.1",
         "png.js": "^0.2.1",

website/postcss.config.js

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

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>
+    <head>
+        <meta charset="utf-8" />
+        <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" />
+        %sveltekit.head%
+    </head>
 
-<head>
+    <body data-sveltekit-preload-data="hover">
-    <meta charset="utf-8" />
+        <div style="display: contents">%sveltekit.body%</div>
-    <link rel="icon" href="%sveltekit.assets%/favicon.png" />
+    </body>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+</html>
-    %sveltekit.head%
-</head>
-
-<body data-sveltekit-preload-data="hover">
-    <div style="display: contents">%sveltekit.body%</div>
-</body>
-
-</html>

website/src/app.pcss

@@ -1,86 +1,86 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
- 
+
 @layer base {
-  :root {
+    :root {
-    --background: 0 0% 100%;
+        --background: 0 0% 100%;
-    --foreground: 222.2 84% 4.9%;
+        --foreground: 222.2 84% 4.9%;
- 
-    --muted: 210 40% 96.1%;
-    --muted-foreground: 215.4 16.3% 45%;
- 
-    --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;
+        --muted: 210 40% 96.1%;
+        --muted-foreground: 215.4 16.3% 45%;
 
-    --link: 0 110 180;
+        --popover: 0 0% 100%;
- 
+        --popover-foreground: 222.2 84% 4.9%;
-    --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;
+        --card: 0 0% 100%;
+        --card-foreground: 222.2 84% 4.9%;
 
-    --link: 80 190 255;
+        --border: 214.3 31.8% 91.4%;
- 
+        --input: 214.3 31.8% 91.4%;
-    --ring: hsl(212.7,26.8%,83.9);
+
-  }
+        --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;
+
+        --link: 0 110 180;
+
+        --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;
+
+        --link: 80 190 255;
+
+        --ring: hsl(212.7, 26.8%, 83.9);
+    }
 }
- 
+
 @layer base {
-  * {
+    * {
-    @apply border-border;
+        @apply border-border;
-  }
+    }
-  body {
+    body {
-    @apply bg-background text-foreground;
+        @apply bg-background text-foreground;
-  }
+    }
-}
+}

website/src/hooks.server.js

@@ -38,7 +38,8 @@ export async function handle({ event, resolve }) {
     <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="alternate" hreflang="x-default" href="https://gpx.studio${getURLForLanguage('en', path)}" />
+    <link rel="manifest" href="/${language}.manifest.webmanifest" />`;
 
     for (let lang of Object.keys(languages)) {
         headTag += `   <link rel="alternate" hreflang="${lang}" href="https://gpx.studio${getURLForLanguage(lang, path)}" />
@@ -46,8 +47,9 @@ export async function handle({ event, resolve }) {
     }
 
     const response = await resolve(event, {
-        transformPageChunk: ({ html }) => html.replace('<html>', htmlTag).replace('<head>', headTag),
+        transformPageChunk: ({ html }) =>
+            html.replace('<html>', htmlTag).replace('<head>', headTag),
     });
 
     return response;
-}
+}

website/src/lib/assets/colors.ts

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

website/src/lib/assets/symbols.ts

@@ -1,6 +1,67 @@
-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";
+    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,
+    Toilet,
+} 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,
+    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,
+    Toilet as ToiletSvg,
+} from 'lucide-static';
+import type { ComponentType } from 'svelte';
 
 export type Symbol = {
     value: string;
@@ -20,16 +81,28 @@ 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: {
+        value: 'Convenience Store',
+        icon: ShoppingBasket,
+        iconSvg: ShoppingBasketSvg,
+    },
     crossing: { value: 'Crossing' },
-    department_store: { value: 'Department Store', icon: ShoppingBasket, iconSvg: ShoppingBasketSvg },
+    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 },
     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 },
     information: { value: 'Information', icon: Info, iconSvg: InfoSvg },
@@ -39,7 +112,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 +128,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

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

website/src/lib/components/ButtonWithTooltip.svelte

@@ -1,28 +1,28 @@
 <script lang="ts">
-	import { Button } from '$lib/components/ui/button/index.js';
+    import { Button } from '$lib/components/ui/button/index.js';
-	import * as Tooltip from '$lib/components/ui/tooltip/index.js';
+    import * as Tooltip from '$lib/components/ui/tooltip/index.js';
-	import type { Builder } from 'bits-ui';
+    import type { Builder } from 'bits-ui';
 
-	export let variant:
+    export let variant:
-		| 'default'
+        | 'default'
-		| 'secondary'
+        | 'secondary'
-		| 'link'
+        | 'link'
-		| 'destructive'
+        | 'destructive'
-		| 'outline'
+        | 'outline'
-		| 'ghost'
+        | 'ghost'
-		| undefined = 'default';
+        | undefined = 'default';
-	export let label: string;
+    export let label: string;
-	export let side: 'top' | 'right' | 'bottom' | 'left' = 'top';
+    export let side: 'top' | 'right' | 'bottom' | 'left' = 'top';
-	export let builders: Builder[] = [];
+    export let builders: Builder[] = [];
 </script>
 
 <Tooltip.Root>
-	<Tooltip.Trigger asChild let:builder>
+    <Tooltip.Trigger asChild let:builder>
-		<Button builders={[...builders, builder]} {variant} {...$$restProps} on:click>
+        <Button builders={[...builders, builder]} {variant} {...$$restProps} on:click>
-			<slot />
+            <slot />
-		</Button>
+        </Button>
-	</Tooltip.Trigger>
+    </Tooltip.Trigger>
-	<Tooltip.Content {side}>
+    <Tooltip.Content {side}>
-		<span>{label}</span>
+        <span>{label}</span>
-	</Tooltip.Content>
+    </Tooltip.Content>
 </Tooltip.Root>

website/src/lib/components/CoordinatesPopup.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+    import { map } from '$lib/stores';
+    import { trackpointPopup } from '$lib/components/gpx-layer/GPXLayerPopup';
+    import { TrackPoint } from 'gpx';
+
+    $: if ($map) {
+        $map.on('contextmenu', (e) => {
+            trackpointPopup?.setItem({
+                item: new TrackPoint({
+                    attributes: {
+                        lat: e.lngLat.lat,
+                        lon: e.lngLat.lng,
+                    },
+                }),
+            });
+        });
+    }
+</script>

website/src/lib/components/Export.svelte

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

website/src/lib/components/Footer.svelte

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

website/src/lib/components/GPXStatistics.svelte

@@ -1,82 +1,88 @@
 <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 { _ } from 'svelte-i18n';
-	import type { GPXStatistics } from 'gpx';
+    import type { GPXStatistics } from 'gpx';
-	import type { Writable } from 'svelte/store';
+    import type { Writable } from 'svelte/store';
-	import { settings } from '$lib/db';
+    import { settings } from '$lib/db';
 
-	export let gpxStatistics: Writable<GPXStatistics>;
+    export let gpxStatistics: Writable<GPXStatistics>;
-	export let slicedGPXStatistics: Writable<[GPXStatistics, number, number] | undefined>;
+    export let slicedGPXStatistics: Writable<[GPXStatistics, number, number] | undefined>;
-	export let orientation: 'horizontal' | 'vertical';
+    export let orientation: 'horizontal' | 'vertical';
-	export let panelSize: number;
+    export let panelSize: number;
 
-	const { velocityUnits } = settings;
+    const { velocityUnits } = settings;
 
-	let statistics: GPXStatistics;
+    let statistics: GPXStatistics;
 
-	$: if ($slicedGPXStatistics !== undefined) {
+    $: if ($slicedGPXStatistics !== undefined) {
-		statistics = $slicedGPXStatistics[0];
+        statistics = $slicedGPXStatistics[0];
-	} else {
+    } else {
-		statistics = $gpxStatistics;
+        statistics = $gpxStatistics;
-	}
+    }
 </script>
 
 <Card.Root
-	class="h-full {orientation === 'vertical'
+    class="h-full {orientation === 'vertical'
-		? 'min-w-40 sm:min-w-44 text-sm sm:text-base'
+        ? 'min-w-40 sm:min-w-44 text-sm sm:text-base'
-		: 'w-full'} border-none shadow-none"
+        : 'w-full'} border-none shadow-none"
 >
-	<Card.Content
+    <Card.Content
-		class="h-full flex {orientation === 'vertical'
+        class="h-full flex {orientation === 'vertical'
-			? 'flex-col justify-center'
+            ? 'flex-col justify-center'
-			: 'flex-row w-full justify-between'} gap-4  p-0"
+            : 'flex-row w-full justify-between'} gap-4  p-0"
-	>
+    >
-		<Tooltip label={$_('quantities.distance')}>
+        <Tooltip label={$_('quantities.distance')}>
-			<span class="flex flex-row items-center">
+            <span class="flex flex-row items-center">
-				<Ruler size="16" class="mr-1" />
+                <Ruler size="16" class="mr-1" />
-				<WithUnits value={statistics.global.distance.total} type="distance" />
+                <WithUnits value={statistics.global.distance.total} type="distance" />
-			</span>
+            </span>
-		</Tooltip>
+        </Tooltip>
-		<Tooltip label={$_('quantities.elevation_gain_loss')}>
+        <Tooltip label={$_('quantities.elevation_gain_loss')}>
-			<span class="flex flex-row items-center">
+            <span class="flex flex-row items-center">
-				<MoveUpRight size="16" class="mr-1" />
+                <MoveUpRight size="16" class="mr-1" />
-				<WithUnits value={statistics.global.elevation.gain} type="elevation" />
+                <WithUnits value={statistics.global.elevation.gain} type="elevation" />
-				<MoveDownRight size="16" class="mx-1" />
+                <MoveDownRight size="16" class="mx-1" />
-				<WithUnits value={statistics.global.elevation.loss} type="elevation" />
+                <WithUnits value={statistics.global.elevation.loss} type="elevation" />
-			</span>
+            </span>
-		</Tooltip>
+        </Tooltip>
-		{#if panelSize > 120 || orientation === 'horizontal'}
+        {#if panelSize > 120 || orientation === 'horizontal'}
-			<Tooltip
+            <Tooltip
-				class={orientation === 'horizontal' ? 'hidden xs:block' : ''}
+                class={orientation === 'horizontal' ? 'hidden xs:block' : ''}
-				label="{$velocityUnits === 'speed' ? $_('quantities.speed') : $_('quantities.pace')} ({$_(
+                label="{$velocityUnits === 'speed'
-					'quantities.moving'
+                    ? $_('quantities.speed')
-				)} / {$_('quantities.total')})"
+                    : $_('quantities.pace')} ({$_('quantities.moving')} / {$_('quantities.total')})"
-			>
+            >
-				<span class="flex flex-row items-center">
+                <span class="flex flex-row items-center">
-					<Zap size="16" class="mr-1" />
+                    <Zap size="16" class="mr-1" />
-					<WithUnits value={statistics.global.speed.moving} type="speed" showUnits={false} />
+                    <WithUnits
-					<span class="mx-1">/</span>
+                        value={statistics.global.speed.moving}
-					<WithUnits value={statistics.global.speed.total} type="speed" />
+                        type="speed"
-				</span>
+                        showUnits={false}
-			</Tooltip>
+                    />
-		{/if}
+                    <span class="mx-1">/</span>
-		{#if panelSize > 160 || orientation === 'horizontal'}
+                    <WithUnits value={statistics.global.speed.total} type="speed" />
-			<Tooltip
+                </span>
-				class={orientation === 'horizontal' ? 'hidden md:block' : ''}
+            </Tooltip>
-				label="{$_('quantities.time')} ({$_('quantities.moving')} / {$_('quantities.total')})"
+        {/if}
-			>
+        {#if panelSize > 160 || orientation === 'horizontal'}
-				<span class="flex flex-row items-center">
+            <Tooltip
-					<Timer size="16" class="mr-1" />
+                class={orientation === 'horizontal' ? 'hidden md:block' : ''}
-					<WithUnits value={statistics.global.time.moving} type="time" />
+                label="{$_('quantities.time')} ({$_('quantities.moving')} / {$_(
-					<span class="mx-1">/</span>
+                    'quantities.total'
-					<WithUnits value={statistics.global.time.total} type="time" />
+                )})"
-				</span>
+            >
-			</Tooltip>
+                <span class="flex flex-row items-center">
-		{/if}
+                    <Timer size="16" class="mr-1" />
-	</Card.Content>
+                    <WithUnits value={statistics.global.time.moving} type="time" />
+                    <span class="mx-1">/</span>
+                    <WithUnits value={statistics.global.time.total} type="time" />
+                </span>
+            </Tooltip>
+        {/if}
+    </Card.Content>
 </Card.Root>

website/src/lib/components/Help.svelte

@@ -1,20 +1,20 @@
 <script lang="ts">
-	import { CircleHelp } from 'lucide-svelte';
+    import { CircleHelp } from 'lucide-svelte';
-	import { _ } from 'svelte-i18n';
+    import { _ } from 'svelte-i18n';
 
-	export let link: string | undefined = undefined;
+    export let link: string | undefined = undefined;
 </script>
 
 <div
-	class="text-sm bg-secondary rounded border flex flex-row items-center p-2 {$$props.class || ''}"
+    class="text-sm bg-secondary rounded border flex flex-row items-center p-2 {$$props.class || ''}"
 >
-	<CircleHelp size="16" class="w-4 mr-2 shrink-0 grow-0" />
+    <CircleHelp size="16" class="w-4 mr-2 shrink-0 grow-0" />
-	<div>
+    <div>
-		<slot />
+        <slot />
-		{#if link}
+        {#if link}
-			<a href={link} target="_blank" class="text-sm text-link hover:underline">
+            <a href={link} target="_blank" class="text-sm text-link hover:underline">
-				{$_('menu.more')}
+                {$_('menu.more')}
-			</a>
+            </a>
-		{/if}
+        {/if}
-	</div>
+    </div>
 </div>

website/src/lib/components/LanguageSelect.svelte

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

website/src/lib/components/Logo.svelte

@@ -1,73 +1,73 @@
 <script lang="ts">
-	import { base } from '$app/paths';
+    import { base } from '$app/paths';
-	import { mode, systemPrefersMode } from 'mode-watcher';
+    import { mode, systemPrefersMode } from 'mode-watcher';
 
-	export let iconOnly = false;
+    export let iconOnly = false;
-	export let company = 'gpx.studio';
+    export let company = 'gpx.studio';
 
-	$: effectiveMode = $mode ?? $systemPrefersMode ?? 'light';
+    $: effectiveMode = $mode ?? $systemPrefersMode ?? 'light';
 </script>
 
 {#if company === 'gpx.studio'}
-	<img
+    <img
-		src="{base}/{iconOnly ? 'icon' : 'logo'}{effectiveMode === 'dark' ? '-dark' : ''}.svg"
+        src="{base}/{iconOnly ? 'icon' : 'logo'}{effectiveMode === 'dark' ? '-dark' : ''}.svg"
-		alt="Logo of gpx.studio."
+        alt="Logo of gpx.studio."
-		{...$$restProps}
+        {...$$restProps}
-	/>
+    />
 {:else if company === 'mapbox'}
-	<img
+    <img
-		src="{base}/mapbox-logo-{effectiveMode === 'dark' ? 'white' : 'black'}.svg"
+        src="{base}/mapbox-logo-{effectiveMode === 'dark' ? 'white' : 'black'}.svg"
-		alt="Logo of Mapbox."
+        alt="Logo of Mapbox."
-		{...$$restProps}
+        {...$$restProps}
-	/>
+    />
 {: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 {$$restProps.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 {$$restProps.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 {$$restProps.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'}
-	<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 {$$restProps.class ?? ''}"
-		><title>X</title><path
+        ><title>X</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="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"
-		/></svg
+        /></svg
-	>
+    >
 {: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 {$$restProps.class ?? ''}"
-		><title>Reddit</title><path
+        ><title>Reddit</title><path
-			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"
+            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,394 +1,393 @@
 <script lang="ts">
-	import { onDestroy, onMount } from 'svelte';
+    import { onDestroy, onMount } from 'svelte';
 
-	import mapboxgl from 'mapbox-gl';
+    import mapboxgl from 'mapbox-gl';
-	import 'mapbox-gl/dist/mapbox-gl.css';
+    import 'mapbox-gl/dist/mapbox-gl.css';
 
-	import MapboxGeocoder from '@mapbox/mapbox-gl-geocoder';
+    import MapboxGeocoder from '@mapbox/mapbox-gl-geocoder';
-	import '@mapbox/mapbox-gl-geocoder/dist/mapbox-gl-geocoder.css';
+    import '@mapbox/mapbox-gl-geocoder/dist/mapbox-gl-geocoder.css';
 
-	import { Button } from '$lib/components/ui/button';
+    import { Button } from '$lib/components/ui/button';
-	import { map } from '$lib/stores';
+    import { map } from '$lib/stores';
-	import { settings } from '$lib/db';
+    import { settings } from '$lib/db';
-	import { _ } from 'svelte-i18n';
+    import { _ } from 'svelte-i18n';
-	import { PUBLIC_MAPBOX_TOKEN } from '$env/static/public';
+    import { PUBLIC_MAPBOX_TOKEN } from '$env/static/public';
-	import { page } from '$app/stores';
+    import { page } from '$app/stores';
 
-	export let accessToken = PUBLIC_MAPBOX_TOKEN;
+    export let accessToken = PUBLIC_MAPBOX_TOKEN;
-	export let geolocate = true;
+    export let geolocate = true;
-	export let geocoder = true;
+    export let geocoder = true;
-	export let hash = true;
+    export let hash = true;
 
-	mapboxgl.accessToken = accessToken;
+    mapboxgl.accessToken = accessToken;
 
-	let webgl2Supported = true;
+    let webgl2Supported = true;
-	let fitBoundsOptions: mapboxgl.FitBoundsOptions = {
+    let embeddedApp = false;
-		maxZoom: 15,
+    let fitBoundsOptions: mapboxgl.FitBoundsOptions = {
-		linear: true,
+        maxZoom: 15,
-		easing: () => 1
+        linear: true,
-	};
+        easing: () => 1,
+    };
 
-	const { distanceUnits, elevationProfile, verticalFileView, bottomPanelSize, rightPanelSize } =
+    const { distanceUnits, elevationProfile, treeFileView, bottomPanelSize, rightPanelSize } =
-		settings;
+        settings;
-	let scaleControl = new mapboxgl.ScaleControl({
+    let scaleControl = new mapboxgl.ScaleControl({
-		unit: $distanceUnits
+        unit: $distanceUnits,
-	});
+    });
 
-	onMount(() => {
+    onMount(() => {
-		let gl = document.createElement('canvas').getContext('webgl2');
+        let gl = document.createElement('canvas').getContext('webgl2');
-		if (!gl) {
+        if (!gl) {
-			webgl2Supported = false;
+            webgl2Supported = false;
-			return;
+            return;
-		}
+        }
+        if (window.top !== window.self && !$page.route.id?.includes('embed')) {
+            embeddedApp = true;
+            return;
+        }
 
-		let language = $page.params.language;
+        let language = $page.params.language;
-		if (language === 'zh') {
+        if (language === 'zh') {
-			language = 'zh-Hans';
+            language = 'zh-Hans';
-		} else if (language?.includes('-')) {
+        } else if (language?.includes('-')) {
-			language = language.split('-')[0];
+            language = language.split('-')[0];
-		} else if (language === '' || language === undefined) {
+        } else if (language === '' || language === undefined) {
-			language = 'en';
+            language = 'en';
-		}
+        }
 
-		const loadJson = mapboxgl.Style.prototype._load;
+        let newMap = new mapboxgl.Map({
-		mapboxgl.Style.prototype._load = function (json, validate) {
+            container: 'map',
-			if (
+            style: {
-				json['sources'] &&
+                version: 8,
-				json['sources']['mapbox-satellite'] &&
+                sources: {},
-				json['sources']['mapbox-satellite']['data'] &&
+                layers: [],
-				json['sources']['mapbox-satellite']['data']['data']
+                imports: [
-			) {
+                    {
-				// Temporary fix for https://github.com/gpxstudio/gpx.studio/issues/129
+                        id: 'glyphs-and-sprite', // make Mapbox glyphs and sprite available to other styles
-				delete json['sources']['mapbox-satellite']['data']['data'];
+                        url: '',
-			}
+                        data: {
-			loadJson.call(this, json, validate);
+                            version: 8,
-		};
+                            sources: {},
+                            layers: [],
+                            glyphs: 'mapbox://fonts/mapbox/{fontstack}/{range}.pbf',
+                            sprite: `https://api.mapbox.com/styles/v1/mapbox/outdoors-v12/sprite?access_token=${PUBLIC_MAPBOX_TOKEN}`,
+                        },
+                    },
+                    {
+                        id: 'basemap',
+                        url: '',
+                    },
+                    {
+                        id: 'overlays',
+                        url: '',
+                        data: {
+                            version: 8,
+                            sources: {},
+                            layers: [],
+                        },
+                    },
+                ],
+            },
+            projection: 'globe',
+            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
+            window._map = newMap; // entry point for extensions
+            scaleControl.setUnit($distanceUnits);
+        });
 
-		let newMap = new mapboxgl.Map({
+        newMap.addControl(
-			container: 'map',
+            new mapboxgl.AttributionControl({
-			style: {
+                compact: true,
-				version: 8,
+            })
-				sources: {},
+        );
-				layers: [],
-				imports: [
-					{
-						id: 'glyphs-and-sprite', // make Mapbox glyphs and sprite available to other styles
-						url: '',
-						data: {
-							version: 8,
-							sources: {},
-							layers: [],
-							glyphs: 'mapbox://fonts/mapbox/{fontstack}/{range}.pbf',
-							sprite: `https://api.mapbox.com/styles/v1/mapbox/outdoors-v12/sprite?access_token=${PUBLIC_MAPBOX_TOKEN}`
-						}
-					},
-					{
-						id: 'basemap',
-						url: ''
-					},
-					{
-						id: 'overlays',
-						url: '',
-						data: {
-							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
-			window._map = newMap; // entry point for extensions
-			scaleControl.setUnit($distanceUnits);
-		});
 
-		newMap.addControl(
+        newMap.addControl(
-			new mapboxgl.AttributionControl({
+            new mapboxgl.NavigationControl({
-				compact: true
+                visualizePitch: true,
-			})
+            })
-		);
+        );
 
-		newMap.addControl(
+        if (geocoder) {
-			new mapboxgl.NavigationControl({
+            let geocoder = new MapboxGeocoder({
-				visualizePitch: true
+                mapboxgl: mapboxgl,
-			})
+                enableEventLogging: false,
-		);
+                collapsed: true,
+                flyTo: fitBoundsOptions,
+                language,
+                localGeocoder: () => [],
+                localGeocoderOnly: true,
+                externalGeocoder: (query: string) =>
+                    fetch(
+                        `https://nominatim.openstreetmap.org/search?format=json&q=${query}&limit=5&accept-language=${language}`
+                    )
+                        .then((response) => response.json())
+                        .then((data) => {
+                            return data.map((result: any) => {
+                                return {
+                                    type: 'Feature',
+                                    geometry: {
+                                        type: 'Point',
+                                        coordinates: [result.lon, result.lat],
+                                    },
+                                    place_name: result.display_name,
+                                };
+                            });
+                        }),
+            });
+            let onKeyDown = geocoder._onKeyDown;
+            geocoder._onKeyDown = (e: KeyboardEvent) => {
+                // Trigger search on Enter key only
+                if (e.key === 'Enter') {
+                    onKeyDown.apply(geocoder, [{ target: geocoder._inputEl }]);
+                } else if (geocoder._typeahead.data.length > 0) {
+                    geocoder._typeahead.clear();
+                }
+            };
+            newMap.addControl(geocoder);
+        }
 
-		if (geocoder) {
+        if (geolocate) {
-			let geocoder = new MapboxGeocoder({
+            newMap.addControl(
-				mapboxgl: mapboxgl,
+                new mapboxgl.GeolocateControl({
-				enableEventLogging: false,
+                    positionOptions: {
-				collapsed: true,
+                        enableHighAccuracy: true,
-				flyTo: fitBoundsOptions,
+                    },
-				language,
+                    fitBoundsOptions,
-				localGeocoder: () => [],
+                    trackUserLocation: true,
-				localGeocoderOnly: true,
+                    showUserHeading: true,
-				externalGeocoder: (query: string) =>
+                })
-					fetch(
+            );
-						`https://nominatim.openstreetmap.org/search?format=json&q=${query}&limit=5&accept-language=${language}`
+        }
-					)
-						.then((response) => response.json())
-						.then((data) => {
-							return data.map((result: any) => {
-								return {
-									type: 'Feature',
-									geometry: {
-										type: 'Point',
-										coordinates: [result.lon, result.lat]
-									},
-									place_name: result.display_name
-								};
-							});
-						})
-			});
-			let onKeyDown = geocoder._onKeyDown;
-			geocoder._onKeyDown = (e: KeyboardEvent) => {
-				// Trigger search on Enter key only
-				if (e.key === 'Enter') {
-					onKeyDown.apply(geocoder, [{ target: geocoder._inputEl }]);
-				} else if (geocoder._typeahead.data.length > 0) {
-					geocoder._typeahead.clear();
-				}
-			};
-			newMap.addControl(geocoder);
-		}
 
-		if (geolocate) {
+        newMap.addControl(scaleControl);
-			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,
+            });
+            if (newMap.getPitch() > 0) {
+                newMap.setTerrain({
+                    source: 'mapbox-dem',
+                    exaggeration: 1,
+                });
+            }
+            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(null);
+                }
+            });
+        });
+    });
 
-		newMap.on('style.load', () => {
+    onDestroy(() => {
-			newMap.addSource('mapbox-dem', {
+        if ($map) {
-				type: 'raster-dem',
+            $map.remove();
-				url: 'mapbox://mapbox.mapbox-terrain-dem-v1',
+            $map = null;
-				tileSize: 512,
+        }
-				maxzoom: 14
+    });
-			});
-			if (newMap.getPitch() > 0) {
-				newMap.setTerrain({
-					source: 'mapbox-dem',
-					exaggeration: 1
-				});
-			}
-			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(null);
-				}
-			});
-		});
-	});
 
-	onDestroy(() => {
+    $: if ($map && (!$treeFileView || !$elevationProfile || $bottomPanelSize || $rightPanelSize)) {
-		if ($map) {
+        $map.resize();
-			$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 id="map" class="h-full {webgl2Supported && !embeddedApp ? '' : 'hidden'}"></div>
-	<div
+    <div
-		class="flex flex-col items-center justify-center gap-3 h-full {webgl2Supported ? 'hidden' : ''}"
+        class="flex flex-col items-center justify-center gap-3 h-full {webgl2Supported &&
-	>
+        !embeddedApp
-		<p>{$_('webgl2_required')}</p>
+            ? 'hidden'
-		<Button href="https://get.webgl.org/webgl2/" target="_blank">
+            : ''} {embeddedApp ? 'z-30' : ''}"
-			{$_('enable_webgl2')}
+    >
-		</Button>
+        {#if !webgl2Supported}
-	</div>
+            <p>{$_('webgl2_required')}</p>
+            <Button href="https://get.webgl.org/webgl2/" target="_blank">
+                {$_('enable_webgl2')}
+            </Button>
+        {:else if embeddedApp}
+            <p>The app cannot be embedded in an iframe.</p>
+            <Button href="https://gpx.studio/help/integration" target="_blank">
+                Learn how to create a map for your website
+            </Button>
+        {/if}
+    </div>
 </div>
 
 <style lang="postcss">
-	div :global(.mapboxgl-map) {
+    div :global(.mapboxgl-map) {
-		@apply font-sans;
+        @apply font-sans;
-	}
+    }
 
-	div :global(.mapboxgl-ctrl-top-right > .mapboxgl-ctrl) {
+    div :global(.mapboxgl-ctrl-top-right > .mapboxgl-ctrl) {
-		@apply shadow-md;
+        @apply shadow-md;
-		@apply bg-background;
+        @apply bg-background;
-		@apply text-foreground;
+        @apply text-foreground;
-	}
+    }
 
-	div :global(.mapboxgl-ctrl-icon) {
+    div :global(.mapboxgl-ctrl-icon) {
-		@apply dark:brightness-[4.7];
+        @apply dark:brightness-[4.7];
-	}
+    }
 
-	div :global(.mapboxgl-ctrl-geocoder) {
+    div :global(.mapboxgl-ctrl-geocoder) {
-		@apply flex;
+        @apply flex;
-		@apply flex-row;
+        @apply flex-row;
-		@apply w-fit;
+        @apply w-fit;
-		@apply min-w-fit;
+        @apply min-w-fit;
-		@apply items-center;
+        @apply items-center;
-		@apply shadow-md;
+        @apply shadow-md;
-	}
+    }
 
-	div :global(.suggestions) {
+    div :global(.suggestions) {
-		@apply shadow-md;
+        @apply shadow-md;
-		@apply bg-background;
+        @apply bg-background;
-		@apply text-foreground;
+        @apply text-foreground;
-	}
+    }
 
-	div :global(.mapboxgl-ctrl-geocoder .suggestions > li > a) {
+    div :global(.mapboxgl-ctrl-geocoder .suggestions > li > a) {
-		@apply text-foreground;
+        @apply text-foreground;
-		@apply hover:text-accent-foreground;
+        @apply hover:text-accent-foreground;
-		@apply hover:bg-accent;
+        @apply hover:bg-accent;
-	}
+    }
 
-	div :global(.mapboxgl-ctrl-geocoder .suggestions > .active > a) {
+    div :global(.mapboxgl-ctrl-geocoder .suggestions > .active > a) {
-		@apply bg-background;
+        @apply bg-background;
-	}
+    }
 
-	div :global(.mapboxgl-ctrl-geocoder--button) {
+    div :global(.mapboxgl-ctrl-geocoder--button) {
-		@apply bg-transparent;
+        @apply bg-transparent;
-		@apply hover:bg-transparent;
+        @apply hover:bg-transparent;
-	}
+    }
 
-	div :global(.mapboxgl-ctrl-geocoder--icon) {
+    div :global(.mapboxgl-ctrl-geocoder--icon) {
-		@apply fill-foreground;
+        @apply fill-foreground;
-		@apply hover:fill-accent-foreground;
+        @apply hover:fill-accent-foreground;
-	}
+    }
 
-	div :global(.mapboxgl-ctrl-geocoder--icon-search) {
+    div :global(.mapboxgl-ctrl-geocoder--icon-search) {
-		@apply relative;
+        @apply relative;
-		@apply top-0;
+        @apply top-0;
-		@apply left-0;
+        @apply left-0;
-		@apply my-2;
+        @apply my-2;
-		@apply w-[29px];
+        @apply w-[29px];
-	}
+    }
 
-	div :global(.mapboxgl-ctrl-geocoder--input) {
+    div :global(.mapboxgl-ctrl-geocoder--input) {
-		@apply relative;
+        @apply relative;
-		@apply w-64;
+        @apply w-64;
-		@apply py-0;
+        @apply py-0;
-		@apply pl-2;
+        @apply pl-2;
-		@apply focus:outline-none;
+        @apply focus:outline-none;
-		@apply transition-[width];
+        @apply transition-[width];
-		@apply duration-200;
+        @apply duration-200;
-		@apply text-foreground;
+        @apply text-foreground;
-	}
+    }
 
-	div :global(.mapboxgl-ctrl-geocoder--collapsed .mapboxgl-ctrl-geocoder--input) {
+    div :global(.mapboxgl-ctrl-geocoder--collapsed .mapboxgl-ctrl-geocoder--input) {
-		@apply w-0;
+        @apply w-0;
-		@apply p-0;
+        @apply p-0;
-	}
+    }
 
-	div :global(.mapboxgl-ctrl-top-right) {
+    div :global(.mapboxgl-ctrl-top-right) {
-		@apply z-40;
+        @apply z-40;
-		@apply flex;
+        @apply flex;
-		@apply flex-col;
+        @apply flex-col;
-		@apply items-end;
+        @apply items-end;
-		@apply h-full;
+        @apply h-full;
-		@apply overflow-hidden;
+        @apply overflow-hidden;
-	}
+    }
 
-	.horizontal :global(.mapboxgl-ctrl-bottom-left) {
+    .horizontal :global(.mapboxgl-ctrl-bottom-left) {
-		@apply bottom-[42px];
+        @apply bottom-[42px];
-	}
+    }
 
-	.horizontal :global(.mapboxgl-ctrl-bottom-right) {
+    .horizontal :global(.mapboxgl-ctrl-bottom-right) {
-		@apply bottom-[42px];
+        @apply bottom-[42px];
-	}
+    }
 
-	div :global(.mapboxgl-ctrl-attrib) {
+    div :global(.mapboxgl-ctrl-attrib) {
-		@apply dark:bg-transparent;
+        @apply dark:bg-transparent;
-	}
+    }
 
-	div :global(.mapboxgl-compact-show.mapboxgl-ctrl-attrib) {
+    div :global(.mapboxgl-compact-show.mapboxgl-ctrl-attrib) {
-		@apply dark:bg-background;
+        @apply dark:bg-background;
-	}
+    }
 
-	div :global(.mapboxgl-ctrl-attrib-button) {
+    div :global(.mapboxgl-ctrl-attrib-button) {
-		@apply dark:bg-foreground;
+        @apply dark:bg-foreground;
-	}
+    }
 
-	div :global(.mapboxgl-compact-show .mapboxgl-ctrl-attrib-button) {
+    div :global(.mapboxgl-compact-show .mapboxgl-ctrl-attrib-button) {
-		@apply dark:bg-foreground;
+        @apply dark:bg-foreground;
-	}
+    }
 
-	div :global(.mapboxgl-ctrl-attrib a) {
+    div :global(.mapboxgl-ctrl-attrib a) {
-		@apply text-foreground;
+        @apply text-foreground;
-	}
+    }
 
-	div :global(.mapboxgl-popup) {
+    div :global(.mapboxgl-popup) {
-		@apply w-fit;
+        @apply w-fit;
-		@apply z-50;
+        @apply z-50;
-	}
+    }
 
-	div :global(.mapboxgl-popup-content) {
+    div :global(.mapboxgl-popup-content) {
-		@apply p-0;
+        @apply p-0;
-		@apply bg-transparent;
+        @apply bg-transparent;
-		@apply shadow-none;
+        @apply shadow-none;
-	}
+    }
 
-	div :global(.mapboxgl-popup-anchor-top .mapboxgl-popup-tip) {
+    div :global(.mapboxgl-popup-anchor-top .mapboxgl-popup-tip) {
-		@apply border-b-background;
+        @apply border-b-background;
-	}
+    }
 
-	div :global(.mapboxgl-popup-anchor-top-left .mapboxgl-popup-tip) {
+    div :global(.mapboxgl-popup-anchor-top-left .mapboxgl-popup-tip) {
-		@apply border-b-background;
+        @apply border-b-background;
-	}
+    }
 
-	div :global(.mapboxgl-popup-anchor-top-right .mapboxgl-popup-tip) {
+    div :global(.mapboxgl-popup-anchor-top-right .mapboxgl-popup-tip) {
-		@apply border-b-background;
+        @apply border-b-background;
-	}
+    }
 
-	div :global(.mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip) {
+    div :global(.mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip) {
-		@apply border-t-background;
+        @apply border-t-background;
-		@apply drop-shadow-md;
+        @apply drop-shadow-md;
-	}
+    }
 
-	div :global(.mapboxgl-popup-anchor-bottom-left .mapboxgl-popup-tip) {
+    div :global(.mapboxgl-popup-anchor-bottom-left .mapboxgl-popup-tip) {
-		@apply border-t-background;
+        @apply border-t-background;
-		@apply drop-shadow-md;
+        @apply drop-shadow-md;
-	}
+    }
 
-	div :global(.mapboxgl-popup-anchor-bottom-right .mapboxgl-popup-tip) {
+    div :global(.mapboxgl-popup-anchor-bottom-right .mapboxgl-popup-tip) {
-		@apply border-t-background;
+        @apply border-t-background;
-		@apply drop-shadow-md;
+        @apply drop-shadow-md;
-	}
+    }
 
-	div :global(.mapboxgl-popup-anchor-left .mapboxgl-popup-tip) {
+    div :global(.mapboxgl-popup-anchor-left .mapboxgl-popup-tip) {
-		@apply border-r-background;
+        @apply border-r-background;
-	}
+    }
 
-	div :global(.mapboxgl-popup-anchor-right .mapboxgl-popup-tip) {
+    div :global(.mapboxgl-popup-anchor-right .mapboxgl-popup-tip) {
-		@apply border-l-background;
+        @apply border-l-background;
-	}
+    }
 </style>

website/src/lib/components/MapPopup.svelte

@@ -1,25 +1,25 @@
 <svelte:options accessors />
 
 <script lang="ts">
-	import { TrackPoint, Waypoint } from 'gpx';
+    import { TrackPoint, Waypoint } from 'gpx';
-	import type { Writable } from 'svelte/store';
+    import type { Writable } from 'svelte/store';
-	import WaypointPopup from '$lib/components/gpx-layer/WaypointPopup.svelte';
+    import WaypointPopup from '$lib/components/gpx-layer/WaypointPopup.svelte';
-	import TrackpointPopup from '$lib/components/gpx-layer/TrackpointPopup.svelte';
+    import TrackpointPopup from '$lib/components/gpx-layer/TrackpointPopup.svelte';
-	import OverpassPopup from '$lib/components/layer-control/OverpassPopup.svelte';
+    import OverpassPopup from '$lib/components/layer-control/OverpassPopup.svelte';
-	import type { PopupItem } from './MapPopup';
+    import type { PopupItem } from './MapPopup';
 
-	export let item: Writable<PopupItem | null>;
+    export let item: Writable<PopupItem | null>;
-	export let container: HTMLDivElement | null = null;
+    export let container: HTMLDivElement | null = null;
 </script>
 
 <div bind:this={container}>
-	{#if $item}
+    {#if $item}
-		{#if $item.item instanceof Waypoint}
+        {#if $item.item instanceof Waypoint}
-			<WaypointPopup waypoint={$item} />
+            <WaypointPopup waypoint={$item} />
-		{:else if $item.item instanceof TrackPoint}
+        {:else if $item.item instanceof TrackPoint}
-			<TrackpointPopup trackpoint={$item} />
+            <TrackpointPopup trackpoint={$item} />
-		{:else}
+        {:else}
-			<OverpassPopup poi={$item} />
+            <OverpassPopup poi={$item} />
-		{/if}
+        {/if}
-	{/if}
+    {/if}
 </div>

website/src/lib/components/MapPopup.ts

@@ -1,12 +1,13 @@
-import { TrackPoint, Waypoint } from "gpx";
+import { TrackPoint, Waypoint } from 'gpx';
-import mapboxgl from "mapbox-gl";
+import mapboxgl from 'mapbox-gl';
-import { tick } from "svelte";
+import { tick } from 'svelte';
-import { get, writable, type Writable } from "svelte/store";
+import { get, writable, type Writable } from 'svelte/store';
-import MapPopupComponent from "./MapPopup.svelte";
+import MapPopupComponent from './MapPopup.svelte';
 
 export type PopupItem<T = Waypoint | TrackPoint | any> = {
     item: T;
     fileId?: string;
+    hide?: () => void;
 };
 
 export class MapPopup {
@@ -22,14 +23,15 @@ export class MapPopup {
         let component = new MapPopupComponent({
             target: document.body,
             props: {
-                item: this.item
+                item: this.item,
-            }
+            },
         });
 
         tick().then(() => this.popup.setDOMContent(component.container));
     }
 
     setItem(item: PopupItem | null) {
+        if (item) item.hide = () => this.hide();
         this.item.set(item);
         if (item === null) {
             this.hide();
@@ -73,6 +75,8 @@ export class MapPopup {
         if (i === null) {
             return new mapboxgl.LngLat(0, 0);
         }
-        return (i.item instanceof Waypoint || i.item instanceof TrackPoint) ? i.item.getCoordinates() : new mapboxgl.LngLat(i.item.lon, i.item.lat);
+        return i.item instanceof Waypoint || i.item instanceof TrackPoint
+            ? i.item.getCoordinates()
+            : new mapboxgl.LngLat(i.item.lon, i.item.lat);
     }
-}
+}

website/src/lib/components/ModeSwitch.svelte

@@ -1,25 +1,25 @@
 <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, systemPrefersMode } from 'mode-watcher';
-	import { _ } from 'svelte-i18n';
+    import { _ } from 'svelte-i18n';
 
-	export let size = '20';
+    export let size = '20';
 
-	$: selectedMode = $mode ?? $systemPrefersMode ?? 'light';
+    $: selectedMode = $mode ?? $systemPrefersMode ?? 'light';
 </script>
 
 <Button
-	variant="ghost"
+    variant="ghost"
-	class="h-8 px-1.5 {$$props.class ?? ''}"
+    class="h-8 px-1.5 {$$props.class ?? ''}"
-	on:click={() => {
+    on:click={() => {
-		setMode(selectedMode === 'light' ? 'dark' : 'light');
+        setMode(selectedMode === 'light' ? 'dark' : 'light');
-	}}
+    }}
-	aria-label={$_('menu.mode')}
+    aria-label={$_('menu.mode')}
 >
-	{#if selectedMode === 'light'}
+    {#if selectedMode === 'light'}
-		<Sun {size} />
+        <Sun {size} />
-	{:else}
+    {:else}
-		<Moon {size} />
+        <Moon {size} />
-	{/if}
+    {/if}
 </Button>

website/src/lib/components/Nav.svelte

@@ -1,32 +1,32 @@
 <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 AlgoliaDocSearch from '$lib/components/AlgoliaDocSearch.svelte';
+    import AlgoliaDocSearch from '$lib/components/AlgoliaDocSearch.svelte';
-	import ModeSwitch from '$lib/components/ModeSwitch.svelte';
+    import ModeSwitch from '$lib/components/ModeSwitch.svelte';
-	import { BookOpenText, Home, Map } from 'lucide-svelte';
+    import { BookOpenText, Home, Map } from 'lucide-svelte';
-	import { _, locale } from 'svelte-i18n';
+    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">
-	<div class="mx-6 py-2 flex flex-row items-center border-b gap-4 sm:gap-8">
+    <div class="mx-6 py-2 flex flex-row items-center border-b gap-4 sm:gap-8">
-		<a href={getURLForLanguage($locale, '/')} class="shrink-0 translate-y-0.5">
+        <a href={getURLForLanguage($locale, '/')} class="shrink-0 translate-y-0.5">
-			<Logo class="h-8 sm:hidden" iconOnly={true} width="26" />
+            <Logo class="h-8 sm:hidden" iconOnly={true} width="26" />
-			<Logo class="h-8 hidden sm:block" width="153" />
+            <Logo class="h-8 hidden sm:block" width="153" />
-		</a>
+        </a>
-		<Button variant="link" class="text-base px-0" href={getURLForLanguage($locale, '/')}>
+        <Button variant="link" class="text-base px-0" href={getURLForLanguage($locale, '/')}>
-			<Home size="18" class="mr-1.5" />
+            <Home size="18" class="mr-1.5" />
-			{$_('homepage.home')}
+            {$_('homepage.home')}
-		</Button>
+        </Button>
-		<Button variant="link" class="text-base px-0" href={getURLForLanguage($locale, '/app')}>
+        <Button variant="link" class="text-base px-0" href={getURLForLanguage($locale, '/app')}>
-			<Map size="18" class="mr-1.5" />
+            <Map size="18" class="mr-1.5" />
-			{$_('homepage.app')}
+            {$_('homepage.app')}
-		</Button>
+        </Button>
-		<Button variant="link" class="text-base px-0" href={getURLForLanguage($locale, '/help')}>
+        <Button variant="link" class="text-base px-0" href={getURLForLanguage($locale, '/help')}>
-			<BookOpenText size="18" class="mr-1.5" />
+            <BookOpenText size="18" class="mr-1.5" />
-			{$_('menu.help')}
+            {$_('menu.help')}
-		</Button>
+        </Button>
-		<AlgoliaDocSearch class="ml-auto" />
+        <AlgoliaDocSearch class="ml-auto" />
-		<ModeSwitch class="hidden xs:block" />
+        <ModeSwitch class="hidden xs:block" />
-	</div>
+    </div>
 </nav>

website/src/lib/components/Resizer.svelte

@@ -1,41 +1,42 @@
 <script lang="ts">
-	export let orientation: 'col' | 'row' = 'col';
+    export let orientation: 'col' | 'row' = 'col';
 
-	export let after: number;
+    export let after: number;
-	export let minAfter: number = 0;
+    export let minAfter: number = 0;
-	export let maxAfter: number = Number.MAX_SAFE_INTEGER;
+    export let maxAfter: number = Number.MAX_SAFE_INTEGER;
 
-	function handleMouseDown(event: PointerEvent) {
+    function handleMouseDown(event: PointerEvent) {
-		const startX = event.clientX;
+        const startX = event.clientX;
-		const startY = event.clientY;
+        const startY = event.clientY;
-		const startAfter = after;
+        const startAfter = after;
 
-		const handleMouseMove = (event: PointerEvent) => {
+        const handleMouseMove = (event: PointerEvent) => {
-			const newAfter =
+            const newAfter =
-				startAfter + (orientation === 'col' ? startX - event.clientX : startY - event.clientY);
+                startAfter +
-			if (newAfter >= minAfter && newAfter <= maxAfter) {
+                (orientation === 'col' ? startX - event.clientX : startY - event.clientY);
-				after = newAfter;
+            if (newAfter >= minAfter && newAfter <= maxAfter) {
-			} else if (newAfter < minAfter && after !== minAfter) {
+                after = newAfter;
-				after = minAfter;
+            } else if (newAfter < minAfter && after !== minAfter) {
-			} else if (newAfter > maxAfter && after !== maxAfter) {
+                after = minAfter;
-				after = maxAfter;
+            } else if (newAfter > maxAfter && after !== maxAfter) {
-			}
+                after = maxAfter;
-		};
+            }
+        };
 
-		const handleMouseUp = () => {
+        const handleMouseUp = () => {
-			window.removeEventListener('pointermove', handleMouseMove);
+            window.removeEventListener('pointermove', handleMouseMove);
-			window.removeEventListener('pointerup', handleMouseUp);
+            window.removeEventListener('pointerup', handleMouseUp);
-		};
+        };
 
-		window.addEventListener('pointermove', handleMouseMove);
+        window.addEventListener('pointermove', handleMouseMove);
-		window.addEventListener('pointerup', handleMouseUp);
+        window.addEventListener('pointerup', handleMouseUp);
-	}
+    }
 </script>
 
 <!-- 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}
+    on:pointerdown={handleMouseDown}
 />

website/src/lib/components/Shortcut.svelte

@@ -1,36 +1,36 @@
 <script lang="ts">
-	import { isMac, isSafari } from '$lib/utils';
+    import { isMac, isSafari } from '$lib/utils';
-	import { onMount } from 'svelte';
+    import { onMount } from 'svelte';
-	import { _ } from 'svelte-i18n';
+    import { _ } from 'svelte-i18n';
 
-	export let key: string | undefined = undefined;
+    export let key: string | undefined = undefined;
-	export let shift: boolean = false;
+    export let shift: boolean = false;
-	export let ctrl: boolean = false;
+    export let ctrl: boolean = false;
-	export let click: boolean = false;
+    export let click: boolean = false;
 
-	let mac = false;
+    let mac = false;
-	let safari = false;
+    let safari = false;
 
-	onMount(() => {
+    onMount(() => {
-		mac = isMac();
+        mac = isMac();
-		safari = isSafari();
+        safari = isSafari();
-	});
+    });
 </script>
 
 <div
-	class="ml-auto pl-2 text-xs tracking-widest text-muted-foreground flex flex-row gap-0 items-baseline"
+    class="ml-auto pl-2 text-xs tracking-widest text-muted-foreground flex flex-row gap-0 items-baseline"
-	{...$$props}
+    {...$$props}
 >
-	{#if shift}
+    {#if shift}
-		<span>⇧</span>
+        <span>⇧</span>
-	{/if}
+    {/if}
-	{#if ctrl}
+    {#if ctrl}
-		<span>{mac && !safari ? '⌘' : $_('menu.ctrl') + '+'}</span>
+        <span>{mac && !safari ? '⌘' : $_('menu.ctrl') + '+'}</span>
-	{/if}
+    {/if}
-	{#if key}
+    {#if key}
-		<span class={key === '+' ? 'font-medium text-sm/4' : ''}>{key}</span>
+        <span class={key === '+' ? 'font-medium text-sm/4' : ''}>{key}</span>
-	{/if}
+    {/if}
-	{#if click}
+    {#if click}
-		<span>{$_('menu.click')}</span>
+        <span>{$_('menu.click')}</span>
-	{/if}
+    {/if}
 </div>

website/src/lib/components/Tooltip.svelte

@@ -1,18 +1,18 @@
 <script lang="ts">
-	import * as Tooltip from '$lib/components/ui/tooltip/index.js';
+    import * as Tooltip from '$lib/components/ui/tooltip/index.js';
 
-	export let label: string;
+    export let label: string;
-	export let side: 'top' | 'right' | 'bottom' | 'left' = 'top';
+    export let side: 'top' | 'right' | 'bottom' | 'left' = 'top';
 </script>
 
 <Tooltip.Root>
-	<Tooltip.Trigger {...$$restProps} aria-label={label}>
+    <Tooltip.Trigger {...$$restProps} aria-label={label}>
-		<slot />
+        <slot />
-	</Tooltip.Trigger>
+    </Tooltip.Trigger>
-	<Tooltip.Content {side}>
+    <Tooltip.Content {side}>
-		<div class="flex flex-row items-center">
+        <div class="flex flex-row items-center">
-			<span>{label}</span>
+            <span>{label}</span>
-			<slot name="extra" />
+            <slot name="extra" />
-		</div>
+        </div>
-	</Tooltip.Content>
+    </Tooltip.Content>
 </Tooltip.Root>

website/src/lib/components/WithUnits.svelte

@@ -1,48 +1,48 @@
 <script lang="ts">
-	import { settings } from '$lib/db';
+    import { settings } from '$lib/db';
-	import {
+    import {
-		celsiusToFahrenheit,
+        celsiusToFahrenheit,
-		getConvertedDistance,
+        getConvertedDistance,
-		getConvertedElevation,
+        getConvertedElevation,
-		getConvertedVelocity,
+        getConvertedVelocity,
-		getDistanceUnits,
+        getDistanceUnits,
-		getElevationUnits,
+        getElevationUnits,
-		getVelocityUnits,
+        getVelocityUnits,
-		secondsToHHMMSS
+        secondsToHHMMSS,
-	} from '$lib/units';
+    } from '$lib/units';
 
-	import { _ } from 'svelte-i18n';
+    import { _ } from 'svelte-i18n';
 
-	export let value: number;
+    export let value: number;
-	export let type: 'distance' | 'elevation' | 'speed' | 'temperature' | 'time';
+    export let type: 'distance' | 'elevation' | 'speed' | 'temperature' | 'time';
-	export let showUnits: boolean = true;
+    export let showUnits: boolean = true;
-	export let decimals: number | undefined = undefined;
+    export let decimals: number | undefined = undefined;
 
-	const { distanceUnits, velocityUnits, temperatureUnits } = settings;
+    const { distanceUnits, velocityUnits, temperatureUnits } = settings;
 </script>
 
 <span class={$$props.class}>
-	{#if type === 'distance'}
+    {#if type === 'distance'}
-		{getConvertedDistance(value, $distanceUnits).toFixed(decimals ?? 2)}
+        {getConvertedDistance(value, $distanceUnits).toFixed(decimals ?? 2)}
-		{showUnits ? getDistanceUnits($distanceUnits) : ''}
+        {showUnits ? getDistanceUnits($distanceUnits) : ''}
-	{:else if type === 'elevation'}
+    {:else if type === 'elevation'}
-		{getConvertedElevation(value, $distanceUnits).toFixed(decimals ?? 0)}
+        {getConvertedElevation(value, $distanceUnits).toFixed(decimals ?? 0)}
-		{showUnits ? getElevationUnits($distanceUnits) : ''}
+        {showUnits ? getElevationUnits($distanceUnits) : ''}
-	{:else if type === 'speed'}
+    {:else if type === 'speed'}
-		{#if $velocityUnits === 'speed'}
+        {#if $velocityUnits === 'speed'}
-			{getConvertedVelocity(value, $velocityUnits, $distanceUnits).toFixed(decimals ?? 2)}
+            {getConvertedVelocity(value, $velocityUnits, $distanceUnits).toFixed(decimals ?? 2)}
-			{showUnits ? getVelocityUnits($velocityUnits, $distanceUnits) : ''}
+            {showUnits ? getVelocityUnits($velocityUnits, $distanceUnits) : ''}
-		{:else}
+        {:else}
-			{secondsToHHMMSS(getConvertedVelocity(value, $velocityUnits, $distanceUnits))}
+            {secondsToHHMMSS(getConvertedVelocity(value, $velocityUnits, $distanceUnits))}
-			{showUnits ? getVelocityUnits($velocityUnits, $distanceUnits) : ''}
+            {showUnits ? getVelocityUnits($velocityUnits, $distanceUnits) : ''}
-		{/if}
+        {/if}
-	{:else if type === 'temperature'}
+    {:else if type === 'temperature'}
-		{#if $temperatureUnits === 'celsius'}
+        {#if $temperatureUnits === 'celsius'}
-			{value} {showUnits ? $_('units.celsius') : ''}
+            {value} {showUnits ? $_('units.celsius') : ''}
-		{:else}
+        {:else}
-			{celsiusToFahrenheit(value)} {showUnits ? $_('units.fahrenheit') : ''}
+            {celsiusToFahrenheit(value)} {showUnits ? $_('units.fahrenheit') : ''}
-		{/if}
+        {/if}
-	{:else if type === 'time'}
+    {:else if type === 'time'}
-		{secondsToHHMMSS(value)}
+        {secondsToHHMMSS(value)}
-	{/if}
+    {/if}
 </span>

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

@@ -1,20 +1,20 @@
 <script lang="ts">
-	import { setContext } from 'svelte';
+    import { setContext } from 'svelte';
-	import { writable } from 'svelte/store';
+    import { writable } from 'svelte/store';
 
-	export let defaultState: 'open' | 'closed' = 'open';
+    export let defaultState: 'open' | 'closed' = 'open';
-	export let side: 'left' | 'right' = 'right';
+    export let side: 'left' | 'right' = 'right';
-	export let nohover: boolean = false;
+    export let nohover: boolean = false;
-	export let slotInsideTrigger: boolean = true;
+    export let slotInsideTrigger: boolean = true;
 
-	let open = writable<Record<string, boolean>>({});
+    let open = writable<Record<string, boolean>>({});
 
-	setContext('collapsible-tree-default-state', 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 />

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

@@ -1,97 +1,97 @@
 <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, onMount, setContext } from 'svelte';
-	import { get, type Writable } from 'svelte/store';
+    import { get, type Writable } from 'svelte/store';
 
-	export let id: string | number;
+    export let id: string | number;
 
-	let defaultState = getContext<'open' | 'closed'>('collapsible-tree-default-state');
+    let defaultState = getContext<'open' | 'closed'>('collapsible-tree-default-state');
-	let open = getContext<Writable<Record<string, boolean>>>('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}.${id}`;
-	setContext('collapsible-tree-parent-id', fullId);
+    setContext('collapsible-tree-parent-id', fullId);
 
-	onMount(() => {
+    onMount(() => {
-		if (!get(open).hasOwnProperty(fullId)) {
+        if (!get(open).hasOwnProperty(fullId)) {
-			open.update((value) => {
+            open.update((value) => {
-				value[fullId] = defaultState === 'open';
+                value[fullId] = defaultState === 'open';
-				return value;
+                return value;
-			});
+            });
-		}
+        }
-	});
+    });
 
-	export function openNode() {
+    export function openNode() {
-		open.update((value) => {
+        open.update((value) => {
-			value[fullId] = true;
+            value[fullId] = true;
-			return value;
+            return value;
-		});
+        });
-	}
+    }
 </script>
 
 <Collapsible.Root bind:open={$open[fullId]} 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'
+                class="w-full flex flex-row {side === 'right'
-					? 'justify-between'
+                    ? 'justify-between'
-					: 'justify-start'} py-0 px-1 h-fit {nohover
+                    : 'justify-start'} py-0 px-1 h-fit {nohover
-					? 'hover:bg-background'
+                    ? 'hover:bg-background'
-					: ''} pointer-events-none"
+                    : ''} pointer-events-none"
-			>
+            >
-				{#if side === 'left'}
+                {#if side === 'left'}
-					{#if $open[fullId]}
+                    {#if $open[fullId]}
-						<ChevronDown size="16" class="shrink-0" />
+                        <ChevronDown size="16" class="shrink-0" />
-					{:else}
+                    {:else}
-						<ChevronRight size="16" class="shrink-0" />
+                        <ChevronRight size="16" class="shrink-0" />
-					{/if}
+                    {/if}
-				{/if}
+                {/if}
-				<slot name="trigger" />
+                <slot name="trigger" />
-				{#if side === 'right'}
+                {#if side === 'right'}
-					{#if $open[fullId]}
+                    {#if $open[fullId]}
-						<ChevronDown size="16" class="shrink-0" />
+                        <ChevronDown size="16" class="shrink-0" />
-					{:else}
+                    {:else}
-						<ChevronLeft size="16" class="shrink-0" />
+                        <ChevronLeft size="16" class="shrink-0" />
-					{/if}
+                    {/if}
-				{/if}
+                {/if}
-			</Button>
+            </Button>
-		</Collapsible.Trigger>
+        </Collapsible.Trigger>
-	{:else}
+    {:else}
-		<Button
+        <Button
-			variant="ghost"
+            variant="ghost"
-			class="w-full flex flex-row {side === 'right'
+            class="w-full flex flex-row {side === 'right'
-				? 'justify-between'
+                ? 'justify-between'
-				: 'justify-start'} py-0 px-1 h-fit {nohover ? 'hover:bg-background' : ''}"
+                : 'justify-start'} py-0 px-1 h-fit {nohover ? 'hover:bg-background' : ''}"
-		>
+        >
-			{#if side === 'left'}
+            {#if side === 'left'}
-				<Collapsible.Trigger>
+                <Collapsible.Trigger>
-					{#if $open[fullId]}
+                    {#if $open[fullId]}
-						<ChevronDown size="16" class="shrink-0" />
+                        <ChevronDown size="16" class="shrink-0" />
-					{:else}
+                    {:else}
-						<ChevronRight size="16" class="shrink-0" />
+                        <ChevronRight size="16" class="shrink-0" />
-					{/if}
+                    {/if}
-				</Collapsible.Trigger>
+                </Collapsible.Trigger>
-			{/if}
+            {/if}
-			<slot name="trigger" />
+            <slot name="trigger" />
-			{#if side === 'right'}
+            {#if side === 'right'}
-				<Collapsible.Trigger>
+                <Collapsible.Trigger>
-					{#if $open[fullId]}
+                    {#if $open[fullId]}
-						<ChevronDown size="16" class="shrink-0" />
+                        <ChevronDown size="16" class="shrink-0" />
-					{:else}
+                    {:else}
-						<ChevronLeft size="16" class="shrink-0" />
+                        <ChevronLeft size="16" class="shrink-0" />
-					{/if}
+                    {/if}
-				</Collapsible.Trigger>
+                </Collapsible.Trigger>
-			{/if}
+            {/if}
-		</Button>
+        </Button>
-	{/if}
+    {/if}
 
-	<Collapsible.Content class="ml-2">
+    <Collapsible.Content class="ml-2">
-		<slot name="content" />
+        <slot name="content" />
-	</Collapsible.Content>
+    </Collapsible.Content>
 </Collapsible.Root>

website/src/lib/components/collapsible-tree/index.ts

@@ -1,2 +1,2 @@
 export { default as CollapsibleTree } from './CollapsibleTree.svelte';
-export { default as CollapsibleTreeNode } from './CollapsibleTreeNode.svelte';
+export { default as CollapsibleTreeNode } from './CollapsibleTreeNode.svelte';

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

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

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

@@ -17,4 +17,4 @@ export default class CustomControl implements IControl {
         this._container?.parentNode?.removeChild(this._container);
         this._map = undefined;
     }
-}
+}

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

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

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

@@ -1,25 +1,29 @@
 <script lang="ts">
-	export let src: 'getting-started/interface' | 'tools/routing' | 'tools/split';
+    export let src: 'getting-started/interface' | 'tools/routing' | 'tools/split';
-	export let alt: string;
+    export let alt: string;
 </script>
 
 <div class="flex flex-col items-center py-6 w-full">
-	<div class="rounded-md overflow-hidden overflow-clip shadow-xl mx-auto">
+    <div class="rounded-md overflow-hidden overflow-clip shadow-xl mx-auto">
-		{#if src === 'getting-started/interface'}
+        {#if src === 'getting-started/interface'}
-			<enhanced:img
+            <enhanced:img
-				src="/src/lib/assets/img/docs/getting-started/interface.png"
+                src="/src/lib/assets/img/docs/getting-started/interface.png"
-				{alt}
+                {alt}
-				class="w-full max-w-3xl"
+                class="w-full max-w-3xl"
-			/>
+            />
-		{:else if src === 'tools/routing'}
+        {:else if src === 'tools/routing'}
-			<enhanced:img
+            <enhanced:img
-				src="/src/lib/assets/img/docs/tools/routing.png"
+                src="/src/lib/assets/img/docs/tools/routing.png"
-				{alt}
+                {alt}
-				class="w-full max-w-3xl"
+                class="w-full max-w-3xl"
-			/>
+            />
-		{:else if src === 'tools/split'}
+        {:else if src === 'tools/split'}
-			<enhanced:img src="/src/lib/assets/img/docs/tools/split.png" {alt} class="w-full max-w-3xl" />
+            <enhanced:img
-		{/if}
+                src="/src/lib/assets/img/docs/tools/split.png"
-	</div>
+                {alt}
-	<p class="text-center text-sm text-muted-foreground mt-2">{alt}</p>
+                class="w-full max-w-3xl"
+            />
+        {/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 mapboxOutdoorsMap from '$lib/assets/img/home/mapbox-outdoors.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={mapboxOutdoorsMap} alt="Mapbox Outdoors 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/DocsNote.svelte

@@ -1,18 +1,18 @@
 <script lang="ts">
-	export let type: 'note' | 'warning' = 'note';
+    export let type: 'note' | 'warning' = 'note';
 </script>
 
 <div
-	class="bg-secondary border-l-8 {type === 'note'
+    class="bg-secondary border-l-8 {type === 'note'
-		? 'border-link'
+        ? 'border-link'
-		: 'border-destructive'} p-2 text-sm rounded-md"
+        : 'border-destructive'} p-2 text-sm rounded-md"
 >
-	<slot />
+    <slot />
 </div>
 
 <style lang="postcss">
-	div :global(a) {
+    div :global(a) {
-		@apply text-link;
+        @apply text-link;
-		@apply hover:underline;
+        @apply hover:underline;
-	}
+    }
 </style>

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

@@ -1,39 +1,64 @@
-import { File, FilePen, View, type Icon, Settings, Pencil, MapPin, Scissors, CalendarClock, Group, Ungroup, Filter, SquareDashedMousePointer, MountainSnow } from "lucide-svelte";
+import {
-import type { ComponentType } from "svelte";
+    File,
+    FilePen,
+    View,
+    type Icon,
+    Settings,
+    Pencil,
+    MapPin,
+    Scissors,
+    CalendarClock,
+    Group,
+    Ungroup,
+    Filter,
+    SquareDashedMousePointer,
+    MountainSnow,
+} from 'lucide-svelte';
+import type { ComponentType } 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', 'elevation', 'minify', 'clean'],
+    toolbar: [
+        'routing',
+        'poi',
+        'scissors',
+        'time',
+        'merge',
+        'extract',
+        'elevation',
+        'minify',
+        'clean',
+    ],
     'map-controls': [],
-    'gpx': [],
+    gpx: [],
-    'integration': [],
+    integration: [],
-    'faq': [],
+    faq: [],
 };
 
 export const guideIcons: Record<string, string | ComponentType<Icon>> = {
-    "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,
-    "elevation": MountainSnow,
+    elevation: MountainSnow,
-    "minify": Filter,
+    minify: Filter,
-    "clean": SquareDashedMousePointer,
+    clean: SquareDashedMousePointer,
-    "map-controls": "🗺",
+    'map-controls': '🗺',
-    "gpx": "💾",
+    gpx: '💾',
-    "integration": "{ 👩‍💻 }",
+    integration: '{ 👩‍💻 }',
-    "faq": "🔮",
+    faq: '🔮',
 };
 
 export function getPreviousGuide(currentGuide: string): string | undefined {
@@ -96,4 +121,4 @@ export function getNextGuide(currentGuide: string): string | undefined {
             return undefined;
         }
     }
-}
+}

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

@@ -1,267 +1,271 @@
 <script lang="ts">
-	import GPXLayers from '$lib/components/gpx-layer/GPXLayers.svelte';
+    import GPXLayers from '$lib/components/gpx-layer/GPXLayers.svelte';
-	import ElevationProfile from '$lib/components/ElevationProfile.svelte';
+    import ElevationProfile from '$lib/components/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.svelte';
-	import LayerControl from '$lib/components/layer-control/LayerControl.svelte';
+    import LayerControl from '$lib/components/layer-control/LayerControl.svelte';
-	import OpenIn from '$lib/components/embedding/OpenIn.svelte';
+    import OpenIn from '$lib/components/embedding/OpenIn.svelte';
-	import {
+    import {
-		gpxStatistics,
+        gpxStatistics,
-		slicedGPXStatistics,
+        slicedGPXStatistics,
-		embedding,
+        embedding,
-		loadFile,
+        loadFile,
-		map,
+        map,
-		updateGPXData
+        updateGPXData,
-	} from '$lib/stores';
+    } from '$lib/stores';
-	import { onDestroy, onMount } from 'svelte';
+    import { onDestroy, onMount } from 'svelte';
-	import { fileObservers, settings, GPXStatisticsTree } from '$lib/db';
+    import { fileObservers, settings, GPXStatisticsTree } from '$lib/db';
-	import { readable } from 'svelte/store';
+    import { readable } from 'svelte/store';
-	import type { GPXFile } from 'gpx';
+    import type { GPXFile } from 'gpx';
-	import { selection } from '$lib/components/file-list/Selection';
+    import { selection } from '$lib/components/file-list/Selection';
-	import { ListFileItem } from '$lib/components/file-list/FileList';
+    import { ListFileItem } from '$lib/components/file-list/FileList';
-	import {
+    import {
-		allowedEmbeddingBasemaps,
+        allowedEmbeddingBasemaps,
-		getFilesFromEmbeddingOptions,
+        getFilesFromEmbeddingOptions,
-		type EmbeddingOptions
+        type EmbeddingOptions,
-	} from './Embedding';
+    } from './Embedding';
-	import { mode, setMode } from 'mode-watcher';
+    import { mode, setMode } from 'mode-watcher';
-	import { browser } from '$app/environment';
+    import { browser } from '$app/environment';
 
-	$embedding = true;
+    $embedding = true;
 
-	const {
+    const {
-		currentBasemap,
+        currentBasemap,
-		distanceUnits,
+        distanceUnits,
-		velocityUnits,
+        velocityUnits,
-		temperatureUnits,
+        temperatureUnits,
-		fileOrder,
+        fileOrder,
-		distanceMarkers,
+        distanceMarkers,
-		directionMarkers
+        directionMarkers,
-	} = settings;
+    } = settings;
 
-	export let useHash = true;
+    export let useHash = true;
-	export let options: EmbeddingOptions;
+    export let options: EmbeddingOptions;
-	export let hash: string;
+    export let hash: string;
 
-	let prevSettings = {
+    let prevSettings = {
-		distanceMarkers: false,
+        distanceMarkers: false,
-		directionMarkers: false,
+        directionMarkers: false,
-		distanceUnits: 'metric',
+        distanceUnits: 'metric',
-		velocityUnits: 'speed',
+        velocityUnits: 'speed',
-		temperatureUnits: 'celsius',
+        temperatureUnits: 'celsius',
-		theme: 'system'
+        theme: 'system',
-	};
+    };
 
-	function applyOptions() {
+    function applyOptions() {
-		fileObservers.update(($fileObservers) => {
+        fileObservers.update(($fileObservers) => {
-			$fileObservers.clear();
+            $fileObservers.clear();
-			return $fileObservers;
+            return $fileObservers;
-		});
+        });
 
-		let downloads: Promise<GPXFile | null>[] = [];
+        let downloads: Promise<GPXFile | null>[] = [];
-		getFilesFromEmbeddingOptions(options).forEach((url) => {
+        getFilesFromEmbeddingOptions(options).forEach((url) => {
-			downloads.push(
+            downloads.push(
-				fetch(url)
+                fetch(url)
-					.then((response) => response.blob())
+                    .then((response) => response.blob())
-					.then((blob) => new File([blob], url.split('/').pop() ?? url))
+                    .then((blob) => new File([blob], url.split('/').pop() ?? url))
-					.then(loadFile)
+                    .then(loadFile)
-			);
+            );
-		});
+        });
 
-		Promise.all(downloads).then((files) => {
+        Promise.all(downloads).then((files) => {
-			let ids: string[] = [];
+            let ids: string[] = [];
-			let bounds = {
+            let bounds = {
-				southWest: {
+                southWest: {
-					lat: 90,
+                    lat: 90,
-					lon: 180
+                    lon: 180,
-				},
+                },
-				northEast: {
+                northEast: {
-					lat: -90,
+                    lat: -90,
-					lon: -180
+                    lon: -180,
-				}
+                },
-			};
+            };
 
-			fileObservers.update(($fileObservers) => {
+            fileObservers.update(($fileObservers) => {
-				files.forEach((file, index) => {
+                files.forEach((file, index) => {
-					if (file === null) {
+                    if (file === null) {
-						return;
+                        return;
-					}
+                    }
 
-					let id = `gpx-${index}-embed`;
+                    let id = `gpx-${index}-embed`;
-					file._data.id = id;
+                    file._data.id = id;
-					let statistics = new GPXStatisticsTree(file);
+                    let statistics = new GPXStatisticsTree(file);
 
-					$fileObservers.set(
+                    $fileObservers.set(
-						id,
+                        id,
-						readable({
+                        readable({
-							file,
+                            file,
-							statistics
+                            statistics,
-						})
+                        })
-					);
+                    );
 
-					ids.push(id);
+                    ids.push(id);
-					let fileBounds = statistics.getStatisticsFor(new ListFileItem(id)).global.bounds;
+                    let fileBounds = statistics.getStatisticsFor(new ListFileItem(id)).global
+                        .bounds;
 
-					bounds.southWest.lat = Math.min(bounds.southWest.lat, fileBounds.southWest.lat);
+                    bounds.southWest.lat = Math.min(bounds.southWest.lat, fileBounds.southWest.lat);
-					bounds.southWest.lon = Math.min(bounds.southWest.lon, fileBounds.southWest.lon);
+                    bounds.southWest.lon = Math.min(bounds.southWest.lon, fileBounds.southWest.lon);
-					bounds.northEast.lat = Math.max(bounds.northEast.lat, fileBounds.northEast.lat);
+                    bounds.northEast.lat = Math.max(bounds.northEast.lat, fileBounds.northEast.lat);
-					bounds.northEast.lon = Math.max(bounds.northEast.lon, fileBounds.northEast.lon);
+                    bounds.northEast.lon = Math.max(bounds.northEast.lon, fileBounds.northEast.lon);
-				});
+                });
 
-				return $fileObservers;
+                return $fileObservers;
-			});
+            });
 
-			$fileOrder = [...$fileOrder.filter((id) => !id.includes('embed')), ...ids];
+            $fileOrder = [...$fileOrder.filter((id) => !id.includes('embed')), ...ids];
 
-			selection.update(($selection) => {
+            selection.update(($selection) => {
-				$selection.clear();
+                $selection.clear();
-				ids.forEach((id) => {
+                ids.forEach((id) => {
-					$selection.toggle(new ListFileItem(id));
+                    $selection.toggle(new ListFileItem(id));
-				});
+                });
-				return $selection;
+                return $selection;
-			});
+            });
 
-			if (hash.length === 0) {
+            if (hash.length === 0) {
-				map.subscribe(($map) => {
+                map.subscribe(($map) => {
-					if ($map) {
+                    if ($map) {
-						$map.fitBounds(
+                        $map.fitBounds(
-							[
+                            [
-								bounds.southWest.lon,
+                                bounds.southWest.lon,
-								bounds.southWest.lat,
+                                bounds.southWest.lat,
-								bounds.northEast.lon,
+                                bounds.northEast.lon,
-								bounds.northEast.lat
+                                bounds.northEast.lat,
-							],
+                            ],
-							{
+                            {
-								padding: 80,
+                                padding: 80,
-								linear: true,
+                                linear: true,
-								easing: () => 1
+                                easing: () => 1,
-							}
+                            }
-						);
+                        );
-					}
+                    }
-				});
+                });
-			}
+            }
-		});
+        });
 
-		if (options.basemap !== $currentBasemap && allowedEmbeddingBasemaps.includes(options.basemap)) {
+        if (
-			$currentBasemap = options.basemap;
+            options.basemap !== $currentBasemap &&
-		}
+            allowedEmbeddingBasemaps.includes(options.basemap)
+        ) {
+            $currentBasemap = options.basemap;
+        }
 
-		if (options.distanceMarkers !== $distanceMarkers) {
+        if (options.distanceMarkers !== $distanceMarkers) {
-			$distanceMarkers = options.distanceMarkers;
+            $distanceMarkers = options.distanceMarkers;
-		}
+        }
 
-		if (options.directionMarkers !== $directionMarkers) {
+        if (options.directionMarkers !== $directionMarkers) {
-			$directionMarkers = options.directionMarkers;
+            $directionMarkers = options.directionMarkers;
-		}
+        }
 
-		if (options.distanceUnits !== $distanceUnits) {
+        if (options.distanceUnits !== $distanceUnits) {
-			$distanceUnits = options.distanceUnits;
+            $distanceUnits = options.distanceUnits;
-		}
+        }
 
-		if (options.velocityUnits !== $velocityUnits) {
+        if (options.velocityUnits !== $velocityUnits) {
-			$velocityUnits = options.velocityUnits;
+            $velocityUnits = options.velocityUnits;
-		}
+        }
 
-		if (options.temperatureUnits !== $temperatureUnits) {
+        if (options.temperatureUnits !== $temperatureUnits) {
-			$temperatureUnits = options.temperatureUnits;
+            $temperatureUnits = options.temperatureUnits;
-		}
+        }
 
-		if (options.theme !== $mode) {
+        if (options.theme !== $mode) {
-			setMode(options.theme);
+            setMode(options.theme);
-		}
+        }
-	}
+    }
 
-	onMount(() => {
+    onMount(() => {
-		prevSettings.distanceMarkers = $distanceMarkers;
+        prevSettings.distanceMarkers = $distanceMarkers;
-		prevSettings.directionMarkers = $directionMarkers;
+        prevSettings.directionMarkers = $directionMarkers;
-		prevSettings.distanceUnits = $distanceUnits;
+        prevSettings.distanceUnits = $distanceUnits;
-		prevSettings.velocityUnits = $velocityUnits;
+        prevSettings.velocityUnits = $velocityUnits;
-		prevSettings.temperatureUnits = $temperatureUnits;
+        prevSettings.temperatureUnits = $temperatureUnits;
-		prevSettings.theme = $mode ?? 'system';
+        prevSettings.theme = $mode ?? 'system';
-	});
+    });
 
-	$: if (browser && options) {
+    $: if (browser && options) {
-		applyOptions();
+        applyOptions();
-	}
+    }
 
-	$: if ($fileOrder) {
+    $: if ($fileOrder) {
-		updateGPXData();
+        updateGPXData();
-	}
+    }
 
-	onDestroy(() => {
+    onDestroy(() => {
-		if ($distanceMarkers !== prevSettings.distanceMarkers) {
+        if ($distanceMarkers !== prevSettings.distanceMarkers) {
-			$distanceMarkers = prevSettings.distanceMarkers;
+            $distanceMarkers = prevSettings.distanceMarkers;
-		}
+        }
 
-		if ($directionMarkers !== prevSettings.directionMarkers) {
+        if ($directionMarkers !== prevSettings.directionMarkers) {
-			$directionMarkers = prevSettings.directionMarkers;
+            $directionMarkers = prevSettings.directionMarkers;
-		}
+        }
 
-		if ($distanceUnits !== prevSettings.distanceUnits) {
+        if ($distanceUnits !== prevSettings.distanceUnits) {
-			$distanceUnits = prevSettings.distanceUnits;
+            $distanceUnits = prevSettings.distanceUnits;
-		}
+        }
 
-		if ($velocityUnits !== prevSettings.velocityUnits) {
+        if ($velocityUnits !== prevSettings.velocityUnits) {
-			$velocityUnits = prevSettings.velocityUnits;
+            $velocityUnits = prevSettings.velocityUnits;
-		}
+        }
 
-		if ($temperatureUnits !== prevSettings.temperatureUnits) {
+        if ($temperatureUnits !== prevSettings.temperatureUnits) {
-			$temperatureUnits = prevSettings.temperatureUnits;
+            $temperatureUnits = prevSettings.temperatureUnits;
-		}
+        }
 
-		if ($mode !== prevSettings.theme) {
+        if ($mode !== prevSettings.theme) {
-			setMode(prevSettings.theme);
+            setMode(prevSettings.theme);
-		}
+        }
 
-		$selection.clear();
+        $selection.clear();
-		$fileObservers.clear();
+        $fileObservers.clear();
-		$fileOrder = $fileOrder.filter((id) => !id.includes('embed'));
+        $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 {$fileObservers.size > 1 ? 'horizontal' : ''}"
-			accessToken={options.token}
+            accessToken={options.token}
-			geocoder={false}
+            geocoder={false}
-			geolocate={false}
+            geolocate={false}
-			hash={useHash}
+            hash={useHash}
-		/>
+        />
-		<OpenIn bind:files={options.files} bind:ids={options.ids} />
+        <OpenIn bind:files={options.files} bind:ids={options.ids} />
-		<LayerControl />
+        <LayerControl />
-		<GPXLayers />
+        <GPXLayers />
-		{#if $fileObservers.size > 1}
+        {#if $fileObservers.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 px-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}
+            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}
-				additionalDatasets={[
+                additionalDatasets={[
-					options.elevation.speed ? 'speed' : null,
+                    options.elevation.speed ? 'speed' : null,
-					options.elevation.hr ? 'hr' : null,
+                    options.elevation.hr ? 'hr' : null,
-					options.elevation.cad ? 'cad' : null,
+                    options.elevation.cad ? 'cad' : null,
-					options.elevation.temp ? 'temp' : null,
+                    options.elevation.temp ? 'temp' : null,
-					options.elevation.power ? 'power' : null
+                    options.elevation.power ? 'power' : null,
-				].filter((dataset) => dataset !== null)}
+                ].filter((dataset) => dataset !== null)}
-				elevationFill={options.elevation.fill}
+                elevationFill={options.elevation.fill}
-				showControls={options.elevation.controls}
+                showControls={options.elevation.controls}
-			/>
+            />
-		{/if}
+        {/if}
-	</div>
+    </div>
 </div>

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

@@ -39,14 +39,14 @@ export const defaultEmbeddingOptions = {
         hr: false,
         cad: false,
         temp: false,
-        power: false
+        power: false,
     },
     distanceMarkers: false,
     directionMarkers: false,
     distanceUnits: 'metric',
     velocityUnits: 'speed',
     temperatureUnits: 'celsius',
-    theme: 'system'
+    theme: 'system',
 };
 
 export function getDefaultEmbeddingOptions(): EmbeddingOptions {
@@ -59,7 +59,11 @@ export function getMergedEmbeddingOptions(
 ): 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])) {
+        if (
+            typeof options[key] === 'object' &&
+            options[key] !== null &&
+            !Array.isArray(options[key])
+        ) {
             mergedOptions[key] = getMergedEmbeddingOptions(options[key], defaultOptions[key]);
         } else {
             mergedOptions[key] = options[key];
@@ -79,7 +83,10 @@ export function getCleanedEmbeddingOptions(
             cleanedOptions[key] !== null &&
             !Array.isArray(cleanedOptions[key])
         ) {
-            cleanedOptions[key] = getCleanedEmbeddingOptions(cleanedOptions[key], defaultOptions[key]);
+            cleanedOptions[key] = getCleanedEmbeddingOptions(
+                cleanedOptions[key],
+                defaultOptions[key]
+            );
             if (Object.keys(cleanedOptions[key]).length === 0) {
                 delete cleanedOptions[key];
             }
@@ -141,7 +148,7 @@ export function convertOldEmbeddingOptions(options: URLSearchParams): any {
     }
     if (options.has('slope')) {
         newOptions.elevation = {
-            fill: 'slope'
+            fill: 'slope',
         };
     }
     return newOptions;

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

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

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

@@ -1,89 +1,89 @@
 <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 { fileObservers, settings } from '$lib/db';
-	import { setContext } from 'svelte';
+    import { setContext } from 'svelte';
-	import { ListFileItem, ListLevel, ListRootItem, allowedPastes } from './FileList';
+    import { ListFileItem, ListLevel, ListRootItem, allowedPastes } from './FileList';
-	import { copied, pasteSelection, selectAll, selection } from './Selection';
+    import { copied, pasteSelection, selectAll, selection } from './Selection';
-	import { ClipboardPaste, FileStack, Plus } from 'lucide-svelte';
+    import { ClipboardPaste, FileStack, Plus } from 'lucide-svelte';
-	import Shortcut from '$lib/components/Shortcut.svelte';
+    import Shortcut from '$lib/components/Shortcut.svelte';
-	import { _ } from 'svelte-i18n';
+    import { _ } from 'svelte-i18n';
-	import { createFile } from '$lib/stores';
+    import { createFile } from '$lib/stores';
 
-	export let orientation: 'vertical' | 'horizontal';
+    export let orientation: 'vertical' | 'horizontal';
-	export let recursive = false;
+    export let recursive = false;
 
-	setContext('orientation', orientation);
+    setContext('orientation', orientation);
-	setContext('recursive', recursive);
+    setContext('recursive', recursive);
 
-	const { verticalFileView } = settings;
+    const { treeFileView } = settings;
 
-	verticalFileView.subscribe(($vertical) => {
+    treeFileView.subscribe(($vertical) => {
-		if ($vertical) {
+        if ($vertical) {
-			selection.update(($selection) => {
+            selection.update(($selection) => {
-				$selection.forEach((item) => {
+                $selection.forEach((item) => {
-					if ($selection.hasAnyChildren(item, false)) {
+                    if ($selection.hasAnyChildren(item, false)) {
-						$selection.toggle(item);
+                        $selection.toggle(item);
-					}
+                    }
-				});
+                });
-				return $selection;
+                return $selection;
-			});
+            });
-		} else {
+        } else {
-			selection.update(($selection) => {
+            selection.update(($selection) => {
-				$selection.forEach((item) => {
+                $selection.forEach((item) => {
-					if (!(item instanceof ListFileItem)) {
+                    if (!(item instanceof ListFileItem)) {
-						$selection.toggle(item);
+                        $selection.toggle(item);
-						$selection.set(new ListFileItem(item.getFileId()), true);
+                        $selection.set(new ListFileItem(item.getFileId()), true);
-					}
+                    }
-				});
+                });
-				return $selection;
+                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' ? '' : 'mt-1 h-2'}
-	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'} {$$props.class ?? ''}"
-		{...$$restProps}
+        {...$$restProps}
-	>
+    >
-		<FileListNode bind:node={$fileObservers} item={new ListRootItem()} />
+        <FileListNode bind:node={$fileObservers} 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 on:click={createFile}>
-						<Plus size="16" class="mr-1" />
+                        <Plus size="16" class="mr-1" />
-						{$_('menu.new_file')}
+                        {$_('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 on:click={selectAll} disabled={$fileObservers.size === 0}>
-						<FileStack size="16" class="mr-1" />
+                        <FileStack size="16" class="mr-1" />
-						{$_('menu.select_all')}
+                        {$_('menu.select_all')}
-						<Shortcut key="A" ctrl={true} />
+                        <Shortcut key="A" ctrl={true} />
-					</ContextMenu.Item>
+                    </ContextMenu.Item>
-					<ContextMenu.Separator />
+                    <ContextMenu.Separator />
-					<ContextMenu.Item
+                    <ContextMenu.Item
-						disabled={$copied === undefined ||
+                        disabled={$copied === undefined ||
-							$copied.length === 0 ||
+                            $copied.length === 0 ||
-							!allowedPastes[$copied[0].level].includes(ListLevel.ROOT)}
+                            !allowedPastes[$copied[0].level].includes(ListLevel.ROOT)}
-						on:click={pasteSelection}
+                        on:click={pasteSelection}
-					>
+                    >
-						<ClipboardPaste size="16" class="mr-1" />
+                        <ClipboardPaste size="16" class="mr-1" />
-						{$_('menu.paste')}
+                        {$_('menu.paste')}
-						<Shortcut key="V" ctrl={true} />
+                        <Shortcut key="V" ctrl={true} />
-					</ContextMenu.Item>
+                    </ContextMenu.Item>
-				</ContextMenu.Content>
+                </ContextMenu.Content>
-			</ContextMenu.Root>
+            </ContextMenu.Root>
-		{/if}
+        {/if}
-	</div>
+    </div>
 </ScrollArea>

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

@@ -1,8 +1,8 @@
-import { dbUtils, getFile } from "$lib/db";
+import { dbUtils, getFile } from '$lib/db';
-import { freeze } from "immer";
+import { freeze } from 'immer';
-import { GPXFile, Track, TrackSegment, Waypoint } from "gpx";
+import { GPXFile, Track, TrackSegment, Waypoint } from 'gpx';
-import { selection } from "./Selection";
+import { selection } from './Selection';
-import { newGPXFile } from "$lib/stores";
+import { newGPXFile } from '$lib/stores';
 
 export enum ListLevel {
     ROOT,
@@ -10,7 +10,7 @@ export enum ListLevel {
     TRACK,
     SEGMENT,
     WAYPOINTS,
-    WAYPOINT
+    WAYPOINT,
 }
 
 export const allowedMoves: Record<ListLevel, ListLevel[]> = {
@@ -19,7 +19,7 @@ export const allowedMoves: Record<ListLevel, ListLevel[]> = {
     [ListLevel.TRACK]: [ListLevel.FILE, ListLevel.TRACK],
     [ListLevel.SEGMENT]: [ListLevel.FILE, ListLevel.TRACK, ListLevel.SEGMENT],
     [ListLevel.WAYPOINTS]: [ListLevel.WAYPOINTS],
-    [ListLevel.WAYPOINT]: [ListLevel.WAYPOINTS, ListLevel.WAYPOINT]
+    [ListLevel.WAYPOINT]: [ListLevel.WAYPOINTS, ListLevel.WAYPOINT],
 };
 
 export const allowedPastes: Record<ListLevel, ListLevel[]> = {
@@ -28,7 +28,7 @@ export const allowedPastes: Record<ListLevel, ListLevel[]> = {
     [ListLevel.TRACK]: [ListLevel.ROOT, ListLevel.FILE, ListLevel.TRACK],
     [ListLevel.SEGMENT]: [ListLevel.ROOT, ListLevel.FILE, ListLevel.TRACK, ListLevel.SEGMENT],
     [ListLevel.WAYPOINTS]: [ListLevel.FILE, ListLevel.WAYPOINTS, ListLevel.WAYPOINT],
-    [ListLevel.WAYPOINT]: [ListLevel.FILE, ListLevel.WAYPOINTS, ListLevel.WAYPOINT]
+    [ListLevel.WAYPOINT]: [ListLevel.FILE, ListLevel.WAYPOINTS, ListLevel.WAYPOINT],
 };
 
 export abstract class ListItem {
@@ -322,7 +322,13 @@ export function sortItems(items: ListItem[], reverse: boolean = false) {
     }
 }
 
-export function moveItems(fromParent: ListItem, toParent: ListItem, fromItems: ListItem[], toItems: ListItem[], remove: boolean = true) {
+export function moveItems(
+    fromParent: ListItem,
+    toParent: ListItem,
+    fromItems: ListItem[],
+    toItems: ListItem[],
+    remove: boolean = true
+) {
     if (fromItems.length === 0) {
         return;
     }
@@ -338,11 +344,18 @@ export function moveItems(fromParent: ListItem, toParent: ListItem, fromItems: L
                 context.push(file.clone());
             } else if (item instanceof ListTrackItem && item.getTrackIndex() < file.trk.length) {
                 context.push(file.trk[item.getTrackIndex()].clone());
-            } else if (item instanceof ListTrackSegmentItem && item.getTrackIndex() < file.trk.length && item.getSegmentIndex() < file.trk[item.getTrackIndex()].trkseg.length) {
+            } else if (
+                item instanceof ListTrackSegmentItem &&
+                item.getTrackIndex() < file.trk.length &&
+                item.getSegmentIndex() < file.trk[item.getTrackIndex()].trkseg.length
+            ) {
                 context.push(file.trk[item.getTrackIndex()].trkseg[item.getSegmentIndex()].clone());
             } else if (item instanceof ListWaypointsItem) {
                 context.push(file.wpt.map((wpt) => wpt.clone()));
-            } else if (item instanceof ListWaypointItem && item.getWaypointIndex() < file.wpt.length) {
+            } else if (
+                item instanceof ListWaypointItem &&
+                item.getWaypointIndex() < file.wpt.length
+            ) {
                 context.push(file.wpt[item.getWaypointIndex()].clone());
             }
         }
@@ -359,7 +372,12 @@ export function moveItems(fromParent: ListItem, toParent: ListItem, fromItems: L
                 if (item instanceof ListTrackItem) {
                     file.replaceTracks(item.getTrackIndex(), item.getTrackIndex(), []);
                 } else if (item instanceof ListTrackSegmentItem) {
-                    file.replaceTrackSegments(item.getTrackIndex(), item.getSegmentIndex(), item.getSegmentIndex(), []);
+                    file.replaceTrackSegments(
+                        item.getTrackIndex(),
+                        item.getSegmentIndex(),
+                        item.getSegmentIndex(),
+                        []
+                    );
                 } else if (item instanceof ListWaypointsItem) {
                     file.replaceWaypoints(0, file.wpt.length - 1, []);
                 } else if (item instanceof ListWaypointItem) {
@@ -371,25 +389,43 @@ export function moveItems(fromParent: ListItem, toParent: ListItem, fromItems: L
             toItems.forEach((item, i) => {
                 if (item instanceof ListTrackItem) {
                     if (context[i] instanceof Track) {
-                        file.replaceTracks(item.getTrackIndex(), item.getTrackIndex() - 1, [context[i]]);
+                        file.replaceTracks(item.getTrackIndex(), item.getTrackIndex() - 1, [
+                            context[i],
+                        ]);
                     } else if (context[i] instanceof TrackSegment) {
-                        file.replaceTracks(item.getTrackIndex(), item.getTrackIndex() - 1, [new Track({
+                        file.replaceTracks(item.getTrackIndex(), item.getTrackIndex() - 1, [
-                            trkseg: [context[i]]
+                            new Track({
-                        })]);
+                                trkseg: [context[i]],
+                            }),
+                        ]);
                     }
-                } else if (item instanceof ListTrackSegmentItem && context[i] instanceof TrackSegment) {
+                } else if (
-                    file.replaceTrackSegments(item.getTrackIndex(), item.getSegmentIndex(), item.getSegmentIndex() - 1, [context[i]]);
+                    item instanceof ListTrackSegmentItem &&
+                    context[i] instanceof TrackSegment
+                ) {
+                    file.replaceTrackSegments(
+                        item.getTrackIndex(),
+                        item.getSegmentIndex(),
+                        item.getSegmentIndex() - 1,
+                        [context[i]]
+                    );
                 } else if (item instanceof ListWaypointsItem) {
-                    if (Array.isArray(context[i]) && context[i].length > 0 && context[i][0] instanceof Waypoint) {
+                    if (
+                        Array.isArray(context[i]) &&
+                        context[i].length > 0 &&
+                        context[i][0] instanceof Waypoint
+                    ) {
                         file.replaceWaypoints(file.wpt.length, file.wpt.length - 1, context[i]);
                     } else if (context[i] instanceof Waypoint) {
                         file.replaceWaypoints(file.wpt.length, file.wpt.length - 1, [context[i]]);
                     }
                 } else if (item instanceof ListWaypointItem && context[i] instanceof Waypoint) {
-                    file.replaceWaypoints(item.getWaypointIndex(), item.getWaypointIndex() - 1, [context[i]]);
+                    file.replaceWaypoints(item.getWaypointIndex(), item.getWaypointIndex() - 1, [
+                        context[i],
+                    ]);
                 }
             });
-        }
+        },
     ];
 
     if (fromParent instanceof ListRootItem) {
@@ -400,35 +436,42 @@ export function moveItems(fromParent: ListItem, toParent: ListItem, fromItems: L
         callbacks.splice(0, 1);
     }
 
-    dbUtils.applyEachToFilesAndGlobal(files, callbacks, (files, context: (GPXFile | Track | TrackSegment | Waypoint[] | Waypoint)[]) => {
+    dbUtils.applyEachToFilesAndGlobal(
-        toItems.forEach((item, i) => {
+        files,
-            if (item instanceof ListFileItem) {
+        callbacks,
-                if (context[i] instanceof GPXFile) {
+        (files, context: (GPXFile | Track | TrackSegment | Waypoint[] | Waypoint)[]) => {
-                    let newFile = context[i];
+            toItems.forEach((item, i) => {
-                    if (remove) {
+                if (item instanceof ListFileItem) {
-                        files.delete(newFile._data.id);
+                    if (context[i] instanceof GPXFile) {
+                        let newFile = context[i];
+                        if (remove) {
+                            files.delete(newFile._data.id);
+                        }
+                        newFile._data.id = item.getFileId();
+                        files.set(item.getFileId(), freeze(newFile));
+                    } else if (context[i] instanceof Track) {
+                        let newFile = newGPXFile();
+                        newFile._data.id = item.getFileId();
+                        if (context[i].name) {
+                            newFile.metadata.name = context[i].name;
+                        }
+                        newFile.replaceTracks(0, 0, [context[i]]);
+                        files.set(item.getFileId(), freeze(newFile));
+                    } else if (context[i] instanceof TrackSegment) {
+                        let newFile = newGPXFile();
+                        newFile._data.id = item.getFileId();
+                        newFile.replaceTracks(0, 0, [
+                            new Track({
+                                trkseg: [context[i]],
+                            }),
+                        ]);
+                        files.set(item.getFileId(), freeze(newFile));
                     }
-                    newFile._data.id = item.getFileId();
-                    files.set(item.getFileId(), freeze(newFile));
-                } else if (context[i] instanceof Track) {
-                    let newFile = newGPXFile();
-                    newFile._data.id = item.getFileId();
-                    if (context[i].name) {
-                        newFile.metadata.name = context[i].name;
-                    }
-                    newFile.replaceTracks(0, 0, [context[i]]);
-                    files.set(item.getFileId(), freeze(newFile));
-                } else if (context[i] instanceof TrackSegment) {
-                    let newFile = newGPXFile();
-                    newFile._data.id = item.getFileId();
-                    newFile.replaceTracks(0, 0, [new Track({
-                        trkseg: [context[i]]
-                    })]);
-                    files.set(item.getFileId(), freeze(newFile));
                 }
-            }
+            });
-        });
+        },
-    }, context);
+        context
+    );
 
     selection.update(($selection) => {
         $selection.clear();

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

@@ -1,83 +1,84 @@
 <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 { settings, type GPXFileWithStatistics } from '$lib/db';
-	import { get, 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 { afterUpdate, 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 './FileList';
+    } from './FileList';
-	import { _ } from 'svelte-i18n';
+    import { _ } from 'svelte-i18n';
-	import { selection } from './Selection';
+    import { selection } from './Selection';
 
-	export let node:
+    export let node:
-		| Map<string, Readable<GPXFileWithStatistics | undefined>>
+        | Map<string, Readable<GPXFileWithStatistics | undefined>>
-		| GPXTreeElement<AnyGPXTreeElement>
+        | GPXTreeElement<AnyGPXTreeElement>
-		| Waypoint[]
+        | Waypoint[]
-		| Waypoint;
+        | Waypoint;
-	export let item: ListItem;
+    export let item: ListItem;
 
-	let recursive = getContext<boolean>('recursive');
+    let recursive = getContext<boolean>('recursive');
 
-	let collapsible: CollapsibleTreeNode;
+    let collapsible: CollapsibleTreeNode;
 
-	$: label =
+    $: label =
-		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 ?? `${$_('gpx.track')} ${(item as ListTrackItem).trackIndex + 1}`)
-				: node instanceof TrackSegment
+              : node instanceof TrackSegment
-					? `${$_('gpx.segment')} ${(item as ListTrackSegmentItem).segmentIndex + 1}`
+                ? `${$_('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
+                    `${$_('gpx.waypoint')} ${(item as ListWaypointItem).waypointIndex + 1}`)
-							? $_('gpx.waypoints')
+                  : node instanceof GPXFile && item instanceof ListWaypointsItem
-							: '';
+                    ? $_('gpx.waypoints')
+                    : '';
 
-	const { verticalFileView } = settings;
+    const { treeFileView } = settings;
 
-	function openIfSelectedChild() {
+    function openIfSelectedChild() {
-		if (collapsible && get(verticalFileView) && $selection.hasAnyChildren(item, false)) {
+        if (collapsible && get(treeFileView) && $selection.hasAnyChildren(item, false)) {
-			collapsible.openNode();
+            collapsible.openNode();
-		}
+        }
-	}
+    }
 
-	if ($selection) {
+    if ($selection) {
-		openIfSelectedChild();
+        openIfSelectedChild();
-	}
+    }
 
-	afterUpdate(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" />
+        <FileListNodeLabel {node} {item} {label} slot="trigger" />
-		<div slot="content" class="ml-2">
+        <div slot="content" class="ml-2">
-			{#key node}
+            {#key node}
-				<FileListNodeContent {node} {item} />
+                <FileListNodeContent {node} {item} />
-			{/key}
+            {/key}
-		</div>
+        </div>
-	</CollapsibleTreeNode>
+    </CollapsibleTreeNode>
 {:else}
-	<FileListNodeLabel {node} {item} {label} />
+    <FileListNodeLabel {node} {item} {label} />
 {/if}

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

@@ -19,7 +19,7 @@
         ListWaypointsItem,
         allowedMoves,
         moveItems,
-        type ListItem
+        type ListItem,
     } from './FileList';
     import { selection } from './Selection';
     import { isMac } from '$lib/utils';
@@ -113,7 +113,7 @@
                     Sortable.utils.select(element);
                     element.scrollIntoView({
                         behavior: 'smooth',
-                        block: 'nearest'
+                        block: 'nearest',
                     });
                 } else {
                     Sortable.utils.deselect(element);
@@ -155,7 +155,7 @@
             group: {
                 name: sortableLevel,
                 pull: allowedMoves[sortableLevel],
-                put: true
+                put: true,
             },
             direction: orientation,
             forceAutoScrollFallback: true,
@@ -233,16 +233,16 @@
 
                     moveItems(fromItem, toItem, fromItems, toItems);
                 }
-            }
+            },
         });
         Object.defineProperty(sortable, '_item', {
             value: item,
-            writable: true
+            writable: true,
         });
 
         Object.defineProperty(sortable, '_waypointRoot', {
             value: waypointRoot,
-            writable: true
+            writable: true,
         });
     }
 

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

@@ -1,314 +1,335 @@
 <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 { 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,
+        Maximize,
-		Scissors,
+        Scissors,
-		FileStack,
+        FileStack,
-		FileX
+        FileX,
-	} from 'lucide-svelte';
+    } from 'lucide-svelte';
-	import {
+    import {
-		ListFileItem,
+        ListFileItem,
-		ListLevel,
+        ListLevel,
-		ListTrackItem,
+        ListTrackItem,
-		ListWaypointItem,
+        ListWaypointItem,
-		allowedPastes,
+        allowedPastes,
-		type ListItem
+        type ListItem,
-	} from './FileList';
+    } from './FileList';
-	import {
+    import {
-		copied,
+        copied,
-		copySelection,
+        copySelection,
-		cut,
+        cut,
-		cutSelection,
+        cutSelection,
-		pasteSelection,
+        pasteSelection,
-		selectAll,
+        selectAll,
-		selectItem,
+        selectItem,
-		selection
+        selection,
-	} from './Selection';
+    } from './Selection';
-	import { getContext } from 'svelte';
+    import { getContext } from 'svelte';
-	import { get } from 'svelte/store';
+    import { get } from 'svelte/store';
-	import {
+    import {
-		allHidden,
+        allHidden,
-		editMetadata,
+        editMetadata,
-		editStyle,
+        editStyle,
-		embedding,
+        embedding,
-		centerMapOnSelection,
+        centerMapOnSelection,
-		gpxLayers,
+        gpxLayers,
-		map
+        map,
-	} from '$lib/stores';
+    } from '$lib/stores';
-	import { GPXTreeElement, Track, type AnyGPXTreeElement, Waypoint, GPXFile } from 'gpx';
+    import { GPXTreeElement, Track, type AnyGPXTreeElement, Waypoint, GPXFile } from 'gpx';
-	import { _ } from 'svelte-i18n';
+    import { _ } from 'svelte-i18n';
-	import MetadataDialog from './MetadataDialog.svelte';
+    import MetadataDialog from './MetadataDialog.svelte';
-	import StyleDialog from './StyleDialog.svelte';
+    import StyleDialog from './StyleDialog.svelte';
-	import { waypointPopup } from '$lib/components/gpx-layer/GPXLayerPopup';
+    import { waypointPopup } from '$lib/components/gpx-layer/GPXLayerPopup';
+    import { getSymbolKey, symbols } from '$lib/assets/symbols';
 
-	export let node: GPXTreeElement<AnyGPXTreeElement> | Waypoint[] | Waypoint;
+    export let node: GPXTreeElement<AnyGPXTreeElement> | Waypoint[] | Waypoint;
-	export let item: ListItem;
+    export let item: ListItem;
-	export let label: string | undefined;
+    export let label: string | undefined;
 
-	let orientation = getContext<'vertical' | 'horizontal'>('orientation');
+    let orientation = getContext<'vertical' | 'horizontal'>('orientation');
 
-	$: singleSelection = $selection.size === 1;
+    $: singleSelection = $selection.size === 1;
 
-	let nodeColors: string[] = [];
+    let nodeColors: string[] = [];
 
-	$: if (node && $map) {
+    $: if (node && $map) {
-		nodeColors = [];
+        nodeColors = [];
 
-		if (node instanceof GPXFile) {
+        if (node instanceof GPXFile) {
-			let style = node.getStyle();
+            let defaultColor = undefined;
 
-			let layer = gpxLayers.get(item.getFileId());
+            let layer = gpxLayers.get(item.getFileId());
-			if (layer) {
+            if (layer) {
-				style.color.push(layer.layerColor);
+                defaultColor = layer.layerColor;
-			}
+            }
 
-			style.color.forEach((c) => {
+            let style = node.getStyle(defaultColor);
-				if (!nodeColors.includes(c)) {
+            style.color.forEach((c) => {
-					nodeColors.push(c);
+                if (!nodeColors.includes(c)) {
-				}
+                    nodeColors.push(c);
-			});
+                }
-		} else if (node instanceof Track) {
+            });
-			let style = node.getStyle();
+        } else if (node instanceof Track) {
-			if (style) {
+            let style = node.getStyle();
-				if (style.color && !nodeColors.includes(style.color)) {
+            if (style) {
-					nodeColors.push(style.color);
+                if (style['gpx_style:color'] && !nodeColors.includes(style['gpx_style:color'])) {
-				}
+                    nodeColors.push(style['gpx_style:color']);
-			}
+                }
-			if (nodeColors.length === 0) {
+            }
-				let layer = gpxLayers.get(item.getFileId());
+            if (nodeColors.length === 0) {
-				if (layer) {
+                let layer = gpxLayers.get(item.getFileId());
-					nodeColors.push(layer.layerColor);
+                if (layer) {
-				}
+                    nodeColors.push(layer.layerColor);
-			}
+                }
-		}
+            }
-	}
+        }
+    }
 
-	let openEditMetadata: boolean = false;
+    $: symbolKey = node instanceof Waypoint ? getSymbolKey(node.sym) : undefined;
-	let openEditStyle: boolean = false;
 
-	$: openEditMetadata = $editMetadata && singleSelection && $selection.has(item);
+    let openEditMetadata: boolean = false;
-	$: openEditStyle =
+    let openEditStyle: boolean = false;
-		$editStyle &&
+
-		$selection.has(item) &&
+    $: openEditMetadata = $editMetadata && singleSelection && $selection.has(item);
-		$selection.getSelected().findIndex((i) => i.getFullId() === item.getFullId()) === 0;
+    $: openEditStyle =
-	$: hidden = item.level === ListLevel.WAYPOINTS ? node._data.hiddenWpt : node._data.hidden;
+        $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-no-static-element-interactions -->
 <ContextMenu.Root
-	onOpenChange={(open) => {
+    onOpenChange={(open) => {
-		if (open) {
+        if (open) {
-			if (!get(selection).has(item)) {
+            if (!get(selection).has(item)) {
-				selectItem(item);
+                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 px-1 border-none overflow-hidden focus-visible:ring-0 focus-visible:ring-offset-0 {orientation ===
-			'vertical'
+            'vertical'
-				? 'h-fit'
+                ? 'h-fit'
-				: 'h-9 px-1.5 shadow-md'} pointer-events-auto"
+                : 'h-9 px-1.5 shadow-md'} 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-1 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(',')})"
-				/>
+                />
-			{/if}
+            {/if}
-			<span
+            <span
-				class="w-full text-left truncate py-1 flex flex-row items-center {hidden
+                class="w-full text-left truncate py-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) => {
+                on:contextmenu={(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={() => {
+                on:mouseenter={() => {
-					if (item instanceof ListWaypointItem) {
+                    if (item instanceof ListWaypointItem) {
-						let layer = gpxLayers.get(item.getFileId());
+                        let layer = gpxLayers.get(item.getFileId());
-						let file = getFile(item.getFileId());
+                        let file = 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) {
-								waypointPopup?.setItem({ item: waypoint, fileId: item.getFileId() });
+                                waypointPopup?.setItem({
-							}
+                                    item: waypoint,
-						}
+                                    fileId: item.getFileId(),
-					}
+                                });
-				}}
+                            }
-				on:mouseleave={() => {
+                        }
-					if (item instanceof ListWaypointItem) {
+                    }
-						let layer = gpxLayers.get(item.getFileId());
+                }}
-						if (layer) {
+                on:mouseleave={() => {
-							waypointPopup?.setItem(null);
+                    if (item instanceof ListWaypointItem) {
-						}
+                        let layer = gpxLayers.get(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="mr-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>
+                        <svelte:component
-				{#if hidden}
+                            this={symbols[symbolKey].icon}
-					<EyeOff
+                            size="16"
-						size="12"
+                            class="mr-1 shrink-0"
-						class="shrink-0 mt-1 ml-1 {orientation === 'vertical' ? 'mr-2' : ''} {item.level ===
+                        />
-							ListLevel.SEGMENT || item.level === ListLevel.WAYPOINT
+                    {:else}
-							? 'mr-3'
+                        <MapPin size="16" class="mr-1 shrink-0" />
-							: ''}"
+                    {/if}
-					/>
+                {/if}
-				{/if}
+                <span
-			</span>
+                    class="grow select-none truncate {orientation === 'vertical'
-		</Button>
+                        ? 'last:mr-2'
-	</ContextMenu.Trigger>
+                        : ''}"
-	<ContextMenu.Content>
+                >
-		{#if item instanceof ListFileItem || item instanceof ListTrackItem}
+                    {label}
-			<ContextMenu.Item disabled={!singleSelection} on:click={() => ($editMetadata = true)}>
+                </span>
-				<Info size="16" class="mr-1" />
+                {#if hidden}
-				{$_('menu.metadata.button')}
+                    <EyeOff
-				<Shortcut key="I" ctrl={true} />
+                        size="12"
-			</ContextMenu.Item>
+                        class="shrink-0 mt-1 ml-1 {orientation === 'vertical'
-			<ContextMenu.Item on:click={() => ($editStyle = true)}>
+                            ? 'mr-2'
-				<PaintBucket size="16" class="mr-1" />
+                            : ''} {item.level === ListLevel.SEGMENT ||
-				{$_('menu.style.button')}
+                        item.level === ListLevel.WAYPOINT
-			</ContextMenu.Item>
+                            ? 'mr-3'
-		{/if}
+                            : ''}"
-		<ContextMenu.Item
+                    />
-			on:click={() => {
+                {/if}
-				if ($allHidden) {
+            </span>
-					dbUtils.setHiddenToSelection(false);
+        </Button>
-				} else {
+    </ContextMenu.Trigger>
-					dbUtils.setHiddenToSelection(true);
+    <ContextMenu.Content>
-				}
+        {#if item instanceof ListFileItem || item instanceof ListTrackItem}
-			}}
+            <ContextMenu.Item disabled={!singleSelection} on:click={() => ($editMetadata = true)}>
-		>
+                <Info size="16" class="mr-1" />
-			{#if $allHidden}
+                {$_('menu.metadata.button')}
-				<Eye size="16" class="mr-1" />
+                <Shortcut key="I" ctrl={true} />
-				{$_('menu.unhide')}
+            </ContextMenu.Item>
-			{:else}
+            <ContextMenu.Item on:click={() => ($editStyle = true)}>
-				<EyeOff size="16" class="mr-1" />
+                <PaintBucket size="16" class="mr-1" />
-				{$_('menu.hide')}
+                {$_('menu.style.button')}
-			{/if}
+            </ContextMenu.Item>
-			<Shortcut key="H" ctrl={true} />
+        {/if}
-		</ContextMenu.Item>
+        <ContextMenu.Item
-		<ContextMenu.Separator />
+            on:click={() => {
-		{#if orientation === 'vertical'}
+                if ($allHidden) {
-			{#if item instanceof ListFileItem}
+                    dbUtils.setHiddenToSelection(false);
-				<ContextMenu.Item
+                } else {
-					disabled={!singleSelection}
+                    dbUtils.setHiddenToSelection(true);
-					on:click={() => dbUtils.addNewTrack(item.getFileId())}
+                }
-				>
+            }}
-					<Plus size="16" class="mr-1" />
+        >
-					{$_('menu.new_track')}
+            {#if $allHidden}
-				</ContextMenu.Item>
+                <Eye size="16" class="mr-1" />
-				<ContextMenu.Separator />
+                {$_('menu.unhide')}
-			{:else if item instanceof ListTrackItem}
+            {:else}
-				<ContextMenu.Item
+                <EyeOff size="16" class="mr-1" />
-					disabled={!singleSelection}
+                {$_('menu.hide')}
-					on:click={() => dbUtils.addNewSegment(item.getFileId(), item.getTrackIndex())}
+            {/if}
-				>
+            <Shortcut key="H" ctrl={true} />
-					<Plus size="16" class="mr-1" />
+        </ContextMenu.Item>
-					{$_('menu.new_segment')}
+        <ContextMenu.Separator />
-				</ContextMenu.Item>
+        {#if orientation === 'vertical'}
-				<ContextMenu.Separator />
+            {#if item instanceof ListFileItem}
-			{/if}
+                <ContextMenu.Item
-		{/if}
+                    disabled={!singleSelection}
-		{#if item.level !== ListLevel.WAYPOINTS}
+                    on:click={() => dbUtils.addNewTrack(item.getFileId())}
-			<ContextMenu.Item on:click={selectAll}>
+                >
-				<FileStack size="16" class="mr-1" />
+                    <Plus size="16" class="mr-1" />
-				{$_('menu.select_all')}
+                    {$_('menu.new_track')}
-				<Shortcut key="A" ctrl={true} />
+                </ContextMenu.Item>
-			</ContextMenu.Item>
+                <ContextMenu.Separator />
-		{/if}
+            {:else if item instanceof ListTrackItem}
-		<ContextMenu.Item on:click={centerMapOnSelection}>
+                <ContextMenu.Item
-			<Maximize size="16" class="mr-1" />
+                    disabled={!singleSelection}
-			{$_('menu.center')}
+                    on:click={() => dbUtils.addNewSegment(item.getFileId(), item.getTrackIndex())}
-			<Shortcut key="⏎" ctrl={true} />
+                >
-		</ContextMenu.Item>
+                    <Plus size="16" class="mr-1" />
-		<ContextMenu.Separator />
+                    {$_('menu.new_segment')}
-		<ContextMenu.Item on:click={dbUtils.duplicateSelection}>
+                </ContextMenu.Item>
-			<Copy size="16" class="mr-1" />
+                <ContextMenu.Separator />
-			{$_('menu.duplicate')}
+            {/if}
-			<Shortcut key="D" ctrl={true} /></ContextMenu.Item
+        {/if}
-		>
+        {#if item.level !== ListLevel.WAYPOINTS}
-		{#if orientation === 'vertical'}
+            <ContextMenu.Item on:click={selectAll}>
-			<ContextMenu.Item on:click={copySelection}>
+                <FileStack size="16" class="mr-1" />
-				<ClipboardCopy size="16" class="mr-1" />
+                {$_('menu.select_all')}
-				{$_('menu.copy')}
+                <Shortcut key="A" ctrl={true} />
-				<Shortcut key="C" ctrl={true} />
+            </ContextMenu.Item>
-			</ContextMenu.Item>
+        {/if}
-			<ContextMenu.Item on:click={cutSelection}>
+        <ContextMenu.Item on:click={centerMapOnSelection}>
-				<Scissors size="16" class="mr-1" />
+            <Maximize size="16" class="mr-1" />
-				{$_('menu.cut')}
+            {$_('menu.center')}
-				<Shortcut key="X" ctrl={true} />
+            <Shortcut key="⏎" ctrl={true} />
-			</ContextMenu.Item>
+        </ContextMenu.Item>
-			<ContextMenu.Item
+        <ContextMenu.Separator />
-				disabled={$copied === undefined ||
+        <ContextMenu.Item on:click={dbUtils.duplicateSelection}>
-					$copied.length === 0 ||
+            <Copy size="16" class="mr-1" />
-					!allowedPastes[$copied[0].level].includes(item.level)}
+            {$_('menu.duplicate')}
-				on:click={pasteSelection}
+            <Shortcut key="D" ctrl={true} /></ContextMenu.Item
-			>
+        >
-				<ClipboardPaste size="16" class="mr-1" />
+        {#if orientation === 'vertical'}
-				{$_('menu.paste')}
+            <ContextMenu.Item on:click={copySelection}>
-				<Shortcut key="V" ctrl={true} />
+                <ClipboardCopy size="16" class="mr-1" />
-			</ContextMenu.Item>
+                {$_('menu.copy')}
-		{/if}
+                <Shortcut key="C" ctrl={true} />
-		<ContextMenu.Separator />
+            </ContextMenu.Item>
-		<ContextMenu.Item on:click={dbUtils.deleteSelection}>
+            <ContextMenu.Item on:click={cutSelection}>
-			{#if item instanceof ListFileItem}
+                <Scissors size="16" class="mr-1" />
-				<FileX size="16" class="mr-1" />
+                {$_('menu.cut')}
-				{$_('menu.close')}
+                <Shortcut key="X" ctrl={true} />
-			{:else}
+            </ContextMenu.Item>
-				<Trash2 size="16" class="mr-1" />
+            <ContextMenu.Item
-				{$_('menu.delete')}
+                disabled={$copied === undefined ||
-			{/if}
+                    $copied.length === 0 ||
-			<Shortcut key="⌫" ctrl={true} />
+                    !allowedPastes[$copied[0].level].includes(item.level)}
-		</ContextMenu.Item>
+                on:click={pasteSelection}
-	</ContextMenu.Content>
+            >
+                <ClipboardPaste size="16" class="mr-1" />
+                {$_('menu.paste')}
+                <Shortcut key="V" ctrl={true} />
+            </ContextMenu.Item>
+        {/if}
+        <ContextMenu.Separator />
+        <ContextMenu.Item on:click={dbUtils.deleteSelection}>
+            {#if item instanceof ListFileItem}
+                <FileX size="16" class="mr-1" />
+                {$_('menu.close')}
+            {:else}
+                <Trash2 size="16" class="mr-1" />
+                {$_('menu.delete')}
+            {/if}
+            <Shortcut key="⌫" ctrl={true} />
+        </ContextMenu.Item>
+    </ContextMenu.Content>
 </ContextMenu.Root>

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

@@ -1,23 +1,23 @@
 <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 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 './FileList';
+    import { ListFileItem } from './FileList';
 
-	export let file: Readable<GPXFileWithStatistics | undefined>;
+    export let file: Readable<GPXFileWithStatistics | undefined>;
 
-	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

@@ -17,15 +17,15 @@
 
     let name: string =
         node instanceof GPXFile
-            ? node.metadata.name ?? ''
+            ? (node.metadata.name ?? '')
             : node instanceof Track
-              ? node.name ?? ''
+              ? (node.name ?? '')
               : '';
     let description: string =
         node instanceof GPXFile
-            ? node.metadata.desc ?? ''
+            ? (node.metadata.desc ?? '')
             : node instanceof Track
-              ? node.desc ?? ''
+              ? (node.desc ?? '')
               : '';
 
     $: if (!open) {

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

@@ -1,12 +1,23 @@
-import { get, writable } from "svelte/store";
+import { get, writable } from 'svelte/store';
-import { ListFileItem, ListItem, ListRootItem, ListTrackItem, ListTrackSegmentItem, ListWaypointItem, ListLevel, sortItems, ListWaypointsItem, moveItems } from "./FileList";
+import {
-import { fileObservers, getFile, getFileIds, settings } from "$lib/db";
+    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
+        [key: string | number]: SelectionTreeType;
     };
     size: number = 0;
 
@@ -67,7 +78,11 @@ export class SelectionTreeType {
     }
 
     hasAnyParent(item: ListItem, self: boolean = true): boolean {
-        if (this.selected && this.item.level <= item.level && (self || this.item.level < item.level)) {
+        if (
+            this.selected &&
+            this.item.level <= item.level &&
+            (self || this.item.level < item.level)
+        ) {
             return this.selected;
         }
         let id = item.getIdAtLevel(this.item.level);
@@ -80,7 +95,11 @@ export class SelectionTreeType {
     }
 
     hasAnyChildren(item: ListItem, self: boolean = true, ignoreIds?: (string | number)[]): boolean {
-        if (this.selected && this.item.level >= item.level && (self || this.item.level > item.level)) {
+        if (
+            this.selected &&
+            this.item.level >= item.level &&
+            (self || this.item.level > item.level)
+        ) {
             return this.selected;
         }
         let id = item.getIdAtLevel(this.item.level);
@@ -131,7 +150,7 @@ export class SelectionTreeType {
             delete this.children[id];
         }
     }
-};
+}
 
 export const selection = writable<SelectionTreeType>(new SelectionTreeType(new ListRootItem()));
 
@@ -181,7 +200,10 @@ export function selectAll() {
             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);
+                    $selection.set(
+                        new ListTrackSegmentItem(item.getFileId(), item.getTrackIndex(), segmentId),
+                        true
+                    );
                 });
             }
         } else if (item instanceof ListWaypointItem) {
@@ -205,14 +227,24 @@ export function getOrderedSelection(reverse: boolean = false): ListItem[] {
     return selected;
 }
 
-export function applyToOrderedItemsFromFile(selectedItems: ListItem[], callback: (fileId: string, level: ListLevel | undefined, items: ListItem[]) => void, reverse: boolean = true) {
+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) {
+                if (
+                    item instanceof ListFileItem ||
+                    item instanceof ListTrackItem ||
+                    item instanceof ListTrackSegmentItem ||
+                    item instanceof ListWaypointsItem ||
+                    item instanceof ListWaypointItem
+                ) {
                     items.push(item);
                 }
             }
@@ -225,7 +257,10 @@ export function applyToOrderedItemsFromFile(selectedItems: ListItem[], callback:
     });
 }
 
-export function applyToOrderedSelectedItemsFromFile(callback: (fileId: string, level: ListLevel | undefined, items: ListItem[]) => void, reverse: boolean = true) {
+export function applyToOrderedSelectedItemsFromFile(
+    callback: (fileId: string, level: ListLevel | undefined, items: ListItem[]) => void,
+    reverse: boolean = true
+) {
     applyToOrderedItemsFromFile(get(selection).getSelected(), callback, reverse);
 }
 
@@ -270,7 +305,11 @@ export function pasteSelection() {
     let startIndex: number | undefined = undefined;
 
     if (fromItems[0].level === toParent.level) {
-        if (toParent instanceof ListTrackItem || toParent instanceof ListTrackSegmentItem || toParent instanceof ListWaypointItem) {
+        if (
+            toParent instanceof ListTrackItem ||
+            toParent instanceof ListTrackSegmentItem ||
+            toParent instanceof ListWaypointItem
+        ) {
             startIndex = toParent.getId() + 1;
         }
         toParent = toParent.getParent();
@@ -288,20 +327,41 @@ export function pasteSelection() {
             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));
+                        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));
+                        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));
+                        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));
+                        toItems.push(
+                            new ListWaypointItem(
+                                toParent.getFileId(),
+                                (startIndex ?? toFile.wpt.length) + index
+                            )
+                        );
                     }
                 }
             });
@@ -312,4 +372,4 @@ export function pasteSelection() {
         moveItems(fromParent, toParent, fromItems, toItems, get(cut));
         resetCopied();
     }
-}
+}

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

@@ -1,167 +1,173 @@
 <script lang="ts">
-	import { Button } from '$lib/components/ui/button';
+    import { Button } from '$lib/components/ui/button';
-	import { Input } from '$lib/components/ui/input';
+    import { Input } from '$lib/components/ui/input';
-	import { Label } from '$lib/components/ui/label/index.js';
+    import { Label } from '$lib/components/ui/label/index.js';
-	import { Slider } from '$lib/components/ui/slider';
+    import { Slider } from '$lib/components/ui/slider';
-	import * as Popover from '$lib/components/ui/popover';
+    import * as Popover from '$lib/components/ui/popover';
-	import { dbUtils, getFile, settings } from '$lib/db';
+    import { dbUtils, getFile, settings } from '$lib/db';
-	import { Save } from 'lucide-svelte';
+    import { Save } from 'lucide-svelte';
-	import { ListFileItem, ListTrackItem, type ListItem } from './FileList';
+    import { ListFileItem, ListTrackItem, type ListItem } from './FileList';
-	import { selection } from './Selection';
+    import { selection } from './Selection';
-	import { editStyle, gpxLayers } from '$lib/stores';
+    import { editStyle, gpxLayers } from '$lib/stores';
-	import { _ } from 'svelte-i18n';
+    import { _ } from 'svelte-i18n';
 
-	export let item: ListItem;
+    export let item: ListItem;
-	export let open = false;
+    export let open = false;
 
-	const { defaultOpacity, defaultWeight } = settings;
+    const { defaultOpacity, defaultWidth } = settings;
 
-	let colors: string[] = [];
+    let colors: string[] = [];
-	let color: string | undefined = undefined;
+    let color: string | undefined = undefined;
-	let opacity: number[] = [];
+    let opacity: number[] = [];
-	let weight: number[] = [];
+    let width: number[] = [];
-	let colorChanged = false;
+    let colorChanged = false;
-	let opacityChanged = false;
+    let opacityChanged = false;
-	let weightChanged = false;
+    let widthChanged = false;
 
-	function setStyleInputs() {
+    function setStyleInputs() {
-		colors = [];
+        colors = [];
-		opacity = [];
+        opacity = [];
-		weight = [];
+        width = [];
 
-		$selection.forEach((item) => {
+        $selection.forEach((item) => {
-			if (item instanceof ListFileItem) {
+            if (item instanceof ListFileItem) {
-				let file = getFile(item.getFileId());
+                let file = getFile(item.getFileId());
-				let layer = gpxLayers.get(item.getFileId());
+                let layer = gpxLayers.get(item.getFileId());
-				if (file && layer) {
+                if (file && layer) {
-					let style = file.getStyle();
+                    let style = file.getStyle();
-					style.color.push(layer.layerColor);
+                    style.color.push(layer.layerColor);
 
-					style.color.forEach((c) => {
+                    style.color.forEach((c) => {
-						if (!colors.includes(c)) {
+                        if (!colors.includes(c)) {
-							colors.push(c);
+                            colors.push(c);
-						}
+                        }
-					});
+                    });
-					style.opacity.forEach((o) => {
+                    style.opacity.forEach((o) => {
-						if (!opacity.includes(o)) {
+                        if (!opacity.includes(o)) {
-							opacity.push(o);
+                            opacity.push(o);
-						}
+                        }
-					});
+                    });
-					style.weight.forEach((w) => {
+                    style.width.forEach((w) => {
-						if (!weight.includes(w)) {
+                        if (!width.includes(w)) {
-							weight.push(w);
+                            width.push(w);
-						}
+                        }
-					});
+                    });
-				}
+                }
-			} else if (item instanceof ListTrackItem) {
+            } else if (item instanceof ListTrackItem) {
-				let file = getFile(item.getFileId());
+                let file = getFile(item.getFileId());
-				let layer = gpxLayers.get(item.getFileId());
+                let layer = gpxLayers.get(item.getFileId());
-				if (file && layer) {
+                if (file && layer) {
-					let track = file.trk[item.getTrackIndex()];
+                    let track = file.trk[item.getTrackIndex()];
-					let style = track.getStyle();
+                    let style = track.getStyle();
-					if (style) {
+                    if (style) {
-						if (style.color && !colors.includes(style.color)) {
+                        if (
-							colors.push(style.color);
+                            style['gpx_style:color'] &&
-						}
+                            !colors.includes(style['gpx_style:color'])
-						if (style.opacity && !opacity.includes(style.opacity)) {
+                        ) {
-							opacity.push(style.opacity);
+                            colors.push(style['gpx_style:color']);
-						}
+                        }
-						if (style.weight && !weight.includes(style.weight)) {
+                        if (
-							weight.push(style.weight);
+                            style['gpx_style:opacity'] &&
-						}
+                            !opacity.includes(style['gpx_style:opacity'])
-					}
+                        ) {
-					if (!colors.includes(layer.layerColor)) {
+                            opacity.push(style['gpx_style:opacity']);
-						colors.push(layer.layerColor);
+                        }
-					}
+                        if (style['gpx_style:width'] && !width.includes(style['gpx_style:width'])) {
-				}
+                            width.push(style['gpx_style:width']);
-			}
+                        }
-		});
+                    }
+                    if (!colors.includes(layer.layerColor)) {
+                        colors.push(layer.layerColor);
+                    }
+                }
+            }
+        });
 
-		color = colors[0];
+        color = colors[0];
-		opacity = [opacity[0] ?? $defaultOpacity];
+        opacity = [opacity[0] ?? $defaultOpacity];
-		weight = [weight[0] ?? $defaultWeight];
+        width = [width[0] ?? $defaultWidth];
 
-		colorChanged = false;
+        colorChanged = false;
-		opacityChanged = false;
+        opacityChanged = false;
-		weightChanged = false;
+        widthChanged = false;
-	}
+    }
 
-	$: if ($selection && open) {
+    $: if ($selection && open) {
-		setStyleInputs();
+        setStyleInputs();
-	}
+    }
 
-	$: if (!open) {
+    $: if (!open) {
-		$editStyle = false;
+        $editStyle = false;
-	}
+    }
 </script>
 
 <Popover.Root bind:open>
-	<Popover.Trigger />
+    <Popover.Trigger />
-	<Popover.Content side="top" sideOffset={22} alignOffset={30} class="flex flex-col gap-3">
+    <Popover.Content side="top" sideOffset={22} alignOffset={30} class="flex flex-col gap-3">
-		<Label class="flex flex-row gap-2 items-center justify-between">
+        <Label class="flex flex-row gap-2 items-center justify-between">
-			{$_('menu.style.color')}
+            {$_('menu.style.color')}
-			<Input
+            <Input
-				bind:value={color}
+                bind:value={color}
-				type="color"
+                type="color"
-				class="p-0 h-6 w-40"
+                class="p-0 h-6 w-40"
-				on:change={() => (colorChanged = true)}
+                on:change={() => (colorChanged = true)}
-			/>
+            />
-		</Label>
+        </Label>
-		<Label class="flex flex-row gap-2 items-center justify-between">
+        <Label class="flex flex-row gap-2 items-center justify-between">
-			{$_('menu.style.opacity')}
+            {$_('menu.style.opacity')}
-			<div class="w-40 p-2">
+            <div class="w-40 p-2">
-				<Slider
+                <Slider
-					bind:value={opacity}
+                    bind:value={opacity}
-					min={0.3}
+                    min={0.3}
-					max={1}
+                    max={1}
-					step={0.1}
+                    step={0.1}
-					onValueChange={() => (opacityChanged = true)}
+                    onValueChange={() => (opacityChanged = true)}
-				/>
+                />
-			</div>
+            </div>
-		</Label>
+        </Label>
-		<Label class="flex flex-row gap-2 items-center justify-between">
+        <Label class="flex flex-row gap-2 items-center justify-between">
-			{$_('menu.style.width')}
+            {$_('menu.style.width')}
-			<div class="w-40 p-2">
+            <div class="w-40 p-2">
-				<Slider
+                <Slider
-					bind:value={weight}
+                    bind:value={width}
-					id="weight"
+                    id="width"
-					min={1}
+                    min={1}
-					max={10}
+                    max={10}
-					step={1}
+                    step={1}
-					onValueChange={() => (weightChanged = true)}
+                    onValueChange={() => (widthChanged = true)}
-				/>
+                />
-			</div>
+            </div>
-		</Label>
+        </Label>
-		<Button
+        <Button
-			variant="outline"
+            variant="outline"
-			disabled={!colorChanged && !opacityChanged && !weightChanged}
+            disabled={!colorChanged && !opacityChanged && !widthChanged}
-			on:click={() => {
+            on:click={() => {
-				let style = {};
+                let style = {};
-				if (colorChanged) {
+                if (colorChanged) {
-					style.color = color;
+                    style['gpx_style:color'] = color;
-				}
+                }
-				if (opacityChanged) {
+                if (opacityChanged) {
-					style.opacity = opacity[0];
+                    style['gpx_style:opacity'] = opacity[0];
-				}
+                }
-				if (weightChanged) {
+                if (widthChanged) {
-					style.weight = weight[0];
+                    style['gpx_style:width'] = width[0];
-				}
+                }
-				dbUtils.setStyleToSelection(style);
+                dbUtils.setStyleToSelection(style);
 
-				if (item instanceof ListFileItem && $selection.size === gpxLayers.size) {
+                if (item instanceof ListFileItem && $selection.size === gpxLayers.size) {
-					if (style.opacity) {
+                    if (style['gpx_style:opacity']) {
-						$defaultOpacity = style.opacity;
+                        $defaultOpacity = style['gpx_style:opacity'];
-					}
+                    }
-					if (style.weight) {
+                    if (style['gpx_style:width']) {
-						$defaultWeight = style.weight;
+                        $defaultWidth = style['gpx_style:width'];
-					}
+                    }
-				}
+                }
 
-				open = false;
+                open = false;
-			}}
+            }}
-		>
+        >
-			<Save size="16" class="mr-1" />
+            <Save size="16" class="mr-1" />
-			{$_('menu.metadata.save')}
+            {$_('menu.metadata.save')}
-		</Button>
+        </Button>
-	</Popover.Content>
+    </Popover.Content>
 </Popover.Root>

website/src/lib/components/gpx-layer/CopyCoordinates.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+    import { Button } from '$lib/components/ui/button';
+    import { ClipboardCopy } from 'lucide-svelte';
+    import { _ } from 'svelte-i18n';
+    import type { Coordinates } from 'gpx';
+
+    export let coordinates: Coordinates;
+    export let onCopy: () => void = () => {};
+</script>
+
+<Button
+    class="w-full px-2 py-1 h-8 justify-start {$$props.class}"
+    variant="outline"
+    on:click={() => {
+        navigator.clipboard.writeText(
+            `${coordinates.lat.toFixed(6)}, ${coordinates.lon.toFixed(6)}`
+        );
+        onCopy();
+    }}
+>
+    <ClipboardCopy size="16" class="mr-1" />
+    {$_('menu.copy_coordinates')}
+</Button>

website/src/lib/components/gpx-layer/DistanceMarkers.ts

@@ -1,11 +1,17 @@
-
+import { settings } from '$lib/db';
-import { settings } from "$lib/db";
+import { gpxStatistics } from '$lib/stores';
-import { gpxStatistics } from "$lib/stores";
+import { get } from 'svelte/store';
-import { get } from "svelte/store";
 
 const { distanceMarkers, distanceUnits } = settings;
 
-const stops = [[100, 0], [50, 7], [25, 8, 10], [10, 10], [5, 11], [1, 13]];
+const stops = [
+    [100, 0],
+    [50, 7],
+    [25, 8, 10],
+    [10, 10],
+    [5, 11],
+    [1, 13],
+];
 
 export class DistanceMarkers {
     map: mapboxgl.Map;
@@ -30,7 +36,7 @@ export class DistanceMarkers {
                 } else {
                     this.map.addSource('distance-markers', {
                         type: 'geojson',
-                        data: this.getDistanceMarkersGeoJSON()
+                        data: this.getDistanceMarkersGeoJSON(),
                     });
                 }
                 stops.forEach(([d, minzoom, maxzoom]) => {
@@ -39,7 +45,14 @@ export class DistanceMarkers {
                             id: `distance-markers-${d}`,
                             type: 'symbol',
                             source: 'distance-markers',
-                            filter: d === 5 ? ['any', ['==', ['get', 'level'], 5], ['==', ['get', 'level'], 25]] : ['==', ['get', 'level'], d],
+                            filter:
+                                d === 5
+                                    ? [
+                                          'any',
+                                          ['==', ['get', 'level'], 5],
+                                          ['==', ['get', 'level'], 25],
+                                      ]
+                                    : ['==', ['get', 'level'], d],
                             minzoom: minzoom,
                             maxzoom: maxzoom ?? 24,
                             layout: {
@@ -51,7 +64,7 @@ export class DistanceMarkers {
                                 'text-color': 'black',
                                 'text-halo-width': 2,
                                 'text-halo-color': 'white',
-                            }
+                            },
                         });
                     } else {
                         this.map.moveLayer(`distance-markers-${d}`);
@@ -64,13 +77,14 @@ export class DistanceMarkers {
                     }
                 });
             }
-        } catch (e) { // No reliable way to check if the map is ready to add sources and layers
+        } catch (e) {
+            // No reliable way to check if the map is ready to add sources and layers
             return;
         }
     }
 
     remove() {
-        this.unsubscribes.forEach(unsubscribe => unsubscribe());
+        this.unsubscribes.forEach((unsubscribe) => unsubscribe());
     }
 
     getDistanceMarkersGeoJSON(): GeoJSON.FeatureCollection {
@@ -79,20 +93,28 @@ export class DistanceMarkers {
         let features = [];
         let currentTargetDistance = 1;
         for (let i = 0; i < statistics.local.distance.total.length; i++) {
-            if (statistics.local.distance.total[i] >= currentTargetDistance * (get(distanceUnits) === 'metric' ? 1 : 1.60934)) {
+            if (
+                statistics.local.distance.total[i] >=
+                currentTargetDistance * (get(distanceUnits) === 'metric' ? 1 : 1.60934)
+            ) {
                 let distance = currentTargetDistance.toFixed(0);
-                let [level, minzoom] = stops.find(([d]) => currentTargetDistance % d === 0) ?? [0, 0];
+                let [level, minzoom] = stops.find(([d]) => currentTargetDistance % d === 0) ?? [
+                    0, 0,
+                ];
                 features.push({
                     type: 'Feature',
                     geometry: {
                         type: 'Point',
-                        coordinates: [statistics.local.points[i].getLongitude(), statistics.local.points[i].getLatitude()]
+                        coordinates: [
+                            statistics.local.points[i].getLongitude(),
+                            statistics.local.points[i].getLatitude(),
+                        ],
                     },
                     properties: {
                         distance,
                         level,
                         minzoom,
-                    }
+                    },
                 } as GeoJSON.Feature);
                 currentTargetDistance += 1;
             }
@@ -100,7 +122,7 @@ export class DistanceMarkers {
 
         return {
             type: 'FeatureCollection',
-            features
+            features,
         };
     }
-}
+}

website/src/lib/components/gpx-layer/GPXLayer.ts

@@ -1,14 +1,28 @@
-import { currentTool, map, Tool } from "$lib/stores";
+import { currentTool, map, Tool } from '$lib/stores';
-import { settings, type GPXFileWithStatistics, dbUtils } from "$lib/db";
+import { settings, type GPXFileWithStatistics, dbUtils } from '$lib/db';
-import { get, type Readable } from "svelte/store";
+import { get, type Readable } from 'svelte/store';
-import mapboxgl from "mapbox-gl";
+import mapboxgl from 'mapbox-gl';
-import { waypointPopup, deleteWaypoint, trackpointPopup } from "./GPXLayerPopup";
+import { waypointPopup, deleteWaypoint, trackpointPopup } from './GPXLayerPopup';
-import { addSelectItem, selectItem, selection } from "$lib/components/file-list/Selection";
+import { addSelectItem, selectItem, selection } from '$lib/components/file-list/Selection';
-import { ListTrackSegmentItem, ListWaypointItem, ListWaypointsItem, ListTrackItem, ListFileItem, ListRootItem } from "$lib/components/file-list/FileList";
+import {
-import { getClosestLinePoint, getElevation, resetCursor, setGrabbingCursor, setPointerCursor, setScissorsCursor } from "$lib/utils";
+    ListTrackSegmentItem,
-import { selectedWaypoint } from "$lib/components/toolbar/tools/Waypoint.svelte";
+    ListWaypointItem,
-import { MapPin, Square } from "lucide-static";
+    ListWaypointsItem,
-import { getSymbolKey, symbols } from "$lib/assets/symbols";
+    ListTrackItem,
+    ListFileItem,
+    ListRootItem,
+} from '$lib/components/file-list/FileList';
+import {
+    getClosestLinePoint,
+    getElevation,
+    resetCursor,
+    setGrabbingCursor,
+    setPointerCursor,
+    setScissorsCursor,
+} from '$lib/utils';
+import { selectedWaypoint } from '$lib/components/toolbar/tools/Waypoint.svelte';
+import { MapPin, Square } from 'lucide-static';
+import { getSymbolKey, symbols } from '$lib/assets/symbols';
 
 const colors = [
     '#ff0000',
@@ -21,7 +35,7 @@ const colors = [
     '#288228',
     '#9933ff',
     '#50f0be',
-    '#8c645a'
+    '#8c645a',
 ];
 
 const colorCount: { [key: string]: number } = {};
@@ -42,54 +56,33 @@ function decrementColor(color: string) {
     }
 }
 
-const inspectKey = 'Shift';
-let inspectKeyDown: KeyDown | null = null;
-class KeyDown {
-    key: string;
-    down: boolean = false;
-    constructor(key: string) {
-        this.key = key;
-        document.addEventListener('keydown', this.onKeyDown);
-        document.addEventListener('keyup', this.onKeyUp);
-    }
-    onKeyDown = (e: KeyboardEvent) => {
-        if (e.key === this.key) {
-            this.down = true;
-        }
-    }
-    onKeyUp = (e: KeyboardEvent) => {
-        if (e.key === this.key) {
-            this.down = false;
-        }
-    }
-    isDown() {
-        return this.down;
-    }
-}
-
 function getMarkerForSymbol(symbol: string | undefined, layerColor: string) {
     let symbolSvg = symbol ? symbols[symbol]?.iconSvg : undefined;
     return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-    ${Square
+    ${Square.replace('width="24"', 'width="12"')
-            .replace('width="24"', 'width="12"')
+        .replace('height="24"', 'height="12"')
-            .replace('height="24"', 'height="12"')
+        .replace('stroke="currentColor"', 'stroke="SteelBlue"')
-            .replace('stroke="currentColor"', 'stroke="SteelBlue"')
+        .replace('stroke-width="2"', 'stroke-width="1.5" x="9.6" y="0.4"')
-            .replace('stroke-width="2"', 'stroke-width="1.5" x="9.6" y="0.4"')
+        .replace('fill="none"', `fill="${layerColor}"`)}
-            .replace('fill="none"', `fill="${layerColor}"`)}
+    ${MapPin.replace('width="24"', '')
-    ${MapPin
+        .replace('height="24"', '')
-            .replace('width="24"', '')
+        .replace('stroke="currentColor"', '')
-            .replace('height="24"', '')
+        .replace('path', `path fill="#3fb1ce" stroke="SteelBlue" stroke-width="1"`)
-            .replace('stroke="currentColor"', '')
+        .replace(
-            .replace('path', `path fill="#3fb1ce" stroke="SteelBlue" stroke-width="1"`)
+            'circle',
-            .replace('circle', `circle fill="${symbolSvg ? 'none' : 'white'}" stroke="${symbolSvg ? 'none' : 'white'}" stroke-width="2"`)} 
+            `circle fill="${symbolSvg ? 'none' : 'white'}" stroke="${symbolSvg ? 'none' : 'white'}" stroke-width="2"`
-    ${symbolSvg?.replace('width="24"', 'width="10"')
+        )} 
+    ${
+        symbolSvg
+            ?.replace('width="24"', 'width="10"')
             .replace('height="24"', 'height="10"')
             .replace('stroke="currentColor"', 'stroke="white"')
-            .replace('stroke-width="2"', 'stroke-width="2.5" x="7" y="5"') ?? ''}
+            .replace('stroke-width="2"', 'stroke-width="2.5" x="7" y="5"') ?? ''
+    }
     </svg>`;
 }
 
-const { directionMarkers, verticalFileView, defaultOpacity, defaultWeight } = settings;
+const { directionMarkers, treeFileView, defaultOpacity, defaultWidth } = settings;
 
 export class GPXLayer {
     map: mapboxgl.Map;
@@ -108,39 +101,43 @@ export class GPXLayer {
     layerOnClickBinded: (e: any) => void = this.layerOnClick.bind(this);
     layerOnContextMenuBinded: (e: any) => void = this.layerOnContextMenu.bind(this);
 
-    constructor(map: mapboxgl.Map, fileId: string, file: Readable<GPXFileWithStatistics | undefined>) {
+    constructor(
+        map: mapboxgl.Map,
+        fileId: string,
+        file: Readable<GPXFileWithStatistics | undefined>
+    ) {
         this.map = map;
         this.fileId = fileId;
         this.file = file;
         this.layerColor = getColor();
         this.unsubscribe.push(file.subscribe(this.updateBinded));
-        this.unsubscribe.push(selection.subscribe($selection => {
+        this.unsubscribe.push(
-            let newSelected = $selection.hasAnyChildren(new ListFileItem(this.fileId));
+            selection.subscribe(($selection) => {
-            if (this.selected || newSelected) {
+                let newSelected = $selection.hasAnyChildren(new ListFileItem(this.fileId));
-                this.selected = newSelected;
+                if (this.selected || newSelected) {
-                this.update();
+                    this.selected = newSelected;
-            }
+                    this.update();
-            if (newSelected) {
+                }
-                this.moveToFront();
+                if (newSelected) {
-            }
+                    this.moveToFront();
-        }));
+                }
+            })
+        );
         this.unsubscribe.push(directionMarkers.subscribe(this.updateBinded));
-        this.unsubscribe.push(currentTool.subscribe(tool => {
+        this.unsubscribe.push(
-            if (tool === Tool.WAYPOINT && !this.draggable) {
+            currentTool.subscribe((tool) => {
-                this.draggable = true;
+                if (tool === Tool.WAYPOINT && !this.draggable) {
-                this.markers.forEach(marker => marker.setDraggable(true));
+                    this.draggable = true;
-            } else if (tool !== Tool.WAYPOINT && this.draggable) {
+                    this.markers.forEach((marker) => marker.setDraggable(true));
-                this.draggable = false;
+                } else if (tool !== Tool.WAYPOINT && this.draggable) {
-                this.markers.forEach(marker => marker.setDraggable(false));
+                    this.draggable = false;
-            }
+                    this.markers.forEach((marker) => marker.setDraggable(false));
-        }));
+                }
+            })
+        );
         this.draggable = get(currentTool) === Tool.WAYPOINT;
 
         this.map.on('style.import.load', this.updateBinded);
-
-        if (inspectKeyDown === null) {
-            inspectKeyDown = new KeyDown(inspectKey);
-        }
     }
 
     update() {
@@ -149,7 +146,11 @@ export class GPXLayer {
             return;
         }
 
-        if (file._data.style && file._data.style.color && this.layerColor !== `#${file._data.style.color}`) {
+        if (
+            file._data.style &&
+            file._data.style.color &&
+            this.layerColor !== `#${file._data.style.color}`
+        ) {
             decrementColor(this.layerColor);
             this.layerColor = `#${file._data.style.color}`;
         }
@@ -161,7 +162,7 @@ export class GPXLayer {
             } else {
                 this.map.addSource(this.fileId, {
                     type: 'geojson',
-                    data: this.getGeoJSON()
+                    data: this.getGeoJSON(),
                 });
             }
 
@@ -172,13 +173,13 @@ export class GPXLayer {
                     source: this.fileId,
                     layout: {
                         'line-join': 'round',
-                        'line-cap': 'round'
+                        'line-cap': 'round',
                     },
                     paint: {
                         'line-color': ['get', 'color'],
-                        'line-width': ['get', 'weight'],
+                        'line-width': ['get', 'width'],
-                        'line-opacity': ['get', 'opacity']
+                        'line-opacity': ['get', 'opacity'],
-                    }
+                    },
                 });
 
                 this.map.on('click', this.fileId, this.layerOnClickBinded);
@@ -190,27 +191,30 @@ export class GPXLayer {
 
             if (get(directionMarkers)) {
                 if (!this.map.getLayer(this.fileId + '-direction')) {
-                    this.map.addLayer({
+                    this.map.addLayer(
-                        id: this.fileId + '-direction',
+                        {
-                        type: 'symbol',
+                            id: this.fileId + '-direction',
-                        source: this.fileId,
+                            type: 'symbol',
-                        layout: {
+                            source: this.fileId,
-                            'text-field': '»',
+                            layout: {
-                            'text-offset': [0, -0.1],
+                                'text-field': '»',
-                            'text-keep-upright': false,
+                                'text-offset': [0, -0.1],
-                            'text-max-angle': 361,
+                                'text-keep-upright': false,
-                            'text-allow-overlap': true,
+                                'text-max-angle': 361,
-                            'text-font': ['Open Sans Bold'],
+                                'text-allow-overlap': true,
-                            'symbol-placement': 'line',
+                                'text-font': ['Open Sans Bold'],
-                            'symbol-spacing': 20,
+                                'symbol-placement': 'line',
+                                'symbol-spacing': 20,
+                            },
+                            paint: {
+                                'text-color': 'white',
+                                'text-opacity': 0.7,
+                                'text-halo-width': 0.2,
+                                'text-halo-color': 'white',
+                            },
                         },
-                        paint: {
+                        this.map.getLayer('distance-markers') ? 'distance-markers' : undefined
-                            'text-color': 'white',
+                    );
-                            'text-opacity': 0.7,
-                            'text-halo-width': 0.2,
-                            'text-halo-color': 'white'
-                        }
-                    }, this.map.getLayer('distance-markers') ? 'distance-markers' : undefined);
                 }
             } else {
                 if (this.map.getLayer(this.fileId + '-direction')) {
@@ -225,23 +229,53 @@ export class GPXLayer {
                 }
             });
 
-            this.map.setFilter(this.fileId, ['any', ...visibleItems.map(([trackIndex, segmentIndex]) => ['all', ['==', 'trackIndex', trackIndex], ['==', 'segmentIndex', segmentIndex]])], { validate: false });
+            this.map.setFilter(
+                this.fileId,
+                [
+                    'any',
+                    ...visibleItems.map(([trackIndex, segmentIndex]) => [
+                        'all',
+                        ['==', 'trackIndex', trackIndex],
+                        ['==', 'segmentIndex', segmentIndex],
+                    ]),
+                ],
+                { validate: false }
+            );
             if (this.map.getLayer(this.fileId + '-direction')) {
-                this.map.setFilter(this.fileId + '-direction', ['any', ...visibleItems.map(([trackIndex, segmentIndex]) => ['all', ['==', 'trackIndex', trackIndex], ['==', 'segmentIndex', segmentIndex]])], { validate: false });
+                this.map.setFilter(
+                    this.fileId + '-direction',
+                    [
+                        'any',
+                        ...visibleItems.map(([trackIndex, segmentIndex]) => [
+                            'all',
+                            ['==', 'trackIndex', trackIndex],
+                            ['==', 'segmentIndex', segmentIndex],
+                        ]),
+                    ],
+                    { validate: false }
+                );
             }
-        } catch (e) { // No reliable way to check if the map is ready to add sources and layers
+        } catch (e) {
+            // No reliable way to check if the map is ready to add sources and layers
             return;
         }
 
         let markerIndex = 0;
 
         if (get(selection).hasAnyChildren(new ListFileItem(this.fileId))) {
-            file.wpt.forEach((waypoint) => { // Update markers
+            file.wpt.forEach((waypoint) => {
+                // Update markers
                 let symbolKey = getSymbolKey(waypoint.sym);
                 if (markerIndex < this.markers.length) {
-                    this.markers[markerIndex].getElement().innerHTML = getMarkerForSymbol(symbolKey, this.layerColor);
+                    this.markers[markerIndex].getElement().innerHTML = getMarkerForSymbol(
+                        symbolKey,
+                        this.layerColor
+                    );
                     this.markers[markerIndex].setLngLat(waypoint.getCoordinates());
-                    Object.defineProperty(this.markers[markerIndex], '_waypoint', { value: waypoint, writable: true });
+                    Object.defineProperty(this.markers[markerIndex], '_waypoint', {
+                        value: waypoint,
+                        writable: true,
+                    });
                 } else {
                     let element = document.createElement('div');
                     element.classList.add('w-8', 'h-8', 'drop-shadow-xl');
@@ -249,7 +283,7 @@ export class GPXLayer {
                     let marker = new mapboxgl.Marker({
                         draggable: this.draggable,
                         element,
-                        anchor: 'bottom'
+                        anchor: 'bottom',
                     }).setLngLat(waypoint.getCoordinates());
                     Object.defineProperty(marker, '_waypoint', { value: waypoint, writable: true });
                     let dragEndTimestamp = 0;
@@ -271,11 +305,21 @@ export class GPXLayer {
                             return;
                         }
 
-                        if (get(verticalFileView)) {
+                        if (get(treeFileView)) {
-                            if ((e.ctrlKey || e.metaKey) && get(selection).hasAnyChildren(new ListWaypointsItem(this.fileId), false)) {
+                            if (
-                                addSelectItem(new ListWaypointItem(this.fileId, marker._waypoint._data.index));
+                                (e.ctrlKey || e.metaKey) &&
+                                get(selection).hasAnyChildren(
+                                    new ListWaypointsItem(this.fileId),
+                                    false
+                                )
+                            ) {
+                                addSelectItem(
+                                    new ListWaypointItem(this.fileId, marker._waypoint._data.index)
+                                );
                             } else {
-                                selectItem(new ListWaypointItem(this.fileId, marker._waypoint._data.index));
+                                selectItem(
+                                    new ListWaypointItem(this.fileId, marker._waypoint._data.index)
+                                );
                             }
                         } else if (get(currentTool) === Tool.WAYPOINT) {
                             selectedWaypoint.set([marker._waypoint, this.fileId]);
@@ -298,12 +342,12 @@ export class GPXLayer {
                                 let wpt = file.wpt[marker._waypoint._data.index];
                                 wpt.setCoordinates({
                                     lat: latLng.lat,
-                                    lon: latLng.lng
+                                    lon: latLng.lng,
                                 });
                                 wpt.ele = ele[0];
                             });
                         });
-                        dragEndTimestamp = Date.now()
+                        dragEndTimestamp = Date.now();
                     });
                     this.markers.push(marker);
                 }
@@ -311,7 +355,8 @@ export class GPXLayer {
             });
         }
 
-        while (markerIndex < this.markers.length) { // Remove extra markers
+        while (markerIndex < this.markers.length) {
+            // Remove extra markers
             this.markers.pop()?.remove();
         }
 
@@ -364,7 +409,10 @@ export class GPXLayer {
             this.map.moveLayer(this.fileId);
         }
         if (this.map.getLayer(this.fileId + '-direction')) {
-            this.map.moveLayer(this.fileId + '-direction', this.map.getLayer('distance-markers') ? 'distance-markers' : undefined);
+            this.map.moveLayer(
+                this.fileId + '-direction',
+                this.map.getLayer('distance-markers') ? 'distance-markers' : undefined
+            );
         }
     }
 
@@ -372,7 +420,12 @@ export class GPXLayer {
         let trackIndex = e.features[0].properties.trackIndex;
         let segmentIndex = e.features[0].properties.segmentIndex;
 
-        if (get(currentTool) === Tool.SCISSORS && get(selection).hasAnyParent(new ListTrackSegmentItem(this.fileId, trackIndex, segmentIndex))) {
+        if (
+            get(currentTool) === Tool.SCISSORS &&
+            get(selection).hasAnyParent(
+                new ListTrackSegmentItem(this.fileId, trackIndex, segmentIndex)
+            )
+        ) {
             setScissorsCursor();
         } else {
             setPointerCursor();
@@ -384,28 +437,42 @@ export class GPXLayer {
     }
 
     layerOnMouseMove(e: any) {
-        if (inspectKeyDown?.isDown()) {
+        if (e.originalEvent.shiftKey) {
             let trackIndex = e.features[0].properties.trackIndex;
             let segmentIndex = e.features[0].properties.segmentIndex;
 
             const file = get(this.file)?.file;
             if (file) {
-                const closest = getClosestLinePoint(file.trk[trackIndex].trkseg[segmentIndex].trkpt, { lat: e.lngLat.lat, lon: e.lngLat.lng });
+                const closest = getClosestLinePoint(
+                    file.trk[trackIndex].trkseg[segmentIndex].trkpt,
+                    { lat: e.lngLat.lat, lon: e.lngLat.lng }
+                );
                 trackpointPopup?.setItem({ item: closest, fileId: this.fileId });
             }
         }
     }
 
     layerOnClick(e: any) {
-        if (get(currentTool) === Tool.ROUTING && get(selection).hasAnyChildren(new ListRootItem(), true, ['waypoints'])) {
+        if (
+            get(currentTool) === Tool.ROUTING &&
+            get(selection).hasAnyChildren(new ListRootItem(), true, ['waypoints'])
+        ) {
             return;
         }
 
         let trackIndex = e.features[0].properties.trackIndex;
         let segmentIndex = e.features[0].properties.segmentIndex;
 
-        if (get(currentTool) === Tool.SCISSORS && get(selection).hasAnyParent(new ListTrackSegmentItem(this.fileId, trackIndex, segmentIndex))) {
+        if (
-            dbUtils.split(this.fileId, trackIndex, segmentIndex, { lat: e.lngLat.lat, lon: e.lngLat.lng });
+            get(currentTool) === Tool.SCISSORS &&
+            get(selection).hasAnyParent(
+                new ListTrackSegmentItem(this.fileId, trackIndex, segmentIndex)
+            )
+        ) {
+            dbUtils.split(this.fileId, trackIndex, segmentIndex, {
+                lat: e.lngLat.lat,
+                lon: e.lngLat.lng,
+            });
             return;
         }
 
@@ -415,8 +482,12 @@ export class GPXLayer {
         }
 
         let item = undefined;
-        if (get(verticalFileView) && file.getSegments().length > 1) { // Select inner item
+        if (get(treeFileView) && file.getSegments().length > 1) {
-            item = file.children[trackIndex].children.length > 1 ? new ListTrackSegmentItem(this.fileId, trackIndex, segmentIndex) : new ListTrackItem(this.fileId, trackIndex);
+            // Select inner item
+            item =
+                file.children[trackIndex].children.length > 1
+                    ? new ListTrackSegmentItem(this.fileId, trackIndex, segmentIndex)
+                    : new ListTrackItem(this.fileId, trackIndex);
         } else {
             item = new ListFileItem(this.fileId);
         }
@@ -439,13 +510,14 @@ export class GPXLayer {
         if (!file) {
             return {
                 type: 'FeatureCollection',
-                features: []
+                features: [],
             };
         }
 
         let data = file.toGeoJSON();
 
-        let trackIndex = 0, segmentIndex = 0;
+        let trackIndex = 0,
+            segmentIndex = 0;
         for (let feature of data.features) {
             if (!feature.properties) {
                 feature.properties = {};
@@ -453,14 +525,19 @@ export class GPXLayer {
             if (!feature.properties.color) {
                 feature.properties.color = this.layerColor;
             }
-            if (!feature.properties.weight) {
-                feature.properties.weight = get(defaultWeight);
-            }
             if (!feature.properties.opacity) {
                 feature.properties.opacity = get(defaultOpacity);
             }
-            if (get(selection).hasAnyParent(new ListTrackSegmentItem(this.fileId, trackIndex, segmentIndex)) || get(selection).hasAnyChildren(new ListWaypointsItem(this.fileId), true)) {
+            if (!feature.properties.width) {
-                feature.properties.weight = feature.properties.weight + 2;
+                feature.properties.width = get(defaultWidth);
+            }
+            if (
+                get(selection).hasAnyParent(
+                    new ListTrackSegmentItem(this.fileId, trackIndex, segmentIndex)
+                ) ||
+                get(selection).hasAnyChildren(new ListWaypointsItem(this.fileId), true)
+            ) {
+                feature.properties.width = feature.properties.width + 2;
                 feature.properties.opacity = Math.min(1, feature.properties.opacity + 0.1);
             }
             feature.properties.trackIndex = trackIndex;
@@ -474,4 +551,4 @@ export class GPXLayer {
         }
         return data;
     }
-}
+}

website/src/lib/components/gpx-layer/GPXLayerPopup.ts

@@ -1,5 +1,5 @@
-import { dbUtils } from "$lib/db";
+import { dbUtils } from '$lib/db';
-import { MapPopup } from "$lib/components/MapPopup";
+import { MapPopup } from '$lib/components/MapPopup';
 
 export let waypointPopup: MapPopup | null = null;
 export let trackpointPopup: MapPopup | null = null;
@@ -11,14 +11,14 @@ export function createPopups(map: mapboxgl.Map) {
         focusAfterOpen: false,
         maxWidth: undefined,
         offset: {
-            'top': [0, 0],
+            top: [0, 0],
             'top-left': [0, 0],
             'top-right': [0, 0],
-            'bottom': [0, -30],
+            bottom: [0, -30],
             'bottom-left': [0, -30],
             'bottom-right': [0, -30],
-            'left': [10, -15],
+            left: [10, -15],
-            'right': [-10, -15],
+            right: [-10, -15],
         },
     });
     trackpointPopup = new MapPopup(map, {
@@ -41,4 +41,4 @@ export function removePopups() {
 
 export function deleteWaypoint(fileId: string, waypointIndex: number) {
     dbUtils.applyToFile(fileId, (file) => file.replaceWaypoints(waypointIndex, waypointIndex, []));
-}
+}

website/src/lib/components/gpx-layer/GPXLayers.svelte

@@ -1,56 +1,56 @@
 <script lang="ts">
-	import { map, gpxLayers } from '$lib/stores';
+    import { map, gpxLayers } from '$lib/stores';
-	import { GPXLayer } from './GPXLayer';
+    import { GPXLayer } from './GPXLayer';
-	import { fileObservers } from '$lib/db';
+    import { fileObservers } from '$lib/db';
-	import { DistanceMarkers } from './DistanceMarkers';
+    import { DistanceMarkers } from './DistanceMarkers';
-	import { StartEndMarkers } from './StartEndMarkers';
+    import { StartEndMarkers } from './StartEndMarkers';
-	import { onDestroy } from 'svelte';
+    import { onDestroy } from 'svelte';
-	import { createPopups, removePopups } from './GPXLayerPopup';
+    import { createPopups, removePopups } from './GPXLayerPopup';
 
-	let distanceMarkers: DistanceMarkers | undefined = undefined;
+    let distanceMarkers: DistanceMarkers | undefined = undefined;
-	let startEndMarkers: StartEndMarkers | undefined = undefined;
+    let startEndMarkers: StartEndMarkers | undefined = undefined;
 
-	$: if ($map && $fileObservers) {
+    $: if ($map && $fileObservers) {
-		// remove layers for deleted files
+        // remove layers for deleted files
-		gpxLayers.forEach((layer, fileId) => {
+        gpxLayers.forEach((layer, fileId) => {
-			if (!$fileObservers.has(fileId)) {
+            if (!$fileObservers.has(fileId)) {
-				layer.remove();
+                layer.remove();
-				gpxLayers.delete(fileId);
+                gpxLayers.delete(fileId);
-			} else if ($map !== layer.map) {
+            } else if ($map !== layer.map) {
-				layer.updateMap($map);
+                layer.updateMap($map);
-			}
+            }
-		});
+        });
-		// add layers for new files
+        // add layers for new files
-		$fileObservers.forEach((file, fileId) => {
+        $fileObservers.forEach((file, fileId) => {
-			if (!gpxLayers.has(fileId)) {
+            if (!gpxLayers.has(fileId)) {
-				gpxLayers.set(fileId, new GPXLayer($map, fileId, file));
+                gpxLayers.set(fileId, new GPXLayer($map, fileId, file));
-			}
+            }
-		});
+        });
-	}
+    }
 
-	$: if ($map) {
+    $: if ($map) {
-		if (distanceMarkers) {
+        if (distanceMarkers) {
-			distanceMarkers.remove();
+            distanceMarkers.remove();
-		}
+        }
-		if (startEndMarkers) {
+        if (startEndMarkers) {
-			startEndMarkers.remove();
+            startEndMarkers.remove();
-		}
+        }
-		createPopups($map);
+        createPopups($map);
-		distanceMarkers = new DistanceMarkers($map);
+        distanceMarkers = new DistanceMarkers($map);
-		startEndMarkers = new StartEndMarkers($map);
+        startEndMarkers = new StartEndMarkers($map);
-	}
+    }
 
-	onDestroy(() => {
+    onDestroy(() => {
-		gpxLayers.forEach((layer) => layer.remove());
+        gpxLayers.forEach((layer) => layer.remove());
-		gpxLayers.clear();
+        gpxLayers.clear();
-		removePopups();
+        removePopups();
-		if (distanceMarkers) {
+        if (distanceMarkers) {
-			distanceMarkers.remove();
+            distanceMarkers.remove();
-			distanceMarkers = undefined;
+            distanceMarkers = undefined;
-		}
+        }
-		if (startEndMarkers) {
+        if (startEndMarkers) {
-			startEndMarkers.remove();
+            startEndMarkers.remove();
-			startEndMarkers = undefined;
+            startEndMarkers = undefined;
-		}
+        }
-	});
+    });
 </script>

website/src/lib/components/gpx-layer/StartEndMarkers.ts

@@ -1,6 +1,6 @@
-import { gpxStatistics, slicedGPXStatistics, currentTool, Tool } from "$lib/stores";
+import { gpxStatistics, slicedGPXStatistics, currentTool, Tool } from '$lib/stores';
-import mapboxgl from "mapbox-gl";
+import mapboxgl from 'mapbox-gl';
-import { get } from "svelte/store";
+import { get } from 'svelte/store';
 
 export class StartEndMarkers {
     map: mapboxgl.Map;
@@ -16,7 +16,8 @@ export class StartEndMarkers {
         let endElement = document.createElement('div');
         startElement.className = `h-4 w-4 rounded-full bg-green-500 border-2 border-white`;
         endElement.className = `h-4 w-4 rounded-full border-2 border-white`;
-        endElement.style.background = 'repeating-conic-gradient(#fff 0 90deg, #000 0 180deg) 0 0/8px 8px round';
+        endElement.style.background =
+            'repeating-conic-gradient(#fff 0 90deg, #000 0 180deg) 0 0/8px 8px round';
 
         this.start = new mapboxgl.Marker({ element: startElement });
         this.end = new mapboxgl.Marker({ element: endElement });
@@ -31,7 +32,11 @@ export class StartEndMarkers {
         let statistics = get(slicedGPXStatistics)?.[0] ?? get(gpxStatistics);
         if (statistics.local.points.length > 0 && tool !== Tool.ROUTING) {
             this.start.setLngLat(statistics.local.points[0].getCoordinates()).addTo(this.map);
-            this.end.setLngLat(statistics.local.points[statistics.local.points.length - 1].getCoordinates()).addTo(this.map);
+            this.end
+                .setLngLat(
+                    statistics.local.points[statistics.local.points.length - 1].getCoordinates()
+                )
+                .addTo(this.map);
         } else {
             this.start.remove();
             this.end.remove();
@@ -39,9 +44,9 @@ export class StartEndMarkers {
     }
 
     remove() {
-        this.unsubscribes.forEach(unsubscribe => unsubscribe());
+        this.unsubscribes.forEach((unsubscribe) => unsubscribe());
 
         this.start.remove();
         this.end.remove();
     }
-}
+}

website/src/lib/components/gpx-layer/TrackpointPopup.svelte

@@ -1,36 +1,43 @@
 <script lang="ts">
-	import type { TrackPoint } from 'gpx';
+    import type { TrackPoint } from 'gpx';
-	import type { PopupItem } from '$lib/components/MapPopup';
+    import type { PopupItem } from '$lib/components/MapPopup';
-	import * as Card from '$lib/components/ui/card';
+    import CopyCoordinates from '$lib/components/gpx-layer/CopyCoordinates.svelte';
-	import WithUnits from '$lib/components/WithUnits.svelte';
+    import * as Card from '$lib/components/ui/card';
-	import { Compass, Mountain, Timer } from 'lucide-svelte';
+    import WithUnits from '$lib/components/WithUnits.svelte';
-	import { df } from '$lib/utils';
+    import { Compass, Mountain, Timer } from 'lucide-svelte';
+    import { df } from '$lib/utils';
+    import { _ } from 'svelte-i18n';
 
-	export let trackpoint: PopupItem<TrackPoint>;
+    export let trackpoint: PopupItem<TrackPoint>;
 </script>
 
 <Card.Root class="border-none shadow-md text-base p-2">
-	<Card.Header class="p-0">
+    <Card.Header class="p-0">
-		<Card.Title class="text-md"></Card.Title>
+        <Card.Title class="text-md"></Card.Title>
-	</Card.Header>
+    </Card.Header>
-	<Card.Content class="flex flex-col p-0 text-xs gap-1">
+    <Card.Content class="flex flex-col p-0 text-xs gap-1">
-		<div class="flex flex-row items-center gap-1">
+        <div class="flex flex-row items-center gap-1">
-			<Compass size="14" />
+            <Compass size="14" />
-			{trackpoint.item.getLatitude().toFixed(6)}&deg; {trackpoint.item
+            {trackpoint.item.getLatitude().toFixed(6)}&deg; {trackpoint.item
-				.getLongitude()
+                .getLongitude()
-				.toFixed(6)}&deg;
+                .toFixed(6)}&deg;
-		</div>
+        </div>
-		{#if trackpoint.item.ele !== undefined}
+        {#if trackpoint.item.ele !== undefined}
-			<div class="flex flex-row items-center gap-1">
+            <div class="flex flex-row items-center gap-1">
-				<Mountain size="14" />
+                <Mountain size="14" />
-				<WithUnits value={trackpoint.item.ele} type="elevation" />
+                <WithUnits value={trackpoint.item.ele} type="elevation" />
-			</div>
+            </div>
-		{/if}
+        {/if}
-		{#if trackpoint.item.time}
+        {#if trackpoint.item.time}
-			<div class="flex flex-row items-center gap-1">
+            <div class="flex flex-row items-center gap-1">
-				<Timer size="14" />
+                <Timer size="14" />
-				{df.format(trackpoint.item.time)}
+                {df.format(trackpoint.item.time)}
-			</div>
+            </div>
-		{/if}
+        {/if}
-	</Card.Content>
+        <CopyCoordinates
+            coordinates={trackpoint.item.attributes}
+            onCopy={() => trackpoint.hide?.()}
+            class="mt-0.5"
+        />
+    </Card.Content>
 </Card.Root>

website/src/lib/components/gpx-layer/WaypointPopup.svelte

@@ -1,102 +1,108 @@
 <script lang="ts">
-	import * as Card from '$lib/components/ui/card';
+    import * as Card from '$lib/components/ui/card';
-	import { Button } from '$lib/components/ui/button';
+    import { Button } from '$lib/components/ui/button';
-	import Shortcut from '$lib/components/Shortcut.svelte';
+    import Shortcut from '$lib/components/Shortcut.svelte';
-	import { deleteWaypoint } from './GPXLayerPopup';
+    import CopyCoordinates from '$lib/components/gpx-layer/CopyCoordinates.svelte';
-	import WithUnits from '$lib/components/WithUnits.svelte';
+    import { deleteWaypoint } from './GPXLayerPopup';
-	import { Dot, ExternalLink, Trash2 } from 'lucide-svelte';
+    import WithUnits from '$lib/components/WithUnits.svelte';
-	import { Tool, currentTool } from '$lib/stores';
+    import { Dot, ExternalLink, Trash2 } from 'lucide-svelte';
-	import { getSymbolKey, symbols } from '$lib/assets/symbols';
+    import { Tool, currentTool } from '$lib/stores';
-	import { _ } from 'svelte-i18n';
+    import { getSymbolKey, symbols } from '$lib/assets/symbols';
-	import sanitizeHtml from 'sanitize-html';
+    import { _ } from 'svelte-i18n';
-	import type { Waypoint } from 'gpx';
+    import sanitizeHtml from 'sanitize-html';
-	import type { PopupItem } from '$lib/components/MapPopup';
+    import type { Waypoint } from 'gpx';
-	import { ScrollArea } from '$lib/components/ui/scroll-area/index.js';
+    import type { PopupItem } from '$lib/components/MapPopup';
+    import { ScrollArea } from '$lib/components/ui/scroll-area/index.js';
 
-	export let waypoint: PopupItem<Waypoint>;
+    export let waypoint: PopupItem<Waypoint>;
 
-	$: symbolKey = waypoint ? getSymbolKey(waypoint.item.sym) : undefined;
+    $: symbolKey = waypoint ? getSymbolKey(waypoint.item.sym) : undefined;
 
-	function sanitize(text: string | undefined): string {
+    function sanitize(text: string | undefined): string {
-		if (text === undefined) {
+        if (text === undefined) {
-			return '';
+            return '';
-		}
+        }
-		return sanitizeHtml(text, {
+        return sanitizeHtml(text, {
-			allowedTags: ['a', 'br', 'img'],
+            allowedTags: ['a', 'br', 'img'],
-			allowedAttributes: {
+            allowedAttributes: {
-				a: ['href', 'target'],
+                a: ['href', 'target'],
-				img: ['src']
+                img: ['src'],
-			}
+            },
-		}).trim();
+        }).trim();
-	}
+    }
 </script>
 
 <Card.Root class="border-none shadow-md text-base p-2 max-w-[50dvw]">
-	<Card.Header class="p-0">
+    <Card.Header class="p-0">
-		<Card.Title class="text-md">
+        <Card.Title class="text-md">
-			{#if waypoint.item.link && waypoint.item.link.attributes && waypoint.item.link.attributes.href}
+            {#if waypoint.item.link && waypoint.item.link.attributes && waypoint.item.link.attributes.href}
-				<a href={waypoint.item.link.attributes.href} target="_blank">
+                <a href={waypoint.item.link.attributes.href} target="_blank">
-					{waypoint.item.name ?? waypoint.item.link.attributes.href}
+                    {waypoint.item.name ?? waypoint.item.link.attributes.href}
-					<ExternalLink size="12" class="inline-block mb-1.5" />
+                    <ExternalLink size="12" class="inline-block mb-1.5" />
-				</a>
+                </a>
-			{:else}
+            {:else}
-				{waypoint.item.name ?? $_('gpx.waypoint')}
+                {waypoint.item.name ?? $_('gpx.waypoint')}
-			{/if}
+            {/if}
-		</Card.Title>
+        </Card.Title>
-	</Card.Header>
+    </Card.Header>
-	<Card.Content class="flex flex-col text-sm p-0">
+    <Card.Content class="flex flex-col text-sm p-0">
-		<div class="flex flex-row items-center text-muted-foreground text-xs whitespace-nowrap">
+        <div class="flex flex-row items-center text-muted-foreground text-xs whitespace-nowrap">
-			{#if symbolKey}
+            {#if symbolKey}
-				<span>
+                <span>
-					{#if symbols[symbolKey].icon}
+                    {#if symbols[symbolKey].icon}
-						<svelte:component
+                        <svelte:component
-							this={symbols[symbolKey].icon}
+                            this={symbols[symbolKey].icon}
-							size="12"
+                            size="12"
-							class="inline-block mb-0.5"
+                            class="inline-block mb-0.5"
-						/>
+                        />
-					{:else}
+                    {:else}
-						<span class="w-4 inline-block" />
+                        <span class="w-4 inline-block" />
-					{/if}
+                    {/if}
-					{$_(`gpx.symbol.${symbolKey}`)}
+                    {$_(`gpx.symbol.${symbolKey}`)}
-				</span>
+                </span>
-				<Dot size="16" />
+                <Dot size="16" />
-			{/if}
+            {/if}
-			{waypoint.item.getLatitude().toFixed(6)}&deg; {waypoint.item.getLongitude().toFixed(6)}&deg;
+            {waypoint.item.getLatitude().toFixed(6)}&deg; {waypoint.item
-			{#if waypoint.item.ele !== undefined}
+                .getLongitude()
-				<Dot size="16" />
+                .toFixed(6)}&deg;
-				<WithUnits value={waypoint.item.ele} type="elevation" />
+            {#if waypoint.item.ele !== undefined}
-			{/if}
+                <Dot size="16" />
-		</div>
+                <WithUnits value={waypoint.item.ele} type="elevation" />
-		<ScrollArea class="flex flex-col" viewportClasses="max-h-[30dvh]">
+            {/if}
-			{#if waypoint.item.desc}
+        </div>
-				<span class="whitespace-pre-wrap">{@html sanitize(waypoint.item.desc)}</span>
+        <ScrollArea class="flex flex-col" viewportClasses="max-h-[30dvh]">
-			{/if}
+            {#if waypoint.item.desc}
-			{#if waypoint.item.cmt && waypoint.item.cmt !== waypoint.item.desc}
+                <span class="whitespace-pre-wrap">{@html sanitize(waypoint.item.desc)}</span>
-				<span class="whitespace-pre-wrap">{@html sanitize(waypoint.item.cmt)}</span>
+            {/if}
-			{/if}
+            {#if waypoint.item.cmt && waypoint.item.cmt !== waypoint.item.desc}
-		</ScrollArea>
+                <span class="whitespace-pre-wrap">{@html sanitize(waypoint.item.cmt)}</span>
-		{#if $currentTool === Tool.WAYPOINT}
+            {/if}
-			<Button
+        </ScrollArea>
-				class="mt-2 w-full px-2 py-1 h-8 justify-start"
+        <div class="mt-2 flex flex-col gap-1">
-				variant="outline"
+            <CopyCoordinates coordinates={waypoint.item.attributes} />
-				on:click={() => deleteWaypoint(waypoint.fileId, waypoint.item._data.index)}
+            {#if $currentTool === Tool.WAYPOINT}
-			>
+                <Button
-				<Trash2 size="16" class="mr-1" />
+                    class="w-full px-2 py-1 h-8 justify-start"
-				{$_('menu.delete')}
+                    variant="outline"
-				<Shortcut shift={true} click={true} />
+                    on:click={() => deleteWaypoint(waypoint.fileId, waypoint.item._data.index)}
-			</Button>
+                >
-		{/if}
+                    <Trash2 size="16" class="mr-1" />
-	</Card.Content>
+                    {$_('menu.delete')}
+                    <Shortcut shift={true} click={true} />
+                </Button>
+            {/if}
+        </div>
+    </Card.Content>
 </Card.Root>
 
 <style lang="postcss">
-	div :global(a) {
+    div :global(a) {
-		@apply text-link;
+        @apply text-link;
-		@apply hover:underline;
+        @apply hover:underline;
-	}
+    }
 
-	div :global(img) {
+    div :global(img) {
-		@apply my-0;
+        @apply my-0;
-		@apply rounded-md;
+        @apply rounded-md;
-	}
+    }
 </style>

website/src/lib/components/layer-control/CustomLayers.svelte

@@ -1,422 +1,436 @@
 <script lang="ts">
-	import * as Card from '$lib/components/ui/card';
+    import * as Card from '$lib/components/ui/card';
-	import { Input } from '$lib/components/ui/input';
+    import { Input } from '$lib/components/ui/input';
-	import { Label } from '$lib/components/ui/label';
+    import { Label } from '$lib/components/ui/label';
-	import { Button } from '$lib/components/ui/button';
+    import { Button } from '$lib/components/ui/button';
-	import { Separator } from '$lib/components/ui/separator';
+    import { Separator } from '$lib/components/ui/separator';
-	import * as RadioGroup from '$lib/components/ui/radio-group';
+    import * as RadioGroup from '$lib/components/ui/radio-group';
-	import {
+    import {
-		CirclePlus,
+        CirclePlus,
-		CircleX,
+        CircleX,
-		Minus,
+        Minus,
-		Pencil,
+        Pencil,
-		Plus,
+        Plus,
-		Save,
+        Save,
-		Trash2,
+        Trash2,
-		Move,
+        Move,
-		Map,
+        Map,
-		Layers2
+        Layers2,
-	} from 'lucide-svelte';
+    } from 'lucide-svelte';
-	import { _ } from 'svelte-i18n';
+    import { _ } from 'svelte-i18n';
-	import { settings } from '$lib/db';
+    import { settings } from '$lib/db';
-	import { defaultBasemap, type CustomLayer } from '$lib/assets/layers';
+    import { defaultBasemap, type CustomLayer } from '$lib/assets/layers';
-	import { map } from '$lib/stores';
+    import { map } from '$lib/stores';
-	import { onDestroy, onMount } from 'svelte';
+    import { onDestroy, onMount } from 'svelte';
-	import Sortable from 'sortablejs/Sortable';
+    import Sortable from 'sortablejs/Sortable';
-	import { customBasemapUpdate } from './utils';
+    import { customBasemapUpdate } from './utils';
 
-	const {
+    const {
-		customLayers,
+        customLayers,
-		selectedBasemapTree,
+        selectedBasemapTree,
-		selectedOverlayTree,
+        selectedOverlayTree,
-		currentBasemap,
+        currentBasemap,
-		previousBasemap,
+        previousBasemap,
-		currentOverlays,
+        currentOverlays,
-		previousOverlays,
+        previousOverlays,
-		customBasemapOrder,
+        customBasemapOrder,
-		customOverlayOrder
+        customOverlayOrder,
-	} = settings;
+    } = settings;
 
-	let name: string = '';
+    let name: string = '';
-	let tileUrls: string[] = [''];
+    let tileUrls: string[] = [''];
-	let maxZoom: number = 20;
+    let maxZoom: number = 20;
-	let layerType: 'basemap' | 'overlay' = 'basemap';
+    let layerType: 'basemap' | 'overlay' = 'basemap';
-	let resourceType: 'raster' | 'vector' = 'raster';
+    let resourceType: 'raster' | 'vector' = 'raster';
 
-	let basemapContainer: HTMLElement;
+    let basemapContainer: HTMLElement;
-	let overlayContainer: HTMLElement;
+    let overlayContainer: HTMLElement;
 
-	let basemapSortable: Sortable;
+    let basemapSortable: Sortable;
-	let overlaySortable: Sortable;
+    let overlaySortable: Sortable;
 
-	onMount(() => {
+    onMount(() => {
-		if ($customBasemapOrder.length === 0) {
+        if ($customBasemapOrder.length === 0) {
-			$customBasemapOrder = Object.keys($customLayers).filter(
+            $customBasemapOrder = Object.keys($customLayers).filter(
-				(id) => $customLayers[id].layerType === 'basemap'
+                (id) => $customLayers[id].layerType === 'basemap'
-			);
+            );
-		}
+        }
-		if ($customOverlayOrder.length === 0) {
+        if ($customOverlayOrder.length === 0) {
-			$customOverlayOrder = Object.keys($customLayers).filter(
+            $customOverlayOrder = Object.keys($customLayers).filter(
-				(id) => $customLayers[id].layerType === 'overlay'
+                (id) => $customLayers[id].layerType === 'overlay'
-			);
+            );
-		}
+        }
 
-		basemapSortable = Sortable.create(basemapContainer, {
+        basemapSortable = Sortable.create(basemapContainer, {
-			onSort: (e) => {
+            onSort: (e) => {
-				$customBasemapOrder = basemapSortable.toArray();
+                $customBasemapOrder = basemapSortable.toArray();
-				$selectedBasemapTree.basemaps['custom'] = $customBasemapOrder.reduce((acc, id) => {
+                $selectedBasemapTree.basemaps['custom'] = $customBasemapOrder.reduce((acc, id) => {
-					acc[id] = true;
+                    acc[id] = true;
-					return acc;
+                    return acc;
-				}, {});
+                }, {});
-			}
+            },
-		});
+        });
-		overlaySortable = Sortable.create(overlayContainer, {
+        overlaySortable = Sortable.create(overlayContainer, {
-			onSort: (e) => {
+            onSort: (e) => {
-				$customOverlayOrder = overlaySortable.toArray();
+                $customOverlayOrder = overlaySortable.toArray();
-				$selectedOverlayTree.overlays['custom'] = $customOverlayOrder.reduce((acc, id) => {
+                $selectedOverlayTree.overlays['custom'] = $customOverlayOrder.reduce((acc, id) => {
-					acc[id] = true;
+                    acc[id] = true;
-					return acc;
+                    return acc;
-				}, {});
+                }, {});
-			}
+            },
-		});
+        });
 
-		basemapSortable.sort($customBasemapOrder);
+        basemapSortable.sort($customBasemapOrder);
-		overlaySortable.sort($customOverlayOrder);
+        overlaySortable.sort($customOverlayOrder);
-	});
+    });
 
-	onDestroy(() => {
+    onDestroy(() => {
-		basemapSortable.destroy();
+        basemapSortable.destroy();
-		overlaySortable.destroy();
+        overlaySortable.destroy();
-	});
+    });
 
-	$: if (tileUrls[0].length > 0) {
+    $: if (tileUrls[0].length > 0) {
-		if (
+        if (
-			tileUrls[0].includes('.json') ||
+            tileUrls[0].includes('.json') ||
-			(tileUrls[0].includes('api.mapbox.com/styles') && !tileUrls[0].includes('tiles'))
+            (tileUrls[0].includes('api.mapbox.com/styles') && !tileUrls[0].includes('tiles'))
-		) {
+        ) {
-			resourceType = 'vector';
+            resourceType = 'vector';
-		} else {
+        } else {
-			resourceType = 'raster';
+            resourceType = 'raster';
-		}
+        }
-	}
+    }
 
-	function createLayer() {
+    function createLayer() {
-		if (selectedLayerId && $customLayers[selectedLayerId].layerType !== layerType) {
+        if (selectedLayerId && $customLayers[selectedLayerId].layerType !== layerType) {
-			deleteLayer(selectedLayerId);
+            deleteLayer(selectedLayerId);
-		}
+        }
 
-		if (typeof maxZoom === 'string') {
+        if (typeof maxZoom === 'string') {
-			maxZoom = parseInt(maxZoom);
+            maxZoom = parseInt(maxZoom);
-		}
+        }
-		let is512 = tileUrls.some((url) => url.includes('512'));
+        let is512 = tileUrls.some((url) => url.includes('512'));
 
-		let layerId = selectedLayerId ?? getLayerId();
+        let layerId = selectedLayerId ?? getLayerId();
-		let layer: CustomLayer = {
+        let layer: CustomLayer = {
-			id: layerId,
+            id: layerId,
-			name: name,
+            name: name,
-			tileUrls: tileUrls.map((url) => decodeURI(url.trim())),
+            tileUrls: tileUrls.map((url) => decodeURI(url.trim())),
-			maxZoom: maxZoom,
+            maxZoom: maxZoom,
-			layerType: layerType,
+            layerType: layerType,
-			resourceType: resourceType,
+            resourceType: resourceType,
-			value: ''
+            value: '',
-		};
+        };
 
-		if (resourceType === 'vector') {
+        if (resourceType === 'vector') {
-			layer.value = layer.tileUrls[0];
+            layer.value = layer.tileUrls[0];
-		} else {
+        } else {
-			layer.value = {
+            layer.value = {
-				version: 8,
+                version: 8,
-				sources: {
+                sources: {
-					[layerId]: {
+                    [layerId]: {
-						type: 'raster',
+                        type: 'raster',
-						tiles: layer.tileUrls,
+                        tiles: layer.tileUrls,
-						tileSize: is512 ? 512 : 256,
+                        tileSize: is512 ? 512 : 256,
-						maxzoom: maxZoom
+                        maxzoom: maxZoom,
-					}
+                    },
-				},
+                },
-				layers: [
+                layers: [
-					{
+                    {
-						id: layerId,
+                        id: layerId,
-						type: 'raster',
+                        type: 'raster',
-						source: layerId
+                        source: layerId,
-					}
+                    },
-				]
+                ],
-			};
+            };
-		}
+        }
-		$customLayers[layerId] = layer;
+        $customLayers[layerId] = layer;
-		addLayer(layerId);
+        addLayer(layerId);
-		selectedLayerId = undefined;
+        selectedLayerId = undefined;
-		setDataFromSelectedLayer();
+        setDataFromSelectedLayer();
-	}
+    }
 
-	function getLayerId() {
+    function getLayerId() {
-		for (let id = 0; ; id++) {
+        for (let id = 0; ; id++) {
-			if (!$customLayers.hasOwnProperty(`custom-${id}`)) {
+            if (!$customLayers.hasOwnProperty(`custom-${id}`)) {
-				return `custom-${id}`;
+                return `custom-${id}`;
-			}
+            }
-		}
+        }
-	}
+    }
 
-	function addLayer(layerId: string) {
+    function addLayer(layerId: string) {
-		if (layerType === 'basemap') {
+        if (layerType === 'basemap') {
-			selectedBasemapTree.update(($tree) => {
+            selectedBasemapTree.update(($tree) => {
-				if (!$tree.basemaps.hasOwnProperty('custom')) {
+                if (!$tree.basemaps.hasOwnProperty('custom')) {
-					$tree.basemaps['custom'] = {};
+                    $tree.basemaps['custom'] = {};
-				}
+                }
-				$tree.basemaps['custom'][layerId] = true;
+                $tree.basemaps['custom'][layerId] = true;
-				return $tree;
+                return $tree;
-			});
+            });
 
-			if ($currentBasemap === layerId) {
+            if ($currentBasemap === layerId) {
-				$customBasemapUpdate++;
+                $customBasemapUpdate++;
-			} else {
+            } else {
-				$currentBasemap = layerId;
+                $currentBasemap = layerId;
-			}
+            }
 
-			if (!$customBasemapOrder.includes(layerId)) {
+            if (!$customBasemapOrder.includes(layerId)) {
-				$customBasemapOrder = [...$customBasemapOrder, layerId];
+                $customBasemapOrder = [...$customBasemapOrder, layerId];
-			}
+            }
-		} else {
+        } else {
-			selectedOverlayTree.update(($tree) => {
+            selectedOverlayTree.update(($tree) => {
-				if (!$tree.overlays.hasOwnProperty('custom')) {
+                if (!$tree.overlays.hasOwnProperty('custom')) {
-					$tree.overlays['custom'] = {};
+                    $tree.overlays['custom'] = {};
-				}
+                }
-				$tree.overlays['custom'][layerId] = true;
+                $tree.overlays['custom'][layerId] = true;
-				return $tree;
+                return $tree;
-			});
+            });
 
-			if (
+            if (
-				$currentOverlays.overlays['custom'] &&
+                $currentOverlays.overlays['custom'] &&
-				$currentOverlays.overlays['custom'][layerId] &&
+                $currentOverlays.overlays['custom'][layerId] &&
-				$map
+                $map
-			) {
+            ) {
-				try {
+                try {
-					$map.removeImport(layerId);
+                    $map.removeImport(layerId);
-				} catch (e) {
+                } catch (e) {
-					// No reliable way to check if the map is ready to remove sources and layers
+                    // No reliable way to check if the map is ready to remove sources and layers
-				}
+                }
-			}
+            }
 
-			if (!$currentOverlays.overlays.hasOwnProperty('custom')) {
+            if (!$currentOverlays.overlays.hasOwnProperty('custom')) {
-				$currentOverlays.overlays['custom'] = {};
+                $currentOverlays.overlays['custom'] = {};
-			}
+            }
-			$currentOverlays.overlays['custom'][layerId] = true;
+            $currentOverlays.overlays['custom'][layerId] = true;
 
-			if (!$customOverlayOrder.includes(layerId)) {
+            if (!$customOverlayOrder.includes(layerId)) {
-				$customOverlayOrder = [...$customOverlayOrder, layerId];
+                $customOverlayOrder = [...$customOverlayOrder, layerId];
-			}
+            }
-		}
+        }
-	}
+    }
 
-	function tryDeleteLayer(node: any, id: string): any {
+    function tryDeleteLayer(node: any, id: string): any {
-		if (node.hasOwnProperty(id)) {
+        if (node.hasOwnProperty(id)) {
-			delete node[id];
+            delete node[id];
-		}
+        }
-		return node;
+        return node;
-	}
+    }
 
-	function deleteLayer(layerId: string) {
+    function deleteLayer(layerId: string) {
-		let layer = $customLayers[layerId];
+        let layer = $customLayers[layerId];
-		if (layer.layerType === 'basemap') {
+        if (layer.layerType === 'basemap') {
-			if (layerId === $currentBasemap) {
+            if (layerId === $currentBasemap) {
-				$currentBasemap = defaultBasemap;
+                $currentBasemap = defaultBasemap;
-			}
+            }
-			if (layerId === $previousBasemap) {
+            if (layerId === $previousBasemap) {
-				$previousBasemap = defaultBasemap;
+                $previousBasemap = defaultBasemap;
-			}
+            }
 
-			$selectedBasemapTree.basemaps['custom'] = tryDeleteLayer(
+            $selectedBasemapTree.basemaps['custom'] = tryDeleteLayer(
-				$selectedBasemapTree.basemaps['custom'],
+                $selectedBasemapTree.basemaps['custom'],
-				layerId
+                layerId
-			);
+            );
-			if (Object.keys($selectedBasemapTree.basemaps['custom']).length === 0) {
+            if (Object.keys($selectedBasemapTree.basemaps['custom']).length === 0) {
-				$selectedBasemapTree.basemaps = tryDeleteLayer($selectedBasemapTree.basemaps, 'custom');
+                $selectedBasemapTree.basemaps = tryDeleteLayer(
-			}
+                    $selectedBasemapTree.basemaps,
-			$customBasemapOrder = $customBasemapOrder.filter((id) => id !== layerId);
+                    'custom'
-		} else {
+                );
-			$currentOverlays.overlays['custom'][layerId] = false;
+            }
-			if ($previousOverlays.overlays['custom']) {
+            $customBasemapOrder = $customBasemapOrder.filter((id) => id !== layerId);
-				$previousOverlays.overlays['custom'] = tryDeleteLayer(
+        } else {
-					$previousOverlays.overlays['custom'],
+            $currentOverlays.overlays['custom'][layerId] = false;
-					layerId
+            if ($previousOverlays.overlays['custom']) {
-				);
+                $previousOverlays.overlays['custom'] = tryDeleteLayer(
-			}
+                    $previousOverlays.overlays['custom'],
+                    layerId
+                );
+            }
 
-			$selectedOverlayTree.overlays['custom'] = tryDeleteLayer(
+            $selectedOverlayTree.overlays['custom'] = tryDeleteLayer(
-				$selectedOverlayTree.overlays['custom'],
+                $selectedOverlayTree.overlays['custom'],
-				layerId
+                layerId
-			);
+            );
-			if (Object.keys($selectedOverlayTree.overlays['custom']).length === 0) {
+            if (Object.keys($selectedOverlayTree.overlays['custom']).length === 0) {
-				$selectedOverlayTree.overlays = tryDeleteLayer($selectedOverlayTree.overlays, 'custom');
+                $selectedOverlayTree.overlays = tryDeleteLayer(
-			}
+                    $selectedOverlayTree.overlays,
-			$customOverlayOrder = $customOverlayOrder.filter((id) => id !== layerId);
+                    'custom'
+                );
+            }
+            $customOverlayOrder = $customOverlayOrder.filter((id) => id !== layerId);
 
-			if (
+            if (
-				$currentOverlays.overlays['custom'] &&
+                $currentOverlays.overlays['custom'] &&
-				$currentOverlays.overlays['custom'][layerId] &&
+                $currentOverlays.overlays['custom'][layerId] &&
-				$map
+                $map
-			) {
+            ) {
-				try {
+                try {
-					$map.removeImport(layerId);
+                    $map.removeImport(layerId);
-				} catch (e) {
+                } catch (e) {
-					// No reliable way to check if the map is ready to remove sources and layers
+                    // No reliable way to check if the map is ready to remove sources and layers
-				}
+                }
-			}
+            }
-		}
+        }
-		$customLayers = tryDeleteLayer($customLayers, layerId);
+        $customLayers = tryDeleteLayer($customLayers, layerId);
-	}
+    }
 
-	let selectedLayerId: string | undefined = undefined;
+    let selectedLayerId: string | undefined = undefined;
 
-	function setDataFromSelectedLayer() {
+    function setDataFromSelectedLayer() {
-		if (selectedLayerId) {
+        if (selectedLayerId) {
-			const layer = $customLayers[selectedLayerId];
+            const layer = $customLayers[selectedLayerId];
-			name = layer.name;
+            name = layer.name;
-			tileUrls = layer.tileUrls;
+            tileUrls = layer.tileUrls;
-			maxZoom = layer.maxZoom;
+            maxZoom = layer.maxZoom;
-			layerType = layer.layerType;
+            layerType = layer.layerType;
-			resourceType = layer.resourceType;
+            resourceType = layer.resourceType;
-		} else {
+        } else {
-			name = '';
+            name = '';
-			tileUrls = [''];
+            tileUrls = [''];
-			maxZoom = 20;
+            maxZoom = 20;
-			layerType = 'basemap';
+            layerType = 'basemap';
-			resourceType = 'raster';
+            resourceType = 'raster';
-		}
+        }
-	}
+    }
 
-	$: selectedLayerId, setDataFromSelectedLayer();
+    $: selectedLayerId, setDataFromSelectedLayer();
 </script>
 
 <div class="flex flex-col">
-	{#if $customBasemapOrder.length > 0}
+    {#if $customBasemapOrder.length > 0}
-		<div class="flex flex-row items-center gap-1 font-semibold mb-2">
+        <div class="flex flex-row items-center gap-1 font-semibold mb-2">
-			<Map size="16" />
+            <Map size="16" />
-			{$_('layers.label.basemaps')}
+            {$_('layers.label.basemaps')}
-			<div class="grow">
+            <div class="grow">
-				<Separator />
+                <Separator />
-			</div>
+            </div>
-		</div>
+        </div>
-	{/if}
+    {/if}
-	<div
+    <div
-		bind:this={basemapContainer}
+        bind:this={basemapContainer}
-		class="ml-1.5 flex flex-col gap-1 {$customBasemapOrder.length > 0 ? 'mb-2' : ''}"
+        class="ml-1.5 flex flex-col gap-1 {$customBasemapOrder.length > 0 ? 'mb-2' : ''}"
-	>
+    >
-		{#each $customBasemapOrder as id (id)}
+        {#each $customBasemapOrder as id (id)}
-			<div class="flex flex-row items-center gap-2" data-id={id}>
+            <div class="flex flex-row items-center gap-2" data-id={id}>
-				<Move size="12" />
+                <Move size="12" />
-				<span class="grow">{$customLayers[id].name}</span>
+                <span class="grow">{$customLayers[id].name}</span>
-				<Button variant="outline" on:click={() => (selectedLayerId = id)} class="p-1 h-7">
+                <Button variant="outline" on:click={() => (selectedLayerId = id)} class="p-1 h-7">
-					<Pencil size="16" />
+                    <Pencil size="16" />
-				</Button>
+                </Button>
-				<Button variant="outline" on:click={() => deleteLayer(id)} class="p-1 h-7">
+                <Button variant="outline" on:click={() => deleteLayer(id)} class="p-1 h-7">
-					<Trash2 size="16" />
+                    <Trash2 size="16" />
-				</Button>
+                </Button>
-			</div>
+            </div>
-		{/each}
+        {/each}
-	</div>
+    </div>
-	{#if $customOverlayOrder.length > 0}
+    {#if $customOverlayOrder.length > 0}
-		<div class="flex flex-row items-center gap-1 font-semibold mb-2">
+        <div class="flex flex-row items-center gap-1 font-semibold mb-2">
-			<Layers2 size="16" />
+            <Layers2 size="16" />
-			{$_('layers.label.overlays')}
+            {$_('layers.label.overlays')}
-			<div class="grow">
+            <div class="grow">
-				<Separator />
+                <Separator />
-			</div>
+            </div>
-		</div>
+        </div>
-	{/if}
+    {/if}
-	<div
+    <div
-		bind:this={overlayContainer}
+        bind:this={overlayContainer}
-		class="ml-1.5 flex flex-col gap-1 {$customOverlayOrder.length > 0 ? 'mb-2' : ''}"
+        class="ml-1.5 flex flex-col gap-1 {$customOverlayOrder.length > 0 ? 'mb-2' : ''}"
-	>
+    >
-		{#each $customOverlayOrder as id (id)}
+        {#each $customOverlayOrder as id (id)}
-			<div class="flex flex-row items-center gap-2" data-id={id}>
+            <div class="flex flex-row items-center gap-2" data-id={id}>
-				<Move size="12" />
+                <Move size="12" />
-				<span class="grow">{$customLayers[id].name}</span>
+                <span class="grow">{$customLayers[id].name}</span>
-				<Button variant="outline" on:click={() => (selectedLayerId = id)} class="p-1 h-7">
+                <Button variant="outline" on:click={() => (selectedLayerId = id)} class="p-1 h-7">
-					<Pencil size="16" />
+                    <Pencil size="16" />
-				</Button>
+                </Button>
-				<Button variant="outline" on:click={() => deleteLayer(id)} class="p-1 h-7">
+                <Button variant="outline" on:click={() => deleteLayer(id)} class="p-1 h-7">
-					<Trash2 size="16" />
+                    <Trash2 size="16" />
-				</Button>
+                </Button>
-			</div>
+            </div>
-		{/each}
+        {/each}
-	</div>
+    </div>
 
-	<Card.Root>
+    <Card.Root>
-		<Card.Header class="p-3">
+        <Card.Header class="p-3">
-			<Card.Title class="text-base">
+            <Card.Title class="text-base">
-				{#if selectedLayerId}
+                {#if selectedLayerId}
-					{$_('layers.custom_layers.edit')}
+                    {$_('layers.custom_layers.edit')}
-				{:else}
+                {:else}
-					{$_('layers.custom_layers.new')}
+                    {$_('layers.custom_layers.new')}
-				{/if}
+                {/if}
-			</Card.Title>
+            </Card.Title>
-		</Card.Header>
+        </Card.Header>
-		<Card.Content class="p-3 pt-0">
+        <Card.Content class="p-3 pt-0">
-			<fieldset class="flex flex-col gap-2">
+            <fieldset class="flex flex-col gap-2">
-				<Label for="name">{$_('menu.metadata.name')}</Label>
+                <Label for="name">{$_('menu.metadata.name')}</Label>
-				<Input bind:value={name} id="name" class="h-8" />
+                <Input bind:value={name} id="name" class="h-8" />
-				<Label for="url">{$_('layers.custom_layers.urls')}</Label>
+                <Label for="url">{$_('layers.custom_layers.urls')}</Label>
-				{#each tileUrls as url, i}
+                {#each tileUrls as url, i}
-					<div class="flex flex-row gap-2">
+                    <div class="flex flex-row gap-2">
-						<Input
+                        <Input
-							bind:value={tileUrls[i]}
+                            bind:value={tileUrls[i]}
-							id="url"
+                            id="url"
-							class="h-8"
+                            class="h-8"
-							placeholder={$_('layers.custom_layers.url_placeholder')}
+                            placeholder={$_('layers.custom_layers.url_placeholder')}
-						/>
+                        />
-						{#if tileUrls.length > 1}
+                        {#if tileUrls.length > 1}
-							<Button
+                            <Button
-								on:click={() => (tileUrls = tileUrls.filter((_, index) => index !== i))}
+                                on:click={() =>
-								variant="outline"
+                                    (tileUrls = tileUrls.filter((_, index) => index !== i))}
-								class="p-1 h-8"
+                                variant="outline"
-							>
+                                class="p-1 h-8"
-								<Minus size="16" />
+                            >
-							</Button>
+                                <Minus size="16" />
-						{/if}
+                            </Button>
-						{#if i === tileUrls.length - 1}
+                        {/if}
-							<Button
+                        {#if i === tileUrls.length - 1}
-								on:click={() => (tileUrls = [...tileUrls, ''])}
+                            <Button
-								variant="outline"
+                                on:click={() => (tileUrls = [...tileUrls, ''])}
-								class="p-1 h-8"
+                                variant="outline"
-							>
+                                class="p-1 h-8"
-								<Plus size="16" />
+                            >
-							</Button>
+                                <Plus size="16" />
-						{/if}
+                            </Button>
-					</div>
+                        {/if}
-				{/each}
+                    </div>
-				{#if resourceType === 'raster'}
+                {/each}
-					<Label for="maxZoom">{$_('layers.custom_layers.max_zoom')}</Label>
+                {#if resourceType === 'raster'}
-					<Input type="number" bind:value={maxZoom} id="maxZoom" min={0} max={22} class="h-8" />
+                    <Label for="maxZoom">{$_('layers.custom_layers.max_zoom')}</Label>
-				{/if}
+                    <Input
-				<Label>{$_('layers.custom_layers.layer_type')}</Label>
+                        type="number"
-				<RadioGroup.Root bind:value={layerType} class="flex flex-row">
+                        bind:value={maxZoom}
-					<div class="flex items-center space-x-2">
+                        id="maxZoom"
-						<RadioGroup.Item value="basemap" id="basemap" />
+                        min={0}
-						<Label for="basemap">{$_('layers.custom_layers.basemap')}</Label>
+                        max={22}
-					</div>
+                        class="h-8"
-					<div class="flex items-center space-x-2">
+                    />
-						<RadioGroup.Item value="overlay" id="overlay" />
+                {/if}
-						<Label for="overlay">{$_('layers.custom_layers.overlay')}</Label>
+                <Label>{$_('layers.custom_layers.layer_type')}</Label>
-					</div>
+                <RadioGroup.Root bind:value={layerType} class="flex flex-row">
-				</RadioGroup.Root>
+                    <div class="flex items-center space-x-2">
-				{#if selectedLayerId}
+                        <RadioGroup.Item value="basemap" id="basemap" />
-					<div class="mt-2 flex flex-row gap-2">
+                        <Label for="basemap">{$_('layers.custom_layers.basemap')}</Label>
-						<Button variant="outline" on:click={createLayer} class="grow">
+                    </div>
-							<Save size="16" class="mr-1" />
+                    <div class="flex items-center space-x-2">
-							{$_('layers.custom_layers.update')}
+                        <RadioGroup.Item value="overlay" id="overlay" />
-						</Button>
+                        <Label for="overlay">{$_('layers.custom_layers.overlay')}</Label>
-						<Button variant="outline" on:click={() => (selectedLayerId = undefined)}>
+                    </div>
-							<CircleX size="16" />
+                </RadioGroup.Root>
-						</Button>
+                {#if selectedLayerId}
-					</div>
+                    <div class="mt-2 flex flex-row gap-2">
-				{:else}
+                        <Button variant="outline" on:click={createLayer} class="grow">
-					<Button variant="outline" class="mt-2" on:click={createLayer}>
+                            <Save size="16" class="mr-1" />
-						<CirclePlus size="16" class="mr-1" />
+                            {$_('layers.custom_layers.update')}
-						{$_('layers.custom_layers.create')}
+                        </Button>
-					</Button>
+                        <Button variant="outline" on:click={() => (selectedLayerId = undefined)}>
-				{/if}
+                            <CircleX size="16" />
-			</fieldset>
+                        </Button>
-		</Card.Content>
+                    </div>
-	</Card.Root>
+                {:else}
+                    <Button variant="outline" class="mt-2" on:click={createLayer}>
+                        <CirclePlus size="16" class="mr-1" />
+                        {$_('layers.custom_layers.create')}
+                    </Button>
+                {/if}
+            </fieldset>
+        </Card.Content>
+    </Card.Root>
 </div>

website/src/lib/components/layer-control/LayerControl.svelte

@@ -1,222 +1,222 @@
 <script lang="ts">
-	import CustomControl from '$lib/components/custom-control/CustomControl.svelte';
+    import CustomControl from '$lib/components/custom-control/CustomControl.svelte';
-	import LayerTree from './LayerTree.svelte';
+    import LayerTree from './LayerTree.svelte';
 
-	import { Separator } from '$lib/components/ui/separator';
+    import { Separator } from '$lib/components/ui/separator';
-	import { ScrollArea } from '$lib/components/ui/scroll-area/index.js';
+    import { ScrollArea } from '$lib/components/ui/scroll-area/index.js';
 
-	import { Layers } from 'lucide-svelte';
+    import { Layers } from 'lucide-svelte';
 
-	import { basemaps, defaultBasemap, overlays } from '$lib/assets/layers';
+    import { basemaps, defaultBasemap, overlays } from '$lib/assets/layers';
-	import { settings } from '$lib/db';
+    import { settings } from '$lib/db';
-	import { map } from '$lib/stores';
+    import { map } from '$lib/stores';
-	import { get, writable } from 'svelte/store';
+    import { get, writable } from 'svelte/store';
-	import { customBasemapUpdate, getLayers } from './utils';
+    import { customBasemapUpdate, getLayers } from './utils';
-	import { OverpassLayer } from './OverpassLayer';
+    import { OverpassLayer } from './OverpassLayer';
 
-	let container: HTMLDivElement;
+    let container: HTMLDivElement;
-	let overpassLayer: OverpassLayer;
+    let overpassLayer: OverpassLayer;
 
-	const {
+    const {
-		currentBasemap,
+        currentBasemap,
-		previousBasemap,
+        previousBasemap,
-		currentOverlays,
+        currentOverlays,
-		currentOverpassQueries,
+        currentOverpassQueries,
-		selectedBasemapTree,
+        selectedBasemapTree,
-		selectedOverlayTree,
+        selectedOverlayTree,
-		selectedOverpassTree,
+        selectedOverpassTree,
-		customLayers,
+        customLayers,
-		opacities
+        opacities,
-	} = settings;
+    } = settings;
 
-	function setStyle() {
+    function setStyle() {
-		if ($map) {
+        if ($map) {
-			let basemap = basemaps.hasOwnProperty($currentBasemap)
+            let basemap = basemaps.hasOwnProperty($currentBasemap)
-				? basemaps[$currentBasemap]
+                ? basemaps[$currentBasemap]
-				: ($customLayers[$currentBasemap]?.value ?? basemaps[defaultBasemap]);
+                : ($customLayers[$currentBasemap]?.value ?? basemaps[defaultBasemap]);
-			$map.removeImport('basemap');
+            $map.removeImport('basemap');
-			if (typeof basemap === 'string') {
+            if (typeof basemap === 'string') {
-				$map.addImport({ id: 'basemap', url: basemap }, 'overlays');
+                $map.addImport({ id: 'basemap', url: basemap }, 'overlays');
-			} else {
+            } else {
-				$map.addImport(
+                $map.addImport(
-					{
+                    {
-						id: 'basemap',
+                        id: 'basemap',
-						data: basemap
+                        data: basemap,
-					},
+                    },
-					'overlays'
+                    'overlays'
-				);
+                );
-			}
+            }
-		}
+        }
-	}
+    }
 
-	$: if ($map && ($currentBasemap || $customBasemapUpdate)) {
+    $: if ($map && ($currentBasemap || $customBasemapUpdate)) {
-		setStyle();
+        setStyle();
-	}
+    }
 
-	function addOverlay(id: string) {
+    function addOverlay(id: string) {
-		try {
+        try {
-			let overlay = $customLayers.hasOwnProperty(id) ? $customLayers[id].value : overlays[id];
+            let overlay = $customLayers.hasOwnProperty(id) ? $customLayers[id].value : overlays[id];
-			if (typeof overlay === 'string') {
+            if (typeof overlay === 'string') {
-				$map.addImport({ id, url: overlay });
+                $map.addImport({ id, url: overlay });
-			} else {
+            } else {
-				if ($opacities.hasOwnProperty(id)) {
+                if ($opacities.hasOwnProperty(id)) {
-					overlay = {
+                    overlay = {
-						...overlay,
+                        ...overlay,
-						layers: overlay.layers.map((layer) => {
+                        layers: overlay.layers.map((layer) => {
-							if (layer.type === 'raster') {
+                            if (layer.type === 'raster') {
-								if (!layer.paint) {
+                                if (!layer.paint) {
-									layer.paint = {};
+                                    layer.paint = {};
-								}
+                                }
-								layer.paint['raster-opacity'] = $opacities[id];
+                                layer.paint['raster-opacity'] = $opacities[id];
-							}
+                            }
-							return layer;
+                            return layer;
-						})
+                        }),
-					};
+                    };
-				}
+                }
-				$map.addImport({
+                $map.addImport({
-					id,
+                    id,
-					data: overlay
+                    data: overlay,
-				});
+                });
-			}
+            }
-		} catch (e) {
+        } catch (e) {
-			// No reliable way to check if the map is ready to add sources and layers
+            // No reliable way to check if the map is ready to add sources and layers
-		}
+        }
-	}
+    }
 
-	function updateOverlays() {
+    function updateOverlays() {
-		if ($map && $currentOverlays && $opacities) {
+        if ($map && $currentOverlays && $opacities) {
-			let overlayLayers = getLayers($currentOverlays);
+            let overlayLayers = getLayers($currentOverlays);
-			try {
+            try {
-				let activeOverlays = $map.getStyle().imports.reduce((acc, i) => {
+                let activeOverlays = $map.getStyle().imports.reduce((acc, i) => {
-					if (!['basemap', 'overlays', 'glyphs-and-sprite'].includes(i.id)) {
+                    if (!['basemap', 'overlays', 'glyphs-and-sprite'].includes(i.id)) {
-						acc[i.id] = i;
+                        acc[i.id] = i;
-					}
+                    }
-					return acc;
+                    return acc;
-				}, {});
+                }, {});
-				let toRemove = Object.keys(activeOverlays).filter((id) => !overlayLayers[id]);
+                let toRemove = Object.keys(activeOverlays).filter((id) => !overlayLayers[id]);
-				toRemove.forEach((id) => {
+                toRemove.forEach((id) => {
-					$map.removeImport(id);
+                    $map.removeImport(id);
-				});
+                });
-				let toAdd = Object.entries(overlayLayers)
+                let toAdd = Object.entries(overlayLayers)
-					.filter(([id, selected]) => selected && !activeOverlays.hasOwnProperty(id))
+                    .filter(([id, selected]) => selected && !activeOverlays.hasOwnProperty(id))
-					.map(([id]) => id);
+                    .map(([id]) => id);
-				toAdd.forEach((id) => {
+                toAdd.forEach((id) => {
-					addOverlay(id);
+                    addOverlay(id);
-				});
+                });
-			} catch (e) {
+            } catch (e) {
-				// No reliable way to check if the map is ready to add sources and layers
+                // No reliable way to check if the map is ready to add sources and layers
-			}
+            }
-		}
+        }
-	}
+    }
 
-	$: if ($map && $currentOverlays && $opacities) {
+    $: if ($map && $currentOverlays && $opacities) {
-		updateOverlays();
+        updateOverlays();
-	}
+    }
 
-	$: if ($map) {
+    $: if ($map) {
-		if (overpassLayer) {
+        if (overpassLayer) {
-			overpassLayer.remove();
+            overpassLayer.remove();
-		}
+        }
-		overpassLayer = new OverpassLayer($map);
+        overpassLayer = new OverpassLayer($map);
-		overpassLayer.add();
+        overpassLayer.add();
-		$map.on('style.import.load', updateOverlays);
+        $map.on('style.import.load', updateOverlays);
-	}
+    }
 
-	let selectedBasemap = writable(get(currentBasemap));
+    let selectedBasemap = writable(get(currentBasemap));
-	selectedBasemap.subscribe((value) => {
+    selectedBasemap.subscribe((value) => {
-		// Updates coming from radio buttons
+        // Updates coming from radio buttons
-		if (value !== get(currentBasemap)) {
+        if (value !== get(currentBasemap)) {
-			previousBasemap.set(get(currentBasemap));
+            previousBasemap.set(get(currentBasemap));
-			currentBasemap.set(value);
+            currentBasemap.set(value);
-		}
+        }
-	});
+    });
-	currentBasemap.subscribe((value) => {
+    currentBasemap.subscribe((value) => {
-		// Updates coming from the database, or from the user swapping basemaps
+        // Updates coming from the database, or from the user swapping basemaps
-		if (value !== get(selectedBasemap)) {
+        if (value !== get(selectedBasemap)) {
-			selectedBasemap.set(value);
+            selectedBasemap.set(value);
-		}
+        }
-	});
+    });
 
-	let open = false;
+    let open = false;
-	function openLayerControl() {
+    function openLayerControl() {
-		open = true;
+        open = true;
-	}
+    }
-	function closeLayerControl() {
+    function closeLayerControl() {
-		open = false;
+        open = false;
-	}
+    }
-	let cancelEvents = false;
+    let cancelEvents = false;
 </script>
 
 <CustomControl class="group min-w-[29px] min-h-[29px] overflow-hidden">
-	<!-- svelte-ignore a11y-no-static-element-interactions -->
+    <!-- svelte-ignore a11y-no-static-element-interactions -->
-	<div
+    <div
-		bind:this={container}
+        bind:this={container}
-		class="h-full w-full"
+        class="h-full w-full"
-		on:mouseenter={openLayerControl}
+        on:mouseenter={openLayerControl}
-		on:mouseleave={closeLayerControl}
+        on:mouseleave={closeLayerControl}
-		on:pointerenter={() => {
+        on:pointerenter={() => {
-			if (!open) {
+            if (!open) {
-				cancelEvents = true;
+                cancelEvents = true;
-				openLayerControl();
+                openLayerControl();
-				setTimeout(() => {
+                setTimeout(() => {
-					cancelEvents = false;
+                    cancelEvents = false;
-				}, 500);
+                }, 500);
-			}
+            }
-		}}
+        }}
-	>
+    >
-		<div
+        <div
-			class="flex flex-row justify-center items-center delay-100 transition-[opacity] duration-0 {open
+            class="flex flex-row justify-center items-center delay-100 transition-[opacity] duration-0 {open
-				? 'opacity-0 w-0 h-0 delay-0'
+                ? 'opacity-0 w-0 h-0 delay-0'
-				: 'w-[29px] h-[29px]'}"
+                : 'w-[29px] h-[29px]'}"
-		>
+        >
-			<Layers size="20" />
+            <Layers size="20" />
-		</div>
+        </div>
-		<div
+        <div
-			class="transition-[grid-template-rows grid-template-cols] grid grid-rows-[0fr] grid-cols-[0fr] duration-150 h-full {open
+            class="transition-[grid-template-rows grid-template-cols] grid grid-rows-[0fr] grid-cols-[0fr] duration-150 h-full {open
-				? 'grid-rows-[1fr] grid-cols-[1fr]'
+                ? 'grid-rows-[1fr] grid-cols-[1fr]'
-				: ''} {cancelEvents ? 'pointer-events-none' : ''}"
+                : ''} {cancelEvents ? 'pointer-events-none' : ''}"
-		>
+        >
-			<ScrollArea>
+            <ScrollArea>
-				<div class="h-fit">
+                <div class="h-fit">
-					<div class="p-2">
+                    <div class="p-2">
-						<LayerTree
+                        <LayerTree
-							layerTree={$selectedBasemapTree}
+                            layerTree={$selectedBasemapTree}
-							name="basemaps"
+                            name="basemaps"
-							bind:selected={$selectedBasemap}
+                            bind:selected={$selectedBasemap}
-						/>
+                        />
-					</div>
+                    </div>
-					<Separator class="w-full" />
+                    <Separator class="w-full" />
-					<div class="p-2">
+                    <div class="p-2">
-						{#if $currentOverlays}
+                        {#if $currentOverlays}
-							<LayerTree
+                            <LayerTree
-								layerTree={$selectedOverlayTree}
+                                layerTree={$selectedOverlayTree}
-								name="overlays"
+                                name="overlays"
-								multiple={true}
+                                multiple={true}
-								bind:checked={$currentOverlays}
+                                bind:checked={$currentOverlays}
-							/>
+                            />
-						{/if}
+                        {/if}
-					</div>
+                    </div>
-					<Separator class="w-full" />
+                    <Separator class="w-full" />
-					<div class="p-2">
+                    <div class="p-2">
-						{#if $currentOverpassQueries}
+                        {#if $currentOverpassQueries}
-							<LayerTree
+                            <LayerTree
-								layerTree={$selectedOverpassTree}
+                                layerTree={$selectedOverpassTree}
-								name="overpass"
+                                name="overpass"
-								multiple={true}
+                                multiple={true}
-								bind:checked={$currentOverpassQueries}
+                                bind:checked={$currentOverpassQueries}
-							/>
+                            />
-						{/if}
+                        {/if}
-					</div>
+                    </div>
-				</div>
+                </div>
-			</ScrollArea>
+            </ScrollArea>
-		</div>
+        </div>
-	</div>
+    </div>
 </CustomControl>
 
 <svelte:window
-	on:click={(e) => {
+    on:click={(e) => {
-		if (open && !cancelEvents && !container.contains(e.target)) {
+        if (open && !cancelEvents && !container.contains(e.target)) {
-			closeLayerControl();
+            closeLayerControl();
-		}
+        }
-	}}
+    }}
 />

website/src/lib/components/layer-control/LayerControlSettings.svelte

@@ -1,189 +1,197 @@
 <script lang="ts">
-	import LayerTree from './LayerTree.svelte';
+    import LayerTree from './LayerTree.svelte';
 
-	import { Separator } from '$lib/components/ui/separator';
+    import { Separator } from '$lib/components/ui/separator';
-	import { ScrollArea } from '$lib/components/ui/scroll-area/index.js';
+    import { ScrollArea } from '$lib/components/ui/scroll-area/index.js';
-	import * as Sheet from '$lib/components/ui/sheet';
+    import * as Sheet from '$lib/components/ui/sheet';
-	import * as Accordion from '$lib/components/ui/accordion';
+    import * as Accordion from '$lib/components/ui/accordion';
-	import { Label } from '$lib/components/ui/label';
+    import { Label } from '$lib/components/ui/label';
-	import * as Select from '$lib/components/ui/select';
+    import * as Select from '$lib/components/ui/select';
-	import { Slider } from '$lib/components/ui/slider';
+    import { Slider } from '$lib/components/ui/slider';
 
-	import {
+    import {
-		basemapTree,
+        basemapTree,
-		defaultBasemap,
+        defaultBasemap,
-		overlays,
+        overlays,
-		overlayTree,
+        overlayTree,
-		overpassTree
+        overpassTree,
-	} from '$lib/assets/layers';
+    } from '$lib/assets/layers';
-	import { getLayers, isSelected, toggle } from '$lib/components/layer-control/utils';
+    import { getLayers, isSelected, toggle } from '$lib/components/layer-control/utils';
-	import { settings } from '$lib/db';
+    import { settings } from '$lib/db';
 
-	import { _ } from 'svelte-i18n';
+    import { _ } from 'svelte-i18n';
-	import { writable } from 'svelte/store';
+    import { writable } from 'svelte/store';
-	import { map } from '$lib/stores';
+    import { map } from '$lib/stores';
-	import CustomLayers from './CustomLayers.svelte';
+    import CustomLayers from './CustomLayers.svelte';
 
-	const {
+    const {
-		selectedBasemapTree,
+        selectedBasemapTree,
-		selectedOverlayTree,
+        selectedOverlayTree,
-		selectedOverpassTree,
+        selectedOverpassTree,
-		currentBasemap,
+        currentBasemap,
-		currentOverlays,
+        currentOverlays,
-		customLayers,
+        customLayers,
-		opacities
+        opacities,
-	} = settings;
+    } = settings;
 
-	export let open: boolean;
+    export let open: boolean;
-	let accordionValue: string | string[] | undefined = undefined;
+    let accordionValue: string | string[] | undefined = undefined;
 
-	let selectedOverlay = writable(undefined);
+    let selectedOverlay = writable(undefined);
-	let overlayOpacity = writable([1]);
+    let overlayOpacity = writable([1]);
 
-	function setOpacityFromSelection() {
+    function setOpacityFromSelection() {
-		if ($selectedOverlay) {
+        if ($selectedOverlay) {
-			let overlayId = $selectedOverlay.value;
+            let overlayId = $selectedOverlay.value;
-			if ($opacities.hasOwnProperty(overlayId)) {
+            if ($opacities.hasOwnProperty(overlayId)) {
-				$overlayOpacity = [$opacities[overlayId]];
+                $overlayOpacity = [$opacities[overlayId]];
-			} else {
+            } else {
-				$overlayOpacity = [1];
+                $overlayOpacity = [1];
-			}
+            }
-		} else {
+        } else {
-			$overlayOpacity = [1];
+            $overlayOpacity = [1];
-		}
+        }
-	}
+    }
 
-	$: if ($selectedBasemapTree && $currentBasemap) {
+    $: if ($selectedBasemapTree && $currentBasemap) {
-		if (!isSelected($selectedBasemapTree, $currentBasemap)) {
+        if (!isSelected($selectedBasemapTree, $currentBasemap)) {
-			if (!isSelected($selectedBasemapTree, defaultBasemap)) {
+            if (!isSelected($selectedBasemapTree, defaultBasemap)) {
-				$selectedBasemapTree = toggle($selectedBasemapTree, defaultBasemap);
+                $selectedBasemapTree = toggle($selectedBasemapTree, defaultBasemap);
-			}
+            }
-			$currentBasemap = defaultBasemap;
+            $currentBasemap = defaultBasemap;
-		}
+        }
-	}
+    }
 
-	$: if ($selectedOverlayTree && $currentOverlays) {
+    $: if ($selectedOverlayTree && $currentOverlays) {
-		let overlayLayers = getLayers($currentOverlays);
+        let overlayLayers = getLayers($currentOverlays);
-		let toRemove = Object.entries(overlayLayers).filter(
+        let toRemove = Object.entries(overlayLayers).filter(
-			([id, checked]) => checked && !isSelected($selectedOverlayTree, id)
+            ([id, checked]) => checked && !isSelected($selectedOverlayTree, id)
-		);
+        );
-		if (toRemove.length > 0) {
+        if (toRemove.length > 0) {
-			currentOverlays.update((tree) => {
+            currentOverlays.update((tree) => {
-				toRemove.forEach(([id]) => {
+                toRemove.forEach(([id]) => {
-					toggle(tree, id);
+                    toggle(tree, id);
-				});
+                });
-				return tree;
+                return tree;
-			});
+            });
-		}
+        }
-	}
+    }
 
-	$: if ($selectedOverlay) {
+    $: if ($selectedOverlay) {
-		setOpacityFromSelection();
+        setOpacityFromSelection();
-	}
+    }
 </script>
 
 <Sheet.Root bind:open>
-	<Sheet.Trigger class="hidden" />
+    <Sheet.Trigger class="hidden" />
-	<Sheet.Content>
+    <Sheet.Content>
-		<Sheet.Header class="h-full">
+        <Sheet.Header class="h-full">
-			<Sheet.Title>{$_('layers.settings')}</Sheet.Title>
+            <Sheet.Title>{$_('layers.settings')}</Sheet.Title>
-			<ScrollArea class="w-[105%] min-h-full pr-4">
+            <ScrollArea class="w-[105%] min-h-full pr-4">
-				<Sheet.Description>
+                <Sheet.Description>
-					{$_('layers.settings_help')}
+                    {$_('layers.settings_help')}
-				</Sheet.Description>
+                </Sheet.Description>
-				<Accordion.Root class="flex flex-col" bind:value={accordionValue}>
+                <Accordion.Root class="flex flex-col" bind:value={accordionValue}>
-					<Accordion.Item value="layer-selection" class="flex flex-col">
+                    <Accordion.Item value="layer-selection" class="flex flex-col">
-						<Accordion.Trigger>{$_('layers.selection')}</Accordion.Trigger>
+                        <Accordion.Trigger>{$_('layers.selection')}</Accordion.Trigger>
-						<Accordion.Content class="grow flex flex-col border rounded">
+                        <Accordion.Content class="grow flex flex-col border rounded">
-							<div class="py-2 pl-1 pr-2">
+                            <div class="py-2 pl-1 pr-2">
-								<LayerTree
+                                <LayerTree
-									layerTree={basemapTree}
+                                    layerTree={basemapTree}
-									name="basemapSettings"
+                                    name="basemapSettings"
-									multiple={true}
+                                    multiple={true}
-									bind:checked={$selectedBasemapTree}
+                                    bind:checked={$selectedBasemapTree}
-								/>
+                                />
-							</div>
+                            </div>
-							<Separator />
+                            <Separator />
-							<div class="py-2 pl-1 pr-2">
+                            <div class="py-2 pl-1 pr-2">
-								<LayerTree
+                                <LayerTree
-									layerTree={overlayTree}
+                                    layerTree={overlayTree}
-									name="overlaySettings"
+                                    name="overlaySettings"
-									multiple={true}
+                                    multiple={true}
-									bind:checked={$selectedOverlayTree}
+                                    bind:checked={$selectedOverlayTree}
-								/>
+                                />
-							</div>
+                            </div>
-							<Separator />
+                            <Separator />
-							<div class="py-2 pl-1 pr-2">
+                            <div class="py-2 pl-1 pr-2">
-								<LayerTree
+                                <LayerTree
-									layerTree={overpassTree}
+                                    layerTree={overpassTree}
-									name="overpassSettings"
+                                    name="overpassSettings"
-									multiple={true}
+                                    multiple={true}
-									bind:checked={$selectedOverpassTree}
+                                    bind:checked={$selectedOverpassTree}
-								/>
+                                />
-							</div>
+                            </div>
-						</Accordion.Content>
+                        </Accordion.Content>
-					</Accordion.Item>
+                    </Accordion.Item>
-					<Accordion.Item value="overlay-opacity">
+                    <Accordion.Item value="overlay-opacity">
-						<Accordion.Trigger>{$_('layers.opacity')}</Accordion.Trigger>
+                        <Accordion.Trigger>{$_('layers.opacity')}</Accordion.Trigger>
-						<Accordion.Content class="flex flex-col gap-3 overflow-visible">
+                        <Accordion.Content class="flex flex-col gap-3 overflow-visible">
-							<div class="flex flex-row gap-6 items-center">
+                            <div class="flex flex-row gap-6 items-center">
-								<Label>
+                                <Label>
-									{$_('layers.custom_layers.overlay')}
+                                    {$_('layers.custom_layers.overlay')}
-								</Label>
+                                </Label>
-								<Select.Root bind:selected={$selectedOverlay}>
+                                <Select.Root bind:selected={$selectedOverlay}>
-									<Select.Trigger class="h-8 mr-1">
+                                    <Select.Trigger class="h-8 mr-1">
-										<Select.Value />
+                                        <Select.Value />
-									</Select.Trigger>
+                                    </Select.Trigger>
-									<Select.Content class="h-fit max-h-[40dvh] overflow-y-auto">
+                                    <Select.Content class="h-fit max-h-[40dvh] overflow-y-auto">
-										{#each Object.keys(overlays) as id}
+                                        {#each Object.keys(overlays) as id}
-											{#if isSelected($selectedOverlayTree, id)}
+                                            {#if isSelected($selectedOverlayTree, id)}
-												<Select.Item value={id}>{$_(`layers.label.${id}`)}</Select.Item>
+                                                <Select.Item value={id}
-											{/if}
+                                                    >{$_(`layers.label.${id}`)}</Select.Item
-										{/each}
+                                                >
-										{#each Object.entries($customLayers) as [id, layer]}
+                                            {/if}
-											{#if layer.layerType === 'overlay'}
+                                        {/each}
-												<Select.Item value={id}>{layer.name}</Select.Item>
+                                        {#each Object.entries($customLayers) as [id, layer]}
-											{/if}
+                                            {#if layer.layerType === 'overlay'}
-										{/each}
+                                                <Select.Item value={id}>{layer.name}</Select.Item>
-									</Select.Content>
+                                            {/if}
-								</Select.Root>
+                                        {/each}
-							</div>
+                                    </Select.Content>
-							<Label class="flex flex-row gap-6 items-center">
+                                </Select.Root>
-								{$_('menu.style.opacity')}
+                            </div>
-								<div class="p-2 pr-3 grow">
+                            <Label class="flex flex-row gap-6 items-center">
-									<Slider
+                                {$_('menu.style.opacity')}
-										bind:value={$overlayOpacity}
+                                <div class="p-2 pr-3 grow">
-										min={0.1}
+                                    <Slider
-										max={1}
+                                        bind:value={$overlayOpacity}
-										step={0.1}
+                                        min={0.1}
-										disabled={$selectedOverlay === undefined}
+                                        max={1}
-										onValueChange={(value) => {
+                                        step={0.1}
-											if ($selectedOverlay) {
+                                        disabled={$selectedOverlay === undefined}
-												if ($map && isSelected($currentOverlays, $selectedOverlay.value)) {
+                                        onValueChange={(value) => {
-													try {
+                                            if ($selectedOverlay) {
-														$map.removeImport($selectedOverlay.value);
+                                                if (
-													} catch (e) {
+                                                    $map &&
-														// No reliable way to check if the map is ready to remove sources and layers
+                                                    isSelected(
-													}
+                                                        $currentOverlays,
-												}
+                                                        $selectedOverlay.value
-												$opacities[$selectedOverlay.value] = value[0];
+                                                    )
-											}
+                                                ) {
-										}}
+                                                    try {
-									/>
+                                                        $map.removeImport($selectedOverlay.value);
-								</div>
+                                                    } catch (e) {
-							</Label>
+                                                        // No reliable way to check if the map is ready to remove sources and layers
-						</Accordion.Content>
+                                                    }
-					</Accordion.Item>
+                                                }
-					<Accordion.Item value="custom-layers">
+                                                $opacities[$selectedOverlay.value] = value[0];
-						<Accordion.Trigger>{$_('layers.custom_layers.title')}</Accordion.Trigger>
+                                            }
-						<Accordion.Content>
+                                        }}
-							<ScrollArea>
+                                    />
-								<CustomLayers />
+                                </div>
-							</ScrollArea>
+                            </Label>
-						</Accordion.Content>
+                        </Accordion.Content>
-					</Accordion.Item>
+                    </Accordion.Item>
-				</Accordion.Root>
+                    <Accordion.Item value="custom-layers">
-			</ScrollArea>
+                        <Accordion.Trigger>{$_('layers.custom_layers.title')}</Accordion.Trigger>
-		</Sheet.Header>
+                        <Accordion.Content>
-	</Sheet.Content>
+                            <ScrollArea>
+                                <CustomLayers />
+                            </ScrollArea>
+                        </Accordion.Content>
+                    </Accordion.Item>
+                </Accordion.Root>
+            </ScrollArea>
+        </Sheet.Header>
+    </Sheet.Content>
 </Sheet.Root>

website/src/lib/components/layer-control/LayerTree.svelte

@@ -1,20 +1,20 @@
 <script lang="ts">
-	import LayerTreeNode from './LayerTreeNode.svelte';
+    import LayerTreeNode from './LayerTreeNode.svelte';
-	import { type LayerTreeType } from '$lib/assets/layers';
+    import { type LayerTreeType } from '$lib/assets/layers';
-	import CollapsibleTree from '$lib/components/collapsible-tree/CollapsibleTree.svelte';
+    import CollapsibleTree from '$lib/components/collapsible-tree/CollapsibleTree.svelte';
 
-	export let layerTree: LayerTreeType;
+    export let layerTree: LayerTreeType;
-	export let name: string;
+    export let name: string;
-	export let selected: string | undefined = undefined;
+    export let selected: string | undefined = undefined;
-	export let multiple: boolean = false;
+    export let multiple: boolean = false;
 
-	export let checked: LayerTreeType = {};
+    export let checked: LayerTreeType = {};
 </script>
 
 <form>
-	<fieldset class="min-w-64 mb-1">
+    <fieldset class="min-w-64 mb-1">
-		<CollapsibleTree nohover={true}>
+        <CollapsibleTree nohover={true}>
-			<LayerTreeNode {name} node={layerTree} bind:selected {multiple} bind:checked />
+            <LayerTreeNode {name} node={layerTree} bind:selected {multiple} bind:checked />
-		</CollapsibleTree>
+        </CollapsibleTree>
-	</fieldset>
+    </fieldset>
 </form>

website/src/lib/components/layer-control/LayerTreeNode.svelte

@@ -1,86 +1,98 @@
 <script lang="ts">
-	import { Label } from '$lib/components/ui/label';
+    import { Label } from '$lib/components/ui/label';
-	import { Checkbox } from '$lib/components/ui/checkbox';
+    import { Checkbox } from '$lib/components/ui/checkbox';
-	import CollapsibleTreeNode from '../collapsible-tree/CollapsibleTreeNode.svelte';
+    import CollapsibleTreeNode from '../collapsible-tree/CollapsibleTreeNode.svelte';
 
-	import { type LayerTreeType } from '$lib/assets/layers';
+    import { type LayerTreeType } from '$lib/assets/layers';
-	import { anySelectedLayer } from './utils';
+    import { anySelectedLayer } from './utils';
 
-	import { _ } from 'svelte-i18n';
+    import { _ } from 'svelte-i18n';
-	import { settings } from '$lib/db';
+    import { settings } from '$lib/db';
-	import { beforeUpdate } from 'svelte';
+    import { beforeUpdate } from 'svelte';
 
-	export let name: string;
+    export let name: string;
-	export let node: LayerTreeType;
+    export let node: LayerTreeType;
-	export let selected: string | undefined = undefined;
+    export let selected: string | undefined = undefined;
-	export let multiple: boolean = false;
+    export let multiple: boolean = false;
 
-	export let checked: LayerTreeType;
+    export let checked: LayerTreeType;
 
-	const { customLayers } = settings;
+    const { customLayers } = settings;
 
-	beforeUpdate(() => {
+    beforeUpdate(() => {
-		if (checked !== undefined) {
+        if (checked !== undefined) {
-			Object.keys(node).forEach((id) => {
+            Object.keys(node).forEach((id) => {
-				if (!checked.hasOwnProperty(id)) {
+                if (!checked.hasOwnProperty(id)) {
-					if (typeof node[id] == 'boolean') {
+                    if (typeof node[id] == 'boolean') {
-						checked[id] = false;
+                        checked[id] = false;
-					} else {
+                    } else {
-						checked[id] = {};
+                        checked[id] = {};
-					}
+                    }
-				}
+                }
-			});
+            });
-		}
+        }
-	});
+    });
 </script>
 
 <div class="flex flex-col gap-[3px]">
-	{#each Object.keys(node) as id}
+    {#each Object.keys(node) as id}
-		{#if typeof node[id] == 'boolean'}
+        {#if typeof node[id] == 'boolean'}
-			{#if node[id]}
+            {#if node[id]}
-				<div class="flex flex-row items-center gap-2 first:mt-0.5 h-4">
+                <div class="flex flex-row items-center gap-2 first:mt-0.5 h-4">
-					{#if multiple}
+                    {#if multiple}
-						<Checkbox
+                        <Checkbox
-							id="{name}-{id}"
+                            id="{name}-{id}"
-							{name}
+                            {name}
-							value={id}
+                            value={id}
-							bind:checked={checked[id]}
+                            bind:checked={checked[id]}
-							class="scale-90"
+                            class="scale-90"
-							aria-label={$_(`layers.label.${id}`)}
+                            aria-label={$_(`layers.label.${id}`)}
-						/>
+                        />
-					{:else}
+                    {:else}
-						<input id="{name}-{id}" type="radio" {name} value={id} bind:group={selected} />
+                        <input
-					{/if}
+                            id="{name}-{id}"
-					<Label for="{name}-{id}" class="flex flex-row items-center gap-1">
+                            type="radio"
-						{#if $customLayers.hasOwnProperty(id)}
+                            {name}
-							{$customLayers[id].name}
+                            value={id}
-						{:else}
+                            bind:group={selected}
-							{$_(`layers.label.${id}`)}
+                        />
-						{/if}
+                    {/if}
-					</Label>
+                    <Label for="{name}-{id}" class="flex flex-row items-center gap-1">
-				</div>
+                        {#if $customLayers.hasOwnProperty(id)}
-			{/if}
+                            {$customLayers[id].name}
-		{:else if anySelectedLayer(node[id])}
+                        {:else}
-			<CollapsibleTreeNode {id}>
+                            {$_(`layers.label.${id}`)}
-				<span slot="trigger">{$_(`layers.label.${id}`)}</span>
+                        {/if}
-				<div slot="content">
+                    </Label>
-					<svelte:self node={node[id]} {name} bind:selected {multiple} bind:checked={checked[id]} />
+                </div>
-				</div>
+            {/if}
-			</CollapsibleTreeNode>
+        {:else if anySelectedLayer(node[id])}
-		{/if}
+            <CollapsibleTreeNode {id}>
-	{/each}
+                <span slot="trigger">{$_(`layers.label.${id}`)}</span>
+                <div slot="content">
+                    <svelte:self
+                        node={node[id]}
+                        {name}
+                        bind:selected
+                        {multiple}
+                        bind:checked={checked[id]}
+                    />
+                </div>
+            </CollapsibleTreeNode>
+        {/if}
+    {/each}
 </div>
 
 <style lang="postcss">
-	div :global(input[type='radio']) {
+    div :global(input[type='radio']) {
-		@apply appearance-none;
+        @apply appearance-none;
-		@apply w-4 h-4;
+        @apply w-4 h-4;
-		@apply border-[1.5px] border-primary;
+        @apply border-[1.5px] border-primary;
-		@apply rounded-full;
+        @apply rounded-full;
-		@apply ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2;
+        @apply ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2;
-		@apply cursor-pointer;
+        @apply cursor-pointer;
-		@apply checked:bg-primary;
+        @apply checked:bg-primary;
-		@apply checked:bg-clip-content;
+        @apply checked:bg-clip-content;
-		@apply checked:p-0.5;
+        @apply checked:p-0.5;
-	}
+    }
 </style>

website/src/lib/components/layer-control/OverpassLayer.ts

@@ -1,14 +1,12 @@
-import SphericalMercator from "@mapbox/sphericalmercator";
+import SphericalMercator from '@mapbox/sphericalmercator';
-import { getLayers } from "./utils";
+import { getLayers } from './utils';
-import { get, writable } from "svelte/store";
+import { get, writable } from 'svelte/store';
-import { liveQuery } from "dexie";
+import { liveQuery } from 'dexie';
-import { db, settings } from "$lib/db";
+import { db, settings } from '$lib/db';
-import { overpassQueryData } from "$lib/assets/layers";
+import { overpassQueryData } from '$lib/assets/layers';
-import { MapPopup } from "$lib/components/MapPopup";
+import { MapPopup } from '$lib/components/MapPopup';
 
-const {
+const { currentOverpassQueries } = settings;
-    currentOverpassQueries
-} = settings;
 
 const mercator = new SphericalMercator({
     size: 256,
@@ -29,7 +27,7 @@ export class OverpassLayer {
     popup: MapPopup;
 
     currentQueries: Set<string> = new Set();
-    nextQueries: Map<string, { x: number, y: number, queries: string[] }> = new Map();
+    nextQueries: Map<string, { x: number; y: number; queries: string[] }> = new Map();
 
     unsubscribes: (() => void)[] = [];
     queryIfNeededBinded = this.queryIfNeeded.bind(this);
@@ -50,10 +48,12 @@ export class OverpassLayer {
         this.map.on('moveend', this.queryIfNeededBinded);
         this.map.on('style.import.load', this.updateBinded);
         this.unsubscribes.push(data.subscribe(this.updateBinded));
-        this.unsubscribes.push(currentOverpassQueries.subscribe(() => {
+        this.unsubscribes.push(
-            this.updateBinded();
+            currentOverpassQueries.subscribe(() => {
-            this.queryIfNeededBinded();
+                this.updateBinded();
-        }));
+                this.queryIfNeededBinded();
+            })
+        );
 
         this.update();
     }
@@ -126,8 +126,8 @@ export class OverpassLayer {
         this.popup.setItem({
             item: {
                 ...e.features[0].properties,
-                sym: overpassQueryData[e.features[0].properties.query].symbol ?? ''
+                sym: overpassQueryData[e.features[0].properties.query].symbol ?? '',
-            }
+            },
         });
     }
 
@@ -146,12 +146,23 @@ export class OverpassLayer {
                     continue;
                 }
 
-                db.overpasstiles.where('[x+y]').equals([x, y]).toArray().then((querytiles) => {
+                db.overpasstiles
-                    let missingQueries = queries.filter((query) => !querytiles.some((querytile) => querytile.query === query && time - querytile.time < this.expirationTime));
+                    .where('[x+y]')
-                    if (missingQueries.length > 0) {
+                    .equals([x, y])
-                        this.queryTile(x, y, missingQueries);
+                    .toArray()
-                    }
+                    .then((querytiles) => {
-                });
+                        let missingQueries = queries.filter(
+                            (query) =>
+                                !querytiles.some(
+                                    (querytile) =>
+                                        querytile.query === query &&
+                                        time - querytile.time < this.expirationTime
+                                )
+                        );
+                        if (missingQueries.length > 0) {
+                            this.queryTile(x, y, missingQueries);
+                        }
+                    });
             }
         }
     }
@@ -165,13 +176,16 @@ export class OverpassLayer {
 
         const bounds = mercator.bbox(x, y, this.queryZoom);
         fetch(`${this.overpassUrl}?data=${getQueryForBounds(bounds, queries)}`)
-            .then((response) => {
+            .then(
-                if (response.ok) {
+                (response) => {
-                    return response.json();
+                    if (response.ok) {
-                }
+                        return response.json();
-                this.currentQueries.delete(`${x},${y}`);
+                    }
-                return Promise.reject();
+                    this.currentQueries.delete(`${x},${y}`);
-            }, () => (this.currentQueries.delete(`${x},${y}`)))
+                    return Promise.reject();
+                },
+                () => this.currentQueries.delete(`${x},${y}`)
+            )
             .then((data) => this.storeOverpassData(x, y, queries, data))
             .catch(() => this.currentQueries.delete(`${x},${y}`));
     }
@@ -179,7 +193,7 @@ export class OverpassLayer {
     storeOverpassData(x: number, y: number, queries: string[], data: any) {
         let time = Date.now();
         let queryTiles = queries.map((query) => ({ x, y, query, time }));
-        let pois: { query: string, id: number, poi: GeoJSON.Feature }[] = [];
+        let pois: { query: string; id: number; poi: GeoJSON.Feature }[] = [];
 
         if (data.elements === undefined) {
             return;
@@ -195,7 +209,9 @@ export class OverpassLayer {
                             type: 'Feature',
                             geometry: {
                                 type: 'Point',
-                                coordinates: element.center ? [element.center.lon, element.center.lat] : [element.lon, element.lat],
+                                coordinates: element.center
+                                    ? [element.center.lon, element.center.lat]
+                                    : [element.lon, element.lat],
                             },
                             properties: {
                                 id: element.id,
@@ -203,9 +219,10 @@ export class OverpassLayer {
                                 lon: element.center ? element.center.lon : element.lon,
                                 query: query,
                                 icon: `overpass-${query}`,
-                                tags: element.tags
+                                tags: element.tags,
+                                type: element.type,
                             },
-                        }
+                        },
                     });
                 }
             }
@@ -228,11 +245,13 @@ export class OverpassLayer {
                     if (!this.map.hasImage(`overpass-${query}`)) {
                         this.map.addImage(`overpass-${query}`, icon);
                     }
-                }
+                };
 
                 // Lucide icons are SVG files with a 24x24 viewBox
                 // Create a new SVG with a 32x32 viewBox and center the icon in a circle
-                icon.src = 'data:image/svg+xml,' + encodeURIComponent(`
+                icon.src =
+                    'data:image/svg+xml,' +
+                    encodeURIComponent(`
                 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40">
                     <circle cx="20" cy="20" r="20" fill="${overpassQueryData[query].icon.color}" />
                     <g transform="translate(8 8)">
@@ -264,9 +283,14 @@ function getQuery(query: string) {
 function getQueryItem(tags: Record<string, string | boolean | string[]>) {
     let arrayEntry = Object.entries(tags).find(([_, value]) => Array.isArray(value));
     if (arrayEntry !== undefined) {
-        return arrayEntry[1].map((val) => `nwr${Object.entries(tags)
+        return arrayEntry[1]
-            .map(([tag, value]) => `[${tag}=${tag === arrayEntry[0] ? val : value}]`)
+            .map(
-            .join('')};`).join('');
+                (val) =>
+                    `nwr${Object.entries(tags)
+                        .map(([tag, value]) => `[${tag}=${tag === arrayEntry[0] ? val : value}]`)
+                        .join('')};`
+            )
+            .join('');
     } else {
         return `nwr${Object.entries(tags)
             .map(([tag, value]) => `[${tag}=${value}]`)
@@ -283,8 +307,9 @@ function belongsToQuery(element: any, query: string) {
 }
 
 function belongsToQueryItem(element: any, tags: Record<string, string | boolean | string[]>) {
-    return Object.entries(tags)
+    return Object.entries(tags).every(([tag, value]) =>
-        .every(([tag, value]) => Array.isArray(value) ? value.includes(element.tags[tag]) : element.tags[tag] === value);
+        Array.isArray(value) ? value.includes(element.tags[tag]) : element.tags[tag] === value
+    );
 }
 
 function getCurrentQueries() {
@@ -293,5 +318,7 @@ function getCurrentQueries() {
         return [];
     }
 
-    return Object.entries(getLayers(currentQueries)).filter(([_, selected]) => selected).map(([query, _]) => query);
+    return Object.entries(getLayers(currentQueries))
-}
+        .filter(([_, selected]) => selected)
+        .map(([query, _]) => query);
+}

website/src/lib/components/layer-control/OverpassPopup.svelte

@@ -1,95 +1,107 @@
 <script lang="ts">
-	import * as Card from '$lib/components/ui/card';
+    import * as Card from '$lib/components/ui/card';
-	import { Button } from '$lib/components/ui/button';
+    import { Button } from '$lib/components/ui/button';
-	import { selection } from '$lib/components/file-list/Selection';
+    import { selection } from '$lib/components/file-list/Selection';
-	import { PencilLine, MapPin } from 'lucide-svelte';
+    import { PencilLine, MapPin } from 'lucide-svelte';
-	import { _ } from 'svelte-i18n';
+    import { _ } from 'svelte-i18n';
-	import { dbUtils } from '$lib/db';
+    import { dbUtils } from '$lib/db';
-	import type { PopupItem } from '$lib/components/MapPopup';
+    import type { PopupItem } from '$lib/components/MapPopup';
-	import { ScrollArea } from '$lib/components/ui/scroll-area/index.js';
+    import { ScrollArea } from '$lib/components/ui/scroll-area/index.js';
+    import type { WaypointType } from 'gpx';
 
-	export let poi: PopupItem<any>;
+    export let poi: PopupItem<any>;
 
-	let tags = {};
+    let tags: { [key: string]: string } = {};
-	let name = '';
+    let name = '';
-	$: if (poi) {
+    $: if (poi) {
-		tags = JSON.parse(poi.item.tags);
+        tags = JSON.parse(poi.item.tags);
-		if (tags.name !== undefined && tags.name !== '') {
+        if (tags.name !== undefined && tags.name !== '') {
-			name = tags.name;
+            name = tags.name;
-		} else {
+        } else {
-			name = $_(`layers.label.${poi.item.query}`);
+            name = $_(`layers.label.${poi.item.query}`);
-		}
+        }
-	}
+    }
+
+    function addToFile() {
+        const desc = Object.entries(tags)
+            .map(([key, value]) => `${key}: ${value}`)
+            .join('\n');
+        let wpt: WaypointType = {
+            attributes: {
+                lat: poi.item.lat,
+                lon: poi.item.lon,
+            },
+            name: name,
+            desc: desc,
+            cmt: desc,
+            sym: poi.item.sym,
+        };
+        if (tags.website) {
+            wpt.link = {
+                attributes: {
+                    href: tags.website,
+                },
+            };
+        }
+        dbUtils.addOrUpdateWaypoint(wpt);
+    }
 </script>
 
 <Card.Root class="border-none shadow-md text-base p-2 max-w-[50dvw]">
-	<Card.Header class="p-0">
+    <Card.Header class="p-0">
-		<Card.Title class="text-md">
+        <Card.Title class="text-md">
-			<div class="flex flex-row gap-3">
+            <div class="flex flex-row gap-3">
-				<div class="flex flex-col">
+                <div class="flex flex-col">
-					{name}
+                    {name}
-					<div class="text-muted-foreground text-sm font-normal">
+                    <div class="text-muted-foreground text-sm font-normal">
-						{poi.item.lat.toFixed(6)}&deg; {poi.item.lon.toFixed(6)}&deg;
+                        {poi.item.lat.toFixed(6)}&deg; {poi.item.lon.toFixed(6)}&deg;
-					</div>
+                    </div>
-				</div>
+                </div>
-				<Button
+                <Button
-					class="ml-auto p-1.5 h-8"
+                    class="ml-auto p-1.5 h-8"
-					variant="outline"
+                    variant="outline"
-					href="https://www.openstreetmap.org/edit?editor=id&node={poi.item.id}"
+                    href="https://www.openstreetmap.org/edit?editor=id&{poi.item.type ??
-					target="_blank"
+                        'node'}={poi.item.id}"
-				>
+                    target="_blank"
-					<PencilLine size="16" />
+                >
-				</Button>
+                    <PencilLine size="16" />
-			</div>
+                </Button>
-		</Card.Title>
+            </div>
-	</Card.Header>
+        </Card.Title>
-	<Card.Content class="flex flex-col p-0 text-sm mt-1 whitespace-normal break-all">
+    </Card.Header>
-		<ScrollArea class="flex flex-col" viewportClasses="max-h-[30dvh]">
+    <Card.Content class="flex flex-col p-0 text-sm mt-1 whitespace-normal break-all">
-			{#if tags.image || tags['image:0']}
+        <ScrollArea class="flex flex-col" viewportClasses="max-h-[30dvh]">
-				<div class="w-full rounded-md overflow-clip my-2 max-w-96 mx-auto">
+            {#if tags.image || tags['image:0']}
-					<!-- svelte-ignore a11y-missing-attribute -->
+                <div class="w-full rounded-md overflow-clip my-2 max-w-96 mx-auto">
-					<img src={tags.image ?? tags['image:0']} />
+                    <!-- svelte-ignore a11y-missing-attribute -->
-				</div>
+                    <img src={tags.image ?? tags['image:0']} />
-			{/if}
+                </div>
-			<div class="grid grid-cols-[auto_auto] gap-x-3">
+            {/if}
-				{#each Object.entries(tags) as [key, value]}
+            <div class="grid grid-cols-[auto_auto] gap-x-3">
-					{#if key !== 'name' && !key.includes('image')}
+                {#each Object.entries(tags) as [key, value]}
-						<span class="font-mono">{key}</span>
+                    {#if key !== 'name' && !key.includes('image')}
-						{#if key === 'website' || key.startsWith('website:') || key === 'contact:website' || key === 'contact:facebook' || key === 'contact:instagram' || key === 'contact:twitter'}
+                        <span class="font-mono">{key}</span>
-							<a href={value} target="_blank" class="text-link underline">{value}</a>
+                        {#if key === 'website' || key.startsWith('website:') || key === 'contact:website' || key === 'contact:facebook' || key === 'contact:instagram' || key === 'contact:twitter'}
-						{:else if key === 'phone' || key === 'contact:phone'}
+                            <a href={value} target="_blank" class="text-link underline">{value}</a>
-							<a href={'tel:' + value} class="text-link underline">{value}</a>
+                        {:else if key === 'phone' || key === 'contact:phone'}
-						{:else if key === 'email' || key === 'contact:email'}
+                            <a href={'tel:' + value} class="text-link underline">{value}</a>
-							<a href={'mailto:' + value} class="text-link underline">{value}</a>
+                        {:else if key === 'email' || key === 'contact:email'}
-						{:else}
+                            <a href={'mailto:' + value} class="text-link underline">{value}</a>
-							<span>{value}</span>
+                        {:else}
-						{/if}
+                            <span>{value}</span>
-					{/if}
+                        {/if}
-				{/each}
+                    {/if}
-			</div>
+                {/each}
-		</ScrollArea>
+            </div>
-		<Button
+        </ScrollArea>
-			class="mt-2"
+        <Button
-			variant="outline"
+            class="mt-2"
-			disabled={$selection.size === 0}
+            variant="outline"
-			on:click={() => {
+            disabled={$selection.size === 0}
-				let desc = Object.entries(tags)
+            on:click={addToFile}
-					.map(([key, value]) => `${key}: ${value}`)
+        >
-					.join('\n');
+            <MapPin size="16" class="mr-1" />
-				dbUtils.addOrUpdateWaypoint({
+            {$_('toolbar.waypoint.add')}
-					attributes: {
+        </Button>
-						lat: poi.item.lat,
+    </Card.Content>
-						lon: poi.item.lon
-					},
-					name: name,
-					desc: desc,
-					cmt: desc,
-					sym: poi.item.sym
-				});
-			}}
-		>
-			<MapPin size="16" class="mr-1" />
-			{$_('toolbar.waypoint.add')}
-		</Button>
-	</Card.Content>
 </Card.Root>

website/src/lib/components/layer-control/utils.ts

@@ -1,24 +1,29 @@
-import type { LayerTreeType } from "$lib/assets/layers";
+import type { LayerTreeType } from '$lib/assets/layers';
-import { writable } from "svelte/store";
+import { writable } from 'svelte/store';
 
 export function anySelectedLayer(node: LayerTreeType) {
-    return Object.keys(node).find((id) => {
+    return (
-        if (typeof node[id] == "boolean") {
+        Object.keys(node).find((id) => {
-            if (node[id]) {
+            if (typeof node[id] == 'boolean') {
-                return true;
+                if (node[id]) {
+                    return true;
+                }
+            } else {
+                if (anySelectedLayer(node[id])) {
+                    return true;
+                }
             }
-        } else {
+            return false;
-            if (anySelectedLayer(node[id])) {
+        }) !== undefined
-                return true;
+    );
-            }
-        }
-        return false;
-    }) !== undefined;
 }
 
-export function getLayers(node: LayerTreeType, layers: { [key: string]: boolean } = {}): { [key: string]: boolean } {
+export function getLayers(
+    node: LayerTreeType,
+    layers: { [key: string]: boolean } = {}
+): { [key: string]: boolean } {
     Object.keys(node).forEach((id) => {
-        if (typeof node[id] == "boolean") {
+        if (typeof node[id] == 'boolean') {
             layers[id] = node[id];
         } else {
             getLayers(node[id], layers);
@@ -32,7 +37,7 @@ export function isSelected(node: LayerTreeType, id: string) {
         if (key === id) {
             return node[key];
         }
-        if (typeof node[key] !== "boolean" && isSelected(node[key], id)) {
+        if (typeof node[key] !== 'boolean' && isSelected(node[key], id)) {
             return true;
         }
         return false;
@@ -43,11 +48,11 @@ export function toggle(node: LayerTreeType, id: string) {
     Object.keys(node).forEach((key) => {
         if (key === id) {
             node[key] = !node[key];
-        } else if (typeof node[key] !== "boolean") {
+        } else if (typeof node[key] !== 'boolean') {
             toggle(node[key], id);
         }
     });
     return node;
 }
 
-export const customBasemapUpdate = writable(0);
+export const customBasemapUpdate = writable(0);

website/src/lib/components/street-view-control/Google.ts

@@ -1,5 +1,5 @@
-import { resetCursor, setCrosshairCursor } from "$lib/utils";
+import { resetCursor, setCrosshairCursor } from '$lib/utils';
-import type mapboxgl from "mapbox-gl";
+import type mapboxgl from 'mapbox-gl';
 
 export class GoogleRedirect {
     map: mapboxgl.Map;
@@ -30,4 +30,4 @@ export class GoogleRedirect {
             `https://www.google.com/maps/@?api=1&map_action=pano&viewpoint=${e.lngLat.lat},${e.lngLat.lng}`
         );
     }
-}
+}

website/src/lib/components/street-view-control/Mapillary.ts

@@ -1,12 +1,14 @@
-import mapboxgl, { type LayerSpecification, type VectorSourceSpecification } from "mapbox-gl";
+import mapboxgl, { type LayerSpecification, type VectorSourceSpecification } from 'mapbox-gl';
 import { Viewer, type ViewerBearingEvent } from 'mapillary-js/dist/mapillary.module';
 import 'mapillary-js/dist/mapillary.css';
-import { resetCursor, setPointerCursor } from "$lib/utils";
+import { resetCursor, setPointerCursor } from '$lib/utils';
-import type { Writable } from "svelte/store";
+import type { Writable } from 'svelte/store';
 
 const mapillarySource: VectorSourceSpecification = {
     type: 'vector',
-    tiles: ['https://tiles.mapillary.com/maps/vtp/mly1_computed_public/2/{z}/{x}/{y}?access_token=MLY|4381405525255083|3204871ec181638c3c31320490f03011'],
+    tiles: [
+        'https://tiles.mapillary.com/maps/vtp/mly1_computed_public/2/{z}/{x}/{y}?access_token=MLY|4381405525255083|3204871ec181638c3c31320490f03011',
+    ],
     minzoom: 6,
     maxzoom: 14,
 };
@@ -70,7 +72,7 @@ export class MapillaryLayer {
 
         this.marker = new mapboxgl.Marker({
             rotationAlignment: 'map',
-            element
+            element,
         });
 
         this.viewer.on('position', async () => {
@@ -145,4 +147,4 @@ export class MapillaryLayer {
     onMouseLeave() {
         resetCursor();
     }
-}
+}

website/src/lib/components/street-view-control/StreetViewControl.svelte

@@ -1,74 +1,74 @@
 <script lang="ts">
-	import CustomControl from '$lib/components/custom-control/CustomControl.svelte';
+    import CustomControl from '$lib/components/custom-control/CustomControl.svelte';
-	import Tooltip from '$lib/components/Tooltip.svelte';
+    import Tooltip from '$lib/components/Tooltip.svelte';
-	import { Toggle } from '$lib/components/ui/toggle';
+    import { Toggle } from '$lib/components/ui/toggle';
-	import { PersonStanding, X } from 'lucide-svelte';
+    import { PersonStanding, X } from 'lucide-svelte';
-	import { MapillaryLayer } from './Mapillary';
+    import { MapillaryLayer } from './Mapillary';
-	import { GoogleRedirect } from './Google';
+    import { GoogleRedirect } from './Google';
-	import { map, streetViewEnabled } from '$lib/stores';
+    import { map, streetViewEnabled } from '$lib/stores';
-	import { settings } from '$lib/db';
+    import { settings } from '$lib/db';
-	import { _ } from 'svelte-i18n';
+    import { _ } from 'svelte-i18n';
-	import { writable } from 'svelte/store';
+    import { writable } from 'svelte/store';
 
-	const { streetViewSource } = settings;
+    const { streetViewSource } = settings;
 
-	let googleRedirect: GoogleRedirect;
+    let googleRedirect: GoogleRedirect;
-	let mapillaryLayer: MapillaryLayer;
+    let mapillaryLayer: MapillaryLayer;
-	let mapillaryOpen = writable(false);
+    let mapillaryOpen = writable(false);
-	let container: HTMLElement;
+    let container: HTMLElement;
 
-	$: if ($map) {
+    $: if ($map) {
-		googleRedirect = new GoogleRedirect($map);
+        googleRedirect = new GoogleRedirect($map);
-		mapillaryLayer = new MapillaryLayer($map, container, mapillaryOpen);
+        mapillaryLayer = new MapillaryLayer($map, container, mapillaryOpen);
-	}
+    }
 
-	$: if (mapillaryLayer) {
+    $: if (mapillaryLayer) {
-		if ($streetViewSource === 'mapillary') {
+        if ($streetViewSource === 'mapillary') {
-			googleRedirect.remove();
+            googleRedirect.remove();
-			if ($streetViewEnabled) {
+            if ($streetViewEnabled) {
-				mapillaryLayer.add();
+                mapillaryLayer.add();
-			} else {
+            } else {
-				mapillaryLayer.remove();
+                mapillaryLayer.remove();
-			}
+            }
-		} else {
+        } else {
-			mapillaryLayer.remove();
+            mapillaryLayer.remove();
-			if ($streetViewEnabled) {
+            if ($streetViewEnabled) {
-				googleRedirect.add();
+                googleRedirect.add();
-			} else {
+            } else {
-				googleRedirect.remove();
+                googleRedirect.remove();
-			}
+            }
-		}
+        }
-	}
+    }
 </script>
 
 <CustomControl class="w-[29px] h-[29px] shrink-0">
-	<Tooltip class="w-full h-full" side="left" label={$_('menu.toggle_street_view')}>
+    <Tooltip class="w-full h-full" side="left" label={$_('menu.toggle_street_view')}>
-		<Toggle
+        <Toggle
-			bind:pressed={$streetViewEnabled}
+            bind:pressed={$streetViewEnabled}
-			class="w-full h-full rounded p-0"
+            class="w-full h-full rounded p-0"
-			aria-label={$_('menu.toggle_street_view')}
+            aria-label={$_('menu.toggle_street_view')}
-		>
+        >
-			<PersonStanding size="22" />
+            <PersonStanding size="22" />
-		</Toggle>
+        </Toggle>
-	</Tooltip>
+    </Tooltip>
 </CustomControl>
 
 <div
-	bind:this={container}
+    bind:this={container}
-	class="{$mapillaryOpen
+    class="{$mapillaryOpen
-		? ''
+        ? ''
-		: 'hidden'} !absolute bottom-[44px] right-2.5 z-10 w-[40%] h-[40%] bg-background rounded-md overflow-hidden border-background border-2"
+        : 'hidden'} !absolute bottom-[44px] right-2.5 z-10 w-[40%] h-[40%] bg-background rounded-md overflow-hidden border-background border-2"
 >
-	<!-- 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 -->
-	<div
+    <div
-		class="absolute top-0 right-0 z-10 bg-background p-1 rounded-bl-md cursor-pointer"
+        class="absolute top-0 right-0 z-10 bg-background p-1 rounded-bl-md cursor-pointer"
-		on:click={() => {
+        on:click={() => {
-			if (mapillaryLayer) {
+            if (mapillaryLayer) {
-				mapillaryLayer.closePopup();
+                mapillaryLayer.closePopup();
-			}
+            }
-		}}
+        }}
-	>
+    >
-		<X size="16" />
+        <X size="16" />
-	</div>
+    </div>
 </div>

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

@@ -1,54 +1,54 @@
 <script lang="ts">
-	import { Tool } from '$lib/stores';
+    import { Tool } from '$lib/stores';
-	import ToolbarItem from './ToolbarItem.svelte';
+    import ToolbarItem from './ToolbarItem.svelte';
-	import {
+    import {
-		Group,
+        Group,
-		CalendarClock,
+        CalendarClock,
-		Pencil,
+        Pencil,
-		SquareDashedMousePointer,
+        SquareDashedMousePointer,
-		Ungroup,
+        Ungroup,
-		MapPin,
+        MapPin,
-		Filter,
+        Filter,
-		Scissors,
+        Scissors,
-		MountainSnow
+        MountainSnow,
-	} from 'lucide-svelte';
+    } from 'lucide-svelte';
 
-	import { _ } from 'svelte-i18n';
+    import { _ } from 'svelte-i18n';
-	import ToolbarItemMenu from './ToolbarItemMenu.svelte';
+    import ToolbarItemMenu from './ToolbarItemMenu.svelte';
 </script>
 
 <div class="flex flex-row w-full items-center pr-12">
-	<div
+    <div
-		class="h-fit flex flex-col p-1 gap-1.5 bg-background rounded-r-md pointer-events-auto shadow-md {$$props.class ??
+        class="h-fit flex flex-col p-1 gap-1.5 bg-background rounded-r-md pointer-events-auto shadow-md {$$props.class ??
-			''}"
+            ''}"
-	>
+    >
-		<ToolbarItem tool={Tool.ROUTING} label={$_('toolbar.routing.tooltip')}>
+        <ToolbarItem tool={Tool.ROUTING} label={$_('toolbar.routing.tooltip')}>
-			<Pencil slot="icon" size="18" />
+            <Pencil slot="icon" size="18" />
-		</ToolbarItem>
+        </ToolbarItem>
-		<ToolbarItem tool={Tool.WAYPOINT} label={$_('toolbar.waypoint.tooltip')}>
+        <ToolbarItem tool={Tool.WAYPOINT} label={$_('toolbar.waypoint.tooltip')}>
-			<MapPin slot="icon" size="18" />
+            <MapPin slot="icon" size="18" />
-		</ToolbarItem>
+        </ToolbarItem>
-		<ToolbarItem tool={Tool.SCISSORS} label={$_('toolbar.scissors.tooltip')}>
+        <ToolbarItem tool={Tool.SCISSORS} label={$_('toolbar.scissors.tooltip')}>
-			<Scissors slot="icon" size="18" />
+            <Scissors slot="icon" size="18" />
-		</ToolbarItem>
+        </ToolbarItem>
-		<ToolbarItem tool={Tool.TIME} label={$_('toolbar.time.tooltip')}>
+        <ToolbarItem tool={Tool.TIME} label={$_('toolbar.time.tooltip')}>
-			<CalendarClock slot="icon" size="18" />
+            <CalendarClock slot="icon" size="18" />
-		</ToolbarItem>
+        </ToolbarItem>
-		<ToolbarItem tool={Tool.MERGE} label={$_('toolbar.merge.tooltip')}>
+        <ToolbarItem tool={Tool.MERGE} label={$_('toolbar.merge.tooltip')}>
-			<Group slot="icon" size="18" />
+            <Group slot="icon" size="18" />
-		</ToolbarItem>
+        </ToolbarItem>
-		<ToolbarItem tool={Tool.EXTRACT} label={$_('toolbar.extract.tooltip')}>
+        <ToolbarItem tool={Tool.EXTRACT} label={$_('toolbar.extract.tooltip')}>
-			<Ungroup slot="icon" size="18" />
+            <Ungroup slot="icon" size="18" />
-		</ToolbarItem>
+        </ToolbarItem>
-		<ToolbarItem tool={Tool.ELEVATION} label={$_('toolbar.elevation.button')}>
+        <ToolbarItem tool={Tool.ELEVATION} label={$_('toolbar.elevation.button')}>
-			<MountainSnow slot="icon" size="18" />
+            <MountainSnow slot="icon" size="18" />
-		</ToolbarItem>
+        </ToolbarItem>
-		<ToolbarItem tool={Tool.REDUCE} label={$_('toolbar.reduce.tooltip')}>
+        <ToolbarItem tool={Tool.REDUCE} label={$_('toolbar.reduce.tooltip')}>
-			<Filter slot="icon" size="18" />
+            <Filter slot="icon" size="18" />
-		</ToolbarItem>
+        </ToolbarItem>
-		<ToolbarItem tool={Tool.CLEAN} label={$_('toolbar.clean.tooltip')}>
+        <ToolbarItem tool={Tool.CLEAN} label={$_('toolbar.clean.tooltip')}>
-			<SquareDashedMousePointer slot="icon" size="18" />
+            <SquareDashedMousePointer slot="icon" size="18" />
-		</ToolbarItem>
+        </ToolbarItem>
-	</div>
+    </div>
-	<ToolbarItemMenu class={$$props.class ?? ''} />
+    <ToolbarItemMenu class={$$props.class ?? ''} />
 </div>

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

@@ -1,29 +1,29 @@
 <script lang="ts">
-	import { Button } from '$lib/components/ui/button';
+    import { Button } from '$lib/components/ui/button';
-	import * as Tooltip from '$lib/components/ui/tooltip/index.js';
+    import * as Tooltip from '$lib/components/ui/tooltip/index.js';
-	import { currentTool, type Tool } from '$lib/stores';
+    import { currentTool, type Tool } from '$lib/stores';
 
-	export let tool: Tool;
+    export let tool: Tool;
-	export let label: string;
+    export let label: string;
 
-	function toggleTool() {
+    function toggleTool() {
-		currentTool.update((current) => (current === tool ? null : tool));
+        currentTool.update((current) => (current === tool ? null : tool));
-	}
+    }
 </script>
 
 <Tooltip.Root openDelay={300}>
-	<Tooltip.Trigger asChild let:builder>
+    <Tooltip.Trigger asChild let:builder>
-		<Button
+        <Button
-			builders={[builder]}
+            builders={[builder]}
-			variant="ghost"
+            variant="ghost"
-			class="h-[26px] px-1 py-1.5 {$currentTool === tool ? 'bg-accent' : ''}"
+            class="h-[26px] px-1 py-1.5 {$currentTool === tool ? 'bg-accent' : ''}"
-			on:click={toggleTool}
+            on:click={toggleTool}
-			aria-label={label}
+            aria-label={label}
-		>
+        >
-			<slot name="icon" />
+            <slot name="icon" />
-		</Button>
+        </Button>
-	</Tooltip.Trigger>
+    </Tooltip.Trigger>
-	<Tooltip.Content side="right">
+    <Tooltip.Content side="right">
-		<span>{label}</span>
+        <span>{label}</span>
-	</Tooltip.Content>
+    </Tooltip.Content>
 </Tooltip.Root>

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

@@ -1,75 +1,75 @@
 <script lang="ts">
-	import { Tool, currentTool } from '$lib/stores';
+    import { Tool, currentTool } from '$lib/stores';
-	import { settings } from '$lib/db';
+    import { settings } from '$lib/db';
-	import { flyAndScale } from '$lib/utils';
+    import { flyAndScale } from '$lib/utils';
-	import * as Card from '$lib/components/ui/card';
+    import * as Card from '$lib/components/ui/card';
-	import Routing from '$lib/components/toolbar/tools/routing/Routing.svelte';
+    import Routing from '$lib/components/toolbar/tools/routing/Routing.svelte';
-	import Scissors from '$lib/components/toolbar/tools/scissors/Scissors.svelte';
+    import Scissors from '$lib/components/toolbar/tools/scissors/Scissors.svelte';
-	import Waypoint from '$lib/components/toolbar/tools/Waypoint.svelte';
+    import Waypoint from '$lib/components/toolbar/tools/Waypoint.svelte';
-	import Time from '$lib/components/toolbar/tools/Time.svelte';
+    import Time from '$lib/components/toolbar/tools/Time.svelte';
-	import Merge from '$lib/components/toolbar/tools/Merge.svelte';
+    import Merge from '$lib/components/toolbar/tools/Merge.svelte';
-	import Extract from '$lib/components/toolbar/tools/Extract.svelte';
+    import Extract from '$lib/components/toolbar/tools/Extract.svelte';
-	import Elevation from '$lib/components/toolbar/tools/Elevation.svelte';
+    import Elevation from '$lib/components/toolbar/tools/Elevation.svelte';
-	import Clean from '$lib/components/toolbar/tools/Clean.svelte';
+    import Clean from '$lib/components/toolbar/tools/Clean.svelte';
-	import Reduce from '$lib/components/toolbar/tools/Reduce.svelte';
+    import Reduce from '$lib/components/toolbar/tools/Reduce.svelte';
-	import RoutingControlPopup from '$lib/components/toolbar/tools/routing/RoutingControlPopup.svelte';
+    import RoutingControlPopup from '$lib/components/toolbar/tools/routing/RoutingControlPopup.svelte';
-	import { onMount } from 'svelte';
+    import { onMount } from 'svelte';
-	import mapboxgl from 'mapbox-gl';
+    import mapboxgl from 'mapbox-gl';
 
-	const { minimizeRoutingMenu } = settings;
+    const { minimizeRoutingMenu } = settings;
 
-	let popupElement: HTMLElement;
+    let popupElement: HTMLElement;
-	let popup: mapboxgl.Popup;
+    let popup: mapboxgl.Popup;
 
-	onMount(() => {
+    onMount(() => {
-		popup = new mapboxgl.Popup({
+        popup = new mapboxgl.Popup({
-			closeButton: false,
+            closeButton: false,
-			maxWidth: undefined
+            maxWidth: undefined,
-		});
+        });
-		popup.setDOMContent(popupElement);
+        popup.setDOMContent(popupElement);
-		popupElement.classList.remove('hidden');
+        popupElement.classList.remove('hidden');
-	});
+    });
 </script>
 
 {#if $currentTool !== null}
-	<div
+    <div
-		in:flyAndScale={{ x: -2, y: 0, duration: 100 }}
+        in:flyAndScale={{ x: -2, y: 0, duration: 100 }}
-		class="translate-x-1 h-full {$$props.class ?? ''}"
+        class="translate-x-1 h-full {$$props.class ?? ''}"
-	>
+    >
-		<div class="rounded-md shadow-md pointer-events-auto">
+        <div class="rounded-md shadow-md pointer-events-auto">
-			<Card.Root class="rounded-md border-none">
+            <Card.Root class="rounded-md border-none">
-				<Card.Content class="p-2.5">
+                <Card.Content class="p-2.5">
-					{#if $currentTool === Tool.ROUTING}
+                    {#if $currentTool === Tool.ROUTING}
-						<Routing {popup} {popupElement} bind:minimized={$minimizeRoutingMenu} />
+                        <Routing {popup} {popupElement} bind:minimized={$minimizeRoutingMenu} />
-					{:else if $currentTool === Tool.SCISSORS}
+                    {:else if $currentTool === Tool.SCISSORS}
-						<Scissors />
+                        <Scissors />
-					{:else if $currentTool === Tool.WAYPOINT}
+                    {:else if $currentTool === Tool.WAYPOINT}
-						<Waypoint />
+                        <Waypoint />
-					{:else if $currentTool === Tool.TIME}
+                    {:else if $currentTool === Tool.TIME}
-						<Time />
+                        <Time />
-					{:else if $currentTool === Tool.MERGE}
+                    {:else if $currentTool === Tool.MERGE}
-						<Merge />
+                        <Merge />
-					{:else if $currentTool === Tool.ELEVATION}
+                    {:else if $currentTool === Tool.ELEVATION}
-						<Elevation />
+                        <Elevation />
-					{:else if $currentTool === Tool.EXTRACT}
+                    {:else if $currentTool === Tool.EXTRACT}
-						<Extract />
+                        <Extract />
-					{:else if $currentTool === Tool.CLEAN}
+                    {:else if $currentTool === Tool.CLEAN}
-						<Clean />
+                        <Clean />
-					{:else if $currentTool === Tool.REDUCE}
+                    {:else if $currentTool === Tool.REDUCE}
-						<Reduce />
+                        <Reduce />
-					{/if}
+                    {/if}
-				</Card.Content>
+                </Card.Content>
-			</Card.Root>
+            </Card.Root>
-		</div>
+        </div>
-	</div>
+    </div>
 {/if}
 
 <svelte:window
-	on:keydown={(e) => {
+    on:keydown={(e) => {
-		if ($currentTool !== null && e.key === 'Escape') {
+        if ($currentTool !== null && e.key === 'Escape') {
-			currentTool.set(null);
+            currentTool.set(null);
-		}
+        }
-	}}
+    }}
 />
 
 <RoutingControlPopup bind:element={popupElement} />

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

@@ -1,188 +1,188 @@
 <script lang="ts" context="module">
-	enum CleanType {
+    enum CleanType {
-		INSIDE = 'inside',
+        INSIDE = 'inside',
-		OUTSIDE = 'outside'
+        OUTSIDE = 'outside',
-	}
+    }
 </script>
 
 <script lang="ts">
-	import { Label } from '$lib/components/ui/label/index.js';
+    import { Label } from '$lib/components/ui/label/index.js';
-	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 { Button } from '$lib/components/ui/button';
+    import { Button } from '$lib/components/ui/button';
-	import Help from '$lib/components/Help.svelte';
+    import Help from '$lib/components/Help.svelte';
-	import { _, locale } from 'svelte-i18n';
+    import { _, locale } from 'svelte-i18n';
-	import { onDestroy, onMount } from 'svelte';
+    import { onDestroy, onMount } from 'svelte';
-	import { getURLForLanguage, resetCursor, setCrosshairCursor } from '$lib/utils';
+    import { getURLForLanguage, resetCursor, setCrosshairCursor } from '$lib/utils';
-	import { Trash2 } from 'lucide-svelte';
+    import { Trash2 } from 'lucide-svelte';
-	import { map } from '$lib/stores';
+    import { map } from '$lib/stores';
-	import { selection } from '$lib/components/file-list/Selection';
+    import { selection } from '$lib/components/file-list/Selection';
-	import { dbUtils } from '$lib/db';
+    import { dbUtils } from '$lib/db';
 
-	let cleanType = CleanType.INSIDE;
+    let cleanType = CleanType.INSIDE;
-	let deleteTrackpoints = true;
+    let deleteTrackpoints = true;
-	let deleteWaypoints = true;
+    let deleteWaypoints = true;
-	let rectangleCoordinates: mapboxgl.LngLat[] = [];
+    let rectangleCoordinates: mapboxgl.LngLat[] = [];
 
-	function updateRectangle() {
+    function updateRectangle() {
-		if ($map) {
+        if ($map) {
-			if (rectangleCoordinates.length != 2) {
+            if (rectangleCoordinates.length != 2) {
-				if ($map.getLayer('rectangle')) {
+                if ($map.getLayer('rectangle')) {
-					$map.removeLayer('rectangle');
+                    $map.removeLayer('rectangle');
-				}
+                }
-			} else {
+            } else {
-				let data = {
+                let data = {
-					type: 'Feature',
+                    type: 'Feature',
-					geometry: {
+                    geometry: {
-						type: 'Polygon',
+                        type: 'Polygon',
-						coordinates: [
+                        coordinates: [
-							[
+                            [
-								[rectangleCoordinates[0].lng, rectangleCoordinates[0].lat],
+                                [rectangleCoordinates[0].lng, rectangleCoordinates[0].lat],
-								[rectangleCoordinates[1].lng, rectangleCoordinates[0].lat],
+                                [rectangleCoordinates[1].lng, rectangleCoordinates[0].lat],
-								[rectangleCoordinates[1].lng, rectangleCoordinates[1].lat],
+                                [rectangleCoordinates[1].lng, rectangleCoordinates[1].lat],
-								[rectangleCoordinates[0].lng, rectangleCoordinates[1].lat],
+                                [rectangleCoordinates[0].lng, rectangleCoordinates[1].lat],
-								[rectangleCoordinates[0].lng, rectangleCoordinates[0].lat]
+                                [rectangleCoordinates[0].lng, rectangleCoordinates[0].lat],
-							]
+                            ],
-						]
+                        ],
-					}
+                    },
-				};
+                };
-				let source = $map.getSource('rectangle');
+                let source = $map.getSource('rectangle');
-				if (source) {
+                if (source) {
-					source.setData(data);
+                    source.setData(data);
-				} else {
+                } else {
-					$map.addSource('rectangle', {
+                    $map.addSource('rectangle', {
-						type: 'geojson',
+                        type: 'geojson',
-						data: data
+                        data: data,
-					});
+                    });
-				}
+                }
-				if (!$map.getLayer('rectangle')) {
+                if (!$map.getLayer('rectangle')) {
-					$map.addLayer({
+                    $map.addLayer({
-						id: 'rectangle',
+                        id: 'rectangle',
-						type: 'fill',
+                        type: 'fill',
-						source: 'rectangle',
+                        source: 'rectangle',
-						paint: {
+                        paint: {
-							'fill-color': 'SteelBlue',
+                            'fill-color': 'SteelBlue',
-							'fill-opacity': 0.5
+                            'fill-opacity': 0.5,
-						}
+                        },
-					});
+                    });
-				}
+                }
-			}
+            }
-		}
+        }
-	}
+    }
 
-	$: if (rectangleCoordinates) {
+    $: if (rectangleCoordinates) {
-		updateRectangle();
+        updateRectangle();
-	}
+    }
 
-	let mousedown = false;
+    let mousedown = false;
-	function onMouseDown(e: any) {
+    function onMouseDown(e: any) {
-		mousedown = true;
+        mousedown = true;
-		rectangleCoordinates = [e.lngLat, e.lngLat];
+        rectangleCoordinates = [e.lngLat, e.lngLat];
-	}
+    }
 
-	function onMouseMove(e: any) {
+    function onMouseMove(e: any) {
-		if (mousedown) {
+        if (mousedown) {
-			rectangleCoordinates[1] = e.lngLat;
+            rectangleCoordinates[1] = e.lngLat;
-		}
+        }
-	}
+    }
 
-	function onMouseUp(e: any) {
+    function onMouseUp(e: any) {
-		mousedown = false;
+        mousedown = false;
-	}
+    }
 
-	onMount(() => {
+    onMount(() => {
-		setCrosshairCursor();
+        setCrosshairCursor();
-	});
+    });
 
-	$: if ($map) {
+    $: if ($map) {
-		$map.on('mousedown', onMouseDown);
+        $map.on('mousedown', onMouseDown);
-		$map.on('mousemove', onMouseMove);
+        $map.on('mousemove', onMouseMove);
-		$map.on('mouseup', onMouseUp);
+        $map.on('mouseup', onMouseUp);
-		$map.on('touchstart', onMouseDown);
+        $map.on('touchstart', onMouseDown);
-		$map.on('touchmove', onMouseMove);
+        $map.on('touchmove', onMouseMove);
-		$map.on('touchend', onMouseUp);
+        $map.on('touchend', onMouseUp);
-		$map.dragPan.disable();
+        $map.dragPan.disable();
-	}
+    }
 
-	onDestroy(() => {
+    onDestroy(() => {
-		resetCursor();
+        resetCursor();
-		if ($map) {
+        if ($map) {
-			$map.off('mousedown', onMouseDown);
+            $map.off('mousedown', onMouseDown);
-			$map.off('mousemove', onMouseMove);
+            $map.off('mousemove', onMouseMove);
-			$map.off('mouseup', onMouseUp);
+            $map.off('mouseup', onMouseUp);
-			$map.off('touchstart', onMouseDown);
+            $map.off('touchstart', onMouseDown);
-			$map.off('touchmove', onMouseMove);
+            $map.off('touchmove', onMouseMove);
-			$map.off('touchend', onMouseUp);
+            $map.off('touchend', onMouseUp);
-			$map.dragPan.enable();
+            $map.dragPan.enable();
 
-			if ($map.getLayer('rectangle')) {
+            if ($map.getLayer('rectangle')) {
-				$map.removeLayer('rectangle');
+                $map.removeLayer('rectangle');
-			}
+            }
-			if ($map.getSource('rectangle')) {
+            if ($map.getSource('rectangle')) {
-				$map.removeSource('rectangle');
+                $map.removeSource('rectangle');
-			}
+            }
-		}
+        }
-	});
+    });
 
-	$: validSelection = $selection.size > 0;
+    $: validSelection = $selection.size > 0;
 </script>
 
 <div class="flex flex-col gap-3 w-full max-w-80 items-center {$$props.class ?? ''}">
-	<fieldset class="flex flex-col gap-3">
+    <fieldset class="flex flex-col gap-3">
-		<div class="flex flex-row items-center gap-[6.4px] h-3">
+        <div class="flex flex-row items-center gap-[6.4px] h-3">
-			<Checkbox id="delete-trkpt" bind:checked={deleteTrackpoints} class="scale-90" />
+            <Checkbox id="delete-trkpt" bind:checked={deleteTrackpoints} class="scale-90" />
-			<Label for="delete-trkpt">
+            <Label for="delete-trkpt">
-				{$_('toolbar.clean.delete_trackpoints')}
+                {$_('toolbar.clean.delete_trackpoints')}
-			</Label>
+            </Label>
-		</div>
+        </div>
-		<div class="flex flex-row items-center gap-[6.4px] h-3">
+        <div class="flex flex-row items-center gap-[6.4px] h-3">
-			<Checkbox id="delete-wpt" bind:checked={deleteWaypoints} class="scale-90" />
+            <Checkbox id="delete-wpt" bind:checked={deleteWaypoints} class="scale-90" />
-			<Label for="delete-wpt">
+            <Label for="delete-wpt">
-				{$_('toolbar.clean.delete_waypoints')}
+                {$_('toolbar.clean.delete_waypoints')}
-			</Label>
+            </Label>
-		</div>
+        </div>
-		<RadioGroup.Root bind:value={cleanType}>
+        <RadioGroup.Root bind:value={cleanType}>
-			<Label class="flex flex-row items-center gap-2">
+            <Label class="flex flex-row items-center gap-2">
-				<RadioGroup.Item value={CleanType.INSIDE} />
+                <RadioGroup.Item value={CleanType.INSIDE} />
-				{$_('toolbar.clean.delete_inside')}
+                {$_('toolbar.clean.delete_inside')}
-			</Label>
+            </Label>
-			<Label class="flex flex-row items-center gap-2">
+            <Label class="flex flex-row items-center gap-2">
-				<RadioGroup.Item value={CleanType.OUTSIDE} />
+                <RadioGroup.Item value={CleanType.OUTSIDE} />
-				{$_('toolbar.clean.delete_outside')}
+                {$_('toolbar.clean.delete_outside')}
-			</Label>
+            </Label>
-		</RadioGroup.Root>
+        </RadioGroup.Root>
-	</fieldset>
+    </fieldset>
-	<Button
+    <Button
-		variant="outline"
+        variant="outline"
-		class="w-full"
+        class="w-full"
-		disabled={!validSelection || rectangleCoordinates.length != 2}
+        disabled={!validSelection || rectangleCoordinates.length != 2}
-		on:click={() => {
+        on:click={() => {
-			dbUtils.cleanSelection(
+            dbUtils.cleanSelection(
-				[
+                [
-					{
+                    {
-						lat: Math.min(rectangleCoordinates[0].lat, rectangleCoordinates[1].lat),
+                        lat: Math.min(rectangleCoordinates[0].lat, rectangleCoordinates[1].lat),
-						lon: Math.min(rectangleCoordinates[0].lng, rectangleCoordinates[1].lng)
+                        lon: Math.min(rectangleCoordinates[0].lng, rectangleCoordinates[1].lng),
-					},
+                    },
-					{
+                    {
-						lat: Math.max(rectangleCoordinates[0].lat, rectangleCoordinates[1].lat),
+                        lat: Math.max(rectangleCoordinates[0].lat, rectangleCoordinates[1].lat),
-						lon: Math.max(rectangleCoordinates[0].lng, rectangleCoordinates[1].lng)
+                        lon: Math.max(rectangleCoordinates[0].lng, rectangleCoordinates[1].lng),
-					}
+                    },
-				],
+                ],
-				cleanType === CleanType.INSIDE,
+                cleanType === CleanType.INSIDE,
-				deleteTrackpoints,
+                deleteTrackpoints,
-				deleteWaypoints
+                deleteWaypoints
-			);
+            );
-			rectangleCoordinates = [];
+            rectangleCoordinates = [];
-		}}
+        }}
-	>
+    >
-		<Trash2 size="16" class="mr-1" />
+        <Trash2 size="16" class="mr-1" />
-		{$_('toolbar.clean.button')}
+        {$_('toolbar.clean.button')}
-	</Button>
+    </Button>
-	<Help link={getURLForLanguage($locale, '/help/toolbar/clean')}>
+    <Help link={getURLForLanguage($locale, '/help/toolbar/clean')}>
-		{#if validSelection}
+        {#if validSelection}
-			{$_('toolbar.clean.help')}
+            {$_('toolbar.clean.help')}
-		{:else}
+        {:else}
-			{$_('toolbar.clean.help_no_selection')}
+            {$_('toolbar.clean.help_no_selection')}
-		{/if}
+        {/if}
-	</Help>
+    </Help>
 </div>

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

@@ -1,35 +1,35 @@
 <script lang="ts">
-	import { Button } from '$lib/components/ui/button';
+    import { Button } from '$lib/components/ui/button';
-	import { selection } from '$lib/components/file-list/Selection';
+    import { selection } from '$lib/components/file-list/Selection';
-	import Help from '$lib/components/Help.svelte';
+    import Help from '$lib/components/Help.svelte';
-	import { MountainSnow } from 'lucide-svelte';
+    import { MountainSnow } from 'lucide-svelte';
-	import { dbUtils } from '$lib/db';
+    import { dbUtils } from '$lib/db';
-	import { map } from '$lib/stores';
+    import { map } from '$lib/stores';
-	import { _, locale } from 'svelte-i18n';
+    import { _, locale } from 'svelte-i18n';
-	import { getURLForLanguage } from '$lib/utils';
+    import { getURLForLanguage } from '$lib/utils';
 
-	$: validSelection = $selection.size > 0;
+    $: validSelection = $selection.size > 0;
 </script>
 
 <div class="flex flex-col gap-3 w-full max-w-80 {$$props.class ?? ''}">
-	<Button
+    <Button
-		variant="outline"
+        variant="outline"
-		class="whitespace-normal h-fit"
+        class="whitespace-normal h-fit"
-		disabled={!validSelection}
+        disabled={!validSelection}
-		on:click={async () => {
+        on:click={async () => {
-			if ($map) {
+            if ($map) {
-				dbUtils.addElevationToSelection($map);
+                dbUtils.addElevationToSelection($map);
-			}
+            }
-		}}
+        }}
-	>
+    >
-		<MountainSnow size="16" class="mr-1 shrink-0" />
+        <MountainSnow size="16" class="mr-1 shrink-0" />
-		{$_('toolbar.elevation.button')}
+        {$_('toolbar.elevation.button')}
-	</Button>
+    </Button>
-	<Help link={getURLForLanguage($locale, '/help/toolbar/elevation')}>
+    <Help link={getURLForLanguage($locale, '/help/toolbar/elevation')}>
-		{#if validSelection}
+        {#if validSelection}
-			{$_('toolbar.elevation.help')}
+            {$_('toolbar.elevation.help')}
-		{:else}
+        {:else}
-			{$_('toolbar.elevation.help_no_selection')}
+            {$_('toolbar.elevation.help_no_selection')}
-		{/if}
+        {/if}
-	</Help>
+    </Help>
 </div>

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

@@ -1,53 +1,53 @@
 <script lang="ts">
-	import { Button } from '$lib/components/ui/button';
+    import { Button } from '$lib/components/ui/button';
-	import { Ungroup } from 'lucide-svelte';
+    import { Ungroup } from 'lucide-svelte';
-	import { selection } from '$lib/components/file-list/Selection';
+    import { selection } from '$lib/components/file-list/Selection';
-	import {
+    import {
-		ListFileItem,
+        ListFileItem,
-		ListTrackItem,
+        ListTrackItem,
-		ListTrackSegmentItem,
+        ListTrackSegmentItem,
-		ListWaypointItem,
+        ListWaypointItem,
-		ListWaypointsItem
+        ListWaypointsItem,
-	} from '$lib/components/file-list/FileList';
+    } from '$lib/components/file-list/FileList';
-	import Help from '$lib/components/Help.svelte';
+    import Help from '$lib/components/Help.svelte';
-	import { dbUtils, getFile } from '$lib/db';
+    import { dbUtils, getFile } from '$lib/db';
-	import { _, locale } from 'svelte-i18n';
+    import { _, locale } from 'svelte-i18n';
-	import { getURLForLanguage } from '$lib/utils';
+    import { getURLForLanguage } from '$lib/utils';
 
-	$: validSelection =
+    $: validSelection =
-		$selection.size > 0 &&
+        $selection.size > 0 &&
-		$selection.getSelected().every((item) => {
+        $selection.getSelected().every((item) => {
-			if (
+            if (
-				item instanceof ListWaypointsItem ||
+                item instanceof ListWaypointsItem ||
-				item instanceof ListWaypointItem ||
+                item instanceof ListWaypointItem ||
-				item instanceof ListTrackSegmentItem
+                item instanceof ListTrackSegmentItem
-			) {
+            ) {
-				return false;
+                return false;
-			}
+            }
-			let file = getFile(item.getFileId());
+            let file = getFile(item.getFileId());
-			if (file) {
+            if (file) {
-				if (item instanceof ListFileItem) {
+                if (item instanceof ListFileItem) {
-					return file.getSegments().length > 1;
+                    return file.getSegments().length > 1;
-				} else if (item instanceof ListTrackItem) {
+                } else if (item instanceof ListTrackItem) {
-					if (item.getTrackIndex() < file.trk.length) {
+                    if (item.getTrackIndex() < file.trk.length) {
-						return file.trk[item.getTrackIndex()].getSegments().length > 1;
+                        return file.trk[item.getTrackIndex()].getSegments().length > 1;
-					}
+                    }
-				}
+                }
-			}
+            }
-			return false;
+            return false;
-		});
+        });
 </script>
 
 <div class="flex flex-col gap-3 w-full max-w-80 {$$props.class ?? ''}">
-	<Button variant="outline" disabled={!validSelection} on:click={dbUtils.extractSelection}>
+    <Button variant="outline" disabled={!validSelection} on:click={dbUtils.extractSelection}>
-		<Ungroup size="16" class="mr-1" />
+        <Ungroup size="16" class="mr-1" />
-		{$_('toolbar.extract.button')}
+        {$_('toolbar.extract.button')}
-	</Button>
+    </Button>
-	<Help link={getURLForLanguage($locale, '/help/toolbar/extract')}>
+    <Help link={getURLForLanguage($locale, '/help/toolbar/extract')}>
-		{#if validSelection}
+        {#if validSelection}
-			{$_('toolbar.extract.help')}
+            {$_('toolbar.extract.help')}
-		{:else}
+        {:else}
-			{$_('toolbar.extract.help_invalid_selection')}
+            {$_('toolbar.extract.help_invalid_selection')}
-		{/if}
+        {/if}
-	</Help>
+    </Help>
 </div>

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

@@ -1,117 +1,117 @@
 <script lang="ts" context="module">
-	enum MergeType {
+    enum MergeType {
-		TRACES = 'traces',
+        TRACES = 'traces',
-		CONTENTS = 'contents'
+        CONTENTS = 'contents',
-	}
+    }
 </script>
 
 <script lang="ts">
-	import { ListFileItem, ListTrackItem } from '$lib/components/file-list/FileList';
+    import { ListFileItem, ListTrackItem } from '$lib/components/file-list/FileList';
-	import Help from '$lib/components/Help.svelte';
+    import Help from '$lib/components/Help.svelte';
-	import { selection } from '$lib/components/file-list/Selection';
+    import { selection } from '$lib/components/file-list/Selection';
-	import { Button } from '$lib/components/ui/button';
+    import { Button } from '$lib/components/ui/button';
-	import { Label } from '$lib/components/ui/label/index.js';
+    import { Label } from '$lib/components/ui/label/index.js';
-	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 { _, locale } from 'svelte-i18n';
+    import { _, locale } from 'svelte-i18n';
-	import { dbUtils, getFile } from '$lib/db';
+    import { dbUtils, getFile } from '$lib/db';
-	import { Group } from 'lucide-svelte';
+    import { Group } from 'lucide-svelte';
-	import { getURLForLanguage } from '$lib/utils';
+    import { getURLForLanguage } from '$lib/utils';
-	import Shortcut from '$lib/components/Shortcut.svelte';
+    import Shortcut from '$lib/components/Shortcut.svelte';
-	import { gpxStatistics } from '$lib/stores';
+    import { gpxStatistics } from '$lib/stores';
 
-	let canMergeTraces = false;
+    let canMergeTraces = false;
-	let canMergeContents = false;
+    let canMergeContents = false;
-	let removeGaps = false;
+    let removeGaps = false;
 
-	$: if ($selection.size > 1) {
+    $: if ($selection.size > 1) {
-		canMergeTraces = true;
+        canMergeTraces = true;
-	} else if ($selection.size === 1) {
+    } else if ($selection.size === 1) {
-		let selected = $selection.getSelected()[0];
+        let selected = $selection.getSelected()[0];
-		if (selected instanceof ListFileItem) {
+        if (selected instanceof ListFileItem) {
-			let file = getFile(selected.getFileId());
+            let file = getFile(selected.getFileId());
-			if (file) {
+            if (file) {
-				canMergeTraces = file.getSegments().length > 1;
+                canMergeTraces = file.getSegments().length > 1;
-			} else {
+            } else {
-				canMergeTraces = false;
+                canMergeTraces = false;
-			}
+            }
-		} else if (selected instanceof ListTrackItem) {
+        } else if (selected instanceof ListTrackItem) {
-			let trackIndex = selected.getTrackIndex();
+            let trackIndex = selected.getTrackIndex();
-			let file = getFile(selected.getFileId());
+            let file = getFile(selected.getFileId());
-			if (file && trackIndex < file.trk.length) {
+            if (file && trackIndex < file.trk.length) {
-				canMergeTraces = file.trk[trackIndex].getSegments().length > 1;
+                canMergeTraces = file.trk[trackIndex].getSegments().length > 1;
-			} else {
+            } else {
-				canMergeTraces = false;
+                canMergeTraces = false;
-			}
+            }
-		} else {
+        } else {
-			canMergeContents = false;
+            canMergeContents = false;
-		}
+        }
-	}
+    }
 
-	$: canMergeContents =
+    $: canMergeContents =
-		$selection.size > 1 &&
+        $selection.size > 1 &&
-		$selection
+        $selection
-			.getSelected()
+            .getSelected()
-			.some((item) => item instanceof ListFileItem || item instanceof ListTrackItem);
+            .some((item) => item instanceof ListFileItem || item instanceof ListTrackItem);
 
-	let mergeType = MergeType.TRACES;
+    let mergeType = MergeType.TRACES;
 </script>
 
 <div class="flex flex-col gap-3 w-full max-w-80 {$$props.class ?? ''}">
-	<RadioGroup.Root bind:value={mergeType}>
+    <RadioGroup.Root bind:value={mergeType}>
-		<Label class="flex flex-row items-center gap-1.5 leading-5">
+        <Label class="flex flex-row items-center gap-1.5 leading-5">
-			<RadioGroup.Item value={MergeType.TRACES} />
+            <RadioGroup.Item value={MergeType.TRACES} />
-			{$_('toolbar.merge.merge_traces')}
+            {$_('toolbar.merge.merge_traces')}
-		</Label>
+        </Label>
-		<Label class="flex flex-row items-center gap-1.5 leading-5">
+        <Label class="flex flex-row items-center gap-1.5 leading-5">
-			<RadioGroup.Item value={MergeType.CONTENTS} />
+            <RadioGroup.Item value={MergeType.CONTENTS} />
-			{$_('toolbar.merge.merge_contents')}
+            {$_('toolbar.merge.merge_contents')}
-		</Label>
+        </Label>
-	</RadioGroup.Root>
+    </RadioGroup.Root>
-	{#if mergeType === MergeType.TRACES && $gpxStatistics.global.time.total > 0}
+    {#if mergeType === MergeType.TRACES && $gpxStatistics.global.time.total > 0}
-		<div class="flex flex-row items-center gap-1.5">
+        <div class="flex flex-row items-center gap-1.5">
-			<Checkbox id="remove-gaps" bind:checked={removeGaps} />
+            <Checkbox id="remove-gaps" bind:checked={removeGaps} />
-			<Label for="remove-gaps">{$_('toolbar.merge.remove_gaps')}</Label>
+            <Label for="remove-gaps">{$_('toolbar.merge.remove_gaps')}</Label>
-		</div>
+        </div>
-	{/if}
+    {/if}
-	<Button
+    <Button
-		variant="outline"
+        variant="outline"
-		class="whitespace-normal h-fit"
+        class="whitespace-normal h-fit"
-		disabled={(mergeType === MergeType.TRACES && !canMergeTraces) ||
+        disabled={(mergeType === MergeType.TRACES && !canMergeTraces) ||
-			(mergeType === MergeType.CONTENTS && !canMergeContents)}
+            (mergeType === MergeType.CONTENTS && !canMergeContents)}
-		on:click={() => {
+        on:click={() => {
-			dbUtils.mergeSelection(
+            dbUtils.mergeSelection(
-				mergeType === MergeType.TRACES,
+                mergeType === MergeType.TRACES,
-				mergeType === MergeType.TRACES && $gpxStatistics.global.time.total > 0 && removeGaps
+                mergeType === MergeType.TRACES && $gpxStatistics.global.time.total > 0 && removeGaps
-			);
+            );
-		}}
+        }}
-	>
+    >
-		<Group size="16" class="mr-1 shrink-0" />
+        <Group size="16" class="mr-1 shrink-0" />
-		{$_('toolbar.merge.merge_selection')}
+        {$_('toolbar.merge.merge_selection')}
-	</Button>
+    </Button>
-	<Help link={getURLForLanguage($locale, '/help/toolbar/merge')}>
+    <Help link={getURLForLanguage($locale, '/help/toolbar/merge')}>
-		{#if mergeType === MergeType.TRACES && canMergeTraces}
+        {#if mergeType === MergeType.TRACES && canMergeTraces}
-			{$_('toolbar.merge.help_merge_traces')}
+            {$_('toolbar.merge.help_merge_traces')}
-		{:else if mergeType === MergeType.TRACES && !canMergeTraces}
+        {:else if mergeType === MergeType.TRACES && !canMergeTraces}
-			{$_('toolbar.merge.help_cannot_merge_traces')}
+            {$_('toolbar.merge.help_cannot_merge_traces')}
-			{$_('toolbar.merge.selection_tip').split('{KEYBOARD_SHORTCUT}')[0]}
+            {$_('toolbar.merge.selection_tip').split('{KEYBOARD_SHORTCUT}')[0]}
-			<Shortcut
+            <Shortcut
-				ctrl={true}
+                ctrl={true}
-				click={true}
+                click={true}
-				class="inline-flex text-muted-foreground text-xs border rounded p-0.5 gap-0"
+                class="inline-flex text-muted-foreground text-xs border rounded p-0.5 gap-0"
-			/>
+            />
-			{$_('toolbar.merge.selection_tip').split('{KEYBOARD_SHORTCUT}')[1]}
+            {$_('toolbar.merge.selection_tip').split('{KEYBOARD_SHORTCUT}')[1]}
-		{:else if mergeType === MergeType.CONTENTS && canMergeContents}
+        {:else if mergeType === MergeType.CONTENTS && canMergeContents}
-			{$_('toolbar.merge.help_merge_contents')}
+            {$_('toolbar.merge.help_merge_contents')}
-		{:else if mergeType === MergeType.CONTENTS && !canMergeContents}
+        {:else if mergeType === MergeType.CONTENTS && !canMergeContents}
-			{$_('toolbar.merge.help_cannot_merge_contents')}
+            {$_('toolbar.merge.help_cannot_merge_contents')}
-			{$_('toolbar.merge.selection_tip').split('{KEYBOARD_SHORTCUT}')[0]}
+            {$_('toolbar.merge.selection_tip').split('{KEYBOARD_SHORTCUT}')[0]}
-			<Shortcut
+            <Shortcut
-				ctrl={true}
+                ctrl={true}
-				click={true}
+                click={true}
-				class="inline-flex text-muted-foreground text-xs border rounded p-0.5 gap-0"
+                class="inline-flex text-muted-foreground text-xs border rounded p-0.5 gap-0"
-			/>
+            />
-			{$_('toolbar.merge.selection_tip').split('{KEYBOARD_SHORTCUT}')[1]}
+            {$_('toolbar.merge.selection_tip').split('{KEYBOARD_SHORTCUT}')[1]}
-		{/if}
+        {/if}
-	</Help>
+    </Help>
 </div>