use ids in each blocks for sortable

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

@@ -1,12 +1,24 @@
 <script lang="ts">
-	import { GPXFile, Track, Waypoint, type AnyGPXTreeElement, type GPXTreeElement } from 'gpx';
+	import {
+		GPXFile,
+		Track,
+		TrackSegment,
+		Waypoint,
+		type AnyGPXTreeElement,
+		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 FileListNodeContent from './FileListNodeContent.svelte';
 	import FileListNodeLabel from './FileListNodeLabel.svelte';
 	import { getContext, onDestroy } from 'svelte';
-	import { type ListItem, type ListTrackItem } from './FileList';
+	import {
+		ListTrackSegmentItem,
+		ListWaypointItem,
+		type ListItem,
+		type ListTrackItem
+	} from './FileList';
 	import { _ } from 'svelte-i18n';
 	import { selection } from './Selection';
 
@@ -25,9 +37,13 @@
 			? node.metadata.name
 			: node instanceof Track
 				? node.name ?? `${$_('gpx.track')} ${(item as ListTrackItem).trackIndex + 1}`
-				: Array.isArray(node) && node.length > 0 && node[0] instanceof Waypoint
-					? $_('gpx.waypoints')
-					: '';
+				: node instanceof TrackSegment
+					? `${$_('gpx.segment')} ${(item as ListTrackSegmentItem).segmentIndex + 1}`
+					: node instanceof Waypoint
+						? node.name ?? `${$_('gpx.waypoint')} ${(item as ListWaypointItem).waypointIndex + 1}`
+						: Array.isArray(node) && node.length > 0 && node[0] instanceof Waypoint
+							? $_('gpx.waypoints')
+							: '';
 
 	const { verticalFileView } = settings;
 	const unsubscribe = selection.subscribe(($selection) => {
@@ -43,6 +59,10 @@
 
 {#if node instanceof Map}
 	<FileListNodeContent {node} {item} />
+{:else if node instanceof TrackSegment}
+	<FileListNodeLabel {item} {label} />
+{:else if node instanceof Waypoint}
+	<FileListNodeLabel {item} {label} />
 {:else if recursive}
 	<CollapsibleTreeNode id={item.getId()} bind:this={collapsible}>
 		<FileListNodeLabel {item} {label} slot="trigger" />

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

@@ -6,7 +6,6 @@
 	import { get, type Readable } from 'svelte/store';
 	import FileListNodeStore from './FileListNodeStore.svelte';
 	import FileListNode from './FileListNode.svelte';
-	import FileListNodeLabel from './FileListNodeLabel.svelte';
 	import { ListLevel, moveItems, type ListItem } from './FileList';
 	import { selection } from './Selection';
 	import { _ } from 'svelte-i18n';
@@ -237,7 +236,7 @@
 	class="sortable {orientation} flex {orientation === 'vertical' ? 'flex-col' : 'flex-row gap-1'}"
 >
 	{#if node instanceof Map}
-		{#each node as [fileId, file]}
+		{#each node as [fileId, file] (fileId)}
 			<div bind:this={elements[fileId]} data-id={fileId}>
 				<FileListNodeStore {file} />
 			</div>
@@ -250,25 +249,22 @@
 				</div>
 			{/if}
 		{:else}
-			{#each node.children as child, i}
+			{#each node.children as child, i (child)}
 				<div bind:this={elements[i]} data-id={i}>
 					<FileListNode node={child} item={item.extend(i)} />
 				</div>
 			{/each}
 		{/if}
 	{:else if node instanceof Track}
-		{#each node.children as child, i}
+		{#each node.children as child, i (child)}
 			<div bind:this={elements[i]} data-id={i} class="ml-1">
-				<FileListNodeLabel item={item.extend(i)} label={`${$_('gpx.segment')} ${i + 1}`} />
+				<FileListNode node={child} item={item.extend(i)} />
 			</div>
 		{/each}
 	{:else if Array.isArray(node) && node.length > 0 && node[0] instanceof Waypoint}
-		{#each node as wpt, i}
+		{#each node as wpt, i (wpt)}
 			<div bind:this={elements[i]} data-id={i} class="ml-1">
-				<FileListNodeLabel
-					item={item.extend(i)}
-					label={wpt.name ?? `${$_('gpx.waypoint')} ${i + 1}`}
-				/>
+				<FileListNode node={wpt} item={item.extend(i)} />
 			</div>
 		{/each}
 	{/if}

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

@@ -36,9 +36,6 @@
 		>
 			<span
 				class="w-full text-left truncate py-1 flex flex-row items-center"
-				on:click={(e) => {
-					e.stopPropagation(); // Avoid toggling the collapsible element
-				}}
 				on:contextmenu={(e) => {
 					if (e.ctrlKey) {
 						// Add to selection instead of opening context menu

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

@@ -14,7 +14,7 @@
 
 {#if $file}
 	{#if recursive}
-		<CollapsibleTree side="left" margin={4} defaultState="closed">
+		<CollapsibleTree side="left" margin={4} defaultState="closed" slotInsideTrigger={false}>
 			<FileListNode node={$file.file} item={new ListFileItem($file.file._data.id)} />
 		</CollapsibleTree>
 	{:else}