feat: integrate Avatar component across various modules for improved user representation and enhance profile page with Gravatar support

src/components/layout/Header.tsx

@@ -5,6 +5,7 @@ import { usePathname } from 'next/navigation';
 import { useSession, signOut } from 'next-auth/react';
 import { useTheme } from '@/contexts/ThemeContext';
 import { useState } from 'react';
+import { Avatar } from '@/components/ui';
 
 export function Header() {
   const { theme, toggleTheme } = useTheme();
@@ -109,8 +110,13 @@ export function Header() {
             <div className="relative">
               <button
                 onClick={() => setMenuOpen(!menuOpen)}
-                className="flex h-9 items-center gap-2 rounded-lg border border-border bg-card px-3 transition-colors hover:bg-card-hover"
+                className="flex h-9 items-center gap-2 rounded-lg border border-border bg-card pl-1.5 pr-3 transition-colors hover:bg-card-hover"
               >
+                <Avatar
+                  email={session.user.email!}
+                  name={session.user.name}
+                  size={24}
+                />
                 <span className="text-sm font-medium text-foreground">
                   {session.user.name || session.user.email?.split('@')[0]}
                 </span>