feat: cards

client/src/routes/(app)/+layout.svelte

@@ -9,17 +9,20 @@
 		House,
 		type Icon as IconType
 	} from '@lucide/svelte';
-	import { NavigationMenu, Popover, Separator, Dialog, Avatar } from 'bits-ui';
+	import { NavigationMenu, Popover, Separator, Dialog } from 'bits-ui';
 	import { fade, fly, slide } from 'svelte/transition';
 	import { toast } from 'svelte-sonner';
 	import { goto } from '$app/navigation';
 	import { AuthClient, UserClient } from '$lib/transport';
 	import { page } from '$app/state';
 	import { cn } from '$lib/utils';
+	import { userState } from '$lib/sharedState.svelte';
+	import Avatar from '$lib/ui/Avatar.svelte';
+
 	let { children } = $props();
 
-	let user = UserClient.getUser({}).then((res) => {
-		return res.user;
+	UserClient.getUser({}).then((res) => {
+		userState.user = res.user;
 	});
 
 	let sidebarOpen = $state(false);
@@ -52,6 +55,7 @@
 		await AuthClient.logout({});
 		await goto('/auth');
 		toast.success('logged out successfully');
+		userState.user = undefined;
 
 		if (sidebarOpen) {
 			sidebarOpen = false;
@@ -175,16 +179,9 @@
 
 	<Popover.Root bind:open={popupOpen}>
 		<Popover.Trigger
-			class="outline-surface-2 hover:brightness-120 bg-text text-crust h-9 w-9 cursor-pointer rounded-full outline outline-offset-2 text-sm transition-all"
+			class="outline-surface-2 hover:brightness-120 bg-text text-crust h-9 w-9 cursor-pointer rounded-full text-sm outline outline-offset-2 transition-all"
 		>
-			{#await user then user}
-				<Avatar.Root class="flex h-full w-full items-center justify-center">
-					<Avatar.Image src={user?.profilePicture} alt={`${user?.username}'s avatar`} class="rounded-full" />
-					<Avatar.Fallback class="font-medium uppercase"
-						>{user?.username.substring(0, 2)}</Avatar.Fallback
-					>
-				</Avatar.Root>
-			{/await}
+			<Avatar />
 		</Popover.Trigger>
 		<Popover.Content forceMount>
 			{#snippet child({ wrapperProps, props, open })}
@@ -223,6 +220,6 @@
 	</Popover.Root>
 </header>
 
-<div class="pt-[50px] overflow-auto">
+<div class="overflow-auto pt-[50px]">
 	{@render children()}
 </div>