feat: global settings modal, logging fixes

messages/en.json

@@ -88,6 +88,7 @@
 			"settings": "Settings",
 			"title": "File conversion settings",
 			"description": "Change the conversion settings for <b>{filename}</b> with the selected converter. These settings may not be available for all formats. <b>This is an early beta and may have some issues.</b>",
+			"all_files": "all files",
 			"none": "No settings available for this format.",
 			"converter": "Converter",
 			"image": {

src/lib/components/functional/FormatDropdown.svelte

@@ -290,7 +290,10 @@
 	};
 
 	const settings = () => {
-		if (!file) return;
+		log(
+			["dropdown", "settings"],
+			`opening settings modal for ${file?.name ?? "all files"}`,
+		);
 		showSettingsModal = true;
 	};
 
@@ -316,7 +319,7 @@
 	});
 </script>
 
-{#if showSettingsModal && file}
+{#if showSettingsModal}
 	<SettingsModal {file} onclose={() => (showSettingsModal = false)} />
 {/if}
 
@@ -442,6 +445,7 @@
 							: 'border-b-separator text-muted'}"
 						onclick={() => selectCategory(category)}
 					>
+						<!-- eslint-disable-next-line @typescript-eslint/no-explicit-any -->
 						{(m as any)[`convert.dropdown.${category}`]?.()}
 					</button>
 				{/each}
@@ -481,7 +485,7 @@
 						{m["convert.archive_file.extract"]()}
 					</button>
 				</div>
-			{:else if file}
+			{:else}
 				<div class="border-t border-separator text-base p-2">
 					<button
 						class="w-full p-2 text-center rounded-lg bg-accent text-black"

src/lib/components/functional/popups/SettingsModal.svelte

@@ -6,17 +6,17 @@
 	import Modal from "./Modal.svelte";
 	import { m } from "$lib/paraglide/messages";
 	import type { VertFile } from "$lib/types";
-	import { sanitize } from "$lib/store/index.svelte";
+	import { files, sanitize } from "$lib/store/index.svelte";
-	import { log } from "$lib/util/logger";
+	import { log, error } from "$lib/util/logger";
 	import { type ConversionSettings } from "$lib/types/conversion-settings";
-	import { onMount } from "svelte";
 
 	type Props = {
-		file: VertFile | null;
+		file: VertFile | undefined;
 		onclose?: () => void;
 	};
 
 	let { file, onclose }: Props = $props();
+	let targetFile = $derived(file ?? files.files[0]);
 
 	const getAvailableConverters = (vertFile: VertFile) => {
 		return vertFile.isZip()
@@ -33,37 +33,63 @@
 	let settings = $state<ConversionSettings>({});
 
 	const handleSettingChange = (key: string, value: any) => {
-		if (!file) return;
 		settings[key] = value;
 	};
 
 	const applySettings = async (converterName: string) => {
-		if (!file) return;
+		const targetFiles = file ? [file] : files.files;
-		const converter = getValidConverter(file, converterName);
+		if (targetFiles.length === 0) {
-		if (!converter) {
+			error(
-			log(
 				["settings", "modal"],
-				`No converter found for ${file.name}, cannot apply settings`,
+				"no files available to apply settings to",
 			);
 			return;
 		}
-		// apply defaults, then existing settings, then new settings on top
+
-		file.conversionSettings = {
+		const firstConverter = targetFiles[0].conversionSettings.converter;
-			...(await converter.getDefaultSettings(file)),
+		const selectedConverter = converterName || firstConverter;
-			...file.conversionSettings,
+
-			...settings,
+		for (const targetFile of targetFiles) {
-		};
+			try {
-		log(
+				const converter = getValidConverter(
-			["settings", "modal"],
+					targetFile,
-			`Applied settings for ${file.name}: ${JSON.stringify(file.conversionSettings, null, 2)}`,
+					selectedConverter,
-		);
+				);
+				if (!converter) {
+					error(
+						["settings", "modal"],
+						`no converter found for ${targetFile.name}, can't apply settings`,
+					);
+					continue;
+				}
+
+				// apply defaults, then existing settings, then new settings on top
+				targetFile.conversionSettings = {
+					...(await converter.getDefaultSettings(targetFile)),
+					...targetFile.conversionSettings,
+					...settings,
+					converter: converter.name,
+				};
+				log(
+					["settings", "modal"],
+					`applied settings for ${targetFile.name}: ${JSON.stringify(targetFile.conversionSettings, null, 2)}`,
+				);
+			} catch (e) {
+				error(
+					["settings", "modal"],
+					`failed to apply settings for ${targetFile.name}: ${e}`,
+				);
+			}
+		}
 	};
 
-	onMount(() => {
+	$effect(() => {
-		if (!file) return;
+		if (!targetFile) return;
+		if (settings.converter) return;
 
-		// always have a converter initialized so we can show its settings
+		settings.converter =
-		settings.converter = getValidConverter(file)?.name;
+			targetFile.conversionSettings.converter ||
+			getValidConverter(targetFile)?.name;
 	});
 </script>
 
@@ -88,17 +114,17 @@
 	onclose={() => onclose?.()}
 >
 	<div class="flex flex-col gap-8 max-h-[calc(100vh-225px)] overflow-y-auto">
-		{#if file}
+		{#if targetFile}
-			{@const availableConverters = getAvailableConverters(file)}
+			{@const availableConverters = getAvailableConverters(targetFile)}
 			{@const validConverter = getValidConverter(
-				file,
+				targetFile,
 				settings.converter,
 			)}
 			<p class="text-base">
 				{@html sanitize(
 					m["convert.settings.description"]({
-						converter: validConverter?.name || "unknown",
+						filename:
-						filename: file.name,
+							file?.name ?? m["convert.settings.all_files"](),
 					}),
 				)}
 			</p>
@@ -120,7 +146,7 @@
 				/>
 			</div>
 			{#key settings}
-				{#await file.getAvailableSettings(file, settings.converter) then availableSettings}
+				{#await targetFile.getAvailableSettings(targetFile, settings.converter) then availableSettings}
 					<div class="flex flex-col gap-4">
 						{#if availableSettings.length === 0}
 							<p class="text-sm text-muted">
@@ -158,7 +184,8 @@
 												selected={settings[
 													setting.key
 												] ??
-													file.conversionSettings[
+													targetFile
+														.conversionSettings[
 														setting.key
 													] ??
 													setting.default}
@@ -173,7 +200,8 @@
 											{#if setting.hasCustomInput}
 												{@const disabled =
 													(settings[setting.key] ??
-														file.conversionSettings[
+														targetFile
+															.conversionSettings[
 															setting.key
 														]) !== "custom"}
 												<FancyInput
@@ -181,7 +209,8 @@
 													value={settings[
 														setting.customInputKey!
 													] ??
-														file.conversionSettings[
+														targetFile
+															.conversionSettings[
 															setting
 																.customInputKey!
 														] ??
@@ -203,7 +232,8 @@
 												checked={settings[
 													setting.key
 												] ??
-													file.conversionSettings[
+													targetFile
+														.conversionSettings[
 														setting.key
 													] ??
 													setting.default}
@@ -219,7 +249,7 @@
 											{@const rangeValue = (settings[
 												setting.key
 											] ??
-												file.conversionSettings[
+												targetFile.conversionSettings[
 													setting.key
 												] ??
 												setting.default ??
@@ -259,7 +289,8 @@
 											<FancyInput
 												type={setting.type}
 												value={settings[setting.key] ??
-													file.conversionSettings[
+													targetFile
+														.conversionSettings[
 														setting.key
 													] ??
 													setting.default}

src/lib/converters/vertd.svelte.ts

@@ -615,7 +615,7 @@ export class VertdConverter extends Converter {
 					);
 					this.log(`successfully converted webp to gif`);
 				} catch (e) {
-					this.log(`failed to convert webp to gif: ${e}`);
+					this.error(`failed to convert webp to gif: ${e}`);
 					throw e;
 				}
 			}
@@ -731,7 +731,7 @@ export class VertdConverter extends Converter {
 					}
 
 					case "error": {
-						this.log(`error: ${msg.data.message}`);
+						this.error(`error: ${msg.data.message}`);
 						this.activeConversions.delete(input.id);
 						if (hash) this.failure(hash);
 

src/lib/sections/settings/Privacy.svelte

@@ -40,7 +40,7 @@
 
 			cacheInfo = await swManager.getCacheInfo();
 		} catch (err) {
-			error(["privacy", "cache"], "Failed to load cache info:", err);
+			error(["privacy", "cache"], `Failed to load cache info: ${err}`);
 		} finally {
 			isLoadingCache = false;
 		}

src/lib/types/file.svelte.ts

@@ -139,14 +139,6 @@ export class VertFile {
 				.map((c) => c.name)
 				.join(", ")}`,
 		);
-
-		setInterval(() => {
-			log(["file", "effect"], `from: ${this.from}, to: ${this.to}`);
-			log(
-				["file", "effect"],
-				`converter status: ${this.converters.map((c) => `${c.name}: ${c.status}`).join(", ")}`,
-			);
-		}, 1000);
 	}
 
 	// eslint-disable-next-line @typescript-eslint/no-explicit-any

src/routes/settings/+page.svelte

@@ -32,7 +32,7 @@
 			Settings.Settings.instance.save();
 			log(["settings"], "saving settings");
 		} catch (error) {
-			log(["settings", "error"], `failed to save settings: ${error}`);
+			error(["settings", "error"], `failed to save settings: ${error}`);
 			ToastManager.add({
 				type: "error",
 				message: m["settings.errors.save_failed"](),