feat(connections): Add mutual connections display for user profiles

- Implement MutualConnections component to show shared connections
- Add new service method in connectionService to fetch mutual connections
- Integrate mutual connections display in UserCard and UserProfileModal
- Enhance user connection information with dynamic avatar stack and text description
- Implement fallback and styling for mutual connections display

Author: akshay0611

components/connections/MutualConnections.tsx

@@ -0,0 +1,103 @@
+'use client'
+
+import React, { useEffect, useState } from 'react'
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
+import { Users } from 'lucide-react'
+import { connectionService } from '@/lib/services/connectionService'
+
+interface MutualConnectionsProps {
+  userId: string
+  className?: string
+}
+
+interface MutualUser {
+  id: string
+  first_name: string | null
+  last_name: string | null
+  username: string
+  avatar_url: string | null
+}
+
+export function MutualConnections({ userId, className = '' }: MutualConnectionsProps) {
+  const [mutualData, setMutualData] = useState<{
+    count: number
+    users: MutualUser[]
+  }>({ count: 0, users: [] })
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    const loadMutualConnections = async () => {
+      try {
+        const data = await connectionService.getMutualConnections(userId)
+        setMutualData(data)
+      } catch (error) {
+        console.error('Error loading mutual connections:', error)
+      } finally {
+        setLoading(false)
+      }
+    }
+
+    loadMutualConnections()
+  }, [userId])
+
+  if (loading || mutualData.count === 0) {
+    return null
+  }
+
+  const displayUsers = mutualData.users.slice(0, 3)
+  const remainingCount = mutualData.count - displayUsers.length
+
+  const getName = (user: MutualUser) => {
+    if (user.first_name && user.last_name) {
+      return `${user.first_name} ${user.last_name}`
+    }
+    return user.username
+  }
+
+  const getInitials = (user: MutualUser) => {
+    if (user.first_name && user.last_name) {
+      return `${user.first_name[0]}${user.last_name[0]}`.toUpperCase()
+    }
+    return user.username.slice(0, 2).toUpperCase()
+  }
+
+  return (
+    <div className={`flex items-center gap-2 text-sm text-muted-foreground ${className}`}>
+      <Users className="h-4 w-4 flex-shrink-0" />
+      <div className="flex items-center gap-1">
+        {/* Avatar stack */}
+        <div className="flex -space-x-2">
+          {displayUsers.map((user) => (
+            <Avatar key={user.id} className="w-6 h-6 border-2 border-background">
+              {user.avatar_url && <AvatarImage src={user.avatar_url} alt={getName(user)} />}
+              <AvatarFallback className="bg-gradient-to-br from-blue-500 to-purple-600 text-white text-xs">
+                {getInitials(user)}
+              </AvatarFallback>
+            </Avatar>
+          ))}
+        </div>
+        
+        {/* Text */}
+        <span className="ml-2">
+          Connected with{' '}
+          <span className="font-medium text-foreground">
+            {displayUsers[0] && getName(displayUsers[0])}
+          </span>
+          {displayUsers.length > 1 && (
+            <>
+              {' '}and{' '}
+              <span className="font-medium text-foreground">
+                {remainingCount > 0 
+                  ? `${displayUsers.length - 1 + remainingCount} others`
+                  : displayUsers.length === 2
+                  ? getName(displayUsers[1])
+                  : `${displayUsers.length - 1} others`
+                }
+              </span>
+            </>
+          )}
+        </span>
+      </div>
+    </div>
+  )
+}

components/connections/UserCard.tsx

@@ -9,6 +9,7 @@ import { connectionService } from '@/lib/services/connectionService'
 import { conversationService } from '@/lib/services/conversationService'
 import { useRouter } from 'next/navigation'
 import { UserProfileModal } from './UserProfileModal'
+import { MutualConnections } from './MutualConnections'
 
 interface UserCardProps {
   user: {
@@ -147,6 +148,8 @@ export function UserCard({ user, connectionStatus, onConnectionChange, showMessa
               {user.bio && (
                 <p className="text-sm text-muted-foreground mt-2 line-clamp-2 leading-relaxed">{user.bio}</p>
               )}
+              {/* Mutual Connections */}
+              <MutualConnections userId={user.id} className="mt-2" />
             </div>
 
             <div className="flex items-center gap-2 flex-shrink-0">

components/connections/UserProfileModal.tsx

@@ -29,6 +29,7 @@ import { connectionService } from '@/lib/services/connectionService'
 import { conversationService } from '@/lib/services/conversationService'
 import { useRouter } from 'next/navigation'
 import Link from 'next/link'
+import { MutualConnections } from './MutualConnections'
 
 interface UserProfileModalProps {
   userId: string
@@ -214,6 +215,9 @@ export function UserProfileModal({
             )}
           </div>
 
+          {/* Mutual Connections */}
+          <MutualConnections userId={userId} className="justify-center" />
+
           {/* Action Buttons */}
           <div className="flex gap-2 w-full max-w-md">
             {connectionStatus.isMutual && (

lib/services/connectionService.ts

@@ -179,6 +179,61 @@ export class ConnectionService {
 
     return { isFollowing, isFollower, isMutual }
   }
+
+  // Get mutual connections between current user and another user
+  async getMutualConnections(userId: string): Promise<{
+    count: number
+    users: Array<{
+      id: string
+      first_name: string | null
+      last_name: string | null
+      username: string
+      avatar_url: string | null
+    }>
+  }> {
+    const supabase = this.getSupabaseClient()
+    const { data: { user } } = await supabase.auth.getUser()
+
+    if (!user) {
+      return { count: 0, users: [] }
+    }
+
+    // Get users that both current user and target user follow
+    const { data: currentUserFollowing } = await supabase
+      .from('user_connections')
+      .select('following_id')
+      .eq('follower_id', user.id)
+
+    const { data: targetUserFollowing } = await supabase
+      .from('user_connections')
+      .select('following_id')
+      .eq('follower_id', userId)
+
+    if (!currentUserFollowing || !targetUserFollowing) {
+      return { count: 0, users: [] }
+    }
+
+    // Find mutual following
+    const currentFollowingIds = new Set(currentUserFollowing.map(c => c.following_id))
+    const mutualIds = targetUserFollowing
+      .map(c => c.following_id)
+      .filter(id => currentFollowingIds.has(id) && id !== user.id && id !== userId)
+
+    if (mutualIds.length === 0) {
+      return { count: 0, users: [] }
+    }
+
+    // Get profile info for first 3 mutual connections
+    const { data: profiles } = await supabase
+      .from('profiles')
+      .select('id, first_name, last_name, username, avatar_url')
+      .in('id', mutualIds.slice(0, 3))
+
+    return {
+      count: mutualIds.length,
+      users: profiles || []
+    }
+  }
 }
 
 export const connectionService = new ConnectionService()