feat(ui): add drop and paste image uploads

src/routes/account/+page.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import PendingForm from '$lib/components/PendingForm.svelte';
+	import ImageUploadInput from '$lib/components/ImageUploadInput.svelte';
 	import { browserSupportsWebAuthn, startRegistration } from '@simplewebauthn/browser';
 	import { onMount } from 'svelte';
 	let { data, form } = $props();
@@ -106,7 +107,8 @@
 					{#if form?.avatarChanged}<p class="success">Avatar updated.</p>{/if}
 				{:else}
 					<PendingForm action="?/uploadAvatar" enctype="multipart/form-data" class="avatar-upload">
-						<label class="field">CUSTOM AVATAR<input name="avatar" type="file" accept="image/jpeg,image/png,image/webp,image/avif" required /></label>
+						<p class="eyebrow">CUSTOM AVATAR</p>
+						<ImageUploadInput name="avatar" accept="image/jpeg,image/png,image/webp,image/avif" required emptyLabel="NO AVATAR SELECTED" browseLabel="CHOOSE AVATAR"/>
 						<small class="identity-note">JPEG, PNG, WebP, or AVIF · 5 MiB maximum · cropped to a 256 px square.</small>
 						{#if form?.avatarError}<p class="error">{form.avatarError}</p>{/if}
 						{#if form?.avatarChanged}<p class="success">Avatar updated.</p>{/if}