Add support for clicking checkboxes via their labels (#2667)

frontend/src/components/panels/Layers.svelte

@@ -549,8 +549,10 @@
 
 		// Layer hierarchy
 		.list-area {
-			margin: 4px 0;
 			position: relative;
+			margin-top: 4px;
+			// Combine with the bottom bar to avoid a double border
+			margin-bottom: -1px;
 
 			.layer {
 				flex: 0 0 auto;

frontend/src/components/widgets/inputs/CheckboxInput.svelte

@@ -12,11 +12,13 @@
 	export let disabled = false;
 	export let icon: IconName = "Checkmark";
 	export let tooltip: string | undefined = undefined;
+	export let forLabel: bigint | undefined = undefined;
 
 	let inputElement: HTMLInputElement | undefined;
 
-	let id = String(Math.random()).substring(2);
+	const backupId = String(Math.random()).substring(2);
 
+	$: id = forLabel !== undefined ? String(forLabel) : backupId;
 	$: displayIcon = (!checked && icon === "Checkmark" ? "Empty12px" : icon) as IconName;
 
 	export function isChecked() {

frontend/src/components/widgets/labels/TextLabel.svelte

@@ -13,6 +13,7 @@
 	export let minWidth = 0;
 	export let multiline = false;
 	export let tooltip: string | undefined = undefined;
+	export let checkboxId: bigint | undefined = undefined;
 
 	$: extraClasses = Object.entries(classes)
 		.flatMap(([className, stateName]) => (stateName ? [className] : []))
@@ -22,7 +23,7 @@
 		.join(" ");
 </script>
 
-<span
+<label
 	class={`text-label ${className} ${extraClasses}`.trim()}
 	class:disabled
 	class:bold
@@ -33,9 +34,10 @@
 	style:min-width={minWidth > 0 ? `${minWidth}px` : undefined}
 	style={`${styleName} ${extraStyles}`.trim() || undefined}
 	title={tooltip}
+	for={checkboxId !== undefined ? `checkbox-input-${checkboxId}` : undefined}
 >
 	<slot />
-</span>
+</label>
 
 <style lang="scss" global>
 	.text-label {