ui/ disable buttons if health checks not working

src/components/auth/sign-out-button.tsx

@@ -1,33 +1,31 @@
-"use client"
+"use client";
 
-import { signOut, useSession } from "@/lib/auth-client"
-import { Button } from "@/components/ui/button"
+import { signOut, useSession } from "@/lib/auth-client";
+import { Button } from "@/components/ui/button";
+import { useRouter } from "next/navigation";
 
 export function SignOutButton() {
-  const { data: session, isPending } = useSession()
+  const { data: session, isPending } = useSession();
+  const router = useRouter();
 
   if (isPending) {
-    return <Button disabled>Loading...</Button>
+    return <Button disabled>Loading...</Button>;
   }
 
   if (!session) {
-    return null
+    return null;
   }
 
   return (
     <Button
       variant="outline"
       onClick={async () => {
-        await signOut({
-          fetchOptions: {
-            onSuccess: () => {
-              window.location.href = "/"
-            },
-          },
-        })
+        await signOut();
+        router.replace("/");
+        router.refresh();
       }}
     >
       Sign out
     </Button>
-  )
-}
+  );
+}

src/components/auth/user-profile.tsx

@@ -21,25 +21,24 @@ export function UserProfile() {
   }
 
   return (
-    <div className="flex flex-col items-center gap-4 p-6">
-      <div className="text-center">
-        <Avatar className="size-16 mx-auto mb-4">
-          <AvatarImage
-            src={session.user?.image || ""}
-            alt={session.user?.name || "User"}
-            referrerPolicy="no-referrer"
-          />
-          <AvatarFallback>
-            {(
-              session.user?.name?.[0] ||
-              session.user?.email?.[0] ||
-              "U"
-            ).toUpperCase()}
-          </AvatarFallback>
-        </Avatar>
-        <h2 className="text-xl font-semibold">{session.user?.name}</h2>
-        <p className="text-muted-foreground">{session.user?.email}</p>
-      </div>
+    <div className="flex items-center gap-3">
+      <span className="text-sm text-muted-foreground">
+        Welcome {session.user?.name}
+      </span>
+      <Avatar className="size-8">
+        <AvatarImage
+          src={session.user?.image || ""}
+          alt={session.user?.name || "User"}
+          referrerPolicy="no-referrer"
+        />
+        <AvatarFallback>
+          {(
+            session.user?.name?.[0] ||
+            session.user?.email?.[0] ||
+            "U"
+          ).toUpperCase()}
+        </AvatarFallback>
+      </Avatar>
       <SignOutButton />
     </div>
   );

src/components/site-header.tsx

@@ -10,7 +10,7 @@ export function SiteHeader() {
             href="/"
             className="bg-clip-text text-transparent [background-image:linear-gradient(90deg,color-mix(in_oklab,var(--primary)_85%,white_0%),color-mix(in_oklab,var(--primary)_50%,white_0%))] hover:opacity-90"
           >
-            Next.js Starter Kit
+            Next.js Boilerplate
           </Link>
         </h1>
         <UserProfile />