improve vertical file list styling

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}