From 722cf5848675e6c3d574a8082fc69bf3e251ae73 Mon Sep 17 00:00:00 2001
From: vcoppe <vcoppe@hexaly.com>
Date: Sun, 26 Oct 2025 12:12:23 +0100
Subject: [PATCH] progress

---
 website/src/lib/components/Menu.svelte        |   7 +-
 .../CollapsibleTreeNode.svelte                |  11 +-
 .../lib/components/file-list/FileList.svelte  |  58 ++--
 .../components/file-list/FileListNode.svelte  |  18 +-
 .../file-list/FileListNodeContent.svelte      | 276 ++---------------
 .../file-list/FileListNodeLabel.svelte        |  95 +++---
 .../src/lib/components/file-list/file-list.ts |  18 --
 .../file-list/metadata/MetadataDialog.svelte  |   2 +-
 .../file-list/sortable-file-list.ts           | 289 ++++++++++++++++++
 .../file-list/style/StyleDialog.svelte        |   2 +-
 .../map/gpx-layer/WaypointPopup.svelte        |   4 +-
 .../src/routes/[[language]]/app/+page.svelte  |   6 +-
 12 files changed, 401 insertions(+), 385 deletions(-)
 create mode 100644 website/src/lib/components/file-list/sortable-file-list.ts

diff --git a/website/src/lib/components/Menu.svelte b/website/src/lib/components/Menu.svelte
index 201aabfc..976e1cc5 100644
--- a/website/src/lib/components/Menu.svelte
+++ b/website/src/lib/components/Menu.svelte
@@ -51,11 +51,7 @@
     import { anySelectedLayer } from '$lib/components/map/layer-control/utils';
     import { defaultOverlays } from '$lib/assets/layers';
     import LayerControlSettings from '$lib/components/map/layer-control/LayerControlSettings.svelte';
-    import {
-        allowedPastes,
-        ListFileItem,
-        ListTrackItem,
-    } from '$lib/components/file-list/file-list';
+    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';
@@ -75,6 +71,7 @@
     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,
diff --git a/website/src/lib/components/collapsible-tree/CollapsibleTreeNode.svelte b/website/src/lib/components/collapsible-tree/CollapsibleTreeNode.svelte
index 25debcfb..f9ade45d 100644
--- a/website/src/lib/components/collapsible-tree/CollapsibleTreeNode.svelte
+++ b/website/src/lib/components/collapsible-tree/CollapsibleTreeNode.svelte
@@ -34,9 +34,10 @@
         <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'} p-0 has-[>svg]:px-0 h-fit {nohover
+                    : 'justify-start pl-1'} h-fit {nohover
                     ? 'hover:bg-background'
                     : ''} pointer-events-none"
             >
@@ -60,9 +61,10 @@
     {: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'} p-0 has-[>svg]:px-0 h-fit {nohover ? 'hover:bg-background' : ''}"
+                : 'justify-start pl-1'} h-fit {nohover ? 'hover:bg-background' : ''}"
         >
             {#if side === 'left'}
                 <Collapsible.Trigger>
@@ -85,7 +87,6 @@
             {/if}
         </Button>
     {/if}
-
     <Collapsible.Content>
         {@render props.content()}
     </Collapsible.Content>
diff --git a/website/src/lib/components/file-list/FileList.svelte b/website/src/lib/components/file-list/FileList.svelte
index 3b8afa2f..ad2b48e5 100644
--- a/website/src/lib/components/file-list/FileList.svelte
+++ b/website/src/lib/components/file-list/FileList.svelte
@@ -2,15 +2,15 @@
     import { ScrollArea } from '$lib/components/ui/scroll-area/index';
     import * as ContextMenu from '$lib/components/ui/context-menu';
     import FileListNode from './FileListNode.svelte';
-    import { setContext } from 'svelte';
-    import { ListFileItem, ListLevel, ListRootItem, allowedPastes } from './file-list';
+    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 { i18n } from '$lib/i18n.svelte';
-    import { settings } from '$lib/logic/settings';
     import { fileStateCollection } from '$lib/logic/file-state';
     import { createFile, pasteSelection } from '$lib/logic/file-actions';
     import { selection, copied } from '$lib/logic/selection';
+    import { allowedPastes } from './sortable-file-list';
 
     let {
         orientation,
@@ -27,30 +27,28 @@
     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 {
-    //         selection.update(($selection) => {
-    //             $selection.forEach((item) => {
-    //                 if (!(item instanceof ListFileItem)) {
-    //                     $selection.toggle(item);
-    //                     $selection.set(new ListFileItem(item.getFileId()), true);
-    //                 }
-    //             });
-    //             return $selection;
-    //         });
-    //     }
-    // });
+    onMount(() => {
+        if (orientation === 'vertical') {
+            selection.update(($selection) => {
+                $selection.forEach((item) => {
+                    if ($selection.hasAnyChildren(item, false)) {
+                        $selection.toggle(item);
+                    }
+                });
+                return $selection;
+            });
+        } else {
+            selection.update(($selection) => {
+                $selection.forEach((item) => {
+                    if (!(item instanceof ListFileItem)) {
+                        $selection.toggle(item);
+                        $selection.set(new ListFileItem(item.getFileId()), true);
+                    }
+                });
+                return $selection;
+            });
+        }
+    });
 </script>
 
 <ScrollArea
@@ -71,7 +69,7 @@
                 <ContextMenu.Trigger class="grow" />
                 <ContextMenu.Content>
                     <ContextMenu.Item onclick={createFile}>
-                        <Plus size="16" class="mr-1" />
+                        <Plus size="16" />
                         {i18n._('menu.new_file')}
                         <Shortcut key="+" ctrl={true} />
                     </ContextMenu.Item>
@@ -80,7 +78,7 @@
                         onclick={() => selection.selectAll()}
                         disabled={$fileStateCollection.size === 0}
                     >
-                        <FileStack size="16" class="mr-1" />
+                        <FileStack size="16" />
                         {i18n._('menu.select_all')}
                         <Shortcut key="A" ctrl={true} />
                     </ContextMenu.Item>
@@ -91,7 +89,7 @@
                             !allowedPastes[$copied[0].level].includes(ListLevel.ROOT)}
                         onclick={pasteSelection}
                     >
-                        <ClipboardPaste size="16" class="mr-1" />
+                        <ClipboardPaste size="16" />
                         {i18n._('menu.paste')}
                         <Shortcut key="V" ctrl={true} />
                     </ContextMenu.Item>
diff --git a/website/src/lib/components/file-list/FileListNode.svelte b/website/src/lib/components/file-list/FileListNode.svelte
index 20e5b83a..42bda04c 100644
--- a/website/src/lib/components/file-list/FileListNode.svelte
+++ b/website/src/lib/components/file-list/FileListNode.svelte
@@ -58,15 +58,15 @@
 
     const { treeFileView } = settings;
 
-    function openIfSelectedChild() {
-        if (collapsible && treeFileView.value && $selection.hasAnyChildren(item, false)) {
-            collapsible.openNode();
-        }
-    }
+    // function openIfSelectedChild() {
+    //     if (collapsible && $treeFileView && $selection.hasAnyChildren(item, false)) {
+    //         collapsible.openNode();
+    //     }
+    // }
 
-    if ($selection) {
-        openIfSelectedChild();
-    }
+    // if ($selection) {
+    //     openIfSelectedChild();
+    // }
 
     // afterUpdate(openIfSelectedChild);
 </script>
@@ -83,7 +83,7 @@
             <FileListNodeLabel {node} {item} {label} />
         {/snippet}
         {#snippet content()}
-            <div class="ml-2">
+            <div class="ml-4">
                 {#key node}
                     <FileListNodeContent {node} {item} />
                 {/key}
diff --git a/website/src/lib/components/file-list/FileListNodeContent.svelte b/website/src/lib/components/file-list/FileListNodeContent.svelte
index 7c472528..d4f34036 100644
--- a/website/src/lib/components/file-list/FileListNodeContent.svelte
+++ b/website/src/lib/components/file-list/FileListNodeContent.svelte
@@ -1,28 +1,13 @@
-<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 { getContext, onDestroy, onMount } from 'svelte';
-    import Sortable from 'sortablejs/Sortable';
-    import { get, writable, type Readable, type Writable } from 'svelte/store';
+    import { type Readable } from 'svelte/store';
     import FileListNodeStore from './FileListNodeStore.svelte';
     import FileListNode from './FileListNode.svelte';
-    import {
-        ListFileItem,
-        ListLevel,
-        ListRootItem,
-        ListWaypointsItem,
-        allowedMoves,
-        type ListItem,
-    } from './file-list';
-    import { isMac } from '$lib/utils';
+    import FileListNodeContent from './FileListNodeContent.svelte';
+    import { ListFileItem, ListLevel, ListWaypointsItem, type ListItem } from './file-list';
     import type { GPXFileWithStatistics } from '$lib/logic/statistics-tree';
-    import { settings } from '$lib/logic/settings';
-    import { getFileIds, moveItems } from '$lib/logic/file-actions';
+    import { allowedMoves, dragging, SortableFileList } from './sortable-file-list';
 
     let {
         node,
@@ -32,13 +17,13 @@
         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
@@ -51,253 +36,26 @@
               : 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();
-    }
-
-    function syncFileOrder(order: string[]) {
-        if (!sortable || sortableLevel !== ListLevel.FILE) {
-            return;
-        }
-
-        const currentOrder = sortable.toArray();
-        if (currentOrder.length !== order.length) {
-            sortable.sort(order);
-        } else {
-            for (let i = 0; i < currentOrder.length; i++) {
-                if (currentOrder[i] !== order[i]) {
-                    sortable.sort(order);
-                    break;
-                }
-            }
-        }
-    }
-
-    const { fileOrder } = settings;
-    $effect(() => syncFileOrder(fileOrder.value));
-
-    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 !== fileOrder.value.length) {
-                        fileOrder.value = newFileOrder;
-                    } else {
-                        for (let i = 0; i < newFileOrder.length; i++) {
-                            if (newFileOrder[i] !== fileOrder.value[i]) {
-                                fileOrder.value = 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.value.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;
-    });
-
-    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();
+        sortable = new SortableFileList(
+            container,
+            node,
+            item,
+            waypointRoot,
+            sortableLevel,
+            orientation
+        );
     });
 
     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
@@ -343,7 +101,7 @@
 
 {#if node instanceof GPXFile && item instanceof ListFileItem}
     {#if !waypointRoot}
-        <svelte:self {node} {item} waypointRoot={true} />
+        <FileListNodeContent {node} {item} waypointRoot={true} />
     {/if}
 {/if}
 
diff --git a/website/src/lib/components/file-list/FileListNodeLabel.svelte b/website/src/lib/components/file-list/FileListNodeLabel.svelte
index 672ca713..3f5b34b6 100644
--- a/website/src/lib/components/file-list/FileListNodeLabel.svelte
+++ b/website/src/lib/components/file-list/FileListNodeLabel.svelte
@@ -17,31 +17,31 @@
         Maximize,
         Scissors,
         FileStack,
-        FileX,
     } from '@lucide/svelte';
     import {
         ListFileItem,
         ListLevel,
         ListTrackItem,
         ListWaypointItem,
-        allowedPastes,
         type ListItem,
     } from './file-list';
     import { getContext } from 'svelte';
-    import { get } from 'svelte/store';
     import { GPXTreeElement, Track, type AnyGPXTreeElement, Waypoint, GPXFile } from 'gpx';
     import { i18n } from '$lib/i18n.svelte';
     import MetadataDialog from '$lib/components/file-list/metadata/MetadataDialog.svelte';
     import { editMetadata } from '$lib/components/file-list/metadata/utils.svelte';
-    import StyleDialog from './style/StyleDialog.svelte';
+    import StyleDialog from '$lib/components/file-list/style/StyleDialog.svelte';
     import { editStyle } from '$lib/components/file-list/style/utils.svelte';
-    import { waypointPopup } from '$lib/components/map/gpx-layer/GPXLayerPopup';
     import { getSymbolKey, symbols } from '$lib/assets/symbols';
     import { selection, copied, cut } from '$lib/logic/selection';
     import { map } from '$lib/components/map/map';
     import { fileActions, pasteSelection } from '$lib/logic/file-actions';
     import { allHidden } from '$lib/logic/hidden';
     import { boundsManager } from '$lib/logic/bounds';
+    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';
 
     let {
         node,
@@ -58,13 +58,15 @@
 
     let singleSelection = $derived($selection.size === 1);
 
-    let nodeColors: string[] = []; /* $derived.by(() => {
+    let nodeColors: string[] = $state([]);
+
+    $effect.pre(() => {
         let colors: string[] = [];
-        if (node && map.value) {
+        if (node && $map) {
             if (node instanceof GPXFile) {
                 let defaultColor = undefined;
 
-                let layer = gpxLayers.get(item.getFileId());
+                let layer = gpxLayers.getLayer(item.getFileId());
                 if (layer) {
                     defaultColor = layer.layerColor;
                 }
@@ -78,23 +80,20 @@
             } 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 (style['gpx_style:color'] && !colors.includes(style['gpx_style:color'])) {
+                        colors.push(style['gpx_style:color']);
                     }
                 }
                 if (colors.length === 0) {
-                    let layer = gpxLayers.get(item.getFileId());
+                    let layer = gpxLayers.getLayer(item.getFileId());
                     if (layer) {
                         colors.push(layer.layerColor);
                     }
                 }
             }
         }
-        return colors;
-    });*/
+        nodeColors = colors;
+    });
 
     let symbolKey = $derived(node instanceof Waypoint ? getSymbolKey(node.sym) : undefined);
 
@@ -117,8 +116,8 @@
 <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"
@@ -172,8 +171,8 @@
                 }}
                 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) {
@@ -187,7 +186,7 @@
                 }}
                 onmouseleave={() => {
                     if (item instanceof ListWaypointItem) {
-                        let layer = gpxLayers.get(item.getFileId());
+                        let layer = gpxLayers.getLayer(item.getFileId());
                         if (layer) {
                             waypointPopup?.setItem(null);
                         }
@@ -195,13 +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}
                         {@const SymbolIcon = symbols[symbolKey].icon}
-                        <SymbolIcon size="16" class="mr-1 shrink-0" />
+                        <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
@@ -213,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>
@@ -231,12 +227,12 @@
                 disabled={!singleSelection}
                 onclick={() => (editMetadata.current = true)}
             >
-                <Info size="16" class="mr-1" />
+                <Info size="16" />
                 {i18n._('menu.metadata.button')}
                 <Shortcut key="I" ctrl={true} />
             </ContextMenu.Item>
             <ContextMenu.Item onclick={() => (editStyle.current = true)}>
-                <PaintBucket size="16" class="mr-1" />
+                <PaintBucket size="16" />
                 {i18n._('menu.style.button')}
             </ContextMenu.Item>
         {/if}
@@ -250,10 +246,10 @@
             }}
         >
             {#if $allHidden}
-                <Eye size="16" class="mr-1" />
+                <Eye size="16" />
                 {i18n._('menu.unhide')}
             {:else}
-                <EyeOff size="16" class="mr-1" />
+                <EyeOff size="16" />
                 {i18n._('menu.hide')}
             {/if}
             <Shortcut key="H" ctrl={true} />
@@ -265,7 +261,7 @@
                     disabled={!singleSelection}
                     onclick={() => fileActions.addNewTrack(item.getFileId())}
                 >
-                    <Plus size="16" class="mr-1" />
+                    <Plus size="16" />
                     {i18n._('menu.new_track')}
                 </ContextMenu.Item>
                 <ContextMenu.Separator />
@@ -275,7 +271,7 @@
                     onclick={() =>
                         fileActions.addNewSegment(item.getFileId(), item.getTrackIndex())}
                 >
-                    <Plus size="16" class="mr-1" />
+                    <Plus size="16" />
                     {i18n._('menu.new_segment')}
                 </ContextMenu.Item>
                 <ContextMenu.Separator />
@@ -283,30 +279,30 @@
         {/if}
         {#if item.level !== ListLevel.WAYPOINTS}
             <ContextMenu.Item onclick={() => selection.selectAll()}>
-                <FileStack size="16" class="mr-1" />
+                <FileStack size="16" />
                 {i18n._('menu.select_all')}
                 <Shortcut key="A" ctrl={true} />
             </ContextMenu.Item>
         {/if}
         <ContextMenu.Item onclick={() => boundsManager.centerMapOnSelection()}>
-            <Maximize size="16" class="mr-1" />
+            <Maximize size="16" />
             {i18n._('menu.center')}
             <Shortcut key="⏎" ctrl={true} />
         </ContextMenu.Item>
         <ContextMenu.Separator />
         <ContextMenu.Item onclick={fileActions.duplicateSelection}>
-            <Copy size="16" class="mr-1" />
+            <Copy size="16" />
             {i18n._('menu.duplicate')}
-            <Shortcut key="D" ctrl={true} /></ContextMenu.Item
-        >
+            <Shortcut key="D" ctrl={true} />
+        </ContextMenu.Item>
         {#if orientation === 'vertical'}
             <ContextMenu.Item onclick={() => selection.copySelection()}>
-                <ClipboardCopy size="16" class="mr-1" />
+                <ClipboardCopy size="16" />
                 {i18n._('menu.copy')}
                 <Shortcut key="C" ctrl={true} />
             </ContextMenu.Item>
             <ContextMenu.Item onclick={() => selection.cutSelection()}>
-                <Scissors size="16" class="mr-1" />
+                <Scissors size="16" />
                 {i18n._('menu.cut')}
                 <Shortcut key="X" ctrl={true} />
             </ContextMenu.Item>
@@ -316,20 +312,15 @@
                     !allowedPastes[$copied[0].level].includes(item.level)}
                 onclick={pasteSelection}
             >
-                <ClipboardPaste size="16" class="mr-1" />
+                <ClipboardPaste size="16" />
                 {i18n._('menu.paste')}
                 <Shortcut key="V" ctrl={true} />
             </ContextMenu.Item>
         {/if}
         <ContextMenu.Separator />
         <ContextMenu.Item onclick={fileActions.deleteSelection}>
-            {#if item instanceof ListFileItem}
-                <FileX size="16" class="mr-1" />
-                {i18n._('menu.close')}
-            {:else}
-                <Trash2 size="16" class="mr-1" />
-                {i18n._('menu.delete')}
-            {/if}
+            <Trash2 size="16" />
+            {i18n._('menu.delete')}
             <Shortcut key="⌫" ctrl={true} />
         </ContextMenu.Item>
     </ContextMenu.Content>
diff --git a/website/src/lib/components/file-list/file-list.ts b/website/src/lib/components/file-list/file-list.ts
index e6cf4f5b..c9a1a9b5 100644
--- a/website/src/lib/components/file-list/file-list.ts
+++ b/website/src/lib/components/file-list/file-list.ts
@@ -7,24 +7,6 @@ export enum ListLevel {
     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 {
     [x: string]: any;
     level: ListLevel;
diff --git a/website/src/lib/components/file-list/metadata/MetadataDialog.svelte b/website/src/lib/components/file-list/metadata/MetadataDialog.svelte
index 3c1c91b9..0b31d1a9 100644
--- a/website/src/lib/components/file-list/metadata/MetadataDialog.svelte
+++ b/website/src/lib/components/file-list/metadata/MetadataDialog.svelte
@@ -44,7 +44,7 @@
 </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">{i18n._('menu.metadata.name')}</Label>
         <Input bind:value={name} id="name" class="font-semibold h-8" />
diff --git a/website/src/lib/components/file-list/sortable-file-list.ts b/website/src/lib/components/file-list/sortable-file-list.ts
new file mode 100644
index 00000000..302ce163
--- /dev/null
+++ b/website/src/lib/components/file-list/sortable-file-list.ts
@@ -0,0 +1,289 @@
+import { isMac } from '$lib/utils';
+import Sortable, { type Direction } from 'sortablejs';
+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';
+
+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 _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) => this.updateToSelection(e),
+            onDeselect: (e) => this.updateToSelection(e),
+            onStart: () => {
+                dragging.set(sortableLevel);
+            },
+            onEnd: () => {
+                dragging.set(null);
+            },
+            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;
+
+                console.log('onSort', e);
+
+                if (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 item.extend(newFileIds[index]);
+                            });
+                        } else {
+                            toItems = newIndices.map((i) => toItem.extend(i));
+                        }
+                    }
+
+                    moveItems(fromItem, toItem, fromItems, toItems);
+                }
+            },
+        });
+        Object.defineProperty(this._sortable, '_item', {
+            value: item,
+            writable: true,
+        });
+
+        Object.defineProperty(this._sortable, '_waypointRoot', {
+            value: waypointRoot,
+            writable: true,
+        });
+
+        this._unsubscribes.push(selection.subscribe(() => this.updateFromSelection()));
+        this._unsubscribes.push(fileOrder.subscribe(() => this.updateFromFileOrder()));
+    }
+
+    updateToSelection(e: Sortable.SortableEvent) {
+        console.log('updateToSelection', e);
+
+        let changed = this.getChangedIds();
+        if (changed.length > 0) {
+            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;
+            });
+        }
+    }
+
+    updateFromSelection() {
+        console.log('updateFromSelection');
+        let changed = this.getChangedIds();
+        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);
+                }
+            }
+        }
+    }
+
+    updateFromFileOrder() {
+        if (!this._sortable || this._sortableLevel !== ListLevel.FILE) {
+            return;
+        }
+        console.log('updateFromFileOrder');
+
+        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;
+        }
+        console.log('updateToFileOrder');
+
+        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;
+                    }
+                }
+            }
+        });
+
+        // syncFileOrder();
+        // updateFromSelection();
+    }
+
+    destroy() {
+        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);
+    }
+}
diff --git a/website/src/lib/components/file-list/style/StyleDialog.svelte b/website/src/lib/components/file-list/style/StyleDialog.svelte
index ae66fb8e..4783cfca 100644
--- a/website/src/lib/components/file-list/style/StyleDialog.svelte
+++ b/website/src/lib/components/file-list/style/StyleDialog.svelte
@@ -121,7 +121,7 @@
 </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 class="flex flex-row gap-2 items-center justify-between">
             {i18n._('menu.style.color')}
diff --git a/website/src/lib/components/map/gpx-layer/WaypointPopup.svelte b/website/src/lib/components/map/gpx-layer/WaypointPopup.svelte
index 9a05bbda..cc24e730 100644
--- a/website/src/lib/components/map/gpx-layer/WaypointPopup.svelte
+++ b/website/src/lib/components/map/gpx-layer/WaypointPopup.svelte
@@ -32,8 +32,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">
diff --git a/website/src/routes/[[language]]/app/+page.svelte b/website/src/routes/[[language]]/app/+page.svelte
index 9e59b9d4..8b3c2df0 100644
--- a/website/src/routes/[[language]]/app/+page.svelte
+++ b/website/src/routes/[[language]]/app/+page.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     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 FileList from '$lib/components/file-list/FileList.svelte';
     import GPXStatistics from '$lib/components/GPXStatistics.svelte';
     import Map from '$lib/components/map/Map.svelte';
     import Menu from '$lib/components/Menu.svelte';
@@ -106,7 +106,7 @@
             <Toaster richColors />
             {#if !$treeFileView}
                 <div class="h-10 -translate-y-10 w-full pointer-events-none absolute z-30">
-                    <!-- <FileList orientation="horizontal" /> -->
+                    <FileList orientation="horizontal" />
                 </div>
             {/if}
         </div>
@@ -140,7 +140,7 @@
     </div>
     {#if $treeFileView}
         <Resizer orientation="col" bind:after={$rightPanelSize} minAfter={100} maxAfter={400} />
-        <!-- <FileList orientation="vertical" recursive={true} style="width: {$rightPanelSize}px" /> -->
+        <FileList orientation="vertical" recursive={true} style="width: {$rightPanelSize}px" />
     {/if}
 </div>