feat: transition "convert n files" thing

src/lib/components/functional/Uploader.svelte

@@ -8,6 +8,7 @@
 
 	interface Props {
 		files: File[] | undefined;
+		onupload?: () => void;
 	}
 
 	$effect(() => {
@@ -18,7 +19,7 @@
 	let fileInput = $state<HTMLInputElement>();
 	let dragOver = $state(false);
 
-	let { files = $bindable() }: Props = $props();
+	let { files = $bindable(), onupload }: Props = $props();
 
 	function upload() {
 		if (!fileInput) return;
@@ -62,6 +63,7 @@
 		if (!fileInput.files) return;
 		if (!files) files = Array.from(fileInput.files);
 		else files.push(...Array.from(fileInput.files));
+		onupload?.();
 	}
 </script>
 

src/routes/+layout.svelte

@@ -5,6 +5,7 @@
 	import { quintOut } from "svelte/easing";
 	import { files } from "$lib/store/index.svelte";
 	import Logo from "$lib/components/visual/svg/Logo.svelte";
+	import { fade, fly } from "svelte/transition";
 	let { children, data } = $props();
 
 	let navWidth = $state(1);
@@ -52,7 +53,7 @@
 			></div>
 			{#each Object.entries(links) as [name, link] (link)}
 				<button
-					class="w-1/2 h-full flex items-center justify-center rounded-xl relative font-display"
+					class="w-1/2 h-full flex items-center justify-center rounded-xl relative font-display overflow-hidden"
 					onclick={() => {
 						const keys = Object.keys(links);
 						const currentIndex = keys.findIndex(
@@ -66,9 +67,25 @@
 						goto(link);
 					}}
 				>
-					<span class="mix-blend-difference invert">
-						{name}
-					</span>
+					<div class="grid grid-cols-1 grid-rows-1">
+						{#key name}
+							<span
+								class="mix-blend-difference invert col-start-1 row-start-1"
+								in:fly={{
+									duration,
+									easing: quintOut,
+									y: -50,
+								}}
+								out:fly={{
+									duration,
+									easing: quintOut,
+									y: 50,
+								}}
+							>
+								{name}
+							</span>
+						{/key}
+					</div>
 				</button>
 			{/each}
 		</div>

src/routes/+page.svelte

@@ -1,12 +1,9 @@
 <script lang="ts">
+	import { goto } from "$app/navigation";
 	import Uploader from "$lib/components/functional/Uploader.svelte";
 	import { converters } from "$lib/converters";
 	import { files } from "$lib/store/index.svelte";
 
-	$effect(() => {
-		$inspect(files);
-	});
-
 	const convertAllFiles = async () => {
 		const promises = files.files?.map(async (file, i) => {
 			let conversionType = files.conversionTypes[i];
@@ -36,7 +33,10 @@
 	};
 </script>
 
-<Uploader bind:files={files.files} />
+<Uploader
+	bind:files={files.files}
+	onupload={() => files.files.length > 0 && goto("/convert")}
+/>
 
 <style>
 	/* for this page specifically */