feat(connections): Complete overhaul of user connections management and UI enhancements

[codeunia-dev]

This PR introduces a comprehensive improvements to the Connections feature, including:

Key Enhancements:

• Added a complete user connections management system.
• Enhanced UserCard component with interactive profile view.
• Improved Connections page navigation and layout.
• Upgraded user search functionality and empty state UI.
• Added FollowersList, FollowingList, ConnectionStats, and UserProfileModal components.
• General UI improvements and CSS updates for better consistency and usability.

Files Impacted:

• app/globals.css
• app/protected/connections/page.tsx
• app/protected/layout.tsx
• components/connections/* (UserCard, FollowersList, FollowingList, SearchUsers, ConnectionStats, UserProfileModal, index)

Notes:

• 1,155 additions and 5 deletions across 10 files.
• Fully tested interactive connections and search features.
• Ready for review and integration with main branch.

Summary by CodeRabbit

• New Features

  • Added Connections page with tabbed interface to manage following, followers, and search for users.
  • Added user cards displaying profiles with follow/unfollow actions and detailed profile modals.
  • Added connection statistics dashboard showing follower and following counts.
  • Reorganized navigation: Connections and Messages now grouped in Community section.

• Style

  • Added shimmer loading animation for improved loading state visuals.

[vercel]

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

Project	Deployment	Preview	Comments	Updated (UTC)
codeunia	Ready	Preview	Comment	Nov 6, 2025 5:44am

[coderabbitai]

Caution

Review failed

The pull request is closed.

Walkthrough

Introduces a new "Connections" feature comprising a dedicated page with tabbed interface for managing user following/follower lists and searching users. Includes connection statistics display, user cards with profile modals, integration with connection and conversation services, updated sidebar navigation, and a CSS shimmer animation utility for loading states.

Changes

Cohort / File(s)	Summary
CSS Animation Utility app/globals.css	Adds @keyframes shimmer animation and .animate-shimmer CSS class for left-to-right shimmer loading effect
Layout Navigation app/protected/layout.tsx	Adds "Connections" and "Messages" sidebar items under Community section; removes "Messages" from Support group
Connections Page app/protected/connections/page.tsx	New client page component with tabbed UI (Following/Followers/Search) for managing user connections; includes search input with clear functionality and tab state management
Connection Statistics components/connections/ConnectionStats.tsx	Renders card tiles displaying following and follower counts; fetches counts via connectionService; includes shimmer loading state; tab navigation callbacks
Connection Lists components/connections/FollowingList.tsx, components/connections/FollowersList.tsx	Display lists of followed and follower users respectively; fetch from Supabase user_connections table; render UserCard components per profile with connection status; include empty states and loading spinners
User Search components/connections/SearchUsers.tsx	Debounced search component that queries users via conversationService; displays results as UserCard components; manages per-user connection statuses; handles loading and error states
User Card & Profile Modal components/connections/UserCard.tsx, components/connections/UserProfileModal.tsx	Interactive user display components supporting follow/unfollow actions, profile viewing via modal, and conditional messaging for mutual connections; includes optimistic UI updates and error handling
Component Exports components/connections/index.ts	Re-exports ConnectionStats, FollowingList, FollowersList, SearchUsers, and UserCard

Sequence Diagram

sequenceDiagram
    actor User
    participant ConnectionsPage as Connections Page
    participant ConnectionStats as ConnectionStats
    participant TabContent as Tab Content (FollowingList/FollowersList/SearchUsers)
    participant Service as Services (connection, conversation)
    participant Database as Supabase

    User->>ConnectionsPage: Load page / Switch tab
    
    rect rgb(240, 248, 255)
        note right of ConnectionsPage: Initial Load
        ConnectionsPage->>ConnectionStats: Render & trigger load
        ConnectionStats->>Service: getFollowingCount & getFollowerCount (parallel)
        Service->>Database: Query connection counts
        Database-->>Service: Return counts
        Service-->>ConnectionStats: Counts loaded
        ConnectionStats-->>ConnectionsPage: Display stats tiles
    end

    User->>ConnectionsPage: Click tab (Following/Followers/Search)
    ConnectionsPage->>TabContent: Switch active content
    
    rect rgb(240, 255, 240)
        note right of TabContent: Load List or Search Results
        TabContent->>Service: Fetch profiles & statuses
        Service->>Database: Query profiles + connection status
        Database-->>Service: Return data
        Service-->>TabContent: Data loaded
        TabContent-->>ConnectionsPage: Render UserCard list
    end

    User->>TabContent: Click UserCard (Follow/Message/View Profile)
    TabContent->>Service: Call follow/message/profile action
    Service->>Database: Execute mutation or fetch
    Database-->>Service: Result
    Service-->>TabContent: Update response
    TabContent->>TabContent: Optimistic UI update / Open modal
    TabContent-->>User: Display action result

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

• Multiple similar component patterns (FollowingList/FollowersList/SearchUsers share data-fetching and rendering logic)
• Service integration consistency across components warrants attention to error handling and loading state management
• UserProfileModal contains relatively dense interaction logic with follow/unfollow actions and modal lifecycle management
• Supabase query correctness in FollowingList/FollowersList (join logic, ordering, filtering)
• Debouncing implementation and query length validation in SearchUsers

Possibly related PRs

• feat(messaging): Add comprehensive messaging system with conversations and UI #264: Implements the messaging page and corresponding messaging services/components that integrate with the new "Messages" navigation entry and messaging capability in UserCard/UserProfileModal.

Poem

🐰 Connections bloom in tabbed delight,
Following, followers, search—oh what a sight!
Shimmer while loading, profiles unfold,
User cards dance with stories to be told.
A social web spun with whisker-twitched glee! ✨

✨ 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 73cef35 and 2c4a149.

📒 Files selected for processing (10)

• app/globals.css (1 hunks)
• app/protected/connections/page.tsx (1 hunks)
• app/protected/layout.tsx (2 hunks)
• components/connections/ConnectionStats.tsx (1 hunks)
• components/connections/FollowersList.tsx (1 hunks)
• components/connections/FollowingList.tsx (1 hunks)
• components/connections/SearchUsers.tsx (1 hunks)
• components/connections/UserCard.tsx (1 hunks)
• components/connections/UserProfileModal.tsx (1 hunks)
• components/connections/index.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.}