feat(settings): change to checkbox

1 files changed, 54 insertions, 0 deletions

diff --git a/src/lib/Settings/SettingCheckboxToggle.svelte b/src/lib/Settings/SettingCheckboxToggle.svelte
new file mode 100644
index 00000000..ab603278
--- /dev/null
+++ b/src/lib/Settings/SettingCheckboxToggle.svelte
@@ -0,0 +1,54 @@
+<script lang="ts">
+	import settings, { type Settings } from '../../stores/settings';
+
+	type BooleanSettingsKeys<T> = {
+		[K in keyof T]: T[K] extends boolean ? K : never;
+	};
+	type SettingsBooleanKeys = BooleanSettingsKeys<Settings>;
+
+	export let sectionBreak = false;
+	export let disabled = false;
+	export let text: string;
+	export let setting: SettingsBooleanKeys[keyof SettingsBooleanKeys];
+
+	// const toggler = (key: keyof Settings) => [
+	// 	() =>
+	// 		settings.update((s) => {
+	// 			(s[key] as boolean) = true;
+
+	// 			$settings = s;
+
+	// 			return s;
+	// 		}),
+	// 	() =>
+	// 		settings.update((s) => {
+	// 			(s[key] as boolean) = false;
+
+	// 			$settings = s;
+
+	// 			return s;
+	// 		})
+	// ];
+
+	const check = (e: Event & { currentTarget: EventTarget & HTMLInputElement }): void => {
+		settings.setKey(setting, (e.target as HTMLInputElement).checked);
+	};
+</script>
+
+<input type="checkbox" on:change={check} bind:checked={$settings[setting]} />
+
+{#if disabled}
+	<strike>
+		{text}
+	</strike>
+	<slot />
+{:else}
+	{text}
+	<slot />
+{/if}
+
+<br />
+
+{#if sectionBreak}
+	<p />
+{/if}