From b32ec67beebeb9dbbfa42a7423d3a76100268b0e Mon Sep 17 00:00:00 2001
From: Maya <jovannmc@femboyfurry.net>
Date: Sun, 15 Feb 2026 17:51:26 +0300
Subject: [PATCH] fix: forgor async oops

---
 bun.lock                                      |   9 +-
 messages/en.json                              |   1 +
 .../functional/SettingsModal.svelte           | 156 +++++++++---------
 src/lib/types/file.svelte.ts                  |   6 +-
 4 files changed, 85 insertions(+), 87 deletions(-)

diff --git a/bun.lock b/bun.lock
index 355ea6b..4de3d09 100644
--- a/bun.lock
+++ b/bun.lock
@@ -1,5 +1,6 @@
 {
   "lockfileVersion": 1,
+  "configVersion": 0,
   "workspaces": {
     "": {
       "name": "vert",
@@ -17,7 +18,7 @@
         "clsx": "^2.1.1",
         "fflate": "^0.8.2",
         "lucide-svelte": "^0.554.0",
-        "music-metadata": "^11.10.1",
+        "music-metadata": "^11.10.3",
         "overlayscrollbars": "^2.12.0",
         "overlayscrollbars-svelte": "^0.5.5",
         "p-queue": "^9.0.1",
@@ -31,7 +32,7 @@
         "@inlang/paraglide-js": "^2.5.0",
         "@poppanator/sveltekit-svg": "^5.0.1",
         "@sveltejs/adapter-static": "^3.0.10",
-        "@sveltejs/kit": "^2.48.5",
+        "@sveltejs/kit": "^2.49.0",
         "@sveltejs/vite-plugin-svelte": "^4.0.4",
         "@types/eslint": "^9.6.1",
         "@types/sanitize-html": "^2.16.0",
@@ -44,8 +45,8 @@
         "prettier": "^3.6.2",
         "prettier-plugin-svelte": "^3.4.0",
         "prettier-plugin-tailwindcss": "^0.6.14",
-        "sass": "^1.94.1",
-        "svelte": "^5.43.12",
+        "sass": "^1.94.2",
+        "svelte": "^5.43.14",
         "svelte-check": "^4.3.4",
         "tailwindcss": "^3.4.18",
         "typescript": "^5.9.3",
diff --git a/messages/en.json b/messages/en.json
index 84e724c..279503d 100644
--- a/messages/en.json
+++ b/messages/en.json
@@ -84,6 +84,7 @@
 		"settings": {
 			"settings": "Settings",
 			"title": "File conversion settings",
+			"description": "Change the conversion settings for <b>{filename}</b>, which is using <b>{converter}</b>. These settings may not be available for all formats.",
 			"image": {
 				"quality": "Quality",
 				"depth": "Color depth",
diff --git a/src/lib/components/functional/SettingsModal.svelte b/src/lib/components/functional/SettingsModal.svelte
index 09d7fe6..80e97dd 100644
--- a/src/lib/components/functional/SettingsModal.svelte
+++ b/src/lib/components/functional/SettingsModal.svelte
@@ -5,6 +5,7 @@
 	import Modal from "./Modal.svelte";
 	import { m } from "$lib/paraglide/messages";
 	import type { VertFile } from "$lib/types";
+	import { sanitize } from "$lib/store/index.svelte";
 
 	type Props = {
 		file: VertFile | null;
@@ -35,7 +36,7 @@
 
 <Modal
 	icon={SearchIcon}
-	title="Conversion Settings"
+	title={m["convert.settings.title"]()}
 	color="purple"
 	buttons={[
 		{
@@ -51,89 +52,84 @@
 	onclose={() => onclose?.()}
 >
 	<div class="flex flex-col gap-8">
-		{#if !file}
-			<p class="text-sm text-muted">No file selected</p>
-		{:else}
-			{@const settings = file.getAvailableSettings()}
-			<div class="flex flex-col gap-4">
-				<div class="flex flex-col gap-2">
-					<p class="text-base font-bold">
-						{m["settings.conversion.title"]?.() ||
-							"Conversion Settings"}
+		{#if file}
+			{#await file.getAvailableSettings() then settings}
+				<div class="flex flex-col gap-4">
+					<p class="text-base">
+						{@html sanitize(
+							m["convert.settings.description"]({
+								converter: file.findConverter()?.name,
+								filename: file.name,
+							}),
+						)}
 					</p>
-					<p class="text-sm text-muted font-normal">
-						{m["settings.conversion.description"]?.() ||
-							`Configure conversion options for ${file.name}`}
-					</p>
-				</div>
 
-				{#if settings.length === 0}
-					<p class="text-sm text-muted">
-						{m["settings.conversion.no_settings"]?.() ||
-							"No settings available for this converter"}
-					</p>
-				{:else}
-					<div class="grid grid-cols-2 gap-4">
-						{#each settings as setting (setting.key)}
-							<div class="flex flex-col gap-2">
-								<p class="text-sm font-bold">
-									{setting.label}
-								</p>
-								<!-- prob unneeded -->
-								{#if setting.description}
-									<p class="text-xs text-muted">
-										{setting.description}
+					{#if settings.length === 0}
+						<p class="text-sm text-muted">
+							{m["convert.settings.none"]()}
+						</p>
+					{:else}
+						<div class="grid grid-cols-2 gap-4">
+							{#each settings as setting (setting.key)}
+								<div class="flex flex-col gap-2">
+									<p class="text-sm font-bold">
+										{setting.label}
 									</p>
-								{/if}
+									<!-- prob unneeded -->
+									{#if setting.description}
+										<p class="text-xs text-muted">
+											{setting.description}
+										</p>
+									{/if}
 
-								{#if setting.type === "select"}
-									<Dropdown
-										options={setting.options?.map(
-											(opt) => opt.value,
-										) || []}
-										selected={file.conversionSettings[
-											setting.key
-										] ?? setting.default}
-										settingsStyle
-										onselect={(value) =>
-											handleSettingChange(
-												setting.key,
-												value,
-											)}
-									/>
-								{:else if setting.type === "boolean"}
-									<FancyInput
-										type="checkbox"
-										checked={file.conversionSettings[
-											setting.key
-										] ?? setting.default}
-										placeholder={setting.placeholder}
-										onchange={(e) =>
-											handleSettingChange(
-												setting.key,
-												e.currentTarget.checked,
-											)}
-										
-									/>
-								{:else}
-									<FancyInput
-										type={setting.type}
-										value={file.conversionSettings[
-											setting.key
-										] ?? setting.default}
-										placeholder={setting.placeholder}
-										oninput={(e) =>
-											handleSettingChange(
-												setting.key,
-												e.currentTarget.value,
-											)}
-									/>
-								{/if}
-							</div>
-						{/each}
-					</div>
-				{/if}
-			</div>
+									{#if setting.type === "select"}
+										<Dropdown
+											options={setting.options?.map(
+												(opt) => opt.value,
+											) || []}
+											selected={file.conversionSettings[
+												setting.key
+											] ?? setting.default}
+											settingsStyle
+											onselect={(value) =>
+												handleSettingChange(
+													setting.key,
+													value,
+												)}
+										/>
+									{:else if setting.type === "boolean"}
+										<FancyInput
+											type="checkbox"
+											checked={file.conversionSettings[
+												setting.key
+											] ?? setting.default}
+											placeholder={setting.placeholder}
+											onchange={(e) =>
+												handleSettingChange(
+													setting.key,
+													e.currentTarget.checked,
+												)}
+										/>
+									{:else}
+										<FancyInput
+											type={setting.type}
+											value={file.conversionSettings[
+												setting.key
+											] ?? setting.default}
+											placeholder={setting.placeholder}
+											oninput={(e) =>
+												handleSettingChange(
+													setting.key,
+													e.currentTarget.value,
+												)}
+										/>
+									{/if}
+								</div>
+							{/each}
+						</div>
+					{/if}
+				</div>
+			{/await}
 		{/if}
 	</div>
 </Modal>
diff --git a/src/lib/types/file.svelte.ts b/src/lib/types/file.svelte.ts
index 426348a..5b25bd8 100644
--- a/src/lib/types/file.svelte.ts
+++ b/src/lib/types/file.svelte.ts
@@ -39,10 +39,10 @@ export class VertFile {
 
 	public isZip = $state(() => this.from === ".zip");
 
-	public getAvailableSettings(): SettingDefinition[] {
+	public getAvailableSettings(): Promise<SettingDefinition[]> {
 		const converter = this.findConverter();
-		if (!converter) return [];
-		return converter.getAvailableSettings(this);
+		if (!converter) return Promise.resolve([]);
+		return converter.getAvailableSettings();
 	}
 
 	public findConverters(supportedFormats: string[] = [this.from]) {