fix: better checkbox & settings behaviour

doing this on the way to a national robotics competition lmao

src/lib/components/functional/FancyInput.svelte

@@ -9,6 +9,8 @@
 	let {
 		class: className,
 		value = $bindable(),
+		checked = $bindable(),
+		type = "text",
 		disabled = false,
 		extension,
 		prefix,
@@ -17,6 +19,26 @@
 </script>
 
 <div class="relative flex w-full {className}">
+	{#if type === "checkbox"}
+		<div class="relative w-full h-full">
+			<input
+			{...rest}
+			type="checkbox"
+			bind:checked
+			class="w-full p-3 rounded-lg bg-panel border-2 border-button
+				{prefix ? 'pl-[2rem]' : 'pl-3'} 
+				{extension ? 'pr-[4rem]' : 'pr-3'}
+				{disabled && 'opacity-50 cursor-not-allowed'} appearance-none"
+			/>
+			{#if checked}
+				<div class="absolute w-7 h-7 inset-0 flex items-center justify-center pointer-events-none">
+					<svg class="w-6 h-6" fill="var(--bg-panel)" viewBox="0 0 20 20">
+						<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
+					</svg>
+				</div>
+			{/if}
+		</div>
+	{:else}
 		<input
 			{...rest}
 			bind:value
@@ -25,6 +47,8 @@
 				{extension ? 'pr-[4rem]' : 'pr-3'}
 				{disabled && 'opacity-50 cursor-not-allowed'}"
 		/>
+	{/if}
+
 	{#if prefix}
 		<div class="absolute left-0 top-0 bottom-0 flex items-center px-2">
 			<span class="text-sm text-gray-400 px-2 py-1 rounded">{prefix}</span

src/lib/components/functional/SettingsModal.svelte

@@ -5,7 +5,6 @@
 	import Modal from "./Modal.svelte";
 	import { m } from "$lib/paraglide/messages";
 	import type { VertFile } from "$lib/types";
-	import type { SettingDefinition } from "$lib/types/conversion-settings";
 
 	type Props = {
 		file: VertFile | null;
@@ -14,13 +13,23 @@
 
 	let { file, onclose }: Props = $props();
 
+	let settings = $state<Record<string, any>>({});
+
 	const handleSettingChange = (key: string, value: any) => {
 		if (!file) return;
-		file.conversionSettings[key] = value;
+		settings[key] = value;
+		console.log(
+			`Changed settings for ${file.name}: ${JSON.stringify(settings, null, 2)}`,
+		);
 	};
 
 	const applySettings = () => {
 		onclose?.();
+		if (!file) return;
+		file.conversionSettings = { ...file.conversionSettings, ...settings };
+		console.log(
+			`Applied settings for ${file.name}: ${JSON.stringify(file.conversionSettings, null, 2)}`,
+		);
 	};
 </script>
 
@@ -87,10 +96,13 @@
 										] ?? setting.default}
 										settingsStyle
 										onselect={(value) =>
-                                            handleSettingChange(setting.key, value)}
+											handleSettingChange(
+												setting.key,
+												value,
+											)}
 									/>
 								{:else if setting.type === "boolean"}
-                                    <input
+									<FancyInput
 										type="checkbox"
 										checked={file.conversionSettings[
 											setting.key
@@ -100,7 +112,7 @@
 												setting.key,
 												e.currentTarget.checked,
 											)}
-                                        class="w-4 h-4"
+										
 									/>
 								{:else}
 									<FancyInput
@@ -111,7 +123,7 @@
 										oninput={(e) =>
 											handleSettingChange(
 												setting.key,
-                                                e.detail.value,
+												e.currentTarget.value,
 											)}
 									/>
 								{/if}

src/lib/css/app.scss

@@ -59,6 +59,8 @@
 	--fg-accent: var(--accent-pink-muted);
 	--fg-failure: var(--accent-red-alt);
 
+	--text-panel: hsl(0, 0%, 100%);
+
 	// backgrounds
 	--bg: hsl(0, 0%, 95%);
 
@@ -188,6 +190,8 @@
 	// backgrounds
 	--bg: hsl(220, 5%, 15%);
 
+	--text-panel: hsl(220, 4%, 24%);
+
 	--bg-gradient-from: hsla(303, 100%, 50%, 0.1);
 	--bg-gradient-to: hsla(303, 100%, 50%, 0);
 	--bg-gradient-pink-from: hsla(303, 100%, 50%, 0.1);
@@ -393,16 +397,20 @@ body {
 		@apply outline outline-accent outline-2;
 	}
 
-	input[type="range"] {
+	input[type="checkbox"] {
-		@apply appearance-none bg-panel h-2 rounded-lg;
+		@apply appearance-none w-5 h-5 rounded-md bg-button border-2 border-button cursor-pointer transition-colors duration-200;
 	}
 
-	input[type="range"]::-webkit-slider-thumb {
+	input[type="checkbox"]:hover {
-		@apply appearance-none w-4 h-4 bg-accent rounded-full cursor-pointer;
+		@apply bg-button border-accent;
 	}
 
-	input[type="range"]::-moz-range-thumb {
+	input[type="checkbox"]:checked {
-		@apply w-4 h-4 bg-accent rounded-full cursor-pointer;
+		@apply bg-accent border-accent;
+	}
+
+	input[type="checkbox"]:focus {
+		@apply outline outline-accent outline-2;
 	}
 
 	hr {