feat: start settings modal component

messages/en.json

@@ -81,6 +81,10 @@
 			"no_formats": "No formats available",
 			"no_results": "No formats match your search"
 		},
+		"settings": {
+			"settings": "Settings",
+			"title": "File conversion settings"
+		},
 		"tooltips": {
 			"unknown_file": "Unknown file type",
 			"audio_file": "Audio file",

src/lib/components/functional/FormatDropdown.svelte

@@ -8,6 +8,8 @@
 	import { onMount } from "svelte";
 	import { quintOut } from "svelte/easing";
 	import { VertFile } from "$lib/types";
+	import Modal from "./Modal.svelte";
+	import Dropdown from "./Dropdown.svelte";
 
 	type Props = {
 		categories: Categories;
@@ -331,6 +333,13 @@
 		newFiles.forEach((f) => files.add(f));
 	};
 
+	let showSettingsModal = $state(false);
+	const settings = () => {
+		if (!file) return;
+		// TODO: temporary - will have individual settings modals for each converter and show those instead
+		showSettingsModal = true;
+	};
+
 	onMount(() => {
 		const handleClickOutside = (e: MouseEvent) => {
 			if (dropdown && !dropdown.contains(e.target as Node)) {
@@ -355,6 +364,68 @@
 	});
 </script>
 
+{#if showSettingsModal}
+	<Modal
+		icon={SearchIcon}
+		title="Conversion Settings"
+		color="purple"
+		buttons={[
+			{
+				text: "Cancel",
+				action: () => (showSettingsModal = false),
+			},
+			{
+				text: "Apply",
+				action: () => (showSettingsModal = false),
+				primary: true,
+			},
+		]}
+		onclose={() => (showSettingsModal = false)}
+	>
+		<div class="flex flex-col gap-8">
+			<div class="flex flex-col gap-4">
+				<div class="flex flex-col gap-2">
+					<p class="text-base font-bold">Format Settings</p>
+					<p class="text-sm text-muted font-normal">
+						Configure conversion options for {file?.name}
+					</p>
+				</div>
+
+				<div class="flex flex-col gap-2">
+					<p class="text-sm font-bold">Example dropdown</p>
+					<Dropdown
+						options={categories[currentCategory!]?.formats || []}
+						settingsStyle
+						{selected}
+						onselect={(e) => {
+							console.log("selected format", e);
+							selected = e;
+						}}
+					/>
+				</div>
+
+				<div class="flex flex-col gap-2">
+					<p class="text-sm font-bold">Resolution</p>
+					<input
+						type="text"
+						placeholder="1920x1080 or smth"
+						class="rounded-lg bg-button text-foreground p-3"
+					/>
+				</div>
+
+				<div class="flex flex-col gap-2">
+					<p class="text-sm font-bold">Frame Rate (FPS)</p>
+					<input
+						type="number"
+						placeholder="30"
+						class="rounded-lg bg-button text-foreground p-3"
+					/>
+				</div>
+			</div>
+		</div>
+	</Modal>
+{/if}
+
 <div
 	class="relative w-full min-w-fit text-xl font-medium text-center"
 	bind:this={dropdown}
@@ -506,6 +577,16 @@
 					</button>
 				</div>
 			{/if}
+			{#if file}
+				<div class="border-t border-separator text-base p-2">
+					<button
+						class="w-full p-2 text-center rounded-lg bg-accent text-black"
+						onclick={() => settings()}
+					>
+						{m["convert.settings.settings"]()}
+					</button>
+				</div>
+			{/if}
 		</div>
 	{/if}
 </div>

src/lib/components/functional/Modal.svelte

@@ -0,0 +1,113 @@
+<script lang="ts">
+	import { duration, fade } from "$lib/util/animation";
+	import { quintOut } from "svelte/easing";
+	import type { Icon as IconType } from "lucide-svelte";
+
+	interface ModalButton {
+		text: string;
+		action: () => void;
+		primary?: boolean;
+	}
+
+	interface Props {
+		icon: typeof IconType;
+		title: string;
+		color: string;
+		buttons: ModalButton[];
+		children: () => any;
+		onclose?: () => void;
+	}
+
+	let {
+		icon: Icon,
+		title,
+		color,
+		buttons,
+		children,
+		onclose,
+	}: Props = $props();
+
+	let backdropElement = $state<HTMLDivElement>();
+
+	const handleOutsideClick = () => {
+		onclose?.();
+	};
+
+	const handleKeydown = (e: KeyboardEvent) => {
+		if (e.key === "Escape") onclose?.();
+	};
+
+	$effect(() => {
+		if (backdropElement) {
+			document.body.appendChild(backdropElement);
+			return () => {
+				if (backdropElement?.parentNode === document.body) {
+					document.body.removeChild(backdropElement);
+				}
+			};
+		}
+	});
+</script>
+
+<div
+	bind:this={backdropElement}
+	class="fixed inset-0 flex items-center justify-center bg-black/50 backdrop-blur-sm z-[400]"
+	onclick={handleOutsideClick}
+	onkeydown={handleKeydown}
+	role="dialog"
+	tabindex="0"
+	aria-modal="true"
+	in:fade={{
+		duration,
+		easing: quintOut,
+	}}
+	out:fade={{
+		duration,
+		easing: quintOut,
+	}}
+>
+	<div
+		onclick={(e) => e.stopPropagation()}
+		onkeydown={() => {}}
+		tabindex="0"
+		role="dialog"
+		class="flex flex-col items-center justify-between w-full max-w-lg p-5 gap-6 bg-panel rounded-lg shadow-md"
+		in:fade={{
+			duration,
+			easing: quintOut,
+		}}
+		out:fade={{
+			duration,
+			easing: quintOut,
+		}}
+	>
+		<div class="flex justify-between w-full items-center">
+			<div class="flex items-center gap-3">
+				<div
+					class="rounded-full bg-accent-{color} p-2 inline-block w-8 h-8"
+				>
+					<Icon size="16" color="black" />
+				</div>
+				<p class="text-lg font-semibold">{title}</p>
+			</div>
+		</div>
+
+		<div class="flex flex-col gap-1 w-full text-sm font-normal text-muted">
+			{@render children()}
+		</div>
+
+		<div class="flex flex-row items-center gap-4 w-full">
+			{#each buttons as { text, action, primary }, i}
+				<button
+					class="hover:scale-105 active:scale-100 duration-200 flex items-center gap-2 p-2 rounded-md {primary ||
+					i === 1
+						? `text-black bg-accent-${color}`
+						: 'bg-button text-black dynadark:text-white'} px-6"
+					onclick={() => action()}
+				>
+					{text}
+				</button>
+			{/each}
+		</div>
+	</div>
+</div>

src/lib/components/layout/Dialogs.svelte

@@ -16,7 +16,7 @@
 
 {#if dialogList.length > 0}
 	<div
-		class="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 backdrop-blur-sm z-40"
+		class="fixed inset-0 flex items-center justify-center bg-black/50 backdrop-blur-sm z-40"
 		in:fade={{
 			duration,
 			easing: quintOut,

src/lib/types/file.svelte.ts

@@ -97,6 +97,14 @@ export class VertFile {
 		this.blobUrl = blobUrl;
 	}
 
+	public settings() {
+		// settings modal
+		// images - quality/compression/quantize/interlace/depth-DPI, resize, crop, rotate, flip/flop, autoOrient?, color space/bit depth, transparency settings
+		// audio - bitrate, sample rate, channels, normalize, trim silence
+		// video - bitrate, fps, resolution, trim, crop, rotate, flip/flop, audio settings?
+		// common - metadata?
+	}
+
 	// eslint-disable-next-line @typescript-eslint/no-explicit-any
 	public async convert(...args: any[]) {
 		if (!this.converters.length) throw new Error("No converters found");

src/routes/convert/+page.svelte

@@ -179,7 +179,8 @@
 					<ProgressBar
 						min={0}
 						max={100}
-						progress={currentConverter?.reportsProgress || file.isZip()
+						progress={currentConverter?.reportsProgress ||
+						file.isZip()
 							? file.progress
 							: null}
 					/>