minor fixes

* 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)

.prettierignore

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

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

README.md

@@ -26,6 +26,7 @@ Any help is greatly appreciated!
 ## Development
 
 The code is split into two parts:
+
 -   `gpx`: a Typescript library for parsing and manipulating GPX files,
 -   `website`: the website itself, which is a [SvelteKit](https://kit.svelte.dev/) application.
 
@@ -57,10 +58,9 @@ This project has been made possible thanks to the following open source projects
 -   Development:
     -   [Svelte](https://github.com/sveltejs/svelte) and [SvelteKit](https://github.com/sveltejs/kit) — seamless development experience
     -   [MDsveX](https://github.com/pngwn/MDsveX) — allowing a Markdown-based documentation
-  - [svelte-i18n](https://github.com/kaisermann/svelte-i18n) — easy localization
 -   Design:
     -   [shadcn-svelte](https://github.com/huntabyte/shadcn-svelte) — beautiful components
-  - [lucide-svelte](https://github.com/lucide-icons/lucide/tree/main/packages/lucide-svelte) — beautiful icons
+    -   [@lucide/svelte](https://github.com/lucide-icons/lucide/tree/main/packages/svelte) — beautiful icons
     -   [tailwindcss](https://github.com/tailwindlabs/tailwindcss) — easy styling
     -   [Chart.js](https://github.com/chartjs/Chart.js) — beautiful and fast charts
 -   Logic:

gpx/package.json

@@ -12,16 +12,20 @@
     "private": true,
     "dependencies": {
         "fast-xml-parser": "^4.5.0",
-        "immer": "^10.1.1",
-        "ts-node": "^10.9.2"
+        "immer": "^10.1.1"
     },
     "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 { GPXFileType } from "./types";
-import { GPXFile } from "./gpx";
+import { XMLParser, XMLBuilder } from 'fast-xml-parser';
+import { GPXFileType } from './types';
+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') {
-                // Transform the simple <power> tag to the more complex <gpxpx:PowerExtension> tag, the nested <gpxpx:PowerInWatts> tag is then handled by the tagValueProcessor
-                return 'gpxpx:PowerExtension';
+            if (attributesWithNamespace[tagName]) {
+                return attributesWithNamespace[tagName];
             }
             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') {
-                    return parseFloat(tagValue);
+                if (
+                    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",
-                encoding: "UTF-8",
-            }
+                version: '1.0',
+                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]);

gpx/src/simplify.ts

@@ -1,33 +1,48 @@
-import { TrackPoint } from "./gpx";
-import { Coordinates } from "./types";
+import { TrackPoint } from './gpx';
+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 [{
-            point: points[0]
-        }];
+        return [
+            {
+                point: points[0],
+            },
+        ];
     }
 
-    let simplified = [{
-        point: points[0]
-    }];
+    let simplified = [
+        {
+            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,8 +60,16 @@ function ramerDouglasPeuckerRecursive(points: TrackPoint[], epsilon: number, mea
     }
 }
 
-export function crossarcDistance(point1: TrackPoint, point2: TrackPoint, point3: TrackPoint | Coordinates): number {
-    return crossarc(point1.getCoordinates(), point2.getCoordinates(), point3 instanceof TrackPoint ? point3.getCoordinates() : point3);
+export function crossarcDistance(
+    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 {
@@ -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),
-        Math.cos(latA) * Math.sin(latB) - Math.sin(latA) * Math.cos(latB) * Math.cos(lonB - lonA));
+    return Math.atan2(
+        Math.sin(lonB - lonA) * Math.cos(latB),
+        Math.cos(latA) * Math.sin(latB) - Math.sin(latA) * Math.cos(latB) * Math.cos(lonB - lonA)
+    );
 }
 
-export function projectedPoint(point1: TrackPoint, point2: TrackPoint, point3: TrackPoint | Coordinates): Coordinates {
-    return projected(point1.getCoordinates(), point2.getCoordinates(), point3 instanceof TrackPoint ? point3.getCoordinates() : point3);
+export function projectedPoint(
+    point1: TrackPoint,
+    point2: TrackPoint,
+    point3: TrackPoint | Coordinates
+): Coordinates {
+    return projected(
+        point1.getCoordinates(),
+        point2.getCoordinates(),
+        point3 instanceof TrackPoint ? point3.getCoordinates() : point3
+    );
 }
 
 function projected(coord1: Coordinates, coord2: Coordinates, coord3: Coordinates): Coordinates {
@@ -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,14 +179,22 @@ 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 lon4 = lon1 + Math.atan2(Math.sin(bear12) * Math.sin(f) * Math.cos(lat1), Math.cos(f) - Math.sin(lat1) * Math.sin(lat4));
+        const lat4 = Math.asin(
+            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;
-    opacity?: number;
-    weight?: number;
+    'gpx_style:color'?: string;
+    'gpx_style:opacity'?: 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>
-                <opacity>0.5</opacity>
-                <weight>6</weight>
+                <gpx_style:color>2d3ee9</gpx_style:color>
+                <gpx_style:opacity>0.5</gpx_style:opacity>
+                <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": [
-        "src"
-    ],
+    "include": ["src"]
 }

package-lock.json

@@ -0,0 +1,6 @@
+{
+  "name": "gpx.studio",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {}
+}

website/.eslintrc.cjs

@@ -5,27 +5,27 @@ module.exports = {
         'eslint:recommended',
         'plugin:@typescript-eslint/recommended',
         'plugin:svelte/recommended',
-		'prettier'
+        'prettier',
     ],
     parser: '@typescript-eslint/parser',
     plugins: ['@typescript-eslint'],
     parserOptions: {
         sourceType: 'module',
         ecmaVersion: 2020,
-		extraFileExtensions: ['.svelte']
+        extraFileExtensions: ['.svelte'],
     },
     env: {
         browser: true,
         es2017: true,
-		node: true
+        node: true,
     },
     overrides: [
         {
             files: ['*.svelte'],
             parser: 'svelte-eslint-parser',
             parserOptions: {
-				parser: '@typescript-eslint/parser'
-			}
-		}
-	]
+                parser: '@typescript-eslint/parser',
+            },
+        },
+    ],
 };

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

@@ -2,13 +2,16 @@
 	"$schema": "https://shadcn-svelte.com/schema.json",
 	"style": "default",
 	"tailwind": {
-		"config": "tailwind.config.js",
 		"css": "src/app.css",
 		"baseColor": "slate"
 	},
 	"aliases": {
 		"components": "$lib/components",
-		"utils": "$lib/utils"
+		"utils": "$lib/utils",
+		"ui": "$lib/components/ui",
+		"hooks": "$lib/hooks",
+		"lib": "$lib"
 	},
-	"typescript": true
+	"typescript": true,
+	"registry": "https://shadcn-svelte.com/registry"
 }

website/package.json

@@ -5,7 +5,8 @@
     "scripts": {
         "dev": "vite dev",
         "build": "vite build",
-        "postbuild": "npx tsx src/lib/sitemap.ts",
+        "prebuild": "npx tsx src/lib/scripts/pwa-manifest.ts",
+        "postbuild": "npx tsx src/lib/scripts/sitemap.ts",
         "preview": "vite preview",
         "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
         "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
@@ -13,67 +14,70 @@
         "format": "prettier --write ."
     },
     "devDependencies": {
-        "@sveltejs/adapter-auto": "^3.2.5",
-        "@sveltejs/adapter-static": "^3.0.5",
-        "@sveltejs/enhanced-img": "^0.3.8",
-        "@sveltejs/kit": "^2.6.1",
-        "@sveltejs/vite-plugin-svelte": "^3.1.2",
-        "@types/eslint": "^8.56.12",
+        "@lucide/svelte": "^0.544.0",
+        "@sveltejs/adapter-static": "^3.0.8",
+        "@sveltejs/enhanced-img": "^0.6.0",
+        "@sveltejs/kit": "^2.21.2",
+        "@sveltejs/vite-plugin-svelte": "^5.1.0",
+        "@tailwindcss/vite": "^4.1.8",
+        "@types/eslint": "^9.6.1",
         "@types/events": "^3.0.3",
-        "@types/mapbox__mapbox-gl-geocoder": "^5.0.0",
+        "@types/file-saver": "^2.0.7",
         "@types/mapbox__tilebelt": "^1.0.4",
-        "@types/mapbox-gl": "^3.4.0",
-        "@types/node": "^20.16.10",
+        "@types/mapbox-gl": "^3.4.1",
+        "@types/node": "^22.15.30",
         "@types/png.js": "^0.2.3",
-        "@types/sanitize-html": "^2.13.0",
+        "@types/sanitize-html": "^2.16.0",
         "@types/sortablejs": "^1.15.8",
-        "@typescript-eslint/eslint-plugin": "^7.18.0",
-        "@typescript-eslint/parser": "^7.18.0",
-        "autoprefixer": "^10.4.20",
-        "eslint": "^8.57.1",
-        "eslint-config-prettier": "^9.1.0",
-        "eslint-plugin-svelte": "^2.44.1",
+        "@typescript-eslint/eslint-plugin": "^8.33.1",
+        "@typescript-eslint/parser": "^8.33.1",
+        "bits-ui": "^2.12.0",
+        "eslint": "^9.28.0",
+        "eslint-config-prettier": "^10.1.5",
+        "eslint-plugin-svelte": "^3.9.1",
         "events": "^3.3.0",
-        "glob": "^10.4.5",
-        "mdsvex": "^0.11.2",
+        "glob": "^11.0.2",
+        "lucide-static": "^0.513.0",
+        "mdsvex": "^0.12.6",
+        "mode-watcher": "^1.1.0",
+        "paneforge": "^1.0.0-next.5",
         "postcss": "^8.4.47",
-        "prettier": "^3.3.3",
-        "prettier-plugin-svelte": "^3.2.7",
-        "svelte": "^4.2.19",
-        "svelte-check": "^3.8.6",
-        "tailwindcss": "^3.4.13",
-        "tslib": "^2.7.0",
+        "prettier": "^3.5.3",
+        "prettier-plugin-svelte": "^3.4.0",
+        "svelte": "^5.33.18",
+        "svelte-check": "^4.0.0",
+        "svelte-sonner": "^1.0.5",
+        "tailwind-variants": "^3.1.1",
+        "tailwindcss": "^4.1.8",
+        "tslib": "^2.8.1",
         "tsx": "^4.19.1",
-        "typescript": "^5.6.2",
-        "vite": "^5.4.8",
-        "vite-plugin-node-polyfills": "^0.22.0"
+        "tw-animate-css": "^1.3.4",
+        "typescript": "^5.8.3",
+        "vaul-svelte": "^1.0.0-next.7",
+        "vite": "^6.3.5",
+        "vite-plugin-node-polyfills": "^0.23.0"
     },
     "type": "module",
     "dependencies": {
-        "@docsearch/js": "^3.6.2",
-        "@internationalized/date": "^3.5.5",
+        "@docsearch/js": "^3.9.0",
+        "@internationalized/date": "^3.8.2",
         "@mapbox/mapbox-gl-geocoder": "^5.0.3",
-        "@mapbox/sphericalmercator": "^1.2.0",
-        "@mapbox/tilebelt": "^1.0.2",
+        "@mapbox/sphericalmercator": "^2.0.1",
+        "@mapbox/tilebelt": "^2.0.2",
         "@types/mapbox__sphericalmercator": "^1.2.3",
-        "bits-ui": "^0.21.15",
-        "chart.js": "^4.4.4",
-        "chartjs-plugin-zoom": "^2.0.1",
+        "chart.js": "^4.4.9",
+        "chartjs-plugin-zoom": "^2.2.0",
         "clsx": "^2.1.1",
-        "dexie": "^4.0.8",
+        "dexie": "^4.0.11",
+        "file-saver": "^2.0.5",
         "gpx": "file:../gpx",
         "immer": "^10.1.1",
-        "lucide-static": "^0.427.0",
-        "lucide-svelte": "^0.427.0",
-        "mapbox-gl": "^3.7.0",
+        "jszip": "^3.10.1",
+        "mapbox-gl": "^3.12.0",
         "mapillary-js": "^4.1.2",
-        "mode-watcher": "^0.3.1",
         "png.js": "^0.2.1",
-        "sanitize-html": "^2.13.0",
-        "sortablejs": "^1.15.3",
-        "svelte-i18n": "^4.0.0",
-        "svelte-sonner": "^0.3.28",
-        "tailwind-merge": "^2.5.2",
-        "tailwind-variants": "^0.2.1"
+        "sanitize-html": "^2.17.0",
+        "sortablejs": "^1.15.6",
+        "tailwind-merge": "^3.3.0"
     }
 }

website/postcss.config.js

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

website/src/app.css

@@ -0,0 +1,124 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+ 
+@custom-variant dark (&:is(.dark *));
+ 
+:root {
+ --background: hsl(0 0% 100%) /* <- Wrap in HSL */;
+ --foreground: hsl(240 10% 3.9%);
+ --muted: hsl(240 4.8% 95.9%);
+ --muted-foreground: hsl(240 3.8% 46.1%);
+ --popover: hsl(0 0% 100%);
+ --popover-foreground: hsl(240 10% 3.9%);
+ --card: hsl(0 0% 100%);
+ --card-foreground: hsl(240 10% 3.9%);
+ --border: hsl(240 5.9% 90%);
+ --input: hsl(240 5.9% 90%);
+ --primary: hsl(240 5.9% 10%);
+ --primary-foreground: hsl(0 0% 98%);
+ --secondary: hsl(240 4.8% 95.9%);
+ --secondary-foreground: hsl(240 5.9% 10%);
+ --accent: hsl(240 4.8% 95.9%);
+ --accent-foreground: hsl(240 5.9% 10%);
+ --destructive: hsl(0 72.2% 50.6%);
+ --destructive-foreground: hsl(0 0% 98%);
+ --ring: hsl(240 10% 3.9%);
+ --sidebar: hsl(0 0% 98%);
+ --sidebar-foreground: hsl(240 5.3% 26.1%);
+ --sidebar-primary: hsl(240 5.9% 10%);
+ --sidebar-primary-foreground: hsl(0 0% 98%);
+ --sidebar-accent: hsl(240 4.8% 95.9%);
+ --sidebar-accent-foreground: hsl(240 5.9% 10%);
+ --sidebar-border: hsl(220 13% 91%);
+ --sidebar-ring: hsl(217.2 91.2% 59.8%);
+
+ --support: rgb(220 15 130);
+ --link: rgb(0 110 180);
+ 
+ --radius: 0.5rem;
+}
+ 
+.dark {
+ --background: hsl(240 10% 3.9%);
+ --foreground: hsl(0 0% 98%);
+ --muted: hsl(240 3.7% 15.9%);
+ --muted-foreground: hsl(240 5% 64.9%);
+ --popover: hsl(240 10% 3.9%);
+ --popover-foreground: hsl(0 0% 98%);
+ --card: hsl(240 10% 3.9%);
+ --card-foreground: hsl(0 0% 98%);
+ --border: hsl(240 3.7% 15.9%);
+ --input: hsl(240 3.7% 15.9%);
+ --primary: hsl(0 0% 98%);
+ --primary-foreground: hsl(240 5.9% 10%);
+ --secondary: hsl(240 3.7% 15.9%);
+ --secondary-foreground: hsl(0 0% 98%);
+ --accent: hsl(240 3.7% 15.9%);
+ --accent-foreground: hsl(0 0% 98%);
+ --destructive: hsl(0 62.8% 30.6%);
+ --destructive-foreground: hsl(0 0% 98%);
+ --ring: hsl(240 4.9% 83.9%);
+ --sidebar: hsl(240 5.9% 10%);
+ --sidebar-foreground: hsl(240 4.8% 95.9%);
+ --sidebar-primary: hsl(224.3 76.3% 48%);
+ --sidebar-primary-foreground: hsl(0 0% 100%);
+ --sidebar-accent: hsl(240 3.7% 15.9%);
+ --sidebar-accent-foreground: hsl(240 4.8% 95.9%);
+ --sidebar-border: hsl(240 3.7% 15.9%);
+ --sidebar-ring: hsl(217.2 91.2% 59.8%);
+
+ --support: rgb(255 110 190);
+ --link: rgb(80 190 255);
+}
+ 
+@theme inline {
+ /* Radius (for rounded-*) */
+ --radius-sm: calc(var(--radius) - 4px);
+ --radius-md: calc(var(--radius) - 2px);
+ --radius-lg: var(--radius);
+ --radius-xl: calc(var(--radius) + 4px);
+ 
+ /* Colors */
+ --color-background: var(--background);
+ --color-foreground: var(--foreground);
+ --color-muted: var(--muted);
+ --color-muted-foreground: var(--muted-foreground);
+ --color-popover: var(--popover);
+ --color-popover-foreground: var(--popover-foreground);
+ --color-card: var(--card);
+ --color-card-foreground: var(--card-foreground);
+ --color-border: var(--border);
+ --color-input: var(--input);
+ --color-primary: var(--primary);
+ --color-primary-foreground: var(--primary-foreground);
+ --color-secondary: var(--secondary);
+ --color-secondary-foreground: var(--secondary-foreground);
+ --color-accent: var(--accent);
+ --color-accent-foreground: var(--accent-foreground);
+ --color-destructive: var(--destructive);
+ --color-destructive-foreground: var(--destructive-foreground);
+ --color-ring: var(--ring);
+ --color-radius: var(--radius);
+ --color-sidebar: var(--sidebar);
+ --color-sidebar-foreground: var(--sidebar-foreground);
+ --color-sidebar-primary: var(--sidebar-primary);
+ --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+ --color-sidebar-accent: var(--sidebar-accent);
+ --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+ --color-sidebar-border: var(--sidebar-border);
+ --color-sidebar-ring: var(--sidebar-ring);
+ --color-support: var(--support);
+ --color-link: var(--link);
+
+ --breakpoint-xs: 540px;
+}
+ 
+@layer base {
+ * {
+  @apply border-border;
+ }
+ 
+ body {
+  @apply bg-background text-foreground;
+ }
+}

website/src/app.html

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

website/src/app.pcss

@@ -1,86 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
- 
-@layer base {
-  :root {
-    --background: 0 0% 100%;
-    --foreground: 222.2 84% 4.9%;
- 
-    --muted: 210 40% 96.1%;
-    --muted-foreground: 215.4 16.3% 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;
-
-    --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;
-  }
-  body {
-    @apply bg-background text-foreground;
-  }
-}

website/src/hooks.server.js

@@ -38,15 +38,19 @@ 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" />`;
 
+    if (page !== '404') {
         for (let lang of Object.keys(languages)) {
             headTag += `   <link rel="alternate" hreflang="${lang}" href="https://gpx.studio${getURLForLanguage(lang, path)}" />
 `;
         }
+    }
 
     const response = await resolve(event, {
-        transformPageChunk: ({ html }) => html.replace('<html>', htmlTag).replace('<head>', headTag),
+        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",
-    "paved": "#8c8c8c",
-    "unpaved": "#6b443a",
-    "asphalt": "#8c8c8c",
-    "concrete": "#8c8c8c",
-    "cobblestone": "#ffd991",
-    "paving_stones": "#8c8c8c",
-    "sett": "#ffd991",
-    "metal": "#8c8c8c",
-    "wood": "#6b443a",
-    "compacted": "#ffffa8",
-    "fine_gravel": "#ffffa8",
-    "gravel": "#ffffa8",
-    "pebblestone": "#ffffa8",
-    "rock": "#ffd991",
-    "dirt": "#ffffa8",
-    "ground": "#6b443a",
-    "earth": "#6b443a",
-    "mud": "#6b443a",
-    "sand": "#ffffc4",
-    "grass": "#61b55c",
-    "grass_paver": "#61b55c",
-    "clay": "#6b443a",
-    "stone": "#ffd991",
+    missing: '#d1d1d1',
+    paved: '#8c8c8c',
+    unpaved: '#6b443a',
+    asphalt: '#8c8c8c',
+    concrete: '#8c8c8c',
+    cobblestone: '#ffd991',
+    paving_stones: '#8c8c8c',
+    sett: '#ffd991',
+    metal: '#8c8c8c',
+    wood: '#6b443a',
+    compacted: '#ffffa8',
+    fine_gravel: '#ffffa8',
+    gravel: '#ffffa8',
+    pebblestone: '#ffffa8',
+    rock: '#ffd991',
+    dirt: '#ffffa8',
+    ground: '#6b443a',
+    earth: '#6b443a',
+    mud: '#6b443a',
+    sand: '#ffffc4',
+    grass: '#61b55c',
+    grass_paver: '#61b55c',
+    clay: '#6b443a',
+    stone: '#ffd991',
 };
 
 export function getSurfaceColor(surface: string): string {
@@ -30,66 +30,72 @@ export function getSurfaceColor(surface: string): string {
 }
 
 export const highwayColors: { [key: string]: string } = {
-    "missing": "#d1d1d1",
-    "motorway": "#ff4d33",
-    "motorway_link": "#ff4d33",
-    "trunk": "#ff5e4d",
-    "trunk_link": "#ff947f",
-    "primary": "#ff6e5c",
-    "primary_link": "#ff6e5c",
-    "secondary": "#ff8d7b",
-    "secondary_link": "#ff8d7b",
-    "tertiary": "#ffd75f",
-    "tertiary_link": "#ffd75f",
-    "unclassified": "#f1f2a5",
-    "road": "#f1f2a5",
-    "residential": "#73b2ff",
-    "living_street": "#73b2ff",
-    "service": "#9c9cd9",
-    "track": "#a8e381",
-    "footway": "#a8e381",
-    "path": "#a8e381",
-    "pedestrian": "#a8e381",
-    "cycleway": "#9de2ff",
-    "construction": "#e09a4a",
-    "bridleway": "#946f43",
-    "raceway": "#ff0000",
-    "rest_area": "#9c9cd9",
-    "services": "#9c9cd9",
-    "corridor": "#474747",
-    "elevator": "#474747",
-    "steps": "#474747",
-    "bus_stop": "#8545a3",
-    "busway": "#8545a3",
-    "via_ferrata": "#474747"
+    missing: '#d1d1d1',
+    motorway: '#ff4d33',
+    motorway_link: '#ff4d33',
+    trunk: '#ff5e4d',
+    trunk_link: '#ff947f',
+    primary: '#ff6e5c',
+    primary_link: '#ff6e5c',
+    secondary: '#ff8d7b',
+    secondary_link: '#ff8d7b',
+    tertiary: '#ffd75f',
+    tertiary_link: '#ffd75f',
+    unclassified: '#f1f2a5',
+    road: '#f1f2a5',
+    residential: '#73b2ff',
+    living_street: '#73b2ff',
+    service: '#9c9cd9',
+    track: '#a8e381',
+    footway: '#a8e381',
+    path: '#a8e381',
+    pedestrian: '#a8e381',
+    cycleway: '#9de2ff',
+    construction: '#e09a4a',
+    bridleway: '#946f43',
+    raceway: '#ff0000',
+    rest_area: '#9c9cd9',
+    services: '#9c9cd9',
+    corridor: '#474747',
+    elevator: '#474747',
+    steps: '#474747',
+    bus_stop: '#8545a3',
+    busway: '#8545a3',
+    via_ferrata: '#474747',
 };
 
 export const sacScaleColors: { [key: string]: string } = {
-    "hiking": "#007700",
-    "mountain_hiking": "#1843ad",
-    "demanding_mountain_hiking": "#ffff00",
-    "alpine_hiking": "#ff9233",
-    "demanding_alpine_hiking": "#ff0000",
-    "difficult_alpine_hiking": "#000000",
+    hiking: '#007700',
+    mountain_hiking: '#1843ad',
+    demanding_mountain_hiking: '#ffff00',
+    alpine_hiking: '#ff9233',
+    demanding_alpine_hiking: '#ff0000',
+    difficult_alpine_hiking: '#000000',
 };
 
 export const mtbScaleColors: { [key: string]: string } = {
-    "0-": "#007700",
-    "0": "#007700",
-    "0+": "#007700",
-    "1-": "#1843ad",
-    "1": "#1843ad",
-    "1+": "#1843ad",
-    "2-": "#ffff00",
-    "2": "#ffff00",
-    "2+": "#ffff00",
-    "3": "#ff0000",
-    "4": "#00ff00",
-    "5": "#000000",
-    "6": "#b105eb",
+    '0-': '#007700',
+    '0': '#007700',
+    '0+': '#007700',
+    '1-': '#1843ad',
+    '1': '#1843ad',
+    '1+': '#1843ad',
+    '2-': '#ffff00',
+    '2': '#ffff00',
+    '2+': '#ffff00',
+    '3': '#ff0000',
+    '4': '#00ff00',
+    '5': '#000000',
+    '6': '#b105eb',
 };
 
-function createPattern(backgroundColor: string, sacScaleColor: string | undefined, mtbScaleColor: string | undefined, size: number = 16, lineWidth: number = 4) {
+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;
@@ -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);
         }

website/src/lib/assets/symbols.ts

@@ -1,10 +1,72 @@
-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 { 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";
-import type { ComponentType } from "svelte";
+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,
+    Toilet,
+    type IconProps,
+} from '@lucide/svelte';
+import {
+    Landmark as LandmarkSvg,
+    Shell as ShellSvg,
+    Bike as BikeSvg,
+    Building as BuildingSvg,
+    Tent as TentSvg,
+    Car as CarSvg,
+    Wrench as WrenchSvg,
+    ShoppingBasket as ShoppingBasketSvg,
+    Droplet as DropletSvg,
+    DoorOpen as DoorOpenSvg,
+    Trees as TreesSvg,
+    Fuel as FuelSvg,
+    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 { Component } from 'svelte';
 
 export type Symbol = {
     value: string;
-    icon?: ComponentType<Icon>;
+    icon?: Component<IconProps>;
     iconSvg?: string;
 };
 
@@ -20,16 +82,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 +113,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 +129,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

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

website/src/lib/components/ButtonWithTooltip.svelte

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

website/src/lib/components/ElevationProfile.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
     import ButtonWithTooltip from '$lib/components/ButtonWithTooltip.svelte';
-	import * as Popover from '$lib/components/ui/popover';
-	import * as ToggleGroup from '$lib/components/ui/toggle-group';
+    import * as Popover from '$lib/components/ui/popover/index.js';
+    import * as ToggleGroup from '$lib/components/ui/toggle-group/index.js';
+    import Separator from '$lib/components/ui/separator/separator.svelte';
     import Chart from 'chart.js/auto';
     import mapboxgl from 'mapbox-gl';
-	import { map } from '$lib/stores';
     import { onDestroy, onMount } from 'svelte';
     import {
         BrickWall,
@@ -17,10 +17,9 @@
         Circle,
         Check,
         ChartNoAxesColumn,
-		Construction
-	} from 'lucide-svelte';
+        Construction,
+    } from '@lucide/svelte';
     import { getSlopeColor, getSurfaceColor, getHighwayColor } from '$lib/assets/colors';
-	import { _ } from 'svelte-i18n';
     import {
         getCadenceWithUnits,
         getConvertedDistance,
@@ -33,22 +32,31 @@
         getHeartRateWithUnits,
         getPowerWithUnits,
         getTemperatureWithUnits,
-		getVelocityWithUnits
+        getVelocityWithUnits,
     } from '$lib/units';
-	import type { Writable } from 'svelte/store';
+    import type { Readable, Writable } from 'svelte/store';
     import type { GPXStatistics } from 'gpx';
-	import { settings } from '$lib/db';
     import { mode } from 'mode-watcher';
-	import { df } from '$lib/utils';
-
-	export let gpxStatistics: Writable<GPXStatistics>;
-	export let slicedGPXStatistics: Writable<[GPXStatistics, number, number] | undefined>;
-	export let additionalDatasets: string[];
-	export let elevationFill: 'slope' | 'surface' | 'highway' | undefined;
-	export let showControls: boolean = true;
+    import { settings } from '$lib/logic/settings';
+    import { map } from '$lib/components/map/map';
+    import { i18n } from '$lib/i18n.svelte';
 
     const { distanceUnits, velocityUnits, temperatureUnits } = settings;
 
+    let {
+        gpxStatistics,
+        slicedGPXStatistics,
+        additionalDatasets = $bindable(),
+        elevationFill = $bindable(),
+        showControls = true,
+    }: {
+        gpxStatistics: Readable<GPXStatistics>;
+        slicedGPXStatistics: Writable<[GPXStatistics, number, number] | undefined>;
+        additionalDatasets: string[];
+        elevationFill: 'slope' | 'surface' | 'highway' | undefined;
+        showControls?: boolean;
+    } = $props();
+
     let canvas: HTMLCanvasElement;
     let overlay: HTMLCanvasElement;
     let chart: Chart;
@@ -72,37 +80,37 @@
                         return `${value.toFixed(1).replace(/\.0+$/, '')} ${getDistanceUnits()}`;
                     },
                     align: 'inner',
-					maxRotation: 0
-				}
+                    maxRotation: 0,
+                },
             },
             y: {
                 type: 'linear',
                 ticks: {
                     callback: function (value: number) {
                         return getElevationWithUnits(value, false);
-					}
-				}
-			}
+                    },
+                },
+            },
         },
         datasets: {
             line: {
                 pointRadius: 0,
                 tension: 0.4,
                 borderWidth: 2,
-				cubicInterpolationMode: 'monotone'
-			}
+                cubicInterpolationMode: 'monotone',
+            },
         },
         interaction: {
             mode: 'nearest',
             axis: 'x',
-			intersect: false
+            intersect: false,
         },
         plugins: {
             legend: {
-				display: false
+                display: false,
             },
             decimation: {
-				enabled: true
+                enabled: true,
             },
             tooltip: {
                 enabled: () => !dragging && !panning,
@@ -121,17 +129,17 @@
                                     marker.addTo($map);
                                 }
                             }
-							return `${$_('quantities.elevation')}: ${getElevationWithUnits(point.y, false)}`;
+                            return `${i18n._('quantities.elevation')}: ${getElevationWithUnits(point.y, false)}`;
                         } else if (context.datasetIndex === 1) {
-							return `${$velocityUnits === 'speed' ? $_('quantities.speed') : $_('quantities.pace')}: ${getVelocityWithUnits(point.y, false)}`;
+                            return `${$velocityUnits === 'speed' ? i18n._('quantities.speed') : i18n._('quantities.pace')}: ${getVelocityWithUnits(point.y, false)}`;
                         } else if (context.datasetIndex === 2) {
-							return `${$_('quantities.heartrate')}: ${getHeartRateWithUnits(point.y)}`;
+                            return `${i18n._('quantities.heartrate')}: ${getHeartRateWithUnits(point.y)}`;
                         } else if (context.datasetIndex === 3) {
-							return `${$_('quantities.cadence')}: ${getCadenceWithUnits(point.y)}`;
+                            return `${i18n._('quantities.cadence')}: ${getCadenceWithUnits(point.y)}`;
                         } else if (context.datasetIndex === 4) {
-							return `${$_('quantities.temperature')}: ${getTemperatureWithUnits(point.y, false)}`;
+                            return `${i18n._('quantities.temperature')}: ${getTemperatureWithUnits(point.y, false)}`;
                         } else if (context.datasetIndex === 5) {
-							return `${$_('quantities.power')}: ${getPowerWithUnits(point.y)}`;
+                            return `${i18n._('quantities.power')}: ${getPowerWithUnits(point.y)}`;
                         }
                     },
                     afterBody: function (contexts: Chart.TooltipContext[]) {
@@ -141,42 +149,52 @@
                         let slope = {
                             at: point.slope.at.toFixed(1),
                             segment: point.slope.segment.toFixed(1),
-							length: getDistanceWithUnits(point.slope.length)
+                            length: getDistanceWithUnits(point.slope.length),
                         };
-						let surface = point.extensions.surface ? point.extensions.surface : 'unknown';
-						let highway = point.extensions.highway ? point.extensions.highway : 'unknown';
+                        let surface = point.extensions.surface
+                            ? point.extensions.surface
+                            : 'unknown';
+                        let highway = point.extensions.highway
+                            ? point.extensions.highway
+                            : 'unknown';
                         let sacScale = point.extensions.sac_scale;
                         let mtbScale = point.extensions.mtb_scale;
 
                         let labels = [
-							`    ${$_('quantities.distance')}: ${getDistanceWithUnits(point.x, false)}`,
-							`    ${$_('quantities.slope')}: ${slope.at} %${elevationFill === 'slope' ? ` (${slope.length} @${slope.segment} %)` : ''}`
+                            `    ${i18n._('quantities.distance')}: ${getDistanceWithUnits(point.x, false)}`,
+                            `    ${i18n._('quantities.slope')}: ${slope.at} %${elevationFill === 'slope' ? ` (${slope.length} @${slope.segment} %)` : ''}`,
                         ];
 
                         if (elevationFill === 'surface') {
                             labels.push(
-								`    ${$_('quantities.surface')}: ${$_(`toolbar.routing.surface.${surface}`)}`
+                                `    ${i18n._('quantities.surface')}: ${i18n._(`toolbar.routing.surface.${surface}`)}`
                             );
                         }
 
                         if (elevationFill === 'highway') {
                             labels.push(
-								`    ${$_('quantities.highway')}: ${$_(`toolbar.routing.highway.${highway}`)}${
-									sacScale ? ` (${$_(`toolbar.routing.sac_scale.${sacScale}`)})` : ''
+                                `    ${i18n._('quantities.highway')}: ${i18n._(`toolbar.routing.highway.${highway}`)}${
+                                    sacScale
+                                        ? ` (${i18n._(`toolbar.routing.sac_scale.${sacScale}`)})`
+                                        : ''
                                 }`
                             );
                             if (mtbScale) {
-								labels.push(`    ${$_('toolbar.routing.mtb_scale')}: ${mtbScale}`);
+                                labels.push(
+                                    `    ${i18n._('toolbar.routing.mtb_scale')}: ${mtbScale}`
+                                );
                             }
                         }
 
                         if (point.time) {
-							labels.push(`    ${$_('quantities.time')}: ${df.format(point.time)}`);
+                            labels.push(
+                                `    ${i18n._('quantities.time')}: ${i18n.df.format(point.time)}`
+                            );
                         }
 
                         return labels;
-					}
-				}
+                    },
+                },
             },
             zoom: {
                 pan: {
@@ -190,18 +208,19 @@
                     },
                     onPanComplete: function () {
                         panning = false;
-					}
+                    },
                 },
                 zoom: {
                     wheel: {
-						enabled: true
+                        enabled: true,
                     },
                     mode: 'x',
                     onZoomStart: function ({ chart, event }: { chart: Chart; event: any }) {
                         if (
                             event.deltaY < 0 &&
                             Math.abs(
-								chart.getInitialScaleBounds().x.max / chart.options.plugins.zoom.limits.x.minRange -
+                                chart.getInitialScaleBounds().x.max /
+                                    chart.options.plugins.zoom.limits.x.minRange -
                                     chart.getZoomLevel()
                             ) < 0.01
                         ) {
@@ -210,21 +229,21 @@
                         }
 
                         $slicedGPXStatistics = undefined;
-					}
+                    },
                 },
                 limits: {
                     x: {
                         min: 'original',
                         max: 'original',
-						minRange: 1
-					}
-				}
-			}
+                        minRange: 1,
+                    },
+                },
+            },
         },
         stacked: false,
         onResize: function () {
             updateOverlay();
-		}
+        },
     };
 
     let datasets: string[] = ['speed', 'hr', 'cad', 'atemp', 'power'];
@@ -233,10 +252,10 @@
             type: 'linear',
             position: 'right',
             grid: {
-				display: false
+                display: false,
             },
             reverse: () => id === 'speed' && $velocityUnits === 'pace',
-			display: false
+            display: false,
         };
     });
 
@@ -246,7 +265,7 @@
         chart = new Chart(canvas, {
             type: 'line',
             data: {
-				datasets: []
+                datasets: [],
             },
             options,
             plugins: [
@@ -259,16 +278,16 @@
                                 marker.remove();
                             }
                         }
-					}
-				}
-			]
+                    },
+                },
+            ],
         });
 
         // Map marker to show on hover
         let element = document.createElement('div');
         element.className = 'h-4 w-4 rounded-full bg-cyan-500 border-2 border-white';
         marker = new mapboxgl.Marker({
-			element
+            element,
         });
 
         let startIndex = 0;
@@ -278,7 +297,7 @@
                 evt,
                 'x',
                 {
-					intersect: false
+                    intersect: false,
                 },
                 true
             );
@@ -321,9 +340,12 @@
                         startIndex = endIndex;
                     } else if (startIndex !== endIndex) {
                         $slicedGPXStatistics = [
-							$gpxStatistics.slice(Math.min(startIndex, endIndex), Math.max(startIndex, endIndex)),
+                            $gpxStatistics.slice(
                                 Math.min(startIndex, endIndex),
                                 Math.max(startIndex, endIndex)
+                            ),
+                            Math.min(startIndex, endIndex),
+                            Math.max(startIndex, endIndex),
                         ];
                     }
                 }
@@ -343,12 +365,12 @@
         canvas.addEventListener('pointerup', onMouseUp);
     });
 
-	$: if (chart && $distanceUnits && $velocityUnits && $temperatureUnits) {
+    $effect(() => {
         let data = $gpxStatistics;
-
+        if (chart && $distanceUnits && $velocityUnits && $temperatureUnits) {
             // update data
             chart.data.datasets[0] = {
-			label: $_('quantities.elevation'),
+                label: i18n._('quantities.elevation'),
                 data: data.local.points.map((point, index) => {
                     return {
                         x: getConvertedDistance(data.local.distance.total[index]),
@@ -357,82 +379,83 @@
                         slope: {
                             at: data.local.slope.at[index],
                             segment: data.local.slope.segment[index],
-						length: data.local.slope.length[index]
+                            length: data.local.slope.length[index],
                         },
                         extensions: point.getExtensions(),
                         coordinates: point.getCoordinates(),
-					index: index
+                        index: index,
                     };
                 }),
                 normalized: true,
                 fill: 'start',
-			order: 1
+                order: 1,
             };
             chart.data.datasets[1] = {
                 data: data.local.points.map((point, index) => {
                     return {
                         x: getConvertedDistance(data.local.distance.total[index]),
                         y: getConvertedVelocity(data.local.speed[index]),
-					index: index
+                        index: index,
                     };
                 }),
                 normalized: true,
                 yAxisID: 'yspeed',
-			hidden: true
+                hidden: true,
             };
             chart.data.datasets[2] = {
                 data: data.local.points.map((point, index) => {
                     return {
                         x: getConvertedDistance(data.local.distance.total[index]),
                         y: point.getHeartRate(),
-					index: index
+                        index: index,
                     };
                 }),
                 normalized: true,
                 yAxisID: 'yhr',
-			hidden: true
+                hidden: true,
             };
             chart.data.datasets[3] = {
                 data: data.local.points.map((point, index) => {
                     return {
                         x: getConvertedDistance(data.local.distance.total[index]),
                         y: point.getCadence(),
-					index: index
+                        index: index,
                     };
                 }),
                 normalized: true,
                 yAxisID: 'ycad',
-			hidden: true
+                hidden: true,
             };
             chart.data.datasets[4] = {
                 data: data.local.points.map((point, index) => {
                     return {
                         x: getConvertedDistance(data.local.distance.total[index]),
                         y: getConvertedTemperature(point.getTemperature()),
-					index: index
+                        index: index,
                     };
                 }),
                 normalized: true,
                 yAxisID: 'yatemp',
-			hidden: true
+                hidden: true,
             };
             chart.data.datasets[5] = {
                 data: data.local.points.map((point, index) => {
                     return {
                         x: getConvertedDistance(data.local.distance.total[index]),
                         y: point.getPower(),
-					index: index
+                        index: index,
                     };
                 }),
                 normalized: true,
                 yAxisID: 'ypower',
-			hidden: true
+                hidden: true,
             };
             chart.options.scales.x['min'] = 0;
             chart.options.scales.x['max'] = getConvertedDistance(data.global.distance.total);
 
             chart.update();
         }
+    });
 
     function slopeFillCallback(context) {
         return getSlopeColor(context.p0.raw.slope.segment);
@@ -450,26 +473,29 @@
         );
     }
 
-	$: if (chart) {
+    $effect(() => {
+        if (elevationFill && chart) {
             if (elevationFill === 'slope') {
                 chart.data.datasets[0]['segment'] = {
-				backgroundColor: slopeFillCallback
+                    backgroundColor: slopeFillCallback,
                 };
             } else if (elevationFill === 'surface') {
                 chart.data.datasets[0]['segment'] = {
-				backgroundColor: surfaceFillCallback
+                    backgroundColor: surfaceFillCallback,
                 };
             } else if (elevationFill === 'highway') {
                 chart.data.datasets[0]['segment'] = {
-				backgroundColor: highwayFillCallback
+                    backgroundColor: highwayFillCallback,
                 };
             } else {
                 chart.data.datasets[0]['segment'] = {};
             }
             chart.update();
         }
+    });
 
-	$: if (additionalDatasets && chart) {
+    $effect(() => {
+        if (additionalDatasets && chart) {
             let includeSpeed = additionalDatasets.includes('speed');
             let includeHeartRate = additionalDatasets.includes('hr');
             let includeCadence = additionalDatasets.includes('cad');
@@ -484,6 +510,7 @@
             }
             chart.update();
         }
+    });
 
     function updateOverlay() {
         if (!canvas) {
@@ -502,8 +529,8 @@
             // Draw selection rectangle
             let selectionContext = overlay.getContext('2d');
             if (selectionContext) {
-				selectionContext.fillStyle = $mode === 'dark' ? 'white' : 'black';
-				selectionContext.globalAlpha = $mode === 'dark' ? 0.2 : 0.1;
+                selectionContext.fillStyle = mode.current === 'dark' ? 'white' : 'black';
+                selectionContext.globalAlpha = mode.current === 'dark' ? 0.2 : 0.1;
                 selectionContext.clearRect(0, 0, overlay.width, overlay.height);
 
                 let startPixel = chart.scales.x.getPixelForValue(
@@ -528,7 +555,11 @@
         }
     }
 
-	$: $slicedGPXStatistics, $mode, updateOverlay();
+    $effect(() => {
+        if ($slicedGPXStatistics || mode.current) {
+            updateOverlay();
+        }
+    });
 
     onDestroy(() => {
         if (chart) {
@@ -543,68 +574,74 @@
     {#if showControls}
         <div class="absolute bottom-10 right-1.5">
             <Popover.Root>
-				<Popover.Trigger asChild let:builder>
+                <Popover.Trigger>
                     <ButtonWithTooltip
-						label={$_('chart.settings')}
-						builders={[builder]}
+                        label={i18n._('chart.settings')}
                         variant="outline"
+                        side="left"
                         class="w-7 h-7 p-0 flex justify-center opacity-70 hover:opacity-100 transition-opacity duration-300 hover:bg-background"
                     >
                         <ChartNoAxesColumn size="18" />
                     </ButtonWithTooltip>
                 </Popover.Trigger>
-				<Popover.Content class="w-fit p-0 flex flex-col divide-y" side="top" sideOffset={-32}>
+                <Popover.Content
+                    class="w-fit p-0 flex flex-col"
+                    side="top"
+                    align="end"
+                    sideOffset={-32}
+                >
                     <ToggleGroup.Root
-						class="flex flex-col items-start gap-0 p-1"
+                        class="flex flex-col items-start gap-0 p-1 w-full border-none"
                         type="single"
                         bind:value={elevationFill}
                     >
                         <ToggleGroup.Item
-							class="p-0 pr-1.5 h-6 w-full rounded flex justify-start data-[state=on]:bg-background data-[state=on]:hover:bg-accent hover:bg-accent hover:text-foreground"
+                            class="p-0 pr-1.5 h-6 w-full gap-1.5 rounded flex justify-start data-[state=on]:bg-background data-[state=on]:hover:bg-accent hover:bg-accent hover:text-foreground"
                             value="slope"
                         >
                             <div class="w-6 flex justify-center items-center">
                                 {#if elevationFill === 'slope'}
-									<Circle class="h-1.5 w-1.5 fill-current text-current" />
+                                    <Circle class="size-1.5 fill-current text-current" />
                                 {/if}
                             </div>
-							<TriangleRight size="15" class="mr-1" />
-							{$_('quantities.slope')}
+                            <TriangleRight size="15" />
+                            {i18n._('quantities.slope')}
                         </ToggleGroup.Item>
                         <ToggleGroup.Item
-							class="p-0 pr-1.5 h-6 w-full rounded flex justify-start data-[state=on]:bg-background data-[state=on]:hover:bg-accent hover:bg-accent hover:text-foreground"
+                            class="p-0 pr-1.5 h-6 w-full gap-1.5 rounded flex justify-start data-[state=on]:bg-background data-[state=on]:hover:bg-accent hover:bg-accent hover:text-foreground"
                             value="surface"
                             variant="outline"
                         >
                             <div class="w-6 flex justify-center items-center">
                                 {#if elevationFill === 'surface'}
-									<Circle class="h-1.5 w-1.5 fill-current text-current" />
+                                    <Circle class="size-1.5 fill-current text-current" />
                                 {/if}
                             </div>
-							<BrickWall size="15" class="mr-1" />
-							{$_('quantities.surface')}
+                            <BrickWall size="15" />
+                            {i18n._('quantities.surface')}
                         </ToggleGroup.Item>
                         <ToggleGroup.Item
-							class="p-0 pr-1.5 h-6 w-full rounded flex justify-start data-[state=on]:bg-background data-[state=on]:hover:bg-accent hover:bg-accent hover:text-foreground"
+                            class="p-0 pr-1.5 h-6 w-full gap-1.5 rounded flex justify-start data-[state=on]:bg-background data-[state=on]:hover:bg-accent hover:bg-accent hover:text-foreground"
                             value="highway"
                             variant="outline"
                         >
                             <div class="w-6 flex justify-center items-center">
                                 {#if elevationFill === 'highway'}
-									<Circle class="h-1.5 w-1.5 fill-current text-current" />
+                                    <Circle class="size-1.5 fill-current text-current" />
                                 {/if}
                             </div>
-							<Construction size="15" class="mr-1" />
-							{$_('quantities.highway')}
+                            <Construction size="15" />
+                            {i18n._('quantities.highway')}
                         </ToggleGroup.Item>
                     </ToggleGroup.Root>
+                    <Separator />
                     <ToggleGroup.Root
                         class="flex flex-col items-start gap-0 p-1"
                         type="multiple"
                         bind:value={additionalDatasets}
                     >
                         <ToggleGroup.Item
-							class="p-0 pr-1.5 h-6 w-full rounded flex justify-start data-[state=on]:bg-background data-[state=on]:hover:bg-accent hover:bg-accent hover:text-foreground"
+                            class="p-0 pr-1.5 h-6 w-full gap-1.5 rounded flex justify-start data-[state=on]:bg-background data-[state=on]:hover:bg-accent hover:bg-accent hover:text-foreground"
                             value="speed"
                         >
                             <div class="w-6 flex justify-center items-center">
@@ -612,11 +649,13 @@
                                     <Check size="14" />
                                 {/if}
                             </div>
-							<Zap size="15" class="mr-1" />
-							{$velocityUnits === 'speed' ? $_('quantities.speed') : $_('quantities.pace')}
+                            <Zap size="15" />
+                            {$velocityUnits === 'speed'
+                                ? i18n._('quantities.speed')
+                                : i18n._('quantities.pace')}
                         </ToggleGroup.Item>
                         <ToggleGroup.Item
-							class="p-0 pr-1.5 h-6 w-full rounded flex justify-start data-[state=on]:bg-background data-[state=on]:hover:bg-accent hover:bg-accent hover:text-foreground"
+                            class="p-0 pr-1.5 h-6 w-full gap-1.5 rounded flex justify-start data-[state=on]:bg-background data-[state=on]:hover:bg-accent hover:bg-accent hover:text-foreground"
                             value="hr"
                         >
                             <div class="w-6 flex justify-center items-center">
@@ -624,11 +663,11 @@
                                     <Check size="14" />
                                 {/if}
                             </div>
-							<HeartPulse size="15" class="mr-1" />
-							{$_('quantities.heartrate')}
+                            <HeartPulse size="15" />
+                            {i18n._('quantities.heartrate')}
                         </ToggleGroup.Item>
                         <ToggleGroup.Item
-							class="p-0 pr-1.5 h-6 w-full rounded flex justify-start data-[state=on]:bg-background data-[state=on]:hover:bg-accent hover:bg-accent hover:text-foreground"
+                            class="p-0 pr-1.5 h-6 w-full gap-1.5 rounded flex justify-start data-[state=on]:bg-background data-[state=on]:hover:bg-accent hover:bg-accent hover:text-foreground"
                             value="cad"
                         >
                             <div class="w-6 flex justify-center items-center">
@@ -636,11 +675,11 @@
                                     <Check size="14" />
                                 {/if}
                             </div>
-							<Orbit size="15" class="mr-1" />
-							{$_('quantities.cadence')}
+                            <Orbit size="15" />
+                            {i18n._('quantities.cadence')}
                         </ToggleGroup.Item>
                         <ToggleGroup.Item
-							class="p-0 pr-1.5 h-6 w-full rounded flex justify-start data-[state=on]:bg-background data-[state=on]:hover:bg-accent hover:bg-accent hover:text-foreground"
+                            class="p-0 pr-1.5 h-6 w-full gap-1.5 rounded flex justify-start data-[state=on]:bg-background data-[state=on]:hover:bg-accent hover:bg-accent hover:text-foreground"
                             value="atemp"
                         >
                             <div class="w-6 flex justify-center items-center">
@@ -648,11 +687,11 @@
                                     <Check size="14" />
                                 {/if}
                             </div>
-							<Thermometer size="15" class="mr-1" />
-							{$_('quantities.temperature')}
+                            <Thermometer size="15" />
+                            {i18n._('quantities.temperature')}
                         </ToggleGroup.Item>
                         <ToggleGroup.Item
-							class="p-0 pr-1.5 h-6 w-full rounded flex justify-start data-[state=on]:bg-background data-[state=on]:hover:bg-accent hover:bg-accent hover:text-foreground"
+                            class="p-0 pr-1.5 h-6 w-full gap-1.5 rounded flex justify-start data-[state=on]:bg-background data-[state=on]:hover:bg-accent hover:bg-accent hover:text-foreground"
                             value="power"
                         >
                             <div class="w-6 flex justify-center items-center">
@@ -660,8 +699,8 @@
                                     <Check size="14" />
                                 {/if}
                             </div>
-							<SquareActivity size="15" class="mr-1" />
-							{$_('quantities.power')}
+                            <SquareActivity size="15" />
+                            {i18n._('quantities.power')}
                         </ToggleGroup.Item>
                     </ToggleGroup.Root>
                 </Popover.Content>

website/src/lib/components/Export.svelte

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

website/src/lib/components/Footer.svelte

@@ -2,8 +2,8 @@
     import { Button } from '$lib/components/ui/button';
     import LanguageSelect from '$lib/components/LanguageSelect.svelte';
     import Logo from '$lib/components/Logo.svelte';
-	import { AtSign, BookOpenText, Heart, Home, Map } from 'lucide-svelte';
-	import { _, locale } from 'svelte-i18n';
+    import { AtSign, BookOpenText, Heart, Home, Map } from '@lucide/svelte';
+    import { i18n } from '$lib/i18n.svelte';
     import { getURLForLanguage } from '$lib/utils';
 </script>
 
@@ -24,42 +24,42 @@
             </div>
             <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">
-					<span class="font-semibold">{$_('homepage.website')}</span>
+                    <span class="font-semibold">{i18n._('homepage.website')}</span>
                     <Button
                         variant="link"
                         class="h-6 px-0 text-muted-foreground"
-						href={getURLForLanguage($locale, '/')}
+                        href={getURLForLanguage(i18n.lang, '/')}
                     >
-						<Home size="16" class="mr-1" />
-						{$_('homepage.home')}
+                        <Home size="16" />
+                        {i18n._('homepage.home')}
                     </Button>
                     <Button
                         variant="link"
                         class="h-6 px-0 text-muted-foreground"
-						href={getURLForLanguage($locale, '/app')}
+                        href={getURLForLanguage(i18n.lang, '/app')}
                     >
-						<Map size="16" class="mr-1" />
-						{$_('homepage.app')}
+                        <Map size="16" />
+                        {i18n._('homepage.app')}
                     </Button>
                     <Button
                         variant="link"
                         class="h-6 px-0 text-muted-foreground"
-						href={getURLForLanguage($locale, '/help')}
+                        href={getURLForLanguage(i18n.lang, '/help')}
                     >
-						<BookOpenText size="16" class="mr-1" />
-						{$_('menu.help')}
+                        <BookOpenText size="16" />
+                        {i18n._('menu.help')}
                     </Button>
                 </div>
                 <div class="flex flex-col items-start gap-1" id="contact">
-					<span class="font-semibold">{$_('homepage.contact')}</span>
+                    <span class="font-semibold">{i18n._('homepage.contact')}</span>
                     <Button
                         variant="link"
                         class="h-6 px-0 text-muted-foreground"
                         href="https://www.reddit.com/r/gpxstudio/"
                         target="_blank"
                     >
-						<Logo company="reddit" class="h-4 mr-1 fill-muted-foreground" />
-						{$_('homepage.reddit')}
+                        <Logo company="reddit" class="h-4 fill-muted-foreground" />
+                        {i18n._('homepage.reddit')}
                     </Button>
                     <Button
                         variant="link"
@@ -67,8 +67,8 @@
                         href="https://facebook.com/gpx.studio"
                         target="_blank"
                     >
-						<Logo company="facebook" class="h-4 mr-1 fill-muted-foreground" />
-						{$_('homepage.facebook')}
+                        <Logo company="facebook" class="h-4 fill-muted-foreground" />
+                        {i18n._('homepage.facebook')}
                     </Button>
                     <Button
                         variant="link"
@@ -76,8 +76,8 @@
                         href="https://x.com/gpxstudio"
                         target="_blank"
                     >
-						<Logo company="x" class="h-4 mr-1 fill-muted-foreground" />
-						{$_('homepage.x')}
+                        <Logo company="x" class="h-4 fill-muted-foreground" />
+                        {i18n._('homepage.x')}
                     </Button>
                     <Button
                         variant="link"
@@ -85,20 +85,20 @@
                         href="mailto:hello@gpx.studio"
                         target="_blank"
                     >
-						<AtSign size="16" class="mr-1" />
-						{$_('homepage.email')}
+                        <AtSign size="16" />
+                        {i18n._('homepage.email')}
                     </Button>
                 </div>
                 <div class="flex flex-col items-start gap-1">
-					<span class="font-semibold">{$_('homepage.contribute')}</span>
+                    <span class="font-semibold">{i18n._('homepage.contribute')}</span>
                     <Button
                         variant="link"
                         class="h-6 px-0 text-muted-foreground"
                         href="https://ko-fi.com/gpxstudio"
                         target="_blank"
                     >
-						<Heart size="16" class="mr-1" />
-						{$_('menu.donate')}
+                        <Heart size="16" />
+                        {i18n._('menu.donate')}
                     </Button>
                     <Button
                         variant="link"
@@ -106,8 +106,8 @@
                         href="https://crowdin.com/project/gpxstudio"
                         target="_blank"
                     >
-						<Logo company="crowdin" class="h-4 mr-1 fill-muted-foreground" />
-						{$_('homepage.crowdin')}
+                        <Logo company="crowdin" class="h-4 fill-muted-foreground" />
+                        {i18n._('homepage.crowdin')}
                     </Button>
                     <Button
                         variant="link"
@@ -115,8 +115,8 @@
                         href="https://github.com/gpxstudio/gpx.studio"
                         target="_blank"
                     >
-						<Logo company="github" class="h-4 mr-1 fill-muted-foreground" />
-						{$_('homepage.github')}
+                        <Logo company="github" class="h-4 fill-muted-foreground" />
+                        {i18n._('homepage.github')}
                     </Button>
                 </div>
             </div>

website/src/lib/components/GPXStatistics.svelte

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

website/src/lib/components/Help.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { CircleHelp } from 'lucide-svelte';
-	import { _ } from 'svelte-i18n';
+    import { CircleQuestionMark } from '@lucide/svelte';
+    import { i18n } from '$lib/i18n.svelte';
 
     export let link: string | undefined = undefined;
 </script>
@@ -8,12 +8,12 @@
 <div
     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" />
+    <CircleQuestionMark size="16" class="w-4 mr-2 shrink-0 grow-0" />
     <div>
         <slot />
         {#if link}
             <a href={link} target="_blank" class="text-sm text-link hover:underline">
-				{$_('menu.more')}
+                {i18n._('menu.more')}
             </a>
         {/if}
     </div>

website/src/lib/components/LanguageSelect.svelte

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

website/src/lib/components/Logo.svelte

@@ -1,22 +1,20 @@
 <script lang="ts">
     import { base } from '$app/paths';
-	import { mode, systemPrefersMode } from 'mode-watcher';
+    import { mode } from 'mode-watcher';
 
     export let iconOnly = false;
     export let company = 'gpx.studio';
-
-	$: effectiveMode = $mode ?? $systemPrefersMode ?? 'light';
 </script>
 
 {#if company === 'gpx.studio'}
     <img
-		src="{base}/{iconOnly ? 'icon' : 'logo'}{effectiveMode === 'dark' ? '-dark' : ''}.svg"
+        src="{base}/{iconOnly ? 'icon' : 'logo'}{mode.current === 'dark' ? '-dark' : ''}.svg"
         alt="Logo of gpx.studio."
         {...$$restProps}
     />
 {:else if company === 'mapbox'}
     <img
-		src="{base}/mapbox-logo-{effectiveMode === 'dark' ? 'white' : 'black'}.svg"
+        src="{base}/mapbox-logo-{mode.current === 'dark' ? 'white' : 'black'}.svg"
         alt="Logo of Mapbox."
         {...$$restProps}
     />

website/src/lib/components/Map.svelte

@@ -1,394 +0,0 @@
-<script lang="ts">
-	import { onDestroy, onMount } from 'svelte';
-
-	import mapboxgl from 'mapbox-gl';
-	import 'mapbox-gl/dist/mapbox-gl.css';
-
-	import MapboxGeocoder from '@mapbox/mapbox-gl-geocoder';
-	import '@mapbox/mapbox-gl-geocoder/dist/mapbox-gl-geocoder.css';
-
-	import { Button } from '$lib/components/ui/button';
-	import { map } from '$lib/stores';
-	import { settings } from '$lib/db';
-	import { _ } from 'svelte-i18n';
-	import { PUBLIC_MAPBOX_TOKEN } from '$env/static/public';
-	import { page } from '$app/stores';
-
-	export let accessToken = PUBLIC_MAPBOX_TOKEN;
-	export let geolocate = true;
-	export let geocoder = true;
-	export let hash = true;
-
-	mapboxgl.accessToken = accessToken;
-
-	let webgl2Supported = true;
-	let fitBoundsOptions: mapboxgl.FitBoundsOptions = {
-		maxZoom: 15,
-		linear: true,
-		easing: () => 1
-	};
-
-	const { distanceUnits, elevationProfile, verticalFileView, bottomPanelSize, rightPanelSize } =
-		settings;
-	let scaleControl = new mapboxgl.ScaleControl({
-		unit: $distanceUnits
-	});
-
-	onMount(() => {
-		let gl = document.createElement('canvas').getContext('webgl2');
-		if (!gl) {
-			webgl2Supported = false;
-			return;
-		}
-
-		let language = $page.params.language;
-		if (language === 'zh') {
-			language = 'zh-Hans';
-		} else if (language?.includes('-')) {
-			language = language.split('-')[0];
-		} else if (language === '' || language === undefined) {
-			language = 'en';
-		}
-
-		const loadJson = mapboxgl.Style.prototype._load;
-		mapboxgl.Style.prototype._load = function (json, validate) {
-			if (
-				json['sources'] &&
-				json['sources']['mapbox-satellite'] &&
-				json['sources']['mapbox-satellite']['data'] &&
-				json['sources']['mapbox-satellite']['data']['data']
-			) {
-				// Temporary fix for https://github.com/gpxstudio/gpx.studio/issues/129
-				delete json['sources']['mapbox-satellite']['data']['data'];
-			}
-			loadJson.call(this, json, validate);
-		};
-
-		let newMap = new mapboxgl.Map({
-			container: 'map',
-			style: {
-				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(
-			new mapboxgl.AttributionControl({
-				compact: true
-			})
-		);
-
-		newMap.addControl(
-			new mapboxgl.NavigationControl({
-				visualizePitch: true
-			})
-		);
-
-		if (geocoder) {
-			let geocoder = new MapboxGeocoder({
-				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 (geolocate) {
-			newMap.addControl(
-				new mapboxgl.GeolocateControl({
-					positionOptions: {
-						enableHighAccuracy: true
-					},
-					fitBoundsOptions,
-					trackUserLocation: true,
-					showUserHeading: true
-				})
-			);
-		}
-
-		newMap.addControl(scaleControl);
-
-		newMap.on('style.load', () => {
-			newMap.addSource('mapbox-dem', {
-				type: 'raster-dem',
-				url: 'mapbox://mapbox.mapbox-terrain-dem-v1',
-				tileSize: 512,
-				maxzoom: 14
-			});
-			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) {
-			$map.remove();
-			$map = null;
-		}
-	});
-
-	$: if (
-		$map &&
-		(!$verticalFileView || !$elevationProfile || $bottomPanelSize || $rightPanelSize)
-	) {
-		$map.resize();
-	}
-</script>
-
-<div {...$$restProps}>
-	<div id="map" class="h-full {webgl2Supported ? '' : 'hidden'}"></div>
-	<div
-		class="flex flex-col items-center justify-center gap-3 h-full {webgl2Supported ? 'hidden' : ''}"
-	>
-		<p>{$_('webgl2_required')}</p>
-		<Button href="https://get.webgl.org/webgl2/" target="_blank">
-			{$_('enable_webgl2')}
-		</Button>
-	</div>
-</div>
-
-<style lang="postcss">
-	div :global(.mapboxgl-map) {
-		@apply font-sans;
-	}
-
-	div :global(.mapboxgl-ctrl-top-right > .mapboxgl-ctrl) {
-		@apply shadow-md;
-		@apply bg-background;
-		@apply text-foreground;
-	}
-
-	div :global(.mapboxgl-ctrl-icon) {
-		@apply dark:brightness-[4.7];
-	}
-
-	div :global(.mapboxgl-ctrl-geocoder) {
-		@apply flex;
-		@apply flex-row;
-		@apply w-fit;
-		@apply min-w-fit;
-		@apply items-center;
-		@apply shadow-md;
-	}
-
-	div :global(.suggestions) {
-		@apply shadow-md;
-		@apply bg-background;
-		@apply text-foreground;
-	}
-
-	div :global(.mapboxgl-ctrl-geocoder .suggestions > li > a) {
-		@apply text-foreground;
-		@apply hover:text-accent-foreground;
-		@apply hover:bg-accent;
-	}
-
-	div :global(.mapboxgl-ctrl-geocoder .suggestions > .active > a) {
-		@apply bg-background;
-	}
-
-	div :global(.mapboxgl-ctrl-geocoder--button) {
-		@apply bg-transparent;
-		@apply hover:bg-transparent;
-	}
-
-	div :global(.mapboxgl-ctrl-geocoder--icon) {
-		@apply fill-foreground;
-		@apply hover:fill-accent-foreground;
-	}
-
-	div :global(.mapboxgl-ctrl-geocoder--icon-search) {
-		@apply relative;
-		@apply top-0;
-		@apply left-0;
-		@apply my-2;
-		@apply w-[29px];
-	}
-
-	div :global(.mapboxgl-ctrl-geocoder--input) {
-		@apply relative;
-		@apply w-64;
-		@apply py-0;
-		@apply pl-2;
-		@apply focus:outline-none;
-		@apply transition-[width];
-		@apply duration-200;
-		@apply text-foreground;
-	}
-
-	div :global(.mapboxgl-ctrl-geocoder--collapsed .mapboxgl-ctrl-geocoder--input) {
-		@apply w-0;
-		@apply p-0;
-	}
-
-	div :global(.mapboxgl-ctrl-top-right) {
-		@apply z-40;
-		@apply flex;
-		@apply flex-col;
-		@apply items-end;
-		@apply h-full;
-		@apply overflow-hidden;
-	}
-
-	.horizontal :global(.mapboxgl-ctrl-bottom-left) {
-		@apply bottom-[42px];
-	}
-
-	.horizontal :global(.mapboxgl-ctrl-bottom-right) {
-		@apply bottom-[42px];
-	}
-
-	div :global(.mapboxgl-ctrl-attrib) {
-		@apply dark:bg-transparent;
-	}
-
-	div :global(.mapboxgl-compact-show.mapboxgl-ctrl-attrib) {
-		@apply dark:bg-background;
-	}
-
-	div :global(.mapboxgl-ctrl-attrib-button) {
-		@apply dark:bg-foreground;
-	}
-
-	div :global(.mapboxgl-compact-show .mapboxgl-ctrl-attrib-button) {
-		@apply dark:bg-foreground;
-	}
-
-	div :global(.mapboxgl-ctrl-attrib a) {
-		@apply text-foreground;
-	}
-
-	div :global(.mapboxgl-popup) {
-		@apply w-fit;
-		@apply z-50;
-	}
-
-	div :global(.mapboxgl-popup-content) {
-		@apply p-0;
-		@apply bg-transparent;
-		@apply shadow-none;
-	}
-
-	div :global(.mapboxgl-popup-anchor-top .mapboxgl-popup-tip) {
-		@apply border-b-background;
-	}
-
-	div :global(.mapboxgl-popup-anchor-top-left .mapboxgl-popup-tip) {
-		@apply border-b-background;
-	}
-
-	div :global(.mapboxgl-popup-anchor-top-right .mapboxgl-popup-tip) {
-		@apply border-b-background;
-	}
-
-	div :global(.mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip) {
-		@apply border-t-background;
-		@apply drop-shadow-md;
-	}
-
-	div :global(.mapboxgl-popup-anchor-bottom-left .mapboxgl-popup-tip) {
-		@apply border-t-background;
-		@apply drop-shadow-md;
-	}
-
-	div :global(.mapboxgl-popup-anchor-bottom-right .mapboxgl-popup-tip) {
-		@apply border-t-background;
-		@apply drop-shadow-md;
-	}
-
-	div :global(.mapboxgl-popup-anchor-left .mapboxgl-popup-tip) {
-		@apply border-r-background;
-	}
-
-	div :global(.mapboxgl-popup-anchor-right .mapboxgl-popup-tip) {
-		@apply border-l-background;
-	}
-</style>

website/src/lib/components/MapPopup.svelte

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

website/src/lib/components/Menu.svelte

@@ -22,7 +22,7 @@
         Sun,
         Moon,
         Layers,
-		GalleryVertical,
+        ListTree,
         Languages,
         Settings,
         Info,
@@ -42,48 +42,45 @@
         FileX,
         BookOpenText,
         ChartArea,
-		Maximize
-	} from 'lucide-svelte';
-
-	import {
-		map,
-		triggerFileInput,
-		createFile,
-		loadFiles,
-		updateSelectionFromKey,
-		allHidden,
-		editMetadata,
-		editStyle,
-		exportState,
-		ExportState,
-		centerMapOnSelection
-	} from '$lib/stores';
-	import {
-		copied,
-		copySelection,
-		cutSelection,
-		pasteSelection,
-		selectAll,
-		selection
-	} from '$lib/components/file-list/Selection';
-	import { derived } from 'svelte/store';
-	import { canUndo, canRedo, dbUtils, fileObservers, settings } from '$lib/db';
-	import { anySelectedLayer } from '$lib/components/layer-control/utils';
+        Maximize,
+    } from '@lucide/svelte';
+    import { map } from '$lib/components/map/map';
+    import { editMetadata } from '$lib/components/file-list/metadata/utils.svelte';
+    import { editStyle } from '$lib/components/file-list/style/utils.svelte';
+    import { exportState, ExportState } from '$lib/components/export/utils.svelte';
+    import { anySelectedLayer } from '$lib/components/map/layer-control/utils';
     import { defaultOverlays } from '$lib/assets/layers';
-	import LayerControlSettings from '$lib/components/layer-control/LayerControlSettings.svelte';
-	import { allowedPastes, ListFileItem, ListTrackItem } from '$lib/components/file-list/FileList';
-	import Export from '$lib/components/Export.svelte';
-	import { mode, setMode, systemPrefersMode } from 'mode-watcher';
-	import { _, locale } from 'svelte-i18n';
+    import LayerControlSettings from '$lib/components/map/layer-control/LayerControlSettings.svelte';
+    import {
+        allowedPastes,
+        ListFileItem,
+        ListTrackItem,
+    } from '$lib/components/file-list/file-list';
+    import Export from '$lib/components/export/Export.svelte';
+    import { mode, setMode } from 'mode-watcher';
+    import { i18n } from '$lib/i18n.svelte';
     import { languages } from '$lib/languages';
     import { getURLForLanguage } from '$lib/utils';
+    import { settings } from '$lib/logic/settings';
+    import {
+        createFile,
+        fileActions,
+        loadFiles,
+        pasteSelection,
+        triggerFileInput,
+    } from '$lib/logic/file-actions';
+    import { fileStateCollection } from '$lib/logic/file-state';
+    import { fileActionManager } from '$lib/logic/file-action-manager';
+    import { copied, selection } from '$lib/logic/selection';
+    import { allHidden } from '$lib/logic/hidden';
+    import { boundsManager } from '$lib/logic/bounds';
 
     const {
         distanceUnits,
         velocityUnits,
         temperatureUnits,
         elevationProfile,
-		verticalFileView,
+        treeFileView,
         currentBasemap,
         previousBasemap,
         currentOverlays,
@@ -91,115 +88,115 @@
         distanceMarkers,
         directionMarkers,
         streetViewSource,
-		routing
+        routing,
     } = settings;
 
-	let undoDisabled = derived(canUndo, ($canUndo) => !$canUndo);
-	let redoDisabled = derived(canRedo, ($canRedo) => !$canRedo);
-
     function switchBasemaps() {
         [$currentBasemap, $previousBasemap] = [$previousBasemap, $currentBasemap];
     }
 
     function toggleOverlays() {
-		if (anySelectedLayer($currentOverlays)) {
+        if ($currentOverlays && anySelectedLayer($currentOverlays)) {
             [$currentOverlays, $previousOverlays] = [defaultOverlays, $currentOverlays];
         } else {
             [$currentOverlays, $previousOverlays] = [$previousOverlays, defaultOverlays];
         }
     }
 
-	function toggle3D() {
-		if ($map) {
-			if ($map.getPitch() === 0) {
-				$map.easeTo({ pitch: 70 });
-			} else {
-				$map.easeTo({ pitch: 0 });
-			}
-		}
-	}
-
-	let layerSettingsOpen = false;
-
-	$: selectedMode = $mode ?? $systemPrefersMode ?? 'light';
+    let layerSettingsOpen = $state(false);
 </script>
 
 <div class="absolute md:top-2 left-0 right-0 z-20 flex flex-row justify-center pointer-events-none">
     <div
         class="w-fit flex flex-row items-center justify-center p-1 bg-background rounded-b-md md:rounded-md pointer-events-auto shadow-md"
     >
-		<a href="./" target="_blank" class="shrink-0">
+        <a href={getURLForLanguage(i18n.lang, '/')} target="_blank" class="shrink-0">
             <Logo class="h-5 mt-0.5 mx-2 md:hidden" iconOnly={true} width="16" />
             <Logo class="h-5 mt-0.5 mx-2 hidden md:block" width="96" />
         </a>
-		<Menubar.Root class="border-none h-fit p-0">
+        <Menubar.Root class="border-none shadow-none h-fit p-0">
             <Menubar.Menu>
-				<Menubar.Trigger aria-label={$_('gpx.file')}>
+                <Menubar.Trigger aria-label={i18n._('gpx.file')}>
                     <File size="18" class="md:hidden" />
-					<span class="hidden md:block">{$_('gpx.file')}</span>
+                    <span class="hidden md:block">{i18n._('gpx.file')}</span>
                 </Menubar.Trigger>
                 <Menubar.Content class="border-none">
-					<Menubar.Item on:click={createFile}>
-						<Plus size="16" class="mr-1" />
-						{$_('menu.new')}
+                    <Menubar.Item onclick={createFile}>
+                        <Plus size="16" />
+                        {i18n._('menu.new')}
                         <Shortcut key="+" ctrl={true} />
                     </Menubar.Item>
                     <Menubar.Separator />
-					<Menubar.Item on:click={triggerFileInput}>
-						<FolderOpen size="16" class="mr-1" />
-						{$_('menu.open')}
+                    <Menubar.Item onclick={triggerFileInput}>
+                        <FolderOpen size="16" />
+                        {i18n._('menu.open')}
                         <Shortcut key="O" ctrl={true} />
                     </Menubar.Item>
                     <Menubar.Separator />
-					<Menubar.Item on:click={dbUtils.duplicateSelection} disabled={$selection.size == 0}>
-						<Copy size="16" class="mr-1" />
-						{$_('menu.duplicate')}
+                    <Menubar.Item
+                        onclick={fileActions.duplicateSelection}
+                        disabled={$selection.size == 0}
+                    >
+                        <Copy size="16" />
+                        {i18n._('menu.duplicate')}
                         <Shortcut key="D" ctrl={true} />
                     </Menubar.Item>
                     <Menubar.Separator />
-					<Menubar.Item on:click={dbUtils.deleteSelectedFiles} disabled={$selection.size == 0}>
-						<FileX size="16" class="mr-1" />
-						{$_('menu.close')}
+                    <Menubar.Item
+                        onclick={fileActions.deleteSelectedFiles}
+                        disabled={$selection.size == 0}
+                    >
+                        <FileX size="16" />
+                        {i18n._('menu.close')}
                         <Shortcut key="⌫" ctrl={true} />
                     </Menubar.Item>
-					<Menubar.Item on:click={dbUtils.deleteAllFiles} disabled={$fileObservers.size == 0}>
-						<FileX size="16" class="mr-1" />
-						{$_('menu.close_all')}
+                    <Menubar.Item
+                        onclick={fileActions.deleteAllFiles}
+                        disabled={fileStateCollection.size == 0}
+                    >
+                        <FileX size="16" />
+                        {i18n._('menu.close_all')}
                         <Shortcut key="⌫" ctrl={true} shift={true} />
                     </Menubar.Item>
                     <Menubar.Separator />
                     <Menubar.Item
-						on:click={() => ($exportState = ExportState.SELECTION)}
+                        onclick={() => (exportState.current = ExportState.SELECTION)}
                         disabled={$selection.size == 0}
                     >
-						<Download size="16" class="mr-1" />
-						{$_('menu.export')}
+                        <Download size="16" />
+                        {i18n._('menu.export')}
                         <Shortcut key="S" ctrl={true} />
                     </Menubar.Item>
                     <Menubar.Item
-						on:click={() => ($exportState = ExportState.ALL)}
-						disabled={$fileObservers.size == 0}
+                        onclick={() => (exportState.current = ExportState.ALL)}
+                        disabled={fileStateCollection.size == 0}
                     >
-						<Download size="16" class="mr-1" />
-						{$_('menu.export_all')}
+                        <Download size="16" />
+                        {i18n._('menu.export_all')}
                         <Shortcut key="S" ctrl={true} shift={true} />
                     </Menubar.Item>
                 </Menubar.Content>
             </Menubar.Menu>
             <Menubar.Menu>
-				<Menubar.Trigger aria-label={$_('menu.edit')}>
+                <Menubar.Trigger aria-label={i18n._('menu.edit')}>
                     <FilePen size="18" class="md:hidden" />
-					<span class="hidden md:block">{$_('menu.edit')}</span>
+                    <span class="hidden md:block">{i18n._('menu.edit')}</span>
                 </Menubar.Trigger>
                 <Menubar.Content class="border-none">
-					<Menubar.Item on:click={dbUtils.undo} disabled={$undoDisabled}>
-						<Undo2 size="16" class="mr-1" />
-						{$_('menu.undo')}
+                    <Menubar.Item
+                        onclick={() => fileActionManager.undo()}
+                        disabled={!fileActionManager.canUndo}
+                    >
+                        <Undo2 size="16" />
+                        {i18n._('menu.undo')}
                         <Shortcut key="Z" ctrl={true} />
                     </Menubar.Item>
-					<Menubar.Item on:click={dbUtils.redo} disabled={$redoDisabled}>
-						<Redo2 size="16" class="mr-1" />
-						{$_('menu.redo')}
+                    <Menubar.Item
+                        onclick={() => fileActionManager.redo()}
+                        disabled={!fileActionManager.canRedo}
+                    >
+                        <Redo2 size="16" />
+                        {i18n._('menu.redo')}
                         <Shortcut key="Z" ctrl={true} shift={true} />
                     </Menubar.Item>
                     <Menubar.Separator />
@@ -207,203 +204,250 @@
                         disabled={$selection.size !== 1 ||
                             !$selection
                                 .getSelected()
-								.every((item) => item instanceof ListFileItem || item instanceof ListTrackItem)}
-						on:click={() => ($editMetadata = true)}
+                                .every(
+                                    (item) =>
+                                        item instanceof ListFileItem ||
+                                        item instanceof ListTrackItem
+                                )}
+                        onclick={() => (editMetadata.current = true)}
                     >
-						<Info size="16" class="mr-1" />
-						{$_('menu.metadata.button')}
+                        <Info size="16" />
+                        {i18n._('menu.metadata.button')}
                         <Shortcut key="I" ctrl={true} />
                     </Menubar.Item>
                     <Menubar.Item
                         disabled={$selection.size === 0 ||
                             !$selection
                                 .getSelected()
-								.every((item) => item instanceof ListFileItem || item instanceof ListTrackItem)}
-						on:click={() => ($editStyle = true)}
+                                .every(
+                                    (item) =>
+                                        item instanceof ListFileItem ||
+                                        item instanceof ListTrackItem
+                                )}
+                        onclick={() => (editStyle.current = true)}
                     >
-						<PaintBucket size="16" class="mr-1" />
-						{$_('menu.style.button')}
+                        <PaintBucket size="16" />
+                        {i18n._('menu.style.button')}
                     </Menubar.Item>
                     <Menubar.Item
-						on:click={() => {
+                        onclick={() => {
                             if ($allHidden) {
-								dbUtils.setHiddenToSelection(false);
+                                fileActions.setHiddenToSelection(false);
                             } else {
-								dbUtils.setHiddenToSelection(true);
+                                fileActions.setHiddenToSelection(true);
                             }
                         }}
                         disabled={$selection.size == 0}
                     >
                         {#if $allHidden}
-							<Eye size="16" class="mr-1" />
-							{$_('menu.unhide')}
+                            <Eye size="16" />
+                            {i18n._('menu.unhide')}
                         {:else}
-							<EyeOff size="16" class="mr-1" />
-							{$_('menu.hide')}
+                            <EyeOff size="16" />
+                            {i18n._('menu.hide')}
                         {/if}
                         <Shortcut key="H" ctrl={true} />
                     </Menubar.Item>
-					{#if $verticalFileView}
+                    {#if $treeFileView}
                         {#if $selection.getSelected().some((item) => item instanceof ListFileItem)}
                             <Menubar.Separator />
                             <Menubar.Item
-								on:click={() => dbUtils.addNewTrack($selection.getSelected()[0].getFileId())}
+                                onclick={() =>
+                                    fileActions.addNewTrack(
+                                        $selection.getSelected()[0].getFileId()
+                                    )}
                                 disabled={$selection.size !== 1}
                             >
-								<Plus size="16" class="mr-1" />
-								{$_('menu.new_track')}
+                                <Plus size="16" />
+                                {i18n._('menu.new_track')}
                             </Menubar.Item>
-						{:else if $selection.getSelected().some((item) => item instanceof ListTrackItem)}
+                        {:else if $selection
+                            .getSelected()
+                            .some((item) => item instanceof ListTrackItem)}
                             <Menubar.Separator />
                             <Menubar.Item
-								on:click={() => {
+                                onclick={() => {
                                     let item = $selection.getSelected()[0];
-									dbUtils.addNewSegment(item.getFileId(), item.getTrackIndex());
+                                    fileActions.addNewSegment(
+                                        item.getFileId(),
+                                        item.getTrackIndex()
+                                    );
                                 }}
                                 disabled={$selection.size !== 1}
                             >
-								<Plus size="16" class="mr-1" />
-								{$_('menu.new_segment')}
+                                <Plus size="16" />
+                                {i18n._('menu.new_segment')}
                             </Menubar.Item>
                         {/if}
                     {/if}
                     <Menubar.Separator />
-					<Menubar.Item on:click={selectAll} disabled={$fileObservers.size == 0}>
-						<FileStack size="16" class="mr-1" />
-						{$_('menu.select_all')}
+                    <Menubar.Item
+                        onclick={() => selection.selectAll()}
+                        disabled={fileStateCollection.size == 0}
+                    >
+                        <FileStack size="16" />
+                        {i18n._('menu.select_all')}
                         <Shortcut key="A" ctrl={true} />
                     </Menubar.Item>
                     <Menubar.Item
-						on:click={() => {
+                        onclick={() => {
                             if ($selection.size > 0) {
-								centerMapOnSelection();
+                                boundsManager.centerMapOnSelection();
                             }
                         }}
+                        disabled={$selection.size == 0}
                     >
-						<Maximize size="16" class="mr-1" />
-						{$_('menu.center')}
+                        <Maximize size="16" />
+                        {i18n._('menu.center')}
                         <Shortcut key="⏎" ctrl={true} />
                     </Menubar.Item>
-					{#if $verticalFileView}
+                    {#if $treeFileView}
                         <Menubar.Separator />
-						<Menubar.Item on:click={copySelection} disabled={$selection.size === 0}>
-							<ClipboardCopy size="16" class="mr-1" />
-							{$_('menu.copy')}
+                        <Menubar.Item
+                            onclick={() => selection.copySelection()}
+                            disabled={$selection.size === 0}
+                        >
+                            <ClipboardCopy size="16" />
+                            {i18n._('menu.copy')}
                             <Shortcut key="C" ctrl={true} />
                         </Menubar.Item>
-						<Menubar.Item on:click={cutSelection} disabled={$selection.size === 0}>
-							<Scissors size="16" class="mr-1" />
-							{$_('menu.cut')}
+                        <Menubar.Item
+                            onclick={() => selection.cutSelection()}
+                            disabled={$selection.size === 0}
+                        >
+                            <Scissors size="16" />
+                            {i18n._('menu.cut')}
                             <Shortcut key="X" ctrl={true} />
                         </Menubar.Item>
                         <Menubar.Item
                             disabled={$copied === undefined ||
                                 $copied.length === 0 ||
                                 ($selection.size > 0 &&
-									!allowedPastes[$copied[0].level].includes($selection.getSelected().pop()?.level))}
-							on:click={pasteSelection}
+                                    !allowedPastes[$copied[0].level].includes(
+                                        $selection.getSelected().pop()?.level
+                                    ))}
+                            onclick={pasteSelection}
                         >
-							<ClipboardPaste size="16" class="mr-1" />
-							{$_('menu.paste')}
+                            <ClipboardPaste size="16" />
+                            {i18n._('menu.paste')}
                             <Shortcut key="V" ctrl={true} />
                         </Menubar.Item>
                     {/if}
                     <Menubar.Separator />
-					<Menubar.Item on:click={dbUtils.deleteSelection} disabled={$selection.size == 0}>
-						<Trash2 size="16" class="mr-1" />
-						{$_('menu.delete')}
+                    <Menubar.Item
+                        onclick={fileActions.deleteSelection}
+                        disabled={$selection.size == 0}
+                    >
+                        <Trash2 size="16" />
+                        {i18n._('menu.delete')}
                         <Shortcut key="⌫" ctrl={true} />
                     </Menubar.Item>
                 </Menubar.Content>
             </Menubar.Menu>
             <Menubar.Menu>
-				<Menubar.Trigger aria-label={$_('menu.view')}>
+                <Menubar.Trigger aria-label={i18n._('menu.view')}>
                     <View size="18" class="md:hidden" />
-					<span class="hidden md:block">{$_('menu.view')}</span>
+                    <span class="hidden md:block">{i18n._('menu.view')}</span>
                 </Menubar.Trigger>
                 <Menubar.Content class="border-none">
                     <Menubar.CheckboxItem bind:checked={$elevationProfile}>
-						<ChartArea size="16" class="mr-1" />
-						{$_('menu.elevation_profile')}
+                        <ChartArea size="16" />
+                        {i18n._('menu.elevation_profile')}
                         <Shortcut key="P" ctrl={true} />
                     </Menubar.CheckboxItem>
-					<Menubar.CheckboxItem bind:checked={$verticalFileView}>
-						<GalleryVertical size="16" class="mr-1" />
-						{$_('menu.vertical_file_view')}
+                    <Menubar.CheckboxItem bind:checked={$treeFileView}>
+                        <ListTree size="16" />
+                        {i18n._('menu.tree_file_view')}
                         <Shortcut key="L" ctrl={true} />
                     </Menubar.CheckboxItem>
                     <Menubar.Separator />
-					<Menubar.Item inset on:click={switchBasemaps}>
-						<Map size="16" class="mr-1" />{$_('menu.switch_basemap')}<Shortcut key="F1" />
+                    <Menubar.Item inset onclick={switchBasemaps}>
+                        <Map size="16" />{i18n._('menu.switch_basemap')}<Shortcut key="F1" />
                     </Menubar.Item>
-					<Menubar.Item inset on:click={toggleOverlays}>
-						<Layers2 size="16" class="mr-1" />{$_('menu.toggle_overlays')}<Shortcut key="F2" />
+                    <Menubar.Item inset onclick={toggleOverlays}>
+                        <Layers2 size="16" />{i18n._('menu.toggle_overlays')}<Shortcut key="F2" />
                     </Menubar.Item>
                     <Menubar.Separator />
                     <Menubar.CheckboxItem bind:checked={$distanceMarkers}>
-						<Coins size="16" class="mr-1" />{$_('menu.distance_markers')}<Shortcut key="F3" />
+                        <Coins size="16" />{i18n._('menu.distance_markers')}<Shortcut key="F3" />
                     </Menubar.CheckboxItem>
                     <Menubar.CheckboxItem bind:checked={$directionMarkers}>
-						<Milestone size="16" class="mr-1" />{$_('menu.direction_markers')}<Shortcut key="F4" />
+                        <Milestone size="16" />{i18n._('menu.direction_markers')}<Shortcut
+                            key="F4"
+                        />
                     </Menubar.CheckboxItem>
                     <Menubar.Separator />
-					<Menubar.Item inset on:click={toggle3D}>
-						<Box size="16" class="mr-1" />
-						{$_('menu.toggle_3d')}
-						<Shortcut key="{$_('menu.ctrl')}+{$_('menu.drag')}" />
+                    <Menubar.Item inset onclick={() => map.toggle3D()}>
+                        <Box size="16" />
+                        {i18n._('menu.toggle_3d')}
+                        <Shortcut key="{i18n._('menu.ctrl')} {i18n._('menu.drag')}" />
                     </Menubar.Item>
                 </Menubar.Content>
             </Menubar.Menu>
             <Menubar.Menu>
-				<Menubar.Trigger aria-label={$_('menu.settings')}>
+                <Menubar.Trigger aria-label={i18n._('menu.settings')}>
                     <Settings size="18" class="md:hidden" />
                     <span class="hidden md:block">
-						{$_('menu.settings')}
+                        {i18n._('menu.settings')}
                     </span>
                 </Menubar.Trigger>
                 <Menubar.Content class="border-none">
                     <Menubar.Sub>
                         <Menubar.SubTrigger>
-							<Ruler size="16" class="mr-1" />{$_('menu.distance_units')}
+                            <Ruler size="16" class="mr-2" />{i18n._('menu.distance_units')}
                         </Menubar.SubTrigger>
                         <Menubar.SubContent>
                             <Menubar.RadioGroup bind:value={$distanceUnits}>
-								<Menubar.RadioItem value="metric">{$_('menu.metric')}</Menubar.RadioItem>
-								<Menubar.RadioItem value="imperial">{$_('menu.imperial')}</Menubar.RadioItem>
-								<Menubar.RadioItem value="nautical">{$_('menu.nautical')}</Menubar.RadioItem>
+                                <Menubar.RadioItem value="metric"
+                                    >{i18n._('menu.metric')}</Menubar.RadioItem
+                                >
+                                <Menubar.RadioItem value="imperial"
+                                    >{i18n._('menu.imperial')}</Menubar.RadioItem
+                                >
+                                <Menubar.RadioItem value="nautical"
+                                    >{i18n._('menu.nautical')}</Menubar.RadioItem
+                                >
                             </Menubar.RadioGroup>
                         </Menubar.SubContent>
                     </Menubar.Sub>
                     <Menubar.Sub>
                         <Menubar.SubTrigger>
-							<Zap size="16" class="mr-1" />{$_('menu.velocity_units')}
+                            <Zap size="16" class="mr-2" />{i18n._('menu.velocity_units')}
                         </Menubar.SubTrigger>
                         <Menubar.SubContent>
                             <Menubar.RadioGroup bind:value={$velocityUnits}>
-								<Menubar.RadioItem value="speed">{$_('quantities.speed')}</Menubar.RadioItem>
-								<Menubar.RadioItem value="pace">{$_('quantities.pace')}</Menubar.RadioItem>
+                                <Menubar.RadioItem value="speed"
+                                    >{i18n._('quantities.speed')}</Menubar.RadioItem
+                                >
+                                <Menubar.RadioItem value="pace"
+                                    >{i18n._('quantities.pace')}</Menubar.RadioItem
+                                >
                             </Menubar.RadioGroup>
                         </Menubar.SubContent>
                     </Menubar.Sub>
                     <Menubar.Sub>
                         <Menubar.SubTrigger>
-							<Thermometer size="16" class="mr-1" />{$_('menu.temperature_units')}
+                            <Thermometer size="16" class="mr-2" />{i18n._('menu.temperature_units')}
                         </Menubar.SubTrigger>
                         <Menubar.SubContent>
                             <Menubar.RadioGroup bind:value={$temperatureUnits}>
-								<Menubar.RadioItem value="celsius">{$_('menu.celsius')}</Menubar.RadioItem>
-								<Menubar.RadioItem value="fahrenheit">{$_('menu.fahrenheit')}</Menubar.RadioItem>
+                                <Menubar.RadioItem value="celsius"
+                                    >{i18n._('menu.celsius')}</Menubar.RadioItem
+                                >
+                                <Menubar.RadioItem value="fahrenheit"
+                                    >{i18n._('menu.fahrenheit')}</Menubar.RadioItem
+                                >
                             </Menubar.RadioGroup>
                         </Menubar.SubContent>
                     </Menubar.Sub>
                     <Menubar.Separator />
                     <Menubar.Sub>
                         <Menubar.SubTrigger>
-							<Languages size="16" class="mr-1" />
-							{$_('menu.language')}
+                            <Languages size="16" class="mr-2" />
+                            {i18n._('menu.language')}
                         </Menubar.SubTrigger>
                         <Menubar.SubContent>
-							<Menubar.RadioGroup bind:value={$locale}>
+                            <Menubar.RadioGroup value={i18n.lang}>
                                 {#each Object.entries(languages) as [lang, label]}
                                     <a href={getURLForLanguage(lang, '/app')}>
                                         <Menubar.RadioItem value={lang}>{label}</Menubar.RadioItem>
@@ -414,41 +458,49 @@
                     </Menubar.Sub>
                     <Menubar.Sub>
                         <Menubar.SubTrigger>
-							{#if selectedMode === 'light'}
-								<Sun size="16" class="mr-1" />
+                            {#if mode.current === 'light' || !mode.current}
+                                <Sun size="16" class="mr-2" />
                             {:else}
-								<Moon size="16" class="mr-1" />
+                                <Moon size="16" class="mr-2" />
                             {/if}
-							{$_('menu.mode')}
+                            {i18n._('menu.mode')}
                         </Menubar.SubTrigger>
                         <Menubar.SubContent>
                             <Menubar.RadioGroup
-								bind:value={selectedMode}
+                                value={mode.current ?? 'light'}
                                 onValueChange={(value) => {
-									setMode(value);
+                                    setMode(value as 'light' | 'dark');
                                 }}
                             >
-								<Menubar.RadioItem value="light">{$_('menu.light')}</Menubar.RadioItem>
-								<Menubar.RadioItem value="dark">{$_('menu.dark')}</Menubar.RadioItem>
+                                <Menubar.RadioItem value="light"
+                                    >{i18n._('menu.light')}</Menubar.RadioItem
+                                >
+                                <Menubar.RadioItem value="dark"
+                                    >{i18n._('menu.dark')}</Menubar.RadioItem
+                                >
                             </Menubar.RadioGroup>
                         </Menubar.SubContent>
                     </Menubar.Sub>
                     <Menubar.Separator />
                     <Menubar.Sub>
                         <Menubar.SubTrigger>
-							<PersonStanding size="16" class="mr-1" />
-							{$_('menu.street_view_source')}
+                            <PersonStanding size="16" class="mr-2" />
+                            {i18n._('menu.street_view_source')}
                         </Menubar.SubTrigger>
                         <Menubar.SubContent>
                             <Menubar.RadioGroup bind:value={$streetViewSource}>
-								<Menubar.RadioItem value="mapillary">{$_('menu.mapillary')}</Menubar.RadioItem>
-								<Menubar.RadioItem value="google">{$_('menu.google')}</Menubar.RadioItem>
+                                <Menubar.RadioItem value="mapillary"
+                                    >{i18n._('menu.mapillary')}</Menubar.RadioItem
+                                >
+                                <Menubar.RadioItem value="google"
+                                    >{i18n._('menu.google')}</Menubar.RadioItem
+                                >
                             </Menubar.RadioGroup>
                         </Menubar.SubContent>
                     </Menubar.Sub>
-					<Menubar.Item on:click={() => (layerSettingsOpen = true)}>
-						<Layers size="16" class="mr-1" />
-						{$_('menu.layers')}
+                    <Menubar.Item onclick={() => (layerSettingsOpen = true)}>
+                        <Layers size="16" />
+                        {i18n._('menu.layers')}
                     </Menubar.Item>
                 </Menubar.Content>
             </Menubar.Menu>
@@ -459,11 +511,11 @@
                 href="./help"
                 target="_blank"
                 class="cursor-default h-fit rounded-sm px-3 py-0.5"
-				aria-label={$_('menu.help')}
+                aria-label={i18n._('menu.help')}
             >
                 <BookOpenText size="18" class="md:hidden" />
                 <span class="hidden md:block">
-					{$_('menu.help')}
+                    {i18n._('menu.help')}
                 </span>
             </Button>
             <Button
@@ -471,12 +523,12 @@
                 href="https://ko-fi.com/gpxstudio"
                 target="_blank"
                 class="cursor-default h-fit rounded-sm font-bold text-support hover:text-support px-3 py-0.5"
-				aria-label={$_('menu.donate')}
+                aria-label={i18n._('menu.donate')}
             >
                 <HeartHandshake size="18" class="md:hidden" />
                 <span class="hidden md:flex flex-row items-center">
-					{$_('menu.donate')}
-					<Heart size="16" class="ml-1" fill="rgb(var(--support))" />
+                    {i18n._('menu.donate')}
+                    <Heart size="16" class="ml-1" fill="var(--support)" />
                 </span>
             </Button>
         </div>
@@ -489,7 +541,9 @@
 <svelte:window
     on:keydown={(e) => {
         let targetInput =
-			e.target.tagName === 'INPUT' ||
+            e &&
+            e.target &&
+            (e.target.tagName === 'INPUT' ||
                 e.target.tagName === 'TEXTAREA' ||
                 e.target.tagName === 'SELECT' ||
                 e.target.role === 'combobox' ||
@@ -497,7 +551,7 @@
                 e.target.role === 'menu' ||
                 e.target.role === 'menuitem' ||
                 e.target.role === 'menuitemradio' ||
-			e.target.role === 'menuitemcheckbox';
+                e.target.role === 'menuitemcheckbox');
 
         if (e.key === '+' && (e.metaKey || e.ctrlKey)) {
             createFile();
@@ -506,16 +560,16 @@
             triggerFileInput();
             e.preventDefault();
         } else if (e.key === 'd' && (e.metaKey || e.ctrlKey)) {
-			dbUtils.duplicateSelection();
+            fileActions.duplicateSelection();
             e.preventDefault();
         } else if (e.key === 'c' && (e.metaKey || e.ctrlKey)) {
             if (!targetInput) {
-				copySelection();
+                selection.copySelection();
                 e.preventDefault();
             }
         } else if (e.key === 'x' && (e.metaKey || e.ctrlKey)) {
             if (!targetInput) {
-				cutSelection();
+                selection.cutSelection();
                 e.preventDefault();
             }
         } else if (e.key === 'v' && (e.metaKey || e.ctrlKey)) {
@@ -525,32 +579,32 @@
             }
         } else if ((e.key === 's' || e.key == 'S') && (e.metaKey || e.ctrlKey)) {
             if (e.shiftKey) {
-				if ($fileObservers.size > 0) {
-					$exportState = ExportState.ALL;
+                if (fileStateCollection.size > 0) {
+                    exportState.current = ExportState.ALL;
                 }
             } else if ($selection.size > 0) {
-				$exportState = ExportState.SELECTION;
+                exportState.current = ExportState.SELECTION;
             }
             e.preventDefault();
         } else if ((e.key === 'z' || e.key == 'Z') && (e.metaKey || e.ctrlKey)) {
             if (e.shiftKey) {
-				dbUtils.redo();
+                fileActionManager.redo();
             } else {
-				dbUtils.undo();
+                fileActionManager.undo();
             }
             e.preventDefault();
         } else if ((e.key === 'Backspace' || e.key === 'Delete') && (e.metaKey || e.ctrlKey)) {
             if (!targetInput) {
                 if (e.shiftKey) {
-					dbUtils.deleteAllFiles();
+                    fileActions.deleteAllFiles();
                 } else {
-					dbUtils.deleteSelection();
+                    fileActions.deleteSelection();
                 }
                 e.preventDefault();
             }
         } else if (e.key === 'a' && (e.metaKey || e.ctrlKey)) {
             if (!targetInput) {
-				selectAll();
+                selection.selectAll();
                 e.preventDefault();
             }
         } else if (e.key === 'i' && (e.metaKey || e.ctrlKey)) {
@@ -560,25 +614,25 @@
                     .getSelected()
                     .every((item) => item instanceof ListFileItem || item instanceof ListTrackItem)
             ) {
-				$editMetadata = true;
+                editMetadata.current = true;
             }
             e.preventDefault();
         } else if (e.key === 'p' && (e.metaKey || e.ctrlKey)) {
             $elevationProfile = !$elevationProfile;
             e.preventDefault();
         } else if (e.key === 'l' && (e.metaKey || e.ctrlKey)) {
-			$verticalFileView = !$verticalFileView;
+            $treeFileView = !$treeFileView;
             e.preventDefault();
         } else if (e.key === 'h' && (e.metaKey || e.ctrlKey)) {
             if ($allHidden) {
-				dbUtils.setHiddenToSelection(false);
+                fileActions.setHiddenToSelection(false);
             } else {
-				dbUtils.setHiddenToSelection(true);
+                fileActions.setHiddenToSelection(true);
             }
             e.preventDefault();
         } else if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) {
             if ($selection.size > 0) {
-				centerMapOnSelection();
+                boundsManager.centerMapOnSelection();
             }
         } else if (e.key === 'F1') {
             switchBasemaps();
@@ -602,7 +656,7 @@
             e.key === 'ArrowUp'
         ) {
             if (!targetInput) {
-				updateSelectionFromKey(e.key === 'ArrowRight' || e.key === 'ArrowDown', e.shiftKey);
+                // updateSelectionFromKey(e.key === 'ArrowRight' || e.key === 'ArrowDown', e.shiftKey);
                 e.preventDefault();
             }
         }
@@ -617,6 +671,8 @@
 />
 
 <style lang="postcss">
+    @reference "../../app.css";
+
     div :global(button) {
         @apply hover:bg-accent;
         @apply px-3;

website/src/lib/components/ModeSwitch.svelte

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

website/src/lib/components/Nav.svelte

@@ -3,28 +3,28 @@
     import { Button } from '$lib/components/ui/button';
     import AlgoliaDocSearch from '$lib/components/AlgoliaDocSearch.svelte';
     import ModeSwitch from '$lib/components/ModeSwitch.svelte';
-	import { BookOpenText, Home, Map } from 'lucide-svelte';
-	import { _, locale } from 'svelte-i18n';
+    import { BookOpenText, Home, Map } from '@lucide/svelte';
+    import { i18n } from '$lib/i18n.svelte';
     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">
-		<a href={getURLForLanguage($locale, '/')} class="shrink-0 translate-y-0.5">
+        <a href={getURLForLanguage(i18n.lang, '/')} class="shrink-0 translate-y-0.5">
             <Logo class="h-8 sm:hidden" iconOnly={true} width="26" />
             <Logo class="h-8 hidden sm:block" width="153" />
         </a>
-		<Button variant="link" class="text-base px-0" href={getURLForLanguage($locale, '/')}>
-			<Home size="18" class="mr-1.5" />
-			{$_('homepage.home')}
+        <Button variant="link" class="text-base px-0" href={getURLForLanguage(i18n.lang, '/')}>
+            <Home size="18" />
+            {i18n._('homepage.home')}
         </Button>
-		<Button variant="link" class="text-base px-0" href={getURLForLanguage($locale, '/app')}>
-			<Map size="18" class="mr-1.5" />
-			{$_('homepage.app')}
+        <Button variant="link" class="text-base px-0" href={getURLForLanguage(i18n.lang, '/app')}>
+            <Map size="18" />
+            {i18n._('homepage.app')}
         </Button>
-		<Button variant="link" class="text-base px-0" href={getURLForLanguage($locale, '/help')}>
-			<BookOpenText size="18" class="mr-1.5" />
-			{$_('menu.help')}
+        <Button variant="link" class="text-base px-0" href={getURLForLanguage(i18n.lang, '/help')}>
+            <BookOpenText size="18" />
+            {i18n._('menu.help')}
         </Button>
         <AlgoliaDocSearch class="ml-auto" />
         <ModeSwitch class="hidden xs:block" />

website/src/lib/components/Resizer.svelte

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

website/src/lib/components/Shortcut.svelte

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

website/src/lib/components/Tooltip.svelte

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

website/src/lib/components/WithUnits.svelte

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

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

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

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

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

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

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

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

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

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

@@ -1,14 +1,16 @@
 <script lang="ts">
-	import { _ } from 'svelte-i18n';
+    import type { Component } from 'svelte';
 
-	export let module;
+    let { module: Module }: { module: Component } = $props();
 </script>
 
 <div class="markdown flex flex-col gap-3">
-	<svelte:component this={module} />
+    <Module />
 </div>
 
 <style lang="postcss">
+    @reference "../../../app.css";
+
     :global(.markdown) {
         @apply text-muted-foreground;
     }
@@ -43,6 +45,7 @@
     :global(.markdown > a) {
         @apply text-link;
         @apply hover:underline;
+        @apply contents;
     }
 
     :global(.markdown p > a) {

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

@@ -1,6 +1,11 @@
 <script lang="ts">
-	export let src: 'getting-started/interface' | 'tools/routing' | 'tools/split';
-	export let alt: string;
+    let {
+        src,
+        alt,
+    }: {
+        src: 'getting-started/interface' | 'tools/routing' | 'tools/split';
+        alt: string;
+    } = $props();
 </script>
 
 <div class="flex flex-col items-center py-6 w-full">
@@ -18,7 +23,11 @@
                 class="w-full max-w-3xl"
             />
         {: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
+                src="/src/lib/assets/img/docs/tools/split.png"
+                {alt}
+                class="w-full max-w-3xl"
+            />
         {/if}
     </div>
     <p class="text-center text-sm text-muted-foreground mt-2">{alt}</p>

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

@@ -1,5 +1,7 @@
 <script lang="ts">
-	export let type: 'note' | 'warning' = 'note';
+    import type { Snippet } from 'svelte';
+
+    let { type = 'note', children }: { type?: 'note' | 'warning'; children: Snippet } = $props();
 </script>
 
 <div
@@ -7,10 +9,12 @@
         ? 'border-link'
         : 'border-destructive'} p-2 text-sm rounded-md"
 >
-	<slot />
+    {@render children()}
 </div>
 
 <style lang="postcss">
+    @reference "../../../app.css";
+
     div :global(a) {
         @apply text-link;
         @apply hover:underline;

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

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

@@ -1,34 +1,40 @@
 <script lang="ts">
-	import GPXLayers from '$lib/components/gpx-layer/GPXLayers.svelte';
-	import ElevationProfile from '$lib/components/ElevationProfile.svelte';
-	import FileList from '$lib/components/file-list/FileList.svelte';
-	import GPXStatistics from '$lib/components/GPXStatistics.svelte';
-	import Map from '$lib/components/Map.svelte';
-	import LayerControl from '$lib/components/layer-control/LayerControl.svelte';
+    // import GPXLayers from '$lib/components/map/gpx-layer/GPXLayers.svelte';
+    // import ElevationProfile from '$lib/components/ElevationProfile.svelte';
+    // import FileList from '$lib/components/file-list/FileList.svelte';
+    // import GPXStatistics from '$lib/components/GPXStatistics.svelte';
+    import Map from '$lib/components/map/Map.svelte';
+    import { map } from '$lib/components/map/map';
+    // import LayerControl from '$lib/components/map/layer-control/LayerControl.svelte';
     import OpenIn from '$lib/components/embedding/OpenIn.svelte';
     import {
         gpxStatistics,
         slicedGPXStatistics,
         embedding,
         loadFile,
-		map,
-		updateGPXData
+        updateGPXData,
     } from '$lib/stores';
-	import { onDestroy, onMount } from 'svelte';
-	import { fileObservers, settings, GPXStatisticsTree } from '$lib/db';
+    import { onDestroy, onMount, setContext } from 'svelte';
     import { readable } from 'svelte/store';
     import type { GPXFile } from 'gpx';
-	import { selection } from '$lib/components/file-list/Selection';
-	import { ListFileItem } from '$lib/components/file-list/FileList';
+    import { ListFileItem } from '$lib/components/file-list/file-list';
     import {
         allowedEmbeddingBasemaps,
         getFilesFromEmbeddingOptions,
-		type EmbeddingOptions
+        type EmbeddingOptions,
     } from './Embedding';
     import { mode, setMode } from 'mode-watcher';
     import { browser } from '$app/environment';
+    import { settings } from '$lib/logic/settings';
+    import { fileStateCollection } from '$lib/logic/file-state';
 
-	$embedding = true;
+    let {
+        useHash = true,
+        options = $bindable(),
+        hash,
+    }: { useHash?: boolean; options: EmbeddingOptions; hash: string } = $props();
+
+    setContext('embedding', true);
 
     const {
         currentBasemap,
@@ -37,204 +43,193 @@
         temperatureUnits,
         fileOrder,
         distanceMarkers,
-		directionMarkers
+        directionMarkers,
     } = settings;
 
-	export let useHash = true;
-	export let options: EmbeddingOptions;
-	export let hash: string;
-
-	let prevSettings = {
+    let prevSettings: {
+        distanceMarkers: boolean;
+        directionMarkers: boolean;
+        distanceUnits: 'metric' | 'imperial' | 'nautical';
+        velocityUnits: 'speed' | 'pace';
+        temperatureUnits: 'celsius' | 'fahrenheit';
+        theme: 'light' | 'dark' | 'system';
+    } = {
         distanceMarkers: false,
         directionMarkers: false,
         distanceUnits: 'metric',
         velocityUnits: 'speed',
         temperatureUnits: 'celsius',
-		theme: 'system'
+        theme: 'system',
     };
 
     function applyOptions() {
-		fileObservers.update(($fileObservers) => {
-			$fileObservers.clear();
-			return $fileObservers;
-		});
-
-		let downloads: Promise<GPXFile | null>[] = [];
-		getFilesFromEmbeddingOptions(options).forEach((url) => {
-			downloads.push(
-				fetch(url)
-					.then((response) => response.blob())
-					.then((blob) => new File([blob], url.split('/').pop() ?? url))
-					.then(loadFile)
-			);
-		});
-
-		Promise.all(downloads).then((files) => {
-			let ids: string[] = [];
-			let bounds = {
-				southWest: {
-					lat: 90,
-					lon: 180
-				},
-				northEast: {
-					lat: -90,
-					lon: -180
-				}
-			};
-
-			fileObservers.update(($fileObservers) => {
-				files.forEach((file, index) => {
-					if (file === null) {
-						return;
-					}
-
-					let id = `gpx-${index}-embed`;
-					file._data.id = id;
-					let statistics = new GPXStatisticsTree(file);
-
-					$fileObservers.set(
-						id,
-						readable({
-							file,
-							statistics
-						})
-					);
-
-					ids.push(id);
-					let fileBounds = statistics.getStatisticsFor(new ListFileItem(id)).global.bounds;
-
-					bounds.southWest.lat = Math.min(bounds.southWest.lat, fileBounds.southWest.lat);
-					bounds.southWest.lon = Math.min(bounds.southWest.lon, fileBounds.southWest.lon);
-					bounds.northEast.lat = Math.max(bounds.northEast.lat, fileBounds.northEast.lat);
-					bounds.northEast.lon = Math.max(bounds.northEast.lon, fileBounds.northEast.lon);
-				});
-
-				return $fileObservers;
-			});
-
-			$fileOrder = [...$fileOrder.filter((id) => !id.includes('embed')), ...ids];
-
-			selection.update(($selection) => {
-				$selection.clear();
-				ids.forEach((id) => {
-					$selection.toggle(new ListFileItem(id));
-				});
-				return $selection;
-			});
-
-			if (hash.length === 0) {
-				map.subscribe(($map) => {
-					if ($map) {
-						$map.fitBounds(
-							[
-								bounds.southWest.lon,
-								bounds.southWest.lat,
-								bounds.northEast.lon,
-								bounds.northEast.lat
-							],
-							{
-								padding: 80,
-								linear: true,
-								easing: () => 1
-							}
-						);
-					}
-				});
-			}
-		});
-
-		if (options.basemap !== $currentBasemap && allowedEmbeddingBasemaps.includes(options.basemap)) {
-			$currentBasemap = options.basemap;
-		}
-
-		if (options.distanceMarkers !== $distanceMarkers) {
-			$distanceMarkers = options.distanceMarkers;
-		}
-
-		if (options.directionMarkers !== $directionMarkers) {
-			$directionMarkers = options.directionMarkers;
-		}
-
-		if (options.distanceUnits !== $distanceUnits) {
-			$distanceUnits = options.distanceUnits;
-		}
-
-		if (options.velocityUnits !== $velocityUnits) {
-			$velocityUnits = options.velocityUnits;
-		}
-
-		if (options.temperatureUnits !== $temperatureUnits) {
-			$temperatureUnits = options.temperatureUnits;
-		}
-
-		if (options.theme !== $mode) {
-			setMode(options.theme);
-		}
+        // fileObservers.update(($fileObservers) => {
+        //     $fileObservers.clear();
+        //     return $fileObservers;
+        // });
+        // let downloads: Promise<GPXFile | null>[] = [];
+        // getFilesFromEmbeddingOptions(options).forEach((url) => {
+        //     downloads.push(
+        //         fetch(url)
+        //             .then((response) => response.blob())
+        //             .then((blob) => new File([blob], url.split('/').pop() ?? url))
+        //             .then(loadFile)
+        //     );
+        // });
+        // Promise.all(downloads).then((files) => {
+        //     let ids: string[] = [];
+        //     let bounds = {
+        //         southWest: {
+        //             lat: 90,
+        //             lon: 180,
+        //         },
+        //         northEast: {
+        //             lat: -90,
+        //             lon: -180,
+        //         },
+        //     };
+        //     fileObservers.update(($fileObservers) => {
+        //         files.forEach((file, index) => {
+        //             if (file === null) {
+        //                 return;
+        //             }
+        //             let id = `gpx-${index}-embed`;
+        //             file._data.id = id;
+        //             let statistics = new GPXStatisticsTree(file);
+        //             $fileObservers.set(
+        //                 id,
+        //                 readable({
+        //                     file,
+        //                     statistics,
+        //                 })
+        //             );
+        //             ids.push(id);
+        //             let fileBounds = statistics.getStatisticsFor(new ListFileItem(id)).global
+        //                 .bounds;
+        //             bounds.southWest.lat = Math.min(bounds.southWest.lat, fileBounds.southWest.lat);
+        //             bounds.southWest.lon = Math.min(bounds.southWest.lon, fileBounds.southWest.lon);
+        //             bounds.northEast.lat = Math.max(bounds.northEast.lat, fileBounds.northEast.lat);
+        //             bounds.northEast.lon = Math.max(bounds.northEast.lon, fileBounds.northEast.lon);
+        //         });
+        //         return $fileObservers;
+        //     });
+        //     $fileOrder = [...$fileOrder.filter((id) => !id.includes('embed')), ...ids];
+        //     selection.update(($selection) => {
+        //         $selection.clear();
+        //         ids.forEach((id) => {
+        //             $selection.toggle(new ListFileItem(id));
+        //         });
+        //         return $selection;
+        //     });
+        //     if (hash.length === 0) {
+        //         map.subscribe(($map) => {
+        //             if ($map) {
+        //                 $map.fitBounds(
+        //                     [
+        //                         bounds.southWest.lon,
+        //                         bounds.southWest.lat,
+        //                         bounds.northEast.lon,
+        //                         bounds.northEast.lat,
+        //                     ],
+        //                     {
+        //                         padding: 80,
+        //                         linear: true,
+        //                         easing: () => 1,
+        //                     }
+        //                 );
+        //             }
+        //         });
+        //     }
+        // });
+        // if (
+        //     options.basemap !== $currentBasemap &&
+        //     allowedEmbeddingBasemaps.includes(options.basemap)
+        // ) {
+        //     $currentBasemap = options.basemap;
+        // }
+        // if (options.distanceMarkers !== $distanceMarkers) {
+        //     $distanceMarkers = options.distanceMarkers;
+        // }
+        // if (options.directionMarkers !== $directionMarkers) {
+        //     $directionMarkers = options.directionMarkers;
+        // }
+        // if (options.distanceUnits !== $distanceUnits) {
+        //     $distanceUnits = options.distanceUnits;
+        // }
+        // if (options.velocityUnits !== $velocityUnits) {
+        //     $velocityUnits = options.velocityUnits;
+        // }
+        // if (options.temperatureUnits !== $temperatureUnits) {
+        //     $temperatureUnits = options.temperatureUnits;
+        // }
+        // if (options.theme !== $mode) {
+        //     setMode(options.theme);
+        // }
     }
 
     onMount(() => {
-		prevSettings.distanceMarkers = $distanceMarkers;
-		prevSettings.directionMarkers = $directionMarkers;
-		prevSettings.distanceUnits = $distanceUnits;
-		prevSettings.velocityUnits = $velocityUnits;
-		prevSettings.temperatureUnits = $temperatureUnits;
-		prevSettings.theme = $mode ?? 'system';
+        prevSettings.distanceMarkers = distanceMarkers.value;
+        prevSettings.directionMarkers = directionMarkers.value;
+        prevSettings.distanceUnits = distanceUnits.value;
+        prevSettings.velocityUnits = velocityUnits.value;
+        prevSettings.temperatureUnits = temperatureUnits.value;
+        prevSettings.theme = mode.current ?? 'system';
     });
 
-	$: if (browser && options) {
-		applyOptions();
-	}
+    // $: if (browser && options) {
+    //     applyOptions();
+    // }
 
-	$: if ($fileOrder) {
-		updateGPXData();
-	}
+    // $: if ($fileOrder) {
+    //     updateGPXData();
+    // }
 
     onDestroy(() => {
-		if ($distanceMarkers !== prevSettings.distanceMarkers) {
-			$distanceMarkers = prevSettings.distanceMarkers;
+        if (distanceMarkers.value !== prevSettings.distanceMarkers) {
+            distanceMarkers.value = prevSettings.distanceMarkers;
         }
 
-		if ($directionMarkers !== prevSettings.directionMarkers) {
-			$directionMarkers = prevSettings.directionMarkers;
+        if (directionMarkers.value !== prevSettings.directionMarkers) {
+            directionMarkers.value = prevSettings.directionMarkers;
         }
 
-		if ($distanceUnits !== prevSettings.distanceUnits) {
-			$distanceUnits = prevSettings.distanceUnits;
+        if (distanceUnits.value !== prevSettings.distanceUnits) {
+            distanceUnits.value = prevSettings.distanceUnits;
         }
 
-		if ($velocityUnits !== prevSettings.velocityUnits) {
-			$velocityUnits = prevSettings.velocityUnits;
+        if (velocityUnits.value !== prevSettings.velocityUnits) {
+            velocityUnits.value = prevSettings.velocityUnits;
         }
 
-		if ($temperatureUnits !== prevSettings.temperatureUnits) {
-			$temperatureUnits = prevSettings.temperatureUnits;
+        if (temperatureUnits.value !== prevSettings.temperatureUnits) {
+            temperatureUnits.value = prevSettings.temperatureUnits;
         }
 
-		if ($mode !== prevSettings.theme) {
+        if (mode.current !== prevSettings.theme) {
             setMode(prevSettings.theme);
         }
 
-		$selection.clear();
-		$fileObservers.clear();
-		$fileOrder = $fileOrder.filter((id) => !id.includes('embed'));
+        // $selection.clear();
+        // $fileObservers.clear();
+        fileOrder.value = fileOrder.value.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">
         <Map
-			class="h-full {$fileObservers.size > 1 ? 'horizontal' : ''}"
+            class="h-full {fileStateCollection.files.size > 1 ? 'horizontal' : ''}"
             accessToken={options.token}
             geocoder={false}
             geolocate={false}
             hash={useHash}
         />
-		<OpenIn bind:files={options.files} bind:ids={options.ids} />
-		<LayerControl />
-		<GPXLayers />
-		{#if $fileObservers.size > 1}
+        <OpenIn files={options.files} ids={options.ids} />
+        <!-- <LayerControl /> -->
+        <!-- <GPXLayers /> -->
+        {#if fileStateCollection.files.size > 1}
             <div class="h-10 -translate-y-10 w-full pointer-events-none absolute z-30">
-				<FileList orientation="horizontal" />
+                <!-- <FileList orientation="horizontal" /> -->
             </div>
         {/if}
     </div>
@@ -242,14 +237,14 @@
         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` : ''}
     >
-		<GPXStatistics
+        <!-- <GPXStatistics
             {gpxStatistics}
             {slicedGPXStatistics}
             panelSize={options.elevation.height}
             orientation={options.elevation.show ? 'vertical' : 'horizontal'}
-		/>
+        /> -->
         {#if options.elevation.show}
-			<ElevationProfile
+            <!-- <ElevationProfile
                 {gpxStatistics}
                 {slicedGPXStatistics}
                 additionalDatasets={[
@@ -257,11 +252,11 @@
                     options.elevation.hr ? 'hr' : null,
                     options.elevation.cad ? 'cad' : null,
                     options.elevation.temp ? 'temp' : null,
-					options.elevation.power ? 'power' : null
+                    options.elevation.power ? 'power' : null,
                 ].filter((dataset) => dataset !== null)}
                 elevationFill={options.elevation.fill}
                 showControls={options.elevation.controls}
-			/>
+            /> -->
         {/if}
     </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

@@ -13,13 +13,13 @@
         SquareActivity,
         Coins,
         Milestone,
-		Video
-	} from 'lucide-svelte';
-	import { _ } from 'svelte-i18n';
+        Video,
+    } from '@lucide/svelte';
+    import { i18n } from '$lib/i18n.svelte';
     import {
         allowedEmbeddingBasemaps,
         getCleanedEmbeddingOptions,
-		getDefaultEmbeddingOptions
+        getDefaultEmbeddingOptions,
     } from './Embedding';
     import { PUBLIC_MAPBOX_TOKEN } from '$env/static/public';
     import Embedding from './Embedding.svelte';
@@ -30,7 +30,7 @@
     let options = getDefaultEmbeddingOptions();
     options.token = 'YOUR_MAPBOX_TOKEN';
     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];
@@ -94,19 +94,22 @@
 
 <Card.Root id="embedding-playground">
     <Card.Header>
-		<Card.Title>{$_('embedding.title')}</Card.Title>
+        <Card.Title>{i18n._('embedding.title')}</Card.Title>
     </Card.Header>
     <Card.Content>
         <fieldset class="flex flex-col gap-3">
-			<Label for="token">{$_('embedding.mapbox_token')}</Label>
+            <Label for="token">{i18n._('embedding.mapbox_token')}</Label>
             <Input id="token" type="text" class="h-8" bind:value={options.token} />
-			<Label for="file_urls">{$_('embedding.file_urls')}</Label>
+            <Label for="file_urls">{i18n._('embedding.file_urls')}</Label>
             <Input id="file_urls" type="text" class="h-8" bind:value={files} />
-			<Label for="drive_ids">{$_('embedding.drive_ids')}</Label>
+            <Label for="drive_ids">{i18n._('embedding.drive_ids')}</Label>
             <Input id="drive_ids" type="text" class="h-8" bind:value={driveIds} />
-			<Label for="basemap">{$_('embedding.basemap')}</Label>
+            <Label for="basemap">{i18n._('embedding.basemap')}</Label>
             <Select.Root
-				selected={{ value: options.basemap, label: $_(`layers.label.${options.basemap}`) }}
+                selected={{
+                    value: options.basemap,
+                    label: i18n._(`layers.label.${options.basemap}`),
+                }}
                 onSelectedChange={(selected) => {
                     if (selected?.value) {
                         options.basemap = selected?.value;
@@ -118,31 +121,41 @@
                 </Select.Trigger>
                 <Select.Content class="max-h-60 overflow-y-scroll">
                     {#each allowedEmbeddingBasemaps as basemap}
-						<Select.Item value={basemap}>{$_(`layers.label.${basemap}`)}</Select.Item>
+                        <Select.Item value={basemap}
+                            >{i18n._(`layers.label.${basemap}`)}</Select.Item
+                        >
                     {/each}
                 </Select.Content>
             </Select.Root>
             <div class="flex flex-row items-center gap-2">
-				<Label for="profile">{$_('menu.elevation_profile')}</Label>
+                <Label for="profile">{i18n._('menu.elevation_profile')}</Label>
                 <Checkbox id="profile" bind:checked={options.elevation.show} />
             </div>
             {#if options.elevation.show}
                 <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">
-						{$_('embedding.height')}
-						<Input type="number" bind:value={options.elevation.height} class="h-8 w-20" />
+                        {i18n._('embedding.height')}
+                        <Input
+                            type="number"
+                            bind:value={options.elevation.height}
+                            class="h-8 w-20"
+                        />
                     </Label>
                     <div class="flex flex-row items-center gap-2">
                         <span class="shrink-0">
-							{$_('embedding.fill_by')}
+                            {i18n._('embedding.fill_by')}
                         </span>
                         <Select.Root
-							selected={{ value: 'none', label: $_('embedding.none') }}
+                            selected={{ value: 'none', label: i18n._('embedding.none') }}
                             onSelectedChange={(selected) => {
                                 let value = selected?.value;
                                 if (value === 'none') {
                                     options.elevation.fill = undefined;
-								} else if (value === 'slope' || value === 'surface' || value === 'highway') {
+                                } else if (
+                                    value === 'slope' ||
+                                    value === 'surface' ||
+                                    value === 'highway'
+                                ) {
                                     options.elevation.fill = value;
                                 }
                             }}
@@ -151,50 +164,55 @@
                                 <Select.Value />
                             </Select.Trigger>
                             <Select.Content>
-								<Select.Item value="slope">{$_('quantities.slope')}</Select.Item>
-								<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.Item value="slope">{i18n._('quantities.slope')}</Select.Item
+                                >
+                                <Select.Item value="surface"
+                                    >{i18n._('quantities.surface')}</Select.Item
+                                >
+                                <Select.Item value="highway"
+                                    >{i18n._('quantities.highway')}</Select.Item
+                                >
+                                <Select.Item value="none">{i18n._('embedding.none')}</Select.Item>
                             </Select.Content>
                         </Select.Root>
                     </div>
                     <div class="flex flex-row items-center gap-2">
                         <Checkbox id="controls" bind:checked={options.elevation.controls} />
-						<Label for="controls">{$_('embedding.show_controls')}</Label>
+                        <Label for="controls">{i18n._('embedding.show_controls')}</Label>
                     </div>
                     <div class="flex flex-row items-center gap-2">
                         <Checkbox id="show-speed" bind:checked={options.elevation.speed} />
                         <Label for="show-speed" class="flex flex-row items-center gap-1">
                             <Zap size="16" />
-							{$_('quantities.speed')}
+                            {i18n._('quantities.speed')}
                         </Label>
                     </div>
                     <div class="flex flex-row items-center gap-2">
                         <Checkbox id="show-hr" bind:checked={options.elevation.hr} />
                         <Label for="show-hr" class="flex flex-row items-center gap-1">
                             <HeartPulse size="16" />
-							{$_('quantities.heartrate')}
+                            {i18n._('quantities.heartrate')}
                         </Label>
                     </div>
                     <div class="flex flex-row items-center gap-2">
                         <Checkbox id="show-cad" bind:checked={options.elevation.cad} />
                         <Label for="show-cad" class="flex flex-row items-center gap-1">
                             <Orbit size="16" />
-							{$_('quantities.cadence')}
+                            {i18n._('quantities.cadence')}
                         </Label>
                     </div>
                     <div class="flex flex-row items-center gap-2">
                         <Checkbox id="show-temp" bind:checked={options.elevation.temp} />
                         <Label for="show-temp" class="flex flex-row items-center gap-1">
                             <Thermometer size="16" />
-							{$_('quantities.temperature')}
+                            {i18n._('quantities.temperature')}
                         </Label>
                     </div>
                     <div class="flex flex-row items-center gap-2">
                         <Checkbox id="show-power" bind:checked={options.elevation.power} />
                         <Label for="show-power" class="flex flex-row items-center gap-1">
                             <SquareActivity size="16" />
-							{$_('quantities.power')}
+                            {i18n._('quantities.power')}
                         </Label>
                     </div>
                 </div>
@@ -203,75 +221,75 @@
                 <Checkbox id="distance-markers" bind:checked={options.distanceMarkers} />
                 <Label for="distance-markers" class="flex flex-row items-center gap-1">
                     <Coins size="16" />
-					{$_('menu.distance_markers')}
+                    {i18n._('menu.distance_markers')}
                 </Label>
             </div>
             <div class="flex flex-row items-center gap-2">
                 <Checkbox id="direction-markers" bind:checked={options.directionMarkers} />
                 <Label for="direction-markers" class="flex flex-row items-center gap-1">
                     <Milestone size="16" />
-					{$_('menu.direction_markers')}
+                    {i18n._('menu.direction_markers')}
                 </Label>
             </div>
             <div class="flex flex-row flex-wrap justify-between gap-3">
                 <Label class="flex flex-col items-start gap-2">
-					{$_('menu.distance_units')}
+                    {i18n._('menu.distance_units')}
                     <RadioGroup.Root bind:value={options.distanceUnits}>
                         <div class="flex items-center space-x-2">
                             <RadioGroup.Item value="metric" id="metric" />
-							<Label for="metric">{$_('menu.metric')}</Label>
+                            <Label for="metric">{i18n._('menu.metric')}</Label>
                         </div>
                         <div class="flex items-center space-x-2">
                             <RadioGroup.Item value="imperial" id="imperial" />
-							<Label for="imperial">{$_('menu.imperial')}</Label>
+                            <Label for="imperial">{i18n._('menu.imperial')}</Label>
                         </div>
                         <div class="flex items-center space-x-2">
                             <RadioGroup.Item value="nautical" id="nautical" />
-							<Label for="nautical">{$_('menu.nautical')}</Label>
+                            <Label for="nautical">{i18n._('menu.nautical')}</Label>
                         </div>
                     </RadioGroup.Root>
                 </Label>
                 <Label class="flex flex-col items-start gap-2">
-					{$_('menu.velocity_units')}
+                    {i18n._('menu.velocity_units')}
                     <RadioGroup.Root bind:value={options.velocityUnits}>
                         <div class="flex items-center space-x-2">
                             <RadioGroup.Item value="speed" id="speed" />
-							<Label for="speed">{$_('quantities.speed')}</Label>
+                            <Label for="speed">{i18n._('quantities.speed')}</Label>
                         </div>
                         <div class="flex items-center space-x-2">
                             <RadioGroup.Item value="pace" id="pace" />
-							<Label for="pace">{$_('quantities.pace')}</Label>
+                            <Label for="pace">{i18n._('quantities.pace')}</Label>
                         </div>
                     </RadioGroup.Root>
                 </Label>
                 <Label class="flex flex-col items-start gap-2">
-					{$_('menu.temperature_units')}
+                    {i18n._('menu.temperature_units')}
                     <RadioGroup.Root bind:value={options.temperatureUnits}>
                         <div class="flex items-center space-x-2">
                             <RadioGroup.Item value="celsius" id="celsius" />
-							<Label for="celsius">{$_('menu.celsius')}</Label>
+                            <Label for="celsius">{i18n._('menu.celsius')}</Label>
                         </div>
                         <div class="flex items-center space-x-2">
                             <RadioGroup.Item value="fahrenheit" id="fahrenheit" />
-							<Label for="fahrenheit">{$_('menu.fahrenheit')}</Label>
+                            <Label for="fahrenheit">{i18n._('menu.fahrenheit')}</Label>
                         </div>
                     </RadioGroup.Root>
                 </Label>
             </div>
             <Label class="flex flex-col items-start gap-2">
-				{$_('menu.mode')}
+                {i18n._('menu.mode')}
                 <RadioGroup.Root bind:value={options.theme} class="flex flex-row">
                     <div class="flex items-center space-x-2">
                         <RadioGroup.Item value="system" id="system" />
-						<Label for="system">{$_('menu.system')}</Label>
+                        <Label for="system">{i18n._('menu.system')}</Label>
                     </div>
                     <div class="flex items-center space-x-2">
                         <RadioGroup.Item value="light" id="light" />
-						<Label for="light">{$_('menu.light')}</Label>
+                        <Label for="light">{i18n._('menu.light')}</Label>
                     </div>
                     <div class="flex items-center space-x-2">
                         <RadioGroup.Item value="dark" id="dark" />
-						<Label for="dark">{$_('menu.dark')}</Label>
+                        <Label for="dark">{i18n._('menu.dark')}</Label>
                     </div>
                 </RadioGroup.Root>
             </Label>
@@ -280,45 +298,46 @@
                     <Checkbox id="manual-camera" bind:checked={manualCamera} />
                     <Label for="manual-camera" class="flex flex-row items-center gap-1">
                         <Video size="16" />
-						{$_('embedding.manual_camera')}
+                        {i18n._('embedding.manual_camera')}
                     </Label>
                 </div>
                 <p class="text-sm text-muted-foreground">
-					{$_('embedding.manual_camera_description')}
+                    {i18n._('embedding.manual_camera_description')}
                 </p>
                 <div class="flex flex-row flex-wrap items-center gap-6">
                     <Label class="flex flex-col gap-1">
-						<span>{$_('embedding.latitude')}</span>
+                        <span>{i18n._('embedding.latitude')}</span>
                         <span>{lat}</span>
                     </Label>
                     <Label class="flex flex-col gap-1">
-						<span>{$_('embedding.longitude')}</span>
+                        <span>{i18n._('embedding.longitude')}</span>
                         <span>{lon}</span>
                     </Label>
                     <Label class="flex flex-col gap-1">
-						<span>{$_('embedding.zoom')}</span>
+                        <span>{i18n._('embedding.zoom')}</span>
                         <span>{zoom}</span>
                     </Label>
                     <Label class="flex flex-col gap-1">
-						<span>{$_('embedding.bearing')}</span>
+                        <span>{i18n._('embedding.bearing')}</span>
                         <span>{bearing}</span>
                     </Label>
                     <Label class="flex flex-col gap-1">
-						<span>{$_('embedding.pitch')}</span>
+                        <span>{i18n._('embedding.pitch')}</span>
                         <span>{pitch}</span>
                     </Label>
                 </div>
             </div>
             <Label>
-				{$_('embedding.preview')}
+                {i18n._('embedding.preview')}
             </Label>
             <div class="relative h-[600px]">
                 <Embedding bind:options={iframeOptions} bind:hash useHash={false} />
             </div>
             <Label>
-				{$_('embedding.code')}
+                {i18n._('embedding.code')}
             </Label>
-			<pre class="bg-primary text-primary-foreground p-3 rounded-md whitespace-normal break-all">
+            <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>

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

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

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

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

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

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

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

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

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

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

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

@@ -6,9 +6,8 @@
 
 <script lang="ts">
     import { GPXFile, Track, Waypoint, type AnyGPXTreeElement, type GPXTreeElement } from 'gpx';
-    import { afterUpdate, getContext, onDestroy, onMount } from 'svelte';
+    import { getContext, onDestroy, onMount } from 'svelte';
     import Sortable from 'sortablejs/Sortable';
-    import { getFileIds, settings, type GPXFileWithStatistics } from '$lib/db';
     import { get, writable, type Readable, type Writable } from 'svelte/store';
     import FileListNodeStore from './FileListNodeStore.svelte';
     import FileListNode from './FileListNode.svelte';
@@ -18,19 +17,25 @@
         ListRootItem,
         ListWaypointsItem,
         allowedMoves,
-        moveItems,
-        type ListItem
-    } from './FileList';
-    import { selection } from './Selection';
+        type ListItem,
+    } from './file-list';
     import { isMac } from '$lib/utils';
-    import { _ } from 'svelte-i18n';
+    import type { GPXFileWithStatistics } from '$lib/logic/statistics-tree';
+    import { settings } from '$lib/logic/settings';
+    import { getFileIds, moveItems } from '$lib/logic/file-actions';
 
-    export let node:
+    let {
+        node,
+        item,
+        waypointRoot = false,
+    }: {
+        node:
             | Map<string, Readable<GPXFileWithStatistics | undefined>>
             | GPXTreeElement<AnyGPXTreeElement>
             | Waypoint;
-    export let item: ListItem;
-    export let waypointRoot: boolean = false;
+        item: ListItem;
+        waypointRoot?: boolean;
+    } = $props();
 
     let container: HTMLElement;
     let elements: { [id: string]: HTMLElement } = {};
@@ -113,7 +118,7 @@
                     Sortable.utils.select(element);
                     element.scrollIntoView({
                         behavior: 'smooth',
-                        block: 'nearest'
+                        block: 'nearest',
                     });
                 } else {
                     Sortable.utils.deselect(element);
@@ -127,35 +132,33 @@
         updateFromSelection();
     }
 
-    const { fileOrder } = settings;
-    function syncFileOrder() {
+    function syncFileOrder(order: string[]) {
         if (!sortable || sortableLevel !== ListLevel.FILE) {
             return;
         }
 
         const currentOrder = sortable.toArray();
-        if (currentOrder.length !== $fileOrder.length) {
-            sortable.sort($fileOrder);
+        if (currentOrder.length !== order.length) {
+            sortable.sort(order);
         } else {
             for (let i = 0; i < currentOrder.length; i++) {
-                if (currentOrder[i] !== $fileOrder[i]) {
-                    sortable.sort($fileOrder);
+                if (currentOrder[i] !== order[i]) {
+                    sortable.sort(order);
                     break;
                 }
             }
         }
     }
 
-    $: if ($fileOrder) {
-        syncFileOrder();
-    }
+    const { fileOrder } = settings;
+    $effect(() => syncFileOrder(fileOrder.value));
 
     function createSortable() {
         sortable = Sortable.create(container, {
             group: {
                 name: sortableLevel,
                 pull: allowedMoves[sortableLevel],
-                put: true
+                put: true,
             },
             direction: orientation,
             forceAutoScrollFallback: true,
@@ -173,12 +176,12 @@
             onSort: (e) => {
                 if (sortableLevel === ListLevel.FILE) {
                     let newFileOrder = sortable.toArray();
-                    if (newFileOrder.length !== get(fileOrder).length) {
-                        fileOrder.set(newFileOrder);
+                    if (newFileOrder.length !== fileOrder.value.length) {
+                        fileOrder.value = newFileOrder;
                     } else {
                         for (let i = 0; i < newFileOrder.length; i++) {
-                            if (newFileOrder[i] !== get(fileOrder)[i]) {
-                                fileOrder.set(newFileOrder);
+                            if (newFileOrder[i] !== fileOrder.value[i]) {
+                                fileOrder.value = newFileOrder;
                                 break;
                             }
                         }
@@ -223,7 +226,7 @@
                         if (toItem instanceof ListRootItem) {
                             let newFileIds = getFileIds(newIndices.length);
                             toItems = newIndices.map((i, index) => {
-                                $fileOrder.splice(i, 0, newFileIds[index]);
+                                fileOrder.value.splice(i, 0, newFileIds[index]);
                                 return item.extend(newFileIds[index]);
                             });
                         } else {
@@ -233,16 +236,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,
         });
     }
 
@@ -345,6 +348,8 @@
 {/if}
 
 <style lang="postcss">
+    @reference "../../../app.css";
+
     .sortable > div {
         @apply rounded-md;
         @apply h-fit;

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

@@ -2,7 +2,6 @@
     import { Button } from '$lib/components/ui/button';
     import * as ContextMenu from '$lib/components/ui/context-menu';
     import Shortcut from '$lib/components/Shortcut.svelte';
-	import { dbUtils, getFile } from '$lib/db';
     import {
         Copy,
         Info,
@@ -18,98 +17,103 @@
         Maximize,
         Scissors,
         FileStack,
-		FileX
-	} from 'lucide-svelte';
+        FileX,
+    } from '@lucide/svelte';
     import {
         ListFileItem,
         ListLevel,
         ListTrackItem,
         ListWaypointItem,
         allowedPastes,
-		type ListItem
-	} from './FileList';
-	import {
-		copied,
-		copySelection,
-		cut,
-		cutSelection,
-		pasteSelection,
-		selectAll,
-		selectItem,
-		selection
-	} from './Selection';
+        type ListItem,
+    } from './file-list';
     import { getContext } from 'svelte';
     import { get } from 'svelte/store';
-	import {
-		allHidden,
-		editMetadata,
-		editStyle,
-		embedding,
-		centerMapOnSelection,
-		gpxLayers,
-		map
-	} from '$lib/stores';
     import { GPXTreeElement, Track, type AnyGPXTreeElement, Waypoint, GPXFile } from 'gpx';
-	import { _ } from 'svelte-i18n';
-	import MetadataDialog from './MetadataDialog.svelte';
-	import StyleDialog from './StyleDialog.svelte';
-	import { waypointPopup } from '$lib/components/gpx-layer/GPXLayerPopup';
+    import { i18n } from '$lib/i18n.svelte';
+    import MetadataDialog from '$lib/components/file-list/metadata/MetadataDialog.svelte';
+    import { editMetadata } from '$lib/components/file-list/metadata/utils.svelte';
+    import StyleDialog from './style/StyleDialog.svelte';
+    import { editStyle } from '$lib/components/file-list/style/utils.svelte';
+    import { waypointPopup } from '$lib/components/map/gpx-layer/GPXLayerPopup';
+    import { getSymbolKey, symbols } from '$lib/assets/symbols';
+    import { selection, copied, cut } from '$lib/logic/selection';
+    import { map } from '$lib/components/map/map';
+    import { fileActions, pasteSelection } from '$lib/logic/file-actions';
+    import { allHidden } from '$lib/logic/hidden';
+    import { boundsManager } from '$lib/logic/bounds';
 
-	export let node: GPXTreeElement<AnyGPXTreeElement> | Waypoint[] | Waypoint;
-	export let item: ListItem;
-	export let label: string | undefined;
+    let {
+        node,
+        item,
+        label,
+    }: {
+        node: GPXTreeElement<AnyGPXTreeElement> | Waypoint[] | Waypoint;
+        item: ListItem;
+        label: string | undefined;
+    } = $props();
 
     let orientation = getContext<'vertical' | 'horizontal'>('orientation');
+    let embedding = getContext<boolean>('embedding');
 
-	$: singleSelection = $selection.size === 1;
-
-	let nodeColors: string[] = [];
-
-	$: if (node && $map) {
-		nodeColors = [];
+    let singleSelection = $derived($selection.size === 1);
 
+    let nodeColors: string[] = []; /* $derived.by(() => {
+        let colors: string[] = [];
+        if (node && map.value) {
             if (node instanceof GPXFile) {
-			let style = node.getStyle();
+                let defaultColor = undefined;
 
                 let layer = gpxLayers.get(item.getFileId());
                 if (layer) {
-				style.color.push(layer.layerColor);
+                    defaultColor = layer.layerColor;
                 }
 
+                let style = node.getStyle(defaultColor);
                 style.color.forEach((c) => {
-				if (!nodeColors.includes(c)) {
-					nodeColors.push(c);
+                    if (!colors.includes(c)) {
+                        colors.push(c);
                     }
                 });
             } else if (node instanceof Track) {
                 let style = node.getStyle();
                 if (style) {
-				if (style.color && !nodeColors.includes(style.color)) {
-					nodeColors.push(style.color);
+                    if (
+                        style['gpx_style:color'] &&
+                        !nodeColors.includes(style['gpx_style:color'])
+                    ) {
+                        nodeColors.push(style['gpx_style:color']);
                     }
                 }
-			if (nodeColors.length === 0) {
+                if (colors.length === 0) {
                     let layer = gpxLayers.get(item.getFileId());
                     if (layer) {
-					nodeColors.push(layer.layerColor);
+                        colors.push(layer.layerColor);
                     }
                 }
             }
         }
+        return colors;
+    });*/
 
-	let openEditMetadata: boolean = false;
-	let openEditStyle: boolean = false;
+    let symbolKey = $derived(node instanceof Waypoint ? getSymbolKey(node.sym) : undefined);
 
-	$: openEditMetadata = $editMetadata && singleSelection && $selection.has(item);
-	$: openEditStyle =
-		$editStyle &&
+    let openEditMetadata: boolean = $derived(
+        editMetadata.current && singleSelection && $selection.has(item)
+    );
+    let openEditStyle: boolean = $derived(
+        editStyle.current &&
             $selection.has(item) &&
-		$selection.getSelected().findIndex((i) => i.getFullId() === item.getFullId()) === 0;
-	$: hidden = item.level === ListLevel.WAYPOINTS ? node._data.hiddenWpt : node._data.hidden;
+            $selection.getSelected().findIndex((i) => i.getFullId() === item.getFullId()) === 0
+    );
+
+    let hidden = $derived(
+        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 -->
+<!-- svelte-ignore a11y_click_events_have_key_events -->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
 <ContextMenu.Root
     onOpenChange={(open) => {
         if (open) {
@@ -144,7 +148,7 @@
                                 `${c} ${Math.floor((100 * i) / nodeColors.length)}% ${Math.floor((100 * (i + 1)) / nodeColors.length)}%`
                         )
                         .join(',')})"
-				/>
+                ></div>
             {/if}
             <span
                 class="w-full text-left truncate py-1 flex flex-row items-center {hidden
@@ -152,8 +156,8 @@
                     : ''} {$cut && $copied?.some((i) => i.getFullId() === item.getFullId())
                     ? 'text-muted-foreground'
                     : ''}"
-				on:contextmenu={(e) => {
-					if ($embedding) {
+                oncontextmenu={(e) => {
+                    if (embedding) {
                         e.preventDefault();
                         e.stopPropagation();
                         return;
@@ -166,19 +170,22 @@
                         $selection = $selection;
                     }
                 }}
-				on:mouseenter={() => {
+                onmouseenter={() => {
                     if (item instanceof ListWaypointItem) {
                         let layer = gpxLayers.get(item.getFileId());
                         let file = getFile(item.getFileId());
                         if (layer && file) {
                             let waypoint = file.wpt[item.getWaypointIndex()];
                             if (waypoint) {
-								waypointPopup?.setItem({ item: waypoint, fileId: item.getFileId() });
+                                waypointPopup?.setItem({
+                                    item: waypoint,
+                                    fileId: item.getFileId(),
+                                });
                             }
                         }
                     }
                 }}
-				on:mouseleave={() => {
+                onmouseleave={() => {
                     if (item instanceof ListWaypointItem) {
                         let layer = gpxLayers.get(item.getFileId());
                         if (layer) {
@@ -190,16 +197,27 @@
                 {#if item.level === ListLevel.SEGMENT}
                     <Waypoints size="16" class="mr-1 shrink-0" />
                 {:else if item.level === ListLevel.WAYPOINT}
+                    {#if symbolKey && symbols[symbolKey].icon}
+                        {@const SymbolIcon = symbols[symbolKey].icon}
+                        <SymbolIcon size="16" class="mr-1 shrink-0" />
+                    {:else}
                         <MapPin size="16" class="mr-1 shrink-0" />
                     {/if}
-				<span class="grow select-none truncate {orientation === 'vertical' ? 'last:mr-2' : ''}">
+                {/if}
+                <span
+                    class="grow select-none truncate {orientation === 'vertical'
+                        ? 'last:mr-2'
+                        : ''}"
+                >
                     {label}
                 </span>
                 {#if hidden}
                     <EyeOff
                         size="12"
-						class="shrink-0 mt-1 ml-1 {orientation === 'vertical' ? 'mr-2' : ''} {item.level ===
-							ListLevel.SEGMENT || item.level === ListLevel.WAYPOINT
+                        class="shrink-0 mt-1 ml-1 {orientation === 'vertical'
+                            ? 'mr-2'
+                            : ''} {item.level === ListLevel.SEGMENT ||
+                        item.level === ListLevel.WAYPOINT
                             ? 'mr-3'
                             : ''}"
                     />
@@ -209,31 +227,34 @@
     </ContextMenu.Trigger>
     <ContextMenu.Content>
         {#if item instanceof ListFileItem || item instanceof ListTrackItem}
-			<ContextMenu.Item disabled={!singleSelection} on:click={() => ($editMetadata = true)}>
+            <ContextMenu.Item
+                disabled={!singleSelection}
+                onclick={() => (editMetadata.current = true)}
+            >
                 <Info size="16" class="mr-1" />
-				{$_('menu.metadata.button')}
+                {i18n._('menu.metadata.button')}
                 <Shortcut key="I" ctrl={true} />
             </ContextMenu.Item>
-			<ContextMenu.Item on:click={() => ($editStyle = true)}>
+            <ContextMenu.Item onclick={() => (editStyle.current = true)}>
                 <PaintBucket size="16" class="mr-1" />
-				{$_('menu.style.button')}
+                {i18n._('menu.style.button')}
             </ContextMenu.Item>
         {/if}
         <ContextMenu.Item
-			on:click={() => {
+            onclick={() => {
                 if ($allHidden) {
-					dbUtils.setHiddenToSelection(false);
+                    fileActions.setHiddenToSelection(false);
                 } else {
-					dbUtils.setHiddenToSelection(true);
+                    fileActions.setHiddenToSelection(true);
                 }
             }}
         >
             {#if $allHidden}
                 <Eye size="16" class="mr-1" />
-				{$_('menu.unhide')}
+                {i18n._('menu.unhide')}
             {:else}
                 <EyeOff size="16" class="mr-1" />
-				{$_('menu.hide')}
+                {i18n._('menu.hide')}
             {/if}
             <Shortcut key="H" ctrl={true} />
         </ContextMenu.Item>
@@ -242,71 +263,72 @@
             {#if item instanceof ListFileItem}
                 <ContextMenu.Item
                     disabled={!singleSelection}
-					on:click={() => dbUtils.addNewTrack(item.getFileId())}
+                    onclick={() => fileActions.addNewTrack(item.getFileId())}
                 >
                     <Plus size="16" class="mr-1" />
-					{$_('menu.new_track')}
+                    {i18n._('menu.new_track')}
                 </ContextMenu.Item>
                 <ContextMenu.Separator />
             {:else if item instanceof ListTrackItem}
                 <ContextMenu.Item
                     disabled={!singleSelection}
-					on:click={() => dbUtils.addNewSegment(item.getFileId(), item.getTrackIndex())}
+                    onclick={() =>
+                        fileActions.addNewSegment(item.getFileId(), item.getTrackIndex())}
                 >
                     <Plus size="16" class="mr-1" />
-					{$_('menu.new_segment')}
+                    {i18n._('menu.new_segment')}
                 </ContextMenu.Item>
                 <ContextMenu.Separator />
             {/if}
         {/if}
         {#if item.level !== ListLevel.WAYPOINTS}
-			<ContextMenu.Item on:click={selectAll}>
+            <ContextMenu.Item onclick={() => selection.selectAll()}>
                 <FileStack size="16" class="mr-1" />
-				{$_('menu.select_all')}
+                {i18n._('menu.select_all')}
                 <Shortcut key="A" ctrl={true} />
             </ContextMenu.Item>
         {/if}
-		<ContextMenu.Item on:click={centerMapOnSelection}>
+        <ContextMenu.Item onclick={() => boundsManager.centerMapOnSelection()}>
             <Maximize size="16" class="mr-1" />
-			{$_('menu.center')}
+            {i18n._('menu.center')}
             <Shortcut key="⏎" ctrl={true} />
         </ContextMenu.Item>
         <ContextMenu.Separator />
-		<ContextMenu.Item on:click={dbUtils.duplicateSelection}>
+        <ContextMenu.Item onclick={fileActions.duplicateSelection}>
             <Copy size="16" class="mr-1" />
-			{$_('menu.duplicate')}
+            {i18n._('menu.duplicate')}
             <Shortcut key="D" ctrl={true} /></ContextMenu.Item
         >
         {#if orientation === 'vertical'}
-			<ContextMenu.Item on:click={copySelection}>
+            <ContextMenu.Item onclick={() => selection.copySelection()}>
                 <ClipboardCopy size="16" class="mr-1" />
-				{$_('menu.copy')}
+                {i18n._('menu.copy')}
                 <Shortcut key="C" ctrl={true} />
             </ContextMenu.Item>
-			<ContextMenu.Item on:click={cutSelection}>
+            <ContextMenu.Item onclick={() => selection.cutSelection()}>
                 <Scissors size="16" class="mr-1" />
-				{$_('menu.cut')}
+                {i18n._('menu.cut')}
                 <Shortcut key="X" ctrl={true} />
             </ContextMenu.Item>
             <ContextMenu.Item
                 disabled={$copied === undefined ||
                     $copied.length === 0 ||
                     !allowedPastes[$copied[0].level].includes(item.level)}
-				on:click={pasteSelection}
+                onclick={pasteSelection}
             >
                 <ClipboardPaste size="16" class="mr-1" />
-				{$_('menu.paste')}
+                {i18n._('menu.paste')}
                 <Shortcut key="V" ctrl={true} />
             </ContextMenu.Item>
         {/if}
         <ContextMenu.Separator />
-		<ContextMenu.Item on:click={dbUtils.deleteSelection}>
+        <ContextMenu.Item onclick={fileActions.deleteSelection}>
             {#if item instanceof ListFileItem}
                 <FileX size="16" class="mr-1" />
-				{$_('menu.close')}
+                {i18n._('menu.close')}
             {:else}
                 <Trash2 size="16" class="mr-1" />
-				{$_('menu.delete')}
+                {i18n._('menu.delete')}
             {/if}
             <Shortcut key="⌫" ctrl={true} />
         </ContextMenu.Item>

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

@@ -2,12 +2,16 @@
     import CollapsibleTree from '$lib/components/collapsible-tree/CollapsibleTree.svelte';
     import FileListNode from '$lib/components/file-list/FileListNode.svelte';
 
-	import type { GPXFileWithStatistics } from '$lib/db';
     import { getContext } from 'svelte';
     import type { Readable } from 'svelte/store';
-	import { ListFileItem } from './FileList';
+    import { ListFileItem } from './file-list';
+    import type { GPXFileWithStatistics } from '$lib/logic/statistics-tree';
 
-	export let file: Readable<GPXFileWithStatistics | undefined>;
+    let {
+        file,
+    }: {
+        file: Readable<GPXFileWithStatistics | undefined>;
+    } = $props();
 
     let recursive = getContext<boolean>('recursive');
 </script>

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

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

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

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

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

@@ -1,16 +1,10 @@
-import { dbUtils, getFile } from "$lib/db";
-import { freeze } from "immer";
-import { GPXFile, Track, TrackSegment, Waypoint } from "gpx";
-import { selection } from "./Selection";
-import { newGPXFile } from "$lib/stores";
-
 export enum ListLevel {
     ROOT,
     FILE,
     TRACK,
     SEGMENT,
     WAYPOINTS,
-    WAYPOINT
+    WAYPOINT,
 }
 
 export const allowedMoves: Record<ListLevel, ListLevel[]> = {
@@ -19,7 +13,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,10 +22,11 @@ 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 {
+    [x: string]: any;
     level: ListLevel;
 
     constructor(level: ListLevel) {
@@ -321,120 +316,3 @@ export function sortItems(items: ListItem[], reverse: boolean = false) {
         items.reverse();
     }
 }
-
-export function moveItems(fromParent: ListItem, toParent: ListItem, fromItems: ListItem[], toItems: ListItem[], remove: boolean = true) {
-    if (fromItems.length === 0) {
-        return;
-    }
-
-    sortItems(fromItems, false);
-    sortItems(toItems, false);
-
-    let context: (GPXFile | Track | TrackSegment | Waypoint[] | Waypoint)[] = [];
-    fromItems.forEach((item) => {
-        let file = getFile(item.getFileId());
-        if (file) {
-            if (item instanceof ListFileItem) {
-                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) {
-                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) {
-                context.push(file.wpt[item.getWaypointIndex()].clone());
-            }
-        }
-    });
-
-    if (remove && !(fromParent instanceof ListRootItem)) {
-        sortItems(fromItems, true);
-    }
-
-    let files = [fromParent.getFileId(), toParent.getFileId()];
-    let callbacks = [
-        (file, context: (GPXFile | Track | TrackSegment | Waypoint[] | Waypoint)[]) => {
-            fromItems.forEach((item) => {
-                if (item instanceof ListTrackItem) {
-                    file.replaceTracks(item.getTrackIndex(), item.getTrackIndex(), []);
-                } else if (item instanceof ListTrackSegmentItem) {
-                    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) {
-                    file.replaceWaypoints(item.getWaypointIndex(), item.getWaypointIndex(), []);
-                }
-            });
-        },
-        (file, context: (GPXFile | Track | TrackSegment | Waypoint[] | Waypoint)[]) => {
-            toItems.forEach((item, i) => {
-                if (item instanceof ListTrackItem) {
-                    if (context[i] instanceof Track) {
-                        file.replaceTracks(item.getTrackIndex(), item.getTrackIndex() - 1, [context[i]]);
-                    } else if (context[i] instanceof TrackSegment) {
-                        file.replaceTracks(item.getTrackIndex(), item.getTrackIndex() - 1, [new Track({
-                            trkseg: [context[i]]
-                        })]);
-                    }
-                } else if (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) {
-                        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]]);
-                }
-            });
-        }
-    ];
-
-    if (fromParent instanceof ListRootItem) {
-        files = [];
-        callbacks = [];
-    } else if (!remove) {
-        files.splice(0, 1);
-        callbacks.splice(0, 1);
-    }
-
-    dbUtils.applyEachToFilesAndGlobal(files, callbacks, (files, context: (GPXFile | Track | TrackSegment | Waypoint[] | Waypoint)[]) => {
-        toItems.forEach((item, i) => {
-            if (item instanceof ListFileItem) {
-                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));
-                }
-            }
-        });
-    }, context);
-
-    selection.update(($selection) => {
-        $selection.clear();
-        toItems.forEach((item) => {
-            $selection.set(item, true);
-        });
-        return $selection;
-    });
-}

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

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

website/src/lib/components/file-list/metadata/utils.svelte.ts

@@ -0,0 +1,3 @@
+export const editMetadata = $state({
+    current: false,
+});

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

@@ -0,0 +1,168 @@
+<script lang="ts">
+    import { Button } from '$lib/components/ui/button';
+    import { Input } from '$lib/components/ui/input';
+    import { Label } from '$lib/components/ui/label/index.js';
+    import { Slider } from '$lib/components/ui/slider';
+    import * as Popover from '$lib/components/ui/popover';
+    import { dbUtils, getFile, settings } from '$lib/db';
+    import { Save } from '@lucide/svelte';
+    import {
+        ListFileItem,
+        ListTrackItem,
+        type ListItem,
+    } from '$lib/components/file-list/file-list';
+    import { editStyle } from '$lib/components/file-list/style/utils.svelte';
+    import { selection } from '../Selection';
+    import { gpxLayers } from '$lib/stores';
+    import { i18n } from '$lib/i18n.svelte';
+    import type { LineStyleExtension } from 'gpx';
+
+    let {
+        item,
+        open = $bindable(),
+    }: {
+        item: ListItem;
+        open: boolean;
+    } = $props();
+
+    const { defaultOpacity, defaultWidth } = settings;
+
+    let color: string = $state('');
+    let opacity: number = $state(0);
+    let width: number = $state(0);
+    let colorChanged = $state(false);
+    let opacityChanged = $state(false);
+    let widthChanged = $state(false);
+
+    function setStyleInputs() {
+        opacity = $defaultOpacity;
+        width = $defaultWidth;
+
+        $selection.forEach((item) => {
+            if (item instanceof ListFileItem) {
+                let file = getFile(item.getFileId());
+                let layer = gpxLayers.get(item.getFileId());
+                if (file && layer) {
+                    let style = file.getStyle();
+                    color = layer.layerColor;
+                    if (style.opacity.length > 0) {
+                        opacity = style.opacity[0];
+                    }
+                    if (style.width.length > 0) {
+                        width = style.width[0];
+                    }
+                }
+            } else if (item instanceof ListTrackItem) {
+                let file = getFile(item.getFileId());
+                let layer = gpxLayers.get(item.getFileId());
+                if (file && layer) {
+                    color = layer.layerColor;
+                    let track = file.trk[item.getTrackIndex()];
+                    let style = track.getStyle();
+                    if (style) {
+                        if (style['gpx_style:color']) {
+                            color = style['gpx_style:color'];
+                        }
+                        if (style['gpx_style:opacity']) {
+                            opacity = style['gpx_style:opacity'];
+                        }
+                        if (style['gpx_style:width']) {
+                            width = style['gpx_style:width'];
+                        }
+                    }
+                }
+            }
+        });
+
+        colorChanged = false;
+        opacityChanged = false;
+        widthChanged = false;
+    }
+
+    $effect(() => {
+        if ($selection && open) {
+            setStyleInputs();
+        }
+    });
+
+    $effect(() => {
+        if (!open) {
+            editStyle.current = false;
+        }
+    });
+
+    function applyStyle() {
+        let style: LineStyleExtension = {};
+        if (colorChanged) {
+            style['gpx_style:color'] = color;
+        }
+        if (opacityChanged) {
+            style['gpx_style:opacity'] = opacity;
+        }
+        if (widthChanged) {
+            style['gpx_style:width'] = width;
+        }
+        dbUtils.setStyleToSelection(style);
+
+        if (item instanceof ListFileItem && $selection.size === gpxLayers.size) {
+            if (style['gpx_style:opacity']) {
+                $defaultOpacity = style['gpx_style:opacity'];
+            }
+            if (style['gpx_style:width']) {
+                $defaultWidth = style['gpx_style:width'];
+            }
+        }
+
+        open = false;
+    }
+</script>
+
+<Popover.Root bind:open>
+    <Popover.Trigger />
+    <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">
+            {i18n._('menu.style.color')}
+            <Input
+                bind:value={color}
+                type="color"
+                class="p-0 h-6 w-40"
+                onchange={() => (colorChanged = true)}
+            />
+        </Label>
+        <Label class="flex flex-row gap-2 items-center justify-between">
+            {i18n._('menu.style.opacity')}
+            <div class="w-40 p-2">
+                <Slider
+                    bind:value={opacity}
+                    min={0.3}
+                    max={1}
+                    step={0.1}
+                    onValueChange={() => (opacityChanged = true)}
+                    type="single"
+                />
+            </div>
+        </Label>
+        <Label class="flex flex-row gap-2 items-center justify-between">
+            {i18n._('menu.style.width')}
+            <div class="w-40 p-2">
+                <Slider
+                    bind:value={width}
+                    id="width"
+                    min={1}
+                    max={10}
+                    step={1}
+                    onValueChange={() => (widthChanged = true)}
+                    type="single"
+                />
+            </div>
+        </Label>
+        <Button
+            variant="outline"
+            disabled={!colorChanged && !opacityChanged && !widthChanged}
+            onclick={applyStyle}
+        >
+            <Save size="16" class="mr-1" />
+            {i18n._('menu.metadata.save')}
+        </Button>
+    </Popover.Content>
+</Popover.Root>

website/src/lib/components/file-list/style/utils.svelte.ts

@@ -0,0 +1,3 @@
+export const editStyle = $state({
+    current: false,
+});

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

@@ -1,477 +0,0 @@
-import { currentTool, map, Tool } from "$lib/stores";
-import { settings, type GPXFileWithStatistics, dbUtils } from "$lib/db";
-import { get, type Readable } from "svelte/store";
-import mapboxgl from "mapbox-gl";
-import { waypointPopup, deleteWaypoint, trackpointPopup } from "./GPXLayerPopup";
-import { addSelectItem, selectItem, selection } from "$lib/components/file-list/Selection";
-import { ListTrackSegmentItem, ListWaypointItem, ListWaypointsItem, 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',
-    '#0000ff',
-    '#46e646',
-    '#00ccff',
-    '#ff9900',
-    '#ff00ff',
-    '#ffff32',
-    '#288228',
-    '#9933ff',
-    '#50f0be',
-    '#8c645a'
-];
-
-const colorCount: { [key: string]: number } = {};
-for (let color of colors) {
-    colorCount[color] = 0;
-}
-
-// Get the color with the least amount of uses
-function getColor() {
-    let color = colors.reduce((a, b) => (colorCount[a] <= colorCount[b] ? a : b));
-    colorCount[color]++;
-    return color;
-}
-
-function decrementColor(color: string) {
-    if (colorCount.hasOwnProperty(color)) {
-        colorCount[color]--;
-    }
-}
-
-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
-            .replace('width="24"', 'width="12"')
-            .replace('height="24"', 'height="12"')
-            .replace('stroke="currentColor"', 'stroke="SteelBlue"')
-            .replace('stroke-width="2"', 'stroke-width="1.5" x="9.6" y="0.4"')
-            .replace('fill="none"', `fill="${layerColor}"`)}
-    ${MapPin
-            .replace('width="24"', '')
-            .replace('height="24"', '')
-            .replace('stroke="currentColor"', '')
-            .replace('path', `path fill="#3fb1ce" stroke="SteelBlue" stroke-width="1"`)
-            .replace('circle', `circle fill="${symbolSvg ? 'none' : 'white'}" stroke="${symbolSvg ? 'none' : 'white'}" stroke-width="2"`)} 
-    ${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"') ?? ''}
-    </svg>`;
-}
-
-const { directionMarkers, verticalFileView, defaultOpacity, defaultWeight } = settings;
-
-export class GPXLayer {
-    map: mapboxgl.Map;
-    fileId: string;
-    file: Readable<GPXFileWithStatistics | undefined>;
-    layerColor: string;
-    markers: mapboxgl.Marker[] = [];
-    selected: boolean = false;
-    draggable: boolean;
-    unsubscribe: Function[] = [];
-
-    updateBinded: () => void = this.update.bind(this);
-    layerOnMouseEnterBinded: (e: any) => void = this.layerOnMouseEnter.bind(this);
-    layerOnMouseLeaveBinded: () => void = this.layerOnMouseLeave.bind(this);
-    layerOnMouseMoveBinded: (e: any) => void = this.layerOnMouseMove.bind(this);
-    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>) {
-        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 => {
-            let newSelected = $selection.hasAnyChildren(new ListFileItem(this.fileId));
-            if (this.selected || newSelected) {
-                this.selected = newSelected;
-                this.update();
-            }
-            if (newSelected) {
-                this.moveToFront();
-            }
-        }));
-        this.unsubscribe.push(directionMarkers.subscribe(this.updateBinded));
-        this.unsubscribe.push(currentTool.subscribe(tool => {
-            if (tool === Tool.WAYPOINT && !this.draggable) {
-                this.draggable = true;
-                this.markers.forEach(marker => marker.setDraggable(true));
-            } else if (tool !== Tool.WAYPOINT && this.draggable) {
-                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() {
-        let file = get(this.file)?.file;
-        if (!file) {
-            return;
-        }
-
-        if (file._data.style && file._data.style.color && this.layerColor !== `#${file._data.style.color}`) {
-            decrementColor(this.layerColor);
-            this.layerColor = `#${file._data.style.color}`;
-        }
-
-        try {
-            let source = this.map.getSource(this.fileId);
-            if (source) {
-                source.setData(this.getGeoJSON());
-            } else {
-                this.map.addSource(this.fileId, {
-                    type: 'geojson',
-                    data: this.getGeoJSON()
-                });
-            }
-
-            if (!this.map.getLayer(this.fileId)) {
-                this.map.addLayer({
-                    id: this.fileId,
-                    type: 'line',
-                    source: this.fileId,
-                    layout: {
-                        'line-join': 'round',
-                        'line-cap': 'round'
-                    },
-                    paint: {
-                        'line-color': ['get', 'color'],
-                        'line-width': ['get', 'weight'],
-                        'line-opacity': ['get', 'opacity']
-                    }
-                });
-
-                this.map.on('click', this.fileId, this.layerOnClickBinded);
-                this.map.on('contextmenu', this.fileId, this.layerOnContextMenuBinded);
-                this.map.on('mouseenter', this.fileId, this.layerOnMouseEnterBinded);
-                this.map.on('mouseleave', this.fileId, this.layerOnMouseLeaveBinded);
-                this.map.on('mousemove', this.fileId, this.layerOnMouseMoveBinded);
-            }
-
-            if (get(directionMarkers)) {
-                if (!this.map.getLayer(this.fileId + '-direction')) {
-                    this.map.addLayer({
-                        id: this.fileId + '-direction',
-                        type: 'symbol',
-                        source: this.fileId,
-                        layout: {
-                            'text-field': '»',
-                            'text-offset': [0, -0.1],
-                            'text-keep-upright': false,
-                            'text-max-angle': 361,
-                            'text-allow-overlap': true,
-                            'text-font': ['Open Sans Bold'],
-                            'symbol-placement': 'line',
-                            'symbol-spacing': 20,
-                        },
-                        paint: {
-                            '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')) {
-                    this.map.removeLayer(this.fileId + '-direction');
-                }
-            }
-
-            let visibleItems: [number, number][] = [];
-            file.forEachSegment((segment, trackIndex, segmentIndex) => {
-                if (!segment._data.hidden) {
-                    visibleItems.push([trackIndex, segmentIndex]);
-                }
-            });
-
-            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 });
-            }
-        } 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
-                let symbolKey = getSymbolKey(waypoint.sym);
-                if (markerIndex < this.markers.length) {
-                    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 });
-                } else {
-                    let element = document.createElement('div');
-                    element.classList.add('w-8', 'h-8', 'drop-shadow-xl');
-                    element.innerHTML = getMarkerForSymbol(symbolKey, this.layerColor);
-                    let marker = new mapboxgl.Marker({
-                        draggable: this.draggable,
-                        element,
-                        anchor: 'bottom'
-                    }).setLngLat(waypoint.getCoordinates());
-                    Object.defineProperty(marker, '_waypoint', { value: waypoint, writable: true });
-                    let dragEndTimestamp = 0;
-                    marker.getElement().addEventListener('mousemove', (e) => {
-                        if (marker._isDragging) {
-                            return;
-                        }
-                        waypointPopup?.setItem({ item: marker._waypoint, fileId: this.fileId });
-                        e.stopPropagation();
-                    });
-                    marker.getElement().addEventListener('click', (e) => {
-                        if (dragEndTimestamp && Date.now() - dragEndTimestamp < 1000) {
-                            return;
-                        }
-
-                        if (get(currentTool) === Tool.WAYPOINT && e.shiftKey) {
-                            deleteWaypoint(this.fileId, marker._waypoint._data.index);
-                            e.stopPropagation();
-                            return;
-                        }
-
-                        if (get(verticalFileView)) {
-                            if ((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));
-                            }
-                        } else if (get(currentTool) === Tool.WAYPOINT) {
-                            selectedWaypoint.set([marker._waypoint, this.fileId]);
-                        } else {
-                            waypointPopup?.setItem({ item: marker._waypoint, fileId: this.fileId });
-                        }
-                        e.stopPropagation();
-                    });
-                    marker.on('dragstart', () => {
-                        setGrabbingCursor();
-                        marker.getElement().style.cursor = 'grabbing';
-                        waypointPopup?.hide();
-                    });
-                    marker.on('dragend', (e) => {
-                        resetCursor();
-                        marker.getElement().style.cursor = '';
-                        getElevation([marker._waypoint]).then((ele) => {
-                            dbUtils.applyToFile(this.fileId, (file) => {
-                                let latLng = marker.getLngLat();
-                                let wpt = file.wpt[marker._waypoint._data.index];
-                                wpt.setCoordinates({
-                                    lat: latLng.lat,
-                                    lon: latLng.lng
-                                });
-                                wpt.ele = ele[0];
-                            });
-                        });
-                        dragEndTimestamp = Date.now()
-                    });
-                    this.markers.push(marker);
-                }
-                markerIndex++;
-            });
-        }
-
-        while (markerIndex < this.markers.length) { // Remove extra markers
-            this.markers.pop()?.remove();
-        }
-
-        this.markers.forEach((marker) => {
-            if (!marker._waypoint._data.hidden) {
-                marker.addTo(this.map);
-            } else {
-                marker.remove();
-            }
-        });
-    }
-
-    updateMap(map: mapboxgl.Map) {
-        this.map = map;
-        this.map.on('style.import.load', this.updateBinded);
-        this.update();
-    }
-
-    remove() {
-        if (get(map)) {
-            this.map.off('click', this.fileId, this.layerOnClickBinded);
-            this.map.off('contextmenu', this.fileId, this.layerOnContextMenuBinded);
-            this.map.off('mouseenter', this.fileId, this.layerOnMouseEnterBinded);
-            this.map.off('mouseleave', this.fileId, this.layerOnMouseLeaveBinded);
-            this.map.off('mousemove', this.fileId, this.layerOnMouseMoveBinded);
-            this.map.off('style.import.load', this.updateBinded);
-
-            if (this.map.getLayer(this.fileId + '-direction')) {
-                this.map.removeLayer(this.fileId + '-direction');
-            }
-            if (this.map.getLayer(this.fileId)) {
-                this.map.removeLayer(this.fileId);
-            }
-            if (this.map.getSource(this.fileId)) {
-                this.map.removeSource(this.fileId);
-            }
-        }
-
-        this.markers.forEach((marker) => {
-            marker.remove();
-        });
-
-        this.unsubscribe.forEach((unsubscribe) => unsubscribe());
-
-        decrementColor(this.layerColor);
-    }
-
-    moveToFront() {
-        if (this.map.getLayer(this.fileId)) {
-            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);
-        }
-    }
-
-    layerOnMouseEnter(e: any) {
-        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))) {
-            setScissorsCursor();
-        } else {
-            setPointerCursor();
-        }
-    }
-
-    layerOnMouseLeave() {
-        resetCursor();
-    }
-
-    layerOnMouseMove(e: any) {
-        if (inspectKeyDown?.isDown()) {
-            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 });
-                trackpointPopup?.setItem({ item: closest, fileId: this.fileId });
-            }
-        }
-    }
-
-    layerOnClick(e: any) {
-        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))) {
-            dbUtils.split(this.fileId, trackIndex, segmentIndex, { lat: e.lngLat.lat, lon: e.lngLat.lng });
-            return;
-        }
-
-        let file = get(this.file)?.file;
-        if (!file) {
-            return;
-        }
-
-        let item = undefined;
-        if (get(verticalFileView) && file.getSegments().length > 1) { // 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);
-        }
-
-        if (e.originalEvent.ctrlKey || e.originalEvent.metaKey) {
-            addSelectItem(item);
-        } else {
-            selectItem(item);
-        }
-    }
-
-    layerOnContextMenu(e: any) {
-        if (e.originalEvent.ctrlKey) {
-            this.layerOnClick(e);
-        }
-    }
-
-    getGeoJSON(): GeoJSON.FeatureCollection {
-        let file = get(this.file)?.file;
-        if (!file) {
-            return {
-                type: 'FeatureCollection',
-                features: []
-            };
-        }
-
-        let data = file.toGeoJSON();
-
-        let trackIndex = 0, segmentIndex = 0;
-        for (let feature of data.features) {
-            if (!feature.properties) {
-                feature.properties = {};
-            }
-            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)) {
-                feature.properties.weight = feature.properties.weight + 2;
-                feature.properties.opacity = Math.min(1, feature.properties.opacity + 0.1);
-            }
-            feature.properties.trackIndex = trackIndex;
-            feature.properties.segmentIndex = segmentIndex;
-
-            segmentIndex++;
-            if (segmentIndex >= file.trk[trackIndex].trkseg.length) {
-                segmentIndex = 0;
-                trackIndex++;
-            }
-        }
-        return data;
-    }
-}

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

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

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

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

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

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

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

@@ -1,422 +0,0 @@
-<script lang="ts">
-	import * as Card from '$lib/components/ui/card';
-	import { Input } from '$lib/components/ui/input';
-	import { Label } from '$lib/components/ui/label';
-	import { Button } from '$lib/components/ui/button';
-	import { Separator } from '$lib/components/ui/separator';
-	import * as RadioGroup from '$lib/components/ui/radio-group';
-	import {
-		CirclePlus,
-		CircleX,
-		Minus,
-		Pencil,
-		Plus,
-		Save,
-		Trash2,
-		Move,
-		Map,
-		Layers2
-	} from 'lucide-svelte';
-	import { _ } from 'svelte-i18n';
-	import { settings } from '$lib/db';
-	import { defaultBasemap, type CustomLayer } from '$lib/assets/layers';
-	import { map } from '$lib/stores';
-	import { onDestroy, onMount } from 'svelte';
-	import Sortable from 'sortablejs/Sortable';
-	import { customBasemapUpdate } from './utils';
-
-	const {
-		customLayers,
-		selectedBasemapTree,
-		selectedOverlayTree,
-		currentBasemap,
-		previousBasemap,
-		currentOverlays,
-		previousOverlays,
-		customBasemapOrder,
-		customOverlayOrder
-	} = settings;
-
-	let name: string = '';
-	let tileUrls: string[] = [''];
-	let maxZoom: number = 20;
-	let layerType: 'basemap' | 'overlay' = 'basemap';
-	let resourceType: 'raster' | 'vector' = 'raster';
-
-	let basemapContainer: HTMLElement;
-	let overlayContainer: HTMLElement;
-
-	let basemapSortable: Sortable;
-	let overlaySortable: Sortable;
-
-	onMount(() => {
-		if ($customBasemapOrder.length === 0) {
-			$customBasemapOrder = Object.keys($customLayers).filter(
-				(id) => $customLayers[id].layerType === 'basemap'
-			);
-		}
-		if ($customOverlayOrder.length === 0) {
-			$customOverlayOrder = Object.keys($customLayers).filter(
-				(id) => $customLayers[id].layerType === 'overlay'
-			);
-		}
-
-		basemapSortable = Sortable.create(basemapContainer, {
-			onSort: (e) => {
-				$customBasemapOrder = basemapSortable.toArray();
-				$selectedBasemapTree.basemaps['custom'] = $customBasemapOrder.reduce((acc, id) => {
-					acc[id] = true;
-					return acc;
-				}, {});
-			}
-		});
-		overlaySortable = Sortable.create(overlayContainer, {
-			onSort: (e) => {
-				$customOverlayOrder = overlaySortable.toArray();
-				$selectedOverlayTree.overlays['custom'] = $customOverlayOrder.reduce((acc, id) => {
-					acc[id] = true;
-					return acc;
-				}, {});
-			}
-		});
-
-		basemapSortable.sort($customBasemapOrder);
-		overlaySortable.sort($customOverlayOrder);
-	});
-
-	onDestroy(() => {
-		basemapSortable.destroy();
-		overlaySortable.destroy();
-	});
-
-	$: if (tileUrls[0].length > 0) {
-		if (
-			tileUrls[0].includes('.json') ||
-			(tileUrls[0].includes('api.mapbox.com/styles') && !tileUrls[0].includes('tiles'))
-		) {
-			resourceType = 'vector';
-		} else {
-			resourceType = 'raster';
-		}
-	}
-
-	function createLayer() {
-		if (selectedLayerId && $customLayers[selectedLayerId].layerType !== layerType) {
-			deleteLayer(selectedLayerId);
-		}
-
-		if (typeof maxZoom === 'string') {
-			maxZoom = parseInt(maxZoom);
-		}
-		let is512 = tileUrls.some((url) => url.includes('512'));
-
-		let layerId = selectedLayerId ?? getLayerId();
-		let layer: CustomLayer = {
-			id: layerId,
-			name: name,
-			tileUrls: tileUrls.map((url) => decodeURI(url.trim())),
-			maxZoom: maxZoom,
-			layerType: layerType,
-			resourceType: resourceType,
-			value: ''
-		};
-
-		if (resourceType === 'vector') {
-			layer.value = layer.tileUrls[0];
-		} else {
-			layer.value = {
-				version: 8,
-				sources: {
-					[layerId]: {
-						type: 'raster',
-						tiles: layer.tileUrls,
-						tileSize: is512 ? 512 : 256,
-						maxzoom: maxZoom
-					}
-				},
-				layers: [
-					{
-						id: layerId,
-						type: 'raster',
-						source: layerId
-					}
-				]
-			};
-		}
-		$customLayers[layerId] = layer;
-		addLayer(layerId);
-		selectedLayerId = undefined;
-		setDataFromSelectedLayer();
-	}
-
-	function getLayerId() {
-		for (let id = 0; ; id++) {
-			if (!$customLayers.hasOwnProperty(`custom-${id}`)) {
-				return `custom-${id}`;
-			}
-		}
-	}
-
-	function addLayer(layerId: string) {
-		if (layerType === 'basemap') {
-			selectedBasemapTree.update(($tree) => {
-				if (!$tree.basemaps.hasOwnProperty('custom')) {
-					$tree.basemaps['custom'] = {};
-				}
-				$tree.basemaps['custom'][layerId] = true;
-				return $tree;
-			});
-
-			if ($currentBasemap === layerId) {
-				$customBasemapUpdate++;
-			} else {
-				$currentBasemap = layerId;
-			}
-
-			if (!$customBasemapOrder.includes(layerId)) {
-				$customBasemapOrder = [...$customBasemapOrder, layerId];
-			}
-		} else {
-			selectedOverlayTree.update(($tree) => {
-				if (!$tree.overlays.hasOwnProperty('custom')) {
-					$tree.overlays['custom'] = {};
-				}
-				$tree.overlays['custom'][layerId] = true;
-				return $tree;
-			});
-
-			if (
-				$currentOverlays.overlays['custom'] &&
-				$currentOverlays.overlays['custom'][layerId] &&
-				$map
-			) {
-				try {
-					$map.removeImport(layerId);
-				} catch (e) {
-					// No reliable way to check if the map is ready to remove sources and layers
-				}
-			}
-
-			if (!$currentOverlays.overlays.hasOwnProperty('custom')) {
-				$currentOverlays.overlays['custom'] = {};
-			}
-			$currentOverlays.overlays['custom'][layerId] = true;
-
-			if (!$customOverlayOrder.includes(layerId)) {
-				$customOverlayOrder = [...$customOverlayOrder, layerId];
-			}
-		}
-	}
-
-	function tryDeleteLayer(node: any, id: string): any {
-		if (node.hasOwnProperty(id)) {
-			delete node[id];
-		}
-		return node;
-	}
-
-	function deleteLayer(layerId: string) {
-		let layer = $customLayers[layerId];
-		if (layer.layerType === 'basemap') {
-			if (layerId === $currentBasemap) {
-				$currentBasemap = defaultBasemap;
-			}
-			if (layerId === $previousBasemap) {
-				$previousBasemap = defaultBasemap;
-			}
-
-			$selectedBasemapTree.basemaps['custom'] = tryDeleteLayer(
-				$selectedBasemapTree.basemaps['custom'],
-				layerId
-			);
-			if (Object.keys($selectedBasemapTree.basemaps['custom']).length === 0) {
-				$selectedBasemapTree.basemaps = tryDeleteLayer($selectedBasemapTree.basemaps, 'custom');
-			}
-			$customBasemapOrder = $customBasemapOrder.filter((id) => id !== layerId);
-		} else {
-			$currentOverlays.overlays['custom'][layerId] = false;
-			if ($previousOverlays.overlays['custom']) {
-				$previousOverlays.overlays['custom'] = tryDeleteLayer(
-					$previousOverlays.overlays['custom'],
-					layerId
-				);
-			}
-
-			$selectedOverlayTree.overlays['custom'] = tryDeleteLayer(
-				$selectedOverlayTree.overlays['custom'],
-				layerId
-			);
-			if (Object.keys($selectedOverlayTree.overlays['custom']).length === 0) {
-				$selectedOverlayTree.overlays = tryDeleteLayer($selectedOverlayTree.overlays, 'custom');
-			}
-			$customOverlayOrder = $customOverlayOrder.filter((id) => id !== layerId);
-
-			if (
-				$currentOverlays.overlays['custom'] &&
-				$currentOverlays.overlays['custom'][layerId] &&
-				$map
-			) {
-				try {
-					$map.removeImport(layerId);
-				} catch (e) {
-					// No reliable way to check if the map is ready to remove sources and layers
-				}
-			}
-		}
-		$customLayers = tryDeleteLayer($customLayers, layerId);
-	}
-
-	let selectedLayerId: string | undefined = undefined;
-
-	function setDataFromSelectedLayer() {
-		if (selectedLayerId) {
-			const layer = $customLayers[selectedLayerId];
-			name = layer.name;
-			tileUrls = layer.tileUrls;
-			maxZoom = layer.maxZoom;
-			layerType = layer.layerType;
-			resourceType = layer.resourceType;
-		} else {
-			name = '';
-			tileUrls = [''];
-			maxZoom = 20;
-			layerType = 'basemap';
-			resourceType = 'raster';
-		}
-	}
-
-	$: selectedLayerId, setDataFromSelectedLayer();
-</script>
-
-<div class="flex flex-col">
-	{#if $customBasemapOrder.length > 0}
-		<div class="flex flex-row items-center gap-1 font-semibold mb-2">
-			<Map size="16" />
-			{$_('layers.label.basemaps')}
-			<div class="grow">
-				<Separator />
-			</div>
-		</div>
-	{/if}
-	<div
-		bind:this={basemapContainer}
-		class="ml-1.5 flex flex-col gap-1 {$customBasemapOrder.length > 0 ? 'mb-2' : ''}"
-	>
-		{#each $customBasemapOrder as id (id)}
-			<div class="flex flex-row items-center gap-2" data-id={id}>
-				<Move size="12" />
-				<span class="grow">{$customLayers[id].name}</span>
-				<Button variant="outline" on:click={() => (selectedLayerId = id)} class="p-1 h-7">
-					<Pencil size="16" />
-				</Button>
-				<Button variant="outline" on:click={() => deleteLayer(id)} class="p-1 h-7">
-					<Trash2 size="16" />
-				</Button>
-			</div>
-		{/each}
-	</div>
-	{#if $customOverlayOrder.length > 0}
-		<div class="flex flex-row items-center gap-1 font-semibold mb-2">
-			<Layers2 size="16" />
-			{$_('layers.label.overlays')}
-			<div class="grow">
-				<Separator />
-			</div>
-		</div>
-	{/if}
-	<div
-		bind:this={overlayContainer}
-		class="ml-1.5 flex flex-col gap-1 {$customOverlayOrder.length > 0 ? 'mb-2' : ''}"
-	>
-		{#each $customOverlayOrder as id (id)}
-			<div class="flex flex-row items-center gap-2" data-id={id}>
-				<Move size="12" />
-				<span class="grow">{$customLayers[id].name}</span>
-				<Button variant="outline" on:click={() => (selectedLayerId = id)} class="p-1 h-7">
-					<Pencil size="16" />
-				</Button>
-				<Button variant="outline" on:click={() => deleteLayer(id)} class="p-1 h-7">
-					<Trash2 size="16" />
-				</Button>
-			</div>
-		{/each}
-	</div>
-
-	<Card.Root>
-		<Card.Header class="p-3">
-			<Card.Title class="text-base">
-				{#if selectedLayerId}
-					{$_('layers.custom_layers.edit')}
-				{:else}
-					{$_('layers.custom_layers.new')}
-				{/if}
-			</Card.Title>
-		</Card.Header>
-		<Card.Content class="p-3 pt-0">
-			<fieldset class="flex flex-col gap-2">
-				<Label for="name">{$_('menu.metadata.name')}</Label>
-				<Input bind:value={name} id="name" class="h-8" />
-				<Label for="url">{$_('layers.custom_layers.urls')}</Label>
-				{#each tileUrls as url, i}
-					<div class="flex flex-row gap-2">
-						<Input
-							bind:value={tileUrls[i]}
-							id="url"
-							class="h-8"
-							placeholder={$_('layers.custom_layers.url_placeholder')}
-						/>
-						{#if tileUrls.length > 1}
-							<Button
-								on:click={() => (tileUrls = tileUrls.filter((_, index) => index !== i))}
-								variant="outline"
-								class="p-1 h-8"
-							>
-								<Minus size="16" />
-							</Button>
-						{/if}
-						{#if i === tileUrls.length - 1}
-							<Button
-								on:click={() => (tileUrls = [...tileUrls, ''])}
-								variant="outline"
-								class="p-1 h-8"
-							>
-								<Plus size="16" />
-							</Button>
-						{/if}
-					</div>
-				{/each}
-				{#if resourceType === 'raster'}
-					<Label for="maxZoom">{$_('layers.custom_layers.max_zoom')}</Label>
-					<Input type="number" bind:value={maxZoom} id="maxZoom" min={0} max={22} class="h-8" />
-				{/if}
-				<Label>{$_('layers.custom_layers.layer_type')}</Label>
-				<RadioGroup.Root bind:value={layerType} class="flex flex-row">
-					<div class="flex items-center space-x-2">
-						<RadioGroup.Item value="basemap" id="basemap" />
-						<Label for="basemap">{$_('layers.custom_layers.basemap')}</Label>
-					</div>
-					<div class="flex items-center space-x-2">
-						<RadioGroup.Item value="overlay" id="overlay" />
-						<Label for="overlay">{$_('layers.custom_layers.overlay')}</Label>
-					</div>
-				</RadioGroup.Root>
-				{#if selectedLayerId}
-					<div class="mt-2 flex flex-row gap-2">
-						<Button variant="outline" on:click={createLayer} class="grow">
-							<Save size="16" class="mr-1" />
-							{$_('layers.custom_layers.update')}
-						</Button>
-						<Button variant="outline" on:click={() => (selectedLayerId = undefined)}>
-							<CircleX size="16" />
-						</Button>
-					</div>
-				{: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 +0,0 @@
-<script lang="ts">
-	import CustomControl from '$lib/components/custom-control/CustomControl.svelte';
-	import LayerTree from './LayerTree.svelte';
-
-	import { Separator } from '$lib/components/ui/separator';
-	import { ScrollArea } from '$lib/components/ui/scroll-area/index.js';
-
-	import { Layers } from 'lucide-svelte';
-
-	import { basemaps, defaultBasemap, overlays } from '$lib/assets/layers';
-	import { settings } from '$lib/db';
-	import { map } from '$lib/stores';
-	import { get, writable } from 'svelte/store';
-	import { customBasemapUpdate, getLayers } from './utils';
-	import { OverpassLayer } from './OverpassLayer';
-
-	let container: HTMLDivElement;
-	let overpassLayer: OverpassLayer;
-
-	const {
-		currentBasemap,
-		previousBasemap,
-		currentOverlays,
-		currentOverpassQueries,
-		selectedBasemapTree,
-		selectedOverlayTree,
-		selectedOverpassTree,
-		customLayers,
-		opacities
-	} = settings;
-
-	function setStyle() {
-		if ($map) {
-			let basemap = basemaps.hasOwnProperty($currentBasemap)
-				? basemaps[$currentBasemap]
-				: ($customLayers[$currentBasemap]?.value ?? basemaps[defaultBasemap]);
-			$map.removeImport('basemap');
-			if (typeof basemap === 'string') {
-				$map.addImport({ id: 'basemap', url: basemap }, 'overlays');
-			} else {
-				$map.addImport(
-					{
-						id: 'basemap',
-						data: basemap
-					},
-					'overlays'
-				);
-			}
-		}
-	}
-
-	$: if ($map && ($currentBasemap || $customBasemapUpdate)) {
-		setStyle();
-	}
-
-	function addOverlay(id: string) {
-		try {
-			let overlay = $customLayers.hasOwnProperty(id) ? $customLayers[id].value : overlays[id];
-			if (typeof overlay === 'string') {
-				$map.addImport({ id, url: overlay });
-			} else {
-				if ($opacities.hasOwnProperty(id)) {
-					overlay = {
-						...overlay,
-						layers: overlay.layers.map((layer) => {
-							if (layer.type === 'raster') {
-								if (!layer.paint) {
-									layer.paint = {};
-								}
-								layer.paint['raster-opacity'] = $opacities[id];
-							}
-							return layer;
-						})
-					};
-				}
-				$map.addImport({
-					id,
-					data: overlay
-				});
-			}
-		} catch (e) {
-			// No reliable way to check if the map is ready to add sources and layers
-		}
-	}
-
-	function updateOverlays() {
-		if ($map && $currentOverlays && $opacities) {
-			let overlayLayers = getLayers($currentOverlays);
-			try {
-				let activeOverlays = $map.getStyle().imports.reduce((acc, i) => {
-					if (!['basemap', 'overlays', 'glyphs-and-sprite'].includes(i.id)) {
-						acc[i.id] = i;
-					}
-					return acc;
-				}, {});
-				let toRemove = Object.keys(activeOverlays).filter((id) => !overlayLayers[id]);
-				toRemove.forEach((id) => {
-					$map.removeImport(id);
-				});
-				let toAdd = Object.entries(overlayLayers)
-					.filter(([id, selected]) => selected && !activeOverlays.hasOwnProperty(id))
-					.map(([id]) => id);
-				toAdd.forEach((id) => {
-					addOverlay(id);
-				});
-			} catch (e) {
-				// No reliable way to check if the map is ready to add sources and layers
-			}
-		}
-	}
-
-	$: if ($map && $currentOverlays && $opacities) {
-		updateOverlays();
-	}
-
-	$: if ($map) {
-		if (overpassLayer) {
-			overpassLayer.remove();
-		}
-		overpassLayer = new OverpassLayer($map);
-		overpassLayer.add();
-		$map.on('style.import.load', updateOverlays);
-	}
-
-	let selectedBasemap = writable(get(currentBasemap));
-	selectedBasemap.subscribe((value) => {
-		// Updates coming from radio buttons
-		if (value !== get(currentBasemap)) {
-			previousBasemap.set(get(currentBasemap));
-			currentBasemap.set(value);
-		}
-	});
-	currentBasemap.subscribe((value) => {
-		// Updates coming from the database, or from the user swapping basemaps
-		if (value !== get(selectedBasemap)) {
-			selectedBasemap.set(value);
-		}
-	});
-
-	let open = false;
-	function openLayerControl() {
-		open = true;
-	}
-	function closeLayerControl() {
-		open = false;
-	}
-	let cancelEvents = false;
-</script>
-
-<CustomControl class="group min-w-[29px] min-h-[29px] overflow-hidden">
-	<!-- svelte-ignore a11y-no-static-element-interactions -->
-	<div
-		bind:this={container}
-		class="h-full w-full"
-		on:mouseenter={openLayerControl}
-		on:mouseleave={closeLayerControl}
-		on:pointerenter={() => {
-			if (!open) {
-				cancelEvents = true;
-				openLayerControl();
-				setTimeout(() => {
-					cancelEvents = false;
-				}, 500);
-			}
-		}}
-	>
-		<div
-			class="flex flex-row justify-center items-center delay-100 transition-[opacity] duration-0 {open
-				? 'opacity-0 w-0 h-0 delay-0'
-				: 'w-[29px] h-[29px]'}"
-		>
-			<Layers size="20" />
-		</div>
-		<div
-			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]'
-				: ''} {cancelEvents ? 'pointer-events-none' : ''}"
-		>
-			<ScrollArea>
-				<div class="h-fit">
-					<div class="p-2">
-						<LayerTree
-							layerTree={$selectedBasemapTree}
-							name="basemaps"
-							bind:selected={$selectedBasemap}
-						/>
-					</div>
-					<Separator class="w-full" />
-					<div class="p-2">
-						{#if $currentOverlays}
-							<LayerTree
-								layerTree={$selectedOverlayTree}
-								name="overlays"
-								multiple={true}
-								bind:checked={$currentOverlays}
-							/>
-						{/if}
-					</div>
-					<Separator class="w-full" />
-					<div class="p-2">
-						{#if $currentOverpassQueries}
-							<LayerTree
-								layerTree={$selectedOverpassTree}
-								name="overpass"
-								multiple={true}
-								bind:checked={$currentOverpassQueries}
-							/>
-						{/if}
-					</div>
-				</div>
-			</ScrollArea>
-		</div>
-	</div>
-</CustomControl>
-
-<svelte:window
-	on:click={(e) => {
-		if (open && !cancelEvents && !container.contains(e.target)) {
-			closeLayerControl();
-		}
-	}}
-/>

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

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

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

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

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

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

website/src/lib/components/map/CoordinatesPopup.svelte

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

website/src/lib/components/map/Map.svelte

@@ -0,0 +1,239 @@
+<script lang="ts">
+    import { onDestroy, onMount } from 'svelte';
+    import mapboxgl from 'mapbox-gl';
+    import 'mapbox-gl/dist/mapbox-gl.css';
+    import '@mapbox/mapbox-gl-geocoder/dist/mapbox-gl-geocoder.css';
+    import { Button } from '$lib/components/ui/button';
+    import { i18n } from '$lib/i18n.svelte';
+    import { PUBLIC_MAPBOX_TOKEN } from '$env/static/public';
+    import { page } from '$app/state';
+    import { map } from '$lib/components/map/map';
+
+    let {
+        accessToken = PUBLIC_MAPBOX_TOKEN,
+        geolocate = true,
+        geocoder = true,
+        hash = true,
+        class: className = '',
+    }: {
+        accessToken?: string;
+        geolocate?: boolean;
+        geocoder?: boolean;
+        hash?: boolean;
+        class?: string;
+    } = $props();
+
+    mapboxgl.accessToken = accessToken;
+
+    let webgl2Supported = $state(true);
+    let embeddedApp = $state(false);
+
+    onMount(() => {
+        let gl = document.createElement('canvas').getContext('webgl2');
+        if (!gl) {
+            webgl2Supported = false;
+            return;
+        }
+        if (window.top !== window.self && !page.route.id?.includes('embed')) {
+            embeddedApp = true;
+            return;
+        }
+
+        let language = page.params.language;
+        if (language === 'zh') {
+            language = 'zh-Hans';
+        } else if (language?.includes('-')) {
+            language = language.split('-')[0];
+        } else if (language === '' || language === undefined) {
+            language = 'en';
+        }
+
+        map.init(PUBLIC_MAPBOX_TOKEN, language, hash, geocoder, geolocate);
+    });
+
+    onDestroy(() => {
+        map.destroy();
+    });
+</script>
+
+<div class={className}>
+    <div id="map" class="h-full {webgl2Supported && !embeddedApp ? '' : 'hidden'}"></div>
+    <div
+        class="flex flex-col items-center justify-center gap-3 h-full {webgl2Supported &&
+        !embeddedApp
+            ? 'hidden'
+            : ''} {embeddedApp ? 'z-30' : ''}"
+    >
+        {#if !webgl2Supported}
+            <p>{i18n._('webgl2_required')}</p>
+            <Button href="https://get.webgl.org/webgl2/" target="_blank">
+                {i18n._('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">
+    @reference "../../../app.css";
+
+    div :global(.mapboxgl-map) {
+        @apply font-sans;
+    }
+
+    div :global(.mapboxgl-ctrl-top-right > .mapboxgl-ctrl) {
+        @apply shadow-md;
+        @apply bg-background;
+        @apply text-foreground;
+    }
+
+    div :global(.mapboxgl-ctrl-icon) {
+        @apply dark:brightness-[4.7];
+    }
+
+    div :global(.mapboxgl-ctrl-geocoder) {
+        @apply flex;
+        @apply flex-row;
+        @apply w-fit;
+        @apply min-w-fit;
+        @apply items-center;
+        @apply shadow-md;
+    }
+
+    div :global(.suggestions) {
+        @apply shadow-md;
+        @apply bg-background;
+        @apply text-foreground;
+    }
+
+    div :global(.mapboxgl-ctrl-geocoder .suggestions > li > a) {
+        @apply text-foreground;
+        @apply hover:text-accent-foreground;
+        @apply hover:bg-accent;
+    }
+
+    div :global(.mapboxgl-ctrl-geocoder .suggestions > .active > a) {
+        @apply bg-background;
+    }
+
+    div :global(.mapboxgl-ctrl-geocoder--button) {
+        @apply bg-transparent;
+        @apply hover:bg-transparent;
+    }
+
+    div :global(.mapboxgl-ctrl-geocoder--icon) {
+        @apply fill-foreground;
+        @apply hover:fill-accent-foreground;
+    }
+
+    div :global(.mapboxgl-ctrl-geocoder--icon-search) {
+        @apply relative;
+        @apply top-0;
+        @apply left-0;
+        @apply my-2;
+        @apply w-[29px];
+    }
+
+    div :global(.mapboxgl-ctrl-geocoder--input) {
+        @apply relative;
+        @apply w-64;
+        @apply py-0;
+        @apply pl-2;
+        @apply focus:outline-none;
+        @apply transition-[width];
+        @apply duration-200;
+        @apply text-foreground;
+    }
+
+    div :global(.mapboxgl-ctrl-geocoder--collapsed .mapboxgl-ctrl-geocoder--input) {
+        @apply w-0;
+        @apply p-0;
+    }
+
+    div :global(.mapboxgl-ctrl-top-right) {
+        @apply z-40;
+        @apply flex;
+        @apply flex-col;
+        @apply items-end;
+        @apply h-full;
+        @apply overflow-hidden;
+    }
+
+    .horizontal :global(.mapboxgl-ctrl-bottom-left) {
+        @apply bottom-[42px];
+    }
+
+    .horizontal :global(.mapboxgl-ctrl-bottom-right) {
+        @apply bottom-[42px];
+    }
+
+    div :global(.mapboxgl-ctrl-attrib) {
+        @apply dark:bg-transparent;
+    }
+
+    div :global(.mapboxgl-compact-show.mapboxgl-ctrl-attrib) {
+        @apply dark:bg-background;
+    }
+
+    div :global(.mapboxgl-ctrl-attrib-button) {
+        @apply dark:bg-foreground;
+    }
+
+    div :global(.mapboxgl-compact-show .mapboxgl-ctrl-attrib-button) {
+        @apply dark:bg-foreground;
+    }
+
+    div :global(.mapboxgl-ctrl-attrib a) {
+        @apply text-foreground;
+    }
+
+    div :global(.mapboxgl-popup) {
+        @apply w-fit;
+        @apply z-50;
+    }
+
+    div :global(.mapboxgl-popup-content) {
+        @apply p-0;
+        @apply bg-transparent;
+        @apply shadow-none;
+    }
+
+    div :global(.mapboxgl-popup-anchor-top .mapboxgl-popup-tip) {
+        @apply border-b-background;
+    }
+
+    div :global(.mapboxgl-popup-anchor-top-left .mapboxgl-popup-tip) {
+        @apply border-b-background;
+    }
+
+    div :global(.mapboxgl-popup-anchor-top-right .mapboxgl-popup-tip) {
+        @apply border-b-background;
+    }
+
+    div :global(.mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip) {
+        @apply border-t-background;
+        @apply drop-shadow-md;
+    }
+
+    div :global(.mapboxgl-popup-anchor-bottom-left .mapboxgl-popup-tip) {
+        @apply border-t-background;
+        @apply drop-shadow-md;
+    }
+
+    div :global(.mapboxgl-popup-anchor-bottom-right .mapboxgl-popup-tip) {
+        @apply border-t-background;
+        @apply drop-shadow-md;
+    }
+
+    div :global(.mapboxgl-popup-anchor-left .mapboxgl-popup-tip) {
+        @apply border-r-background;
+    }
+
+    div :global(.mapboxgl-popup-anchor-right .mapboxgl-popup-tip) {
+        @apply border-l-background;
+    }
+</style>

website/src/lib/components/map/MapPopup.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+    import { TrackPoint, Waypoint } from 'gpx';
+    import WaypointPopup from '$lib/components/map/gpx-layer/WaypointPopup.svelte';
+    import TrackpointPopup from '$lib/components/map/gpx-layer/TrackpointPopup.svelte';
+    import OverpassPopup from '$lib/components/map/layer-control/OverpassPopup.svelte';
+    import type { PopupItem } from '$lib/components/map/map-popup';
+    import type { Writable } from 'svelte/store';
+
+    let {
+        item,
+        onContainerReady,
+    }: { item: Writable<PopupItem | null>; onContainerReady: (div: HTMLDivElement) => void } =
+        $props();
+
+    let container: HTMLDivElement | null = $state(null);
+
+    $effect(() => {
+        if (container) {
+            onContainerReady(container);
+        }
+    });
+</script>
+
+<div bind:this={container}>
+    {#if $item}
+        {#if $item.item instanceof Waypoint}
+            <WaypointPopup waypoint={$item} />
+        {:else if $item.item instanceof TrackPoint}
+            <TrackpointPopup trackpoint={$item} />
+        {:else}
+            <OverpassPopup poi={$item} />
+        {/if}
+    {/if}
+</div>

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

@@ -0,0 +1,38 @@
+<script lang="ts">
+    import CustomControl from './CustomControl';
+    import { map } from '$lib/components/map/map';
+    import { onMount, type Snippet } from 'svelte';
+
+    let {
+        position = 'top-right',
+        class: className = '',
+        children,
+    }: {
+        position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+        class: string;
+        children: Snippet;
+    } = $props();
+
+    let container: HTMLDivElement;
+    let control: CustomControl | null = null;
+
+    onMount(() => {
+        map.onLoad((map: mapboxgl.Map) => {
+            if (position.includes('right')) container.classList.add('float-right');
+            else container.classList.add('float-left');
+            container.classList.remove('hidden');
+            if (control === null) {
+                control = new CustomControl(container);
+            }
+            map.addControl(control, position);
+        });
+    });
+</script>
+
+<div
+    bind:this={container}
+    class="{className ||
+        ''} clear-both translate-0 m-[10px] mb-0 last:mb-[10px] pointer-events-auto bg-background rounded shadow-md hidden"
+>
+    {@render children()}
+</div>

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

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

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

@@ -0,0 +1,33 @@
+<script lang="ts">
+    import { gpxLayers } from '$lib/components/map/gpx-layer/gpx-layers';
+    import { onDestroy, onMount } from 'svelte';
+    // import { map, gpxLayers } from '$lib/stores';
+    // import { GPXLayer } from './gpx-layer';
+    import { DistanceMarkers } from '$lib/components/map/gpx-layer/distance-markers';
+    import { StartEndMarkers } from '$lib/components/map/gpx-layer/start-end-markers';
+    // import { onDestroy } from 'svelte';
+    // import { createPopups, removePopups } from './GPXLayerPopup';
+
+    let distanceMarkers: DistanceMarkers;
+    let startEndMarkers: StartEndMarkers;
+
+    // $: if ($map) {
+    //     createPopups($map);
+    // }
+
+    onMount(() => {
+        gpxLayers.init();
+        startEndMarkers = new StartEndMarkers();
+        distanceMarkers = new DistanceMarkers();
+    });
+
+    onDestroy(() => {
+        // removePopups();
+        if (startEndMarkers) {
+            startEndMarkers.remove();
+        }
+        if (distanceMarkers) {
+            distanceMarkers.remove();
+        }
+    });
+</script>

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

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

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

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

website/src/lib/components/map/gpx-layer/distance-markers.ts

@@ -1,45 +1,67 @@
-
-import { settings } from "$lib/db";
-import { gpxStatistics } from "$lib/stores";
-import { get } from "svelte/store";
+import { settings } from '$lib/logic/settings';
+import { gpxStatistics } from '$lib/logic/statistics';
+import { getConvertedDistanceToKilometers } from '$lib/units';
+import type { GeoJSONSource } from 'mapbox-gl';
+import { get } from 'svelte/store';
+import { map } from '$lib/components/map/map';
 
 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;
     updateBinded: () => void = this.update.bind(this);
     unsubscribes: (() => void)[] = [];
 
-    constructor(map: mapboxgl.Map) {
-        this.map = map;
-
+    constructor() {
         this.unsubscribes.push(gpxStatistics.subscribe(this.updateBinded));
         this.unsubscribes.push(distanceMarkers.subscribe(this.updateBinded));
         this.unsubscribes.push(distanceUnits.subscribe(this.updateBinded));
-        this.map.on('style.import.load', this.updateBinded);
+        this.unsubscribes.push(
+            map.subscribe((map_) => {
+                if (map_) {
+                    map_.on('style.import.load', this.updateBinded);
+                }
+            })
+        );
     }
 
     update() {
+        const map_ = get(map);
+        if (!map_) return;
+
         try {
             if (get(distanceMarkers)) {
-                let distanceSource = this.map.getSource('distance-markers');
+                let distanceSource: GeoJSONSource | undefined = map_.getSource('distance-markers');
                 if (distanceSource) {
                     distanceSource.setData(this.getDistanceMarkersGeoJSON());
                 } else {
-                    this.map.addSource('distance-markers', {
+                    map_.addSource('distance-markers', {
                         type: 'geojson',
-                        data: this.getDistanceMarkersGeoJSON()
+                        data: this.getDistanceMarkersGeoJSON(),
                     });
                 }
                 stops.forEach(([d, minzoom, maxzoom]) => {
-                    if (!this.map.getLayer(`distance-markers-${d}`)) {
-                        this.map.addLayer({
+                    if (!map_.getLayer(`distance-markers-${d}`)) {
+                        map_.addLayer({
                             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,26 +73,27 @@ export class DistanceMarkers {
                                 'text-color': 'black',
                                 'text-halo-width': 2,
                                 'text-halo-color': 'white',
-                            }
+                            },
                         });
                     } else {
-                        this.map.moveLayer(`distance-markers-${d}`);
+                        map_.moveLayer(`distance-markers-${d}`);
                     }
                 });
             } else {
                 stops.forEach(([d]) => {
-                    if (this.map.getLayer(`distance-markers-${d}`)) {
-                        this.map.removeLayer(`distance-markers-${d}`);
+                    if (map_.getLayer(`distance-markers-${d}`)) {
+                        map_.removeLayer(`distance-markers-${d}`);
                     }
                 });
             }
-        } 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 +102,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] >=
+                getConvertedDistanceToKilometers(currentTargetDistance)
+            ) {
                 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 +131,7 @@ export class DistanceMarkers {
 
         return {
             type: 'FeatureCollection',
-            features
+            features,
         };
     }
 }

website/src/lib/components/map/gpx-layer/gpx-layer-popup.ts

@@ -1,5 +1,4 @@
-import { dbUtils } from "$lib/db";
-import { MapPopup } from "$lib/components/MapPopup";
+import { MapPopup } from '$lib/components/map/map-popup';
 
 export let waypointPopup: MapPopup | null = null;
 export let trackpointPopup: MapPopup | null = null;
@@ -11,14 +10,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],
-            'right': [-10, -15],
+            left: [10, -15],
+            right: [-10, -15],
         },
     });
     trackpointPopup = new MapPopup(map, {
@@ -38,7 +37,3 @@ export function removePopups() {
         trackpointPopup = null;
     }
 }
-
-export function deleteWaypoint(fileId: string, waypointIndex: number) {
-    dbUtils.applyToFile(fileId, (file) => file.replaceWaypoints(waypointIndex, waypointIndex, []));
-}

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

@@ -0,0 +1,554 @@
+import { get, type Readable } from 'svelte/store';
+import mapboxgl from 'mapbox-gl';
+import { map } from '$lib/components/map/map';
+import { waypointPopup, trackpointPopup } from './gpx-layer-popup';
+import {
+    ListTrackSegmentItem,
+    ListWaypointItem,
+    ListWaypointsItem,
+    ListTrackItem,
+    ListFileItem,
+    ListRootItem,
+} from '$lib/components/file-list/file-list';
+import { getClosestLinePoint, getElevation } from '$lib/utils';
+import { selectedWaypoint } from '$lib/components/toolbar/tools/waypoint/waypoint';
+import { MapPin, Square } from 'lucide-static';
+import { getSymbolKey, symbols } from '$lib/assets/symbols';
+import type { GPXFileWithStatistics } from '$lib/logic/statistics-tree';
+import { selection } from '$lib/logic/selection';
+import { settings } from '$lib/logic/settings';
+import { currentTool, Tool } from '$lib/components/toolbar/tools';
+import { fileActionManager } from '$lib/logic/file-action-manager';
+import { fileActions } from '$lib/logic/file-actions';
+import { splitAs } from '$lib/components/toolbar/tools/scissors/scissors';
+import { mapCursor, MapCursorState } from '$lib/logic/map-cursor';
+
+const colors = [
+    '#ff0000',
+    '#0000ff',
+    '#46e646',
+    '#00ccff',
+    '#ff9900',
+    '#ff00ff',
+    '#ffff32',
+    '#288228',
+    '#9933ff',
+    '#50f0be',
+    '#8c645a',
+];
+
+const colorCount: { [key: string]: number } = {};
+for (let color of colors) {
+    colorCount[color] = 0;
+}
+
+// Get the color with the least amount of uses
+function getColor() {
+    let color = colors.reduce((a, b) => (colorCount[a] <= colorCount[b] ? a : b));
+    colorCount[color]++;
+    return color;
+}
+
+function decrementColor(color: string) {
+    if (colorCount.hasOwnProperty(color)) {
+        colorCount[color]--;
+    }
+}
+
+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.replace('width="24"', 'width="12"')
+        .replace('height="24"', 'height="12"')
+        .replace('stroke="currentColor"', 'stroke="SteelBlue"')
+        .replace('stroke-width="2"', 'stroke-width="1.5" x="9.6" y="0.4"')
+        .replace('fill="none"', `fill="${layerColor}"`)}
+    ${MapPin.replace('width="24"', '')
+        .replace('height="24"', '')
+        .replace('stroke="currentColor"', '')
+        .replace('path', `path fill="#3fb1ce" stroke="SteelBlue" stroke-width="1"`)
+        .replace(
+            'circle',
+            `circle fill="${symbolSvg ? 'none' : 'white'}" stroke="${symbolSvg ? 'none' : 'white'}" stroke-width="2"`
+        )} 
+    ${
+        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"') ?? ''
+    }
+    </svg>`;
+}
+
+const { directionMarkers, treeFileView, defaultOpacity, defaultWidth } = settings;
+
+export class GPXLayer {
+    fileId: string;
+    file: Readable<GPXFileWithStatistics | undefined>;
+    layerColor: string;
+    markers: mapboxgl.Marker[] = [];
+    selected: boolean = false;
+    draggable: boolean;
+    unsubscribe: Function[] = [];
+
+    updateBinded: () => void = this.update.bind(this);
+    layerOnMouseEnterBinded: (e: any) => void = this.layerOnMouseEnter.bind(this);
+    layerOnMouseLeaveBinded: () => void = this.layerOnMouseLeave.bind(this);
+    layerOnMouseMoveBinded: (e: any) => void = this.layerOnMouseMove.bind(this);
+    layerOnClickBinded: (e: any) => void = this.layerOnClick.bind(this);
+    layerOnContextMenuBinded: (e: any) => void = this.layerOnContextMenu.bind(this);
+
+    constructor(fileId: string, file: Readable<GPXFileWithStatistics | undefined>) {
+        this.fileId = fileId;
+        this.file = file;
+        this.layerColor = getColor();
+        this.unsubscribe.push(
+            map.subscribe(($map) => {
+                if ($map) {
+                    $map.on('style.import.load', this.updateBinded);
+                    this.update();
+                }
+            })
+        );
+        this.unsubscribe.push(file.subscribe(this.updateBinded));
+        this.unsubscribe.push(
+            selection.subscribe(($selection) => {
+                let newSelected = $selection.hasAnyChildren(new ListFileItem(this.fileId));
+                if (this.selected || newSelected) {
+                    this.selected = newSelected;
+                    this.update();
+                }
+                if (newSelected) {
+                    this.moveToFront();
+                }
+            })
+        );
+        this.unsubscribe.push(directionMarkers.subscribe(this.updateBinded));
+        this.unsubscribe.push(
+            currentTool.subscribe((tool) => {
+                if (tool === Tool.WAYPOINT && !this.draggable) {
+                    this.draggable = true;
+                    this.markers.forEach((marker) => marker.setDraggable(true));
+                } else if (tool !== Tool.WAYPOINT && this.draggable) {
+                    this.draggable = false;
+                    this.markers.forEach((marker) => marker.setDraggable(false));
+                }
+            })
+        );
+        this.draggable = get(currentTool) === Tool.WAYPOINT;
+    }
+
+    update() {
+        const _map = get(map);
+        let file = get(this.file)?.file;
+        if (!_map || !file) {
+            return;
+        }
+
+        if (
+            file._data.style &&
+            file._data.style.color &&
+            this.layerColor !== `#${file._data.style.color}`
+        ) {
+            decrementColor(this.layerColor);
+            this.layerColor = `#${file._data.style.color}`;
+        }
+
+        try {
+            let source = _map.getSource(this.fileId);
+            if (source) {
+                source.setData(this.getGeoJSON());
+            } else {
+                _map.addSource(this.fileId, {
+                    type: 'geojson',
+                    data: this.getGeoJSON(),
+                });
+            }
+
+            if (!_map.getLayer(this.fileId)) {
+                _map.addLayer({
+                    id: this.fileId,
+                    type: 'line',
+                    source: this.fileId,
+                    layout: {
+                        'line-join': 'round',
+                        'line-cap': 'round',
+                    },
+                    paint: {
+                        'line-color': ['get', 'color'],
+                        'line-width': ['get', 'width'],
+                        'line-opacity': ['get', 'opacity'],
+                    },
+                });
+
+                _map.on('click', this.fileId, this.layerOnClickBinded);
+                _map.on('contextmenu', this.fileId, this.layerOnContextMenuBinded);
+                _map.on('mouseenter', this.fileId, this.layerOnMouseEnterBinded);
+                _map.on('mouseleave', this.fileId, this.layerOnMouseLeaveBinded);
+                _map.on('mousemove', this.fileId, this.layerOnMouseMoveBinded);
+            }
+
+            if (get(directionMarkers)) {
+                if (!_map.getLayer(this.fileId + '-direction')) {
+                    _map.addLayer(
+                        {
+                            id: this.fileId + '-direction',
+                            type: 'symbol',
+                            source: this.fileId,
+                            layout: {
+                                'text-field': '»',
+                                'text-offset': [0, -0.1],
+                                'text-keep-upright': false,
+                                'text-max-angle': 361,
+                                'text-allow-overlap': true,
+                                'text-font': ['Open Sans Bold'],
+                                'symbol-placement': 'line',
+                                'symbol-spacing': 20,
+                            },
+                            paint: {
+                                'text-color': 'white',
+                                'text-opacity': 0.7,
+                                'text-halo-width': 0.2,
+                                'text-halo-color': 'white',
+                            },
+                        },
+                        _map.getLayer('distance-markers') ? 'distance-markers' : undefined
+                    );
+                }
+            } else {
+                if (_map.getLayer(this.fileId + '-direction')) {
+                    _map.removeLayer(this.fileId + '-direction');
+                }
+            }
+
+            let visibleItems: [number, number][] = [];
+            file.forEachSegment((segment, trackIndex, segmentIndex) => {
+                if (!segment._data.hidden) {
+                    visibleItems.push([trackIndex, segmentIndex]);
+                }
+            });
+
+            _map.setFilter(
+                this.fileId,
+                [
+                    'any',
+                    ...visibleItems.map(([trackIndex, segmentIndex]) => [
+                        'all',
+                        ['==', 'trackIndex', trackIndex],
+                        ['==', 'segmentIndex', segmentIndex],
+                    ]),
+                ],
+                { validate: false }
+            );
+            if (_map.getLayer(this.fileId + '-direction')) {
+                _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
+            return;
+        }
+
+        let markerIndex = 0;
+
+        if (get(selection).hasAnyChildren(new ListFileItem(this.fileId))) {
+            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].setLngLat(waypoint.getCoordinates());
+                    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');
+                    element.innerHTML = getMarkerForSymbol(symbolKey, this.layerColor);
+                    let marker = new mapboxgl.Marker({
+                        draggable: this.draggable,
+                        element,
+                        anchor: 'bottom',
+                    }).setLngLat(waypoint.getCoordinates());
+                    Object.defineProperty(marker, '_waypoint', { value: waypoint, writable: true });
+                    let dragEndTimestamp = 0;
+                    marker.getElement().addEventListener('mousemove', (e) => {
+                        if (marker._isDragging) {
+                            return;
+                        }
+                        waypointPopup?.setItem({ item: marker._waypoint, fileId: this.fileId });
+                        e.stopPropagation();
+                    });
+                    marker.getElement().addEventListener('click', (e) => {
+                        if (dragEndTimestamp && Date.now() - dragEndTimestamp < 1000) {
+                            return;
+                        }
+
+                        if (get(currentTool) === Tool.WAYPOINT && e.shiftKey) {
+                            fileActions.deleteWaypoint(this.fileId, marker._waypoint._data.index);
+                            e.stopPropagation();
+                            return;
+                        }
+
+                        if (get(treeFileView)) {
+                            if (
+                                (e.ctrlKey || e.metaKey) &&
+                                get(selection).hasAnyChildren(
+                                    new ListWaypointsItem(this.fileId),
+                                    false
+                                )
+                            ) {
+                                selection.addSelectItem(
+                                    new ListWaypointItem(this.fileId, marker._waypoint._data.index)
+                                );
+                            } else {
+                                selection.selectItem(
+                                    new ListWaypointItem(this.fileId, marker._waypoint._data.index)
+                                );
+                            }
+                        } else if (get(currentTool) === Tool.WAYPOINT) {
+                            selectedWaypoint.set([marker._waypoint, this.fileId]);
+                        } else {
+                            waypointPopup?.setItem({ item: marker._waypoint, fileId: this.fileId });
+                        }
+                        e.stopPropagation();
+                    });
+                    marker.on('dragstart', () => {
+                        mapCursor.notify(MapCursorState.WAYPOINT_DRAGGING, true);
+                        marker.getElement().style.cursor = 'grabbing';
+                        waypointPopup?.hide();
+                    });
+                    marker.on('dragend', (e) => {
+                        mapCursor.notify(MapCursorState.WAYPOINT_DRAGGING, false);
+                        marker.getElement().style.cursor = '';
+                        getElevation([marker._waypoint]).then((ele) => {
+                            fileActionManager.applyToFile(this.fileId, (file) => {
+                                let latLng = marker.getLngLat();
+                                let wpt = file.wpt[marker._waypoint._data.index];
+                                wpt.setCoordinates({
+                                    lat: latLng.lat,
+                                    lon: latLng.lng,
+                                });
+                                wpt.ele = ele[0];
+                            });
+                        });
+                        dragEndTimestamp = Date.now();
+                    });
+                    this.markers.push(marker);
+                }
+                markerIndex++;
+            });
+        }
+
+        while (markerIndex < this.markers.length) {
+            // Remove extra markers
+            this.markers.pop()?.remove();
+        }
+
+        this.markers.forEach((marker) => {
+            if (!marker._waypoint._data.hidden) {
+                marker.addTo(_map);
+            } else {
+                marker.remove();
+            }
+        });
+    }
+
+    remove() {
+        const _map = get(map);
+        if (_map) {
+            _map.off('click', this.fileId, this.layerOnClickBinded);
+            _map.off('contextmenu', this.fileId, this.layerOnContextMenuBinded);
+            _map.off('mouseenter', this.fileId, this.layerOnMouseEnterBinded);
+            _map.off('mouseleave', this.fileId, this.layerOnMouseLeaveBinded);
+            _map.off('mousemove', this.fileId, this.layerOnMouseMoveBinded);
+            _map.off('style.import.load', this.updateBinded);
+
+            if (_map.getLayer(this.fileId + '-direction')) {
+                _map.removeLayer(this.fileId + '-direction');
+            }
+            if (_map.getLayer(this.fileId)) {
+                _map.removeLayer(this.fileId);
+            }
+            if (_map.getSource(this.fileId)) {
+                _map.removeSource(this.fileId);
+            }
+        }
+
+        this.markers.forEach((marker) => {
+            marker.remove();
+        });
+
+        this.unsubscribe.forEach((unsubscribe) => unsubscribe());
+
+        decrementColor(this.layerColor);
+    }
+
+    moveToFront() {
+        const _map = get(map);
+        if (!_map) {
+            return;
+        }
+        if (_map.getLayer(this.fileId)) {
+            _map.moveLayer(this.fileId);
+        }
+        if (_map.getLayer(this.fileId + '-direction')) {
+            _map.moveLayer(
+                this.fileId + '-direction',
+                _map.getLayer('distance-markers') ? 'distance-markers' : undefined
+            );
+        }
+    }
+
+    layerOnMouseEnter(e: any) {
+        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)
+            )
+        ) {
+            mapCursor.notify(MapCursorState.SCISSORS, true);
+        } else {
+            mapCursor.notify(MapCursorState.LAYER_HOVER, true);
+        }
+    }
+
+    layerOnMouseLeave() {
+        mapCursor.notify(MapCursorState.SCISSORS, false);
+        mapCursor.notify(MapCursorState.LAYER_HOVER, false);
+    }
+
+    layerOnMouseMove(e: any) {
+        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 }
+                );
+                trackpointPopup?.setItem({ item: closest, fileId: this.fileId });
+            }
+        }
+    }
+
+    layerOnClick(e: any) {
+        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)
+            )
+        ) {
+            fileActions.split(get(splitAs), this.fileId, trackIndex, segmentIndex, {
+                lat: e.lngLat.lat,
+                lon: e.lngLat.lng,
+            });
+            return;
+        }
+
+        let file = get(this.file)?.file;
+        if (!file) {
+            return;
+        }
+
+        let item = undefined;
+        if (get(treeFileView) && file.getSegments().length > 1) {
+            // 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);
+        }
+
+        if (e.originalEvent.ctrlKey || e.originalEvent.metaKey) {
+            selection.addSelectItem(item);
+        } else {
+            selection.selectItem(item);
+        }
+    }
+
+    layerOnContextMenu(e: any) {
+        if (e.originalEvent.ctrlKey) {
+            this.layerOnClick(e);
+        }
+    }
+
+    getGeoJSON(): GeoJSON.FeatureCollection {
+        let file = get(this.file)?.file;
+        if (!file) {
+            return {
+                type: 'FeatureCollection',
+                features: [],
+            };
+        }
+
+        let data = file.toGeoJSON();
+
+        let trackIndex = 0,
+            segmentIndex = 0;
+        for (let feature of data.features) {
+            if (!feature.properties) {
+                feature.properties = {};
+            }
+            if (!feature.properties.color) {
+                feature.properties.color = this.layerColor;
+            }
+            if (!feature.properties.opacity) {
+                feature.properties.opacity = get(defaultOpacity);
+            }
+            if (!feature.properties.width) {
+                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;
+            feature.properties.segmentIndex = segmentIndex;
+
+            segmentIndex++;
+            if (segmentIndex >= file.trk[trackIndex].trkseg.length) {
+                segmentIndex = 0;
+                trackIndex++;
+            }
+        }
+        return data;
+    }
+}