From 343d5f2d65084ab51bcffe99bab13c01db6d0975 Mon Sep 17 00:00:00 2001
From: Maya <jovannmc@femboyfurry.net>
Date: Mon, 4 May 2026 15:27:29 +0300
Subject: [PATCH] feat: ui of image sequence/fps in format dropdown

---
 messages/en.json                              |   4 +
 .../components/functional/FancyInput.svelte   | 102 ++++++++++--------
 .../functional/FormatDropdown.svelte          |  24 ++++-
 src/lib/css/app.scss                          |   2 +-
 4 files changed, 84 insertions(+), 48 deletions(-)

diff --git a/messages/en.json b/messages/en.json
index 6fb0e81..fffca5a 100644
--- a/messages/en.json
+++ b/messages/en.json
@@ -59,6 +59,10 @@
 			"image": "image",
 			"extract_error": "Error extracting {filename}: {error}"
 		},
+		"image_sequence": {
+			"image_sequence": "Image Sequence",
+			"fps": "FPS"
+		},
 		"large_file_warning": "Due to browser / device limitations, video to audio conversion is disabled for this file as it is larger than {limit}GB. We recommend using Firefox or Safari for files of this size since they have less limitations.",
 		"external_warning": {
 			"title": "External server warning",
diff --git a/src/lib/components/functional/FancyInput.svelte b/src/lib/components/functional/FancyInput.svelte
index 8f1b7ce..6a81085 100644
--- a/src/lib/components/functional/FancyInput.svelte
+++ b/src/lib/components/functional/FancyInput.svelte
@@ -1,24 +1,29 @@
 <script lang="ts">
-	import type { HTMLInputAttributes } from "svelte/elements";
-
-	interface Props extends Omit<
-		HTMLInputAttributes,
-		keyof HTMLInputAttributes
-	> {
+	interface Props {
+		class?: string;
+		value?: string | number;
+		checked?: boolean;
+		type?: string;
+		disabled?: boolean | null;
 		extension?: string;
 		prefix?: string;
-		// eslint-disable-next-line @typescript-eslint/no-explicit-any
-		[key: string]: any;
+		inputClass?: string;
+		thin?: boolean;
+		multiline?: boolean;
+		[name: string]: unknown;
 	}
 
 	let {
 		class: className,
+		inputClass,
+		bgColor = "bg-panel",
 		value = $bindable(),
 		checked = $bindable(),
 		type = "text",
 		disabled = false,
 		extension,
 		prefix,
+		thin = false,
 		multiline = false,
 		...rest
 	}: Props = $props();
@@ -26,54 +31,54 @@
 
 <div class="relative flex w-full {className}">
 	{#if type === "checkbox"}
-		<div class="relative w-full h-full">
-			<input
-				{...rest}
-				type="checkbox"
-				bind:checked
-				{disabled}
-				class="w-full p-3 rounded-lg bg-panel border-2 border-button
+		<input
+			{...rest}
+			type="checkbox"
+			bind:checked
+			{disabled}
+			class="w-full p-3 rounded-lg border-2 border-button
+				{bgColor}
 				{prefix ? 'pl-[2rem]' : 'pl-3'} 
 				{extension ? 'pr-[4rem]' : 'pr-3'}
-				{disabled && 'opacity-50 cursor-not-allowed'} appearance-none"
-			/>
-			{#if checked}
-				<div
-					class="absolute w-7 h-7 inset-0 flex items-center justify-center pointer-events-none"
-				>
-					<svg
-						class="w-6 h-6"
-						fill="var(--bg-panel)"
-						viewBox="0 0 20 20"
-					>
-						<path
-							fill-rule="evenodd"
-							d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
-							clip-rule="evenodd"
-						/>
-					</svg>
-				</div>
-			{/if}
-		</div>
+				{disabled && 'opacity-50 cursor-not-allowed'} appearance-none
+				{inputClass}"
+		/>
+		{#if checked}
+			<div
+				class="absolute w-7 h-7 inset-0 flex items-center justify-center pointer-events-none"
+			>
+				<svg class="w-6 h-6" fill="var(--bg-panel)" viewBox="0 0 20 20">
+					<path
+						fill-rule="evenodd"
+						d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+						clip-rule="evenodd"
+					/>
+				</svg>
+			</div>
+		{/if}
 	{:else if multiline}
 		<textarea
 			{...rest}
 			bind:value
 			{disabled}
-			class="w-full p-3 rounded-lg bg-panel border-2 border-button
-					{prefix ? 'pl-[2rem]' : 'pl-3'} 
-					{extension ? 'pr-[4rem]' : 'pr-3'}
-					{disabled && 'opacity-50 cursor-not-allowed'}"
+			class="w-full rounded-lg bg-panel border-2 border-button
+					{thin ? 'py-1.5' : 'p-3'}
+					{prefix ? 'pl-[2rem]' : thin ? 'pl-2.5' : 'pl-3'}
+					{extension ? (thin ? 'pr-[3.5rem]' : 'pr-[4rem]') : thin ? 'pr-2.5' : 'pr-3'}
+					{disabled && 'opacity-50 cursor-not-allowed'}
+					{inputClass}"
 		></textarea>
 	{:else}
 		<input
 			{...rest}
 			bind:value
 			{disabled}
-			class="w-full p-3 rounded-lg bg-panel border-2 border-button
-					{prefix ? 'pl-[2rem]' : 'pl-3'} 
-					{extension ? 'pr-[4rem]' : 'pr-3'}
-					{disabled && 'opacity-50 cursor-not-allowed'}"
+			class="w-full rounded-lg bg-panel border-2 border-button
+					{thin ? 'py-1.5' : 'p-3'}
+					{prefix ? 'pl-[2rem]' : thin ? 'pl-2.5' : 'pl-3'}
+					{extension ? (thin ? 'pr-[3rem]' : 'pr-[4rem]') : thin ? 'pr-2.5' : 'pr-3'}
+					{disabled && 'opacity-50 cursor-not-allowed'}
+					{inputClass}"
 		/>
 	{/if}
 
@@ -84,10 +89,15 @@
 		</div>
 	{/if}
 	{#if extension}
-		<div class="absolute right-0 top-0 bottom-0 flex items-center px-4">
+		<div
+			class="absolute right-0 top-0 bottom-0 flex items-center {thin
+				? 'px-2'
+				: 'px-4'}"
+		>
 			<span
-				class="text-sm bg-button text-black dynadark:text-white px-2 py-1 rounded"
-				>{extension}</span
+				class="bg-button text-black dynadark:text-white rounded {thin
+					? 'text-xs px-2 py-0.5'
+					: 'text-sm px-2 py-1'}">{extension}</span
 			>
 		</div>
 	{/if}
diff --git a/src/lib/components/functional/FormatDropdown.svelte b/src/lib/components/functional/FormatDropdown.svelte
index f245405..7b1b2a4 100644
--- a/src/lib/components/functional/FormatDropdown.svelte
+++ b/src/lib/components/functional/FormatDropdown.svelte
@@ -10,6 +10,7 @@
 	import { VertFile } from "$lib/types";
 	import SettingsModal from "./popups/SettingsModal.svelte";
 	import { log } from "$lib/util/logger";
+	import FancyInput from "./FancyInput.svelte";
 
 	type Props = {
 		categories: Categories;
@@ -488,13 +489,34 @@
 			<!-- format options -->
 			<!-- TODO: image sequence & fps -->
 			{#if file?.name.toLowerCase().endsWith(".zip")}
-				<div class="border-t border-separator text-base p-2">
+				<div
+					class="flex flex-col gap-2 p-2 border-t border-separator text-base"
+				>
 					<button
 						class="w-full p-2 text-center rounded-lg bg-accent text-black"
 						onclick={() => extract()}
 					>
 						{m["convert.archive_file.extract"]()}
 					</button>
+					<div class="flex items-center gap-3">
+						<div
+							class="flex items-center gap-2 flex-1 min-w-0 h-full"
+						>
+							<FancyInput type="checkbox" class="!w-fit" />
+							<label for="extract-sequence" class="text-sm">
+								{m["convert.image_sequence.image_sequence"]()}
+							</label>
+						</div>
+						<div class="w-[80px] shrink-0">
+							<FancyInput
+								thin
+								inputClass="!h-9 !text-xs"
+								type="number"
+								extension="FPS"
+								placeholder="15"
+							/>
+						</div>
+					</div>
 				</div>
 			{:else}
 				<div class="border-t border-separator text-base p-2">
diff --git a/src/lib/css/app.scss b/src/lib/css/app.scss
index 97e8880..49cbb84 100644
--- a/src/lib/css/app.scss
+++ b/src/lib/css/app.scss
@@ -398,7 +398,7 @@ body {
 	}
 
 	input[type="checkbox"] {
-		@apply appearance-none w-5 h-5 rounded-md bg-button border-2 border-button cursor-pointer transition-colors duration-200;
+		@apply appearance-none w-5 h-5 rounded-md border-2 border-button cursor-pointer transition-colors duration-200;
 	}
 
 	input[type="checkbox"]:hover {