feat: mobile detection, fix: slightly increase padding

src/lib/components/functional/Uploader.svelte

@@ -9,6 +9,7 @@
 	interface Props {
 		files: File[] | undefined;
 		onupload?: () => void;
+		isMobile: boolean;
 	}
 
 	$effect(() => {
@@ -19,7 +20,7 @@
 	let fileInput = $state<HTMLInputElement>();
 	let dragOver = $state(false);
 
-	let { files = $bindable(), onupload }: Props = $props();
+	let { files = $bindable(), onupload, isMobile }: Props = $props();
 
 	function upload() {
 		if (!fileInput) return;
@@ -94,7 +95,7 @@
 			<Upload class="size-8" />
 		</div>
 		<h2 class="font-display text-2xl mt-6">
-			Drop or click to upload files
+			{isMobile ? "Tap" : "Drop or click"} to upload files
 		</h2>
 		<p class="text-foreground-muted mt-4">
 			All processing is done on your device. No file or size limit.

src/routes/+layout.server.ts

@@ -0,0 +1,9 @@
+export const load = ({ url, request }) => {
+	const { pathname } = url;
+	const ua = request.headers.get("user-agent");
+	const isMobile = /mobile/i.test(ua || "");
+	return {
+		pathname,
+		isMobile,
+	};
+};

src/routes/+layout.svelte

@@ -44,7 +44,7 @@
 
 <div
 	role="main"
-	class="w-full h-full flex items-center p-2 flex-col gap-16"
+	class="w-full h-full flex items-center p-4 flex-col gap-16"
 	ondragenter={maybeNavToHome}
 >
 	<div

src/routes/+layout.ts

@@ -1,6 +0,0 @@
-export const load = ({ url }) => {
-	const { pathname } = url;
-	return {
-		pathname,
-	};
-};

src/routes/+page.svelte

@@ -6,6 +6,8 @@
 	import { files } from "$lib/store/index.svelte";
 	import { Check } from "lucide-svelte";
 
+	const { data } = $props();
+
 	let ourFiles = $state<File[]>();
 
 	const runUpload = () => {
@@ -25,34 +27,6 @@
 		if (files.files.length > 0 && !files.beenToConverterPage)
 			goto("/convert");
 	};
-
-	// const convertAllFiles = async () => {
-	// 	const promises = files.files?.map(async (file, i) => {
-	// 		let conversionType = files.conversionTypes[i];
-	// 		const converter = converters[0];
-	// 		const convertedFile = await converter.convert(
-	// 			{
-	// 				name: file.name,
-	// 				buffer: await file.arrayBuffer(),
-	// 			},
-	// 			conversionType,
-	// 		);
-	// 		files.downloadFns[i] = () => {
-	// 			const url = URL.createObjectURL(
-	// 				new Blob([convertedFile.buffer]),
-	// 			);
-	// 			const a = document.createElement("a");
-	// 			a.href = url;
-	// 			if (conversionType.startsWith("."))
-	// 				conversionType = conversionType.slice(1);
-	// 			a.download = `${file.name}.${conversionType}`;
-	// 			a.target = "_self";
-	// 			a.click();
-	// 			URL.revokeObjectURL(url);
-	// 		};
-	// 	});
-	// 	if (promises) await Promise.all(promises);
-	// };
 </script>
 
 <svelte:head>
@@ -100,7 +74,11 @@
 {/snippet}
 
 <div class="[@media(max-height:768px)]:block mt-10 picker-fly">
-	<Uploader bind:files={ourFiles} onupload={runUpload} />
+	<Uploader
+		isMobile={data.isMobile}
+		bind:files={ourFiles}
+		onupload={runUpload}
+	/>
 </div>
 
 <div class="mt-20">