start of vertical view

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">