Merge branch 'nightly'

src/lib/components/layout/Gradients.svelte

@@ -2,7 +2,11 @@
 	import { page } from "$app/state";
 	import { duration } from "$lib/animation";
 	import VertVBig from "$lib/assets/vert-bg.svg?component";
-	import { files, gradientColor, showGradient } from "$lib/store/index.svelte";
+	import {
+		files,
+		gradientColor,
+		showGradient,
+	} from "$lib/store/index.svelte";
 	import { quintOut } from "svelte/easing";
 	import { fade } from "$lib/animation";
 </script>
@@ -90,4 +94,4 @@
 			easing: quintOut,
 		}}
 	></div>
-{/if}
+{/if}

src/lib/converters/ffmpeg.svelte.ts

@@ -32,6 +32,7 @@ export class FFmpegConverter extends Converter {
 		log(["converters", this.name], `created converter`);
 		if (!browser) return;
 		try {
+			// this is just to cache the wasm and js for when we actually use it. we're not using this ffmpeg instance
 			this.ffmpeg = new FFmpeg();
 			(async () => {
 				const baseURL =
@@ -40,7 +41,6 @@ export class FFmpegConverter extends Converter {
 					coreURL: `${baseURL}/ffmpeg-core.js`,
 					wasmURL: `${baseURL}/ffmpeg-core.wasm`,
 				});
-				// this is just to cache the wasm and js for when we actually use it. we're not using this ffmpeg instance
 				this.ready = true;
 			})();
 		} catch (err) {

src/lib/sections/about/Vertd.svelte

@@ -1,8 +1,26 @@
 <script lang="ts">
 	import Panel from "$lib/components/visual/Panel.svelte";
-	import { PiggyBankIcon } from "lucide-svelte";
+	import { PiggyBankIcon, CopyIcon, CheckIcon } from "lucide-svelte";
 	import HotMilk from "$lib/assets/hotmilk.svg?component";
 	import { DISCORD_URL } from "$lib/consts";
+	import { error } from "$lib/logger";
+	import { addToast } from "$lib/store/ToastProvider";
+
+	let copied = false;
+	let timeoutId: number | undefined;
+
+	function copyToClipboard() {
+		try {
+			navigator.clipboard.writeText("hello@vert.sh");
+			copied = true;
+			addToast("success", "Email copied to clipboard!");
+
+			if (timeoutId) clearTimeout(timeoutId);
+			timeoutId = setTimeout(() => (copied = false), 2000);
+		} catch (err) {
+			error(`Failed to copy email: ${err}`);
+		}
+	}
 </script>
 
 <Panel class="flex flex-col gap-3 p-6 min-h-[280px]">
@@ -28,7 +46,33 @@
 			Want to support us? Contact a developer in the <a
 				href={DISCORD_URL}
 				target="_blank">Discord</a
-			> server!
+			>
+			server, or send an email to
+			<span class="inline-block mx-[2px] relative top-[2px]">
+				<button
+					id="email"
+					class="flex items-center gap-[6px] cursor-pointer"
+					onclick={copyToClipboard}
+					aria-label="Copy email to clipboard"
+				>
+					{#if copied}
+						<CheckIcon size="14"></CheckIcon>
+					{:else}
+						<CopyIcon size="14"></CopyIcon>
+					{/if}
+					hello@vert.sh
+				</button>
+			</span>!
 		</p>
 	</div>
 </Panel>
+
+<style>
+	#email {
+		@apply font-mono bg-gray-200 rounded-md px-1 text-inherit no-underline dynadark:bg-panel-alt dynadark:text-white;
+	}
+
+	#email:hover {
+		@apply font-mono !bg-accent !text-black rounded-md px-1 duration-200;
+	}
+</style>

src/routes/+layout.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { onMount } from "svelte";
-	import { goto } from "$app/navigation";
+	import { goto, beforeNavigate, afterNavigate } from "$app/navigation";
 
 	import { PUB_PLAUSIBLE_URL, PUB_HOSTNAME } from "$env/static/public";
 	import { VERT_NAME } from "$lib/consts";
@@ -20,6 +20,21 @@
 	let { children } = $props();
 	let enablePlausible = $state(false);
 
+	let scrollPositions = new Map<string, number>();
+
+	beforeNavigate((nav) => {
+		if (!nav.from || !$isMobile) return;
+		scrollPositions.set(nav.from.url.pathname, window.scrollY);
+	});
+
+	afterNavigate((nav) => {
+		if (!$isMobile) return;
+		const scrollY = nav.to
+			? scrollPositions.get(nav.to.url.pathname) || 0
+			: 0;
+		window.scrollTo(0, scrollY);
+	});
+
 	const dropFiles = (e: DragEvent) => {
 		e.preventDefault();
 		dropping.set(false);
@@ -49,7 +64,8 @@
 
 	$effect(() => {
 		// Enable plausible if enabled
-		enablePlausible = !!PUB_PLAUSIBLE_URL && Settings.instance.settings.plausible;
+		enablePlausible =
+			!!PUB_PLAUSIBLE_URL && Settings.instance.settings.plausible;
 	});
 </script>
 

src/routes/+page.svelte

@@ -11,17 +11,29 @@
 
 	import Uploader from "$lib/components/functional/Uploader.svelte";
 	import { converters } from "$lib/converters";
+	import { vertdLoaded } from "$lib/store/index.svelte";
 	import { AudioLines, Check, Film, Image } from "lucide-svelte";
 
 	const getSupportedFormats = (name: string) =>
 		converters.find((c) => c.name === name)?.supportedFormats.join(", ") ||
 		"none";
 
-	const supportedFormats = {
-		images: getSupportedFormats("libvips"),
-		audio: getSupportedFormats("ffmpeg"),
-		video: getSupportedFormats("vertd"),
-	};
+	const status = $derived({
+		images: {
+			ready: converters.find((c) => c.name === "libvips")?.ready,
+			formats: getSupportedFormats("libvips"),
+		},
+		audio: {
+			ready: converters.find((c) => c.name === "ffmpeg")?.ready,
+			formats: getSupportedFormats("ffmpeg"),
+		},
+		video: {
+			ready:
+				converters.find((c) => c.name === "vertd")?.ready &&
+				$vertdLoaded,
+			formats: getSupportedFormats("vertd"),
+		},
+	});
 </script>
 
 <div class="max-w-6xl w-full mx-auto px-6 md:px-8">
@@ -66,9 +78,13 @@
 					<p class="flex items-center justify-center gap-2">
 						<Check size="20" /> Fully supported
 					</p>
+					<p>
+						<b>Status: </b>
+						{status.images.ready ? "ready" : "not ready"}
+					</p>
 					<p>
 						<b>Supported formats:</b>
-						{supportedFormats.images}
+						{status.images.formats}
 					</p>
 				</div>
 			</div>
@@ -85,9 +101,13 @@
 					<p class="flex items-center justify-center gap-2">
 						<Check size="20" /> Fully supported
 					</p>
+					<p>
+						<b>Status: </b>
+						{status.audio.ready ? "ready" : "not ready"}
+					</p>
 					<p>
 						<b>Supported formats:</b>
-						{supportedFormats.audio}
+						{status.audio.formats}
 					</p>
 				</div>
 			</div>
@@ -107,7 +127,14 @@
 							>Learn more</a
 						>.
 					</p>
-					<p><b>Supported formats:</b> {supportedFormats.video}</p>
+					<p>
+						<b>Status: </b>
+						{status.video.ready ? "ready" : "not ready"}
+					</p>
+					<p>
+						<b>Supported formats:</b>
+						{status.video.formats}
+					</p>
 				</div>
 			</div>
 		</div>