From 23148dba93fa4e381dcb48be03a660c9c5d060c7 Mon Sep 17 00:00:00 2001
From: Sunxyw <git@sunxyw.xyz>
Date: Fri, 24 Nov 2023 18:41:53 +0800
Subject: [PATCH] feat: add user indicator to header

---
 src/lib/shared/layout/header/Header.svelte    |  3 ++
 .../layout/header/MobileNavigation.svelte     |  3 ++
 src/lib/shared/layout/header/UserClip.svelte  | 44 +++++++++++++++++++
 .../ui/avatar/avatar-fallback.svelte          | 17 +++++++
 .../components/ui/avatar/avatar-image.svelte  | 19 ++++++++
 .../vgui/components/ui/avatar/avatar.svelte   | 19 ++++++++
 src/lib/vgui/components/ui/avatar/index.ts    | 13 ++++++
 7 files changed, 118 insertions(+)
 create mode 100644 src/lib/shared/layout/header/UserClip.svelte
 create mode 100644 src/lib/vgui/components/ui/avatar/avatar-fallback.svelte
 create mode 100644 src/lib/vgui/components/ui/avatar/avatar-image.svelte
 create mode 100644 src/lib/vgui/components/ui/avatar/avatar.svelte
 create mode 100644 src/lib/vgui/components/ui/avatar/index.ts

diff --git a/src/lib/shared/layout/header/Header.svelte b/src/lib/shared/layout/header/Header.svelte
index 76c3073..f2246f0 100644
--- a/src/lib/shared/layout/header/Header.svelte
+++ b/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>
diff --git a/src/lib/shared/layout/header/MobileNavigation.svelte b/src/lib/shared/layout/header/MobileNavigation.svelte
index e83dded..46dd3f8 100644
--- a/src/lib/shared/layout/header/MobileNavigation.svelte
+++ b/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"
diff --git a/src/lib/shared/layout/header/UserClip.svelte b/src/lib/shared/layout/header/UserClip.svelte
new file mode 100644
index 0000000..5cccdda
--- /dev/null
+++ b/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}
diff --git a/src/lib/vgui/components/ui/avatar/avatar-fallback.svelte b/src/lib/vgui/components/ui/avatar/avatar-fallback.svelte
new file mode 100644
index 0000000..6dc11ee
--- /dev/null
+++ b/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>
diff --git a/src/lib/vgui/components/ui/avatar/avatar-image.svelte b/src/lib/vgui/components/ui/avatar/avatar-image.svelte
new file mode 100644
index 0000000..6bbf0f6
--- /dev/null
+++ b/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}
+/>
diff --git a/src/lib/vgui/components/ui/avatar/avatar.svelte b/src/lib/vgui/components/ui/avatar/avatar.svelte
new file mode 100644
index 0000000..6781875
--- /dev/null
+++ b/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>
diff --git a/src/lib/vgui/components/ui/avatar/index.ts b/src/lib/vgui/components/ui/avatar/index.ts
new file mode 100644
index 0000000..6b114c1
--- /dev/null
+++ b/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
+};