Add error for unsupported files

src/lib/store/index.svelte.ts

@@ -90,6 +90,7 @@ class Files {
 			);
 			if (!converter) {
 				log(["files"], `no converter found for ${file.name}`);
+				this.files.push(new VertFile(file, format, null));
 				return;
 			}
 			const to = converter.supportedFormats.find((f) => f !== format);

src/lib/types/file.svelte.ts

@@ -25,7 +25,7 @@ export class VertFile {
 	constructor(
 		public readonly file: File,
 		to: string,
-		converter?: Converter,
+		converter?: Converter | null,
 		blobUrl?: string,
 	) {
 		this.to = to;

src/routes/convert/+page.svelte

@@ -11,6 +11,7 @@
 	import {
 		Disc2Icon,
 		DownloadIcon,
+		FileQuestionIcon,
 		ImageIcon,
 		RotateCwIcon,
 		XIcon,
@@ -22,7 +23,9 @@
 	{@const isAudio = file.converter?.name === "ffmpeg" || false}
 	<Panel class="p-5 flex flex-col min-w-0 gap-4 relative">
 		<div class="flex-shrink-0 h-8 w-full flex items-center gap-2">
-			{#if isAudio}
+			{#if !file.converter}
+				<FileQuestionIcon size="24" class="flex-shrink-0" />
+			{:else if isAudio}
 				<Disc2Icon size="24" class="flex-shrink-0" />
 			{:else}
 				<ImageIcon size="24" class="flex-shrink-0" />
@@ -52,8 +55,20 @@
 				<XIcon size="24" class="text-muted" />
 			</button>
 		</div>
+		{#if !file.converter}
+			<div
+				class="h-full flex flex-col text-center justify-center text-red-600"
+			>
+				<p class="font-body font-bold">We can't convert this file.</p>
+				<p class="font-normal">
+					Only image and audio files are supported
+				</p>
+			</div>
+		{:else}
 			<div class="flex flex-row justify-between">
-			<div class="flex gap-4 w-full h-[152px] overflow-hidden relative">
+				<div
+					class="flex gap-4 w-full h-[152px] overflow-hidden relative"
+				>
 					<div class="w-1/2 h-full overflow-hidden rounded-xl">
 						<img
 							class="object-cover w-full h-full"
@@ -92,6 +107,7 @@
 					</div>
 				</div>
 			</div>
+		{/if}
 	</Panel>
 {/snippet}
 
@@ -113,7 +129,7 @@
 <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"
 >
-	{#if files.files.length === 1}
+	{#if files.files.length === 1 && files.files[0].blobUrl}
 		<div
 			class="w-full relative"
 			transition:fade={{