layer settings in accordion

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

@@ -1,12 +1,11 @@
 <script lang="ts">
-	import CustomControl from '$lib/components/custom-control/CustomControl.svelte';
 	import LayerTree from './LayerTree.svelte';
 
 	import { Button } from '$lib/components/ui/button';
-	import Label from '$lib/components/ui/label/label.svelte';
 	import { Separator } from '$lib/components/ui/separator';
 	import { ScrollArea } from '$lib/components/ui/scroll-area/index.js';
 	import * as Sheet from '$lib/components/ui/sheet';
+	import * as Accordion from '$lib/components/ui/accordion';
 
 	import Fa from 'svelte-fa';
 	import { faGear } from '@fortawesome/free-solid-svg-icons';
@@ -34,35 +33,50 @@
 			<Sheet.Description>
 				Select the map layers you want to show in the interface and adjust their settings.
 			</Sheet.Description>
-			<ScrollArea class="pr-4">
-				<div>
-					<LayerTree
-						layerTree={basemapTree}
-						label="Basemaps"
-						name="basemapSettings"
-						multiple={true}
-						onValueChange={(id) => {
-							// TODO
-						}}
-					/>
-				</div>
-			</ScrollArea>
-			<Separator class="my-2" />
-			<ScrollArea class="pr-4">
-				<div>
-					<LayerTree
-						layerTree={overlayTree}
-						label="Overlays"
-						name="overlaySettings"
-						multiple={true}
-						onValueChange={(id, checked) => {
-							// TODO
-						}}
-					/>
-				</div>
-			</ScrollArea>
-			<Separator class="my-2" />
-			<Button variant="secondary" class="w-full px-1 py-1.5">Add custom layer</Button>
+			<Accordion.Root class="flex flex-col overflow-hidden">
+				<Accordion.Item value="item-1" class="flex flex-col overflow-hidden">
+					<Accordion.Trigger>Layer selection</Accordion.Trigger>
+					<Accordion.Content class="grow flex flex-col">
+						<ScrollArea class="pr-4">
+							<LayerTree
+								layerTree={basemapTree}
+								label="Basemaps"
+								name="basemapSettings"
+								multiple={true}
+								onValueChange={(id) => {
+									// TODO
+								}}
+							/>
+						</ScrollArea>
+						<Separator class="my-2" />
+						<ScrollArea class="pr-4">
+							<LayerTree
+								layerTree={overlayTree}
+								label="Overlays"
+								name="overlaySettings"
+								multiple={true}
+								onValueChange={(id, checked) => {
+									// TODO
+								}}
+							/>
+						</ScrollArea>
+					</Accordion.Content>
+				</Accordion.Item>
+				<Accordion.Item value="item-2">
+					<Accordion.Trigger>Custom layer</Accordion.Trigger>
+					<Accordion.Content>
+						<ScrollArea>TODO custom layer form</ScrollArea>
+					</Accordion.Content>
+				</Accordion.Item>
+				<Accordion.Item value="item-3">
+					<Accordion.Trigger>Heatmap settings</Accordion.Trigger>
+					<Accordion.Content></Accordion.Content>
+				</Accordion.Item>
+				<Accordion.Item value="item-4">
+					<Accordion.Trigger>POIs settings</Accordion.Trigger>
+					<Accordion.Content></Accordion.Content>
+				</Accordion.Item>
+			</Accordion.Root>
 		</Sheet.Header>
 	</Sheet.Content>
 </Sheet.Root>

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

@@ -5,7 +5,7 @@
 	import * as Collapsible from '$lib/components/ui/collapsible';
 
 	import Fa from 'svelte-fa';
-	import { faChevronDown, faChevronLeft } from '@fortawesome/free-solid-svg-icons';
+	import { faChevronDown, faChevronUp } from '@fortawesome/free-solid-svg-icons';
 
 	import { type LayerTreeType } from '$lib/assets/layers';
 
@@ -71,9 +71,9 @@
 					>
 						<span class="mr-2">{id}</span>
 						{#if open[id]}
-							<Fa icon={faChevronDown} size="xs" />
+							<Fa icon={faChevronUp} size="xs" />
 						{:else}
-							<Fa icon={faChevronLeft} size="xs" />
+							<Fa icon={faChevronDown} size="xs" />
 						{/if}
 					</Button></Collapsible.Trigger
 				>

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

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { Accordion as AccordionPrimitive } from 'bits-ui';
+	import { slide } from 'svelte/transition';
+	import { cn } from '$lib/utils.js';
+
+	type $$Props = AccordionPrimitive.ContentProps;
+
+	let className: $$Props['class'] = undefined;
+	export let transition: $$Props['transition'] = slide;
+	export let transitionConfig: $$Props['transitionConfig'] = {
+		duration: 200
+	};
+	export { className as class };
+</script>
+
+<AccordionPrimitive.Content
+	class={cn('overflow-hidden text-sm transition-all pb-4', className)}
+	{transition}
+	{transitionConfig}
+	{...$$restProps}
+>
+	<slot />
+</AccordionPrimitive.Content>

website/src/lib/components/ui/accordion/accordion-item.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+	import { Accordion as AccordionPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
+
+	type $$Props = AccordionPrimitive.ItemProps;
+
+	let className: $$Props['class'] = undefined;
+	export let value: $$Props['value'];
+	export { className as class };
+</script>
+
+<AccordionPrimitive.Item {value} class={cn('border-b', className)} {...$$restProps}>
+	<slot />
+</AccordionPrimitive.Item>

website/src/lib/components/ui/accordion/accordion-trigger.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+	import { Accordion as AccordionPrimitive } from "bits-ui";
+	import ChevronDown from "lucide-svelte/icons/chevron-down";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = AccordionPrimitive.TriggerProps;
+	type $$Events = AccordionPrimitive.TriggerEvents;
+
+	let className: $$Props["class"] = undefined;
+	export let level: AccordionPrimitive.HeaderProps["level"] = 3;
+	export { className as class };
+</script>
+
+<AccordionPrimitive.Header {level} class="flex">
+	<AccordionPrimitive.Trigger
+		class={cn(
+			"flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
+			className
+		)}
+		{...$$restProps}
+		on:click
+	>
+		<slot />
+		<ChevronDown class="h-4 w-4 transition-transform duration-200" />
+	</AccordionPrimitive.Trigger>
+</AccordionPrimitive.Header>

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

@@ -0,0 +1,17 @@
+import { Accordion as AccordionPrimitive } from "bits-ui";
+import Content from "./accordion-content.svelte";
+import Item from "./accordion-item.svelte";
+import Trigger from "./accordion-trigger.svelte";
+const Root = AccordionPrimitive.Root;
+
+export {
+	Root,
+	Content,
+	Item,
+	Trigger,
+	//
+	Root as Accordion,
+	Content as AccordionContent,
+	Item as AccordionItem,
+	Trigger as AccordionTrigger,
+};

website/src/lib/components/ui/sheet/sheet-header.svelte

@@ -1,13 +1,13 @@
 <script lang="ts">
-	import type { HTMLAttributes } from "svelte/elements";
-	import { cn } from "$lib/utils.js";
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn } from '$lib/utils.js';
 
 	type $$Props = HTMLAttributes<HTMLDivElement>;
 
-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
 	export { className as class };
 </script>
 
-<div class={cn("flex flex-col space-y-2 text-center sm:text-left", className)} {...$$restProps}>
+<div class={cn('flex flex-col space-y-2 sm:text-left', className)} {...$$restProps}>
 	<slot />
 </div>