actually start implementing the backend slowly

src/lib/components/extra/User.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+    import { Status, type UserWithStatus } from '$lib';
+
+    const {
+      onclick,
+      user
+    }: { onclick?: (e: MouseEvent) => void, user: UserWithStatus } = $props();
+</script>
+
+<a {onclick} href="##" class="flex items-center gap-2">
+	<div class="relative">
+		<img src={"https://api.dicebear.com/7.x/pixel-art/svg?seed=" + user.username} alt={user.username} class="size-6 rounded-full" />
+		{#if user.status === Status.OFFLINE}
+			<span class="absolute bottom-0 end-0 block size-2 rounded-full bg-gray-500 ring-1 ring-white"></span>
+		{:else if user.status === Status.DND}
+			<span class="absolute bottom-0 end-0 block size-2 rounded-full bg-red-500 ring-1 ring-white"></span>
+		{:else if user.status === Status.ONLINE}
+			<span class="absolute bottom-0 end-0 block size-2 rounded-full bg-green-500 ring-1 ring-white"></span>
+		{/if}
+	</div>
+	{user.username}
+</a>