Reapply "feat: drop or click to *convert* (#52)"

This reverts commit 7151a2dbce.

src/lib/components/functional/Uploader.svelte

@@ -19,7 +19,7 @@
 	let acceptedTypes = $state<string>();
 
 	const setupFileInput = async () => {
-        if(!fileInput) return;
+		if (!fileInput) return;
 
 		const filteredConverters = (
 			await Promise.all(
@@ -33,21 +33,19 @@
 			.join(",");
 	};
 
-
 	const uploadFiles = async () => {
-        if(!fileInput) return
+		if (!fileInput) return;
 		fileInput.click();
 	};
 
 	const handleFileChange = (e: Event) => {
-        if(!fileInput) return;
+		if (!fileInput) return;
 
 		const oldLength = files.files.length;
 		files.add(fileInput.files);
 		if (oldLength !== files.files.length) goto("/convert");
 	};
 
-
 	onMount(() => {
 		const handler = (e: Event) => {
 			e.preventDefault();
@@ -70,12 +68,21 @@
 	});
 </script>
 
-<input bind:this={fileInput} type="file" multiple class="hidden" onchange={handleFileChange} accept={acceptedTypes}>
+<input
+	bind:this={fileInput}
+	type="file"
+	multiple
+	class="hidden"
+	onchange={handleFileChange}
+	accept={acceptedTypes}
+/>
 
 <button
 	onclick={uploadFiles}
 	bind:this={uploaderButton}
-    class={clsx(`hover:scale-105 active:scale-100 ${$effects ? "" : "!scale-100"} duration-200 ${classList}`)}
+	class={clsx(
+		`hover:scale-105 active:scale-100 ${$effects ? "" : "!scale-100"} duration-200 ${classList}`,
+	)}
 >
 	<Panel
 		class="flex justify-center items-center w-full h-full flex-col pointer-events-none"
@@ -86,7 +93,7 @@
 			<UploadIcon class="w-full h-full text-on-accent" />
 		</div>
 		<h2 class="text-center text-2xl font-semibold mt-4">
-            Drop or click to upload
+			Drop or click to convert
 		</h2>
 	</Panel>
 </button>