Fix gradient showing w/ one file

src/lib/store/index.svelte.ts

@@ -5,6 +5,7 @@ import { VertFile } from "$lib/types";
 import JSCookie from "js-cookie";
 import jsmediatags from "jsmediatags";
 import type { TagType } from "jsmediatags/types";
+import { writable } from "svelte/store";
 
 class Files {
 	public files = $state<VertFile[]>([]);
@@ -161,8 +162,8 @@ class Files {
 			const date = new Date().toISOString();
 			return name
 				.replace(/%date%/g, date)
-				.replace(/%name%/g, 'Multi')
-				.replace(/%extension%/g, '');
+				.replace(/%name%/g, "Multi")
+				.replace(/%extension%/g, "");
 		};
 
 		const a = document.createElement("a");
@@ -216,3 +217,4 @@ class Theme {
 
 export const files = new Files();
 export const theme = new Theme();
+export const showGradient = writable(true);

src/routes/+layout.svelte

@@ -6,7 +6,7 @@
 	import Navbar from "$lib/components/functional/Navbar.svelte";
 	import Footer from "$lib/components/visual/Footer.svelte";
 	import Logo from "$lib/components/visual/svg/Logo.svelte";
-	import { files } from "$lib/store/index.svelte";
+	import { files, showGradient } from "$lib/store/index.svelte";
 	import {
 		InfoIcon,
 		RefreshCw,
@@ -106,7 +106,7 @@
 			data-domain={PUB_HOSTNAME || "vert.sh"}
 			src="{PUB_PLAUSIBLE_URL}/js/script.pageview-props.tagged-events.js"
 		></script>{/if}
-		<script src="/coi-serviceworker.min.js"></script>
+	<script src="/coi-serviceworker.min.js"></script>
 </svelte:head>
 
 <div class="flex flex-col min-h-screen h-full">
@@ -176,24 +176,31 @@
 	</div>
 </div>
 
-{#if data.pathname === "/"}
-	<div
-		class="fixed top-0 left-0 w-screen h-screen -z-40 pointer-events-none"
-		style="background: var(--bg-gradient);"
-	></div>
-{:else if data.pathname === "/convert"}
-	<div
-		class="fixed top-0 left-0 w-screen h-screen -z-40 pointer-events-none"
-		style="background: var(--bg-gradient-pink);"
-	></div>
-{:else if data.pathname === "/settings"}
-	<div
-		class="fixed top-0 left-0 w-screen h-screen -z-40 pointer-events-none"
-		style="background: var(--bg-gradient-blue);"
-	></div>
-{:else if data.pathname === "/about"}
-	<div
-		class="fixed top-0 left-0 w-screen h-screen -z-40 pointer-events-none"
-		style="background: var(--bg-gradient-pink);"
-	></div>
+<!-- Gradients placed here to prevent it overlapping in transitions -->
+{#if $showGradient}
+	{#if data.pathname === "/"}
+		<div
+			id="gradient-bg"
+			class="fixed top-0 left-0 w-screen h-screen -z-40 pointer-events-none"
+			style="background: var(--bg-gradient);"
+		></div>
+	{:else if data.pathname === "/convert"}
+		<div
+			id="gradient-bg"
+			class="fixed top-0 left-0 w-screen h-screen -z-40 pointer-events-none"
+			style="background: var(--bg-gradient-pink);"
+		></div>
+	{:else if data.pathname === "/settings"}
+		<div
+			id="gradient-bg"
+			class="fixed top-0 left-0 w-screen h-screen -z-40 pointer-events-none"
+			style="background: var(--bg-gradient-blue);"
+		></div>
+	{:else if data.pathname === "/about"}
+		<div
+			id="gradient-bg"
+			class="fixed top-0 left-0 w-screen h-screen -z-40 pointer-events-none"
+			style="background: var(--bg-gradient-pink);"
+		></div>
+	{/if}
 {/if}

src/routes/convert/+page.svelte

@@ -6,7 +6,8 @@
 	import ProgressiveBlur from "$lib/components/visual/effects/ProgressiveBlur.svelte";
 	import Panel from "$lib/components/visual/Panel.svelte";
 	import ProgressBar from "$lib/components/visual/ProgressBar.svelte";
-	import { files } from "$lib/store/index.svelte";
+	import { log } from "$lib/logger";
+	import { files, showGradient } from "$lib/store/index.svelte";
 	import { VertFile } from "$lib/types";
 	import {
 		Disc2Icon,
@@ -17,6 +18,16 @@
 		XIcon,
 	} from "lucide-svelte";
 	import { quintOut } from "svelte/easing";
+
+	$effect(() => {
+		if (files.files.length === 1 && files.files[0].blobUrl) {
+			log("blur", "Applying blur effect");
+			showGradient.set(false);
+		} else {
+			log("blur", "Removing blur effect");
+			showGradient.set(true);
+		}
+	});
 </script>
 
 {#snippet fileItem(file: VertFile, index: number)}
@@ -121,7 +132,9 @@
 	>
 		{#each files.files as file, i (file.id)}
 			{#if files.files.length >= 2 && i === 1}
-				<Uploader class="w-full h-full col-start-1 row-start-1 md:col-start-2" />
+				<Uploader
+					class="w-full h-full col-start-1 row-start-1 md:col-start-2"
+				/>
 			{/if}
 			{@render fileItem(file, i)}
 			{#if files.files.length < 2}