feat: bob

client/src/lib/ui/Avatar.svelte

@@ -5,7 +5,7 @@
 
 <Avatar.Root class="flex h-full w-full items-center justify-center">
 	<Avatar.Image
-		src={userState.user?.profilePicture}
+		src={userState.user?.profilePictureId ? "/file/" + userState.user.profilePictureId : null}
 		alt={`${userState.user?.username}'s avatar`}
 		class="rounded-full"
 	/>

client/src/lib/ui/Button.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
 	import { Button } from 'bits-ui';
 	import { cn } from '$lib/utils';
-	import type { MouseEventHandler } from 'svelte/elements';
 	import type { Snippet } from 'svelte';
 
+	type me = MouseEvent & { currentTarget: EventTarget & HTMLButtonElement; }
+
 	let {
 		className,
 		type,
@@ -12,7 +13,7 @@
 	}: {
 		className?: string;
 		type?: 'submit' | 'reset' | 'button' | null;
-		onclick?: () => void;
+		onclick?: (e: me) => void;
 		children?: Snippet<[]>;
 	} = $props();
 </script>
@@ -23,8 +24,8 @@
 		'bg-sky text-crust focus:outline-sky flex w-fit cursor-pointer items-center justify-center rounded p-2 px-4 text-sm font-medium transition-all hover:brightness-120 focus:outline-2 focus:outline-offset-1',
 		className
 	)}
-	onclick={() => {
-		onclick?.();
+	onclick={(e: me) => {
+		onclick?.(e);
 	}}
 >
 	{@render children?.()}

client/src/lib/ui/Pagination.svelte

@@ -3,7 +3,7 @@
 	import { ChevronLeft, ChevronRight } from '@lucide/svelte';
 	import { Pagination } from 'bits-ui';
 	import { pushState, replaceState } from '$app/navigation';
-	import { onMount } from 'svelte';
+	import { onMount, tick } from 'svelte';
 
 	let {
 		count = $bindable(),
@@ -21,7 +21,8 @@
 
 	let page: number = $state(1);
 
-	onMount(() => {
+	onMount(async() => {
+		await tick();
 		replaceState('', `${page}`);
 	});
 </script>