feat: add user indicator to header

src/lib/shared/layout/header/Header.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { page } from '$app/stores';
 	import Icon from '@iconify/svelte';
 
 	import * as m from '$lib/shared/i18n/compiled/messages';
@@ -7,6 +8,7 @@
 	import BrowserSupportNotice from '$lib/shared/layout/header/BrowserSupportNotice.svelte';
 	import DesktopNavigation from '$lib/shared/layout/header/DesktopNavigation.svelte';
 	import MobileNavigation from '$lib/shared/layout/header/MobileNavigation.svelte';
+	import UserClip from '$lib/shared/layout/header/UserClip.svelte';
 	import PreferencesSheet from '$lib/shared/layout/preferences/PreferencesSheet.svelte';
 	import { Button } from '$lib/vgui/components/ui/button';
 
@@ -42,6 +44,7 @@
 			</div>
 		{/if}
 		<div class="hidden gap-x-4 lg:flex">
+			<UserClip />
 			<Button variant="outline" size="icon" on:click={() => (preferencesOpen = true)}>
 				<Icon icon="lucide:settings-2" class="h-5 w-5" />
 			</Button>

src/lib/shared/layout/header/MobileNavigation.svelte

@@ -7,6 +7,7 @@
 	import * as m from '$lib/shared/i18n/compiled/messages';
 	import BrandLogo from '$lib/shared/layout/BrandLogo.svelte';
 
+	import UserClip from '$lib/shared/layout/header/UserClip.svelte';
 	import { Button } from '$lib/vgui/components/ui/button';
 
 	import * as Nav from './navigation';
@@ -58,6 +59,8 @@
 					</div>
 
 					<div class="space-y-4">
+						<UserClip class="w-full" />
+
 						<Button
 							variant="outline"
 							size="lg"

src/lib/shared/layout/header/UserClip.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+	import { page } from '$app/stores';
+
+	import * as Avatar from '$lib/vgui/components/ui/avatar';
+	import { Button } from '$lib/vgui/components/ui/button';
+
+	import type { UserResponse } from '@supabase/supabase-js';
+
+	let clazz = '';
+	export { clazz as class };
+
+	const getUserProfile = (userId: string) => {
+		return $page.data.supabase.from('profiles').select('*').eq('id', userId).single();
+	};
+
+	const userFunc = $page.data.supabase.auth
+		.getUser()
+		.then((resp: UserResponse) => {
+			if (resp.error) {
+				throw resp.error;
+			}
+			return getUserProfile(resp.data.user.id);
+		})
+		.then((profile: ReturnType<typeof getUserProfile>) => {
+			if (profile.error) {
+				throw profile.error;
+			}
+			return profile.data;
+		});
+</script>
+
+{#await userFunc}
+	<Button variant="outline" class={clazz} disabled>Loading...</Button>
+{:then user}
+	<Button variant="outline" class={clazz}>
+		<Avatar.Root class="-ml-1 mr-2 h-6 w-6 rounded-full">
+			<Avatar.Image src={user.avatar_url} alt={user.nickname} />
+			<Avatar.Fallback>{user.nickname.slice(0, 1)}</Avatar.Fallback>
+		</Avatar.Root>
+		{user.nickname}
+	</Button>
+{:catch error}
+	<Button variant="outline" class={clazz} href="/auth">Login</Button>
+{/await}

src/lib/vgui/components/ui/avatar/avatar-fallback.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { Avatar as AvatarPrimitive } from 'bits-ui';
+
+	import { cn } from '$lib/vgui/utils';
+
+	type $$Props = AvatarPrimitive.FallbackProps;
+
+	let className: $$Props['class'] = undefined;
+	export { className as class };
+</script>
+
+<AvatarPrimitive.Fallback
+	class={cn('flex h-full w-full items-center justify-center rounded-full bg-muted', className)}
+	{...$$restProps}
+>
+	<slot />
+</AvatarPrimitive.Fallback>

src/lib/vgui/components/ui/avatar/avatar-image.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { Avatar as AvatarPrimitive } from 'bits-ui';
+
+	import { cn } from '$lib/vgui/utils';
+
+	type $$Props = AvatarPrimitive.ImageProps;
+
+	let className: $$Props['class'] = undefined;
+	export let src: $$Props['src'] = undefined;
+	export let alt: $$Props['alt'] = undefined;
+	export { className as class };
+</script>
+
+<AvatarPrimitive.Image
+	{src}
+	{alt}
+	class={cn('aspect-square h-full w-full', className)}
+	{...$$restProps}
+/>

src/lib/vgui/components/ui/avatar/avatar.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { Avatar as AvatarPrimitive } from 'bits-ui';
+
+	import { cn } from '$lib/vgui/utils';
+
+	type $$Props = AvatarPrimitive.Props;
+
+	let className: $$Props['class'] = undefined;
+	export let delayMs: $$Props['delayMs'] = undefined;
+	export { className as class };
+</script>
+
+<AvatarPrimitive.Root
+	{delayMs}
+	class={cn('relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full', className)}
+	{...$$restProps}
+>
+	<slot />
+</AvatarPrimitive.Root>

src/lib/vgui/components/ui/avatar/index.ts

@@ -0,0 +1,13 @@
+import Fallback from './avatar-fallback.svelte';
+import Image from './avatar-image.svelte';
+import Root from './avatar.svelte';
+
+export {
+	Root,
+	Image,
+	Fallback,
+	//
+	Root as Avatar,
+	Image as AvatarImage,
+	Fallback as AvatarFallback
+};