progress

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

@@ -20,6 +20,6 @@
 	scrollbarYClasses={orientation === 'vertical' ? '' : ''}
 >
 	<div class="flex {orientation === 'vertical' ? 'flex-col' : 'flex-row'} {$$props.class ?? ''}">
-		<FileListNode node={$fileObservers} item={new ListRootItem()} />
+		<FileListNode bind:node={$fileObservers} item={new ListRootItem()} />
 	</div>
 </ScrollArea>

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

@@ -5,7 +5,7 @@
 	import type { Readable } from 'svelte/store';
 	import FileListNodeContent from './FileListNodeContent.svelte';
 	import FileListNodeLabel from './FileListNodeLabel.svelte';
-	import { getContext } from 'svelte';
+	import { afterUpdate, getContext } from 'svelte';
 	import { type ListItem, type ListTrackItem } from './FileList';
 
 	export let node:
@@ -16,7 +16,7 @@
 
 	let recursive = getContext<boolean>('recursive');
 
-	let label =
+	$: label =
 		node instanceof GPXFile
 			? node.metadata.name
 			: node instanceof Track

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

@@ -2,7 +2,7 @@
 	import { GPXFile, Track, Waypoint, type AnyGPXTreeElement, type GPXTreeElement } from 'gpx';
 	import { afterUpdate, getContext, onDestroy, onMount } from 'svelte';
 	import Sortable from 'sortablejs/Sortable';
-	import { settings, type GPXFileWithStatistics } from '$lib/db';
+	import { fileObservers, settings, type GPXFileWithStatistics } from '$lib/db';
 	import { get, type Readable } from 'svelte/store';
 	import FileListNodeStore from './FileListNodeStore.svelte';
 	import FileListNode from './FileListNode.svelte';
@@ -50,16 +50,17 @@
 		});
 	}
 
+	const { fileOrder } = settings;
 	function syncFileOrder() {
-		if (sortableLevel !== 'file') {
+		if (!sortable || sortableLevel !== 'file') {
 			return;
 		}
 
-		/*Object.keys(buttons).forEach((fileId) => {
-			if (!get(fileObservers).has(fileId)) {
-				delete buttons[fileId];
-			}
-		});*/
+		if ($fileOrder.length !== $fileObservers.size) {
+			// Files were added or removed
+			fileOrder.set(sortable.toArray());
+			return;
+		}
 
 		const currentOrder = sortable.toArray();
 		if (currentOrder.length !== $fileOrder.length) {
@@ -74,8 +75,6 @@
 		}
 	}
 
-	const { fileOrder } = settings;
-
 	onMount(() => {
 		sortable = Sortable.create(container, {
 			group: {
@@ -109,13 +108,19 @@
 		});
 	});
 
-	$: if ($fileOrder && sortable) {
+	$: if ($fileOrder) {
 		syncFileOrder();
 	}
 
 	afterUpdate(() => {
-		syncFileOrder();
-		// TODO: update selection if files are removed
+		if (sortableLevel === 'file') {
+			syncFileOrder();
+			Object.keys(elements).forEach((fileId) => {
+				if (!get(fileObservers).has(fileId)) {
+					delete elements[fileId];
+				}
+			});
+		}
 	});
 
 	const unsubscribe = selection.subscribe(($selection) => {

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

@@ -4,6 +4,21 @@ import { fileObservers } from "$lib/db";
 
 export const selection = writable<SelectionTreeType>(new SelectionTreeType(new ListRootItem()));
 
+export function select(fileId: string) {
+    selection.update(($selection) => {
+        $selection.clear();
+        $selection.set(new ListFileItem(fileId), true);
+        return $selection;
+    });
+}
+
+export function addSelect(fileId: string) {
+    selection.update(($selection) => {
+        $selection.toggle(new ListFileItem(fileId));
+        return $selection;
+    });
+}
+
 export function selectAll() {
     selection.update(($selection) => {
         get(fileObservers).forEach((_file, fileId) => {