From 9a4d06e11de033ec8230b4d220fa8ab663cf4212 Mon Sep 17 00:00:00 2001
From: vcoppe <vianney.coppe@gmail.com>
Date: Thu, 16 May 2024 19:10:26 +0200
Subject: [PATCH] improve vertical file list styling

---
 .../collapsible-tree/CollapsibleTree.svelte   |  4 +++
 .../CollapsibleTreeNode.svelte                | 32 +++++++++++--------
 .../lib/components/file-list/FileList2.svelte |  2 +-
 .../components/file-list/FileListItem.svelte  |  2 +-
 .../components/file-list/FileListNode.svelte  | 29 ++++++++++-------
 .../components/layer-control/LayerTree.svelte |  2 +-
 6 files changed, 43 insertions(+), 28 deletions(-)

diff --git a/website/src/lib/components/collapsible-tree/CollapsibleTree.svelte b/website/src/lib/components/collapsible-tree/CollapsibleTree.svelte
index 50b4c060..50c506e1 100644
--- a/website/src/lib/components/collapsible-tree/CollapsibleTree.svelte
+++ b/website/src/lib/components/collapsible-tree/CollapsibleTree.svelte
@@ -3,11 +3,15 @@
 	import { writable } from 'svelte/store';
 
 	export let side: 'left' | 'right' = 'right';
+	export let margin: number = 1;
+	export let nohover: boolean = false;
 
 	let open = writable<Record<string, boolean>>({});
 
 	setContext('collapsible-tree-state', open);
 	setContext('collapsible-tree-side', side);
+	setContext('collapsible-tree-margin', margin);
+	setContext('collapsible-tree-nohover', nohover);
 </script>
 
 <slot />
diff --git a/website/src/lib/components/collapsible-tree/CollapsibleTreeNode.svelte b/website/src/lib/components/collapsible-tree/CollapsibleTreeNode.svelte
index 07640be0..12527bbd 100644
--- a/website/src/lib/components/collapsible-tree/CollapsibleTreeNode.svelte
+++ b/website/src/lib/components/collapsible-tree/CollapsibleTreeNode.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import * as Collapsible from '$lib/components/ui/collapsible';
 	import { Button } from '$lib/components/ui/button';
-	import { ChevronDown, ChevronUp } from 'lucide-svelte';
+	import { ChevronDown, ChevronLeft, ChevronRight } from 'lucide-svelte';
 	import { getContext } from 'svelte';
 	import type { Writable } from 'svelte/store';
 
@@ -9,6 +9,8 @@
 
 	let open = getContext<Writable<Record<string, boolean>>>('collapsible-tree-state');
 	let side = getContext<'left' | 'right'>('collapsible-tree-side');
+	let margin = getContext<number>('collapsible-tree-margin');
+	let nohover = getContext<boolean>('collapsible-tree-nohover');
 
 	open.update((value) => {
 		if (!value.hasOwnProperty(id)) {
@@ -18,28 +20,32 @@
 	});
 </script>
 
-<Collapsible.Root bind:open={$open[id]}>
+<Collapsible.Root bind:open={$open[id]} class={$$props.class ?? ''}>
 	<Collapsible.Trigger class="w-full">
 		<Button
 			variant="ghost"
 			class="w-full flex flex-row {side === 'right'
 				? 'justify-between'
-				: 'justify-start'} py-0 px-1 h-fit hover:bg-background"
+				: 'justify-start'} py-0 px-1 h-fit {nohover ? 'hover:bg-background' : ''}"
 		>
-			{#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 $open[id]}
+					<ChevronDown size="16" class="shrink-0" />
+				{:else}
+					<ChevronRight size="16" class="shrink-0" />
+				{/if}
+			{/if}
+			<slot name="trigger" />
+			{#if side === 'right'}
+				{#if $open[id]}
+					<ChevronDown size="16" class="shrink-0" />
+				{:else}
+					<ChevronLeft size="16" class="shrink-0" />
+				{/if}
 			{/if}
 		</Button>
 	</Collapsible.Trigger>
-	<Collapsible.Content class="ml-1">
+	<Collapsible.Content class="ml-{margin}">
 		<slot name="content" />
 	</Collapsible.Content>
 </Collapsible.Root>
diff --git a/website/src/lib/components/file-list/FileList2.svelte b/website/src/lib/components/file-list/FileList2.svelte
index b8d4c7c1..a60e986b 100644
--- a/website/src/lib/components/file-list/FileList2.svelte
+++ b/website/src/lib/components/file-list/FileList2.svelte
@@ -6,7 +6,7 @@
 </script>
 
 <ScrollArea class="w-fit p-1 pr-4">
-	<div class="w-60">
+	<div class="w-60 flex flex-col gap-1">
 		{#each Array.from($fileObservers.values()) as file}
 			<FileListItem {file} />
 		{/each}
diff --git a/website/src/lib/components/file-list/FileListItem.svelte b/website/src/lib/components/file-list/FileListItem.svelte
index 1abc7b33..6137fc0f 100644
--- a/website/src/lib/components/file-list/FileListItem.svelte
+++ b/website/src/lib/components/file-list/FileListItem.svelte
@@ -9,7 +9,7 @@
 </script>
 
 {#if $file}
-	<CollapsibleTree side="left">
+	<CollapsibleTree side="left" margin={4}>
 		<FileListNode node={$file.file} id={$file.file._data.id} />
 	</CollapsibleTree>
 {/if}
diff --git a/website/src/lib/components/file-list/FileListNode.svelte b/website/src/lib/components/file-list/FileListNode.svelte
index 02b649bc..047f08d1 100644
--- a/website/src/lib/components/file-list/FileListNode.svelte
+++ b/website/src/lib/components/file-list/FileListNode.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { GPXFile, Track, TrackSegment, type AnyGPXTreeElement, type GPXTreeElement } from 'gpx';
 	import CollapsibleTreeNode from '$lib/components/collapsible-tree/CollapsibleTreeNode.svelte';
+	import { Button } from '$lib/components/ui/button';
 
 	export let node: GPXTreeElement<AnyGPXTreeElement>;
 	export let id: string;
@@ -9,19 +10,23 @@
 
 {#if node instanceof GPXFile}
 	<CollapsibleTreeNode {id}>
-		<span slot="trigger">{node.metadata.name}</span>
+		<span slot="trigger" class="truncate">{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>
+			{#if node.wpt.length > 0}
+				<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}
+							<Button variant="ghost" class="ml-1 flex flex-row justify-start py-0 px-1 h-fit"
+								><span class="truncate">{wpt.name ?? `Waypoint ${i + 1}`}</span></Button
+							>
+						{/each}
+					</div>
+				</CollapsibleTreeNode>
+			{/if}
 		</div>
 	</CollapsibleTreeNode>
 {:else if node instanceof Track}
@@ -34,7 +39,7 @@
 		</div>
 	</CollapsibleTreeNode>
 {:else if node instanceof TrackSegment}
-	<span class="ml-1">
-		{`Segment ${index + 1}`}
-	</span>
+	<Button variant="ghost" class="ml-1 truncate flex flex-row justify-start py-0 px-1 h-fit"
+		>{`Segment ${index + 1}`}</Button
+	>
 {/if}
diff --git a/website/src/lib/components/layer-control/LayerTree.svelte b/website/src/lib/components/layer-control/LayerTree.svelte
index 37e1d5e8..5b575e20 100644
--- a/website/src/lib/components/layer-control/LayerTree.svelte
+++ b/website/src/lib/components/layer-control/LayerTree.svelte
@@ -13,7 +13,7 @@
 
 <form>
 	<fieldset class="min-w-64">
-		<CollapsibleTree>
+		<CollapsibleTree nohover={true}>
 			<LayerTreeNode {name} node={layerTree} bind:selected {multiple} bind:checked />
 		</CollapsibleTree>
 	</fieldset>