fix: clean up/use FancyInput everywhere

forgor

src/lib/components/functional/FancyInput.svelte

@@ -1,40 +1,28 @@
 <script lang="ts">
-	type Props = {
+	import type { HTMLInputAttributes } from "svelte/elements";
-		class?: string;
+
-		placeholder?: string;
+	interface Props extends HTMLInputAttributes {
-		value?: string;
-		disabled?: boolean;
 		extension?: string;
 		prefix?: string;
-		type?: string;
+	}
-		min?: number;
-		max?: number;
-	};
 
 	let {
 		class: className,
-		placeholder = "",
 		value = $bindable(),
 		disabled = false,
 		extension,
 		prefix,
-		type = "text",
+		...rest
-		min = 0,
-		max = 100,
 	}: Props = $props();
 </script>
 
 <div class="relative flex w-full {className}">
 	<input
-		{type}
+		{...rest}
-		{min}
-		{max}
 		bind:value
-		{placeholder}
-		{disabled}
 		class="w-full p-3 rounded-lg bg-panel border-2 border-button
-            {prefix ? 'pl-[2rem]' : 'pl-3'} 
+			{prefix ? 'pl-[2rem]' : 'pl-3'} 
-            {extension ? 'pr-[4rem]' : 'pr-3'}
+			{extension ? 'pr-[4rem]' : 'pr-3'}
 			{disabled && 'opacity-50 cursor-not-allowed'}"
 	/>
 	{#if prefix}

src/lib/components/functional/FormatDropdown.svelte

@@ -10,6 +10,7 @@
 	import { VertFile } from "$lib/types";
 	import Modal from "./Modal.svelte";
 	import Dropdown from "./Dropdown.svelte";
+	import FancyInput from "./FancyInput.svelte";
 
 	type Props = {
 		categories: Categories;
@@ -406,7 +407,7 @@
 
 				<div class="flex flex-col gap-2">
 					<p class="text-sm font-bold">Resolution</p>
-					<input
+					<FancyInput
 						type="text"
 						placeholder="1920x1080 or smth"
 						class="rounded-lg bg-button text-foreground p-3"
@@ -415,7 +416,7 @@
 
 				<div class="flex flex-col gap-2">
 					<p class="text-sm font-bold">Frame Rate (FPS)</p>
-					<input
+					<FancyInput
 						type="number"
 						placeholder="30"
 						class="rounded-lg bg-button text-foreground p-3"
@@ -498,7 +499,7 @@
 			<!-- search box -->
 			<div class="p-3 w-full">
 				<div class="relative">
-					<input
+					<FancyInput
 						type="text"
 						placeholder={m["convert.dropdown.placeholder"]()}
 						class="flex-grow w-full !pl-11 !pr-3 rounded-lg bg-panel text-foreground"

src/lib/sections/settings/Vertd.svelte

@@ -9,6 +9,7 @@
 	import { m } from "$lib/paraglide/messages";
 	import { link, sanitize } from "$lib/store/index.svelte";
 	import { VertdInstance, type VertdInner } from "./vertdSettings.svelte";
+	import FancyInput from "$lib/components/functional/FancyInput.svelte";
 
 	let vertdCommit = $state<string | null>(null);
 	let abortController: AbortController | null = null;
@@ -132,7 +133,7 @@
 						settingsStyle
 					/>
 					{#if VertdInstance.instance.innerData().type === "custom"}
-						<input
+						<FancyInput
 							type="text"
 							placeholder={m["settings.vertd.url_placeholder"]()}
 							bind:value={settings.vertdURL}