restructure

website/src/lib/components/Menu.svelte

@@ -2,10 +2,20 @@
 	import * as Menubar from '$lib/components/ui/menubar/index.js';
 	import { Button } from '$lib/components/ui/button';
 	import Logo from './Logo.svelte';
-	import { Plus, Copy, Download, Undo2, Redo2, Trash2, HeartHandshake } from 'lucide-svelte';
+	import {
+		Plus,
+		Copy,
+		Download,
+		Undo2,
+		Redo2,
+		Trash2,
+		HeartHandshake,
+		Upload
+	} from 'lucide-svelte';
 	import Fa from 'svelte-fa';
 	import { faGoogleDrive } from '@fortawesome/free-brands-svg-icons';
-	import Load from '$lib/components/tools/Load.svelte';
+
+	import { triggerFileInput } from '$lib/stores';
 
 	let distanceUnits = 'metric';
 	let velocityUnits = 'speed';
@@ -25,7 +35,11 @@
 					<Menubar.Item>
 						<Plus size="16" class="mr-1" /> New <Menubar.Shortcut>⌘N</Menubar.Shortcut>
 					</Menubar.Item>
-					<Load />
+					<Menubar.Item on:click={triggerFileInput}>
+						<Upload size="16" class="mr-1" /> Load from desktop... <Menubar.Shortcut
+							>⌘O</Menubar.Shortcut
+						>
+					</Menubar.Item>
 					<Menubar.Item>
 						<Fa icon={faGoogleDrive} class="h-4 w-4 mr-1" />
 						Load from Google Drive...</Menubar.Item

website/src/lib/components/tools/Load.svelte

@@ -1,10 +0,0 @@
-<script lang="ts">
-	import * as Menubar from '$lib/components/ui/menubar/index.js';
-	import { Upload } from 'lucide-svelte';
-
-	import { triggerFileInput } from '$lib/components/tools/tools';
-</script>
-
-<Menubar.Item on:click={triggerFileInput}>
-	<Upload size="16" class="mr-1" /> Load from desktop... <Menubar.Shortcut>⌘O</Menubar.Shortcut>
-</Menubar.Item>

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

@@ -1,38 +0,0 @@
-import { files } from '$lib/stores';
-
-import { parseGPX } from 'gpx';
-
-export function triggerFileInput() {
-    const input = document.createElement('input');
-    input.type = 'file';
-    input.accept = '.gpx';
-    input.multiple = true;
-    input.className = 'hidden';
-    input.onchange = () => {
-        if (input.files) {
-            loadFiles(input.files);
-        }
-    };
-    input.click();
-}
-
-export function loadFiles(files: FileList) {
-    for (let i = 0; i < files.length; i++) {
-        loadFile(files[i]);
-    }
-}
-
-export function loadFile(file: File) {
-    const reader = new FileReader();
-    reader.onload = () => {
-        let data = reader.result?.toString() ?? null;
-        if (data) {
-            let gpx = parseGPX(data);
-            if (gpx.metadata.name === undefined) {
-                gpx.metadata['name'] = file.name.split('.').slice(0, -1).join('.');
-            }
-            files.update($files => [...$files, gpx]);
-        }
-    };
-    reader.readAsText(file);
-}

website/src/lib/stores.ts

@@ -1,7 +1,42 @@
 import { writable } from 'svelte/store';
 
 import mapboxgl from 'mapbox-gl';
-import { GPXFile } from 'gpx';
+import { GPXFile, parseGPX } from 'gpx';
 
 export const map = writable<mapboxgl.Map | null>(null);
 export const files = writable<GPXFile[]>([]);
+
+export function triggerFileInput() {
+    const input = document.createElement('input');
+    input.type = 'file';
+    input.accept = '.gpx';
+    input.multiple = true;
+    input.className = 'hidden';
+    input.onchange = () => {
+        if (input.files) {
+            loadFiles(input.files);
+        }
+    };
+    input.click();
+}
+
+export function loadFiles(files: FileList) {
+    for (let i = 0; i < files.length; i++) {
+        loadFile(files[i]);
+    }
+}
+
+export function loadFile(file: File) {
+    const reader = new FileReader();
+    reader.onload = () => {
+        let data = reader.result?.toString() ?? null;
+        if (data) {
+            let gpx = parseGPX(data);
+            if (gpx.metadata.name === undefined) {
+                gpx.metadata['name'] = file.name.split('.').slice(0, -1).join('.');
+            }
+            files.update($files => [...$files, gpx]);
+        }
+    };
+    reader.readAsText(file);
+}

website/src/routes/+page.svelte

@@ -6,7 +6,7 @@
 	import Toolbar from '$lib/components/Toolbar.svelte';
 	import LayerControl from '$lib/components/layer-control/LayerControl.svelte';
 
-	import { triggerFileInput } from '$lib/components/tools/tools';
+	import { triggerFileInput } from '$lib/stores';
 </script>
 
 <div class="flex flex-col w-screen h-screen">