Update

apps/admin/src/components/layout/Breadcrumbs.tsx

@@ -13,11 +13,17 @@ interface PackInfo {
     category_name: string | null;
 }
 
+interface UserInfo {
+    id: string;
+    name: string | null;
+}
+
 // Generate breadcrumbs based on current path and params
 function useBreadcrumbs(): { breadcrumbs: BreadcrumbItem[]; loading: boolean } {
     const location = useLocation();
     const params = useParams();
     const [packInfo, setPackInfo] = useState<PackInfo | null>(null);
+    const [userInfo, setUserInfo] = useState<UserInfo | null>(null);
     const [loading, setLoading] = useState(false);
 
     // Fetch pack info when on questions page to get category_id
@@ -51,6 +57,37 @@ function useBreadcrumbs(): { breadcrumbs: BreadcrumbItem[]; loading: boolean } {
         fetchPackInfo();
     }, [params.packId, params.categoryId]);
 
+    // Fetch user info when on user detail or match chat page
+    useEffect(() => {
+        const fetchUserInfo = async () => {
+            if (params.userId) {
+                setLoading(true);
+                try {
+                    const { data } = await supabase
+                        .from('profiles')
+                        .select('id, name')
+                        .eq('id', params.userId)
+                        .single();
+
+                    if (data) {
+                        setUserInfo({
+                            id: data.id,
+                            name: data.name,
+                        });
+                    }
+                } catch (error) {
+                    console.error('Failed to fetch user info for breadcrumbs:', error);
+                } finally {
+                    setLoading(false);
+                }
+            } else {
+                setUserInfo(null);
+            }
+        };
+
+        fetchUserInfo();
+    }, [params.userId]);
+
     const pathSegments = location.pathname.split('/').filter(Boolean);
     const breadcrumbs: BreadcrumbItem[] = [];
 
@@ -74,6 +111,13 @@ function useBreadcrumbs(): { breadcrumbs: BreadcrumbItem[]; loading: boolean } {
             breadcrumbs.push({ label: 'Questions', href: currentPath });
         } else if (segment === 'users') {
             breadcrumbs.push({ label: 'Users', href: '/users' });
+            // If we have a userId, add the user's name as a breadcrumb
+            if (params.userId && userInfo) {
+                breadcrumbs.push({
+                    label: userInfo.name || 'User',
+                    href: `/users/${userInfo.id}`,
+                });
+            }
         } else if (segment === 'matches' && params.userId) {
             breadcrumbs.push({ label: 'Match Chat' });
         } else if (segment === 'audit-logs') {
@@ -100,26 +144,28 @@ export function Breadcrumbs() {
     if (breadcrumbs.length === 0 && !loading) return null;
 
     return (
-        <nav className="flex items-center space-x-1 text-sm text-muted-foreground">
+        <nav className="flex items-center space-x-1 text-sm">
             <Link
                 to="/"
-                className="flex items-center hover:text-foreground transition-colors"
+                className="flex items-center text-muted-foreground hover:text-primary transition-colors p-1 rounded-md hover:bg-white/5"
             >
                 <Home className="h-4 w-4" />
             </Link>
 
             {breadcrumbs.map((item, index) => (
                 <div key={index} className="flex items-center">
-                    <ChevronRight className="h-4 w-4 mx-1" />
+                    <ChevronRight className="h-4 w-4 mx-1 text-muted-foreground/50" />
                     {item.href ? (
                         <Link
                             to={item.href}
-                            className="hover:text-foreground transition-colors"
+                            className="text-muted-foreground hover:text-primary transition-colors px-2 py-1 rounded-md hover:bg-white/5"
                         >
                             {item.label}
                         </Link>
                     ) : (
-                        <span className="text-foreground font-medium">{item.label}</span>
+                        <span className="text-foreground font-medium px-2 py-1">
+                            {item.label}
+                        </span>
                     )}
                 </div>
             ))}