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

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';