fix: Toggle on:click handler and section double event handling

app/src/lib/components/AnalyticsSettings.svelte

@@ -12,17 +12,17 @@
 	const metricsEnabled = appMetricsEnabled();
 	const nonAnonMetricsEnabled = appNonAnonMetricsEnabled();
 
-	function toggleErrorReporting(e: MouseEvent | CustomEvent<boolean>) {
+	function toggleErrorReporting(e: MouseEvent) {
 		$errorReportingEnabled = !$errorReportingEnabled;
 		e.preventDefault();
 	}
 
-	function toggleMetrics(e: MouseEvent | CustomEvent<boolean>) {
+	function toggleMetrics(e: MouseEvent) {
 		$metricsEnabled = !$metricsEnabled;
 		e.preventDefault();
 	}
 
-	function toggleNonAnonMetrics(e: MouseEvent | CustomEvent<boolean>) {
+	function toggleNonAnonMetrics(e: MouseEvent) {
 		$nonAnonMetricsEnabled = !$nonAnonMetricsEnabled;
 		e.preventDefault();
 	}
@@ -53,7 +53,7 @@
 	</div>
 
 	<div class="analytics-settings__actions">
-		<SectionCard labelFor="errorReportngToggle" on:click={toggleErrorReporting} orientation="row">
+		<SectionCard labelFor="errorReportngToggle" orientation="row">
 			<svelte:fragment slot="title">Error reporting</svelte:fragment>
 			<svelte:fragment slot="caption">
 				Toggle reporting of application crashes and errors.
@@ -62,24 +62,20 @@
 				<Toggle
 					id="errorReportngToggle"
 					checked={$errorReportingEnabled}
-					on:change={toggleErrorReporting}
+					on:click={toggleErrorReporting}
 				/>
 			</svelte:fragment>
 		</SectionCard>
 
-		<SectionCard labelFor="metricsEnabledToggle" on:click={toggleMetrics} orientation="row">
+		<SectionCard labelFor="metricsEnabledToggle" orientation="row">
 			<svelte:fragment slot="title">Usage metrics</svelte:fragment>
 			<svelte:fragment slot="caption">Toggle sharing of usage statistics.</svelte:fragment>
 			<svelte:fragment slot="actions">
-				<Toggle id="metricsEnabledToggle" checked={$metricsEnabled} on:change={toggleMetrics} />
+				<Toggle id="metricsEnabledToggle" checked={$metricsEnabled} on:click={toggleMetrics} />
 			</svelte:fragment>
 		</SectionCard>
 
-		<SectionCard
+		<SectionCard labelFor="nonAnonMetricsEnabledToggle" orientation="row">
-			labelFor="nonAnonMetricsEnabledToggle"
-			on:click={toggleNonAnonMetrics}
-			orientation="row"
-		>
 			<svelte:fragment slot="title">Non-anonymous usage metrics</svelte:fragment>
 			<svelte:fragment slot="caption"
 				>Toggle sharing of identifiable usage statistics.</svelte:fragment
@@ -88,7 +84,7 @@
 				<Toggle
 					id="nonAnonMetricsEnabledToggle"
 					checked={$nonAnonMetricsEnabled}
-					on:change={toggleNonAnonMetrics}
+					on:click={toggleNonAnonMetrics}
 				/>
 			</svelte:fragment>
 		</SectionCard>

app/src/lib/components/CloudForm.svelte

@@ -79,30 +79,25 @@
 	</svelte:fragment>
 
 	<div class="options">
-		<SectionCard labelFor="aiGenEnabled" on:click={aiGenToggle} orientation="row">
+		<SectionCard labelFor="aiGenEnabled" orientation="row">
 			<svelte:fragment slot="title">Enable branch and commit message generation</svelte:fragment>
 			<svelte:fragment slot="caption">
 				If enabled, diffs will sent to OpenAI or Anthropic's servers when pressing the "Generate
 				message" and "Generate branch name" button.
 			</svelte:fragment>
 			<svelte:fragment slot="actions">
-				<Toggle id="aiGenEnabled" checked={$aiGenEnabled} on:change={aiGenToggle} />
+				<Toggle id="aiGenEnabled" checked={$aiGenEnabled} on:click={aiGenToggle} />
 			</svelte:fragment>
 		</SectionCard>
 
-		<SectionCard
+		<SectionCard labelFor="branchNameGen" disabled={!$aiGenEnabled} orientation="row">
-			labelFor="branchNameGen"
-			disabled={!$aiGenEnabled}
-			on:click={aiGenBranchNamesToggle}
-			orientation="row"
-		>
 			<svelte:fragment slot="title">Automatically generate branch names</svelte:fragment>
 			<svelte:fragment slot="actions">
 				<Toggle
 					id="branchNameGen"
 					disabled={!$aiGenEnabled}
 					checked={$aiGenAutoBranchNamingEnabled}
-					on:change={aiGenBranchNamesToggle}
+					on:click={aiGenBranchNamesToggle}
 				/>
 			</svelte:fragment>
 		</SectionCard>
@@ -133,11 +128,7 @@
 	<Section spacer>
 		<svelte:fragment slot="title">Full data synchronization</svelte:fragment>
 
-		<SectionCard
+		<SectionCard labelFor="historySync" orientation="row">
-			labelFor="historySync"
-			on:change={async (e) => await onSyncChange(e.detail)}
-			orientation="row"
-		>
 			<svelte:fragment slot="caption">
 				Sync my history, repository and branch data for backup, sharing and team features.
 			</svelte:fragment>
@@ -145,7 +136,7 @@
 				<Toggle
 					id="historySync"
 					checked={project.api?.sync || false}
-					on:change={async (e) => await onSyncChange(e.detail)}
+					on:click={async (e) => await onSyncChange(e.detail)}
 				/>
 			</svelte:fragment>
 		</SectionCard>

app/src/lib/components/PreferencesForm.svelte

@@ -56,7 +56,7 @@
 			<Toggle
 				id="allowForcePush"
 				bind:checked={allowForcePushing}
-				on:change={async () => await setWithForcePush(allowForcePushing)}
+				on:click={async () => await setWithForcePush(allowForcePushing)}
 			/>
 		</svelte:fragment>
 	</SectionCard>
@@ -84,7 +84,7 @@
 			<Toggle
 				id="omitCertificateCheck"
 				bind:checked={omitCertificateCheck}
-				on:change={async () => await setOmitCertificateCheck(omitCertificateCheck)}
+				on:click={async () => await setOmitCertificateCheck(omitCertificateCheck)}
 			/>
 		</svelte:fragment>
 	</SectionCard>

app/src/lib/components/Toggle.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
 	import { tooltip } from '$lib/utils/tooltip';
-	import { createEventDispatcher } from 'svelte';
 
 	export let small = false;
 	export let disabled = false;
@@ -8,18 +7,11 @@
 	export let value = '';
 	export let help = '';
 	export let id = '';
-
-	let input: HTMLInputElement;
-	const dispatch = createEventDispatcher<{ change: boolean }>();
 </script>
 
 <input
-	bind:this={input}
 	bind:checked
 	on:click|stopPropagation
-	on:change={() => {
-		dispatch('change', checked);
-	}}
 	type="checkbox"
 	class="toggle"
 	class:small

app/src/routes/settings/experimental/+page.svelte

@@ -21,7 +21,7 @@
 			<Toggle
 				id="baseBranchSwitching"
 				checked={$baseBranchSwitching}
-				on:change={() => ($baseBranchSwitching = !$baseBranchSwitching)}
+				on:click={() => ($baseBranchSwitching = !$baseBranchSwitching)}
 			/>
 		</svelte:fragment>
 	</SectionCard>

app/src/routes/settings/git/+page.svelte

@@ -45,7 +45,7 @@
 			</Link>
 		</svelte:fragment>
 		<svelte:fragment slot="actions">
-			<Toggle id="committerSigning" checked={annotateCommits} on:change={toggleCommitterSigning} />
+			<Toggle id="committerSigning" checked={annotateCommits} on:click={toggleCommitterSigning} />
 		</svelte:fragment>
 	</SectionCard>
 

app/src/routes/settings/profile/+page.svelte

@@ -100,7 +100,7 @@
 	{#if $user}
 		<SectionCard>
 			<form on:submit={onSubmit} class="profile-form">
-				<label id="profile-picture" class="focus-state profile-pic-wrapper" for="picture">
+				<label id="profile-picture" class="profile-pic-wrapper focus-state" for="picture">
 					<input
 						on:change={onPictureChange}
 						type="file"
@@ -174,7 +174,7 @@
 			<Toggle
 				id="hoverScrollbarVisability"
 				checked={$userSettings.scrollbarVisabilityOnHover}
-				on:change={() =>
+				on:click={() =>
 					userSettings.update((s) => ({
 						...s,
 						scrollbarVisabilityOnHover: !s.scrollbarVisabilityOnHover