feat(connections): Enhance connections page with improved layout, mutual connections, and responsive UserCard

[codeunia-dev]

This pull request introduces major enhancements to the Connections Page in the Codeunia Student Portal.
The update focuses on improving user experience, interactivity, and overall UI responsiveness.

Key Updates

• 💡 Enhanced Layout & Scrolling: Improved page structure for smoother navigation and better content flow.
• 👥 Mutual Connections Display: Added visibility for mutual connections to strengthen social discovery.
• 📱 Responsive UserCard: Refined UserCard component with adaptive design for all screen sizes and devices.
• 🎨 UI/UX Improvements: Adjusted spacing, alignment, and styling for a more consistent look and feel.

Summary by CodeRabbit

Release Notes

• New Features

  • Display mutual connections between you and other users
  • Enhanced action buttons with improved visual layout and icons

• Bug Fixes

  • Improved layout handling and scrolling behavior on connections page

• UI/Style

  • Reorganized user card layout with responsive design
  • Added user bio and profile information display

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
codeunia	Building	Preview	Comment	Nov 6, 2025 11:00am

[coderabbitai]

Caution

Review failed

The pull request is closed.

Walkthrough

This pull request adds a new "Mutual Connections" display feature across the connections UI, introduces a dedicated component for rendering mutual user avatars and names, refactors the connections page layout to improve flex and scroll behavior, enhances the UserCard UI with status badges and action controls, and extends the ConnectionService with a new method to fetch mutual connection data.

Changes

Cohort / File(s)	Summary
Layout & Flex Refactoring app/protected/connections/page.tsx	Reworked flex containers with min-h-0, flex-shrink-0, and responsive stacking to improve tab switching and scrolling behavior; added consistent vertical spacing (space-y-3) to tab content areas.
New Mutual Connections Component components/connections/MutualConnections.tsx	New client component fetching and displaying up to 3 mutual connections with avatar stack, formatted names/initials, and trailing "and X others" text; includes loading and error handling.
Component UI Enhancements components/connections/UserCard.tsx, components/connections/UserProfileModal.tsx	Integrated MutualConnections component display; UserCard adds clickable name, compact username badge, status badges (Connected/Following/Follows you), bio rendering, and refactored action buttons (View, Message, Follow/Unfollow) with icon controls.
Service Layer Extension lib/services/connectionService.ts	Added getMutualConnections(userId) method that computes mutual follows between current user and target user, returns total count and up to 3 user profiles with id, names, username, and avatar URL.

Sequence Diagram(s)

sequenceDiagram
    participant React as React Component
    participant Service as ConnectionService
    participant DB as Database
    participant Avatar as Avatar UI

    React->>React: MutualConnections mount
    React->>Service: getMutualConnections(userId)
    
    Service->>DB: Fetch current user follows
    Service->>DB: Fetch target user follows
    
    DB-->>Service: User IDs (current follows)
    DB-->>Service: User IDs (target follows)
    
    Service->>Service: Compute intersection (mutuals)
    
    alt Mutuals exist
        Service->>DB: Fetch profiles (id, name, avatar) <br/> for up to 3 mutuals
        DB-->>Service: User profile data
        Service-->>React: { count, users[] }
    else No mutuals
        Service-->>React: { count: 0, users: [] }
    end
    
    React->>Avatar: Render avatar stack
    React->>Avatar: Render "Connected with [name]"
    React->>Avatar: Render "and X others" (if count > 3)

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

• Attention areas:
  • lib/services/connectionService.ts: Verify mutual connection computation logic (set intersection) and confirm database query efficiency for fetching profiles
  • components/connections/MutualConnections.tsx: Validate data fetching lifecycle, error handling, and correct handling of edge cases (missing userId, empty mutuals)
  • app/protected/connections/page.tsx: Confirm flex layout changes (min-h-0, flex-shrink-0) don't break existing tab behavior or introduce overflow issues
  • components/connections/UserCard.tsx: Review button group reorganization and Message button visibility logic (conditional on showMessageButton and mutual status)

Possibly related PRs

• feat(connections): Enhance connections page with improved accessibility and UX #275: Modifies connections page Tabs implementation layout and accessibility—may conflict or complement the flex/scroll refactoring in this PR.

Poem

🐰 A mutual bond now shines so bright,
Three faces stacked within our sight,
With "and X others" tucked below,
The UserCard steals the show,
Connections bloom, our feature's flight!

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch feat/connections

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 26e4025 and 909da90.

📒 Files selected for processing (5)

• app/protected/connections/page.tsx (3 hunks)
• components/connections/MutualConnections.tsx (1 hunks)
• components/connections/UserCard.tsx (3 hunks)
• components/connections/UserProfileModal.tsx (2 hunks)
• lib/services/connectionService.ts (1 hunks)

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}