feat: add avatar upload support (MinIO bucket, PocketBase field, SvelteKit API, iOS ProfileView)

ui/src/routes/profile/+page.svelte

@@ -6,6 +6,38 @@
 
 	let { data, form }: { data: PageData; form: ActionData } = $props();
 
+	// ── Avatar ───────────────────────────────────────────────────────────────────
+	let avatarUrl = $state<string | null>(data.avatarUrl ?? null);
+	let avatarUploading = $state(false);
+	let avatarError = $state('');
+	let fileInput: HTMLInputElement | null = null;
+
+	async function handleAvatarChange(e: Event) {
+		const input = e.target as HTMLInputElement;
+		const file = input.files?.[0];
+		if (!file) return;
+
+		avatarUploading = true;
+		avatarError = '';
+		try {
+			const fd = new FormData();
+			fd.append('file', file);
+			const res = await fetch('/api/profile/avatar', { method: 'POST', body: fd });
+			if (!res.ok) {
+				const body = await res.json().catch(() => ({})) as { message?: string };
+				avatarError = body.message ?? `Upload failed (${res.status})`;
+				return;
+			}
+			const result = await res.json() as { avatar_url: string | null };
+			avatarUrl = result.avatar_url;
+		} catch {
+			avatarError = 'Network error during upload';
+		} finally {
+			avatarUploading = false;
+			if (fileInput) fileInput.value = '';
+		}
+	}
+
 	// ── Settings ────────────────────────────────────────────────────────────────
 	let voices = $state<string[]>([]);
 	let voicesLoaded = $state(false);
@@ -145,9 +177,57 @@
 <form id="logout-form" method="POST" action="/logout" class="hidden"></form>
 
 <div class="max-w-xl mx-auto space-y-10">
-	<div>
-		<h1 class="text-2xl font-bold text-zinc-100">Profile</h1>
-		<p class="text-zinc-400 text-sm mt-1">Signed in as <span class="text-zinc-200 font-medium">{data.user.username}</span></p>
+	<div class="flex items-center gap-5">
+		<!-- Avatar -->
+		<div class="relative shrink-0">
+			<button
+				onclick={() => fileInput?.click()}
+				class="group relative w-20 h-20 rounded-full overflow-hidden ring-2 ring-zinc-600 hover:ring-amber-400 transition-all focus:outline-none focus:ring-amber-400"
+				title="Change profile picture"
+				disabled={avatarUploading}
+			>
+				{#if avatarUrl}
+					<img src={avatarUrl} alt="Profile" class="w-full h-full object-cover" />
+				{:else}
+					<div class="w-full h-full bg-zinc-700 flex items-center justify-center">
+						<svg class="w-10 h-10 text-zinc-400" fill="currentColor" viewBox="0 0 24 24">
+							<path d="M12 12c2.7 0 4.8-2.1 4.8-4.8S14.7 2.4 12 2.4 7.2 4.5 7.2 7.2 9.3 12 12 12zm0 2.4c-3.2 0-9.6 1.6-9.6 4.8v2.4h19.2v-2.4c0-3.2-6.4-4.8-9.6-4.8z"/>
+						</svg>
+					</div>
+				{/if}
+				<!-- Hover overlay -->
+				<div class="absolute inset-0 bg-black/50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
+					{#if avatarUploading}
+						<svg class="w-5 h-5 text-white animate-spin" fill="none" viewBox="0 0 24 24">
+							<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+							<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8H4z"></path>
+						</svg>
+					{:else}
+						<svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z"/>
+							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 13a3 3 0 11-6 0 3 3 0 016 0z"/>
+						</svg>
+					{/if}
+				</div>
+			</button>
+			<input
+				bind:this={fileInput}
+				type="file"
+				accept="image/jpeg,image/png,image/webp,image/gif"
+				class="hidden"
+				onchange={handleAvatarChange}
+			/>
+		</div>
+
+		<div>
+			<h1 class="text-2xl font-bold text-zinc-100">{data.user.username}</h1>
+			<p class="text-zinc-400 text-sm mt-0.5 capitalize">{data.user.role}</p>
+			{#if avatarError}
+				<p class="text-red-400 text-xs mt-1">{avatarError}</p>
+			{:else}
+				<p class="text-zinc-500 text-xs mt-1">Click avatar to change photo</p>
+			{/if}
+		</div>
 	</div>
 
 	<!-- ── Reading settings ─────────────────────────────────────────────────── -->