top login button drop down menu, should show login user full name and em

src/components/layout/Header.tsx

@@ -15,44 +15,42 @@ import {
 } from "@/components/ui/dropdown-menu";
 import { useState, useEffect } from 'react';
 import { ThemeToggleButton } from '@/components/ui/theme-toggle';
-// import LanguageSwitcher from './LanguageSwitcher'; // Removed
+import { useI18n, useCurrentLocale } from '@/locales/client';
-import { useI18n, useCurrentLocale, useChangeLocale } from '@/locales/client';
+import { getUserByEmail } from '@/app/actions/user';
+import type { User } from '@/types';
 
 export default function Header() {
   const pathname = usePathname();
   const router = useRouter();
   const t = useI18n();
   const locale = useCurrentLocale();
-  const changeLocale = useChangeLocale();
   
   const [isAuthenticated, setIsAuthenticated] = useState(false);
   const [isMounted, setIsMounted] = useState(false);
-  const [userEmail, setUserEmail] = useState<string | null>(null);
+  const [user, setUser] = useState<User | null>(null);
   
   useEffect(() => {
     setIsMounted(true);
-    const authStatus = localStorage.getItem('isToyShareAuthenticated') === 'true';
-    setIsAuthenticated(authStatus);
-    if (authStatus) {
-      setUserEmail(localStorage.getItem('userEmail'));
-    }
-  }, []);
 
-  useEffect(() => {
+    const checkAuth = async () => {
-    // This effect handles re-authentication status if localStorage changes from another tab/window
-    const handleStorageChange = () => {
       const authStatus = localStorage.getItem('isToyShareAuthenticated') === 'true';
       setIsAuthenticated(authStatus);
       if (authStatus) {
-        setUserEmail(localStorage.getItem('userEmail'));
+        const email = localStorage.getItem('userEmail');
+        if (email) {
+          const fetchedUser = await getUserByEmail(email);
+          setUser(fetchedUser);
+        }
       } else {
-        setUserEmail(null);
+        setUser(null);
       }
     };
     
-    window.addEventListener('storage', handleStorageChange);
+    checkAuth();
+
+    window.addEventListener('storage', checkAuth);
     return () => {
-      window.removeEventListener('storage', handleStorageChange);
+      window.removeEventListener('storage', checkAuth);
     };
   }, []);
 
@@ -62,8 +60,6 @@ export default function Header() {
       const preferredLang = localStorage.getItem('userPreferredLanguage') as 'en' | 'zh-TW' | null;
       if (preferredLang && preferredLang !== locale) {
         const currentPathWithoutLocale = pathname.startsWith(`/${locale}`) ? pathname.substring(`/${locale}`.length) : pathname;
-        // Ensure the path exists before redirecting. For simplicity, assume it does.
-        // A more robust solution would check against a list of valid routes for the preferredLang.
         router.push(`/${preferredLang}${currentPathWithoutLocale}${window.location.search}`);
       }
     }
@@ -74,11 +70,11 @@ export default function Header() {
     localStorage.removeItem('isToyShareAuthenticated');
     localStorage.removeItem('userEmail');
     setIsAuthenticated(false);
-    setUserEmail(null);
+    setUser(null);
     router.push(`/${locale}/`);
   };
 
-  const isAdmin = userEmail === 'user@example.com' || userEmail === 'admin@example.com';
+  const isAdmin = user?.role === 'Admin';
 
   const cleanPathname = pathname.startsWith(`/${locale}`) 
     ? pathname.substring(`/${locale}`.length) || '/' 
@@ -99,7 +95,7 @@ export default function Header() {
                 {t('header.browse_toys')}
               </Button>
             </Link>
-            {isMounted && isAuthenticated ? (
+            {isMounted && isAuthenticated && user ? (
               <DropdownMenu>
                 <DropdownMenuTrigger asChild>
                   <Button variant="ghost" size="icon" className="h-9 w-9 md:h-10 md:w-10">
@@ -110,11 +106,11 @@ export default function Header() {
                 <DropdownMenuContent align="end">
                   <DropdownMenuLabel className="font-normal">
                     <div className="flex flex-col space-y-1">
-                      <p className="text-sm font-medium leading-none capitalize">
+                      <p className="text-sm font-medium leading-none">
-                        {userEmail?.split('@')[0]}
+                        {user.name}
                       </p>
                       <p className="text-xs leading-none text-muted-foreground">
-                        {userEmail}
+                        {user.email}
                       </p>
                     </div>
                   </DropdownMenuLabel>
@@ -168,7 +164,6 @@ export default function Header() {
               </div>
             )}
           </nav>
-          {/* <LanguageSwitcher /> Removed */}
           <ThemeToggleButton />
         </div>
       </div>