feat: functional dropdown

just gotta do searching

src/lib/components/functional/ConversionPanel.svelte

@@ -5,6 +5,8 @@
 	import Dropdown from "./Dropdown.svelte";
 	import Tooltip from "../visual/Tooltip.svelte";
 	import ProgressBar from "../visual/ProgressBar.svelte";
+	import FormatDropdown from "./FormatDropdown.svelte";
+	import { categories } from "$lib/converters";
 
 	const length = $derived(files.files.length);
 	const progress = $derived(files.files.filter((f) => f.result).length);
@@ -66,10 +68,7 @@
 		<div class="flex items-center gap-2">
 			<p class="whitespace-nowrap text-xl">Set all to</p>
 			{#if files.requiredConverters.length === 1}
-				{@const supported = files.files[0]?.converters.flatMap((c) =>
+				<FormatDropdown
-					c.formatStrings((f) => f.toSupported),
-				)}
-				<Dropdown
 					onselect={(r) =>
 						files.files.forEach((f) => {
 							if (f.from !== r) {
@@ -77,7 +76,7 @@
 								f.result = null;
 							}
 						})}
-					options={supported || []}
+					{categories}
 				/>
 			{:else}
 				<Dropdown options={["N/A"]} disabled />

src/lib/components/functional/Dropdown.svelte

@@ -1,13 +1,11 @@
 <script lang="ts">
 	import { duration, fade, transition } from "$lib/animation";
-	import type { Categories } from "$lib/types";
+	import { ChevronDown } from "lucide-svelte";
-	import { ChevronDown, SearchIcon } from "lucide-svelte";
 	import { onMount } from "svelte";
 	import { quintOut } from "svelte/easing";
 
 	type Props = {
 		options: string[];
-		categories: Categories;
 		selected?: string;
 		onselect?: (option: string) => void;
 		disabled?: boolean;
@@ -50,12 +48,6 @@
 		window.addEventListener("click", click);
 		return () => window.removeEventListener("click", click);
 	});
-
-	function search(event: Event) {
-		const query = (event.target as HTMLInputElement).value;
-		// TODO: search logic
-		console.log(`Searching for: ${query}`);
-	}
 </script>
 
 <div
@@ -116,43 +108,22 @@
 		/>
 	</button>
 	{#if open}
-		<!-- TODO: fix positioning for mobile -->
 		<div
 			style={hover ? "will-change: opacity, fade, transform" : ""}
 			transition:fade={{
 				duration,
 				easing: quintOut,
 			}}
-			class="w-[250%] min-w-full shadow-xl bg-panel-alt shadow-black/25 absolute left-1/2 -translate-x-1/2 top-full mt-1 z-50 rounded-xl overflow-hidden"
+			class="w-full shadow-xl bg-panel-alt shadow-black/25 absolute overflow-hidden top-full mt-1 left-0 z-50 bg-background rounded-xl max-h-[30vh] overflow-y-auto"
 		>
-			<!-- search box -->
+			{#each options as option}
-			<div class="p-3">
+				<button
-				<div class="flex w-full items-center">
+					class="w-full p-2 px-4 text-left hover:bg-panel"
-					<div
+					onclick={() => select(option)}
-						class="flex-shrink-0 flex-grow-0 basis-1/6 flex justify-center"
+				>
-					>
+					{option}
-						<SearchIcon class="w-4 h-4 text-text-secondary" />
+				</button>
-					</div>
+			{/each}
-					<input
-						type="text"
-						placeholder="Search format"
-						class="flex-grow basis-5/6 rounded-lg bg-panel text-foreground"
-						oninput={search}
-					/>
-				</div>
-			</div>
-
-			<!-- categories and formats -->
-			<div class="max-h-80 overflow-y-auto">
-				{#each options as option}
-					<button
-						class="w-full p-2 px-4 text-left hover:bg-panel"
-						onclick={() => select(option)}
-					>
-						{option}
-					</button>
-				{/each}
-			</div>
 		</div>
 	{/if}
 </div>

src/lib/components/functional/FormatDropdown.svelte

@@ -0,0 +1,237 @@
+<script lang="ts">
+	import { duration, fade, transition } from "$lib/animation";
+	import { files } from "$lib/store/index.svelte";
+	import type { Categories } from "$lib/types";
+	import { ChevronDown, SearchIcon } from "lucide-svelte";
+	import { onMount } from "svelte";
+	import { quintOut } from "svelte/easing";
+
+	type Props = {
+		categories: Categories;
+		selected?: string;
+		onselect?: (option: string) => void;
+		disabled?: boolean;
+		settingsStyle?: boolean;
+	};
+
+	let {
+		categories,
+		selected = $bindable(""),
+		onselect,
+		disabled,
+		settingsStyle,
+	}: Props = $props();
+
+	let open = $state(false);
+	let hover = $state(false);
+	let isUp = $state(false);
+	let dropdown = $state<HTMLDivElement>();
+	let currentCategory = $state<string | null>();
+	let shownCategories = $state<string[]>(Object.keys(categories));
+
+	const selectOption = (option: string) => {
+		const oldIndex =
+			currentCategory &&
+			categories[currentCategory]?.formats.indexOf(selected || "");
+		const newIndex =
+			currentCategory &&
+			categories[currentCategory]?.formats.indexOf(option);
+		isUp = (oldIndex ?? 0) > (newIndex ?? 0);
+		selected = option;
+		open = false;
+		onselect?.(option);
+	};
+
+	const selectCategory = (category: string) => {
+		if (categories[category]) {
+			currentCategory = category;
+			console.log(`Selected category: ${category}`);
+			console.log(`Formats: ${categories[category].formats.join(", ")}`);
+		}
+	};
+
+	const search = (event: Event) => {
+		const query = (event.target as HTMLInputElement).value;
+		console.log(`Searching for: ${query}`);
+		// TODO: search logic
+	};
+
+	onMount(() => {
+		const click = (e: MouseEvent) => {
+			if (dropdown && !dropdown.contains(e.target as Node)) {
+				open = false;
+			}
+		};
+
+		window.addEventListener("click", click);
+
+		// depending on selected, find category
+		if (selected) {
+			currentCategory = Object.keys(categories).find((cat) =>
+				categories[cat].formats.includes(selected),
+			);
+			if (!currentCategory) {
+				currentCategory = Object.keys(categories)[0] || null;
+			}
+
+			shownCategories = Object.keys(categories).filter(
+				(cat) =>
+					cat === currentCategory ||
+					categories[cat].canConvertTo?.includes(
+						currentCategory || "",
+					),
+			);
+		} else {
+			// find current category based on files
+			const fileCategories = [
+				...new Set(
+					files.files
+						.map(f =>
+							Object.keys(categories).find(cat =>
+								categories[cat].formats.includes(f.from),
+							),
+						)
+						.filter(Boolean),
+				),
+			];
+			currentCategory = fileCategories[0] || Object.keys(categories)[0] || null;
+
+			// only show categories that can convert to current category / itself
+			shownCategories = Object.keys(categories).filter(
+				cat =>
+					cat === currentCategory ||
+					categories[cat].canConvertTo?.includes(currentCategory || ""),
+			);
+
+			// if no selected format, select first format of current category
+			if (
+				!selected &&
+				currentCategory &&
+				categories[currentCategory].formats.length > 0
+			)
+				selected = categories[currentCategory].formats[0];
+		}
+
+		return () => window.removeEventListener("click", click);
+	});
+</script>
+
+<div
+	class="relative w-full min-w-fit {settingsStyle
+		? 'font-normal'
+		: 'text-xl font-medium'} text-center"
+	bind:this={dropdown}
+>
+	<button
+		class="font-display w-full {settingsStyle
+			? 'justify-between'
+			: 'justify-center'} overflow-hidden relative cursor-pointer {settingsStyle
+			? 'px-4'
+			: 'px-3'} py-3.5 bg-button {disabled
+			? 'opacity-50 cursor-auto'
+			: 'cursor-pointer'} flex items-center {settingsStyle
+			? 'rounded-xl'
+			: 'rounded-full'} focus:!outline-none"
+		onclick={() => (open = !open)}
+		onmouseenter={() => (hover = true)}
+		onmouseleave={() => (hover = false)}
+		{disabled}
+	>
+		<!-- <p>{selected}</p> -->
+		<div class="grid grid-cols-1 grid-rows-1 w-fit flex-grow-0">
+			{#key selected}
+				<p
+					in:fade={{
+						duration,
+						easing: quintOut,
+					}}
+					out:fade={{
+						duration,
+						easing: quintOut,
+					}}
+					class="col-start-1 row-start-1 {settingsStyle
+						? 'text-left'
+						: 'text-center'} font-body {settingsStyle
+						? 'font-normal'
+						: 'font-medium'}"
+				>
+					{selected}
+				</p>
+			{/key}
+			{#if currentCategory}
+				{#each categories[currentCategory].formats as option}
+					<p
+						class="col-start-1 row-start-1 invisible pointer-events-none"
+					>
+						{option}
+					</p>
+				{/each}
+			{/if}
+		</div>
+		<ChevronDown
+			class="w-4 h-4 ml-4 mt-0.5 flex-shrink-0"
+			style="transform: rotate({open
+				? 180
+				: 0}deg); transition: transform {duration}ms {transition};"
+		/>
+	</button>
+	{#if open}
+		<!-- TODO: fix positioning for mobile -->
+		<div
+			style={hover ? "will-change: opacity, fade, transform" : ""}
+			transition:fade={{
+				duration,
+				easing: quintOut,
+			}}
+			class="w-[250%] min-w-full shadow-xl bg-panel-alt shadow-black/25 absolute left-1/2 -translate-x-1/2 top-full mt-1 z-50 rounded-2xl overflow-hidden"
+		>
+			<!-- search box -->
+			<div class="p-3 w-full">
+				<div class="relative">
+					<input
+						type="text"
+						placeholder="Search format"
+						class="flex-grow w-full !pl-11 !pr-3 rounded-lg bg-panel text-foreground"
+						oninput={search}
+					/>
+					<span
+						class="absolute left-4 top-1/2 -translate-y-1/2 flex items-center"
+					>
+						<SearchIcon class="w-4 h-4" />
+					</span>
+				</div>
+			</div>
+
+			<!-- categories and formats -->
+			<div class="flex items-center justify-between">
+				{#each shownCategories as category}
+					<button
+						class="flex-grow text-lg text-muted hover:text-muted/20 border-b-[1px] pb-2 capitalize
+                        {currentCategory === category
+							? 'text-accent border-b-accent'
+							: 'border-b-separator'}"
+						onclick={() => selectCategory(category)}
+					>
+						{category}
+					</button>
+				{/each}
+			</div>
+
+			<div class="max-h-80 overflow-y-auto grid grid-cols-3 gap-2 p-2">
+				{#if currentCategory}
+					{#each categories[currentCategory].formats as option}
+						<button
+							class="w-full p-2 text-center rounded-xl
+                            {option === selected
+								? 'bg-accent text-black'
+								: 'hover:bg-panel'}"
+							onclick={() => selectOption(option)}
+						>
+							{option}
+						</button>
+					{/each}
+				{/if}
+			</div>
+		</div>
+	{/if}
+</div>

src/lib/converters/index.ts

@@ -1,3 +1,4 @@
+import type { Categories } from "$lib/types";
 import { FFmpegConverter } from "./ffmpeg.svelte";
 import { PandocConverter } from "./pandoc.svelte";
 import { VertdConverter } from "./vertd.svelte";
@@ -9,3 +10,40 @@ export const converters = [
 	new VertdConverter(),
 	new PandocConverter(),
 ];
+
+export function getConverterByFormat(format: string) {
+	for (const converter of converters) {
+		if (converter.supportedFormats.some((f) => f.name === format)) {
+			return converter;
+		}
+	}
+	return null;
+}
+
+export const categories: Categories = {
+	image: { formats: [""], canConvertTo: [] },
+	video: { formats: [""], canConvertTo: [] }, // add "audio" when "nullptr/experimental-audio-to-video" is implemented
+	audio: { formats: [""], canConvertTo: [] }, // add "video" when "nullptr/experimental-audio-to-video" is implemented
+	docs: { formats: [""], canConvertTo: [] },
+};
+
+categories.audio.formats =
+	converters
+		.find((c) => c.name === "ffmpeg")
+		?.formatStrings((f) => f.toSupported)
+		.filter((f) => f !== "mp3") || [];
+categories.video.formats =
+	converters
+		.find((c) => c.name === "vertd")
+		?.formatStrings((f) => f.toSupported)
+		.filter((f) => f !== "mp4") || [];
+categories.image.formats =
+	converters
+		.find((c) => c.name === "libvips")
+		?.formatStrings((f) => f.toSupported)
+		.filter((f) => f !== ".webp" && f !== ".gif") || [];
+categories.docs.formats =
+	converters
+		.find((c) => c.name === "pandoc")
+		?.formatStrings((f) => f.toSupported)
+		.filter((f) => f !== ".pdf") || [];

src/lib/types/dropdown.ts

@@ -1,5 +0,0 @@
-export interface Categories {
-    [key: string]: {
-        formats: string[];
-    }
-}

src/lib/types/file.svelte.ts

@@ -119,3 +119,10 @@ export class VertFile {
 		a.remove();
 	}
 }
+
+export interface Categories {
+	[key: string]: {
+		formats: string[];
+		canConvertTo?: string[];
+	};
+}

src/lib/types/index.ts

@@ -1,4 +1,3 @@
 export * from "./file.svelte";
 export * from "./util";
-export * from "./conversion-worker";
+export * from "./conversion-worker";
-export * from "./dropdown";

src/routes/convert/+page.svelte

@@ -1,11 +1,11 @@
 <script lang="ts">
 	import ConversionPanel from "$lib/components/functional/ConversionPanel.svelte";
-	import Dropdown from "$lib/components/functional/Dropdown.svelte";
+	import FormatDropdown from "$lib/components/functional/FormatDropdown.svelte";
 	import Uploader from "$lib/components/functional/Uploader.svelte";
 	import Panel from "$lib/components/visual/Panel.svelte";
 	import ProgressBar from "$lib/components/visual/ProgressBar.svelte";
 	import Tooltip from "$lib/components/visual/Tooltip.svelte";
-	import { converters } from "$lib/converters";
+	import { categories, converters } from "$lib/converters";
 	import {
 		effects,
 		files,
@@ -14,7 +14,7 @@
 		vertdLoaded,
 	} from "$lib/store/index.svelte";
 	import { addToast } from "$lib/store/ToastProvider";
-	import { VertFile } from "$lib/types";
+	import { VertFile, type Categories } from "$lib/types";
 	import {
 		AudioLines,
 		BookText,
@@ -28,6 +28,22 @@
 		RotateCwIcon,
 		XIcon,
 	} from "lucide-svelte";
+	import { onMount } from "svelte";
+
+	onMount(() => {
+		// depending on format, select right category and format
+		files.files.forEach((file) => {
+			const converter = file.findConverter();
+			if (converter) {
+				const category = Object.keys(categories).find((cat) =>
+					categories[cat].formats.includes(file.to),
+				);
+				if (category) {
+					file.to = file.to || categories[category].formats[0];
+				}
+			}
+		});
+	});
 
 	const handleSelect = (option: string, file: VertFile) => {
 		file.result = null;
@@ -82,6 +98,8 @@
 							: "blue",
 			);
 		}
+
+		// TODO: filter out categories that cant be converted between
 	});
 </script>
 
@@ -224,13 +242,8 @@
 					<div
 						class="w-[122px] h-fit flex flex-col gap-2 items-center justify-center"
 					>
-						<!-- cannot convert to svg or heif -->
+						<FormatDropdown
-						<Dropdown
+							{categories}
-							options={availableConverters
-								.flatMap((c) =>
-									c.formatStrings((f) => f.toSupported),
-								)
-								.filter((format) => format !== file.from) || []}
 							bind:selected={file.to}
 							onselect={(option) => handleSelect(option, file)}
 						/>