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">