Complete settings

allow changing of file name format, w/ variables

src/lib/sections/settings/Conversion.svelte

@@ -1,9 +1,24 @@
 <script lang="ts">
+	import { browser } from "$app/environment";
 	import FancyTextInput from "$lib/components/functional/FancyInput.svelte";
 	import Panel from "$lib/components/visual/Panel.svelte";
+	import { log } from "$lib/logger";
 	import { RefreshCwIcon, SaveAllIcon } from "lucide-svelte";
+	import { onMount } from "svelte";
 
-	let value = $state("");
+	let filenameFormat = "VERT_%name%";
+
+	function save() {
+		log(["settings"], "Saving settings");
+		if (!browser) return;
+		localStorage.setItem("filenameFormat", filenameFormat);
+		log(["settings"], `Saving filename format: ${filenameFormat}`);
+	}
+
+	onMount(() => {
+		const format = localStorage.getItem("filenameFormat");
+		if (format) filenameFormat = format;
+	});
 </script>
 
 <Panel class="flex flex-col gap-8 p-6">
@@ -37,7 +52,7 @@
 				</div>
 				<FancyTextInput
 					placeholder="VERT_%name%"
-					bind:value
+					bind:value={filenameFormat}
 					extension=".ext"
 					type="text"
 				/>
@@ -56,6 +71,7 @@
 
 			<div class="flex justify-end">
 				<button
+					onclick={save}
 					class="w-fit btn px-6 py-4 rounded-3xl bg-accent text-black flex items-center justify-center"
 				>
 					<SaveAllIcon size="24" class="inline-block mr-2" />

src/lib/types/file.svelte.ts

@@ -48,6 +48,20 @@ export class VertFile {
 
 	public async download() {
 		if (!this.result) throw new Error("No result found");
+
+		const filenameFormat =
+			localStorage.getItem("filenameFormat") ?? "VERT_%name%";
+
+		const format = (name: string) => {
+			const date = new Date().toISOString();
+			const baseName = this.file.name.replace(/\.[^/.]+$/, "");
+			const originalExtension = this.file.name.split('.').pop()!;
+			return name
+				.replace(/%date%/g, date)
+				.replace(/%name%/g, baseName)
+				.replace(/%extension%/g, originalExtension);
+		};
+
 		const blob = URL.createObjectURL(
 			new Blob([await this.result.file.arrayBuffer()], {
 				type: this.to.slice(1),
@@ -55,7 +69,7 @@ export class VertFile {
 		);
 		const a = document.createElement("a");
 		a.href = blob;
-		a.download = `VERT-Converted_${new Date().toISOString()}${this.to}`;
+		a.download = `${format(filenameFormat)}${this.to}`;
 		// force it to not open in a new tab
 		a.target = "_blank";
 		a.style.display = "none";