feat: initial commit, draft frontend

src/lib/Header.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+	import { Avatar, Button, DropdownMenu } from 'bits-ui';
+	import { authClient } from './auth-client';
+	import Image from './Image.svelte';
+	import { User } from '@lucide/svelte';
+
+	const session = authClient.useSession();
+	const user = $derived($session.data?.user);
+
+	const signIn = async () => {
+		await authClient.signIn.social({
+			provider: 'github'
+		});
+	};
+</script>
+
+<div class="h-14 w-full bg-[#292e42]">
+	<div class="mx-auto flex h-full max-w-[78rem] items-center justify-between">
+		<h1 class="header-title font-light">Godot Host</h1>
+		<div>
+			{#if !user}
+				<Button.Root class="rounded-md p-2 transition-colors hover:bg-gray-800" onclick={signIn}>
+					Sign In
+				</Button.Root>
+			{:else}
+				<DropdownMenu.Root open={true}>
+					<DropdownMenu.Trigger>
+						<Image class="shadow-4xl h-10 w-10 rounded-full" src={user.image} />
+					</DropdownMenu.Trigger>
+					<DropdownMenu.Portal>
+						<DropdownMenu.Content class="w-42 rounded-md bg-black shadow-xl shadow-gray-800/5">
+							<DropdownMenu.Item class="mt-1 flex h-10 items-center rounded-md px-2 py-1.5">
+								<User />
+								<span>Sign Out</span>
+							</DropdownMenu.Item>
+						</DropdownMenu.Content>
+					</DropdownMenu.Portal>
+				</DropdownMenu.Root>
+			{/if}
+		</div>
+	</div>
+</div>