fix: missing gradient transitions

src/lib/components/layout/Gradients.svelte

@@ -4,12 +4,16 @@
 	import VertVBig from "$lib/assets/vert-bg.svg?component";
 	import { files, gradientColor, showGradient } from "$lib/store/index.svelte";
 	import { quintOut } from "svelte/easing";
-	import { fade } from "svelte/transition";
+	import { fade } from "$lib/animation";
 </script>
 
 {#if page.url.pathname === "/"}
 	<div
 		class="fixed -z-30 top-0 left-0 w-screen h-screen flex items-center justify-center overflow-hidden"
+		transition:fade={{
+			duration,
+			easing: quintOut,
+		}}
 	>
 		<VertVBig
 			class="fill-[--fg] opacity-10 dynadark:opacity-5 scale-[200%] md:scale-[80%]"
@@ -19,13 +23,23 @@
 		id="gradient-bg"
 		class="fixed top-0 left-0 w-screen h-screen -z-40 pointer-events-none"
 		style="background: var(--bg-gradient);"
+		transition:fade={{
+			duration,
+			easing: quintOut,
+		}}
 	></div>
 {:else if page.url.pathname === "/convert" && $showGradient}
-	<div
+	{#key $gradientColor}
-		id="gradient-bg"
+		<div
-		class="fixed top-0 left-0 w-screen h-screen -z-40 pointer-events-none"
+			id="gradient-bg"
-		style="background: var(--bg-gradient-{$gradientColor || 'pink'});"
+			class="fixed top-0 left-0 w-screen h-screen -z-40 pointer-events-none"
-	></div>
+			style="background: var(--bg-gradient-{$gradientColor || 'pink'});"
+			transition:fade={{
+				duration,
+				easing: quintOut,
+			}}
+		></div>
+	{/key}
 {:else if page.url.pathname === "/convert" && files.files.length === 1 && files.files[0].blobUrl}
 	<div
 		class="fixed w-screen h-screen opacity-75 overflow-hidden top-0 left-0 -z-50 pointer-events-none grid grid-cols-1 grid-rows-1 scale-105"
@@ -61,11 +75,19 @@
 		id="gradient-bg"
 		class="fixed top-0 left-0 w-screen h-screen -z-40 pointer-events-none"
 		style="background: var(--bg-gradient-blue);"
+		transition:fade={{
+			duration,
+			easing: quintOut,
+		}}
 	></div>
 {:else if page.url.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);"
+		transition:fade={{
+			duration,
+			easing: quintOut,
+		}}
 	></div>
 {/if}

src/routes/convert/+page.svelte

@@ -27,12 +27,6 @@
 	} from "lucide-svelte";
 
 	$effect(() => {
-		if (files.files.length === 1 && files.files[0].blobUrl) {
-			showGradient.set(false);
-		} else {
-			showGradient.set(true);
-		}
-
 		// Set gradient color depending on the file types
 		// TODO: if more file types added, add a "fileType" property to the file object
 		const allAudio = files.files.every(
@@ -47,6 +41,12 @@
 			(file) => file.converter?.name === "vertd",
 		);
 
+		if (files.files.length === 1 && files.files[0].blobUrl && !allVideos) {
+			showGradient.set(false);
+		} else {
+			showGradient.set(true);
+		}
+
 		if (
 			files.files.length === 0 ||
 			(!allAudio && !allImages && !allVideos)