From 1ec8da57422a751d11bb377d45cc37a554d71e05 Mon Sep 17 00:00:00 2001
From: Sam Chau <schau22@pm.me>
Date: Mon, 19 Jan 2026 23:15:12 +1030
Subject: [PATCH] fix: update IconCheckbox event binding from onclick to
 on:click

---
 src/lib/client/ui/form/IconCheckbox.svelte          | 13 ++++++-------
 .../settings/general/components/UISettings.svelte   |  2 +-
 2 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/src/lib/client/ui/form/IconCheckbox.svelte b/src/lib/client/ui/form/IconCheckbox.svelte
index d7f6c8c..a4c0381 100644
--- a/src/lib/client/ui/form/IconCheckbox.svelte
+++ b/src/lib/client/ui/form/IconCheckbox.svelte
@@ -6,7 +6,6 @@
 	export let color: string = 'accent'; // accent, blue, green, red, or hex color like #FFC230
 	export let shape: 'square' | 'circle' | 'rounded' = 'rounded';
 	export let disabled: boolean = false;
-	export let onclick: ((e: MouseEvent) => void) | undefined = undefined;
 
 	// Shape classes
 	const shapeClasses: Record<string, string> = {
@@ -26,7 +25,7 @@
 		role="checkbox"
 		aria-checked={checked}
 		{disabled}
-		{onclick}
+		on:click
 		class="flex h-5 w-5 items-center justify-center border-2 transition-all {shapeClass} {disabled
 			? 'cursor-not-allowed opacity-50'
 			: 'cursor-pointer focus:outline-none'} {checked
@@ -46,7 +45,7 @@
 		role="checkbox"
 		aria-checked={checked}
 		{disabled}
-		{onclick}
+		on:click
 		class="flex h-5 w-5 items-center justify-center border-2 transition-all {shapeClass} {checked
 			? 'border-accent-600 bg-accent-600 hover:brightness-110 dark:border-accent-500 dark:bg-accent-500'
 			: 'border-neutral-300 bg-neutral-50 hover:border-neutral-400 hover:bg-neutral-100 dark:border-neutral-700 dark:bg-neutral-800 dark:hover:border-neutral-500 dark:hover:bg-neutral-700'} {disabled
@@ -63,7 +62,7 @@
 		role="checkbox"
 		aria-checked={checked}
 		{disabled}
-		{onclick}
+		on:click
 		class="flex h-5 w-5 items-center justify-center border-2 transition-all {shapeClass} {checked
 			? 'border-green-600 bg-green-600 hover:brightness-110 dark:border-green-500 dark:bg-green-500'
 			: 'border-neutral-300 bg-neutral-50 hover:border-neutral-400 hover:bg-neutral-100 dark:border-neutral-700 dark:bg-neutral-800 dark:hover:border-neutral-500 dark:hover:bg-neutral-700'} {disabled
@@ -80,7 +79,7 @@
 		role="checkbox"
 		aria-checked={checked}
 		{disabled}
-		{onclick}
+		on:click
 		class="flex h-5 w-5 items-center justify-center border-2 transition-all {shapeClass} {checked
 			? 'border-red-600 bg-red-600 hover:brightness-110 dark:border-red-500 dark:bg-red-500'
 			: 'border-neutral-300 bg-neutral-50 hover:border-neutral-400 hover:bg-neutral-100 dark:border-neutral-700 dark:bg-neutral-800 dark:hover:border-neutral-500 dark:hover:bg-neutral-700'} {disabled
@@ -97,7 +96,7 @@
 		role="checkbox"
 		aria-checked={checked}
 		{disabled}
-		{onclick}
+		on:click
 		class="flex h-5 w-5 items-center justify-center border-2 transition-all {shapeClass} {checked
 			? 'border-blue-600 bg-blue-600 hover:brightness-110 dark:border-blue-500 dark:bg-blue-500'
 			: 'border-neutral-300 bg-neutral-50 hover:border-neutral-400 hover:bg-neutral-100 dark:border-neutral-700 dark:bg-neutral-800 dark:hover:border-neutral-500 dark:hover:bg-neutral-700'} {disabled
@@ -115,7 +114,7 @@
 		role="checkbox"
 		aria-checked={checked}
 		{disabled}
-		{onclick}
+		on:click
 		class="flex h-5 w-5 items-center justify-center border-2 transition-all {shapeClass} {checked
 			? 'border-accent-600 bg-accent-600 hover:brightness-110 dark:border-accent-500 dark:bg-accent-500'
 			: 'border-neutral-300 bg-neutral-50 hover:border-neutral-400 hover:bg-neutral-100 dark:border-neutral-700 dark:bg-neutral-800 dark:hover:border-neutral-500 dark:hover:bg-neutral-700'} {disabled
diff --git a/src/routes/settings/general/components/UISettings.svelte b/src/routes/settings/general/components/UISettings.svelte
index 64616ee..16c059f 100644
--- a/src/routes/settings/general/components/UISettings.svelte
+++ b/src/routes/settings/general/components/UISettings.svelte
@@ -27,7 +27,7 @@
 			<h3 class="text-sm font-semibold text-neutral-900 dark:text-neutral-50">Navigation</h3>
 			<div class="space-y-2">
 				<div class="flex items-center gap-3">
-					<IconCheckbox icon={Check} checked={useEmojis} onclick={toggle} />
+					<IconCheckbox icon={Check} checked={useEmojis} on:click={toggle} />
 					<button type="button" class="flex-1 text-left" onclick={toggle}>
 						<span class="text-sm font-medium text-neutral-900 dark:text-neutral-50">
 							Use Emojis