1 files changed, 38 insertions, 18 deletions
diff --git a/src/lib/Settings/SettingCheckboxToggle.svelte b/src/lib/Settings/SettingCheckboxToggle.svelte
index 6a16edec..85dbfcdc 100644
--- a/src/lib/Settings/SettingCheckboxToggle.svelte
+++ b/src/lib/Settings/SettingCheckboxToggle.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+  import { run } from 'svelte/legacy';
+
   import settings, { type Settings } from '$stores/settings';
 
   type BooleanSettingsKeys<T> = {
@@ -6,19 +8,37 @@
   };
   type SettingsBooleanKeys = BooleanSettingsKeys<Settings>;
 
-  export let sectionBreak = false;
-  export let disabled = false;
-  export let text: string | (() => string);
-  export let setting: SettingsBooleanKeys[keyof SettingsBooleanKeys];
-  export let lineBreak = true;
-  export let onChange: () => void = () => {
-    return;
-  };
-  export let invert = false;
-  export let id: string | null = null;
-
-  $: checked = setting ? (invert ? !$settings[setting] : $settings[setting]) : false;
-  $: field = text instanceof Function ? text() : text;
+  interface Props {
+    sectionBreak?: boolean;
+    disabled?: boolean;
+    text: string | (() => string);
+    setting: SettingsBooleanKeys[keyof SettingsBooleanKeys];
+    lineBreak?: boolean;
+    onChange?: () => void;
+    invert?: boolean;
+    id?: string | null;
+    children?: import('svelte').Snippet;
+  }
+
+  let {
+    sectionBreak = false,
+    disabled = false,
+    text,
+    setting,
+    lineBreak = true,
+    onChange = () => {
+      return;
+    },
+    invert = false,
+    id = null,
+    children
+  }: Props = $props();
+
+  let checked = $state(false);
+  run(() => {
+    checked = setting ? (invert ? !$settings[setting] : $settings[setting]) : false;
+  });
+  let field = $derived(text instanceof Function ? text() : text);
 
   // const toggler = (key: keyof Settings) => [
   // 	() =>
@@ -53,11 +73,11 @@
   };
 </script>
 
-<input type="checkbox" on:change={check} bind:checked {id} />
+<input type="checkbox" onchange={check} bind:checked {id} />
 
 <span
-  on:click={flip}
-  on:keydown={() => {
+  onclick={flip}
+  onkeydown={() => {
     return;
   }}
   role="button"
@@ -72,12 +92,12 @@
   {/if}
 </span>
 
-<slot />
+{@render children?.()}
 
 {#if lineBreak}
   <br />
 {/if}
 
 {#if sectionBreak}
-  <p />
+  <p></p>
 {/if}