uniformize layer control input styling

website/package-lock.json

@@ -13,7 +13,7 @@
                 "@mapbox/mapbox-gl-geocoder": "^5.0.2",
                 "@types/mapbox__mapbox-gl-geocoder": "^5.0.0",
                 "@types/mapbox-gl": "^3.1.0",
-                "bits-ui": "^0.21.2",
+                "bits-ui": "^0.21.3",
                 "clsx": "^2.1.0",
                 "gpx": "file:../gpx",
                 "lucide-svelte": "^0.365.0",
@@ -1830,9 +1830,9 @@
             }
         },
         "node_modules/bits-ui": {
-            "version": "0.21.2",
+            "version": "0.21.3",
-            "resolved": "https://registry.npmjs.org/bits-ui/-/bits-ui-0.21.2.tgz",
+            "resolved": "https://registry.npmjs.org/bits-ui/-/bits-ui-0.21.3.tgz",
-            "integrity": "sha512-tDOvNdJ+uC/VWlzCZ6Pwv3enQJBw1D7leUfdIqg8WvqcDHnvn3fk4V3Y9VmpMOPnl+xTaiKxSiVpO/Dh8wD6jA==",
+            "integrity": "sha512-VMQVXwYIjYmDoudIRm2ZlS2guy97lUQk73DwSfTnaS0dhldImbDFMATNxjLSLsTDj8FqJ8Dv78wSctdxcloIbQ==",
             "dependencies": {
                 "@internationalized/date": "^3.5.1",
                 "@melt-ui/svelte": "0.76.2",

website/package.json

@@ -42,7 +42,7 @@
         "@mapbox/mapbox-gl-geocoder": "^5.0.2",
         "@types/mapbox__mapbox-gl-geocoder": "^5.0.0",
         "@types/mapbox-gl": "^3.1.0",
-        "bits-ui": "^0.21.2",
+        "bits-ui": "^0.21.3",
         "clsx": "^2.1.0",
         "gpx": "file:../gpx",
         "lucide-svelte": "^0.365.0",

website/src/lib/components/Menu.svelte

@@ -88,7 +88,7 @@
 				</Menubar.Content>
 			</Menubar.Menu>
 		</Menubar.Root>
-		<div class="h-fit flex flex-row items-center ml-1 space-x-1">
+		<div class="h-fit flex flex-row items-center ml-1 gap-1">
 			<Button variant="ghost" href="/about" target="_blank" class="cursor-default h-fit rounded-sm"
 				>About</Button
 			>

website/src/lib/components/Toolbar.svelte

@@ -19,7 +19,7 @@
 </script>
 
 <div class="absolute top-0 bottom-0 left-0 z-10 flex flex-col justify-center pointer-events-none">
-	<div class="flex flex-col p-1 space-y-1 bg-background rounded-md pointer-events-auto shadow-md">
+	<div class="flex flex-col p-1 gap-1 bg-background rounded-md pointer-events-auto shadow-md">
 		<ToolbarItem>
 			<Fa slot="icon" icon={faPencil} />
 			<span slot="tooltip">Edit the track points</span>

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

@@ -4,6 +4,9 @@
 	import CustomControl from '$lib/components/custom-control/CustomControl.svelte';
 	import LayerTree from './LayerTree.svelte';
 
+	import Label from '$lib/components/ui/label/label.svelte';
+	import { Separator } from '$lib/components/ui/separator';
+
 	import Fa from 'svelte-fa';
 	import { faLayerGroup } from '@fortawesome/free-solid-svg-icons';
 
@@ -27,43 +30,50 @@
 	<div class="flex flex-row justify-center items-center w-[29px] h-[29px] group-hover:hidden">
 		<Fa icon={faLayerGroup} size="1.4x" />
 	</div>
-	<div class="hidden group-hover:block p-2 space-y-2">
+	<div class="hidden group-hover:block">
-		<LayerTree
+		<div class="p-2">
-			layerTree={basemapTree}
+			<Label>Basemaps</Label>
-			name="basemaps"
+			<LayerTree
-			onValueChange={(id) => {
+				layerTree={basemapTree}
-				if (map) {
+				name="basemaps"
-					map.setStyle(basemaps[id]);
+				onValueChange={(id) => {
-				}
+					if (map) {
-			}}
+						map.setStyle(basemaps[id]);
-		/>
-		<LayerTree
-			layerTree={overlayTree}
-			name="overlays"
-			multiple={true}
-			onValueChange={(id, checked) => {
-				if (map) {
-					if (checked) {
-						if (!map.getSource(id)) {
-							map.addSource(id, overlays[id]);
-						}
-						map.addLayer({
-							id,
-							type: overlays[id].type === 'raster' ? 'raster' : 'line',
-							source: id,
-							paint: {
-								...(id in opacities
-									? overlays[id].type === 'raster'
-										? { 'raster-opacity': opacities[id] }
-										: { 'line-opacity': opacities[id] }
-									: {})
-							}
-						});
-					} else {
-						map.removeLayer(id);
 					}
-				}
+				}}
-			}}
+			/>
-		/>
+		</div>
+		<Separator class="w-full" />
+		<div class="p-2">
+			<Label>Overlays</Label>
+			<LayerTree
+				layerTree={overlayTree}
+				name="overlays"
+				multiple={true}
+				onValueChange={(id, checked) => {
+					if (map) {
+						if (checked) {
+							if (!map.getSource(id)) {
+								map.addSource(id, overlays[id]);
+							}
+							map.addLayer({
+								id,
+								type: overlays[id].type === 'raster' ? 'raster' : 'line',
+								source: id,
+								paint: {
+									...(id in opacities
+										? overlays[id].type === 'raster'
+											? { 'raster-opacity': opacities[id] }
+											: { 'line-opacity': opacities[id] }
+										: {})
+								}
+							});
+						} else {
+							map.removeLayer(id);
+						}
+					}
+				}}
+			/>
+		</div>
 	</div>
 </CustomControl>

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

@@ -19,10 +19,10 @@
 	}
 </script>
 
-<div class="flex flex-col">
+<div class="flex flex-col gap-1">
 	{#if Array.isArray(node)}
 		{#each node as id}
-			<div>
+			<div class="flex flex-row items-center gap-2">
 				{#if multiple}
 					<Checkbox
 						{id}
@@ -32,6 +32,7 @@
 						on:click={() => {
 							onValueChange(id, !checked[id]);
 						}}
+						class="scale-90"
 					/>
 				{:else}
 					<input
@@ -49,10 +50,24 @@
 		{/each}
 	{:else}
 		{#each Object.keys(node) as id}
-			<div class="ml-2">
+			<div class="ml-2 flex flex-col gap-1">
 				<Label>{id}</Label>
 				<svelte:self node={node[id]} {name} {multiple} {onValueChange} />
 			</div>
 		{/each}
 	{/if}
 </div>
+
+<style lang="postcss">
+	div :global(input[type='radio']) {
+		@apply appearance-none;
+		@apply w-4 h-4;
+		@apply border-[1.5px] border-primary;
+		@apply rounded-full;
+		@apply ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2;
+		@apply cursor-pointer;
+		@apply checked:bg-primary;
+		@apply checked:bg-clip-content;
+		@apply checked:p-0.5;
+	}
+</style>

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

@@ -0,0 +1,7 @@
+import Root from "./separator.svelte";
+
+export {
+	Root,
+	//
+	Root as Separator,
+};

website/src/lib/components/ui/separator/separator.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+	import { Separator as SeparatorPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = SeparatorPrimitive.Props;
+
+	let className: $$Props["class"] = undefined;
+	export let orientation: $$Props["orientation"] = "horizontal";
+	export let decorative: $$Props["decorative"] = undefined;
+	export { className as class };
+</script>
+
+<SeparatorPrimitive.Root
+	class={cn(
+		"shrink-0 bg-border",
+		orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+		className
+	)}
+	{orientation}
+	{decorative}
+	{...$$restProps}
+/>