From d50fdf20a7dfaebf76435760047af1f1e25685da Mon Sep 17 00:00:00 2001
From: vcoppe <vianney.coppe@gmail.com>
Date: Tue, 21 May 2024 17:47:08 +0200
Subject: [PATCH] vertical and horizontal file list with same component

---
 website/src/lib/components/App.svelte         |  5 +-
 .../CollapsibleTreeNode.svelte                |  1 -
 .../lib/components/file-list/FileList.svelte  | 13 ++-
 .../components/file-list/FileListNode.svelte  | 33 ++++----
 .../file-list/FileListNodeContent.svelte      | 57 +++++--------
 .../file-list/FileListNodeLabel.svelte        | 80 +++++++++++++------
 .../file-list/FileListNodeStore.svelte        | 18 ++---
 7 files changed, 118 insertions(+), 89 deletions(-)

diff --git a/website/src/lib/components/App.svelte b/website/src/lib/components/App.svelte
index 23c5e40c..de791aaf 100644
--- a/website/src/lib/components/App.svelte
+++ b/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">
diff --git a/website/src/lib/components/collapsible-tree/CollapsibleTreeNode.svelte b/website/src/lib/components/collapsible-tree/CollapsibleTreeNode.svelte
index 8eec85fa..f57d0c89 100644
--- a/website/src/lib/components/collapsible-tree/CollapsibleTreeNode.svelte
+++ b/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]}
diff --git a/website/src/lib/components/file-list/FileList.svelte b/website/src/lib/components/file-list/FileList.svelte
index 88478f37..459d4d8a 100644
--- a/website/src/lib/components/file-list/FileList.svelte
+++ b/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">
-	<div class="w-60 flex flex-col">
+<ScrollArea
+	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>
diff --git a/website/src/lib/components/file-list/FileListNode.svelte b/website/src/lib/components/file-list/FileListNode.svelte
index a4daf2c0..0e52debd 100644
--- a/website/src/lib/components/file-list/FileListNode.svelte
+++ b/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}
diff --git a/website/src/lib/components/file-list/FileListNodeContent.svelte b/website/src/lib/components/file-list/FileListNodeContent.svelte
index ed34b194..efa691ea 100644
--- a/website/src/lib/components/file-list/FileListNodeContent.svelte
+++ b/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
-						node={node.wpt}
-						id={`${id}-wpt`}
-						on:click={(e) => handleClick(e.detail.id)}
-					/>
+					<FileListNode node={node.wpt} id={`${id}-wpt`} />
 				</div>
 			{/if}
 		{:else}
 			{#each node.children as child, i}
 				<div bind:this={items[getChildId(i)]}>
-					<FileListNode
-						node={child}
-						id={getChildId(i)}
-						index={i}
-						on:click={(e) => handleClick(e.detail.id)}
-					/>
+					<FileListNode node={child} id={getChildId(i)} index={i} />
 				</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>
+					<FileListNodeLabel id={getChildId(i)} label={`Segment ${i + 1}`} />
 				</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>
+					<FileListNodeLabel id={getChildId(i)} label={wpt.name ?? `Waypoint ${i + 1}`} />
 				</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>
diff --git a/website/src/lib/components/file-list/FileListNodeLabel.svelte b/website/src/lib/components/file-list/FileListNodeLabel.svelte
index 2e1d1d3f..02bbad96 100644
--- a/website/src/lib/components/file-list/FileListNodeLabel.svelte
+++ b/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,30 +14,56 @@
 	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 -->
-<span
-	class="w-full text-left truncate py-1"
-	on:click={(e) => {
-		e.stopPropagation(); // Avoid toggling the collapsible element
-	}}
-	on:contextmenu={(e) => {
-		if (e.ctrlKey) {
-			// Add to selection instead of opening context menu
-			e.preventDefault();
-			e.stopPropagation();
-			selected.update((value) => {
-				if (value.has(id)) {
-					value.delete(id);
-				} else {
-					value.add(id);
-				}
-				return value;
-			});
-		}
-	}}
->
-	{label}
-</span>
+<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) => {
+					e.stopPropagation(); // Avoid toggling the collapsible element
+				}}
+				on:contextmenu={(e) => {
+					if (e.ctrlKey) {
+						// Add to selection instead of opening context menu
+						e.preventDefault();
+						e.stopPropagation();
+						selected.update((value) => {
+							if (value.has(id)) {
+								value.delete(id);
+							} else {
+								value.add(id);
+							}
+							return value;
+						});
+					}
+				}}
+			>
+				{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>
diff --git a/website/src/lib/components/file-list/FileListNodeStore.svelte b/website/src/lib/components/file-list/FileListNodeStore.svelte
index 9785bc83..a8586393 100644
--- a/website/src/lib/components/file-list/FileListNodeStore.svelte
+++ b/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();
-
-	function forwardId() {
-		dispatch('click', { id: $file?.file._data.id });
-	}
+	let recursive = getContext<boolean>('recursive');
 </script>
 
 {#if $file}
-	<CollapsibleTree side="left" margin={4} defaultState="closed">
-		<FileListNode node={$file.file} id={$file.file._data.id} on:click={forwardId} />
-	</CollapsibleTree>
+	{#if recursive}
+		<CollapsibleTree side="left" margin={4} defaultState="closed">
+			<FileListNode node={$file.file} id={$file.file._data.id} />
+		</CollapsibleTree>
+	{:else}
+		<FileListNode node={$file.file} id={$file.file._data.id} />
+	{/if}
 {/if}