feat: add profile data

apps/web/src/lib/components/site/nav/user-nav.svelte

@@ -2,40 +2,36 @@
 	import * as Avatar from '$lib/components/ui/avatar';
 	import { Button } from '$lib/components/ui/button';
 	import * as DropdownMenu from '$lib/components/ui/dropdown-menu';
-	import type { LayoutData } from '../../../../routes/$types';
+	import type { BaseAuthStore } from 'pocketbase';
 
+	const fullNameToInitials = (fullName: string) => fullName.split(" ").map(word => word[0].toUpperCase()).slice(0, 2).join("");
 	export let authenticated = false;
-	export let user = {};
+	export let user: BaseAuthStore["model"];
 </script>
 
 {#if authenticated}
-	<pre>{JSON.stringify(user)}</pre>
 	<DropdownMenu.Root>
 		<DropdownMenu.Trigger asChild let:builder>
 			<Button variant="ghost" builders={[builder]} class="relative h-8 w-8 rounded-full">
 				<Avatar.Root class="h-9 w-9">
-					<!-- <Avatar.Image src="/avatars/03.png" alt="@shadcn" /> -->
+					<Avatar.Image src={user?.avatar} alt="@shadcn" />
-					<Avatar.Fallback>BB</Avatar.Fallback>
+					<Avatar.Fallback>{fullNameToInitials(user?.name)}</Avatar.Fallback>
 				</Avatar.Root>
 			</Button>
 		</DropdownMenu.Trigger>
 		<DropdownMenu.Content class="w-56" align="end">
 			<DropdownMenu.Label class="font-normal">
 				<div class="flex flex-col space-y-1">
-					<p class="text-sm font-medium leading-none">BB</p>
+					<p class="text-sm font-medium leading-none">{user?.name}</p>
-					<p class="text-muted-foreground text-xs leading-none">email@email.com</p>
+					<p class="text-muted-foreground text-xs leading-none">{user?.email}</p>
 				</div>
 			</DropdownMenu.Label>
 			<DropdownMenu.Separator />
 			<DropdownMenu.Group>
-				<DropdownMenu.Item>
+				<DropdownMenu.Item href="/settings">
 					Profile
 					<DropdownMenu.Shortcut>⇧⌘P</DropdownMenu.Shortcut>
 				</DropdownMenu.Item>
-				<DropdownMenu.Item>
-					Settings
-					<DropdownMenu.Shortcut>⌘S</DropdownMenu.Shortcut>
-				</DropdownMenu.Item>
 				<DropdownMenu.Item>New Dashboard</DropdownMenu.Item>
 			</DropdownMenu.Group>
 			<DropdownMenu.Separator />

apps/web/src/lib/components/site/site-navbar.svelte

@@ -4,7 +4,7 @@
 	import UserNav from './nav/user-nav.svelte';
 
 	export let authenticated = false;
-	export let user = {};
+	export let user: null | {} = null;
 </script>
 
 <header

apps/web/src/lib/components/site/tailwind-indicator.svelte

@@ -1,10 +1,14 @@
-<div
+<script>
-	class="fixed bottom-1 left-1 z-50 flex h-6 w-6 items-center justify-center rounded-full bg-gray-800 p-3 font-mono text-xs text-white"
+	import Badge from '$lib/components/ui/badge/badge.svelte';
->
+</script>
-	<div class="block sm:hidden">xs</div>
+
-	<div class="hidden sm:block md:hidden lg:hidden xl:hidden 2xl:hidden">sm</div>
+<div class="fixed bottom-1 left-1 z-50 flex font-mono uppercase">
-	<div class="hidden md:block lg:hidden xl:hidden 2xl:hidden">md</div>
+	<Badge variant="outline" class="block sm:hidden">xs</Badge>
-	<div class="hidden lg:block xl:hidden 2xl:hidden">lg</div>
+	<Badge variant="outline" class="hidden sm:block md:hidden lg:hidden xl:hidden 2xl:hidden"
-	<div class="hidden xl:block 2xl:hidden">xl</div>
+		>sm</Badge
-	<div class="hidden 2xl:block">2xl</div>
+	>
+	<Badge variant="outline" class="hidden md:block lg:hidden xl:hidden 2xl:hidden">md</Badge>
+	<Badge variant="outline" class="hidden lg:block xl:hidden 2xl:hidden">lg</Badge>
+	<Badge variant="outline" class="hidden xl:block 2xl:hidden">xl</Badge>
+	<Badge variant="outline" class="hidden 2xl:block">2xl</Badge>
 </div>

apps/web/src/lib/config/nav.ts

@@ -17,21 +17,6 @@ export const navConfig: NavConfig = {
 			href: '/dashboard',
 			auth: true
 		},
-		// {
-		// 	title: 'Settings',
-		// 	href: '/settings',
-		// 	auth: true
-		// },
-		// {
-		// 	title: 'Login',
-		// 	href: '/login',
-		// 	auth: false,
-		// },
-		// {
-		// 	title: 'Register',
-		// 	href: '/register',
-		// 	auth: false,
-		// },
 	],
 	sidebarNav: []
 };

apps/web/src/lib/pocketbase.ts

@@ -12,3 +12,18 @@ export const pb = writable<PocketBase | undefined>(undefined, (set) => {
 
 	set(pocketbaseInstance);
 });
+
+// export function isAdmin(model: RecordModel | AdminModel | null): model is AdminModel {
+//   return !!model && !(model as RecordModel)?.collectionId;
+// }
+
+// export function getAvatarUrl(
+//   pocketbase: Pocketbase,
+//   model: RecordModel | AdminModel | null
+// ) {
+//   if (!model) return undefined;
+//   if (isAdmin(model)) return undefined;
+//   if (typeof model.avatar !== 'string' || !model.avatar) return undefined;
+
+//   return pocketbase.getFileUrl(model, model.avatar);
+// }

apps/web/src/lib/utils.ts

@@ -54,7 +54,3 @@ export const flyAndScale = (
 		easing: cubicOut
 	};
 };
-
-export const serializeNonPOJOs = (obj: unknown) => {
-	return structuredClone(obj);
-};

apps/web/src/routes/+layout.server.ts

@@ -1,29 +1,8 @@
 import type { LayoutServerLoad } from './$types';
 
-// export function load({locals}){
-// 	console.log('base token',locals.userPb.authStore.token);
-// 	console.log('valid',locals.userPb.authStore.isValid);
-// 	if(!locals.userPb.authStore.token) throw redirect(303,'/login');
-
-// 	const user = {
-// 			firstname: locals.userPb.authStore.baseModel.firstname
-// 	}
-
-// 	return{
-// 			user
-// 	}
-// }
-
 export const load: LayoutServerLoad = async ({ locals }: { locals: App.Locals }) => {
-	if (!locals.pocketBase.authStore.token) {
+	return {
-		return {
+		authenticated: locals.pocketBase.authStore.isValid,
-			authenticated: locals.pocketBase.authStore.isValid,
+		user: locals.pocketBase.authStore.model,
-			user: locals.pocketBase.authStore.model?.baseModel
+	};
-		};
-	} else {
-		return {
-			authenticated: locals.pocketBase.authStore.isValid,
-			user: {}
-		};
-	}
 };

apps/web/src/routes/+layout.svelte

@@ -22,6 +22,7 @@
 	</main>
 	<SiteFooter />
 	{#if dev}
+		<!-- <pre>{JSON.stringify(data, null, 2)}</pre> -->
 		<TailwindIndicator />
 	{/if}
 </div>