prettier config + format all, closes #175

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

@@ -1,86 +1,98 @@
 <script lang="ts">
-	import { Label } from '$lib/components/ui/label';
-	import { Checkbox } from '$lib/components/ui/checkbox';
-	import CollapsibleTreeNode from '../collapsible-tree/CollapsibleTreeNode.svelte';
+    import { Label } from '$lib/components/ui/label';
+    import { Checkbox } from '$lib/components/ui/checkbox';
+    import CollapsibleTreeNode from '../collapsible-tree/CollapsibleTreeNode.svelte';
 
-	import { type LayerTreeType } from '$lib/assets/layers';
-	import { anySelectedLayer } from './utils';
+    import { type LayerTreeType } from '$lib/assets/layers';
+    import { anySelectedLayer } from './utils';
 
-	import { _ } from 'svelte-i18n';
-	import { settings } from '$lib/db';
-	import { beforeUpdate } from 'svelte';
+    import { _ } from 'svelte-i18n';
+    import { settings } from '$lib/db';
+    import { beforeUpdate } from 'svelte';
 
-	export let name: string;
-	export let node: LayerTreeType;
-	export let selected: string | undefined = undefined;
-	export let multiple: boolean = false;
+    export let name: string;
+    export let node: LayerTreeType;
+    export let selected: string | undefined = undefined;
+    export let multiple: boolean = false;
 
-	export let checked: LayerTreeType;
+    export let checked: LayerTreeType;
 
-	const { customLayers } = settings;
+    const { customLayers } = settings;
 
-	beforeUpdate(() => {
-		if (checked !== undefined) {
-			Object.keys(node).forEach((id) => {
-				if (!checked.hasOwnProperty(id)) {
-					if (typeof node[id] == 'boolean') {
-						checked[id] = false;
-					} else {
-						checked[id] = {};
-					}
-				}
-			});
-		}
-	});
+    beforeUpdate(() => {
+        if (checked !== undefined) {
+            Object.keys(node).forEach((id) => {
+                if (!checked.hasOwnProperty(id)) {
+                    if (typeof node[id] == 'boolean') {
+                        checked[id] = false;
+                    } else {
+                        checked[id] = {};
+                    }
+                }
+            });
+        }
+    });
 </script>
 
 <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-0.5 h-4">
-					{#if multiple}
-						<Checkbox
-							id="{name}-{id}"
-							{name}
-							value={id}
-							bind:checked={checked[id]}
-							class="scale-90"
-							aria-label={$_(`layers.label.${id}`)}
-						/>
-					{:else}
-						<input id="{name}-{id}" type="radio" {name} value={id} bind:group={selected} />
-					{/if}
-					<Label for="{name}-{id}" class="flex flex-row items-center gap-1">
-						{#if $customLayers.hasOwnProperty(id)}
-							{$customLayers[id].name}
-						{:else}
-							{$_(`layers.label.${id}`)}
-						{/if}
-					</Label>
-				</div>
-			{/if}
-		{:else if anySelectedLayer(node[id])}
-			<CollapsibleTreeNode {id}>
-				<span slot="trigger">{$_(`layers.label.${id}`)}</span>
-				<div slot="content">
-					<svelte:self node={node[id]} {name} bind:selected {multiple} bind:checked={checked[id]} />
-				</div>
-			</CollapsibleTreeNode>
-		{/if}
-	{/each}
+    {#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-0.5 h-4">
+                    {#if multiple}
+                        <Checkbox
+                            id="{name}-{id}"
+                            {name}
+                            value={id}
+                            bind:checked={checked[id]}
+                            class="scale-90"
+                            aria-label={$_(`layers.label.${id}`)}
+                        />
+                    {:else}
+                        <input
+                            id="{name}-{id}"
+                            type="radio"
+                            {name}
+                            value={id}
+                            bind:group={selected}
+                        />
+                    {/if}
+                    <Label for="{name}-{id}" class="flex flex-row items-center gap-1">
+                        {#if $customLayers.hasOwnProperty(id)}
+                            {$customLayers[id].name}
+                        {:else}
+                            {$_(`layers.label.${id}`)}
+                        {/if}
+                    </Label>
+                </div>
+            {/if}
+        {:else if anySelectedLayer(node[id])}
+            <CollapsibleTreeNode {id}>
+                <span slot="trigger">{$_(`layers.label.${id}`)}</span>
+                <div slot="content">
+                    <svelte:self
+                        node={node[id]}
+                        {name}
+                        bind:selected
+                        {multiple}
+                        bind:checked={checked[id]}
+                    />
+                </div>
+            </CollapsibleTreeNode>
+        {/if}
+    {/each}
 </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;
-	}
+    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>