New translations elevation.mdx (Serbian (Latin))

.prettierrc

@@ -9,7 +9,7 @@
       "files": "**/*.svelte",
       "options": {
         "plugins": ["prettier-plugin-svelte"],
-		"parser": "svelte"
+		    "parser": "svelte"
       }
     }
   ]

README.md

@@ -26,8 +26,9 @@ 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.
+
+-   `gpx`: a Typescript library for parsing and manipulating GPX files,
+-   `website`: the website itself, which is a [SvelteKit](https://kit.svelte.dev/) application.
 
 You will need [Node.js](https://nodejs.org/) to build and run these two parts.
 
@@ -54,26 +55,25 @@ npm run dev
 
 This project has been made possible thanks to the following open source projects:
 
-- Development:
-  - [Svelte](https://github.com/sveltejs/svelte) and [SvelteKit](https://github.com/sveltejs/kit) — seamless development experience
-  - [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
-  - [tailwindcss](https://github.com/tailwindlabs/tailwindcss) — easy styling
-  - [Chart.js](https://github.com/chartjs/Chart.js) — beautiful and fast charts
-- Logic:
-  - [immer](https://github.com/immerjs/immer) — complex state management
-  - [Dexie.js](https://github.com/dexie/Dexie.js) — IndexedDB wrapper
-  - [fast-xml-parser](https://github.com/NaturalIntelligence/fast-xml-parser) — fast GPX file parsing
-  - [SortableJS](https://github.com/SortableJS/Sortable) — creating a sortable file tree
-- Mapping:
-  - [Mapbox GL JS](https://github.com/mapbox/mapbox-gl-js) — beautiful and fast interactive maps
-  - [brouter](https://github.com/abrensch/brouter) — routing engine
-  - [OpenStreetMap](https://www.openstreetmap.org) — map data used by Mapbox and brouter
-- Search:
-  - [DocSearch](https://github.com/algolia/docsearch) — search engine for the documentation
+-   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
+-   Design:
+    -   [shadcn-svelte](https://github.com/huntabyte/shadcn-svelte) — beautiful components
+    -   [@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:
+    -   [immer](https://github.com/immerjs/immer) — complex state management
+    -   [Dexie.js](https://github.com/dexie/Dexie.js) — IndexedDB wrapper
+    -   [fast-xml-parser](https://github.com/NaturalIntelligence/fast-xml-parser) — fast GPX file parsing
+    -   [SortableJS](https://github.com/SortableJS/Sortable) — creating a sortable file tree
+-   Mapping:
+    -   [Mapbox GL JS](https://github.com/mapbox/mapbox-gl-js) — beautiful and fast interactive maps
+    -   [brouter](https://github.com/abrensch/brouter) — routing engine
+    -   [OpenStreetMap](https://www.openstreetmap.org) — map data used by Mapbox and brouter
+-   Search:
+    -   [DocSearch](https://github.com/algolia/docsearch) — search engine for the documentation
 
 ## License
 

gpx/.prettierignore

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

package-lock.json

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

website/.gitignore

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

website/components.json

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

website/package.json

@@ -5,8 +5,8 @@
     "scripts": {
         "dev": "vite dev",
         "build": "vite build",
-        "prebuild": "npx tsx src/lib/pwa-manifest.ts",
-        "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",
@@ -14,69 +14,71 @@
         "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/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",
+        "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-dnd-action": "^0.9.65",
+        "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",
         "jszip": "^3.10.1",
-        "lucide-static": "^0.460.0",
-        "lucide-svelte": "^0.460.1",
-        "mapbox-gl": "^3.11.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.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

@@ -41,9 +41,11 @@ export async function handle({ event, resolve }) {
     <link rel="alternate" hreflang="x-default" href="https://gpx.studio${getURLForLanguage('en', path)}" />
     <link rel="manifest" href="/${language}.manifest.webmanifest" />`;
 
-    for (let lang of Object.keys(languages)) {
-        headTag += `   <link rel="alternate" hreflang="${lang}" href="https://gpx.studio${getURLForLanguage(lang, path)}" />
+    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, {

website/src/lib/assets/layers.ts

@@ -119,6 +119,7 @@ export const basemaps: { [key: string]: string | StyleSpecification } = {
             },
         ],
     },
+    utagawaVTT: 'https://maps.utagawavtt.com/styles/utagawavtt/style.json',
     swisstopoRaster: {
         version: 8,
         sources: {
@@ -151,11 +152,12 @@ export const basemaps: { [key: string]: string | StyleSpecification } = {
             linzTopo: {
                 type: 'raster',
                 tiles: [
-                    'https://tiles-cdn.koordinates.com/services;key=39a8b989633a4bef98bc0e065380454a/tiles/v4/layer=50767/EPSG:3857/{z}/{x}/{y}.png',
+                    'https://basemaps.linz.govt.nz/v1/tiles/topo-raster/WebMercatorQuad/{z}/{x}/{y}.webp?api=d01fbtg0ar23gctac5m0jgyy2ds',
                 ],
                 tileSize: 256,
-                maxzoom: 18,
-                attribution: '&copy; <a href="https://www.linz.govt.nz/" target="_blank">LINZ</a>',
+                maxzoom: 16,
+                attribution:
+                    '© <a href="//www.linz.govt.nz/linz-copyright">LINZ CC BY 4.0</a> © <a href="//www.linz.govt.nz/data/linz-data/linz-basemaps/data-attribution">Imagery Basemap contributors</a>',
             },
         },
         layers: [
@@ -185,8 +187,8 @@ export const basemaps: { [key: string]: string | StyleSpecification } = {
             },
         ],
     },
-    ignFrPlan: ignFrPlan,
-    ignFrTopo: ignFrTopo,
+    ignFrPlan: ignFrPlan as StyleSpecification,
+    ignFrTopo: ignFrTopo as StyleSpecification,
     ignFrScan25: {
         version: 8,
         sources: {
@@ -208,7 +210,7 @@ export const basemaps: { [key: string]: string | StyleSpecification } = {
             },
         ],
     },
-    ignFrSatellite: ignFrSatellite,
+    ignFrSatellite: ignFrSatellite as StyleSpecification,
     ignEs: {
         version: 8,
         sources: {
@@ -275,68 +277,6 @@ export const basemaps: { [key: string]: string | StyleSpecification } = {
             },
         ],
     },
-    swedenTopo: {
-        version: 8,
-        sources: {
-            swedenTopoWMTS: {
-                type: 'raster',
-                tiles: [
-                    'https://api.lantmateriet.se/open/topowebb-ccby/v1/wmts/token/1d54dd14-a28c-38a9-b6f3-b4ebfcc3c204/1.0.0/topowebb/default/3857/{z}/{y}/{x}.png',
-                ],
-                tileSize: 256,
-                maxzoom: 14,
-                attribution:
-                    '&copy; <a href="https://www.lantmateriet.se" target="_blank">Lantmäteriet</a>',
-            },
-            swedenTopoWMS: {
-                type: 'raster',
-                tiles: [
-                    'https://minkarta.lantmateriet.se/map/topowebb?REQUEST=GetMap&SERVICE=WMS&VERSION=1.1.1&FORMAT=image%2Fpng&STYLES=&TRANSPARENT=false&LAYERS=topowebbkartan&TILED=true&MAP_RESOLUTION=180&WIDTH=512&HEIGHT=512&SRS=EPSG%3A3857&BBOX={bbox-epsg-3857}',
-                ],
-                tileSize: 512,
-                minzoom: 14,
-                maxzoom: 20,
-                attribution:
-                    '&copy; <a href="https://www.lantmateriet.se" target="_blank">Lantmäteriet</a>',
-            },
-        },
-        layers: [
-            {
-                id: 'swedenTopoWMTS',
-                type: 'raster',
-                source: 'swedenTopoWMTS',
-                maxzoom: 14,
-            },
-            {
-                id: 'swedenTopoWMS',
-                type: 'raster',
-                source: 'swedenTopoWMS',
-                minzoom: 14,
-            },
-        ],
-    },
-    swedenSatellite: {
-        version: 8,
-        sources: {
-            swedenSatellite: {
-                type: 'raster',
-                tiles: [
-                    'https://minkarta.lantmateriet.se/map/ortofoto?REQUEST=GetMap&SERVICE=WMS&VERSION=1.1.1&FORMAT=image%2Fpng&STYLES=&TRANSPARENT=false&LAYERS=Ortofoto_0.5%2COrtofoto_0.4%2COrtofoto_0.25%2COrtofoto_0.16&TILED=true&MAP_RESOLUTION=180&WIDTH=512&HEIGHT=512&SRS=EPSG%3A3857&BBOX={bbox-epsg-3857}',
-                ],
-                tileSize: 512,
-                maxzoom: 22,
-                attribution:
-                    '&copy; <a href="https://www.lantmateriet.se" target="_blank">Lantmäteriet</a>',
-            },
-        },
-        layers: [
-            {
-                id: 'swedenSatellite',
-                type: 'raster',
-                source: 'swedenSatellite',
-            },
-        ],
-    },
     finlandTopo: {
         version: 8,
         sources: {
@@ -427,7 +367,7 @@ export const overlays: { [key: string]: string | StyleSpecification } = {
             },
         ],
     },
-    bikerouterGravel: bikerouterGravel,
+    bikerouterGravel: bikerouterGravel as StyleSpecification,
     swisstopoSlope: {
         version: 8,
         sources: {
@@ -803,6 +743,7 @@ export const basemapTree: LayerTreeType = {
             openTopoMap: true,
             openHikingMap: true,
             cyclOSM: true,
+            utagawaVTT: true,
         },
         countries: {
             belgium: {
@@ -831,10 +772,6 @@ export const basemapTree: LayerTreeType = {
                 ignEs: true,
                 ignEsSatellite: true,
             },
-            sweden: {
-                swedenTopo: true,
-                swedenSatellite: true,
-            },
             switzerland: {
                 swisstopoRaster: true,
                 swisstopoVector: true,
@@ -1023,6 +960,7 @@ export const defaultBasemapTree: LayerTreeType = {
             openTopoMap: true,
             openHikingMap: true,
             cyclOSM: true,
+            utagawaVTT: true,
         },
         countries: {
             belgium: {
@@ -1051,10 +989,6 @@ export const defaultBasemapTree: LayerTreeType = {
                 ignEs: false,
                 ignEsSatellite: false,
             },
-            sweden: {
-                swedenTopo: false,
-                swedenSatellite: false,
-            },
             switzerland: {
                 swisstopoRaster: false,
                 swisstopoVector: false,

website/src/lib/assets/symbols.ts

@@ -12,7 +12,7 @@ import {
     DoorOpen,
     Trees,
     Fuel,
-    Home,
+    House,
     Info,
     TreeDeciduous,
     CircleParking,
@@ -29,7 +29,8 @@ import {
     TriangleAlert,
     Anchor,
     Toilet,
-} from 'lucide-svelte';
+    type IconProps,
+} from '@lucide/svelte';
 import {
     Landmark as LandmarkSvg,
     Shell as ShellSvg,
@@ -43,7 +44,7 @@ import {
     DoorOpen as DoorOpenSvg,
     Trees as TreesSvg,
     Fuel as FuelSvg,
-    Home as HomeSvg,
+    House as HouseSvg,
     Info as InfoSvg,
     TreeDeciduous as TreeDeciduousSvg,
     CircleParking as CircleParkingSvg,
@@ -61,11 +62,11 @@ import {
     Anchor as AnchorSvg,
     Toilet as ToiletSvg,
 } from 'lucide-static';
-import type { ComponentType } from 'svelte';
+import type { Component } from 'svelte';
 
 export type Symbol = {
     value: string;
-    icon?: ComponentType<Icon>;
+    icon?: Component<IconProps>;
     iconSvg?: string;
 };
 
@@ -94,7 +95,7 @@ export const symbols: { [key: string]: Symbol } = {
     },
     drinking_water: { value: 'Drinking Water', icon: Droplet, iconSvg: DropletSvg },
     exit: { value: 'Exit', icon: DoorOpen, iconSvg: DoorOpenSvg },
-    lodge: { value: 'Lodge', icon: Home, iconSvg: HomeSvg },
+    lodge: { value: 'Lodge', icon: House, iconSvg: HouseSvg },
     lodging: { value: 'Lodging', icon: Bed, iconSvg: BedSvg },
     forest: { value: 'Forest', icon: Trees, iconSvg: TreesSvg },
     gas_station: { value: 'Gas Station', icon: Fuel, iconSvg: FuelSvg },
@@ -104,7 +105,7 @@ export const symbols: { [key: string]: Symbol } = {
         iconSvg: TrainFrontSvg,
     },
     hotel: { value: 'Hotel', icon: Bed, iconSvg: BedSvg },
-    house: { value: 'House', icon: Home, iconSvg: HomeSvg },
+    house: { value: 'House', icon: House, iconSvg: HouseSvg },
     information: { value: 'Information', icon: Info, iconSvg: InfoSvg },
     park: { value: 'Park', icon: TreeDeciduous, iconSvg: TreeDeciduousSvg },
     parking_area: { value: 'Parking Area', icon: CircleParking, iconSvg: CircleParkingSvg },

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,31 +17,31 @@
             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.Root>
-    <Tooltip.Trigger asChild let:builder>
-        <Button builders={[...builders, builder]} {variant} {...$$restProps} on:click>
-            <slot />
-        </Button>
-    </Tooltip.Trigger>
-    <Tooltip.Content {side}>
-        <span>{label}</span>
-    </Tooltip.Content>
-</Tooltip.Root>
+<Tooltip.Provider>
+    <Tooltip.Root>
+        <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,687 +0,0 @@
-<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 Chart from 'chart.js/auto';
-    import mapboxgl from 'mapbox-gl';
-    import { map } from '$lib/stores';
-    import { onDestroy, onMount } from 'svelte';
-    import {
-        BrickWall,
-        TriangleRight,
-        HeartPulse,
-        Orbit,
-        SquareActivity,
-        Thermometer,
-        Zap,
-        Circle,
-        Check,
-        ChartNoAxesColumn,
-        Construction,
-    } from 'lucide-svelte';
-    import { getSlopeColor, getSurfaceColor, getHighwayColor } from '$lib/assets/colors';
-    import { _ } from 'svelte-i18n';
-    import {
-        getCadenceWithUnits,
-        getConvertedDistance,
-        getConvertedElevation,
-        getConvertedTemperature,
-        getConvertedVelocity,
-        getDistanceUnits,
-        getDistanceWithUnits,
-        getElevationWithUnits,
-        getHeartRateWithUnits,
-        getPowerWithUnits,
-        getTemperatureWithUnits,
-        getVelocityWithUnits,
-    } from '$lib/units';
-    import type { 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;
-
-    const { distanceUnits, velocityUnits, temperatureUnits } = settings;
-
-    let canvas: HTMLCanvasElement;
-    let overlay: HTMLCanvasElement;
-    let chart: Chart;
-
-    Chart.defaults.font.family =
-        'ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"'; // Tailwind CSS font
-
-    let marker: mapboxgl.Marker | null = null;
-    let dragging = false;
-    let panning = false;
-
-    let options = {
-        animation: false,
-        parsing: false,
-        maintainAspectRatio: false,
-        scales: {
-            x: {
-                type: 'linear',
-                ticks: {
-                    callback: function (value: number) {
-                        return `${value.toFixed(1).replace(/\.0+$/, '')} ${getDistanceUnits()}`;
-                    },
-                    align: 'inner',
-                    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',
-            },
-        },
-        interaction: {
-            mode: 'nearest',
-            axis: 'x',
-            intersect: false,
-        },
-        plugins: {
-            legend: {
-                display: false,
-            },
-            decimation: {
-                enabled: true,
-            },
-            tooltip: {
-                enabled: () => !dragging && !panning,
-                callbacks: {
-                    title: function () {
-                        return '';
-                    },
-                    label: function (context: Chart.TooltipContext) {
-                        let point = context.raw;
-                        if (context.datasetIndex === 0) {
-                            if ($map && marker) {
-                                if (dragging) {
-                                    marker.remove();
-                                } else {
-                                    marker.setLngLat(point.coordinates);
-                                    marker.addTo($map);
-                                }
-                            }
-                            return `${$_('quantities.elevation')}: ${getElevationWithUnits(point.y, false)}`;
-                        } else if (context.datasetIndex === 1) {
-                            return `${$velocityUnits === 'speed' ? $_('quantities.speed') : $_('quantities.pace')}: ${getVelocityWithUnits(point.y, false)}`;
-                        } else if (context.datasetIndex === 2) {
-                            return `${$_('quantities.heartrate')}: ${getHeartRateWithUnits(point.y)}`;
-                        } else if (context.datasetIndex === 3) {
-                            return `${$_('quantities.cadence')}: ${getCadenceWithUnits(point.y)}`;
-                        } else if (context.datasetIndex === 4) {
-                            return `${$_('quantities.temperature')}: ${getTemperatureWithUnits(point.y, false)}`;
-                        } else if (context.datasetIndex === 5) {
-                            return `${$_('quantities.power')}: ${getPowerWithUnits(point.y)}`;
-                        }
-                    },
-                    afterBody: function (contexts: Chart.TooltipContext[]) {
-                        let context = contexts.filter((context) => context.datasetIndex === 0);
-                        if (context.length === 0) return;
-                        let point = context[0].raw;
-                        let slope = {
-                            at: point.slope.at.toFixed(1),
-                            segment: point.slope.segment.toFixed(1),
-                            length: getDistanceWithUnits(point.slope.length),
-                        };
-                        let surface = point.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} %)` : ''}`,
-                        ];
-
-                        if (elevationFill === 'surface') {
-                            labels.push(
-                                `    ${$_('quantities.surface')}: ${$_(`toolbar.routing.surface.${surface}`)}`
-                            );
-                        }
-
-                        if (elevationFill === 'highway') {
-                            labels.push(
-                                `    ${$_('quantities.highway')}: ${$_(`toolbar.routing.highway.${highway}`)}${
-                                    sacScale
-                                        ? ` (${$_(`toolbar.routing.sac_scale.${sacScale}`)})`
-                                        : ''
-                                }`
-                            );
-                            if (mtbScale) {
-                                labels.push(`    ${$_('toolbar.routing.mtb_scale')}: ${mtbScale}`);
-                            }
-                        }
-
-                        if (point.time) {
-                            labels.push(`    ${$_('quantities.time')}: ${df.format(point.time)}`);
-                        }
-
-                        return labels;
-                    },
-                },
-            },
-            zoom: {
-                pan: {
-                    enabled: true,
-                    mode: 'x',
-                    modifierKey: 'shift',
-                    onPanStart: function () {
-                        // hide tooltip
-                        panning = true;
-                        $slicedGPXStatistics = undefined;
-                    },
-                    onPanComplete: function () {
-                        panning = false;
-                    },
-                },
-                zoom: {
-                    wheel: {
-                        enabled: true,
-                    },
-                    mode: 'x',
-                    onZoomStart: function ({ chart, event }: { chart: Chart; event: any }) {
-                        if (
-                            event.deltaY < 0 &&
-                            Math.abs(
-                                chart.getInitialScaleBounds().x.max /
-                                    chart.options.plugins.zoom.limits.x.minRange -
-                                    chart.getZoomLevel()
-                            ) < 0.01
-                        ) {
-                            // Disable wheel pan if zoomed in to the max, and zooming in
-                            return false;
-                        }
-
-                        $slicedGPXStatistics = undefined;
-                    },
-                },
-                limits: {
-                    x: {
-                        min: 'original',
-                        max: 'original',
-                        minRange: 1,
-                    },
-                },
-            },
-        },
-        stacked: false,
-        onResize: function () {
-            updateOverlay();
-        },
-    };
-
-    let datasets: string[] = ['speed', 'hr', 'cad', 'atemp', 'power'];
-    datasets.forEach((id) => {
-        options.scales[`y${id}`] = {
-            type: 'linear',
-            position: 'right',
-            grid: {
-                display: false,
-            },
-            reverse: () => id === 'speed' && $velocityUnits === 'pace',
-            display: false,
-        };
-    });
-
-    onMount(async () => {
-        Chart.register((await import('chartjs-plugin-zoom')).default); // dynamic import to avoid SSR and 'window is not defined' error
-
-        chart = new Chart(canvas, {
-            type: 'line',
-            data: {
-                datasets: [],
-            },
-            options,
-            plugins: [
-                {
-                    id: 'toggleMarker',
-                    events: ['mouseout'],
-                    afterEvent: function (chart: Chart, args: { event: Chart.ChartEvent }) {
-                        if (args.event.type === 'mouseout') {
-                            if ($map && marker) {
-                                marker.remove();
-                            }
-                        }
-                    },
-                },
-            ],
-        });
-
-        // Map marker to show on hover
-        let element = document.createElement('div');
-        element.className = 'h-4 w-4 rounded-full bg-cyan-500 border-2 border-white';
-        marker = new mapboxgl.Marker({
-            element,
-        });
-
-        let startIndex = 0;
-        let endIndex = 0;
-        function getIndex(evt) {
-            const points = chart.getElementsAtEventForMode(
-                evt,
-                'x',
-                {
-                    intersect: false,
-                },
-                true
-            );
-
-            if (points.length === 0) {
-                const rect = canvas.getBoundingClientRect();
-                if (evt.x - rect.left <= chart.chartArea.left) {
-                    return 0;
-                } else if (evt.x - rect.left >= chart.chartArea.right) {
-                    return $gpxStatistics.local.points.length - 1;
-                } else {
-                    return undefined;
-                }
-            }
-
-            let point = points.find((point) => point.element.raw);
-            if (point) {
-                return point.element.raw.index;
-            } else {
-                return points[0].index;
-            }
-        }
-
-        let dragStarted = false;
-        function onMouseDown(evt) {
-            if (evt.shiftKey) {
-                // Panning interaction
-                return;
-            }
-            dragStarted = true;
-            canvas.style.cursor = 'col-resize';
-            startIndex = getIndex(evt);
-        }
-        function onMouseMove(evt) {
-            if (dragStarted) {
-                dragging = true;
-                endIndex = getIndex(evt);
-                if (endIndex !== undefined) {
-                    if (startIndex === undefined) {
-                        startIndex = endIndex;
-                    } else if (startIndex !== endIndex) {
-                        $slicedGPXStatistics = [
-                            $gpxStatistics.slice(
-                                Math.min(startIndex, endIndex),
-                                Math.max(startIndex, endIndex)
-                            ),
-                            Math.min(startIndex, endIndex),
-                            Math.max(startIndex, endIndex),
-                        ];
-                    }
-                }
-            }
-        }
-        function onMouseUp(evt) {
-            dragStarted = false;
-            dragging = false;
-            canvas.style.cursor = '';
-            endIndex = getIndex(evt);
-            if (startIndex === endIndex) {
-                $slicedGPXStatistics = undefined;
-            }
-        }
-        canvas.addEventListener('pointerdown', onMouseDown);
-        canvas.addEventListener('pointermove', onMouseMove);
-        canvas.addEventListener('pointerup', onMouseUp);
-    });
-
-    $: if (chart && $distanceUnits && $velocityUnits && $temperatureUnits) {
-        let data = $gpxStatistics;
-
-        // update data
-        chart.data.datasets[0] = {
-            label: $_('quantities.elevation'),
-            data: data.local.points.map((point, index) => {
-                return {
-                    x: getConvertedDistance(data.local.distance.total[index]),
-                    y: point.ele ? getConvertedElevation(point.ele) : 0,
-                    time: point.time,
-                    slope: {
-                        at: data.local.slope.at[index],
-                        segment: data.local.slope.segment[index],
-                        length: data.local.slope.length[index],
-                    },
-                    extensions: point.getExtensions(),
-                    coordinates: point.getCoordinates(),
-                    index: index,
-                };
-            }),
-            normalized: true,
-            fill: 'start',
-            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,
-                };
-            }),
-            normalized: true,
-            yAxisID: 'yspeed',
-            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,
-                };
-            }),
-            normalized: true,
-            yAxisID: 'yhr',
-            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,
-                };
-            }),
-            normalized: true,
-            yAxisID: 'ycad',
-            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,
-                };
-            }),
-            normalized: true,
-            yAxisID: 'yatemp',
-            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,
-                };
-            }),
-            normalized: true,
-            yAxisID: 'ypower',
-            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);
-    }
-
-    function surfaceFillCallback(context) {
-        return getSurfaceColor(context.p0.raw.extensions.surface);
-    }
-
-    function highwayFillCallback(context) {
-        return getHighwayColor(
-            context.p0.raw.extensions.highway,
-            context.p0.raw.extensions.sac_scale,
-            context.p0.raw.extensions.mtb_scale
-        );
-    }
-
-    $: if (chart) {
-        if (elevationFill === 'slope') {
-            chart.data.datasets[0]['segment'] = {
-                backgroundColor: slopeFillCallback,
-            };
-        } else if (elevationFill === 'surface') {
-            chart.data.datasets[0]['segment'] = {
-                backgroundColor: surfaceFillCallback,
-            };
-        } else if (elevationFill === 'highway') {
-            chart.data.datasets[0]['segment'] = {
-                backgroundColor: highwayFillCallback,
-            };
-        } else {
-            chart.data.datasets[0]['segment'] = {};
-        }
-        chart.update();
-    }
-
-    $: if (additionalDatasets && chart) {
-        let includeSpeed = additionalDatasets.includes('speed');
-        let includeHeartRate = additionalDatasets.includes('hr');
-        let includeCadence = additionalDatasets.includes('cad');
-        let includeTemperature = additionalDatasets.includes('atemp');
-        let includePower = additionalDatasets.includes('power');
-        if (chart.data.datasets.length > 0) {
-            chart.data.datasets[1].hidden = !includeSpeed;
-            chart.data.datasets[2].hidden = !includeHeartRate;
-            chart.data.datasets[3].hidden = !includeCadence;
-            chart.data.datasets[4].hidden = !includeTemperature;
-            chart.data.datasets[5].hidden = !includePower;
-        }
-        chart.update();
-    }
-
-    function updateOverlay() {
-        if (!canvas) {
-            return;
-        }
-
-        overlay.width = canvas.width / window.devicePixelRatio;
-        overlay.height = canvas.height / window.devicePixelRatio;
-        overlay.style.width = `${overlay.width}px`;
-        overlay.style.height = `${overlay.height}px`;
-
-        if ($slicedGPXStatistics) {
-            let startIndex = $slicedGPXStatistics[1];
-            let endIndex = $slicedGPXStatistics[2];
-
-            // Draw selection rectangle
-            let selectionContext = overlay.getContext('2d');
-            if (selectionContext) {
-                selectionContext.fillStyle = $mode === 'dark' ? 'white' : 'black';
-                selectionContext.globalAlpha = $mode === 'dark' ? 0.2 : 0.1;
-                selectionContext.clearRect(0, 0, overlay.width, overlay.height);
-
-                let startPixel = chart.scales.x.getPixelForValue(
-                    getConvertedDistance($gpxStatistics.local.distance.total[startIndex])
-                );
-                let endPixel = chart.scales.x.getPixelForValue(
-                    getConvertedDistance($gpxStatistics.local.distance.total[endIndex])
-                );
-
-                selectionContext.fillRect(
-                    startPixel,
-                    chart.chartArea.top,
-                    endPixel - startPixel,
-                    chart.chartArea.height
-                );
-            }
-        } else if (overlay) {
-            let selectionContext = overlay.getContext('2d');
-            if (selectionContext) {
-                selectionContext.clearRect(0, 0, overlay.width, overlay.height);
-            }
-        }
-    }
-
-    $: $slicedGPXStatistics, $mode, updateOverlay();
-
-    onDestroy(() => {
-        if (chart) {
-            chart.destroy();
-        }
-    });
-</script>
-
-<div class="h-full grow min-w-0 relative py-2">
-    <canvas bind:this={overlay} class="w-full h-full absolute pointer-events-none"></canvas>
-    <canvas bind:this={canvas} class="w-full h-full absolute"></canvas>
-    {#if showControls}
-        <div class="absolute bottom-10 right-1.5">
-            <Popover.Root>
-                <Popover.Trigger asChild let:builder>
-                    <ButtonWithTooltip
-                        label={$_('chart.settings')}
-                        builders={[builder]}
-                        variant="outline"
-                        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}
-                >
-                    <ToggleGroup.Root
-                        class="flex flex-col items-start gap-0 p-1"
-                        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"
-                            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" />
-                                {/if}
-                            </div>
-                            <TriangleRight size="15" class="mr-1" />
-                            {$_('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"
-                            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" />
-                                {/if}
-                            </div>
-                            <BrickWall size="15" class="mr-1" />
-                            {$_('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"
-                            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" />
-                                {/if}
-                            </div>
-                            <Construction size="15" class="mr-1" />
-                            {$_('quantities.highway')}
-                        </ToggleGroup.Item>
-                    </ToggleGroup.Root>
-                    <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"
-                            value="speed"
-                        >
-                            <div class="w-6 flex justify-center items-center">
-                                {#if additionalDatasets.includes('speed')}
-                                    <Check size="14" />
-                                {/if}
-                            </div>
-                            <Zap size="15" class="mr-1" />
-                            {$velocityUnits === 'speed'
-                                ? $_('quantities.speed')
-                                : $_('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"
-                            value="hr"
-                        >
-                            <div class="w-6 flex justify-center items-center">
-                                {#if additionalDatasets.includes('hr')}
-                                    <Check size="14" />
-                                {/if}
-                            </div>
-                            <HeartPulse size="15" class="mr-1" />
-                            {$_('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"
-                            value="cad"
-                        >
-                            <div class="w-6 flex justify-center items-center">
-                                {#if additionalDatasets.includes('cad')}
-                                    <Check size="14" />
-                                {/if}
-                            </div>
-                            <Orbit size="15" class="mr-1" />
-                            {$_('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"
-                            value="atemp"
-                        >
-                            <div class="w-6 flex justify-center items-center">
-                                {#if additionalDatasets.includes('atemp')}
-                                    <Check size="14" />
-                                {/if}
-                            </div>
-                            <Thermometer size="15" class="mr-1" />
-                            {$_('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"
-                            value="power"
-                        >
-                            <div class="w-6 flex justify-center items-center">
-                                {#if additionalDatasets.includes('power')}
-                                    <Check size="14" />
-                                {/if}
-                            </div>
-                            <SquareActivity size="15" class="mr-1" />
-                            {$_('quantities.power')}
-                        </ToggleGroup.Item>
-                    </ToggleGroup.Root>
-                </Popover.Content>
-            </Popover.Root>
-        </div>
-    {/if}
-</div>

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, House, Map } from '@lucide/svelte';
+    import { i18n } from '$lib/i18n.svelte';
     import { getURLForLanguage } from '$lib/utils';
 </script>
 
@@ -14,109 +14,109 @@
                 <Logo class="h-8" width="153" />
                 <Button
                     variant="link"
-                    class="h-6 px-0 text-muted-foreground"
+                    class="h-6 px-0 has-[>svg]:px-0 text-muted-foreground"
                     href="https://github.com/gpxstudio/gpx.studio/blob/main/LICENSE"
                     target="_blank"
                 >
-                    MIT © 2024 gpx.studio
+                    MIT © 2025 gpx.studio
                 </Button>
                 <LanguageSelect class="w-40 mt-3" />
             </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, '/')}
+                        class="h-6 px-0 has-[>svg]:px-0 text-muted-foreground"
+                        href={getURLForLanguage(i18n.lang, '/')}
                     >
-                        <Home size="16" class="mr-1" />
-                        {$_('homepage.home')}
+                        <House size="16" />
+                        {i18n._('homepage.home')}
                     </Button>
                     <Button
                         variant="link"
-                        class="h-6 px-0 text-muted-foreground"
-                        href={getURLForLanguage($locale, '/app')}
+                        class="h-6 px-0 has-[>svg]:px-0 text-muted-foreground"
+                        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')}
+                        class="h-6 px-0 has-[>svg]:px-0 text-muted-foreground"
+                        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"
+                        class="h-6 px-0 has-[>svg]: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"
-                        class="h-6 px-0 text-muted-foreground"
+                        class="h-6 px-0 has-[>svg]:px-0 text-muted-foreground"
                         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"
-                        class="h-6 px-0 text-muted-foreground"
+                        class="h-6 px-0 has-[>svg]:px-0 text-muted-foreground"
                         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"
-                        class="h-6 px-0 text-muted-foreground"
+                        class="h-6 px-0 has-[>svg]:px-0 text-muted-foreground"
                         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"
+                        class="h-6 px-0 has-[>svg]: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"
-                        class="h-6 px-0 text-muted-foreground"
+                        class="h-6 px-0 has-[>svg]:px-0 text-muted-foreground"
                         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"
-                        class="h-6 px-0 text-muted-foreground"
+                        class="h-6 px-0 has-[>svg]:px-0 text-muted-foreground"
                         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" />
@@ -54,8 +57,10 @@
             <Tooltip
                 class={orientation === 'horizontal' ? 'hidden xs:block' : ''}
                 label="{$velocityUnits === 'speed'
-                    ? $_('quantities.speed')
-                    : $_('quantities.pace')} ({$_('quantities.moving')} / {$_('quantities.total')})"
+                    ? 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" />
@@ -72,7 +77,7 @@
         {#if panelSize > 160 || orientation === 'horizontal'}
             <Tooltip
                 class={orientation === 'horizontal' ? 'hidden md:block' : ''}
-                label="{$_('quantities.time')} ({$_('quantities.moving')} / {$_(
+                label="{i18n._('quantities.time')} ({i18n._('quantities.moving')} / {i18n._(
                     'quantities.total'
                 )})"
             >

website/src/lib/components/Help.svelte

@@ -1,19 +1,26 @@
 <script lang="ts">
-    import { CircleHelp } from 'lucide-svelte';
-    import { _ } from 'svelte-i18n';
+    import { CircleQuestionMark } from '@lucide/svelte';
+    import { i18n } from '$lib/i18n.svelte';
+    import type { Snippet } from 'svelte';
 
-    export let link: string | undefined = undefined;
+    let {
+        link,
+        class: className = '',
+        children,
+    }: {
+        link: string;
+        class?: string;
+        children: Snippet;
+    } = $props();
 </script>
 
-<div
-    class="text-sm bg-secondary rounded border flex flex-row items-center p-2 {$$props.class || ''}"
->
-    <CircleHelp size="16" class="w-4 mr-2 shrink-0 grow-0" />
+<div class="text-sm bg-secondary rounded border flex flex-row items-center p-2 {className}">
+    <CircleQuestionMark size="16" class="w-4 mr-2 shrink-0 grow-0" />
     <div>
-        <slot />
+        {@render children()}
         {#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,51 +1,36 @@
 <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';
+    import { Languages } from '@lucide/svelte';
+    import { i18n } from '$lib/i18n.svelte';
 
-    let selected = {
-        value: '',
-        label: '',
-    };
-
-    $: if ($locale) {
-        selected = {
-            value: $locale,
-            label: languages[$locale],
-        };
-    }
+    let {
+        class: className = '',
+    }: {
+        class?: string;
+    } = $props();
 </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="min-w-[180px] {className}" aria-label={i18n._('menu.language')}>
         <Languages size="16" />
-        <Select.Value class="ml-2 mr-auto" />
+        <span class="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}
         {/each}
     </Select.Content>
 </Select.Root>
-
-<!-- hidden links for svelte crawling -->
-<div class="hidden">
-    {#if !$page.url.pathname.includes('404')}
-        {#each Object.entries(languages) as [lang, label]}
-            <a href={getURLForLanguage(lang, $page.url.pathname)}>
-                {label}
-            </a>
-        {/each}
-    {/if}
-</div>

website/src/lib/components/Logo.svelte

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

website/src/lib/components/Map.svelte

@@ -1,393 +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 embeddedApp = false;
-    let fitBoundsOptions: mapboxgl.FitBoundsOptions = {
-        maxZoom: 15,
-        linear: true,
-        easing: () => 1,
-    };
-
-    const { distanceUnits, elevationProfile, treeFileView, bottomPanelSize, rightPanelSize } =
-        settings;
-    let scaleControl = new mapboxgl.ScaleControl({
-        unit: $distanceUnits,
-    });
-
-    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';
-        }
-
-        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: [],
-                        },
-                    },
-                ],
-            },
-            projection: 'globe',
-            zoom: 0,
-            hash: hash,
-            language,
-            attributionControl: false,
-            logoPosition: 'bottom-right',
-            boxZoom: false,
-        });
-        newMap.on('load', () => {
-            $map = newMap; // only set the store after the map has loaded
-            window._map = newMap; // entry point for extensions
-            scaleControl.setUnit($distanceUnits);
-        });
-
-        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 && (!$treeFileView || !$elevationProfile || $bottomPanelSize || $rightPanelSize)) {
-        $map.resize();
-    }
-</script>
-
-<div {...$$restProps}>
-    <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>{$_('webgl2_required')}</p>
-            <Button href="https://get.webgl.org/webgl2/" target="_blank">
-                {$_('enable_webgl2')}
-            </Button>
-        {:else if embeddedApp}
-            <p>The app cannot be embedded in an iframe.</p>
-            <Button href="https://gpx.studio/help/integration" target="_blank">
-                Learn how to create a map for your website
-            </Button>
-        {/if}
-    </div>
-</div>
-
-<style lang="postcss">
-    div :global(.mapboxgl-map) {
-        @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

@@ -43,40 +43,35 @@
         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';
+    } 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 { 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';
+    import { tick } from 'svelte';
+    import { allowedPastes } from '$lib/components/file-list/sortable-file-list';
 
     const {
         distanceUnits,
@@ -94,121 +89,109 @@
         routing,
     } = settings;
 
-    let undoDisabled = derived(canUndo, ($canUndo) => !$canUndo);
-    let redoDisabled = derived(canRedo, ($canRedo) => !$canRedo);
+    const canUndo = fileActionManager.canUndo;
+    const canRedo = fileActionManager.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={getURLForLanguage($locale, '/')} 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}
+                        onclick={fileActions.duplicateSelection}
                         disabled={$selection.size == 0}
                     >
-                        <Copy size="16" class="mr-1" />
-                        {$_('menu.duplicate')}
+                        <Copy size="16" />
+                        {i18n._('menu.duplicate')}
                         <Shortcut key="D" ctrl={true} />
                     </Menubar.Item>
                     <Menubar.Separator />
                     <Menubar.Item
-                        on:click={dbUtils.deleteSelectedFiles}
+                        onclick={() => tick().then(fileActions.deleteSelectedFiles)}
                         disabled={$selection.size == 0}
                     >
-                        <FileX size="16" class="mr-1" />
-                        {$_('menu.close')}
+                        <FileX size="16" />
+                        {i18n._('menu.delete')}
                         <Shortcut key="⌫" ctrl={true} />
                     </Menubar.Item>
                     <Menubar.Item
-                        on:click={dbUtils.deleteAllFiles}
-                        disabled={$fileObservers.size == 0}
+                        onclick={fileActions.deleteAllFiles}
+                        disabled={fileStateCollection.size == 0}
                     >
-                        <FileX size="16" class="mr-1" />
-                        {$_('menu.close_all')}
+                        <FileX size="16" />
+                        {i18n._('menu.delete_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={!$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={!$canRedo}>
+                        <Redo2 size="16" />
+                        {i18n._('menu.redo')}
                         <Shortcut key="Z" ctrl={true} shift={true} />
                     </Menubar.Item>
                     <Menubar.Separator />
@@ -221,10 +204,10 @@
                                         item instanceof ListFileItem ||
                                         item instanceof ListTrackItem
                                 )}
-                        on:click={() => ($editMetadata = true)}
+                        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
@@ -236,27 +219,27 @@
                                         item instanceof ListFileItem ||
                                         item instanceof ListTrackItem
                                 )}
-                        on:click={() => ($editStyle = true)}
+                        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>
@@ -264,56 +247,71 @@
                         {#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)}
                             <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 $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
@@ -321,124 +319,118 @@
                                 $copied.length === 0 ||
                                 ($selection.size > 0 &&
                                     !allowedPastes[$copied[0].level].includes(
-                                        $selection.getSelected().pop()?.level
+                                        $selection.getSelected().pop()!.level
                                     ))}
-                            on:click={pasteSelection}
+                            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}
+                        onclick={() => tick().then(fileActions.deleteSelection)}
                         disabled={$selection.size == 0}
                     >
-                        <Trash2 size="16" class="mr-1" />
-                        {$_('menu.delete')}
+                        <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={$treeFileView}>
-                        <ListTree size="16" class="mr-1" />
-                        {$_('menu.tree_file_view')}
+                        <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
+                        <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
+                                    >{i18n._('menu.metric')}</Menubar.RadioItem
                                 >
                                 <Menubar.RadioItem value="imperial"
-                                    >{$_('menu.imperial')}</Menubar.RadioItem
+                                    >{i18n._('menu.imperial')}</Menubar.RadioItem
                                 >
                                 <Menubar.RadioItem value="nautical"
-                                    >{$_('menu.nautical')}</Menubar.RadioItem
+                                    >{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
+                                    >{i18n._('quantities.speed')}</Menubar.RadioItem
                                 >
                                 <Menubar.RadioItem value="pace"
-                                    >{$_('quantities.pace')}</Menubar.RadioItem
+                                    >{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
+                                    >{i18n._('menu.celsius')}</Menubar.RadioItem
                                 >
                                 <Menubar.RadioItem value="fahrenheit"
-                                    >{$_('menu.fahrenheit')}</Menubar.RadioItem
+                                    >{i18n._('menu.fahrenheit')}</Menubar.RadioItem
                                 >
                             </Menubar.RadioGroup>
                         </Menubar.SubContent>
@@ -446,11 +438,11 @@
                     <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>
@@ -461,24 +453,25 @@
                     </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
+                                    >{i18n._('menu.light')}</Menubar.RadioItem
                                 >
-                                <Menubar.RadioItem value="dark">{$_('menu.dark')}</Menubar.RadioItem
+                                <Menubar.RadioItem value="dark"
+                                    >{i18n._('menu.dark')}</Menubar.RadioItem
                                 >
                             </Menubar.RadioGroup>
                         </Menubar.SubContent>
@@ -486,23 +479,23 @@
                     <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
+                                    >{i18n._('menu.mapillary')}</Menubar.RadioItem
                                 >
                                 <Menubar.RadioItem value="google"
-                                    >{$_('menu.google')}</Menubar.RadioItem
+                                    >{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>
@@ -513,11 +506,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
@@ -525,12 +518,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>
@@ -543,15 +536,17 @@
 <svelte:window
     on:keydown={(e) => {
         let targetInput =
-            e.target.tagName === 'INPUT' ||
-            e.target.tagName === 'TEXTAREA' ||
-            e.target.tagName === 'SELECT' ||
-            e.target.role === 'combobox' ||
-            e.target.role === 'radio' ||
-            e.target.role === 'menu' ||
-            e.target.role === 'menuitem' ||
-            e.target.role === 'menuitemradio' ||
-            e.target.role === 'menuitemcheckbox';
+            e &&
+            e.target &&
+            (e.target.tagName === 'INPUT' ||
+                e.target.tagName === 'TEXTAREA' ||
+                e.target.tagName === 'SELECT' ||
+                e.target.role === 'combobox' ||
+                e.target.role === 'radio' ||
+                e.target.role === 'menu' ||
+                e.target.role === 'menuitem' ||
+                e.target.role === 'menuitemradio' ||
+                e.target.role === 'menuitemcheckbox');
 
         if (e.key === '+' && (e.metaKey || e.ctrlKey)) {
             createFile();
@@ -560,16 +555,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)) {
@@ -579,32 +574,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)) {
@@ -614,7 +609,7 @@
                     .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)) {
@@ -625,14 +620,14 @@
             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();
@@ -649,28 +644,20 @@
         } else if (e.key === 'F5') {
             $routing = !$routing;
             e.preventDefault();
-        } else if (
-            e.key === 'ArrowRight' ||
-            e.key === 'ArrowDown' ||
-            e.key === 'ArrowLeft' ||
-            e.key === 'ArrowUp'
-        ) {
-            if (!targetInput) {
-                updateSelectionFromKey(e.key === 'ArrowRight' || e.key === 'ArrowDown', e.shiftKey);
-                e.preventDefault();
-            }
         }
     }}
     on:dragover={(e) => e.preventDefault()}
     on:drop={(e) => {
         e.preventDefault();
-        if (e.dataTransfer.files.length > 0) {
+        if (e.dataTransfer && e.dataTransfer.files.length > 0) {
             loadFiles(e.dataTransfer.files);
         }
     }}
 />
 
 <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,28 @@
 <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';
+    import { Moon, Sun } from '@lucide/svelte';
+    import { mode, setMode } from 'mode-watcher';
+    import { i18n } from '$lib/i18n.svelte';
 
-    export let size = '20';
-
-    $: selectedMode = $mode ?? $systemPrefersMode ?? 'light';
+    let {
+        class: className = '',
+    }: {
+        class?: string;
+    } = $props();
 </script>
 
 <Button
     variant="ghost"
-    class="h-8 px-1.5 {$$props.class ?? ''}"
-    on:click={() => {
-        setMode(selectedMode === 'light' ? 'dark' : 'light');
+    size="icon"
+    class={className}
+    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,30 +3,42 @@
     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, House, 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 has-[>svg]:px-0"
+            href={getURLForLanguage(i18n.lang, '/')}
+        >
+            <House 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 has-[>svg]: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 has-[>svg]:px-0"
+            href={getURLForLanguage(i18n.lang, '/help')}
+        >
+            <BookOpenText size="18" />
+            {i18n._('menu.help')}
         </Button>
         <AlgoliaDocSearch class="ml-auto" />
-        <ModeSwitch class="hidden xs:block" />
+        <ModeSwitch class="hidden xs:inline-flex" />
     </div>
 </nav>

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;
@@ -33,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.Root>
-    <Tooltip.Trigger {...$$restProps} aria-label={label}>
-        <slot />
-    </Tooltip.Trigger>
-    <Tooltip.Content {side}>
-        <div class="flex flex-row items-center">
-            <span>{label}</span>
-            <slot name="extra" />
-        </div>
-    </Tooltip.Content>
-</Tooltip.Root>
+<Tooltip.Provider>
+    <Tooltip.Root>
+        <Tooltip.Trigger class={className} aria-label={label}>
+            {@render children()}
+        </Tooltip.Trigger>
+        <Tooltip.Content {side}>
+            <div class="flex flex-row items-center gap-2">
+                <span>{label}</span>
+                {@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,
@@ -10,18 +9,27 @@
         getVelocityUnits,
         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,56 @@
 <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'
+                size="icon"
+                class="w-full flex flex-row gap-1 {side === 'right'
                     ? 'justify-between'
-                    : 'justify-start'} py-0 px-1 h-fit {nohover
+                    : 'justify-start pl-1'} 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" />
@@ -65,23 +61,24 @@
     {:else}
         <Button
             variant="ghost"
-            class="w-full flex flex-row {side === 'right'
+            size="icon"
+            class="w-full flex flex-row gap-1 {side === 'right'
                 ? 'justify-between'
-                : 'justify-start'} py-0 px-1 h-fit {nohover ? 'hover:bg-background' : ''}"
+                : 'justify-start pl-1'} 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" />
@@ -90,8 +87,7 @@
             {/if}
         </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;
     }

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">

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

@@ -2,7 +2,6 @@ import {
     File,
     FilePen,
     View,
-    type Icon,
     Settings,
     Pencil,
     MapPin,
@@ -10,11 +9,12 @@ import {
     CalendarClock,
     Group,
     Ungroup,
-    Filter,
+    Funnel,
     SquareDashedMousePointer,
     MountainSnow,
-} from 'lucide-svelte';
-import type { ComponentType } from 'svelte';
+    type IconProps,
+} from '@lucide/svelte';
+import type { Component } from 'svelte';
 
 export const guides: Record<string, string[]> = {
     'getting-started': [],
@@ -37,7 +37,7 @@ export const guides: Record<string, string[]> = {
     faq: [],
 };
 
-export const guideIcons: Record<string, string | ComponentType<Icon>> = {
+export const guideIcons: Record<string, string | Component<IconProps>> = {
     'getting-started': '🚀',
     menu: '📂 ⚙️',
     file: File,
@@ -53,7 +53,7 @@ export const guideIcons: Record<string, string | ComponentType<Icon>> = {
     merge: Group,
     extract: Ungroup,
     elevation: MountainSnow,
-    minify: Filter,
+    minify: Funnel,
     clean: SquareDashedMousePointer,
     'map-controls': '🗺',
     gpx: '💾',

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

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

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

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

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

@@ -1,34 +1,34 @@
 <script lang="ts">
-    import GPXLayers from '$lib/components/gpx-layer/GPXLayers.svelte';
-    import ElevationProfile from '$lib/components/ElevationProfile.svelte';
+    import GPXLayers from '$lib/components/map/gpx-layer/GPXLayers.svelte';
+    import ElevationProfile from '$lib/components/elevation-profile/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 Map from '$lib/components/map/Map.svelte';
+    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,
-    } from '$lib/stores';
-    import { onDestroy, onMount } from 'svelte';
-    import { fileObservers, settings, GPXStatisticsTree } from '$lib/db';
-    import { readable } from 'svelte/store';
+    import { writable } 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 {
         allowedEmbeddingBasemaps,
         getFilesFromEmbeddingOptions,
         type EmbeddingOptions,
-    } from './Embedding';
-    import { mode, setMode } from 'mode-watcher';
-    import { browser } from '$app/environment';
+    } from './embedding';
+    import { setMode } from 'mode-watcher';
+    import { settings } from '$lib/logic/settings';
+    import { fileStateCollection } from '$lib/logic/file-state';
+    import { gpxStatistics, slicedGPXStatistics } from '$lib/logic/statistics';
+    import { loadFile } from '$lib/logic/file-actions';
+    import { selection } from '$lib/logic/selection';
+    import { untrack } from 'svelte';
 
-    $embedding = true;
+    let {
+        useHash = true,
+        options = $bindable(),
+        hash = $bindable(),
+    }: { useHash?: boolean; options: EmbeddingOptions; hash: string } = $props();
+
+    let additionalDatasets = writable<string[]>([]);
+    let elevationFill = writable<'slope' | 'surface' | 'highway' | undefined>(undefined);
 
     const {
         currentBasemap,
@@ -40,203 +40,72 @@
         directionMarkers,
     } = settings;
 
-    export let useHash = true;
-    export let options: EmbeddingOptions;
-    export let hash: string;
-
-    let prevSettings = {
-        distanceMarkers: false,
-        directionMarkers: false,
-        distanceUnits: 'metric',
-        velocityUnits: 'speed',
-        temperatureUnits: 'celsius',
-        theme: 'system',
-    };
+    settings.initialize();
 
     function applyOptions() {
-        fileObservers.update(($fileObservers) => {
-            $fileObservers.clear();
-            return $fileObservers;
-        });
-
-        let downloads: Promise<GPXFile | null>[] = [];
-        getFilesFromEmbeddingOptions(options).forEach((url) => {
-            downloads.push(
-                fetch(url)
+        let downloads: Promise<GPXFile | null>[] = getFilesFromEmbeddingOptions(options).map(
+            (url) => {
+                return 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,
-                            }
-                        );
-                    }
-                });
+                    .then(loadFile);
             }
+        );
+        Promise.all(downloads).then((answers) => {
+            const files = answers.filter((file) => file !== null) as GPXFile[];
+            let ids: string[] = [];
+            files.forEach((file, index) => {
+                let id = `gpx-${index}-embed`;
+                file._data.id = id;
+                ids.push(id);
+            });
+            fileStateCollection.setEmbeddedFiles(files);
+            $fileOrder = ids;
+            selection.selectAll();
         });
-
-        if (
-            options.basemap !== $currentBasemap &&
-            allowedEmbeddingBasemaps.includes(options.basemap)
-        ) {
+        if (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) {
+        $distanceMarkers = options.distanceMarkers;
+        $directionMarkers = options.directionMarkers;
+        $distanceUnits = options.distanceUnits;
+        $velocityUnits = options.velocityUnits;
+        $temperatureUnits = options.temperatureUnits;
+        if (options.theme != 'system') {
             setMode(options.theme);
         }
+
+        additionalDatasets.set(
+            [
+                options.elevation.speed ? 'speed' : null,
+                options.elevation.hr ? 'hr' : null,
+                options.elevation.cad ? 'cad' : null,
+                options.elevation.temp ? 'temp' : null,
+                options.elevation.power ? 'power' : null,
+            ].filter((dataset) => dataset !== null)
+        );
+        elevationFill.set(options.elevation.fill == 'none' ? undefined : options.elevation.fill);
     }
 
-    onMount(() => {
-        prevSettings.distanceMarkers = $distanceMarkers;
-        prevSettings.directionMarkers = $directionMarkers;
-        prevSettings.distanceUnits = $distanceUnits;
-        prevSettings.velocityUnits = $velocityUnits;
-        prevSettings.temperatureUnits = $temperatureUnits;
-        prevSettings.theme = $mode ?? 'system';
-    });
-
-    $: if (browser && options) {
-        applyOptions();
-    }
-
-    $: if ($fileOrder) {
-        updateGPXData();
-    }
-
-    onDestroy(() => {
-        if ($distanceMarkers !== prevSettings.distanceMarkers) {
-            $distanceMarkers = prevSettings.distanceMarkers;
-        }
-
-        if ($directionMarkers !== prevSettings.directionMarkers) {
-            $directionMarkers = prevSettings.directionMarkers;
-        }
-
-        if ($distanceUnits !== prevSettings.distanceUnits) {
-            $distanceUnits = prevSettings.distanceUnits;
-        }
-
-        if ($velocityUnits !== prevSettings.velocityUnits) {
-            $velocityUnits = prevSettings.velocityUnits;
-        }
-
-        if ($temperatureUnits !== prevSettings.temperatureUnits) {
-            $temperatureUnits = prevSettings.temperatureUnits;
-        }
-
-        if ($mode !== prevSettings.theme) {
-            setMode(prevSettings.theme);
-        }
-
-        $selection.clear();
-        $fileObservers.clear();
-        $fileOrder = $fileOrder.filter((id) => !id.includes('embed'));
+    $effect(() => {
+        options;
+        untrack(applyOptions);
     });
 </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.size > 1 ? 'horizontal' : ''}"
             accessToken={options.token}
             geocoder={false}
-            geolocate={false}
+            geolocate={true}
             hash={useHash}
         />
-        <OpenIn bind:files={options.files} bind:ids={options.ids} />
+        <OpenIn files={options.files} ids={options.ids} />
         <LayerControl />
         <GPXLayers />
-        {#if $fileObservers.size > 1}
+        {#if $fileStateCollection.size > 1}
             <div class="h-10 -translate-y-10 w-full pointer-events-none absolute z-30">
                 <FileList orientation="horizontal" />
             </div>
@@ -256,14 +125,8 @@
             <ElevationProfile
                 {gpxStatistics}
                 {slicedGPXStatistics}
-                additionalDatasets={[
-                    options.elevation.speed ? 'speed' : null,
-                    options.elevation.hr ? 'hr' : null,
-                    options.elevation.cad ? 'cad' : null,
-                    options.elevation.temp ? 'temp' : null,
-                    options.elevation.power ? 'power' : null,
-                ].filter((dataset) => dataset !== null)}
-                elevationFill={options.elevation.fill}
+                {additionalDatasets}
+                {elevationFill}
                 showControls={options.elevation.controls}
             />
         {/if}

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

@@ -14,67 +14,65 @@
         Coins,
         Milestone,
         Video,
-    } from 'lucide-svelte';
-    import { _ } from 'svelte-i18n';
+    } from '@lucide/svelte';
+    import { i18n } from '$lib/i18n.svelte';
     import {
         allowedEmbeddingBasemaps,
+        defaultEmbeddingOptions,
         getCleanedEmbeddingOptions,
-        getDefaultEmbeddingOptions,
-    } from './Embedding';
+        getMergedEmbeddingOptions,
+    } from './embedding';
     import { PUBLIC_MAPBOX_TOKEN } from '$env/static/public';
     import Embedding from './Embedding.svelte';
-    import { map } from '$lib/stores';
-    import { tick } from 'svelte';
+    import { onDestroy } from 'svelte';
     import { base } from '$app/paths';
+    import { map } from '$lib/components/map/map';
+    import { mode } from 'mode-watcher';
 
-    let options = getDefaultEmbeddingOptions();
-    options.token = 'YOUR_MAPBOX_TOKEN';
-    options.files = [
-        'https://raw.githubusercontent.com/gpxstudio/gpx.studio/main/gpx/test-data/simple.gpx',
-    ];
+    let options = $state(
+        getMergedEmbeddingOptions(
+            {
+                token: 'YOUR_MAPBOX_TOKEN',
+                theme: mode.current,
+            },
+            defaultEmbeddingOptions
+        )
+    );
+    let files = $state(
+        'https://raw.githubusercontent.com/gpxstudio/gpx.studio/main/gpx/test-data/simple.gpx'
+    );
+    let driveIds = $state('');
 
-    let files = options.files[0];
-    $: {
-        let urls = files.split(',');
-        urls = urls.filter((url) => url.length > 0);
-        if (JSON.stringify(urls) !== JSON.stringify(options.files)) {
-            options.files = urls;
+    let iframeOptions = $derived(
+        getMergedEmbeddingOptions(
+            {
+                token:
+                    options.token.length === 0 || options.token === 'YOUR_MAPBOX_TOKEN'
+                        ? PUBLIC_MAPBOX_TOKEN
+                        : options.token,
+                files: files.split(',').filter((url) => url.length > 0),
+                ids: driveIds.split(',').filter((id) => id.length > 0),
+                elevation: {
+                    fill: options.elevation.fill === 'none' ? undefined : options.elevation.fill,
+                },
+            },
+            options
+        )
+    );
+
+    let manualCamera = $state(false);
+    let zoom = $state('0');
+    let lat = $state('0');
+    let lon = $state('0');
+    let bearing = $state('0');
+    let pitch = $state('0');
+    let hash = $derived(manualCamera ? `#${zoom}/${lat}/${lon}/${bearing}/${pitch}` : '');
+
+    $effect(() => {
+        if (options.elevation.show || options.elevation.height) {
+            map.resize();
         }
-    }
-    let driveIds = '';
-    $: {
-        let ids = driveIds.split(',');
-        ids = ids.filter((id) => id.length > 0);
-        if (JSON.stringify(ids) !== JSON.stringify(options.ids)) {
-            options.ids = ids;
-        }
-    }
-
-    let manualCamera = false;
-
-    let zoom = '0';
-    let lat = '0';
-    let lon = '0';
-    let bearing = '0';
-    let pitch = '0';
-
-    $: hash = manualCamera ? `#${zoom}/${lat}/${lon}/${bearing}/${pitch}` : '';
-
-    $: iframeOptions =
-        options.token.length === 0 || options.token === 'YOUR_MAPBOX_TOKEN'
-            ? Object.assign({}, options, { token: PUBLIC_MAPBOX_TOKEN })
-            : options;
-
-    async function resizeMap() {
-        if ($map) {
-            await tick();
-            $map.resize();
-        }
-    }
-
-    $: if (options.elevation.height || options.elevation.show) {
-        resizeMap();
-    }
+    });
 
     function updateCamera() {
         if ($map) {
@@ -87,49 +85,50 @@
         }
     }
 
-    $: if ($map) {
-        $map.on('moveend', updateCamera);
-    }
+    map.onLoad((map_) => {
+        map_.on('moveend', updateCamera);
+    });
+
+    onDestroy(() => {
+        if ($map) {
+            $map.off('moveend', updateCamera);
+        }
+    });
 </script>
 
 <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>
-            <Select.Root
-                selected={{ value: options.basemap, label: $_(`layers.label.${options.basemap}`) }}
-                onSelectedChange={(selected) => {
-                    if (selected?.value) {
-                        options.basemap = selected?.value;
-                    }
-                }}
-            >
+            <Label for="basemap">{i18n._('embedding.basemap')}</Label>
+            <Select.Root type="single" bind:value={options.basemap}>
                 <Select.Trigger id="basemap" class="w-full h-8">
-                    <Select.Value />
+                    {i18n._(`layers.label.${options.basemap}`)}
                 </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')}
+                        {i18n._('embedding.height')}
                         <Input
                             type="number"
                             bind:value={options.elevation.height}
@@ -138,73 +137,64 @@
                     </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') }}
-                            onSelectedChange={(selected) => {
-                                let value = selected?.value;
-                                if (value === 'none') {
-                                    options.elevation.fill = undefined;
-                                } else if (
-                                    value === 'slope' ||
-                                    value === 'surface' ||
-                                    value === 'highway'
-                                ) {
-                                    options.elevation.fill = value;
-                                }
-                            }}
-                        >
+                        <Select.Root type="single" bind:value={options.elevation.fill}>
                             <Select.Trigger class="grow h-8">
-                                <Select.Value />
+                                {options.elevation.fill !== 'none'
+                                    ? i18n._(`quantities.${options.elevation.fill}`)
+                                    : i18n._('embedding.none')}
                             </Select.Trigger>
                             <Select.Content>
-                                <Select.Item value="slope">{$_('quantities.slope')}</Select.Item>
-                                <Select.Item value="surface">{$_('quantities.surface')}</Select.Item
+                                <Select.Item value="slope">{i18n._('quantities.slope')}</Select.Item
                                 >
-                                <Select.Item value="highway">{$_('quantities.highway')}</Select.Item
+                                <Select.Item value="surface"
+                                    >{i18n._('quantities.surface')}</Select.Item
                                 >
-                                <Select.Item value="none">{$_('embedding.none')}</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>
@@ -213,75 +203,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>
@@ -290,48 +280,48 @@
                     <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} />
+                <Embedding 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">
                 <code class="language-html">
-                    {`<iframe src="https://gpx.studio${base}/embed?options=${encodeURIComponent(JSON.stringify(getCleanedEmbeddingOptions(options)))}${hash}" width="100%" height="600px" frameborder="0" style="outline: none;"/>`}
+                    {`<iframe src="https://gpx.studio${base}/embed?options=${encodeURIComponent(JSON.stringify(getCleanedEmbeddingOptions(iframeOptions)))}${hash}" width="100%" height="600px" frameborder="0" style="outline: none;"/>`}
                 </code>
             </pre>
         </fieldset>

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/embedding/embedding.ts

@@ -10,7 +10,7 @@ export type EmbeddingOptions = {
         show: boolean;
         height: number;
         controls: boolean;
-        fill: 'slope' | 'surface' | 'highway' | undefined;
+        fill: 'slope' | 'surface' | 'highway' | 'none';
         speed: boolean;
         hr: boolean;
         cad: boolean;
@@ -34,7 +34,7 @@ export const defaultEmbeddingOptions = {
         show: true,
         height: 170,
         controls: true,
-        fill: undefined,
+        fill: 'none',
         speed: false,
         hr: false,
         cad: false,
@@ -49,10 +49,6 @@ export const defaultEmbeddingOptions = {
     theme: 'system',
 };
 
-export function getDefaultEmbeddingOptions(): EmbeddingOptions {
-    return JSON.parse(JSON.stringify(defaultEmbeddingOptions));
-}
-
 export function getMergedEmbeddingOptions(
     options: any,
     defaultOptions: any = defaultEmbeddingOptions

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

@@ -5,14 +5,12 @@
     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';
+    } from '$lib/components/export/utils.svelte';
+    import { currentTool } from '$lib/components/toolbar/tools';
     import {
         Download,
         Zap,
@@ -21,63 +19,70 @@
         Orbit,
         Thermometer,
         SquareActivity,
-    } from 'lucide-svelte';
-    import { _ } from 'svelte-i18n';
-    import { selection } from './file-list/Selection';
-    import { get } from 'svelte/store';
+    } from '@lucide/svelte';
+    import { i18n } from '$lib/i18n.svelte';
     import { GPXStatistics } from 'gpx';
-    import { ListRootItem } from './file-list/FileList';
+    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 = false;
-    let exportOptions: Record<string, boolean> = {
+    let open = $derived(exportState.current !== ExportState.NONE);
+    let exportOptions: Record<string, boolean> = $state({
         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());
+    });
+    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]));
 
-        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]);
+    $effect(() => {
+        if (open) {
+            currentTool.set(null);
+        }
+    });
 </script>
 
 <Dialog.Root
     bind:open
     onOpenChange={(isOpen) => {
         if (!isOpen) {
-            $exportState = ExportState.NONE;
+            exportState.current = ExportState.NONE;
         }
     }}
 >
@@ -87,36 +92,36 @@
             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"
+                class="w-full flex flex-col sm:flex-row items-center justify-center gap-1 sm:gap-2 border rounded-md p-2 bg-secondary"
             >
-                <span>⚠️</span>
-                <span class="max-w-[80%] text-sm">
-                    {$_('menu.support_message')}
+                <span class="w-12 shrink-0 text-center text-xl">⚠️</span>
+                <span class="text-sm">
+                    {i18n._('menu.support_message')}
                 </span>
             </div>
             <div class="w-full flex flex-row flex-wrap gap-2">
                 <Button class="bg-support grow" href="https://ko-fi.com/gpxstudio" target="_blank">
-                    {$_('menu.support_button')}
-                    <span class="ml-2">🙏</span>
+                    {i18n._('menu.support_button')}
+                    <span>🙏</span>
                 </Button>
                 <Button
                     variant="outline"
                     class="grow"
-                    on:click={() => {
-                        if ($exportState === ExportState.SELECTION) {
+                    onclick={() => {
+                        if (exportState.current === ExportState.SELECTION) {
                             exportSelectedFiles(exclude);
-                        } else if ($exportState === ExportState.ALL) {
+                        } else if (exportState.current === ExportState.ALL) {
                             exportAllFiles(exclude);
                         }
                         open = false;
-                        $exportState = ExportState.NONE;
+                        exportState.current = ExportState.NONE;
                     }}
                 >
-                    <Download size="16" class="mr-1" />
-                    {#if $fileObservers.size === 1 || ($exportState === ExportState.SELECTION && $selection.size === 1)}
-                        {$_('menu.download_file')}
+                    <Download size="16" />
+                    {#if $fileStateCollection.size === 1 || (exportState.current === ExportState.SELECTION && $selection.size === 1)}
+                        {i18n._('menu.download_file')}
                     {:else}
-                        {$_('menu.download_files')}
+                        {i18n._('menu.download_files')}
                     {/if}
                 </Button>
             </div>
@@ -132,7 +137,7 @@
                         <Separator />
                     </div>
                     <Label class="shrink-0">
-                        {$_('menu.export_options')}
+                        {i18n._('menu.export_options')}
                     </Label>
                     <div class="grow">
                         <Separator />
@@ -143,7 +148,35 @@
                         <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')}
+                            {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
@@ -152,35 +185,7 @@
                         <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')}
+                            {i18n._('quantities.osm_extensions')}
                         </Label>
                     </div>
                 </div>

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,34 +2,33 @@
     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 { onMount, setContext } from 'svelte';
+    import { ListFileItem, ListLevel, ListRootItem } 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 { fileStateCollection } from '$lib/logic/file-state';
+    import { createFile, pasteSelection } from '$lib/logic/file-actions';
+    import { selection, copied } from '$lib/logic/selection';
+    import { allowedPastes } from './sortable-file-list';
 
-    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 { treeFileView } = settings;
-
-    treeFileView.subscribe(($vertical) => {
-        if ($vertical) {
-            selection.update(($selection) => {
-                $selection.forEach((item) => {
-                    if ($selection.hasAnyChildren(item, false)) {
-                        $selection.toggle(item);
-                    }
-                });
-                return $selection;
-            });
-        } else {
+    onMount(() => {
+        if (orientation === 'horizontal') {
             selection.update(($selection) => {
                 $selection.forEach((item) => {
                     if (!(item instanceof ListFileItem)) {
@@ -46,29 +45,32 @@
 <ScrollArea
     class="shrink-0 {orientation === 'vertical' ? 'p-0 pr-3' : 'h-10 px-1'}"
     {orientation}
-    scrollbarXClasses={orientation === 'vertical' ? '' : 'mt-1 h-2'}
+    scrollbarXClasses={orientation === 'vertical' ? '' : 'hidden'}
     scrollbarYClasses={orientation === 'vertical' ? '' : ''}
 >
     <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}>
-                        <Plus size="16" class="mr-1" />
-                        {$_('menu.new_file')}
+                    <ContextMenu.Item onclick={createFile}>
+                        <Plus size="16" />
+                        {i18n._('menu.new_file')}
                         <Shortcut key="+" ctrl={true} />
                     </ContextMenu.Item>
                     <ContextMenu.Separator />
-                    <ContextMenu.Item on:click={selectAll} disabled={$fileObservers.size === 0}>
-                        <FileStack size="16" class="mr-1" />
-                        {$_('menu.select_all')}
+                    <ContextMenu.Item
+                        onclick={() => selection.selectAll()}
+                        disabled={$fileStateCollection.size === 0}
+                    >
+                        <FileStack size="16" />
+                        {i18n._('menu.select_all')}
                         <Shortcut key="A" ctrl={true} />
                     </ContextMenu.Item>
                     <ContextMenu.Separator />
@@ -76,10 +78,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')}
+                        <ClipboardPaste size="16" />
+                        {i18n._('menu.paste')}
                         <Shortcut key="V" ctrl={true} />
                     </ContextMenu.Item>
                 </ContextMenu.Content>

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

@@ -1,483 +0,0 @@
-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,
-}
-
-export const allowedMoves: Record<ListLevel, ListLevel[]> = {
-    [ListLevel.ROOT]: [],
-    [ListLevel.FILE]: [ListLevel.FILE],
-    [ListLevel.TRACK]: [ListLevel.FILE, ListLevel.TRACK],
-    [ListLevel.SEGMENT]: [ListLevel.FILE, ListLevel.TRACK, ListLevel.SEGMENT],
-    [ListLevel.WAYPOINTS]: [ListLevel.WAYPOINTS],
-    [ListLevel.WAYPOINT]: [ListLevel.WAYPOINTS, ListLevel.WAYPOINT],
-};
-
-export const allowedPastes: Record<ListLevel, ListLevel[]> = {
-    [ListLevel.ROOT]: [],
-    [ListLevel.FILE]: [ListLevel.ROOT, ListLevel.FILE],
-    [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],
-};
-
-export abstract class ListItem {
-    level: ListLevel;
-
-    constructor(level: ListLevel) {
-        this.level = level;
-    }
-
-    abstract getId(): string | number;
-    abstract getFullId(): string;
-    abstract getIdAtLevel(level: ListLevel): string | number | undefined;
-    abstract getFileId(): string;
-    abstract getParent(): ListItem;
-    abstract extend(id: string | number): ListItem;
-}
-
-export class ListRootItem extends ListItem {
-    constructor() {
-        super(ListLevel.ROOT);
-    }
-
-    getId(): string {
-        return 'root';
-    }
-
-    getFullId(): string {
-        return 'root';
-    }
-
-    getIdAtLevel(level: ListLevel): string | number | undefined {
-        return undefined;
-    }
-
-    getFileId(): string {
-        return '';
-    }
-
-    getParent(): ListItem {
-        return this;
-    }
-
-    extend(id: string): ListFileItem {
-        return new ListFileItem(id);
-    }
-}
-
-export class ListFileItem extends ListItem {
-    fileId: string;
-
-    constructor(fileId: string) {
-        super(ListLevel.FILE);
-        this.fileId = fileId;
-    }
-
-    getId(): string {
-        return this.fileId;
-    }
-
-    getFullId(): string {
-        return this.fileId;
-    }
-
-    getIdAtLevel(level: ListLevel): string | number | undefined {
-        switch (level) {
-            case ListLevel.ROOT:
-                return this.fileId;
-            default:
-                return undefined;
-        }
-    }
-
-    getFileId(): string {
-        return this.fileId;
-    }
-
-    getParent(): ListItem {
-        return new ListRootItem();
-    }
-
-    extend(id: number | 'waypoints'): ListTrackItem | ListWaypointsItem {
-        if (id === 'waypoints') {
-            return new ListWaypointsItem(this.fileId);
-        } else {
-            return new ListTrackItem(this.fileId, id);
-        }
-    }
-}
-
-export class ListTrackItem extends ListItem {
-    fileId: string;
-    trackIndex: number;
-
-    constructor(fileId: string, trackIndex: number) {
-        super(ListLevel.TRACK);
-        this.fileId = fileId;
-        this.trackIndex = trackIndex;
-    }
-
-    getId(): number {
-        return this.trackIndex;
-    }
-
-    getFullId(): string {
-        return `${this.fileId}-track-${this.trackIndex}`;
-    }
-
-    getIdAtLevel(level: ListLevel): string | number | undefined {
-        switch (level) {
-            case ListLevel.ROOT:
-                return this.fileId;
-            case ListLevel.FILE:
-                return this.trackIndex;
-            default:
-                return undefined;
-        }
-    }
-
-    getFileId(): string {
-        return this.fileId;
-    }
-
-    getTrackIndex(): number {
-        return this.trackIndex;
-    }
-
-    getParent(): ListItem {
-        return new ListFileItem(this.fileId);
-    }
-
-    extend(id: number): ListTrackSegmentItem {
-        return new ListTrackSegmentItem(this.fileId, this.trackIndex, id);
-    }
-}
-
-export class ListTrackSegmentItem extends ListItem {
-    fileId: string;
-    trackIndex: number;
-    segmentIndex: number;
-
-    constructor(fileId: string, trackIndex: number, segmentIndex: number) {
-        super(ListLevel.SEGMENT);
-        this.fileId = fileId;
-        this.trackIndex = trackIndex;
-        this.segmentIndex = segmentIndex;
-    }
-
-    getId(): number {
-        return this.segmentIndex;
-    }
-
-    getFullId(): string {
-        return `${this.fileId}-track-${this.trackIndex}--${this.segmentIndex}`;
-    }
-
-    getIdAtLevel(level: ListLevel): string | number | undefined {
-        switch (level) {
-            case ListLevel.ROOT:
-                return this.fileId;
-            case ListLevel.FILE:
-                return this.trackIndex;
-            case ListLevel.TRACK:
-                return this.segmentIndex;
-            default:
-                return undefined;
-        }
-    }
-
-    getFileId(): string {
-        return this.fileId;
-    }
-
-    getTrackIndex(): number {
-        return this.trackIndex;
-    }
-
-    getSegmentIndex(): number {
-        return this.segmentIndex;
-    }
-
-    getParent(): ListItem {
-        return new ListTrackItem(this.fileId, this.trackIndex);
-    }
-
-    extend(): ListTrackSegmentItem {
-        return this;
-    }
-}
-
-export class ListWaypointsItem extends ListItem {
-    fileId: string;
-
-    constructor(fileId: string) {
-        super(ListLevel.WAYPOINTS);
-        this.fileId = fileId;
-    }
-
-    getId(): string {
-        return 'waypoints';
-    }
-
-    getFullId(): string {
-        return `${this.fileId}-waypoints`;
-    }
-
-    getIdAtLevel(level: ListLevel): string | number | undefined {
-        switch (level) {
-            case ListLevel.ROOT:
-                return this.fileId;
-            case ListLevel.FILE:
-                return 'waypoints';
-            default:
-                return undefined;
-        }
-    }
-
-    getFileId(): string {
-        return this.fileId;
-    }
-
-    getParent(): ListItem {
-        return new ListFileItem(this.fileId);
-    }
-
-    extend(id: number): ListWaypointItem {
-        return new ListWaypointItem(this.fileId, id);
-    }
-}
-
-export class ListWaypointItem extends ListItem {
-    fileId: string;
-    waypointIndex: number;
-
-    constructor(fileId: string, waypointIndex: number) {
-        super(ListLevel.WAYPOINT);
-        this.fileId = fileId;
-        this.waypointIndex = waypointIndex;
-    }
-
-    getId(): number {
-        return this.waypointIndex;
-    }
-
-    getFullId(): string {
-        return `${this.fileId}-waypoint-${this.waypointIndex}`;
-    }
-
-    getIdAtLevel(level: ListLevel): string | number | undefined {
-        switch (level) {
-            case ListLevel.ROOT:
-                return this.fileId;
-            case ListLevel.FILE:
-                return 'waypoints';
-            case ListLevel.WAYPOINTS:
-                return this.waypointIndex;
-            default:
-                return undefined;
-        }
-    }
-
-    getFileId(): string {
-        return this.fileId;
-    }
-
-    getWaypointIndex(): number {
-        return this.waypointIndex;
-    }
-
-    getParent(): ListItem {
-        return new ListWaypointsItem(this.fileId);
-    }
-
-    extend(): ListWaypointItem {
-        return this;
-    }
-}
-
-export function sortItems(items: ListItem[], reverse: boolean = false) {
-    items.sort((a, b) => {
-        if (a instanceof ListTrackItem && b instanceof ListTrackItem) {
-            return a.getTrackIndex() - b.getTrackIndex();
-        } else if (a instanceof ListTrackSegmentItem && b instanceof ListTrackSegmentItem) {
-            return a.getSegmentIndex() - b.getSegmentIndex();
-        } else if (a instanceof ListWaypointItem && b instanceof ListWaypointItem) {
-            return a.getWaypointIndex() - b.getWaypointIndex();
-        }
-        return a.level - b.level;
-    });
-    if (reverse) {
-        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/FileListNode.svelte

@@ -8,11 +8,10 @@
         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,
@@ -20,48 +19,50 @@
         ListWaypointsItem,
         type ListItem,
         type ListTrackItem,
-    } from './FileList';
-    import { _ } from 'svelte-i18n';
-    import { selection } from './Selection';
+    } 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:
-        | Map<string, Readable<GPXFileWithStatistics | undefined>>
-        | GPXTreeElement<AnyGPXTreeElement>
-        | Waypoint[]
-        | Waypoint;
-    export let item: ListItem;
+    let {
+        node,
+        item,
+    }: {
+        node:
+            | Map<string, Readable<GPXFileWithStatistics | undefined>>
+            | GPXTreeElement<AnyGPXTreeElement>
+            | Waypoint[]
+            | Waypoint;
+        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}`)
+                    `${i18n._('gpx.waypoint')} ${(item as ListWaypointItem).waypointIndex + 1}`)
                   : node instanceof GPXFile && item instanceof ListWaypointsItem
-                    ? $_('gpx.waypoints')
-                    : '';
+                    ? i18n._('gpx.waypoints')
+                    : ''
+    );
 
     const { treeFileView } = settings;
 
-    function openIfSelectedChild() {
-        if (collapsible && get(treeFileView) && $selection.hasAnyChildren(item, false)) {
+    $effect(() => {
+        if (collapsible && $treeFileView && $selection.hasAnyChildren(item, false)) {
             collapsible.openNode();
         }
-    }
-
-    if ($selection) {
-        openIfSelectedChild();
-    }
-
-    afterUpdate(openIfSelectedChild);
+    });
 </script>
 
 {#if node instanceof Map}
@@ -72,12 +73,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">
-            {#key node}
-                <FileListNodeContent {node} {item} />
-            {/key}
-        </div>
+        {#snippet trigger()}
+            <FileListNodeLabel {node} {item} {label} />
+        {/snippet}
+        {#snippet content()}
+            <div class="ml-4">
+                {#key node}
+                    <FileListNodeContent {node} {item} />
+                {/key}
+            </div>
+        {/snippet}
     </CollapsibleTreeNode>
 {:else}
     <FileListNodeLabel {node} {item} {label} />

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

@@ -1,39 +1,29 @@
-<script lang="ts" context="module">
-    let dragging: Writable<ListLevel | null> = writable(null);
-
-    let updating = false;
-</script>
-
 <script lang="ts">
     import { GPXFile, Track, Waypoint, type AnyGPXTreeElement, type GPXTreeElement } from 'gpx';
-    import { afterUpdate, 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 { getContext, onDestroy, onMount } from 'svelte';
+    import { type Readable } from 'svelte/store';
     import FileListNodeStore from './FileListNodeStore.svelte';
     import FileListNode from './FileListNode.svelte';
-    import {
-        ListFileItem,
-        ListLevel,
-        ListRootItem,
-        ListWaypointsItem,
-        allowedMoves,
-        moveItems,
-        type ListItem,
-    } from './FileList';
-    import { selection } from './Selection';
-    import { isMac } from '$lib/utils';
-    import { _ } from 'svelte-i18n';
+    import FileListNodeContent from './FileListNodeContent.svelte';
+    import { ListFileItem, ListLevel, ListWaypointsItem, type ListItem } from './file-list';
+    import type { GPXFileWithStatistics } from '$lib/logic/statistics-tree';
+    import { allowedMoves, dragging, SortableFileList } from './sortable-file-list';
 
-    export let node:
-        | Map<string, Readable<GPXFileWithStatistics | undefined>>
-        | GPXTreeElement<AnyGPXTreeElement>
-        | Waypoint;
-    export let item: ListItem;
-    export let waypointRoot: boolean = false;
+    let {
+        node,
+        item,
+        waypointRoot = false,
+    }: {
+        node:
+            | Map<string, Readable<GPXFileWithStatistics | undefined>>
+            | GPXTreeElement<AnyGPXTreeElement>
+            | Waypoint[]
+            | Waypoint;
+        item: ListItem;
+        waypointRoot?: boolean;
+    } = $props();
 
     let container: HTMLElement;
-    let elements: { [id: string]: HTMLElement } = {};
     let sortableLevel: ListLevel =
         node instanceof Map
             ? ListLevel.FILE
@@ -46,255 +36,32 @@
               : node instanceof Track
                 ? ListLevel.SEGMENT
                 : ListLevel.WAYPOINT;
-    let sortable: Sortable;
     let orientation = getContext<'vertical' | 'horizontal'>('orientation');
 
-    let destroyed = false;
-    let lastUpdateStart = 0;
-    function updateToSelection(e) {
-        if (destroyed) {
-            return;
-        }
+    let canDrop = $derived($dragging !== null && allowedMoves[$dragging].includes(sortableLevel));
 
-        lastUpdateStart = Date.now();
-        setTimeout(() => {
-            if (Date.now() - lastUpdateStart >= 40) {
-                if (updating) {
-                    return;
-                }
-
-                updating = true;
-                // Sortable updates selection
-                let changed = getChangedIds();
-                if (changed.length > 0) {
-                    selection.update(($selection) => {
-                        $selection.clear();
-                        Object.entries(elements).forEach(([id, element]) => {
-                            $selection.set(
-                                item.extend(getRealId(id)),
-                                element.classList.contains('sortable-selected')
-                            );
-                        });
-
-                        if (
-                            e.originalEvent &&
-                            !(
-                                e.originalEvent.ctrlKey ||
-                                e.originalEvent.metaKey ||
-                                e.originalEvent.shiftKey
-                            ) &&
-                            ($selection.size > 1 ||
-                                !$selection.has(item.extend(getRealId(changed[0]))))
-                        ) {
-                            // Fix bug that sometimes causes a single select to be treated as a multi-select
-                            $selection.clear();
-                            $selection.set(item.extend(getRealId(changed[0])), true);
-                        }
-
-                        return $selection;
-                    });
-                }
-                updating = false;
-            }
-        }, 50);
-    }
-
-    function updateFromSelection() {
-        if (destroyed || updating) {
-            return;
-        }
-        updating = true;
-        // Selection updates sortable
-        let changed = getChangedIds();
-        for (let id of changed) {
-            let element = elements[id];
-            if (element) {
-                if ($selection.has(item.extend(id))) {
-                    Sortable.utils.select(element);
-                    element.scrollIntoView({
-                        behavior: 'smooth',
-                        block: 'nearest',
-                    });
-                } else {
-                    Sortable.utils.deselect(element);
-                }
-            }
-        }
-        updating = false;
-    }
-
-    $: if ($selection) {
-        updateFromSelection();
-    }
-
-    const { fileOrder } = settings;
-    function syncFileOrder() {
-        if (!sortable || sortableLevel !== ListLevel.FILE) {
-            return;
-        }
-
-        const currentOrder = sortable.toArray();
-        if (currentOrder.length !== $fileOrder.length) {
-            sortable.sort($fileOrder);
-        } else {
-            for (let i = 0; i < currentOrder.length; i++) {
-                if (currentOrder[i] !== $fileOrder[i]) {
-                    sortable.sort($fileOrder);
-                    break;
-                }
-            }
-        }
-    }
-
-    $: if ($fileOrder) {
-        syncFileOrder();
-    }
-
-    function createSortable() {
-        sortable = Sortable.create(container, {
-            group: {
-                name: sortableLevel,
-                pull: allowedMoves[sortableLevel],
-                put: true,
-            },
-            direction: orientation,
-            forceAutoScrollFallback: true,
-            multiDrag: true,
-            multiDragKey: isMac() ? 'Meta' : 'Ctrl',
-            avoidImplicitDeselect: true,
-            onSelect: updateToSelection,
-            onDeselect: updateToSelection,
-            onStart: () => {
-                dragging.set(sortableLevel);
-            },
-            onEnd: () => {
-                dragging.set(null);
-            },
-            onSort: (e) => {
-                if (sortableLevel === ListLevel.FILE) {
-                    let newFileOrder = sortable.toArray();
-                    if (newFileOrder.length !== get(fileOrder).length) {
-                        fileOrder.set(newFileOrder);
-                    } else {
-                        for (let i = 0; i < newFileOrder.length; i++) {
-                            if (newFileOrder[i] !== get(fileOrder)[i]) {
-                                fileOrder.set(newFileOrder);
-                                break;
-                            }
-                        }
-                    }
-                }
-
-                let fromItem = Sortable.get(e.from)._item;
-                let toItem = Sortable.get(e.to)._item;
-
-                if (item === toItem && !(fromItem instanceof ListRootItem)) {
-                    // Event is triggered on source and destination list, only handle it once
-                    let fromItems = [];
-                    let toItems = [];
-
-                    if (Sortable.get(e.from)._waypointRoot) {
-                        fromItems = [fromItem.extend('waypoints')];
-                    } else {
-                        let oldIndices: number[] =
-                            e.oldIndicies.length > 0
-                                ? e.oldIndicies.map((i) => i.index)
-                                : [e.oldIndex];
-                        oldIndices = oldIndices.filter((i) => i >= 0);
-                        oldIndices.sort((a, b) => a - b);
-
-                        fromItems = oldIndices.map((i) => fromItem.extend(i));
-                    }
-
-                    if (Sortable.get(e.from)._waypointRoot && Sortable.get(e.to)._waypointRoot) {
-                        toItems = [toItem.extend('waypoints')];
-                    } else {
-                        if (Sortable.get(e.to)._waypointRoot) {
-                            toItem = toItem.extend('waypoints');
-                        }
-
-                        let newIndices: number[] =
-                            e.newIndicies.length > 0
-                                ? e.newIndicies.map((i) => i.index)
-                                : [e.newIndex];
-                        newIndices = newIndices.filter((i) => i >= 0);
-                        newIndices.sort((a, b) => a - b);
-
-                        if (toItem instanceof ListRootItem) {
-                            let newFileIds = getFileIds(newIndices.length);
-                            toItems = newIndices.map((i, index) => {
-                                $fileOrder.splice(i, 0, newFileIds[index]);
-                                return item.extend(newFileIds[index]);
-                            });
-                        } else {
-                            toItems = newIndices.map((i) => toItem.extend(i));
-                        }
-                    }
-
-                    moveItems(fromItem, toItem, fromItems, toItems);
-                }
-            },
-        });
-        Object.defineProperty(sortable, '_item', {
-            value: item,
-            writable: true,
-        });
-
-        Object.defineProperty(sortable, '_waypointRoot', {
-            value: waypointRoot,
-            writable: true,
-        });
-    }
+    let sortable: SortableFileList;
 
     onMount(() => {
-        createSortable();
-        destroyed = false;
+        sortable = new SortableFileList(
+            container,
+            node,
+            item,
+            waypointRoot,
+            sortableLevel,
+            orientation
+        );
     });
 
-    afterUpdate(() => {
-        elements = {};
-        container.childNodes.forEach((element) => {
-            if (element instanceof HTMLElement) {
-                let attr = element.getAttribute('data-id');
-                if (attr) {
-                    if (node instanceof Map && !node.has(attr)) {
-                        element.remove();
-                    } else {
-                        elements[attr] = element;
-                    }
-                }
-            }
-        });
-
-        syncFileOrder();
-        updateFromSelection();
+    $effect(() => {
+        if (sortable && node) {
+            sortable.updateElements();
+        }
     });
 
     onDestroy(() => {
-        destroyed = true;
+        sortable.destroy();
     });
-
-    function getChangedIds() {
-        let changed: (string | number)[] = [];
-        Object.entries(elements).forEach(([id, element]) => {
-            let realId = getRealId(id);
-            let realItem = item.extend(realId);
-            let inSelection = get(selection).has(realItem);
-            let isSelected = element.classList.contains('sortable-selected');
-            if (inSelection !== isSelected) {
-                changed.push(realId);
-            }
-        });
-        return changed;
-    }
-
-    function getRealId(id: string | number) {
-        return sortableLevel === ListLevel.FILE || sortableLevel === ListLevel.WAYPOINTS
-            ? id
-            : parseInt(id);
-    }
-
-    $: canDrop = $dragging !== null && allowedMoves[$dragging].includes(sortableLevel);
 </script>
 
 <div
@@ -340,11 +107,13 @@
 
 {#if node instanceof GPXFile && item instanceof ListFileItem}
     {#if !waypointRoot}
-        <svelte:self {node} {item} waypointRoot={true} />
+        <FileListNodeContent {node} {item} waypointRoot={true} />
     {/if}
 {/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,107 +17,107 @@
         Maximize,
         Scissors,
         FileStack,
-        FileX,
-    } from 'lucide-svelte';
+    } from '@lucide/svelte';
     import {
         ListFileItem,
         ListLevel,
         ListTrackItem,
         ListWaypointItem,
-        allowedPastes,
         type ListItem,
-    } from './FileList';
-    import {
-        copied,
-        copySelection,
-        cut,
-        cutSelection,
-        pasteSelection,
-        selectAll,
-        selectItem,
-        selection,
-    } from './Selection';
+    } 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 '$lib/components/file-list/style/StyleDialog.svelte';
+    import { editStyle } from '$lib/components/file-list/style/utils.svelte';
     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';
+    import { gpxLayers } from '$lib/components/map/gpx-layer/gpx-layers';
+    import { fileStateCollection } from '$lib/logic/file-state';
+    import { waypointPopup } from '$lib/components/map/gpx-layer/gpx-layer-popup';
+    import { allowedPastes } from './sortable-file-list';
 
-    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 singleSelection = $derived($selection.size === 1);
 
-    let nodeColors: string[] = [];
+    let nodeColors: string[] = $state([]);
 
-    $: if (node && $map) {
-        nodeColors = [];
+    $effect.pre(() => {
+        let colors: string[] = [];
+        if (node && $map) {
+            if (node instanceof GPXFile) {
+                let defaultColor = undefined;
 
-        if (node instanceof GPXFile) {
-            let defaultColor = undefined;
-
-            let layer = gpxLayers.get(item.getFileId());
-            if (layer) {
-                defaultColor = layer.layerColor;
-            }
-
-            let style = node.getStyle(defaultColor);
-            style.color.forEach((c) => {
-                if (!nodeColors.includes(c)) {
-                    nodeColors.push(c);
-                }
-            });
-        } else if (node instanceof Track) {
-            let style = node.getStyle();
-            if (style) {
-                if (style['gpx_style:color'] && !nodeColors.includes(style['gpx_style:color'])) {
-                    nodeColors.push(style['gpx_style:color']);
-                }
-            }
-            if (nodeColors.length === 0) {
-                let layer = gpxLayers.get(item.getFileId());
+                let layer = gpxLayers.getLayer(item.getFileId());
                 if (layer) {
-                    nodeColors.push(layer.layerColor);
+                    defaultColor = layer.layerColor;
+                }
+
+                let style = node.getStyle(defaultColor);
+                style.color.forEach((c) => {
+                    if (!colors.includes(c)) {
+                        colors.push(c);
+                    }
+                });
+            } else if (node instanceof Track) {
+                let style = node.getStyle();
+                if (style) {
+                    if (style['gpx_style:color'] && !colors.includes(style['gpx_style:color'])) {
+                        colors.push(style['gpx_style:color']);
+                    }
+                }
+                if (colors.length === 0) {
+                    let layer = gpxLayers.getLayer(item.getFileId());
+                    if (layer) {
+                        colors.push(layer.layerColor);
+                    }
                 }
             }
         }
-    }
+        nodeColors = colors;
+    });
 
-    $: symbolKey = node instanceof Waypoint ? getSymbolKey(node.sym) : undefined;
+    let symbolKey = $derived(node instanceof Waypoint ? getSymbolKey(node.sym) : undefined);
 
-    let openEditMetadata: boolean = false;
-    let openEditStyle: boolean = false;
+    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
+    );
 
-    $: openEditMetadata = $editMetadata && singleSelection && $selection.has(item);
-    $: openEditStyle =
-        $editStyle &&
-        $selection.has(item) &&
-        $selection.getSelected().findIndex((i) => i.getFullId() === item.getFullId()) === 0;
-    $: hidden = item.level === ListLevel.WAYPOINTS ? node._data.hiddenWpt : node._data.hidden;
+    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) {
-            if (!get(selection).has(item)) {
-                selectItem(item);
+            if (!$selection.has(item)) {
+                selection.selectItem(item);
             }
         }
     }}
@@ -126,7 +125,7 @@
     <ContextMenu.Trigger class="grow truncate">
         <Button
             variant="ghost"
-            class="relative w-full p-0 px-1 border-none overflow-hidden focus-visible:ring-0 focus-visible:ring-offset-0 {orientation ===
+            class="relative w-full p-0 overflow-hidden focus-visible:ring-0 focus-visible:ring-offset-0 {orientation ===
             'vertical'
                 ? 'h-fit'
                 : 'h-9 px-1.5 shadow-md'} pointer-events-auto"
@@ -148,7 +147,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
@@ -156,8 +155,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;
@@ -170,10 +169,10 @@
                         $selection = $selection;
                     }
                 }}
-                on:mouseenter={() => {
+                onmouseenter={() => {
                     if (item instanceof ListWaypointItem) {
-                        let layer = gpxLayers.get(item.getFileId());
-                        let file = getFile(item.getFileId());
+                        let layer = gpxLayers.getLayer(item.getFileId());
+                        let file = fileStateCollection.getFile(item.getFileId());
                         if (layer && file) {
                             let waypoint = file.wpt[item.getWaypointIndex()];
                             if (waypoint) {
@@ -185,9 +184,9 @@
                         }
                     }
                 }}
-                on:mouseleave={() => {
+                onmouseleave={() => {
                     if (item instanceof ListWaypointItem) {
-                        let layer = gpxLayers.get(item.getFileId());
+                        let layer = gpxLayers.getLayer(item.getFileId());
                         if (layer) {
                             waypointPopup?.setItem(null);
                         }
@@ -195,16 +194,13 @@
                 }}
             >
                 {#if item.level === ListLevel.SEGMENT}
-                    <Waypoints size="16" class="mr-1 shrink-0" />
+                    <Waypoints size="16" class="mx-1 shrink-0" />
                 {:else if item.level === ListLevel.WAYPOINT}
                     {#if symbolKey && symbols[symbolKey].icon}
-                        <svelte:component
-                            this={symbols[symbolKey].icon}
-                            size="16"
-                            class="mr-1 shrink-0"
-                        />
+                        {@const SymbolIcon = symbols[symbolKey].icon}
+                        <SymbolIcon size="16" class="mx-1 shrink-0" />
                     {:else}
-                        <MapPin size="16" class="mr-1 shrink-0" />
+                        <MapPin size="16" class="mx-1 shrink-0" />
                     {/if}
                 {/if}
                 <span
@@ -216,13 +212,10 @@
                 </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
+                        size="10"
+                        class="shrink-0 size-3.5 ml-1 {orientation === 'vertical'
                             ? 'mr-3'
-                            : ''}"
+                            : 'mt-0.5'}"
                     />
                 {/if}
             </span>
@@ -230,31 +223,34 @@
     </ContextMenu.Trigger>
     <ContextMenu.Content>
         {#if item instanceof ListFileItem || item instanceof ListTrackItem}
-            <ContextMenu.Item disabled={!singleSelection} on:click={() => ($editMetadata = true)}>
-                <Info size="16" class="mr-1" />
-                {$_('menu.metadata.button')}
+            <ContextMenu.Item
+                disabled={!singleSelection}
+                onclick={() => (editMetadata.current = true)}
+            >
+                <Info size="16" />
+                {i18n._('menu.metadata.button')}
                 <Shortcut key="I" ctrl={true} />
             </ContextMenu.Item>
-            <ContextMenu.Item on:click={() => ($editStyle = true)}>
-                <PaintBucket size="16" class="mr-1" />
-                {$_('menu.style.button')}
+            <ContextMenu.Item onclick={() => (editStyle.current = true)}>
+                <PaintBucket size="16" />
+                {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')}
+                <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} />
         </ContextMenu.Item>
@@ -263,72 +259,68 @@
             {#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')}
+                    <Plus size="16" />
+                    {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')}
+                    <Plus size="16" />
+                    {i18n._('menu.new_segment')}
                 </ContextMenu.Item>
                 <ContextMenu.Separator />
             {/if}
         {/if}
         {#if item.level !== ListLevel.WAYPOINTS}
-            <ContextMenu.Item on:click={selectAll}>
-                <FileStack size="16" class="mr-1" />
-                {$_('menu.select_all')}
+            <ContextMenu.Item onclick={() => selection.selectAll()}>
+                <FileStack size="16" />
+                {i18n._('menu.select_all')}
                 <Shortcut key="A" ctrl={true} />
             </ContextMenu.Item>
         {/if}
-        <ContextMenu.Item on:click={centerMapOnSelection}>
-            <Maximize size="16" class="mr-1" />
-            {$_('menu.center')}
+        <ContextMenu.Item onclick={() => boundsManager.centerMapOnSelection()}>
+            <Maximize size="16" />
+            {i18n._('menu.center')}
             <Shortcut key="⏎" ctrl={true} />
         </ContextMenu.Item>
         <ContextMenu.Separator />
-        <ContextMenu.Item on:click={dbUtils.duplicateSelection}>
-            <Copy size="16" class="mr-1" />
-            {$_('menu.duplicate')}
-            <Shortcut key="D" ctrl={true} /></ContextMenu.Item
-        >
+        <ContextMenu.Item onclick={fileActions.duplicateSelection}>
+            <Copy size="16" />
+            {i18n._('menu.duplicate')}
+            <Shortcut key="D" ctrl={true} />
+        </ContextMenu.Item>
         {#if orientation === 'vertical'}
-            <ContextMenu.Item on:click={copySelection}>
-                <ClipboardCopy size="16" class="mr-1" />
-                {$_('menu.copy')}
+            <ContextMenu.Item onclick={() => selection.copySelection()}>
+                <ClipboardCopy size="16" />
+                {i18n._('menu.copy')}
                 <Shortcut key="C" ctrl={true} />
             </ContextMenu.Item>
-            <ContextMenu.Item on:click={cutSelection}>
-                <Scissors size="16" class="mr-1" />
-                {$_('menu.cut')}
+            <ContextMenu.Item onclick={() => selection.cutSelection()}>
+                <Scissors size="16" />
+                {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')}
+                <ClipboardPaste size="16" />
+                {i18n._('menu.paste')}
                 <Shortcut key="V" ctrl={true} />
             </ContextMenu.Item>
         {/if}
         <ContextMenu.Separator />
-        <ContextMenu.Item on:click={dbUtils.deleteSelection}>
-            {#if item instanceof ListFileItem}
-                <FileX size="16" class="mr-1" />
-                {$_('menu.close')}
-            {:else}
-                <Trash2 size="16" class="mr-1" />
-                {$_('menu.delete')}
-            {/if}
+        <ContextMenu.Item onclick={fileActions.deleteSelection}>
+            <Trash2 size="16" />
+            {i18n._('menu.delete')}
             <Shortcut key="⌫" ctrl={true} />
         </ContextMenu.Item>
     </ContextMenu.Content>

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,375 +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,173 +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, defaultWidth } = settings;
-
-    let colors: string[] = [];
-    let color: string | undefined = undefined;
-    let opacity: number[] = [];
-    let width: number[] = [];
-    let colorChanged = false;
-    let opacityChanged = false;
-    let widthChanged = false;
-
-    function setStyleInputs() {
-        colors = [];
-        opacity = [];
-        width = [];
-
-        $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.width.forEach((w) => {
-                        if (!width.includes(w)) {
-                            width.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['gpx_style:color'] &&
-                            !colors.includes(style['gpx_style:color'])
-                        ) {
-                            colors.push(style['gpx_style:color']);
-                        }
-                        if (
-                            style['gpx_style:opacity'] &&
-                            !opacity.includes(style['gpx_style:opacity'])
-                        ) {
-                            opacity.push(style['gpx_style:opacity']);
-                        }
-                        if (style['gpx_style:width'] && !width.includes(style['gpx_style:width'])) {
-                            width.push(style['gpx_style:width']);
-                        }
-                    }
-                    if (!colors.includes(layer.layerColor)) {
-                        colors.push(layer.layerColor);
-                    }
-                }
-            }
-        });
-
-        color = colors[0];
-        opacity = [opacity[0] ?? $defaultOpacity];
-        width = [width[0] ?? $defaultWidth];
-
-        colorChanged = false;
-        opacityChanged = false;
-        widthChanged = 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={width}
-                    id="width"
-                    min={1}
-                    max={10}
-                    step={1}
-                    onValueChange={() => (widthChanged = true)}
-                />
-            </div>
-        </Label>
-        <Button
-            variant="outline"
-            disabled={!colorChanged && !opacityChanged && !widthChanged}
-            on:click={() => {
-                let style = {};
-                if (colorChanged) {
-                    style['gpx_style:color'] = color;
-                }
-                if (opacityChanged) {
-                    style['gpx_style:opacity'] = opacity[0];
-                }
-                if (widthChanged) {
-                    style['gpx_style:width'] = width[0];
-                }
-                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;
-            }}
-        >
-            <Save size="16" class="mr-1" />
-            {$_('menu.metadata.save')}
-        </Button>
-    </Popover.Content>
-</Popover.Root>

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

@@ -0,0 +1,300 @@
+export enum ListLevel {
+    ROOT,
+    FILE,
+    TRACK,
+    SEGMENT,
+    WAYPOINTS,
+    WAYPOINT,
+}
+
+export abstract class ListItem {
+    [x: string]: any;
+    level: ListLevel;
+
+    constructor(level: ListLevel) {
+        this.level = level;
+    }
+
+    abstract getId(): string | number;
+    abstract getFullId(): string;
+    abstract getIdAtLevel(level: ListLevel): string | number | undefined;
+    abstract getFileId(): string;
+    abstract getParent(): ListItem;
+    abstract extend(id: string | number): ListItem;
+}
+
+export class ListRootItem extends ListItem {
+    constructor() {
+        super(ListLevel.ROOT);
+    }
+
+    getId(): string {
+        return 'root';
+    }
+
+    getFullId(): string {
+        return 'root';
+    }
+
+    getIdAtLevel(level: ListLevel): string | number | undefined {
+        return undefined;
+    }
+
+    getFileId(): string {
+        return '';
+    }
+
+    getParent(): ListItem {
+        return this;
+    }
+
+    extend(id: string): ListFileItem {
+        return new ListFileItem(id);
+    }
+}
+
+export class ListFileItem extends ListItem {
+    fileId: string;
+
+    constructor(fileId: string) {
+        super(ListLevel.FILE);
+        this.fileId = fileId;
+    }
+
+    getId(): string {
+        return this.fileId;
+    }
+
+    getFullId(): string {
+        return this.fileId;
+    }
+
+    getIdAtLevel(level: ListLevel): string | number | undefined {
+        switch (level) {
+            case ListLevel.ROOT:
+                return this.fileId;
+            default:
+                return undefined;
+        }
+    }
+
+    getFileId(): string {
+        return this.fileId;
+    }
+
+    getParent(): ListItem {
+        return new ListRootItem();
+    }
+
+    extend(id: number | 'waypoints'): ListTrackItem | ListWaypointsItem {
+        if (id === 'waypoints') {
+            return new ListWaypointsItem(this.fileId);
+        } else {
+            return new ListTrackItem(this.fileId, id);
+        }
+    }
+}
+
+export class ListTrackItem extends ListItem {
+    fileId: string;
+    trackIndex: number;
+
+    constructor(fileId: string, trackIndex: number) {
+        super(ListLevel.TRACK);
+        this.fileId = fileId;
+        this.trackIndex = trackIndex;
+    }
+
+    getId(): number {
+        return this.trackIndex;
+    }
+
+    getFullId(): string {
+        return `${this.fileId}-track-${this.trackIndex}`;
+    }
+
+    getIdAtLevel(level: ListLevel): string | number | undefined {
+        switch (level) {
+            case ListLevel.ROOT:
+                return this.fileId;
+            case ListLevel.FILE:
+                return this.trackIndex;
+            default:
+                return undefined;
+        }
+    }
+
+    getFileId(): string {
+        return this.fileId;
+    }
+
+    getTrackIndex(): number {
+        return this.trackIndex;
+    }
+
+    getParent(): ListItem {
+        return new ListFileItem(this.fileId);
+    }
+
+    extend(id: number): ListTrackSegmentItem {
+        return new ListTrackSegmentItem(this.fileId, this.trackIndex, id);
+    }
+}
+
+export class ListTrackSegmentItem extends ListItem {
+    fileId: string;
+    trackIndex: number;
+    segmentIndex: number;
+
+    constructor(fileId: string, trackIndex: number, segmentIndex: number) {
+        super(ListLevel.SEGMENT);
+        this.fileId = fileId;
+        this.trackIndex = trackIndex;
+        this.segmentIndex = segmentIndex;
+    }
+
+    getId(): number {
+        return this.segmentIndex;
+    }
+
+    getFullId(): string {
+        return `${this.fileId}-track-${this.trackIndex}--${this.segmentIndex}`;
+    }
+
+    getIdAtLevel(level: ListLevel): string | number | undefined {
+        switch (level) {
+            case ListLevel.ROOT:
+                return this.fileId;
+            case ListLevel.FILE:
+                return this.trackIndex;
+            case ListLevel.TRACK:
+                return this.segmentIndex;
+            default:
+                return undefined;
+        }
+    }
+
+    getFileId(): string {
+        return this.fileId;
+    }
+
+    getTrackIndex(): number {
+        return this.trackIndex;
+    }
+
+    getSegmentIndex(): number {
+        return this.segmentIndex;
+    }
+
+    getParent(): ListItem {
+        return new ListTrackItem(this.fileId, this.trackIndex);
+    }
+
+    extend(): ListTrackSegmentItem {
+        return this;
+    }
+}
+
+export class ListWaypointsItem extends ListItem {
+    fileId: string;
+
+    constructor(fileId: string) {
+        super(ListLevel.WAYPOINTS);
+        this.fileId = fileId;
+    }
+
+    getId(): string {
+        return 'waypoints';
+    }
+
+    getFullId(): string {
+        return `${this.fileId}-waypoints`;
+    }
+
+    getIdAtLevel(level: ListLevel): string | number | undefined {
+        switch (level) {
+            case ListLevel.ROOT:
+                return this.fileId;
+            case ListLevel.FILE:
+                return 'waypoints';
+            default:
+                return undefined;
+        }
+    }
+
+    getFileId(): string {
+        return this.fileId;
+    }
+
+    getParent(): ListItem {
+        return new ListFileItem(this.fileId);
+    }
+
+    extend(id: number): ListWaypointItem {
+        return new ListWaypointItem(this.fileId, id);
+    }
+}
+
+export class ListWaypointItem extends ListItem {
+    fileId: string;
+    waypointIndex: number;
+
+    constructor(fileId: string, waypointIndex: number) {
+        super(ListLevel.WAYPOINT);
+        this.fileId = fileId;
+        this.waypointIndex = waypointIndex;
+    }
+
+    getId(): number {
+        return this.waypointIndex;
+    }
+
+    getFullId(): string {
+        return `${this.fileId}-waypoint-${this.waypointIndex}`;
+    }
+
+    getIdAtLevel(level: ListLevel): string | number | undefined {
+        switch (level) {
+            case ListLevel.ROOT:
+                return this.fileId;
+            case ListLevel.FILE:
+                return 'waypoints';
+            case ListLevel.WAYPOINTS:
+                return this.waypointIndex;
+            default:
+                return undefined;
+        }
+    }
+
+    getFileId(): string {
+        return this.fileId;
+    }
+
+    getWaypointIndex(): number {
+        return this.waypointIndex;
+    }
+
+    getParent(): ListItem {
+        return new ListWaypointsItem(this.fileId);
+    }
+
+    extend(): ListWaypointItem {
+        return this;
+    }
+}
+
+export function sortItems(items: ListItem[], reverse: boolean = false) {
+    items.sort((a, b) => {
+        if (a instanceof ListTrackItem && b instanceof ListTrackItem) {
+            return a.getTrackIndex() - b.getTrackIndex();
+        } else if (a instanceof ListTrackSegmentItem && b instanceof ListTrackSegmentItem) {
+            return a.getSegmentIndex() - b.getSegmentIndex();
+        } else if (a instanceof ListWaypointItem && b instanceof ListWaypointItem) {
+            return a.getWaypointIndex() - b.getWaypointIndex();
+        }
+        return a.level - b.level;
+    });
+    if (reverse) {
+        items.reverse();
+    }
+}

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

@@ -4,46 +4,56 @@
     import { Textarea } from '$lib/components/ui/textarea';
     import { Label } from '$lib/components/ui/label/index.js';
     import * as Popover from '$lib/components/ui/popover';
-    import { dbUtils } from '$lib/db';
-    import { Save } from 'lucide-svelte';
-    import { ListFileItem, ListTrackItem, type ListItem } from './FileList';
+    import { 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';
+    import { fileActionManager } from '$lib/logic/file-action-manager';
 
-    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 instanceof Track
               ? (node.name ?? '')
-              : '';
-    let description: string =
+              : ''
+    );
+    let description: string = $derived(
         node instanceof GPXFile
             ? (node.metadata.desc ?? '')
             : node instanceof Track
               ? (node.desc ?? '')
-              : '';
+              : ''
+    );
 
-    $: if (!open) {
-        $editMetadata = false;
-    }
+    $effect(() => {
+        if (!open) {
+            editMetadata.current = false;
+        }
+    });
 </script>
 
 <Popover.Root bind:open>
-    <Popover.Trigger />
+    <Popover.Trigger class="-mx-1" />
     <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={() => {
-                dbUtils.applyToFile(item.getFileId(), (file) => {
+            onclick={() => {
+                fileActionManager.applyToFile(item.getFileId(), (file) => {
                     if (item instanceof ListFileItem && node instanceof GPXFile) {
                         file.metadata.name = name;
                         file.metadata.desc = description;
@@ -58,8 +68,8 @@
                 open = false;
             }}
         >
-            <Save size="16" class="mr-1" />
-            {$_('menu.metadata.save')}
+            <Save size="16" />
+            {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/sortable-file-list.ts

@@ -0,0 +1,284 @@
+import { isMac } from '$lib/utils';
+import Sortable, { type Direction } from 'sortablejs/Sortable';
+import { ListItem, ListLevel, ListRootItem } from './file-list';
+import { selection } from '$lib/logic/selection';
+import { getFileIds, moveItems } from '$lib/logic/file-actions';
+import { get, writable, type Readable } from 'svelte/store';
+import { settings } from '$lib/logic/settings';
+import type { GPXFileWithStatistics } from '$lib/logic/statistics-tree';
+import type { AnyGPXTreeElement, GPXTreeElement, Waypoint } from 'gpx';
+import { tick } from 'svelte';
+
+const { fileOrder } = settings;
+
+export const allowedMoves: Record<ListLevel, ListLevel[]> = {
+    [ListLevel.ROOT]: [],
+    [ListLevel.FILE]: [ListLevel.FILE],
+    [ListLevel.TRACK]: [ListLevel.FILE, ListLevel.TRACK],
+    [ListLevel.SEGMENT]: [ListLevel.FILE, ListLevel.TRACK, ListLevel.SEGMENT],
+    [ListLevel.WAYPOINTS]: [ListLevel.WAYPOINTS],
+    [ListLevel.WAYPOINT]: [ListLevel.WAYPOINTS, ListLevel.WAYPOINT],
+};
+
+export const allowedPastes: Record<ListLevel, ListLevel[]> = {
+    [ListLevel.ROOT]: [],
+    [ListLevel.FILE]: [ListLevel.ROOT, ListLevel.FILE],
+    [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],
+};
+
+export const dragging = writable<ListLevel | null>(null);
+
+export class SortableFileList {
+    private _node:
+        | Map<string, Readable<GPXFileWithStatistics | undefined>>
+        | GPXTreeElement<AnyGPXTreeElement>
+        | Waypoint[]
+        | Waypoint;
+    private _item: ListItem;
+    private _sortableLevel: ListLevel;
+    private _container: HTMLElement;
+    private _sortable: Sortable | null = null;
+    private _elements: { [id: string]: HTMLElement } = {};
+    private _updatingSelection: boolean = false;
+    private _unsubscribes: (() => void)[] = [];
+
+    constructor(
+        container: HTMLElement,
+        node:
+            | Map<string, Readable<GPXFileWithStatistics | undefined>>
+            | GPXTreeElement<AnyGPXTreeElement>
+            | Waypoint[]
+            | Waypoint,
+        item: ListItem,
+        waypointRoot: boolean,
+        sortableLevel: ListLevel,
+        orientation: Direction
+    ) {
+        this._node = node;
+        this._item = item;
+        this._sortableLevel = sortableLevel;
+        this._container = container;
+        this._sortable = Sortable.create(container, {
+            group: {
+                name: sortableLevel,
+                pull: allowedMoves[sortableLevel],
+                put: true,
+            },
+            direction: orientation,
+            forceAutoScrollFallback: true,
+            multiDrag: true,
+            multiDragKey: isMac() ? 'Meta' : 'Ctrl',
+            avoidImplicitDeselect: true,
+            onSelect: (e: Sortable.SortableEvent) =>
+                setTimeout(() => this.updateToSelection(e), 50),
+            onDeselect: (e: Sortable.SortableEvent) =>
+                setTimeout(() => this.updateToSelection(e), 50),
+            onStart: () => dragging.set(sortableLevel),
+            onEnd: () => dragging.set(null),
+            onSort: (e: Sortable.SortableEvent) => this.onSort(e),
+        });
+        Object.defineProperty(this._sortable, '_item', {
+            value: item,
+            writable: true,
+        });
+
+        Object.defineProperty(this._sortable, '_waypointRoot', {
+            value: waypointRoot,
+            writable: true,
+        });
+
+        this._unsubscribes.push(
+            selection.subscribe(() => tick().then(() => this.updateFromSelection()))
+        );
+        this._unsubscribes.push(fileOrder.subscribe(() => this.updateFromFileOrder()));
+    }
+
+    onSort(e: Sortable.SortableEvent) {
+        this.updateToFileOrder();
+
+        const from = Sortable.get(e.from);
+        const to = Sortable.get(e.to);
+
+        if (!from || !to) {
+            return;
+        }
+
+        let fromItem = from._item;
+        let toItem = to._item;
+
+        if (this._item === toItem && !(fromItem instanceof ListRootItem)) {
+            // Event is triggered on source and destination list, only handle it once
+            let fromItems = [];
+            let toItems = [];
+
+            if (from._waypointRoot) {
+                fromItems = [fromItem.extend('waypoints')];
+            } else {
+                let oldIndices: number[] =
+                    e.oldIndicies.length > 0 ? e.oldIndicies.map((i) => i.index) : [e.oldIndex];
+                oldIndices = oldIndices.filter((i) => i >= 0);
+                oldIndices.sort((a, b) => a - b);
+
+                fromItems = oldIndices.map((i) => fromItem.extend(i));
+            }
+
+            if (from._waypointRoot && to._waypointRoot) {
+                toItems = [toItem.extend('waypoints')];
+            } else {
+                if (to._waypointRoot) {
+                    toItem = toItem.extend('waypoints');
+                }
+
+                let newIndices: number[] =
+                    e.newIndicies.length > 0 ? e.newIndicies.map((i) => i.index) : [e.newIndex];
+                newIndices = newIndices.filter((i) => i >= 0);
+                newIndices.sort((a, b) => a - b);
+
+                if (toItem instanceof ListRootItem) {
+                    let newFileIds = getFileIds(newIndices.length);
+                    toItems = newIndices.map((i, index) => {
+                        get(fileOrder).splice(i, 0, newFileIds[index]);
+                        return this._item.extend(newFileIds[index]);
+                    });
+                } else {
+                    toItems = newIndices.map((i) => toItem.extend(i));
+                }
+            }
+
+            moveItems(fromItem, toItem, fromItems, toItems);
+        }
+    }
+
+    updateFromSelection() {
+        const changed = this.getChangedIds();
+        if (changed.length === 0) {
+            return;
+        }
+        const selection_ = get(selection);
+        for (let id of changed) {
+            let element = this._elements[id];
+            if (element) {
+                if (selection_.has(this._item.extend(id))) {
+                    Sortable.utils.select(element);
+                    element.scrollIntoView({
+                        behavior: 'smooth',
+                        block: 'nearest',
+                    });
+                } else {
+                    Sortable.utils.deselect(element);
+                }
+            }
+        }
+    }
+
+    updateToSelection(e: Sortable.SortableEvent) {
+        if (!this._sortable) return;
+        if (this._updatingSelection) return;
+        this._updatingSelection = true;
+        const changed = this.getChangedIds();
+        if (changed.length == 0) {
+            this._updatingSelection = false;
+            return;
+        }
+        selection.update(($selection) => {
+            $selection.clear();
+            Object.entries(this._elements).forEach(([id, element]) => {
+                $selection.set(
+                    this._item.extend(this.getRealId(id)),
+                    element.classList.contains('sortable-selected')
+                );
+            });
+
+            if (
+                e.originalEvent &&
+                !(e.originalEvent.ctrlKey || e.originalEvent.metaKey || e.originalEvent.shiftKey) &&
+                ($selection.size > 1 ||
+                    !$selection.has(this._item.extend(this.getRealId(changed[0]))))
+            ) {
+                // Fix bug that sometimes causes a single select to be treated as a multi-select
+                $selection.clear();
+                $selection.set(this._item.extend(this.getRealId(changed[0])), true);
+            }
+            return $selection;
+        });
+        this._updatingSelection = false;
+    }
+
+    updateFromFileOrder() {
+        if (!this._sortable || this._sortableLevel !== ListLevel.FILE) {
+            return;
+        }
+
+        const fileOrder_ = get(fileOrder);
+        const sortableOrder = this._sortable.toArray();
+
+        if (
+            fileOrder_.length !== sortableOrder.length ||
+            fileOrder_.some((value, index) => value !== sortableOrder[index])
+        ) {
+            this._sortable.sort(fileOrder_);
+        }
+    }
+
+    updateToFileOrder() {
+        if (!this._sortable || this._sortableLevel !== ListLevel.FILE) {
+            return;
+        }
+
+        const fileOrder_ = get(fileOrder);
+        const sortableOrder = this._sortable.toArray();
+
+        if (
+            fileOrder_.length !== sortableOrder.length ||
+            fileOrder_.some((value, index) => value !== sortableOrder[index])
+        ) {
+            fileOrder.set(sortableOrder);
+        }
+    }
+
+    updateElements() {
+        this._elements = {};
+        this._container.childNodes.forEach((element) => {
+            if (element instanceof HTMLElement) {
+                let attr = element.getAttribute('data-id');
+                if (attr) {
+                    if (this._node instanceof Map && !this._node.has(attr)) {
+                        element.remove();
+                    } else {
+                        this._elements[attr] = element;
+                    }
+                }
+            }
+        });
+    }
+
+    destroy() {
+        this._sortable = null;
+        this._unsubscribes.forEach((unsubscribe) => unsubscribe());
+        this._unsubscribes = [];
+    }
+
+    getChangedIds() {
+        let changed: (string | number)[] = [];
+        const selection_ = get(selection);
+        Object.entries(this._elements).forEach(([id, element]) => {
+            let realId = this.getRealId(id);
+            let realItem = this._item.extend(realId);
+            let inSelection = selection_.has(realItem);
+            let isSelected = element.classList.contains('sortable-selected');
+            if (inSelection !== isSelected) {
+                changed.push(realId);
+            }
+        });
+        return changed;
+    }
+
+    getRealId(id: string | number) {
+        return this._sortableLevel === ListLevel.FILE || this._sortableLevel === ListLevel.WAYPOINTS
+            ? id
+            : parseInt(id as string);
+    }
+}

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

@@ -0,0 +1,171 @@
+<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 { 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 { i18n } from '$lib/i18n.svelte';
+    import type { LineStyleExtension } from 'gpx';
+    import { settings } from '$lib/logic/settings';
+    import { selection } from '$lib/logic/selection';
+    import { fileStateCollection } from '$lib/logic/file-state';
+    import { gpxLayers } from '$lib/components/map/gpx-layer/gpx-layers';
+    import { untrack } from 'svelte';
+    import { fileActions } from '$lib/logic/file-actions';
+
+    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 = fileStateCollection.getFile(item.getFileId());
+                let layer = gpxLayers.getLayer(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 = fileStateCollection.getFile(item.getFileId());
+                let layer = gpxLayers.getLayer(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) {
+            untrack(() => 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;
+        }
+        fileActions.setStyleToSelection(style);
+
+        if (item instanceof ListFileItem && $selection.size === fileStateCollection.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 class="-mx-1" />
+    <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" />
+            {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/CopyCoordinates.svelte

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

website/src/lib/components/gpx-layer/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/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/map/CoordinatesPopup.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
-    import { map } from '$lib/stores';
-    import { trackpointPopup } from '$lib/components/gpx-layer/GPXLayerPopup';
+    import { map } from '$lib/components/map/map';
+    import { trackpointPopup } from '$lib/components/map/gpx-layer/gpx-layer-popup';
     import { TrackPoint } from 'gpx';
 
-    $: if ($map) {
-        $map.on('contextmenu', (e) => {
+    map.onLoad((map_) => {
+        map_.on('contextmenu', (e) => {
             trackpointPopup?.setItem({
                 item: new TrackPoint({
                     attributes: {
@@ -14,5 +14,5 @@
                 }),
             });
         });
-    }
+    });
 </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 './custom-control';
+    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="p-1 has-[>svg]:px-2 h-8 justify-start {className}"
+    variant="outline"
+    onclick={() => {
+        navigator.clipboard.writeText(
+            `${coordinates.lat.toFixed(6)}, ${coordinates.lon.toFixed(6)}`
+        );
+        onCopy();
+    }}
+>
+    <ClipboardCopy size="16" />
+    {i18n._('menu.copy_coordinates')}
+</Button>

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

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

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

@@ -1,20 +1,16 @@
 <script lang="ts">
     import type { TrackPoint } from 'gpx';
-    import type { PopupItem } from '$lib/components/MapPopup';
-    import CopyCoordinates from '$lib/components/gpx-layer/CopyCoordinates.svelte';
+    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 { df } from '$lib/utils';
-    import { _ } from 'svelte-i18n';
+    import { Compass, Mountain, Timer } from '@lucide/svelte';
+    import { i18n } from '$lib/i18n.svelte';
+    import type { PopupItem } from '$lib/components/map/map-popup';
 
-    export let trackpoint: PopupItem<TrackPoint>;
+    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" />
@@ -31,7 +27,7 @@
         {#if trackpoint.item.time}
             <div class="flex flex-row items-center gap-1">
                 <Timer size="14" />
-                {df.format(trackpoint.item.time)}
+                {i18n.df.format(trackpoint.item.time)}
             </div>
         {/if}
         <CopyCoordinates

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

@@ -2,21 +2,25 @@
     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/gpx-layer/CopyCoordinates.svelte';
-    import { deleteWaypoint } from './GPXLayerPopup';
+    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 { Tool, currentTool } from '$lib/stores';
+    import { Dot, ExternalLink, Trash2 } from '@lucide/svelte';
+    import { currentTool, Tool } from '$lib/components/toolbar/tools';
     import { getSymbolKey, symbols } from '$lib/assets/symbols';
-    import { _ } from 'svelte-i18n';
+    import { i18n } from '$lib/i18n.svelte';
     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';
+    import { fileActions } from '$lib/logic/file-actions';
+    import type { PopupItem } from '$lib/components/map/map-popup';
 
-    export let waypoint: PopupItem<Waypoint>;
+    let {
+        waypoint,
+    }: {
+        waypoint: PopupItem<Waypoint>;
+    } = $props();
 
-    $: symbolKey = waypoint ? getSymbolKey(waypoint.item.sym) : undefined;
+    let symbolKey = $derived(waypoint ? getSymbolKey(waypoint.item.sym) : undefined);
 
     function sanitize(text: string | undefined): string {
         if (text === undefined) {
@@ -32,8 +36,8 @@
     }
 </script>
 
-<Card.Root class="border-none shadow-md text-base p-2 max-w-[50dvw]">
-    <Card.Header class="p-0">
+<Card.Root class="border-none shadow-md text-base p-2 max-w-[50dvw] gap-0">
+    <Card.Header class="p-0 gap-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">
@@ -41,7 +45,7 @@
                     <ExternalLink size="12" class="inline-block mb-1.5" />
                 </a>
             {:else}
-                {waypoint.item.name ?? $_('gpx.waypoint')}
+                {waypoint.item.name ?? i18n._('gpx.waypoint')}
             {/if}
         </Card.Title>
     </Card.Header>
@@ -50,15 +54,12 @@
             {#if symbolKey}
                 <span>
                     {#if symbols[symbolKey].icon}
-                        <svelte:component
-                            this={symbols[symbolKey].icon}
-                            size="12"
-                            class="inline-block mb-0.5"
-                        />
+                        {@const Icon = symbols[symbolKey].icon}
+                        <Icon size="12" class="inline-block mb-1" />
                     {:else}
-                        <span class="w-4 inline-block" />
+                        <span class="w-4 inline-block"></span>
                     {/if}
-                    {$_(`gpx.symbol.${symbolKey}`)}
+                    {i18n._(`gpx.symbol.${symbolKey}`)}
                 </span>
                 <Dot size="16" />
             {/if}
@@ -70,7 +71,7 @@
                 <WithUnits value={waypoint.item.ele} type="elevation" />
             {/if}
         </div>
-        <ScrollArea class="flex flex-col" viewportClasses="max-h-[30dvh]">
+        <ScrollArea class="flex flex-col max-h-[30dvh]">
             {#if waypoint.item.desc}
                 <span class="whitespace-pre-wrap">{@html sanitize(waypoint.item.desc)}</span>
             {/if}
@@ -82,12 +83,17 @@
             <CopyCoordinates coordinates={waypoint.item.attributes} />
             {#if $currentTool === Tool.WAYPOINT}
                 <Button
-                    class="w-full px-2 py-1 h-8 justify-start"
+                    class="p-1 has-[>svg]:px-2 h-8"
                     variant="outline"
-                    on:click={() => deleteWaypoint(waypoint.fileId, waypoint.item._data.index)}
+                    onclick={() => {
+                        if (waypoint.fileId) {
+                            fileActions.deleteWaypoint(waypoint.fileId, waypoint.item._data.index);
+                            waypoint.hide?.();
+                        }
+                    }}
                 >
-                    <Trash2 size="16" class="mr-1" />
-                    {$_('menu.delete')}
+                    <Trash2 size="16" />
+                    {i18n._('menu.delete')}
                     <Shortcut shift={true} click={true} />
                 </Button>
             {/if}
@@ -96,6 +102,8 @@
 </Card.Root>
 
 <style lang="postcss">
+    @reference "../../../../app.css";
+
     div :global(a) {
         @apply text-link;
         @apply hover:underline;

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

@@ -1,6 +1,10 @@
-import { settings } from '$lib/db';
-import { gpxStatistics } from '$lib/stores';
+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';
+import { allHidden } from '$lib/logic/hidden';
 
 const { distanceMarkers, distanceUnits } = settings;
 
@@ -14,34 +18,41 @@ const stops = [
 ];
 
 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(allHidden.subscribe(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');
+            if (get(distanceMarkers) && !get(allHidden)) {
+                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(),
                     });
                 }
                 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',
@@ -67,13 +78,13 @@ export class DistanceMarkers {
                             },
                         });
                     } 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}`);
                     }
                 });
             }
@@ -95,7 +106,7 @@ export class DistanceMarkers {
         for (let i = 0; i < statistics.local.distance.total.length; i++) {
             if (
                 statistics.local.distance.total[i] >=
-                currentTargetDistance * (get(distanceUnits) === 'metric' ? 1 : 1.60934)
+                getConvertedDistanceToKilometers(currentTargetDistance)
             ) {
                 let distance = currentTargetDistance.toFixed(0);
                 let [level, minzoom] = stops.find(([d]) => currentTargetDistance % d === 0) ?? [

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;
@@ -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

@@ -1,9 +1,7 @@
-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 { map } from '$lib/components/map/map';
+import { waypointPopup, trackpointPopup } from './gpx-layer-popup';
 import {
     ListTrackSegmentItem,
     ListWaypointItem,
@@ -11,18 +9,19 @@ import {
     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';
+} 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',
@@ -85,7 +84,6 @@ function getMarkerForSymbol(symbol: string | undefined, layerColor: string) {
 const { directionMarkers, treeFileView, defaultOpacity, defaultWidth } = settings;
 
 export class GPXLayer {
-    map: mapboxgl.Map;
     fileId: string;
     file: Readable<GPXFileWithStatistics | undefined>;
     layerColor: string;
@@ -101,15 +99,18 @@ export class GPXLayer {
     layerOnClickBinded: (e: any) => void = this.layerOnClick.bind(this);
     layerOnContextMenuBinded: (e: any) => void = this.layerOnContextMenu.bind(this);
 
-    constructor(
-        map: mapboxgl.Map,
-        fileId: string,
-        file: Readable<GPXFileWithStatistics | undefined>
-    ) {
-        this.map = map;
+    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) => {
@@ -136,13 +137,12 @@ export class GPXLayer {
             })
         );
         this.draggable = get(currentTool) === Tool.WAYPOINT;
-
-        this.map.on('style.import.load', this.updateBinded);
     }
 
     update() {
+        const _map = get(map);
         let file = get(this.file)?.file;
-        if (!file) {
+        if (!_map || !file) {
             return;
         }
 
@@ -156,18 +156,18 @@ export class GPXLayer {
         }
 
         try {
-            let source = this.map.getSource(this.fileId);
+            let source = _map.getSource(this.fileId) as mapboxgl.GeoJSONSource | undefined;
             if (source) {
                 source.setData(this.getGeoJSON());
             } else {
-                this.map.addSource(this.fileId, {
+                _map.addSource(this.fileId, {
                     type: 'geojson',
                     data: this.getGeoJSON(),
                 });
             }
 
-            if (!this.map.getLayer(this.fileId)) {
-                this.map.addLayer({
+            if (!_map.getLayer(this.fileId)) {
+                _map.addLayer({
                     id: this.fileId,
                     type: 'line',
                     source: this.fileId,
@@ -182,16 +182,16 @@ export class GPXLayer {
                     },
                 });
 
-                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);
+                _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 (!this.map.getLayer(this.fileId + '-direction')) {
-                    this.map.addLayer(
+                if (!_map.getLayer(this.fileId + '-direction')) {
+                    _map.addLayer(
                         {
                             id: this.fileId + '-direction',
                             type: 'symbol',
@@ -213,12 +213,12 @@ export class GPXLayer {
                                 'text-halo-color': 'white',
                             },
                         },
-                        this.map.getLayer('distance-markers') ? 'distance-markers' : undefined
+                        _map.getLayer('distance-markers-100') ? 'distance-markers-100' : undefined
                     );
                 }
             } else {
-                if (this.map.getLayer(this.fileId + '-direction')) {
-                    this.map.removeLayer(this.fileId + '-direction');
+                if (_map.getLayer(this.fileId + '-direction')) {
+                    _map.removeLayer(this.fileId + '-direction');
                 }
             }
 
@@ -229,7 +229,7 @@ export class GPXLayer {
                 }
             });
 
-            this.map.setFilter(
+            _map.setFilter(
                 this.fileId,
                 [
                     'any',
@@ -241,8 +241,8 @@ export class GPXLayer {
                 ],
                 { validate: false }
             );
-            if (this.map.getLayer(this.fileId + '-direction')) {
-                this.map.setFilter(
+            if (_map.getLayer(this.fileId + '-direction')) {
+                _map.setFilter(
                     this.fileId + '-direction',
                     [
                         'any',
@@ -300,7 +300,7 @@ export class GPXLayer {
                         }
 
                         if (get(currentTool) === Tool.WAYPOINT && e.shiftKey) {
-                            deleteWaypoint(this.fileId, marker._waypoint._data.index);
+                            fileActions.deleteWaypoint(this.fileId, marker._waypoint._data.index);
                             e.stopPropagation();
                             return;
                         }
@@ -313,11 +313,11 @@ export class GPXLayer {
                                     false
                                 )
                             ) {
-                                addSelectItem(
+                                selection.addSelectItem(
                                     new ListWaypointItem(this.fileId, marker._waypoint._data.index)
                                 );
                             } else {
-                                selectItem(
+                                selection.selectItem(
                                     new ListWaypointItem(this.fileId, marker._waypoint._data.index)
                                 );
                             }
@@ -329,15 +329,15 @@ export class GPXLayer {
                         e.stopPropagation();
                     });
                     marker.on('dragstart', () => {
-                        setGrabbingCursor();
+                        mapCursor.notify(MapCursorState.WAYPOINT_DRAGGING, true);
                         marker.getElement().style.cursor = 'grabbing';
                         waypointPopup?.hide();
                     });
                     marker.on('dragend', (e) => {
-                        resetCursor();
+                        mapCursor.notify(MapCursorState.WAYPOINT_DRAGGING, false);
                         marker.getElement().style.cursor = '';
                         getElevation([marker._waypoint]).then((ele) => {
-                            dbUtils.applyToFile(this.fileId, (file) => {
+                            fileActionManager.applyToFile(this.fileId, (file) => {
                                 let latLng = marker.getLngLat();
                                 let wpt = file.wpt[marker._waypoint._data.index];
                                 wpt.setCoordinates({
@@ -362,36 +362,31 @@ export class GPXLayer {
 
         this.markers.forEach((marker) => {
             if (!marker._waypoint._data.hidden) {
-                marker.addTo(this.map);
+                marker.addTo(_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);
+        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 (this.map.getLayer(this.fileId + '-direction')) {
-                this.map.removeLayer(this.fileId + '-direction');
+            if (_map.getLayer(this.fileId + '-direction')) {
+                _map.removeLayer(this.fileId + '-direction');
             }
-            if (this.map.getLayer(this.fileId)) {
-                this.map.removeLayer(this.fileId);
+            if (_map.getLayer(this.fileId)) {
+                _map.removeLayer(this.fileId);
             }
-            if (this.map.getSource(this.fileId)) {
-                this.map.removeSource(this.fileId);
+            if (_map.getSource(this.fileId)) {
+                _map.removeSource(this.fileId);
             }
         }
 
@@ -405,14 +400,15 @@ export class GPXLayer {
     }
 
     moveToFront() {
-        if (this.map.getLayer(this.fileId)) {
-            this.map.moveLayer(this.fileId);
+        const _map = get(map);
+        if (!_map) {
+            return;
         }
-        if (this.map.getLayer(this.fileId + '-direction')) {
-            this.map.moveLayer(
-                this.fileId + '-direction',
-                this.map.getLayer('distance-markers') ? 'distance-markers' : undefined
-            );
+        if (_map.getLayer(this.fileId)) {
+            _map.moveLayer(this.fileId);
+        }
+        if (_map.getLayer(this.fileId + '-direction')) {
+            _map.moveLayer(this.fileId + '-direction');
         }
     }
 
@@ -426,14 +422,15 @@ export class GPXLayer {
                 new ListTrackSegmentItem(this.fileId, trackIndex, segmentIndex)
             )
         ) {
-            setScissorsCursor();
+            mapCursor.notify(MapCursorState.SCISSORS, true);
         } else {
-            setPointerCursor();
+            mapCursor.notify(MapCursorState.LAYER_HOVER, true);
         }
     }
 
     layerOnMouseLeave() {
-        resetCursor();
+        mapCursor.notify(MapCursorState.SCISSORS, false);
+        mapCursor.notify(MapCursorState.LAYER_HOVER, false);
     }
 
     layerOnMouseMove(e: any) {
@@ -469,7 +466,7 @@ export class GPXLayer {
                 new ListTrackSegmentItem(this.fileId, trackIndex, segmentIndex)
             )
         ) {
-            dbUtils.split(this.fileId, trackIndex, segmentIndex, {
+            fileActions.split(get(splitAs), this.fileId, trackIndex, segmentIndex, {
                 lat: e.lngLat.lat,
                 lon: e.lngLat.lng,
             });
@@ -493,9 +490,9 @@ export class GPXLayer {
         }
 
         if (e.originalEvent.ctrlKey || e.originalEvent.metaKey) {
-            addSelectItem(item);
+            selection.addSelectItem(item);
         } else {
-            selectItem(item);
+            selection.selectItem(item);
         }
     }
 

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

@@ -0,0 +1,44 @@
+import { GPXFileStateCollectionObserver } from '$lib/logic/file-state';
+import { GPXLayer } from './gpx-layer';
+
+export class GPXLayerCollection {
+    private _layers: Map<string, GPXLayer>;
+    private _fileStateCollectionObserver: GPXFileStateCollectionObserver | null = null;
+
+    constructor() {
+        this._layers = new Map<string, GPXLayer>();
+    }
+
+    init() {
+        if (this._fileStateCollectionObserver) {
+            return;
+        }
+        this._fileStateCollectionObserver = new GPXFileStateCollectionObserver(
+            (newFiles) => {
+                newFiles.forEach((fileState, fileId) => {
+                    const layer = new GPXLayer(fileId, fileState);
+                    this._layers.set(fileId, layer);
+                });
+            },
+            (fileId) => {
+                const layer = this._layers.get(fileId);
+                if (layer) {
+                    layer.remove();
+                    this._layers.delete(fileId);
+                }
+            },
+            () => {
+                this._layers.forEach((layer) => {
+                    layer.remove();
+                });
+                this._layers.clear();
+            }
+        );
+    }
+
+    getLayer(fileId: string): GPXLayer | undefined {
+        return this._layers.get(fileId);
+    }
+}
+
+export const gpxLayers = new GPXLayerCollection();

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

@@ -1,17 +1,17 @@
-import { gpxStatistics, slicedGPXStatistics, currentTool, Tool } from '$lib/stores';
+import { currentTool, Tool } from '$lib/components/toolbar/tools';
+import { gpxStatistics, slicedGPXStatistics } from '$lib/logic/statistics';
 import mapboxgl from 'mapbox-gl';
 import { get } from 'svelte/store';
+import { map } from '$lib/components/map/map';
+import { allHidden } from '$lib/logic/hidden';
 
 export class StartEndMarkers {
-    map: mapboxgl.Map;
     start: mapboxgl.Marker;
     end: mapboxgl.Marker;
     updateBinded: () => void = this.update.bind(this);
     unsubscribes: (() => void)[] = [];
 
-    constructor(map: mapboxgl.Map) {
-        this.map = map;
-
+    constructor() {
         let startElement = document.createElement('div');
         let endElement = document.createElement('div');
         startElement.className = `h-4 w-4 rounded-full bg-green-500 border-2 border-white`;
@@ -22,21 +22,27 @@ export class StartEndMarkers {
         this.start = new mapboxgl.Marker({ element: startElement });
         this.end = new mapboxgl.Marker({ element: endElement });
 
+        map.onLoad(() => this.update());
         this.unsubscribes.push(gpxStatistics.subscribe(this.updateBinded));
         this.unsubscribes.push(slicedGPXStatistics.subscribe(this.updateBinded));
         this.unsubscribes.push(currentTool.subscribe(this.updateBinded));
+        this.unsubscribes.push(allHidden.subscribe(this.updateBinded));
     }
 
     update() {
-        let tool = get(currentTool);
-        let statistics = get(slicedGPXStatistics)?.[0] ?? get(gpxStatistics);
-        if (statistics.local.points.length > 0 && tool !== Tool.ROUTING) {
-            this.start.setLngLat(statistics.local.points[0].getCoordinates()).addTo(this.map);
+        const map_ = get(map);
+        if (!map_) return;
+
+        const tool = get(currentTool);
+        const statistics = get(slicedGPXStatistics)?.[0] ?? get(gpxStatistics);
+        const hidden = get(allHidden);
+        if (statistics.local.points.length > 0 && tool !== Tool.ROUTING && !hidden) {
+            this.start.setLngLat(statistics.local.points[0].getCoordinates()).addTo(map_);
             this.end
                 .setLngLat(
                     statistics.local.points[statistics.local.points.length - 1].getCoordinates()
                 )
-                .addTo(this.map);
+                .addTo(map_);
         } else {
             this.start.remove();
             this.end.remove();

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

@@ -16,14 +16,14 @@
         Move,
         Map,
         Layers2,
-    } from 'lucide-svelte';
-    import { _ } from 'svelte-i18n';
-    import { settings } from '$lib/db';
+    } from '@lucide/svelte';
+    import { i18n } from '$lib/i18n.svelte';
     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';
+    import { onMount } from 'svelte';
+    import { customBasemapUpdate, isSelected, remove } from './utils';
+    import { settings } from '$lib/logic/settings';
+    import { map } from '$lib/components/map/map';
+    import { dndzone } from 'svelte-dnd-action';
 
     const {
         customLayers,
@@ -37,17 +37,23 @@
         customOverlayOrder,
     } = settings;
 
-    let name: string = '';
-    let tileUrls: string[] = [''];
-    let maxZoom: number = 20;
-    let layerType: 'basemap' | 'overlay' = 'basemap';
-    let resourceType: 'raster' | 'vector' = 'raster';
+    let name: string = $state('');
+    let tileUrls: string[] = $state(['']);
+    let maxZoom: number = $state(20);
+    let layerType: 'basemap' | 'overlay' = $state('basemap');
+    let resourceType: 'raster' | 'vector' = $derived.by(() => {
+        if (tileUrls[0].length > 0) {
+            if (
+                tileUrls[0].includes('.json') ||
+                (tileUrls[0].includes('api.mapbox.com/styles') && !tileUrls[0].includes('tiles'))
+            ) {
+                return 'vector';
+            }
+        }
+        return 'raster';
+    });
 
-    let basemapContainer: HTMLElement;
-    let overlayContainer: HTMLElement;
-
-    let basemapSortable: Sortable;
-    let overlaySortable: Sortable;
+    let selectedLayerId: string | undefined = $state(undefined);
 
     onMount(() => {
         if ($customBasemapOrder.length === 0) {
@@ -60,45 +66,30 @@
                 (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();
-    });
+    let customBasemapItems: {
+        id: string;
+        name: string;
+    }[] = $derived(
+        $customBasemapOrder.map((id) => ({
+            id: id,
+            name: $customLayers[id].name,
+        }))
+    );
+    let customOverlayItems: {
+        id: string;
+        name: string;
+    }[] = $derived(
+        $customOverlayOrder.map((id) => ({
+            id: id,
+            name: $customLayers[id].name,
+        }))
+    );
 
-    $: 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';
-        }
-    }
+    $effect(() => {
+        setDataFromSelectedLayer(selectedLayerId);
+    });
 
     function createLayer() {
         if (selectedLayerId && $customLayers[selectedLayerId].layerType !== layerType) {
@@ -185,11 +176,7 @@
                 return $tree;
             });
 
-            if (
-                $currentOverlays.overlays['custom'] &&
-                $currentOverlays.overlays['custom'][layerId] &&
-                $map
-            ) {
+            if ($map && $currentOverlays && isSelected($currentOverlays, layerId)) {
                 try {
                     $map.removeImport(layerId);
                 } catch (e) {
@@ -197,10 +184,13 @@
                 }
             }
 
-            if (!$currentOverlays.overlays.hasOwnProperty('custom')) {
-                $currentOverlays.overlays['custom'] = {};
-            }
-            $currentOverlays.overlays['custom'][layerId] = true;
+            currentOverlays.update(($overlays) => {
+                if (!$overlays.overlays.hasOwnProperty('custom')) {
+                    $overlays.overlays['custom'] = {};
+                }
+                $overlays.overlays['custom'][layerId] = true;
+                return $overlays;
+            });
 
             if (!$customOverlayOrder.includes(layerId)) {
                 $customOverlayOrder = [...$customOverlayOrder, layerId];
@@ -225,58 +215,22 @@
                 $previousBasemap = defaultBasemap;
             }
 
-            $selectedBasemapTree.basemaps['custom'] = tryDeleteLayer(
-                $selectedBasemapTree.basemaps['custom'],
-                layerId
-            );
-            if (Object.keys($selectedBasemapTree.basemaps['custom']).length === 0) {
-                $selectedBasemapTree.basemaps = tryDeleteLayer(
-                    $selectedBasemapTree.basemaps,
-                    'custom'
-                );
-            }
+            $selectedBasemapTree = remove($selectedBasemapTree, layerId);
             $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'
-                );
+            if ($currentOverlays) {
+                $currentOverlays = remove($currentOverlays, layerId);
             }
+            $previousOverlays = remove($previousOverlays, layerId);
+            $selectedOverlayTree = remove($selectedOverlayTree, layerId);
             $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];
+    function setDataFromSelectedLayer(layerId?: string) {
+        if (layerId) {
+            const layer = $customLayers[layerId];
             name = layer.name;
             tileUrls = layer.tileUrls;
             maxZoom = layer.maxZoom;
@@ -290,32 +244,60 @@
             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')}
+            {i18n._('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' : ''}"
+        use:dndzone={{
+            items: customBasemapItems,
+            type: 'basemap',
+            dropTargetStyle: {},
+            transformDraggedElement: (element) => {
+                if (element) {
+                    element.style.opacity = '0.5';
+                }
+            },
+        }}
+        onconsider={(e) => {
+            customBasemapItems = e.detail.items;
+        }}
+        onfinalize={(e) => {
+            customBasemapItems = e.detail.items;
+            $customBasemapOrder = customBasemapItems.map((item) => item.id);
+            $selectedBasemapTree.basemaps['custom'] = customBasemapItems.reduce((acc, item) => {
+                acc[item.id] = true;
+                return acc;
+            }, {});
+        }}
     >
-        {#each $customBasemapOrder as id (id)}
-            <div class="flex flex-row items-center gap-2" data-id={id}>
+        {#each customBasemapItems as item (item.id)}
+            <div class="flex flex-row items-center gap-2">
                 <Move size="12" />
-                <span class="grow">{$customLayers[id].name}</span>
-                <Button variant="outline" on:click={() => (selectedLayerId = id)} class="p-1 h-7">
+                <span class="grow">{item.name}</span>
+                <Button
+                    variant="outline"
+                    size="icon-sm"
+                    onclick={() => (selectedLayerId = item.id)}
+                    class="p-1 h-7"
+                >
                     <Pencil size="16" />
                 </Button>
-                <Button variant="outline" on:click={() => deleteLayer(id)} class="p-1 h-7">
+                <Button
+                    variant="outline"
+                    size="icon-sm"
+                    onclick={() => deleteLayer(item.id)}
+                    class="p-1 h-7"
+                >
                     <Trash2 size="16" />
                 </Button>
             </div>
@@ -324,56 +306,85 @@
     {#if $customOverlayOrder.length > 0}
         <div class="flex flex-row items-center gap-1 font-semibold mb-2">
             <Layers2 size="16" />
-            {$_('layers.label.overlays')}
+            {i18n._('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' : ''}"
+        use:dndzone={{
+            items: customOverlayItems,
+            type: 'overlay',
+            dropTargetStyle: {},
+            transformDraggedElement: (element) => {
+                if (element) {
+                    element.style.opacity = '0.5';
+                }
+            },
+        }}
+        onconsider={(e) => {
+            customOverlayItems = e.detail.items;
+        }}
+        onfinalize={(e) => {
+            customOverlayItems = e.detail.items;
+            $customOverlayOrder = customOverlayItems.map((item) => item.id);
+            $selectedOverlayTree.overlays['custom'] = customOverlayItems.reduce((acc, item) => {
+                acc[item.id] = true;
+                return acc;
+            }, {});
+        }}
     >
-        {#each $customOverlayOrder as id (id)}
-            <div class="flex flex-row items-center gap-2" data-id={id}>
+        {#each customOverlayItems as item (item.id)}
+            <div class="flex flex-row items-center gap-2">
                 <Move size="12" />
-                <span class="grow">{$customLayers[id].name}</span>
-                <Button variant="outline" on:click={() => (selectedLayerId = id)} class="p-1 h-7">
+                <span class="grow">{item.name}</span>
+                <Button
+                    variant="outline"
+                    size="icon-sm"
+                    onclick={() => (selectedLayerId = item.id)}
+                    class="p-1 h-7"
+                >
                     <Pencil size="16" />
                 </Button>
-                <Button variant="outline" on:click={() => deleteLayer(id)} class="p-1 h-7">
+                <Button
+                    variant="outline"
+                    size="icon-sm"
+                    onclick={() => deleteLayer(item.id)}
+                    class="p-1 h-7"
+                >
                     <Trash2 size="16" />
                 </Button>
             </div>
         {/each}
     </div>
-
-    <Card.Root>
+    <Card.Root class="py-0 gap-0 shadow-none">
         <Card.Header class="p-3">
             <Card.Title class="text-base">
                 {#if selectedLayerId}
-                    {$_('layers.custom_layers.edit')}
+                    {i18n._('layers.custom_layers.edit')}
                 {:else}
-                    {$_('layers.custom_layers.new')}
+                    {i18n._('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>
+                <Label for="name">{i18n._('menu.metadata.name')}</Label>
                 <Input bind:value={name} id="name" class="h-8" />
-                <Label for="url">{$_('layers.custom_layers.urls')}</Label>
+                <Label for="url">{i18n._('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')}
+                            placeholder={i18n._('layers.custom_layers.url_placeholder')}
                         />
                         {#if tileUrls.length > 1}
                             <Button
-                                on:click={() =>
+                                onclick={() =>
                                     (tileUrls = tileUrls.filter((_, index) => index !== i))}
                                 variant="outline"
                                 class="p-1 h-8"
@@ -383,7 +394,7 @@
                         {/if}
                         {#if i === tileUrls.length - 1}
                             <Button
-                                on:click={() => (tileUrls = [...tileUrls, ''])}
+                                onclick={() => (tileUrls = [...tileUrls, ''])}
                                 variant="outline"
                                 class="p-1 h-8"
                             >
@@ -393,7 +404,7 @@
                     </div>
                 {/each}
                 {#if resourceType === 'raster'}
-                    <Label for="maxZoom">{$_('layers.custom_layers.max_zoom')}</Label>
+                    <Label for="maxZoom">{i18n._('layers.custom_layers.max_zoom')}</Label>
                     <Input
                         type="number"
                         bind:value={maxZoom}
@@ -403,31 +414,31 @@
                         class="h-8"
                     />
                 {/if}
-                <Label>{$_('layers.custom_layers.layer_type')}</Label>
+                <Label>{i18n._('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>
+                        <Label for="basemap">{i18n._('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>
+                        <Label for="overlay">{i18n._('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 variant="outline" onclick={createLayer} class="grow">
+                            <Save size="16" />
+                            {i18n._('layers.custom_layers.update')}
                         </Button>
-                        <Button variant="outline" on:click={() => (selectedLayerId = undefined)}>
+                        <Button variant="outline" onclick={() => (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 variant="outline" class="mt-2" onclick={createLayer}>
+                        <CirclePlus size="16" />
+                        {i18n._('layers.custom_layers.create')}
                     </Button>
                 {/if}
             </fieldset>

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

@@ -1,18 +1,16 @@
 <script lang="ts">
-    import CustomControl from '$lib/components/custom-control/CustomControl.svelte';
+    import CustomControl from '$lib/components/map/custom-control/CustomControl.svelte';
     import LayerTree from './LayerTree.svelte';
-
+    import { OverpassLayer } from './overpass-layer';
     import { Separator } from '$lib/components/ui/separator';
     import { ScrollArea } from '$lib/components/ui/scroll-area/index.js';
-
-    import { Layers } from 'lucide-svelte';
-
+    import { Layers } from '@lucide/svelte';
     import { basemaps, defaultBasemap, overlays } from '$lib/assets/layers';
-    import { settings } from '$lib/db';
-    import { map } from '$lib/stores';
-    import { get, writable } from 'svelte/store';
+    import { settings } from '$lib/logic/settings';
+    import { map } from '$lib/components/map/map';
     import { customBasemapUpdate, getLayers } from './utils';
-    import { OverpassLayer } from './OverpassLayer';
+    import type { ImportSpecification, StyleSpecification } from 'mapbox-gl';
+    import { untrack } from 'svelte';
 
     let container: HTMLDivElement;
     let overpassLayer: OverpassLayer;
@@ -30,30 +28,37 @@
     } = 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) {
+            return;
+        }
+        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',
+                    url: '',
+                    data: basemap as StyleSpecification,
+                },
+                'overlays'
+            );
         }
     }
 
-    $: if ($map && ($currentBasemap || $customBasemapUpdate)) {
-        setStyle();
-    }
+    $effect(() => {
+        if ($map && ($currentBasemap || $customBasemapUpdate)) {
+            untrack(() => setStyle());
+        }
+    });
 
     function addOverlay(id: string) {
+        if (!$map) {
+            return;
+        }
         try {
             let overlay = $customLayers.hasOwnProperty(id) ? $customLayers[id].value : overlays[id];
             if (typeof overlay === 'string') {
@@ -62,7 +67,7 @@
                 if ($opacities.hasOwnProperty(id)) {
                     overlay = {
                         ...overlay,
-                        layers: overlay.layers.map((layer) => {
+                        layers: (overlay as StyleSpecification).layers.map((layer) => {
                             if (layer.type === 'raster') {
                                 if (!layer.paint) {
                                     layer.paint = {};
@@ -75,7 +80,8 @@
                 }
                 $map.addImport({
                     id,
-                    data: overlay,
+                    url: '',
+                    data: overlay as StyleSpecification,
                 });
             }
         } catch (e) {
@@ -87,15 +93,26 @@
         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 activeOverlays =
+                    $map
+                        .getStyle()
+                        .imports?.reduce(
+                            (
+                                acc: Record<string, ImportSpecification>,
+                                imprt: ImportSpecification
+                            ) => {
+                                if (
+                                    !['basemap', 'overlays', 'glyphs-and-sprite'].includes(imprt.id)
+                                ) {
+                                    acc[imprt.id] = imprt;
+                                }
+                                return acc;
+                            },
+                            {}
+                        ) || {};
                 let toRemove = Object.keys(activeOverlays).filter((id) => !overlayLayers[id]);
                 toRemove.forEach((id) => {
-                    $map.removeImport(id);
+                    $map?.removeImport(id);
                 });
                 let toAdd = Object.entries(overlayLayers)
                     .filter(([id, selected]) => selected && !activeOverlays.hasOwnProperty(id))
@@ -109,52 +126,44 @@
         }
     }
 
-    $: if ($map && $currentOverlays && $opacities) {
-        updateOverlays();
-    }
+    $effect(() => {
+        if ($map && $currentOverlays && $opacities) {
+            untrack(() => updateOverlays());
+        }
+    });
 
-    $: if ($map) {
+    map.onLoad((_map: mapboxgl.Map) => {
         if (overpassLayer) {
             overpassLayer.remove();
         }
-        overpassLayer = new OverpassLayer($map);
+        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 first = true;
+        _map.on('style.import.load', () => {
+            if (!first) return;
+            first = false;
+            updateOverlays();
+        });
     });
 
-    let open = false;
+    let open = $state(false);
     function openLayerControl() {
         open = true;
     }
     function closeLayerControl() {
         open = false;
     }
-    let cancelEvents = false;
+    let cancelEvents = $state(false);
 </script>
 
 <CustomControl class="group min-w-[29px] min-h-[29px] overflow-hidden">
-    <!-- svelte-ignore a11y-no-static-element-interactions -->
+    <!-- svelte-ignore a11y_no_static_element_interactions -->
     <div
         bind:this={container}
-        class="h-full w-full"
-        on:mouseenter={openLayerControl}
-        on:mouseleave={closeLayerControl}
-        on:pointerenter={() => {
+        class="size-full"
+        onmouseenter={openLayerControl}
+        onmouseleave={closeLayerControl}
+        onpointerenter={() => {
             if (!open) {
                 cancelEvents = true;
                 openLayerControl();
@@ -166,7 +175,7 @@
     >
         <div
             class="flex flex-row justify-center items-center delay-100 transition-[opacity] duration-0 {open
-                ? 'opacity-0 w-0 h-0 delay-0'
+                ? 'opacity-0 size-0 delay-0'
                 : 'w-[29px] h-[29px]'}"
         >
             <Layers size="20" />
@@ -176,17 +185,21 @@
                 ? 'grid-rows-[1fr] grid-cols-[1fr]'
                 : ''} {cancelEvents ? 'pointer-events-none' : ''}"
         >
-            <ScrollArea>
+            <ScrollArea class="overflow-hidden">
                 <div class="h-fit">
-                    <div class="p-2">
+                    <div class="p-2 ml-1">
                         <LayerTree
                             layerTree={$selectedBasemapTree}
                             name="basemaps"
-                            bind:selected={$selectedBasemap}
+                            selected={$currentBasemap}
+                            onselect={(value) => {
+                                $previousBasemap = $currentBasemap;
+                                $currentBasemap = value;
+                            }}
                         />
                     </div>
                     <Separator class="w-full" />
-                    <div class="p-2">
+                    <div class="p-2 ml-1">
                         {#if $currentOverlays}
                             <LayerTree
                                 layerTree={$selectedOverlayTree}
@@ -197,7 +210,7 @@
                         {/if}
                     </div>
                     <Separator class="w-full" />
-                    <div class="p-2">
+                    <div class="p-2 ml-1">
                         {#if $currentOverpassQueries}
                             <LayerTree
                                 layerTree={$selectedOverpassTree}
@@ -214,8 +227,9 @@
 </CustomControl>
 
 <svelte:window
-    on:click={(e) => {
-        if (open && !cancelEvents && !container.contains(e.target)) {
+    on:click={(e: MouseEvent) => {
+        const target = e.target as Node | null;
+        if (open && !cancelEvents && target && container && !container.contains(target)) {
             closeLayerControl();
         }
     }}

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

@@ -1,6 +1,5 @@
 <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';
@@ -8,7 +7,6 @@
     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,
@@ -16,13 +14,13 @@
         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 { getLayers, isSelected, toggle } from '$lib/components/map/layer-control/utils';
+    import { i18n } from '$lib/i18n.svelte';
+    import { map } from '$lib/components/map/map';
     import CustomLayers from './CustomLayers.svelte';
+    import { settings } from '$lib/logic/settings';
+    import { untrack } from 'svelte';
+    import { extensionAPI } from '$lib/components/map/layer-control/extension-api';
 
     const {
         selectedBasemapTree,
@@ -30,72 +28,99 @@
         selectedOverpassTree,
         currentBasemap,
         currentOverlays,
+        currentOverpassQueries,
         customLayers,
         opacities,
     } = settings;
 
-    export let open: boolean;
-    let accordionValue: string | string[] | undefined = undefined;
+    const { isLayerFromExtension, getLayerName } = extensionAPI;
 
-    let selectedOverlay = writable(undefined);
-    let overlayOpacity = writable([1]);
+    let { open = $bindable() }: { open: boolean } = $props();
+
+    let accordionValue: string | undefined = $state(undefined);
+    let selectedOverlay = $state(undefined);
+    let overlayOpacity = $state(1);
 
     function setOpacityFromSelection() {
-        if ($selectedOverlay) {
-            let overlayId = $selectedOverlay.value;
-            if ($opacities.hasOwnProperty(overlayId)) {
-                $overlayOpacity = [$opacities[overlayId]];
+        if (selectedOverlay) {
+            if ($opacities.hasOwnProperty(selectedOverlay)) {
+                overlayOpacity = $opacities[selectedOverlay];
             } else {
-                $overlayOpacity = [1];
+                overlayOpacity = 1;
             }
         } else {
-            $overlayOpacity = [1];
+            overlayOpacity = 1;
         }
     }
 
-    $: if ($selectedBasemapTree && $currentBasemap) {
-        if (!isSelected($selectedBasemapTree, $currentBasemap)) {
-            if (!isSelected($selectedBasemapTree, defaultBasemap)) {
-                $selectedBasemapTree = toggle($selectedBasemapTree, defaultBasemap);
+    $effect(() => {
+        if ($selectedBasemapTree && $currentBasemap) {
+            if (!isSelected($selectedBasemapTree, $currentBasemap)) {
+                if (!isSelected($selectedBasemapTree, defaultBasemap)) {
+                    $selectedBasemapTree = toggle($selectedBasemapTree, defaultBasemap);
+                }
+                $currentBasemap = 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;
+    $effect(() => {
+        if ($selectedOverlayTree) {
+            untrack(() => {
+                if ($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();
-    }
+    $effect(() => {
+        if ($selectedOverpassTree) {
+            untrack(() => {
+                if ($currentOverpassQueries) {
+                    let overlayLayers = getLayers($currentOverpassQueries);
+                    let toRemove = Object.entries(overlayLayers).filter(
+                        ([id, checked]) => checked && !isSelected($selectedOverpassTree, id)
+                    );
+                    if (toRemove.length > 0) {
+                        currentOverpassQueries.update((tree) => {
+                            toRemove.forEach(([id]) => {
+                                toggle(tree, id);
+                            });
+                            return tree;
+                        });
+                    }
+                }
+            });
+        }
+    });
 </script>
 
 <Sheet.Root bind:open>
     <Sheet.Trigger class="hidden" />
     <Sheet.Content>
         <Sheet.Header class="h-full">
-            <Sheet.Title>{$_('layers.settings')}</Sheet.Title>
+            <Sheet.Title>{i18n._('layers.settings')}</Sheet.Title>
             <ScrollArea class="w-[105%] min-h-full pr-4">
                 <Sheet.Description>
-                    {$_('layers.settings_help')}
+                    {i18n._('layers.settings_help')}
                 </Sheet.Description>
-                <Accordion.Root class="flex flex-col" bind:value={accordionValue}>
+                <Accordion.Root class="flex flex-col" bind:value={accordionValue} type="single">
                     <Accordion.Item value="layer-selection" class="flex flex-col">
-                        <Accordion.Trigger>{$_('layers.selection')}</Accordion.Trigger>
+                        <Accordion.Trigger>{i18n._('layers.selection')}</Accordion.Trigger>
                         <Accordion.Content class="grow flex flex-col border rounded">
-                            <div class="py-2 pl-1 pr-2">
+                            <div class="py-2 pl-3 pr-2">
                                 <LayerTree
                                     layerTree={basemapTree}
                                     name="basemapSettings"
@@ -104,7 +129,7 @@
                                 />
                             </div>
                             <Separator />
-                            <div class="py-2 pl-1 pr-2">
+                            <div class="py-2 pl-3 pr-2">
                                 <LayerTree
                                     layerTree={overlayTree}
                                     name="overlaySettings"
@@ -113,7 +138,7 @@
                                 />
                             </div>
                             <Separator />
-                            <div class="py-2 pl-1 pr-2">
+                            <div class="py-2 pl-3 pr-2">
                                 <LayerTree
                                     layerTree={overpassTree}
                                     name="overpassSettings"
@@ -124,22 +149,40 @@
                         </Accordion.Content>
                     </Accordion.Item>
                     <Accordion.Item value="overlay-opacity">
-                        <Accordion.Trigger>{$_('layers.opacity')}</Accordion.Trigger>
+                        <Accordion.Trigger>{i18n._('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')}
+                                    {i18n._('layers.custom_layers.overlay')}
                                 </Label>
-                                <Select.Root bind:selected={$selectedOverlay}>
-                                    <Select.Trigger class="h-8 mr-1">
-                                        <Select.Value />
+                                <Select.Root
+                                    bind:value={selectedOverlay}
+                                    type="single"
+                                    onValueChange={setOpacityFromSelection}
+                                >
+                                    <Select.Trigger class="h-8 mr-1 w-full">
+                                        {#if selectedOverlay}
+                                            {#if isSelected($selectedOverlayTree, selectedOverlay)}
+                                                {#if $isLayerFromExtension(selectedOverlay)}
+                                                    {$getLayerName(selectedOverlay)}
+                                                {:else}
+                                                    {i18n._(`layers.label.${selectedOverlay}`)}
+                                                {/if}
+                                            {:else if $customLayers.hasOwnProperty(selectedOverlay)}
+                                                {$customLayers[selectedOverlay].name}
+                                            {/if}
+                                        {/if}
                                     </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
-                                                >
+                                                <Select.Item value={id}>
+                                                    {#if $isLayerFromExtension(id)}
+                                                        {$getLayerName(id)}
+                                                    {:else}
+                                                        {i18n._(`layers.label.${id}`)}
+                                                    {/if}
+                                                </Select.Item>
                                             {/if}
                                         {/each}
                                         {#each Object.entries($customLayers) as [id, layer]}
@@ -151,30 +194,29 @@
                                 </Select.Root>
                             </div>
                             <Label class="flex flex-row gap-6 items-center">
-                                {$_('menu.style.opacity')}
+                                {i18n._('menu.style.opacity')}
                                 <div class="p-2 pr-3 grow">
                                     <Slider
-                                        bind:value={$overlayOpacity}
+                                        bind:value={overlayOpacity}
+                                        type="single"
                                         min={0.1}
                                         max={1}
                                         step={0.1}
-                                        disabled={$selectedOverlay === undefined}
+                                        disabled={selectedOverlay === undefined}
                                         onValueChange={(value) => {
-                                            if ($selectedOverlay) {
+                                            if (selectedOverlay) {
                                                 if (
                                                     $map &&
-                                                    isSelected(
-                                                        $currentOverlays,
-                                                        $selectedOverlay.value
-                                                    )
+                                                    $currentOverlays &&
+                                                    isSelected($currentOverlays, selectedOverlay)
                                                 ) {
                                                     try {
-                                                        $map.removeImport($selectedOverlay.value);
+                                                        $map.removeImport(selectedOverlay);
                                                     } catch (e) {
                                                         // No reliable way to check if the map is ready to remove sources and layers
                                                     }
                                                 }
-                                                $opacities[$selectedOverlay.value] = value[0];
+                                                $opacities[selectedOverlay] = value;
                                             }
                                         }}
                                     />
@@ -183,7 +225,8 @@
                         </Accordion.Content>
                     </Accordion.Item>
                     <Accordion.Item value="custom-layers">
-                        <Accordion.Trigger>{$_('layers.custom_layers.title')}</Accordion.Trigger>
+                        <Accordion.Trigger>{i18n._('layers.custom_layers.title')}</Accordion.Trigger
+                        >
                         <Accordion.Content>
                             <ScrollArea>
                                 <CustomLayers />

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

@@ -0,0 +1,29 @@
+<script lang="ts">
+    import LayerTreeNode from './LayerTreeNode.svelte';
+    import { type LayerTreeType } from '$lib/assets/layers';
+    import CollapsibleTree from '$lib/components/collapsible-tree/CollapsibleTree.svelte';
+
+    let {
+        layerTree,
+        name,
+        selected = '',
+        onselect = () => {},
+        multiple = false,
+        checked = $bindable({}),
+    }: {
+        layerTree: LayerTreeType;
+        name: string;
+        selected?: string;
+        onselect?: (value: string) => void;
+        multiple?: boolean;
+        checked?: LayerTreeType;
+    } = $props();
+</script>
+
+<form>
+    <fieldset class="min-w-64 mb-1">
+        <CollapsibleTree nohover={true}>
+            <LayerTreeNode {name} node={layerTree} {selected} {onselect} {multiple} bind:checked />
+        </CollapsibleTree>
+    </fieldset>
+</form>

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

@@ -1,25 +1,34 @@
 <script lang="ts">
+    import Self from '$lib/components/map/layer-control/LayerTreeNode.svelte';
     import { Label } from '$lib/components/ui/label';
     import { Checkbox } from '$lib/components/ui/checkbox';
-    import CollapsibleTreeNode from '../collapsible-tree/CollapsibleTreeNode.svelte';
-
+    import CollapsibleTreeNode from '$lib/components/collapsible-tree/CollapsibleTreeNode.svelte';
     import { type LayerTreeType } from '$lib/assets/layers';
     import { anySelectedLayer } from './utils';
+    import { i18n } from '$lib/i18n.svelte';
+    import { settings } from '$lib/logic/settings';
+    import { extensionAPI } from '$lib/components/map/layer-control/extension-api';
 
-    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;
+    let {
+        name,
+        node,
+        selected = '',
+        onselect = () => {},
+        multiple = false,
+        checked = $bindable({}),
+    }: {
+        name: string;
+        node: LayerTreeType;
+        selected?: string;
+        onselect?: (value: string) => void;
+        multiple: boolean;
+        checked: LayerTreeType;
+    } = $props();
 
     const { customLayers } = settings;
+    const { isLayerFromExtension, getLayerName } = extensionAPI;
 
-    beforeUpdate(() => {
+    $effect.pre(() => {
         if (checked !== undefined) {
             Object.keys(node).forEach((id) => {
                 if (!checked.hasOwnProperty(id)) {
@@ -46,7 +55,7 @@
                             value={id}
                             bind:checked={checked[id]}
                             class="scale-90"
-                            aria-label={$_(`layers.label.${id}`)}
+                            aria-label={i18n._(`layers.label.${id}`)}
                         />
                     {:else}
                         <input
@@ -54,36 +63,50 @@
                             type="radio"
                             {name}
                             value={id}
-                            bind:group={selected}
+                            checked={selected === id}
+                            oninput={(e) => {
+                                if ((e.target as HTMLInputElement)?.checked) {
+                                    onselect(id);
+                                }
+                            }}
                         />
                     {/if}
                     <Label for="{name}-{id}" class="flex flex-row items-center gap-1">
                         {#if $customLayers.hasOwnProperty(id)}
                             {$customLayers[id].name}
+                        {:else if $isLayerFromExtension(id)}
+                            {$getLayerName(id)}
                         {:else}
-                            {$_(`layers.label.${id}`)}
+                            {i18n._(`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>
+                {#snippet trigger()}
+                    <span>{i18n._(`layers.label.${id}`)}</span>
+                {/snippet}
+                {#snippet content()}
+                    <div class="ml-2">
+                        <Self
+                            node={node[id]}
+                            {name}
+                            {selected}
+                            {onselect}
+                            {multiple}
+                            bind:checked={checked[id]}
+                        />
+                    </div>
+                {/snippet}
             </CollapsibleTreeNode>
         {/if}
     {/each}
 </div>
 
 <style lang="postcss">
+    @reference "../../../../app.css";
+
     div :global(input[type='radio']) {
         @apply appearance-none;
         @apply w-4 h-4;

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

@@ -1,26 +1,31 @@
 <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 { PencilLine, MapPin } from '@lucide/svelte';
+    import { i18n } from '$lib/i18n.svelte';
     import { ScrollArea } from '$lib/components/ui/scroll-area/index.js';
     import type { WaypointType } from 'gpx';
+    import type { PopupItem } from '$lib/components/map/map-popup';
+    import { fileActions } from '$lib/logic/file-actions';
+    import { selection } from '$lib/logic/selection';
 
-    export let poi: PopupItem<any>;
+    let {
+        poi,
+    }: {
+        poi: PopupItem<any>;
+    } = $props();
 
-    let tags: { [key: string]: string } = {};
-    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}`);
+    let tags: Record<string, string> = $derived(poi ? JSON.parse(poi.item.tags) : {});
+    let name = $derived.by(() => {
+        if (poi) {
+            if (tags.name !== undefined && tags.name !== '') {
+                return tags.name;
+            } else {
+                return i18n._(`layers.label.${poi.item.query}`);
+            }
         }
-    }
+        return '';
+    });
 
     function addToFile() {
         const desc = Object.entries(tags)
@@ -43,23 +48,24 @@
                 },
             };
         }
-        dbUtils.addOrUpdateWaypoint(wpt);
+        fileActions.addOrUpdateWaypoint(wpt);
     }
 </script>
 
-<Card.Root class="border-none shadow-md text-base p-2 max-w-[50dvw]">
-    <Card.Header class="p-0">
+<Card.Root class="border-none shadow-md text-base p-2 max-w-[50dvw] gap-0">
+    <Card.Header class="p-0 gap-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">
+                    <div class="text-muted-foreground text-xs 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"
+                    class="ml-auto"
                     variant="outline"
+                    size="icon"
                     href="https://www.openstreetmap.org/edit?editor=id&{poi.item.type ??
                         'node'}={poi.item.id}"
                     target="_blank"
@@ -70,10 +76,10 @@
         </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]">
+        <ScrollArea class="flex flex-col 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 -->
+                    <!-- svelte-ignore a11y_missing_attribute -->
                     <img src={tags.image ?? tags['image:0']} />
                 </div>
             {/if}
@@ -81,7 +87,7 @@
                 {#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'}
+                        {#if key === 'website' || key.startsWith('website:') || key.endsWith(':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>
@@ -94,14 +100,9 @@
                 {/each}
             </div>
         </ScrollArea>
-        <Button
-            class="mt-2"
-            variant="outline"
-            disabled={$selection.size === 0}
-            on:click={addToFile}
-        >
-            <MapPin size="16" class="mr-1" />
-            {$_('toolbar.waypoint.add')}
+        <Button class="mt-2" variant="outline" disabled={$selection.size === 0} onclick={addToFile}>
+            <MapPin size="16" />
+            {i18n._('toolbar.waypoint.add')}
         </Button>
     </Card.Content>
 </Card.Root>

website/src/lib/components/map/layer-control/extension-api.ts

@@ -0,0 +1,171 @@
+import { settings } from '$lib/logic/settings';
+import { derived, get, writable, type Writable } from 'svelte/store';
+import { isSelected, remove, removeAll } from './utils';
+import { overlays, overlayTree } from '$lib/assets/layers';
+import { browser } from '$app/environment';
+import { map } from '$lib/components/map/map';
+
+const { currentOverlays, previousOverlays, selectedOverlayTree } = settings;
+
+export type CustomOverlay = {
+    id: string;
+    name: string;
+    tileUrls: string[];
+    maxZoom?: number;
+};
+
+export class ExtensionAPI {
+    private _overlays: Writable<Map<string, CustomOverlay>> = writable(new Map());
+
+    init() {
+        if (browser && !window.hasOwnProperty('gpxstudio')) {
+            Object.defineProperty(window, 'gpxstudio', {
+                value: this,
+            });
+            addEventListener('beforeunload', () => {
+                this.destroy();
+            });
+        }
+    }
+
+    ensureLoaded(): Promise<void> {
+        let unsubscribe: () => void;
+        const promise = new Promise<void>((resolve) => {
+            map.onLoad(() => {
+                unsubscribe = currentOverlays.subscribe((current) => {
+                    if (current) {
+                        resolve();
+                    }
+                });
+            });
+        });
+        promise.finally(() => {
+            unsubscribe?.();
+        });
+        return promise;
+    }
+
+    addOrUpdateOverlay(overlay: CustomOverlay) {
+        if (!overlay.id || !overlay.name || !overlay.tileUrls || overlay.tileUrls.length === 0) {
+            throw new Error('Overlay must have an id, name, and at least one tile URL.');
+        }
+        overlay.id = this.getOverlayId(overlay.id);
+
+        this._overlays.update(($overlays) => {
+            $overlays.set(overlay.id, overlay);
+            return $overlays;
+        });
+
+        overlays[overlay.id] = {
+            version: 8,
+            sources: {
+                [overlay.id]: {
+                    type: 'raster',
+                    tiles: overlay.tileUrls,
+                    tileSize: overlay.tileUrls.some((url) => url.includes('512')) ? 512 : 256,
+                    maxzoom: overlay.maxZoom ?? 22,
+                },
+            },
+            layers: [
+                {
+                    id: overlay.id,
+                    type: 'raster',
+                    source: overlay.id,
+                },
+            ],
+        };
+
+        overlayTree.overlays.world[overlay.id] = true;
+
+        selectedOverlayTree.update((selected) => {
+            selected.overlays.world[overlay.id] = true;
+            return selected;
+        });
+
+        const current = get(currentOverlays);
+        let show = false;
+        if (current && isSelected(current, overlay.id)) {
+            show = true;
+            try {
+                get(map)?.removeImport(overlay.id);
+            } catch (e) {
+                // No reliable way to check if the map is ready to remove sources and layers
+            }
+        }
+
+        currentOverlays.update((current) => {
+            current.overlays.world[overlay.id] = show;
+            return current;
+        });
+    }
+
+    filterOverlays(ids: string[]) {
+        ids = ids.map((id) => this.getOverlayId(id));
+        const idsToRemove = Array.from(get(this._overlays).keys()).filter(
+            (id) => !ids.includes(id)
+        );
+
+        currentOverlays.update((current) => {
+            removeAll(current, idsToRemove);
+            return current;
+        });
+        previousOverlays.update((previous) => {
+            removeAll(previous, idsToRemove);
+            return previous;
+        });
+        selectedOverlayTree.update((selected) => {
+            removeAll(selected, idsToRemove);
+            return selected;
+        });
+        Object.keys(overlays).forEach((id) => {
+            if (idsToRemove.includes(id)) {
+                delete overlays[id];
+            }
+        });
+        removeAll(overlayTree, idsToRemove);
+        this._overlays.update(($overlays) => {
+            $overlays.forEach((_, id) => {
+                if (idsToRemove.includes(id)) {
+                    $overlays.delete(id);
+                }
+            });
+            return $overlays;
+        });
+    }
+
+    isLayerFromExtension = derived(this._overlays, ($overlays) => {
+        return (id: string) => $overlays.has(id);
+    });
+
+    getLayerName = derived(this._overlays, ($overlays) => {
+        return (id: string) => $overlays.get(id)?.name || '';
+    });
+
+    private getOverlayId(id: string): string {
+        return `extension-${id}`;
+    }
+
+    private destroy() {
+        const ids = Array.from(get(this._overlays).keys());
+        currentOverlays.update((current) => {
+            ids.forEach((id) => {
+                remove(current, id);
+            });
+            return current;
+        });
+        previousOverlays.update((previous) => {
+            ids.forEach((id) => {
+                remove(previous, id);
+            });
+            return previous;
+        });
+        selectedOverlayTree.update((selected) => {
+            ids.forEach((id) => {
+                remove(selected, id);
+            });
+            return selected;
+        });
+    }
+}
+
+export const extensionAPI = new ExtensionAPI();

website/src/lib/components/map/layer-control/overpass-layer.ts

@@ -1,10 +1,11 @@
-import SphericalMercator from '@mapbox/sphericalmercator';
+import { SphericalMercator } from '@mapbox/sphericalmercator';
 import { getLayers } from './utils';
 import { get, writable } from 'svelte/store';
 import { liveQuery } from 'dexie';
-import { db, settings } from '$lib/db';
 import { overpassQueryData } from '$lib/assets/layers';
-import { MapPopup } from '$lib/components/MapPopup';
+import { MapPopup } from '$lib/components/map/map-popup';
+import { settings } from '$lib/logic/settings';
+import { db } from '$lib/db';
 
 const { currentOverpassQueries } = settings;
 
@@ -60,8 +61,10 @@ export class OverpassLayer {
 
     queryIfNeeded() {
         if (this.map.getZoom() >= this.minZoom) {
-            const bounds = this.map.getBounds().toArray();
-            this.query([bounds[0][0], bounds[0][1], bounds[1][0], bounds[1][1]]);
+            const bounds = this.map.getBounds()?.toArray();
+            if (bounds) {
+                this.query([bounds[0][0], bounds[0][1], bounds[1][0], bounds[1][1]]);
+            }
         }
     }
 
@@ -71,7 +74,7 @@ export class OverpassLayer {
         let d = get(data);
 
         try {
-            let source = this.map.getSource('overpass');
+            let source = this.map.getSource('overpass') as mapboxgl.GeoJSONSource | undefined;
             if (source) {
                 source.setData(d);
             } else {
@@ -281,9 +284,9 @@ function getQuery(query: string) {
 }
 
 function getQueryItem(tags: Record<string, string | boolean | string[]>) {
-    let arrayEntry = Object.entries(tags).find(([_, value]) => Array.isArray(value));
+    let arrayEntry = Object.values(tags).find((value) => Array.isArray(value));
     if (arrayEntry !== undefined) {
-        return arrayEntry[1]
+        return arrayEntry
             .map(
                 (val) =>
                     `nwr${Object.entries(tags)

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

@@ -55,4 +55,26 @@ export function toggle(node: LayerTreeType, id: string) {
     return node;
 }
 
+export function remove(node: LayerTreeType, id: string) {
+    Object.keys(node).forEach((key) => {
+        if (key === id) {
+            delete node[key];
+        } else if (typeof node[key] !== 'boolean') {
+            remove(node[key], id);
+        }
+    });
+    return node;
+}
+
+export function removeAll(node: LayerTreeType, ids: string[]) {
+    Object.keys(node).forEach((key) => {
+        if (ids.includes(key)) {
+            delete node[key];
+        } else if (typeof node[key] !== 'boolean') {
+            removeAll(node[key], ids);
+        }
+    });
+    return node;
+}
+
 export const customBasemapUpdate = writable(0);

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

@@ -1,8 +1,8 @@
 import { TrackPoint, Waypoint } from 'gpx';
 import mapboxgl from 'mapbox-gl';
-import { tick } from 'svelte';
+import { mount, tick, unmount } from 'svelte';
 import { get, writable, type Writable } from 'svelte/store';
-import MapPopupComponent from './MapPopup.svelte';
+import MapPopupComponent from '$lib/components/map/MapPopup.svelte';
 
 export type PopupItem<T = Waypoint | TrackPoint | any> = {
     item: T;
@@ -14,20 +14,21 @@ export class MapPopup {
     map: mapboxgl.Map;
     popup: mapboxgl.Popup;
     item: Writable<PopupItem | null> = writable(null);
+    component: ReturnType<typeof mount>;
     maybeHideBinded = this.maybeHide.bind(this);
 
     constructor(map: mapboxgl.Map, options?: mapboxgl.PopupOptions) {
         this.map = map;
         this.popup = new mapboxgl.Popup(options);
-
-        let component = new MapPopupComponent({
+        this.component = mount(MapPopupComponent, {
             target: document.body,
             props: {
                 item: this.item,
+                onContainerReady: (container: HTMLDivElement) => {
+                    this.popup.setDOMContent(container);
+                },
             },
         });
-
-        tick().then(() => this.popup.setDOMContent(component.container));
     }
 
     setItem(item: PopupItem | null) {
@@ -41,8 +42,8 @@ export class MapPopup {
     }
 
     show() {
-        const i = get(this.item);
-        if (i === null) {
+        const item = get(this.item);
+        if (item === null) {
             this.hide();
             return;
         }
@@ -51,8 +52,8 @@ export class MapPopup {
     }
 
     maybeHide(e: mapboxgl.MapMouseEvent) {
-        const i = get(this.item);
-        if (i === null) {
+        const item = get(this.item);
+        if (item === null) {
             this.hide();
             return;
         }
@@ -68,15 +69,16 @@ export class MapPopup {
 
     remove() {
         this.popup.remove();
+        unmount(this.component);
     }
 
     getCoordinates() {
-        const i = get(this.item);
-        if (i === null) {
+        const item = get(this.item);
+        if (item === null) {
             return new mapboxgl.LngLat(0, 0);
         }
-        return i.item instanceof Waypoint || i.item instanceof TrackPoint
-            ? i.item.getCoordinates()
-            : new mapboxgl.LngLat(i.item.lon, i.item.lat);
+        return item.item instanceof Waypoint || item.item instanceof TrackPoint
+            ? item.item.getCoordinates()
+            : new mapboxgl.LngLat(item.item.lon, item.item.lat);
     }
 }

website/src/lib/components/map/map.ts

@@ -0,0 +1,227 @@
+import mapboxgl from 'mapbox-gl';
+import MapboxGeocoder from '@mapbox/mapbox-gl-geocoder';
+import { get, writable, type Writable } from 'svelte/store';
+import { settings } from '$lib/logic/settings';
+import { tick } from 'svelte';
+
+const { treeFileView, elevationProfile, bottomPanelSize, rightPanelSize, distanceUnits } = settings;
+
+let fitBoundsOptions: mapboxgl.MapOptions['fitBoundsOptions'] = {
+    maxZoom: 15,
+    linear: true,
+    easing: () => 1,
+};
+
+export class MapboxGLMap {
+    private _map: Writable<mapboxgl.Map | null> = writable(null);
+    private _onLoadCallbacks: ((map: mapboxgl.Map) => void)[] = [];
+    private _unsubscribes: (() => void)[] = [];
+
+    subscribe(run: (value: mapboxgl.Map | null) => void, invalidate?: () => void) {
+        return this._map.subscribe(run, invalidate);
+    }
+
+    init(
+        accessToken: string,
+        language: string,
+        hash: boolean,
+        geocoder: boolean,
+        geolocate: boolean
+    ) {
+        const map = 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=${accessToken}`,
+                        },
+                    },
+                    {
+                        id: 'basemap',
+                        url: '',
+                    },
+                    {
+                        id: 'overlays',
+                        url: '',
+                        data: {
+                            version: 8,
+                            sources: {},
+                            layers: [],
+                        },
+                    },
+                ],
+            },
+            projection: 'globe',
+            zoom: 0,
+            hash: hash,
+            language,
+            attributionControl: false,
+            logoPosition: 'bottom-right',
+            boxZoom: false,
+        });
+        map.addControl(
+            new mapboxgl.AttributionControl({
+                compact: true,
+            })
+        );
+        map.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();
+                }
+            };
+            map.addControl(geocoder);
+        }
+        if (geolocate) {
+            map.addControl(
+                new mapboxgl.GeolocateControl({
+                    positionOptions: {
+                        enableHighAccuracy: true,
+                    },
+                    fitBoundsOptions,
+                    trackUserLocation: true,
+                    showUserHeading: true,
+                })
+            );
+        }
+        const scaleControl = new mapboxgl.ScaleControl({
+            unit: get(distanceUnits),
+        });
+        map.addControl(scaleControl);
+        map.on('style.load', () => {
+            map.addSource('mapbox-dem', {
+                type: 'raster-dem',
+                url: 'mapbox://mapbox.mapbox-terrain-dem-v1',
+                tileSize: 512,
+                maxzoom: 14,
+            });
+            if (map.getPitch() > 0) {
+                map.setTerrain({
+                    source: 'mapbox-dem',
+                    exaggeration: 1,
+                });
+            }
+            map.setFog({
+                color: 'rgb(186, 210, 235)',
+                'high-color': 'rgb(36, 92, 223)',
+                'horizon-blend': 0.1,
+                'space-color': 'rgb(156, 240, 255)',
+            });
+            map.on('pitch', () => {
+                if (map.getPitch() > 0) {
+                    map.setTerrain({
+                        source: 'mapbox-dem',
+                        exaggeration: 1,
+                    });
+                } else {
+                    map.setTerrain(null);
+                }
+            });
+        });
+        map.on('load', () => {
+            this._map.set(map); // only set the store after the map has loaded
+            window._map = map; // entry point for extensions
+            this.resize();
+            scaleControl.setUnit(get(distanceUnits));
+
+            this._onLoadCallbacks.forEach((callback) => callback(map));
+            this._onLoadCallbacks = [];
+        });
+
+        this._unsubscribes.push(treeFileView.subscribe(() => this.resize()));
+        this._unsubscribes.push(elevationProfile.subscribe(() => this.resize()));
+        this._unsubscribes.push(bottomPanelSize.subscribe(() => this.resize()));
+        this._unsubscribes.push(rightPanelSize.subscribe(() => this.resize()));
+        this._unsubscribes.push(
+            distanceUnits.subscribe((units) => {
+                scaleControl.setUnit(units);
+            })
+        );
+    }
+
+    onLoad(callback: (map: mapboxgl.Map) => void) {
+        const map = get(this._map);
+        if (map) {
+            callback(map);
+        } else {
+            this._onLoadCallbacks.push(callback);
+        }
+    }
+
+    destroy() {
+        const map = get(this._map);
+        if (map) {
+            map.remove();
+            this._map.set(null);
+        }
+        this._unsubscribes.forEach((unsubscribe) => unsubscribe());
+        this._unsubscribes = [];
+    }
+
+    resize() {
+        const map = get(this._map);
+        if (map) {
+            tick().then(() => {
+                map.resize();
+            });
+        }
+    }
+
+    toggle3D() {
+        const map = get(this._map);
+        if (map) {
+            if (map.getPitch() === 0) {
+                map.easeTo({ pitch: 70 });
+            } else {
+                map.easeTo({ pitch: 0 });
+            }
+        }
+    }
+}
+
+export const map = new MapboxGLMap();

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

@@ -0,0 +1,84 @@
+<script lang="ts">
+    import { streetViewEnabled } from '$lib/components/map/street-view-control/utils';
+    import { map } from '$lib/components/map/map';
+    import CustomControl from '$lib/components/map/custom-control/CustomControl.svelte';
+    import { PersonStanding, X } from '@lucide/svelte';
+    import { MapillaryLayer } from './mapillary';
+    import { GoogleRedirect } from './google';
+    import { settings } from '$lib/logic/settings';
+    import { i18n } from '$lib/i18n.svelte';
+    import { onMount } from 'svelte';
+    import ButtonWithTooltip from '$lib/components/ButtonWithTooltip.svelte';
+
+    const { streetViewSource } = settings;
+
+    let googleRedirect: GoogleRedirect | null = $state(null);
+    let mapillaryLayer: MapillaryLayer | null = $state(null);
+    let mapillaryOpen = $state({
+        value: false,
+    });
+    let container: HTMLElement;
+
+    onMount(() => {
+        map.onLoad((map: mapboxgl.Map) => {
+            googleRedirect = new GoogleRedirect(map);
+            mapillaryLayer = new MapillaryLayer(map, container, mapillaryOpen);
+        });
+    });
+
+    $effect(() => {
+        if ($streetViewSource === 'mapillary') {
+            googleRedirect?.remove();
+            if ($streetViewEnabled) {
+                mapillaryLayer?.add();
+            } else {
+                mapillaryLayer?.remove();
+            }
+        } else {
+            mapillaryLayer?.remove();
+            if ($streetViewEnabled) {
+                googleRedirect?.add();
+            } else {
+                googleRedirect?.remove();
+            }
+        }
+    });
+</script>
+
+<CustomControl class="w-[29px] h-[29px] shrink-0">
+    <ButtonWithTooltip
+        variant="ghost"
+        class="w-full h-full"
+        side="left"
+        label={i18n._('menu.toggle_street_view')}
+        onclick={() => {
+            $streetViewEnabled = !$streetViewEnabled;
+        }}
+    >
+        <PersonStanding
+            size="22"
+            class="size-5.5"
+            color={$streetViewEnabled ? '#33b5e5' : 'currentColor'}
+        />
+    </ButtonWithTooltip>
+</CustomControl>
+
+<div
+    bind:this={container}
+    class="{mapillaryOpen.value
+        ? ''
+        : 'hidden'} !absolute bottom-[44px] right-2.5 z-10 w-[40%] h-[40%] bg-background rounded-md overflow-hidden border-background border-2"
+>
+    <!-- svelte-ignore a11y_click_events_have_key_events -->
+    <!-- svelte-ignore a11y_no_static_element_interactions -->
+    <div
+        class="absolute top-0 right-0 z-10 bg-background p-1 rounded-bl-md cursor-pointer"
+        onclick={() => {
+            if (mapillaryLayer) {
+                mapillaryLayer.closePopup();
+            }
+        }}
+    >
+        <X size="16" />
+    </div>
+</div>

website/src/lib/components/map/street-view-control/google.ts

@@ -1,4 +1,4 @@
-import { resetCursor, setCrosshairCursor } from '$lib/utils';
+import { mapCursor, MapCursorState } from '$lib/logic/map-cursor';
 import type mapboxgl from 'mapbox-gl';
 
 export class GoogleRedirect {
@@ -13,7 +13,7 @@ export class GoogleRedirect {
         if (this.enabled) return;
 
         this.enabled = true;
-        setCrosshairCursor();
+        mapCursor.notify(MapCursorState.STREET_VIEW_CROSSHAIR, true);
         this.map.on('click', this.openStreetView);
     }
 
@@ -21,11 +21,11 @@ export class GoogleRedirect {
         if (!this.enabled) return;
 
         this.enabled = false;
-        resetCursor();
+        mapCursor.notify(MapCursorState.STREET_VIEW_CROSSHAIR, false);
         this.map.off('click', this.openStreetView);
     }
 
-    openStreetView(e) {
+    openStreetView(e: mapboxgl.MapMouseEvent) {
         window.open(
             `https://www.google.com/maps/@?api=1&map_action=pano&viewpoint=${e.lngLat.lat},${e.lngLat.lng}`
         );

website/src/lib/components/map/street-view-control/mapillary.ts

@@ -1,8 +1,7 @@
 import mapboxgl, { type LayerSpecification, type VectorSourceSpecification } from 'mapbox-gl';
 import { Viewer, type ViewerBearingEvent } from 'mapillary-js/dist/mapillary.module';
 import 'mapillary-js/dist/mapillary.css';
-import { resetCursor, setPointerCursor } from '$lib/utils';
-import type { Writable } from 'svelte/store';
+import { mapCursor, MapCursorState } from '$lib/logic/map-cursor';
 
 const mapillarySource: VectorSourceSpecification = {
     type: 'vector',
@@ -47,13 +46,13 @@ export class MapillaryLayer {
     viewer: Viewer;
 
     active = false;
-    popupOpen: Writable<boolean>;
+    popupOpen: { value: boolean };
 
     addBinded = this.add.bind(this);
     onMouseEnterBinded = this.onMouseEnter.bind(this);
     onMouseLeaveBinded = this.onMouseLeave.bind(this);
 
-    constructor(map: mapboxgl.Map, container: HTMLElement, popupOpen: Writable<boolean>) {
+    constructor(map: mapboxgl.Map, container: HTMLElement, popupOpen: { value: boolean }) {
         this.map = map;
 
         this.viewer = new Viewer({
@@ -77,7 +76,7 @@ export class MapillaryLayer {
 
         this.viewer.on('position', async () => {
             if (this.active) {
-                popupOpen.set(true);
+                popupOpen.value = true;
                 let latLng = await this.viewer.getPosition();
                 this.marker.setLngLat(latLng).addTo(this.map);
                 if (!this.map.getBounds()?.contains(latLng)) {
@@ -126,25 +125,32 @@ export class MapillaryLayer {
         }
 
         this.marker.remove();
-        this.popupOpen.set(false);
+        this.popupOpen.value = false;
     }
 
     closePopup() {
         this.active = false;
         this.marker.remove();
-        this.popupOpen.set(false);
+        this.popupOpen.value = false;
     }
 
     onMouseEnter(e: mapboxgl.MapMouseEvent) {
-        this.active = true;
+        if (
+            e.features &&
+            e.features.length > 0 &&
+            e.features[0].properties &&
+            e.features[0].properties.id
+        ) {
+            this.active = true;
 
-        this.viewer.resize();
-        this.viewer.moveTo(e.features[0].properties.id);
+            this.viewer.resize();
+            this.viewer.moveTo(e.features[0].properties.id);
 
-        setPointerCursor();
+            mapCursor.notify(MapCursorState.MAPILLARY_HOVER, true);
+        }
     }
 
     onMouseLeave() {
-        resetCursor();
+        mapCursor.notify(MapCursorState.MAPILLARY_HOVER, false);
     }
 }

website/src/lib/components/map/street-view-control/utils.ts

@@ -0,0 +1,3 @@
+import { writable } from 'svelte/store';
+
+export const streetViewEnabled = writable(false);

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

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

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

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

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

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

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

@@ -1,44 +1,49 @@
 <script lang="ts">
-    import { Tool, currentTool } from '$lib/stores';
-    import { settings } from '$lib/db';
-    import { flyAndScale } from '$lib/utils';
+    import { Tool, currentTool } from '$lib/components/toolbar/tools';
     import * as Card from '$lib/components/ui/card';
     import Routing from '$lib/components/toolbar/tools/routing/Routing.svelte';
     import Scissors from '$lib/components/toolbar/tools/scissors/Scissors.svelte';
-    import Waypoint from '$lib/components/toolbar/tools/Waypoint.svelte';
+    import Waypoint from '$lib/components/toolbar/tools/waypoint/Waypoint.svelte';
     import Time from '$lib/components/toolbar/tools/Time.svelte';
     import Merge from '$lib/components/toolbar/tools/Merge.svelte';
-    import Extract from '$lib/components/toolbar/tools/Extract.svelte';
     import Elevation from '$lib/components/toolbar/tools/Elevation.svelte';
+    import Extract from '$lib/components/toolbar/tools/Extract.svelte';
     import Clean from '$lib/components/toolbar/tools/Clean.svelte';
-    import Reduce from '$lib/components/toolbar/tools/Reduce.svelte';
+    import Reduce from '$lib/components/toolbar/tools/reduce/Reduce.svelte';
     import RoutingControlPopup from '$lib/components/toolbar/tools/routing/RoutingControlPopup.svelte';
-    import { onMount } from 'svelte';
     import mapboxgl from 'mapbox-gl';
+    import { settings } from '$lib/logic/settings';
+
+    let {
+        class: className = '',
+    }: {
+        class: string;
+    } = $props();
 
     const { minimizeRoutingMenu } = settings;
 
-    let popupElement: HTMLElement;
-    let popup: mapboxgl.Popup;
-
-    onMount(() => {
-        popup = new mapboxgl.Popup({
+    let popupElement: HTMLDivElement | undefined = $state(undefined);
+    let popup: mapboxgl.Popup | undefined = $derived.by(() => {
+        if (!popupElement) {
+            return undefined;
+        }
+        let popup = new mapboxgl.Popup({
             closeButton: false,
             maxWidth: undefined,
         });
         popup.setDOMContent(popupElement);
         popupElement.classList.remove('hidden');
+        return popup;
     });
 </script>
 
 {#if $currentTool !== null}
     <div
-        in:flyAndScale={{ x: -2, y: 0, duration: 100 }}
-        class="translate-x-1 h-full {$$props.class ?? ''}"
+        class="translate-x-1 h-full animate-in fade-in-0 zoom-in-95 slide-in-from-left-2 {className}"
     >
         <div class="rounded-md shadow-md pointer-events-auto">
-            <Card.Root class="rounded-md border-none">
-                <Card.Content class="p-2.5">
+            <Card.Root class="rounded-md border-none py-2.5">
+                <Card.Content class="px-2.5">
                     {#if $currentTool === Tool.ROUTING}
                         <Routing {popup} {popupElement} bind:minimized={$minimizeRoutingMenu} />
                     {:else if $currentTool === Tool.SCISSORS}
@@ -67,7 +72,7 @@
 <svelte:window
     on:keydown={(e) => {
         if ($currentTool !== null && e.key === 'Escape') {
-            currentTool.set(null);
+            $currentTool = null;
         }
     }}
 />

website/src/lib/components/toolbar/tools.ts

@@ -0,0 +1,15 @@
+import { writable, type Writable } from 'svelte/store';
+
+export enum Tool {
+    ROUTING,
+    WAYPOINT,
+    SCISSORS,
+    TIME,
+    MERGE,
+    EXTRACT,
+    ELEVATION,
+    REDUCE,
+    CLEAN,
+}
+
+export const currentTool: Writable<Tool | null> = writable(null);

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

@@ -1,4 +1,4 @@
-<script lang="ts" context="module">
+<script lang="ts" module>
     enum CleanType {
         INSIDE = 'inside',
         OUTSIDE = 'outside',
@@ -11,27 +11,33 @@
     import * as RadioGroup from '$lib/components/ui/radio-group';
     import { Button } from '$lib/components/ui/button';
     import Help from '$lib/components/Help.svelte';
-    import { _, locale } from 'svelte-i18n';
+    import { i18n } from '$lib/i18n.svelte';
     import { onDestroy, onMount } from 'svelte';
-    import { getURLForLanguage, resetCursor, setCrosshairCursor } from '$lib/utils';
-    import { Trash2 } from 'lucide-svelte';
-    import { map } from '$lib/stores';
-    import { selection } from '$lib/components/file-list/Selection';
-    import { dbUtils } from '$lib/db';
+    import { getURLForLanguage } from '$lib/utils';
+    import { Trash2 } from '@lucide/svelte';
+    import { map } from '$lib/components/map/map';
+    import type { GeoJSONSource } from 'mapbox-gl';
+    import { selection } from '$lib/logic/selection';
+    import { fileActions } from '$lib/logic/file-actions';
+    import { mapCursor, MapCursorState } from '$lib/logic/map-cursor';
 
-    let cleanType = CleanType.INSIDE;
-    let deleteTrackpoints = true;
-    let deleteWaypoints = true;
-    let rectangleCoordinates: mapboxgl.LngLat[] = [];
+    let props: {
+        class?: string;
+    } = $props();
 
-    function updateRectangle() {
+    let cleanType = $state(CleanType.INSIDE);
+    let deleteTrackpoints = $state(true);
+    let deleteWaypoints = $state(true);
+    let rectangleCoordinates: mapboxgl.LngLat[] = $state([]);
+
+    $effect(() => {
         if ($map) {
             if (rectangleCoordinates.length != 2) {
                 if ($map.getLayer('rectangle')) {
                     $map.removeLayer('rectangle');
                 }
             } else {
-                let data = {
+                let data: GeoJSON.Feature = {
                     type: 'Feature',
                     geometry: {
                         type: 'Polygon',
@@ -45,8 +51,9 @@
                             ],
                         ],
                     },
+                    properties: {},
                 };
-                let source = $map.getSource('rectangle');
+                let source: GeoJSONSource | undefined = $map.getSource('rectangle');
                 if (source) {
                     source.setData(data);
                 } else {
@@ -68,11 +75,7 @@
                 }
             }
         }
-    }
-
-    $: if (rectangleCoordinates) {
-        updateRectangle();
-    }
+    });
 
     let mousedown = false;
     function onMouseDown(e: any) {
@@ -91,22 +94,21 @@
     }
 
     onMount(() => {
-        setCrosshairCursor();
+        if ($map) {
+            mapCursor.notify(MapCursorState.TOOL_WITH_CROSSHAIR, true);
+            $map.on('mousedown', onMouseDown);
+            $map.on('mousemove', onMouseMove);
+            $map.on('mouseup', onMouseUp);
+            $map.on('touchstart', onMouseDown);
+            $map.on('touchmove', onMouseMove);
+            $map.on('touchend', onMouseUp);
+            $map.dragPan.disable();
+        }
     });
 
-    $: if ($map) {
-        $map.on('mousedown', onMouseDown);
-        $map.on('mousemove', onMouseMove);
-        $map.on('mouseup', onMouseUp);
-        $map.on('touchstart', onMouseDown);
-        $map.on('touchmove', onMouseMove);
-        $map.on('touchend', onMouseUp);
-        $map.dragPan.disable();
-    }
-
     onDestroy(() => {
-        resetCursor();
         if ($map) {
+            mapCursor.notify(MapCursorState.TOOL_WITH_CROSSHAIR, false);
             $map.off('mousedown', onMouseDown);
             $map.off('mousemove', onMouseMove);
             $map.off('mouseup', onMouseUp);
@@ -124,31 +126,31 @@
         }
     });
 
-    $: validSelection = $selection.size > 0;
+    let validSelection = $derived($selection.size > 0);
 </script>
 
-<div class="flex flex-col gap-3 w-full max-w-80 items-center {$$props.class ?? ''}">
+<div class="flex flex-col gap-3 w-full max-w-80 items-center {props.class ?? ''}">
     <fieldset class="flex flex-col gap-3">
         <div class="flex flex-row items-center gap-[6.4px] h-3">
             <Checkbox id="delete-trkpt" bind:checked={deleteTrackpoints} class="scale-90" />
             <Label for="delete-trkpt">
-                {$_('toolbar.clean.delete_trackpoints')}
+                {i18n._('toolbar.clean.delete_trackpoints')}
             </Label>
         </div>
         <div class="flex flex-row items-center gap-[6.4px] h-3">
             <Checkbox id="delete-wpt" bind:checked={deleteWaypoints} class="scale-90" />
             <Label for="delete-wpt">
-                {$_('toolbar.clean.delete_waypoints')}
+                {i18n._('toolbar.clean.delete_waypoints')}
             </Label>
         </div>
         <RadioGroup.Root bind:value={cleanType}>
             <Label class="flex flex-row items-center gap-2">
                 <RadioGroup.Item value={CleanType.INSIDE} />
-                {$_('toolbar.clean.delete_inside')}
+                {i18n._('toolbar.clean.delete_inside')}
             </Label>
             <Label class="flex flex-row items-center gap-2">
                 <RadioGroup.Item value={CleanType.OUTSIDE} />
-                {$_('toolbar.clean.delete_outside')}
+                {i18n._('toolbar.clean.delete_outside')}
             </Label>
         </RadioGroup.Root>
     </fieldset>
@@ -156,8 +158,8 @@
         variant="outline"
         class="w-full"
         disabled={!validSelection || rectangleCoordinates.length != 2}
-        on:click={() => {
-            dbUtils.cleanSelection(
+        onclick={() => {
+            fileActions.cleanSelection(
                 [
                     {
                         lat: Math.min(rectangleCoordinates[0].lat, rectangleCoordinates[1].lat),
@@ -175,14 +177,14 @@
             rectangleCoordinates = [];
         }}
     >
-        <Trash2 size="16" class="mr-1" />
-        {$_('toolbar.clean.button')}
+        <Trash2 size="16" />
+        {i18n._('toolbar.clean.button')}
     </Button>
-    <Help link={getURLForLanguage($locale, '/help/toolbar/clean')}>
+    <Help link={getURLForLanguage(i18n.lang, '/help/toolbar/clean')}>
         {#if validSelection}
-            {$_('toolbar.clean.help')}
+            {i18n._('toolbar.clean.help')}
         {:else}
-            {$_('toolbar.clean.help_no_selection')}
+            {i18n._('toolbar.clean.help_no_selection')}
         {/if}
     </Help>
 </div>