progress

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

@@ -1,7 +1,6 @@
 <script lang="ts">
 	import CustomControl from '$lib/components/custom-control/CustomControl.svelte';
 	import LayerTree from './LayerTree.svelte';
-	import LayerControlSettings from './LayerControlSettings.svelte';
 
 	import { Separator } from '$lib/components/ui/separator';
 	import { ScrollArea } from '$lib/components/ui/scroll-area/index.js';
@@ -121,10 +120,6 @@
 						/>
 					{/if}
 				</div>
-				<Separator class="w-full" />
-				<div class="p-2">
-					<LayerControlSettings />
-				</div>
 			</div>
 		</ScrollArea>
 	</div>

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

@@ -1,29 +1,23 @@
 <script lang="ts">
 	import LayerTree from './LayerTree.svelte';
 
-	import { Button } from '$lib/components/ui/button';
 	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 { Settings } from 'lucide-svelte';
-
 	import { basemapTree, overlayTree } from '$lib/assets/layers';
 	import { settings } from '$lib/db';
 
 	import { _ } from 'svelte-i18n';
 
 	const { selectedBasemapTree, selectedOverlayTree } = settings;
+
+	export let open: boolean;
 </script>
 
-<Sheet.Root>
-	<Sheet.Trigger class="w-full">
-		<Button variant="ghost" class="w-full px-1 py-1.5">
-			<Settings size="18" class="mr-2" />
-			{$_('layers.manage')}
-		</Button>
-	</Sheet.Trigger>
+<Sheet.Root bind:open>
+	<Sheet.Trigger class="hidden" />
 	<Sheet.Content>
 		<Sheet.Header class="h-full">
 			<Sheet.Title>{$_('layers.settings')}</Sheet.Title>

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

@@ -12,7 +12,7 @@
 </script>
 
 <form>
-	<fieldset class="min-w-64">
+	<fieldset class="min-w-64 mb-1">
 		<CollapsibleTree nohover={true}>
 			<LayerTreeNode {name} node={layerTree} bind:selected {multiple} bind:checked />
 		</CollapsibleTree>

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

@@ -26,11 +26,11 @@
 	});
 </script>
 
-<div class="flex flex-col gap-0.5">
+<div class="flex flex-col gap-[3px]">
 	{#each Object.keys(node) as id}
 		{#if typeof node[id] == 'boolean'}
 			{#if node[id]}
-				<div class="flex flex-row items-center gap-2 first:mt-1">
+				<div class="flex flex-row items-center gap-2 first:mt-0.5 h-4">
 					{#if multiple}
 						<Checkbox
 							id="{name}-{id}"