feat: add ability to upload a profile picture (#244)

frontend/src/lib/components/header/header-avatar.svelte

@@ -3,22 +3,10 @@
 	import * as DropdownMenu from '$lib/components/ui/dropdown-menu';
 	import WebAuthnService from '$lib/services/webauthn-service';
 	import userStore from '$lib/stores/user-store';
-	import { createSHA256hash } from '$lib/utils/crypto-util';
 	import { LucideLogOut, LucideUser } from 'lucide-svelte';
 
 	const webauthnService = new WebAuthnService();
 
-	let initials = $derived(
-		($userStore!.firstName.charAt(0) + $userStore!.lastName?.charAt(0)).toUpperCase()
-	);
-
-	let gravatarURL: string | undefined = $state();
-	if ($userStore) {
-		createSHA256hash($userStore.email).then((email) => {
-			gravatarURL = `https://www.gravatar.com/avatar/${email}?d=404`;
-		});
-	}
-
 	async function logout() {
 		await webauthnService.logout();
 		window.location.reload();
@@ -28,8 +16,7 @@
 <DropdownMenu.Root>
 	<DropdownMenu.Trigger
 		><Avatar.Root class="h-9 w-9">
-			<Avatar.Image src={gravatarURL} />
-			<Avatar.Fallback>{initials}</Avatar.Fallback>
+			<Avatar.Image src="/api/users/me/profile-picture.png" />
 		</Avatar.Root></DropdownMenu.Trigger
 	>
 	<DropdownMenu.Content class="min-w-40" align="start">
@@ -39,7 +26,7 @@
 					{$userStore?.firstName}
 					{$userStore?.lastName}
 				</p>
-				<p class="text-xs leading-none text-muted-foreground">{$userStore?.email}</p>
+				<p class="text-muted-foreground text-xs leading-none">{$userStore?.email}</p>
 			</div>
 		</DropdownMenu.Label>
 		<DropdownMenu.Separator />