Better converting UI

src/app.css

@@ -31,6 +31,10 @@ body {
 	}
 
 	.btn {
-		@apply font-display flex items-center justify-center overflow-hidden relative cursor-pointer px-4 border-2 border-solid bg-background border-foreground-muted-alt rounded-xl p-2 focus:!outline-none hover:scale-105 transition-transform duration-200 active:scale-95;
+		@apply font-display flex items-center justify-center overflow-hidden relative cursor-pointer px-4 border-2 border-solid bg-background border-foreground-muted-alt rounded-xl p-2 focus:!outline-none hover:scale-105 transition-all duration-200 active:scale-95;
+	}
+
+	.btn-highlight {
+		@apply bg-accent-background text-accent-foreground border-accent-background;
 	}
 }

src/lib/converters/vips.ts

@@ -7,7 +7,7 @@ import type { VipsWorkerMessage, OmitBetterStrict } from "$lib/types";
 export class VipsConverter extends Converter {
 	private worker: Worker = browser ? new VipsWorker() : null!;
 	private id = 0;
-	public name = "Vips";
+	public name = "libvips";
 	public supportedFormats = [
 		".jpg",
 		".jpeg",

src/routes/convert/+page.svelte

@@ -159,24 +159,12 @@
 			}}
 		>
 			<div
-				class="w-full px-4 py-3 max-w-screen-lg p-1 border-solid flex-col border-2 rounded-2xl border-foreground-muted-alt flex flex-shrink-0"
+				class="w-full p-4 max-w-screen-lg border-solid flex-col border-2 rounded-2xl border-foreground-muted-alt flex flex-shrink-0"
 			>
-				<h2 class="font-bold text-xl mb-3">Options</h2>
+				<h2 class="font-bold text-xl mb-1">Options</h2>
-				<div class="flex flex-col gap-4 mt-2">
-					<div class="w-fit flex flex-col items-center gap-2">
-						<h3 class="mr-5">Converter</h3>
-						<Dropdown
-							options={converters.map(
-								(converter) => converter.name,
-							)}
-							bind:selected={converterName}
-						/>
-					</div>
-				</div>
-				<h2 class="font-bold text-xl mb-3 mt-6">Quick Actions</h2>
 				<div class="flex flex-col mb-1 w-full gap-4 mt-2">
-					<div class="flex flex-col gap-4 w-fit">
+					<div class="flex flex-col gap-3 w-fit">
-						<h3>Set all formats</h3>
+						<h3>Set all target formats</h3>
 						<Dropdown
 							options={converter.supportedFormats}
 							onselect={(o) => {
@@ -191,19 +179,42 @@
 							}}
 						/>
 					</div>
-					<div class="flex gap-4">
+				</div>
-						<button onclick={convertAll} class="btn flex-grow"
+
-							>Convert{files.files.length > 1
+				<h2 class="font-bold text-base mb-1 mt-6">Advanced</h2>
-								? " All"
+				<div class="flex flex-col gap-4 mt-2">
-								: ""}</button
+					<div class="flex flex-col gap-3 w-fit">
-						>
+						<h3>Converter backend</h3>
-						<button onclick={downloadAll} class="btn flex-grow"
+						<Dropdown
-							>Download{files.files.length > 1
+							options={converters.map(
-								? " All"
+								(converter) => converter.name,
-								: ""}</button
+							)}
-						>
+							bind:selected={converterName}
+						/>
 					</div>
 				</div>
+
+				<div class="flex gap-4 mt-8">
+					<button
+						onclick={convertAll}
+						class={clsx("btn flex-grow", {
+							"btn-highlight": !files.files.find((i) => i.result),
+						})}
+						>Convert{files.files.length > 1 ? " All" : ""}</button
+					>
+					<button
+						onclick={() => downloadAll}
+						class={clsx("btn flex-grow", {
+							"opacity-50 pointer-events-none": files.files.find(
+								(i) => !i.result,
+							),
+							"btn-highlight": !files.files.find(
+								(i) => !i.result,
+							),
+						})}
+						>Download{files.files.length > 1 ? " All" : ""}</button
+					>
+				</div>
 			</div>
 			{#each reversed as file, i (file.id)}
 				<div
@@ -235,7 +246,15 @@
 							class="flex items-center justify-between w-full z-50 relative"
 						>
 							<div
-								class="py-2 px-3 bg-background text-foreground rounded-xl"
+								class={clsx(
+									"py-2 px-3 rounded-xl transition-colors duration-300",
+									{
+										"bg-accent-background text-accent-foreground":
+											file.result,
+										"bg-background text-foreground":
+											!file.result,
+									},
+								)}
 							>
 								{file.file.name}
 							</div>