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

src/app/profile/page.tsx

@@ -3,6 +3,7 @@ import { redirect } from 'next/navigation';
 import { getUserById } from '@/services/auth';
 import { ProfileForm } from './ProfileForm';
 import { PasswordForm } from './PasswordForm';
+import { getGravatarUrl } from '@/lib/gravatar';
 
 export default async function ProfilePage() {
   const session = await auth();
@@ -19,17 +20,36 @@ export default async function ProfilePage() {
 
   return (
     <main className="mx-auto max-w-2xl px-4 py-8">
-      <div className="mb-8">
+      <div className="mb-8 flex items-center gap-6">
+        <img
+          src={getGravatarUrl(user.email, 160)}
+          alt={user.name || user.email}
+          width={80}
+          height={80}
+          className="rounded-full border-2 border-border"
+        />
+        <div>
           <h1 className="text-3xl font-bold text-foreground">Mon Profil</h1>
           <p className="mt-1 text-muted">Gérez vos informations personnelles</p>
         </div>
+      </div>
 
       <div className="space-y-8">
         {/* Profile Info */}
         <section className="rounded-xl border border-border bg-card p-6">
-          <h2 className="mb-6 text-xl font-semibold text-foreground">
+          <div className="mb-6 flex items-start justify-between">
+            <h2 className="text-xl font-semibold text-foreground">
               Informations personnelles
             </h2>
+            <a
+              href="https://gravatar.com"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-xs text-muted hover:text-primary transition-colors"
+            >
+              Changer mon avatar sur Gravatar →
+            </a>
+          </div>
           <ProfileForm
             initialData={{
               name: user.name || '',

src/components/collaboration/SessionLiveWrapper.tsx

@@ -5,6 +5,7 @@ import { useSessionLive, type LiveEvent } from '@/hooks/useSessionLive';
 import { LiveIndicator } from './LiveIndicator';
 import { ShareModal } from './ShareModal';
 import { Button } from '@/components/ui/Button';
+import { Avatar } from '@/components/ui/Avatar';
 import type { ShareRole } from '@prisma/client';
 
 interface ShareUser {
@@ -84,13 +85,13 @@ export function SessionLiveWrapper({
           {shares.length > 0 && (
             <div className="flex -space-x-2">
               {shares.slice(0, 3).map((share) => (
-                <div
+                <Avatar
                   key={share.id}
-                  className="flex h-8 w-8 items-center justify-center rounded-full border-2 border-card bg-primary/10 text-xs font-medium text-primary"
-                  title={share.user.name || share.user.email}
-                >
-                  {share.user.name?.[0]?.toUpperCase() || share.user.email[0].toUpperCase()}
-                </div>
+                  email={share.user.email}
+                  name={share.user.name}
+                  size={32}
+                  className="border-2 border-card"
+                />
               ))}
               {shares.length > 3 && (
                 <div className="flex h-8 w-8 items-center justify-center rounded-full border-2 border-card bg-muted/20 text-xs font-medium text-muted">

src/components/collaboration/ShareModal.tsx

@@ -5,6 +5,7 @@ import { Modal } from '@/components/ui/Modal';
 import { Input } from '@/components/ui/Input';
 import { Button } from '@/components/ui/Button';
 import { Badge } from '@/components/ui/Badge';
+import { Avatar } from '@/components/ui/Avatar';
 import { shareSessionAction, removeShareAction } from '@/actions/share';
 import type { ShareRole } from '@prisma/client';
 
@@ -120,9 +121,7 @@ export function ShareModal({
                   className="flex items-center justify-between rounded-lg border border-border bg-card p-3"
                 >
                   <div className="flex items-center gap-3">
-                    <div className="flex h-8 w-8 items-center justify-center rounded-full bg-primary/10 text-sm font-medium text-primary">
-                      {share.user.name?.[0]?.toUpperCase() || share.user.email[0].toUpperCase()}
-                    </div>
+                    <Avatar email={share.user.email} name={share.user.name} size={32} />
                     <div>
                       <p className="text-sm font-medium text-foreground">
                         {share.user.name || share.user.email}

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>

src/components/moving-motivators/MotivatorLiveWrapper.tsx

@@ -5,6 +5,7 @@ import { useMotivatorLive, type MotivatorLiveEvent } from '@/hooks/useMotivatorL
 import { LiveIndicator } from '@/components/collaboration/LiveIndicator';
 import { MotivatorShareModal } from './MotivatorShareModal';
 import { Button } from '@/components/ui/Button';
+import { Avatar } from '@/components/ui/Avatar';
 import type { ShareRole } from '@prisma/client';
 
 interface ShareUser {
@@ -84,13 +85,13 @@ export function MotivatorLiveWrapper({
           {shares.length > 0 && (
             <div className="flex -space-x-2">
               {shares.slice(0, 3).map((share) => (
-                <div
+                <Avatar
                   key={share.id}
-                  className="flex h-8 w-8 items-center justify-center rounded-full border-2 border-card bg-primary/10 text-xs font-medium text-primary"
-                  title={share.user.name || share.user.email}
-                >
-                  {share.user.name?.[0]?.toUpperCase() || share.user.email[0].toUpperCase()}
-                </div>
+                  email={share.user.email}
+                  name={share.user.name}
+                  size={32}
+                  className="border-2 border-card"
+                />
               ))}
               {shares.length > 3 && (
                 <div className="flex h-8 w-8 items-center justify-center rounded-full border-2 border-card bg-muted/20 text-xs font-medium text-muted">

src/components/moving-motivators/MotivatorShareModal.tsx

@@ -5,6 +5,7 @@ import { Modal } from '@/components/ui/Modal';
 import { Input } from '@/components/ui/Input';
 import { Button } from '@/components/ui/Button';
 import { Badge } from '@/components/ui/Badge';
+import { Avatar } from '@/components/ui/Avatar';
 import { shareMotivatorSession, removeMotivatorShare } from '@/actions/moving-motivators';
 import type { ShareRole } from '@prisma/client';
 
@@ -120,9 +121,7 @@ export function MotivatorShareModal({
                   className="flex items-center justify-between rounded-lg border border-border bg-card p-3"
                 >
                   <div className="flex items-center gap-3">
-                    <div className="flex h-8 w-8 items-center justify-center rounded-full bg-primary/10 text-sm font-medium text-primary">
-                      {share.user.name?.[0]?.toUpperCase() || share.user.email[0].toUpperCase()}
-                    </div>
+                    <Avatar email={share.user.email} name={share.user.name} size={32} />
                     <div>
                       <p className="text-sm font-medium text-foreground">
                         {share.user.name || share.user.email}

src/components/ui/Avatar.tsx

@@ -0,0 +1,31 @@
+'use client';
+
+import { getGravatarUrl, GravatarDefault } from '@/lib/gravatar';
+
+interface AvatarProps {
+  email: string;
+  name?: string | null;
+  size?: number;
+  fallback?: GravatarDefault;
+  className?: string;
+}
+
+export function Avatar({
+  email,
+  name,
+  size = 32,
+  fallback = 'identicon',
+  className = '',
+}: AvatarProps) {
+  return (
+    <img
+      src={getGravatarUrl(email, size * 2, fallback)} // 2x for retina displays
+      alt={name || email}
+      width={size}
+      height={size}
+      className={`rounded-full ${className}`}
+      loading="lazy"
+    />
+  );
+}
+

src/components/ui/index.ts

@@ -1,7 +1,8 @@
+export { Avatar } from './Avatar';
+export { Badge } from './Badge';
 export { Button } from './Button';
 export { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from './Card';
 export { Input } from './Input';
-export { Textarea } from './Textarea';
-export { Badge } from './Badge';
 export { Modal, ModalFooter } from './Modal';
+export { Textarea } from './Textarea';
 

src/lib/gravatar.ts

@@ -0,0 +1,23 @@
+import { createHash } from 'crypto';
+
+export type GravatarDefault =
+  | 'identicon' // Geometric pattern
+  | 'mp' // Mystery person silhouette
+  | 'retro' // 8-bit pixel art
+  | 'robohash' // Generated robot
+  | 'wavatar' // Stylized face
+  | 'monsterid' // Colorful monster
+  | 'blank'; // Transparent
+
+export function getGravatarUrl(
+  email: string,
+  size: number = 40,
+  fallback: GravatarDefault = 'identicon'
+): string {
+  const hash = createHash('md5')
+    .update(email.toLowerCase().trim())
+    .digest('hex');
+
+  return `https://www.gravatar.com/avatar/${hash}?d=${fallback}&s=${size}`;
+}
+