collapsible layer control categories

website/src/lib/components/Map.svelte

@@ -109,4 +109,8 @@
 	div :global(.mapboxgl-ctrl-geocoder--collapsed .mapboxgl-ctrl-geocoder--input) {
 		@apply hidden;
 	}
+
+	div :global(.mapboxgl-ctrl-top-right) {
+		@apply z-10;
+	}
 </style>

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

@@ -9,6 +9,6 @@
 	export let onValueChange: (id: string, checked: boolean) => void;
 </script>
 
-<fieldset>
+<fieldset class="min-w-52">
 	<LayerTreeNode {name} node={layerTree} {multiple} {onValueChange} />
 </fieldset>

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">
+			<Collapsible.Root bind:open={open[id]} class="ml-1">
-				<Label>{id}</Label>
+				<Collapsible.Trigger class="w-full"
-				<svelte:self node={node[id]} {name} {multiple} {onValueChange} />
+					><Button
-			</div>
+						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>

website/src/lib/components/ui/collapsible/collapsible-content.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+	import { Collapsible as CollapsiblePrimitive } from "bits-ui";
+	import { slide } from "svelte/transition";
+
+	type $$Props = CollapsiblePrimitive.ContentProps;
+
+	export let transition: $$Props["transition"] = slide;
+	export let transitionConfig: $$Props["transitionConfig"] = {
+		duration: 150,
+	};
+</script>
+
+<CollapsiblePrimitive.Content {transition} {transitionConfig} {...$$restProps}>
+	<slot />
+</CollapsiblePrimitive.Content>

website/src/lib/components/ui/collapsible/index.ts

@@ -0,0 +1,15 @@
+import { Collapsible as CollapsiblePrimitive } from "bits-ui";
+import Content from "./collapsible-content.svelte";
+
+const Root = CollapsiblePrimitive.Root;
+const Trigger = CollapsiblePrimitive.Trigger;
+
+export {
+	Root,
+	Content,
+	Trigger,
+	//
+	Root as Collapsible,
+	Content as CollapsibleContent,
+	Trigger as CollapsibleTrigger,
+};