vertical and horizontal file list with same component

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

@@ -4,8 +4,8 @@
 	import type { GPXFileWithStatistics } from '$lib/db';
 	import type { Readable } from 'svelte/store';
 	import FileListNodeContent from './FileListNodeContent.svelte';
-	import { createEventDispatcher } from 'svelte';
 	import FileListNodeLabel from './FileListNodeLabel.svelte';
+	import { getContext } from 'svelte';
 
 	export let node:
 		| Map<string, Readable<GPXFileWithStatistics | undefined>>
@@ -14,30 +14,27 @@
 	export let id: string;
 	export let index: number = 0;
 
-	const dispatch = createEventDispatcher();
+	let recursive = getContext<boolean>('recursive');
 
-	function forwardId() {
-		dispatch('click', { id });
-	}
+	let label =
+		node instanceof GPXFile
+			? node.metadata.name
+			: node instanceof Track
+				? node.name ?? `Track ${index + 1}`
+				: Array.isArray(node) && node.length > 0 && node[0] instanceof Waypoint
+					? 'Waypoints'
+					: '';
 </script>
 
 {#if node instanceof Map}
 	<FileListNodeContent {node} {id} />
-{:else}
-	<CollapsibleTreeNode {id} on:click={forwardId}>
-		<FileListNodeLabel
-			{id}
-			label={node instanceof GPXFile
-				? node.metadata.name
-				: node instanceof Track
-					? node.name ?? `Track ${index + 1}`
-					: Array.isArray(node) && node.length > 0 && node[0] instanceof Waypoint
-						? 'Waypoints'
-						: ''}
-			slot="trigger"
-		/>
+{:else if recursive}
+	<CollapsibleTreeNode {id}>
+		<FileListNodeLabel {id} {label} slot="trigger" />
 		<div slot="content">
 			<FileListNodeContent {node} {id} />
 		</div>
 	</CollapsibleTreeNode>
+{:else}
+	<FileListNodeLabel {id} {label} />
 {/if}