From 1667d6a98ca482850745c7c1d81c7afd001ad9fe Mon Sep 17 00:00:00 2001
From: JovannMC <jovannmc@femboyfurry.net>
Date: Mon, 6 Jan 2025 18:52:08 +0300
Subject: [PATCH] Show "Set all to"

Shows the "Set all to" option all the time, defaulting to being disabled with "N/A" until a file is uploaded
---
 .../functional/ConversionPanel.svelte           | 17 +++++++++++------
 src/lib/components/functional/Dropdown.svelte   |  8 +++++---
 2 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/src/lib/components/functional/ConversionPanel.svelte b/src/lib/components/functional/ConversionPanel.svelte
index 308d89d..4f75440 100644
--- a/src/lib/components/functional/ConversionPanel.svelte
+++ b/src/lib/components/functional/ConversionPanel.svelte
@@ -5,7 +5,9 @@
 	import Dropdown from "./Dropdown.svelte";
 </script>
 
-<Panel class="w-full h-auto flex items-center justify-between flex-col md:flex-row gap-4">
+<Panel
+	class="w-full h-auto flex items-center justify-between flex-col md:flex-row gap-4"
+>
 	<div class="flex items-center flex-col md:flex-row gap-2.5 max-md:w-full">
 		<button
 			onclick={() => files.convertAll()}
@@ -26,15 +28,18 @@
 	</div>
 	<div class="w-full bg-separator h-0.5 flex md:hidden"></div>
 	<div class="flex items-center gap-2">
+		<p class="whitespace-nowrap text-xl md:text-base">Set all to</p>
 		{#if files.requiredConverters.length === 1}
-			<p class="whitespace-nowrap text-xl md:text-base">Set all to</p>
 			<Dropdown
-				onselect={(r) => files.files.forEach((f) => {
-					f.to = r;
-					f.result = null;
-				})}
+				onselect={(r) =>
+					files.files.forEach((f) => {
+						f.to = r;
+						f.result = null;
+					})}
 				options={files.files[0]?.converter?.supportedFormats || []}
 			/>
+		{:else}
+			<Dropdown options={["N/A"]} disabled />
 		{/if}
 	</div>
 </Panel>
diff --git a/src/lib/components/functional/Dropdown.svelte b/src/lib/components/functional/Dropdown.svelte
index e9764ab..33d2028 100644
--- a/src/lib/components/functional/Dropdown.svelte
+++ b/src/lib/components/functional/Dropdown.svelte
@@ -1,20 +1,21 @@
 <script lang="ts">
-	import { blur, duration, flip, transition } from "$lib/animation";
+	import { blur, duration, transition } from "$lib/animation";
 	import { ChevronDown } from "lucide-svelte";
 	import { onMount } from "svelte";
 	import { quintOut } from "svelte/easing";
-	import { fade } from "svelte/transition";
 
 	type Props = {
 		options: string[];
 		selected?: string;
 		onselect?: (option: string) => void;
+		disabled?: boolean
 	};
 
 	let {
 		options,
 		selected = $bindable(options[0]),
 		onselect,
+		disabled
 	}: Props = $props();
 
 	let open = $state(false);
@@ -49,10 +50,11 @@
 
 <div class="relative w-full min-w-fit" bind:this={dropdown}>
 	<button
-		class="font-display w-full min-w-fit justify-between overflow-hidden relative cursor-pointer px-3 bg-button flex items-center rounded-full p-2 focus:!outline-none"
+		class="font-display w-full min-w-fit justify-between overflow-hidden relative cursor-pointer px-3 bg-button {disabled ?  'opacity-50' : ''} flex items-center rounded-full p-2 focus:!outline-none"
 		onclick={toggle}
 		onmouseenter={() => (hover = true)}
 		onmouseleave={() => (hover = false)}
+		{disabled}
 	>
 		<!-- <p>{selected}</p> -->
 		<div class="grid grid-cols-1 grid-rows-1 w-fit text-left flex-grow-0">