add icons to lists and solve money tracker bugs

src/routes/lists/+page.svelte

@@ -2,8 +2,42 @@
 	import { enhance } from '$app/forms';
 	import { resolve } from '$app/paths';
 	import ProgressBar from '$lib/components/ProgressBar.svelte';
+	import ListPictureDropzone from '$lib/components/ListPictureDropzone.svelte';
+	import type { SubmitFunction } from '@sveltejs/kit';
 	import type { PageProps } from './$types';
 	let { data, form }: PageProps = $props();
+	let uploadError = $state('');
+	let uploading = $state(false);
+	const uploadPicture: SubmitFunction = async ({ formData, cancel }) => {
+		uploadError = '';
+		const picture = formData.get('picture');
+		formData.delete('picture');
+		if (!(picture instanceof File) || !picture.size) return;
+		if (!['image/jpeg', 'image/png', 'image/webp'].includes(picture.type)) {
+			uploadError = 'Choose a JPEG, PNG, or WebP image.';
+			cancel();
+			return;
+		}
+		if (picture.size > 5 * 1024 * 1024) {
+			uploadError = 'Images must be 5 MB or smaller.';
+			cancel();
+			return;
+		}
+		uploading = true;
+		try {
+			const body = new FormData();
+			body.set('picture', picture);
+			const response = await fetch(resolve('/lists/api/upload'), { method: 'POST', body });
+			if (!response.ok) throw new Error('Could not upload the image. Please try again.');
+			const { key } = await response.json();
+			formData.set('pictureKey', key);
+		} catch (cause) {
+			uploadError = cause instanceof Error ? cause.message : 'Image upload failed.';
+			cancel();
+		} finally {
+			uploading = false;
+		}
+	};
 </script>
 
 <div class="mx-auto max-w-6xl px-4 py-12 sm:px-6 sm:py-16">
@@ -14,7 +48,8 @@
 				<form
 					method="POST"
 					action="?/newList"
-					use:enhance
+					enctype="multipart/form-data"
+					use:enhance={uploadPicture}
 					class="absolute top-full right-0 z-10 mt-3 w-80 max-w-[calc(100vw-2rem)] space-y-3 rounded-lg border border-[var(--site-border)] bg-[var(--site-surface)] p-4 shadow-lg"
 				>
 					<label class="block"
@@ -33,7 +68,9 @@
 							></select
 						></label
 					>
+					<ListPictureDropzone label="List picture (optional)" />
 					<button
+						disabled={uploading}
 						class="rounded bg-[var(--site-text)] px-4 py-2 font-semibold text-[var(--site-bg)]"
 						>create list</button
 					>
@@ -41,6 +78,7 @@
 			</details>{/if}
 	</div>
 	{#if form?.message}<p role="alert" class="mb-5 text-red-500">{form.message}</p>{/if}
+	{#if uploadError}<p role="alert" class="mb-5 text-red-500">{uploadError}</p>{/if}
 	<ul>
 		{#each data.lists as list (list.id)}
 			<li class="border-t border-[var(--site-border)]">
@@ -49,7 +87,17 @@
 					class="block py-5 hover:text-[var(--site-muted)]"
 				>
 					<span class="flex flex-wrap items-center justify-between gap-x-6 gap-y-1">
-						<span class="text-lg font-medium">{list.name}</span>
+						<span class="flex items-center gap-3">
+							{#if list.pictureUrl}<img
+									src={list.pictureUrl}
+									alt=""
+									loading="lazy"
+									width="48"
+									height="48"
+									class="h-12 w-12 rounded bg-[var(--site-surface)] object-cover"
+								/>{/if}
+							<span class="text-lg font-medium">{list.name}</span>
+						</span>
 						<span class="text-base text-[var(--site-muted)]">
 							{#if list.isProgress && data.user}
 								{list.total ? Math.round((list.checked / list.total) * 100) : 0}% · {list.checked}/{list.total}