feat: show initial auth status on bar

src/lib/components/app/auth-bar.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+  import { authClient } from "@/auth-client";
+  import Button from "../ui/button/button.svelte";
+
+  const session = authClient.useSession();
+  const getAccountNumber = () => {
+    const user = $session.data?.user as
+      | {
+          accountNumber?: string;
+          account_number?: string;
+        }
+      | undefined;
+
+    return user?.accountNumber ?? user?.account_number ?? null;
+  };
+</script>
+
+<div
+  class="flex absolute top-0 right-0 items-center p-4 bg-white/10 backdrop-blur-lg rounded-bl-xl shadow-lg *:text-bold space-x-2"
+>
+  {#if $session.data}
+    <div class="text-right">
+      <p>Signed in as {$session.data.user.name}</p>
+      {#if getAccountNumber()}
+        <p class="text-xs opacity-80">#{getAccountNumber()}</p>
+      {/if}
+    </div>
+    <button
+      class="px-3 py-1 rounded-md bg-red-500 text-white hover:bg-red-600 transition"
+      on:click={() => authClient.signOut()}
+    >
+      Sign out
+    </button>
+  {:else}
+    <Button href="/demo/better-auth/login">
+      Sign in
+    </Button>
+  {/if}
+</div>

src/lib/components/ui/dialog/dialog-content.svelte

@@ -23,20 +23,20 @@
   <DialogPrimitive.Content
     bind:ref
     class={cn(
-      'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-lg duration-200 sm:rounded-lg',
-      'backdrop-blur-md border drop-shadow-md shadow-lg',
-      'dark:bg-black/20 bg-white/20 transition border-white/20 dark:border-black/20',
+      'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 p-6 duration-200 sm:rounded-xl',
+      'bg-black/40 backdrop-blur-lg border border-white/10 shadow-lg text-white',
+      'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]',
       className
     )}
     {...restProps}
   >
-    <div class="text-foreground/90 max-w-none space-y-3 font-medium">
+    <div class="text-white max-w-none space-y-3 font-medium">
       {@render children?.()}
     </div>
     <DialogPrimitive.Close
-      class="absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none backdrop-blur-sm p-1 shadow-sm dark:bg-black/20 bg-white/20 border-white/20 dark:border-black/20"
+      class="absolute right-4 top-4 rounded-md opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none p-1 shadow-sm bg-black/20 backdrop-blur-md border border-white/10"
     >
-      <X class="size-4" color="white" />
+      <X class="size-4 text-white" />
       <span class="sr-only">Close</span>
     </DialogPrimitive.Close>
   </DialogPrimitive.Content>

src/routes/+page.svelte

@@ -7,6 +7,7 @@
   import BackgroundAnalyzer from '@/components/app/bg-analyzer.svelte';
   import Title from '@/components/app/title.svelte';
   import LeftBar from '@/components/app/left-bar.svelte';
+  import AuthBar from '@/components/app/auth-bar.svelte';
 </script>
 
 <BgImage />
@@ -20,7 +21,7 @@
   </div>
 {:else if state.isLoading && state.hasInteracted}
   <div class="flex flex-col h-screen w-full items-center justify-center space-y-2">
-    <Spinner class="size-10" />
+    <Spinner class="size-10 animate-spin" />
     <p>Loading...</p>
   </div>
 {:else if state.error}
@@ -29,6 +30,7 @@
   </div>
 {:else if state.hasInteracted}
   <Title />
+  <AuthBar />
   <LeftBar />
   <BottomBar />
 {/if}

src/routes/demo/better-auth/login/+page.svelte

@@ -31,7 +31,7 @@
 <form method="post" action="?/signInAccountNumber" use:enhance>
   <label>
     Account number
-    <input name="accountNumber" inputmode="numeric" maxlength="16" autocomplete="webauthn" />
+    <input name="accountNumber" inputmode="numeric" maxlength="16" autocomplete="one-time-code" />
   </label>
   <button>Sign in with account number</button>
   <button formaction="?/createAccount">Create account number</button>