feat: highlight current format in dropdown

src/lib/components/functional/FormatDropdown.svelte

@@ -8,6 +8,7 @@
 
 	type Props = {
 		categories: Categories;
+		from?: string;
 		selected?: string;
 		onselect?: (option: string) => void;
 		disabled?: boolean;
@@ -15,6 +16,7 @@
 
 	let {
 		categories,
+		from,
 		selected = $bindable(""),
 		onselect,
 		disabled,
@@ -109,9 +111,9 @@
 
 	const clickDropdown = () => {
 		open = !open;
-		if (open) {
+		if (!open) return;
 		setTimeout(() => {
-				if (dropdownMenu) {
+			if (!dropdownMenu) return;
 			const searchInput = dropdownMenu.querySelector(
 				"#format-search",
 			) as HTMLInputElement;
@@ -119,9 +121,7 @@
 				searchInput.focus();
 				searchInput.select();
 			}
-				}
 		}, 0); // let dropdown open first
-		}
 	};
 
 	onMount(() => {
@@ -252,7 +252,8 @@
 						class="w-full p-2 text-center rounded-xl
                         {format === selected
 							? 'bg-accent text-black'
-							: 'hover:bg-panel'}"
+							: 'hover:bg-panel'}
+						{format === from ? 'bg-separator' : ''}"
 						onclick={() => selectOption(format)}
 					>
 						{format}

src/routes/convert/+page.svelte

@@ -13,7 +13,6 @@
 		showGradient,
 		vertdLoaded,
 	} from "$lib/store/index.svelte";
-	import { addToast } from "$lib/store/ToastProvider";
 	import { VertFile } from "$lib/types";
 	import {
 		AudioLines,
@@ -247,6 +246,7 @@
 					>
 						<FormatDropdown
 							{categories}
+							from={file.from}
 							bind:selected={file.to}
 							onselect={(option) => handleSelect(option, file)}
 						/>