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,14 +19,36 @@
 </script>
 
 <div class="relative flex w-full {className}">
-	<input
+	{#if type === "checkbox"}
-		{...rest}
+		<div class="relative w-full h-full">
-		bind:value
+			<input
-		class="w-full p-3 rounded-lg bg-panel border-2 border-button
+			{...rest}
-			{prefix ? 'pl-[2rem]' : 'pl-3'} 
+			type="checkbox"
-			{extension ? 'pr-[4rem]' : 'pr-3'}
+			bind:checked
-			{disabled && 'opacity-50 cursor-not-allowed'}"
+			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
+			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'}"
+		/>
+	{/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>
 
@@ -63,61 +72,64 @@
 						{m["settings.conversion.no_settings"]?.() ||
 							"No settings available for this converter"}
 					</p>
-                {:else}
+				{:else}
-                    <div class="grid grid-cols-2 gap-4">
+					<div class="grid grid-cols-2 gap-4">
-                        {#each settings as setting (setting.key)}
+						{#each settings as setting (setting.key)}
-                            <div class="flex flex-col gap-2">
+							<div class="flex flex-col gap-2">
-                                <p class="text-sm font-bold">
+								<p class="text-sm font-bold">
-                                    {setting.label}
+									{setting.label}
-                                </p>
+								</p>
-                                <!-- prob unneeded -->
+								<!-- prob unneeded -->
-                                {#if setting.description}
+								{#if setting.description}
-                                    <p class="text-xs text-muted">
+									<p class="text-xs text-muted">
-                                        {setting.description}
+										{setting.description}
-                                    </p>
+									</p>
-                                {/if}
+								{/if}
 
-                                {#if setting.type === "select"}
+								{#if setting.type === "select"}
-                                    <Dropdown
+									<Dropdown
-                                        options={setting.options?.map(
+										options={setting.options?.map(
-                                            (opt) => opt.value,
+											(opt) => opt.value,
-                                        ) || []}
+										) || []}
-                                        selected={file.conversionSettings[
+										selected={file.conversionSettings[
-                                            setting.key
+											setting.key
-                                        ] ?? setting.default}
+										] ?? setting.default}
-                                        settingsStyle
+										settingsStyle
-                                        onselect={(value) =>
+										onselect={(value) =>
-                                            handleSettingChange(setting.key, value)}
+											handleSettingChange(
-                                    />
+												setting.key,
-                                {:else if setting.type === "boolean"}
+												value,
-                                    <input
+											)}
-                                        type="checkbox"
+									/>
-                                        checked={file.conversionSettings[
+								{:else if setting.type === "boolean"}
-                                            setting.key
+									<FancyInput
-                                        ] ?? setting.default}
+										type="checkbox"
-                                        onchange={(e) =>
+										checked={file.conversionSettings[
-                                            handleSettingChange(
+											setting.key
-                                                setting.key,
+										] ?? setting.default}
-                                                e.currentTarget.checked,
+										onchange={(e) =>
-                                            )}
+											handleSettingChange(
-                                        class="w-4 h-4"
+												setting.key,
-                                    />
+												e.currentTarget.checked,
-                                {:else}
+											)}
-                                    <FancyInput
+										
-                                        type={setting.type}
+									/>
-                                        value={file.conversionSettings[
+								{:else}
-                                            setting.key
+									<FancyInput
-                                        ] ?? setting.default}
+										type={setting.type}
-                                        oninput={(e) =>
+										value={file.conversionSettings[
-                                            handleSettingChange(
+											setting.key
-                                                setting.key,
+										] ?? setting.default}
-                                                e.detail.value,
+										oninput={(e) =>
-                                            )}
+											handleSettingChange(
-                                    />
+												setting.key,
-                                {/if}
+												e.currentTarget.value,
-                            </div>
+											)}
-                        {/each}
+									/>
-                    </div>
+								{/if}
+							</div>
+						{/each}
+					</div>
 				{/if}
 			</div>
 		{/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 {