vertical and horizontal file list with same component

website/src/lib/components/App.svelte

@@ -19,13 +19,16 @@
 			<LayerControl />
 			<GPXLayers />
 			<Toaster richColors />
+			<div class="h-10 -translate-y-10 w-full pointer-events-none absolute z-30">
+				<FileList orientation="horizontal" class="pointer-events-auto" />
+			</div>
 		</div>
 		<div class="h-48 flex flex-row gap-2 overflow-hidden">
 			<GPXStatistics />
 			<ElevationProfile />
 		</div>
 	</div>
-	<FileList />
+	<FileList orientation="vertical" recursive={true} class="w-60" />
 </div>
 
 <style lang="postcss">

website/src/lib/components/collapsible-tree/CollapsibleTreeNode.svelte

@@ -28,7 +28,6 @@
 			class="w-full flex flex-row {side === 'right'
 				? 'justify-between'
 				: 'justify-start'} py-0 px-1 h-fit {nohover ? 'hover:bg-background' : ''}"
-			on:click
 		>
 			{#if side === 'left'}
 				{#if $open[id]}

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

@@ -6,13 +6,22 @@
 	import { setContext } from 'svelte';
 	import { writable } from 'svelte/store';
 
+	export let orientation: 'vertical' | 'horizontal';
+	export let recursive = false;
 	export let selected = writable(new Set<string>());
 
+	setContext('orientation', orientation);
+	setContext('recursive', recursive);
 	setContext('selected', selected);
 </script>
 
-<ScrollArea class="w-fit p-1 pr-4 border">
+<ScrollArea
-	<div class="w-60 flex flex-col">
+	class={orientation === 'vertical' ? 'p-1 pr-3 border-l' : 'h-10 px-1'}
+	{orientation}
+	scrollbarXClasses={orientation === 'vertical' ? '' : 'mt-1 h-2'}
+	scrollbarYClasses={orientation === 'vertical' ? '' : ''}
+>
+	<div class="flex {orientation === 'vertical' ? 'flex-col' : 'flex-row'} {$$props.class ?? ''}">
 		<FileListNode node={$fileObservers} id="root" />
 	</div>
 </ScrollArea>

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() {
+	let label =
-		dispatch('click', { id });
+		node instanceof GPXFile
-	}
-</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"
+</script>
-		/>
+
+{#if node instanceof Map}
+	<FileListNodeContent {node} {id} />
+{:else if recursive}
+	<CollapsibleTreeNode {id}>
+		<FileListNodeLabel {id} {label} slot="trigger" />
 		<div slot="content">
 			<FileListNodeContent {node} {id} />
 		</div>
 	</CollapsibleTreeNode>
+{:else}
+	<FileListNodeLabel {id} {label} />
 {/if}

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

@@ -1,6 +1,5 @@
 <script lang="ts">
 	import { GPXFile, Track, Waypoint, type AnyGPXTreeElement, type GPXTreeElement } from 'gpx';
-	import { Button } from '$lib/components/ui/button';
 	import { getContext, onDestroy, onMount } from 'svelte';
 	import Sortable from 'sortablejs/Sortable';
 	import type { GPXFileWithStatistics } from '$lib/db';
@@ -36,6 +35,7 @@
 	};
 	let sortable: Sortable;
 
+	let orientation = getContext<'vertical' | 'horizontal'>('orientation');
 	let selected = getContext<Writable<Set<string>>>('selected');
 
 	function onSelectChange() {
@@ -65,10 +65,6 @@
 		});
 	});
 
-	function handleClick(id: string) {
-		//console.log('handle click for', id);
-	}
-
 	const unsubscribe = selected.subscribe(($selected) => {
 		Object.entries(items).forEach(([id, item]) => {
 			if ($selected.has(id) && !item.classList.contains('sortable-selected')) {
@@ -96,61 +92,43 @@
 	}
 </script>
 
-<div bind:this={container} class="sortable flex flex-col">
+<div
+	bind:this={container}
+	class="sortable {orientation} flex {orientation === 'vertical' ? 'flex-col' : 'flex-row gap-1'}"
+>
 	{#if node instanceof Map}
 		{#each node as [fileId, file]}
 			<div bind:this={items[fileId]}>
-				<FileListNodeStore {file} on:click={(e) => handleClick(e.detail.id)} />
+				<FileListNodeStore {file} />
 			</div>
 		{/each}
 	{:else if node instanceof GPXFile}
 		{#if waypointRoot}
 			{#if node.wpt.length > 0}
 				<div bind:this={items[`${id}-wpt`]}>
-					<FileListNode
+					<FileListNode node={node.wpt} id={`${id}-wpt`} />
-						node={node.wpt}
-						id={`${id}-wpt`}
-						on:click={(e) => handleClick(e.detail.id)}
-					/>
 				</div>
 			{/if}
 		{:else}
 			{#each node.children as child, i}
 				<div bind:this={items[getChildId(i)]}>
-					<FileListNode
+					<FileListNode node={child} id={getChildId(i)} index={i} />
-						node={child}
-						id={getChildId(i)}
-						index={i}
-						on:click={(e) => handleClick(e.detail.id)}
-					/>
 				</div>
 			{/each}
 		{/if}
 	{:else if node instanceof Track}
 		{#each node.children as child, i}
-			<div bind:this={items[getChildId(i)]}>
+			<div bind:this={items[getChildId(i)]} class="ml-1">
 				<div>
-					<Button
-						variant="ghost"
-						class="p-0 px-1 h-fit w-full"
-						on:click={() => handleClick(getChildId(i))}
-					>
 					<FileListNodeLabel id={getChildId(i)} label={`Segment ${i + 1}`} />
-					</Button>
 				</div>
 			</div>
 		{/each}
 	{:else if Array.isArray(node) && node.length > 0 && node[0] instanceof Waypoint}
 		{#each node as wpt, i}
-			<div bind:this={items[getChildId(i)]}>
+			<div bind:this={items[getChildId(i)]} class="ml-1">
 				<div>
-					<Button
-						variant="ghost"
-						class="p-0 px-1 h-fit w-full"
-						on:click={() => handleClick(getChildId(i))}
-					>
 					<FileListNodeLabel id={getChildId(i)} label={wpt.name ?? `Waypoint ${i + 1}`} />
-					</Button>
 				</div>
 			</div>
 		{/each}
@@ -170,7 +148,16 @@
 		@apply leading-none;
 	}
 
-	div :global(.sortable-selected) {
+	.vertical :global(.sortable-selected) {
 		@apply bg-accent;
 	}
+
+	.horizontal :global(button) {
+		@apply bg-accent;
+		@apply hover:bg-background;
+	}
+
+	.horizontal :global(.sortable-selected button) {
+		@apply bg-background;
+	}
 </style>

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

@@ -1,4 +1,12 @@
 <script lang="ts">
+	import { Button } from '$lib/components/ui/button';
+	import * as ContextMenu from '$lib/components/ui/context-menu';
+	import Shortcut from '$lib/components/Shortcut.svelte';
+	import { dbUtils } from '$lib/db';
+	import { Copy, Trash2 } from 'lucide-svelte';
+
+	import { _ } from 'svelte-i18n';
+
 	import { getContext } from 'svelte';
 	import { type Writable } from 'svelte/store';
 
@@ -6,10 +14,20 @@
 	export let label: string | undefined;
 
 	let selected = getContext<Writable<Set<string>>>('selected');
+	let orientation = getContext<'vertical' | 'horizontal'>('orientation');
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <!-- svelte-ignore a11y-no-static-element-interactions -->
+<ContextMenu.Root>
+	<ContextMenu.Trigger class="grow truncate">
+		<Button
+			variant="ghost"
+			class="w-full p-0 px-1 border-none focus-visible:ring-0 focus-visible:ring-offset-0 {orientation ===
+			'vertical'
+				? 'h-fit'
+				: 'h-9 px-1.5 shadow-md'}"
+		>
 			<span
 				class="w-full text-left truncate py-1"
 				on:click={(e) => {
@@ -33,3 +51,19 @@
 			>
 				{label}
 			</span>
+		</Button>
+	</ContextMenu.Trigger>
+	<ContextMenu.Content>
+		<ContextMenu.Item on:click={dbUtils.duplicateSelectedFiles}>
+			<Copy size="16" class="mr-1" />
+			{$_('menu.duplicate')}
+			<Shortcut key="D" ctrl={true} /></ContextMenu.Item
+		>
+		<ContextMenu.Separator />
+		<ContextMenu.Item on:click={dbUtils.deleteSelectedFiles}
+			><Trash2 size="16" class="mr-1" />
+			{$_('menu.delete')}
+			<Shortcut key="⌫" ctrl={true} /></ContextMenu.Item
+		>
+	</ContextMenu.Content>
+</ContextMenu.Root>

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

@@ -3,20 +3,20 @@
 	import FileListNode from '$lib/components/file-list/FileListNode.svelte';
 
 	import type { GPXFileWithStatistics } from '$lib/db';
-	import { createEventDispatcher } from 'svelte';
+	import { getContext } from 'svelte';
 	import type { Readable } from 'svelte/store';
 
 	export let file: Readable<GPXFileWithStatistics | undefined>;
 
-	const dispatch = createEventDispatcher();
+	let recursive = getContext<boolean>('recursive');
-
-	function forwardId() {
-		dispatch('click', { id: $file?.file._data.id });
-	}
 </script>
 
 {#if $file}
+	{#if recursive}
 		<CollapsibleTree side="left" margin={4} defaultState="closed">
-		<FileListNode node={$file.file} id={$file.file._data.id} on:click={forwardId} />
+			<FileListNode node={$file.file} id={$file.file._data.id} />
 		</CollapsibleTree>
+	{:else}
+		<FileListNode node={$file.file} id={$file.file._data.id} />
+	{/if}
 {/if}