start of vertical view

website/src/lib/components/App.svelte

@@ -8,22 +8,26 @@
 	import Toolbar from '$lib/components/toolbar/Toolbar.svelte';
 	import LayerControl from '$lib/components/layer-control/LayerControl.svelte';
 	import { Toaster } from '$lib/components/ui/sonner';
+	import FileList2 from './file-list/FileList2.svelte';
 </script>
 
-<div class="flex flex-col w-screen h-screen">
+<div class="flex flex-row w-screen h-screen">
-	<div class="grow relative">
+	<div class="flex flex-col grow h-full min-w-0">
-		<Menu />
+		<div class="grow relative">
-		<Toolbar />
+			<Menu />
-		<Map class="h-full" />
+			<Toolbar />
-		<LayerControl />
+			<Map class="h-full" />
-		<GPXLayers />
+			<LayerControl />
-		<FileList />
+			<GPXLayers />
-		<Toaster richColors />
+			<FileList />
-	</div>
+			<Toaster richColors />
-	<div class="h-48 flex flex-row gap-2 overflow-hidden">
+		</div>
-		<GPXStatistics />
+		<div class="h-48 flex flex-row gap-2 overflow-hidden">
-		<ElevationProfile />
+			<GPXStatistics />
+			<ElevationProfile />
+		</div>
 	</div>
+	<FileList2 />
 </div>
 
 <style lang="postcss">

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

@@ -2,9 +2,12 @@
 	import { setContext } from 'svelte';
 	import { writable } from 'svelte/store';
 
+	export let side: 'left' | 'right' = 'right';
+
 	let open = writable<Record<string, boolean>>({});
 
 	setContext('collapsible-tree-state', open);
+	setContext('collapsible-tree-side', side);
 </script>
 
 <slot />

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

@@ -8,6 +8,7 @@
 	export let id: string;
 
 	let open = getContext<Writable<Record<string, boolean>>>('collapsible-tree-state');
+	let side = getContext<'left' | 'right'>('collapsible-tree-side');
 
 	open.update((value) => {
 		if (!value.hasOwnProperty(id)) {
@@ -21,14 +22,21 @@
 	<Collapsible.Trigger class="w-full">
 		<Button
 			variant="ghost"
-			class="w-full flex flex-row justify-between py-0 px-1 h-fit hover:bg-background"
+			class="w-full flex flex-row {side === 'right'
+				? 'justify-between'
+				: 'justify-start'} py-0 px-1 h-fit hover:bg-background"
 		>
-			<slot name="trigger" />
+			{#if side === 'right'}
+				<slot name="trigger" />
+			{/if}
 			{#if $open[id]}
 				<ChevronUp size="16" />
 			{:else}
 				<ChevronDown size="16" />
 			{/if}
+			{#if side === 'left'}
+				<slot name="trigger" />
+			{/if}
 		</Button>
 	</Collapsible.Trigger>
 	<Collapsible.Content class="ml-1">

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

@@ -0,0 +1,14 @@
+<script lang="ts">
+	import { ScrollArea } from '$lib/components/ui/scroll-area/index';
+	import FileListItem from '$lib/components/file-list/FileListItem.svelte';
+
+	import { fileObservers } from '$lib/db';
+</script>
+
+<ScrollArea class="w-fit p-1 pr-4">
+	<div class="w-60">
+		{#each Array.from($fileObservers.values()) as file}
+			<FileListItem {file} />
+		{/each}
+	</div>
+</ScrollArea>

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

@@ -0,0 +1,15 @@
+<script lang="ts">
+	import CollapsibleTree from '$lib/components/collapsible-tree/CollapsibleTree.svelte';
+	import FileListNode from '$lib/components/file-list/FileListNode.svelte';
+
+	import type { GPXFileWithStatistics } from '$lib/db';
+	import type { Readable } from 'svelte/store';
+
+	export let file: Readable<GPXFileWithStatistics | undefined>;
+</script>
+
+{#if $file}
+	<CollapsibleTree side="left">
+		<FileListNode node={$file.file} id={$file.file._data.id} />
+	</CollapsibleTree>
+{/if}

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

@@ -0,0 +1,40 @@
+<script lang="ts">
+	import { GPXFile, Track, TrackSegment, type AnyGPXTreeElement, type GPXTreeElement } from 'gpx';
+	import CollapsibleTreeNode from '$lib/components/collapsible-tree/CollapsibleTreeNode.svelte';
+
+	export let node: GPXTreeElement<AnyGPXTreeElement>;
+	export let id: string;
+	export let index: number = 0;
+</script>
+
+{#if node instanceof GPXFile}
+	<CollapsibleTreeNode {id}>
+		<span slot="trigger">{node.metadata.name}</span>
+		<div slot="content" class="flex flex-col gap-0.5">
+			{#each node.children as child, i}
+				<svelte:self node={child} id={`${id}-track-${i}`} index={i} />
+			{/each}
+			<CollapsibleTreeNode id={`${id}-wpt`}>
+				<span slot="trigger">Waypoints</span>
+				<div slot="content" class="flex flex-col gap-0.5">
+					{#each node.wpt as wpt, i}
+						<span class="ml-1 truncate">{wpt.name ?? `Waypoint ${i + 1}`}</span>
+					{/each}
+				</div>
+			</CollapsibleTreeNode>
+		</div>
+	</CollapsibleTreeNode>
+{:else if node instanceof Track}
+	<CollapsibleTreeNode {id}>
+		<span slot="trigger" class="truncate">{node.name ?? `Track ${index + 1}`}</span>
+		<div slot="content" class="flex flex-col gap-0.5">
+			{#each node.children as child, i}
+				<svelte:self node={child} id={`${id}-segment-${i}`} index={i} />
+			{/each}
+		</div>
+	</CollapsibleTreeNode>
+{:else if node instanceof TrackSegment}
+	<span class="ml-1">
+		{`Segment ${index + 1}`}
+	</span>
+{/if}