collapsible layer control categories

website/src/lib/components/layer-control/LayerTreeNode.svelte

@@ -1,6 +1,11 @@
 <script lang="ts">
 	import { Label } from '$lib/components/ui/label';
 	import { Checkbox } from '$lib/components/ui/checkbox';
+	import { Button } from '$lib/components/ui/button';
+	import * as Collapsible from '$lib/components/ui/collapsible';
+
+	import Fa from 'svelte-fa';
+	import { faChevronDown, faChevronLeft } from '@fortawesome/free-solid-svg-icons';
 
 	import { type LayerTreeType } from '$lib/assets/layers';
 
@@ -11,12 +16,18 @@
 	export let onValueChange: (id: string, checked: boolean) => void;
 
 	let checked: { [key: string]: boolean } = {};
-
 	if (multiple && Array.isArray(node)) {
 		node.forEach((id) => {
 			checked[id] = false;
 		});
 	}
+
+	let open: { [key: string]: boolean } = {};
+	if (!Array.isArray(node)) {
+		Object.keys(node).forEach((id) => {
+			open[id] = true;
+		});
+	}
 </script>
 
 <div class="flex flex-col gap-1">
@@ -50,10 +61,24 @@
 		{/each}
 	{:else}
 		{#each Object.keys(node) as id}
-			<div class="ml-2 flex flex-col gap-1">
-				<Label>{id}</Label>
-				<svelte:self node={node[id]} {name} {multiple} {onValueChange} />
-			</div>
+			<Collapsible.Root bind:open={open[id]} class="ml-1">
+				<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"
+					>
+						<span class="mr-2">{id}</span>
+						{#if open[id]}
+							<Fa icon={faChevronDown} size="xs" />
+						{:else}
+							<Fa icon={faChevronLeft} size="xs" />
+						{/if}
+					</Button></Collapsible.Trigger
+				>
+				<Collapsible.Content class="mt-1 ml-1">
+					<svelte:self node={node[id]} {name} {multiple} {onValueChange} />
+				</Collapsible.Content>
+			</Collapsible.Root>
 		{/each}
 	{/if}
 </div>