Fix profile pictures avatar

[Saud12131]

https://github.com/user-attachments/assets/66237f51-2074-4b46-83c5-4d8fc3be962e
did i have to change anything in it?

Summary by CodeRabbit

• New Features
  • User profile pictures now display dynamically in the dashboard when available
  • Added support for loading profile images from popular authentication providers with fallback to default image when unavailable

[vercel]

@Saud12131 is attempting to deploy a commit to the AJEET PRATAP SINGH's projects Team on Vercel.

A member of the Team first needs to authorize it.

[coderabbitai]

Walkthrough

The changes configure Next.js image optimization to allow external profile images from Google and GitHub domains, then update the ProfilePic component to dynamically render authenticated user profile images from NextAuth sessions with a fallback to a default asset.

Changes

Cohort / File(s)	Summary
Next.js Image Configuration apps/web/next.config.js	Adds images.domains array with lh3.googleusercontent.com and avatars.githubusercontent.com to enable Next.js image optimization for external profile image sources
ProfilePic Component with Session Integration apps/web/src/components/dashboard/ProfilePic.tsx	Imports useSession from NextAuth and updates Image source to conditionally render session?.user?.image with fallback to existing default asset; adds explicit closing tag

Sequence Diagram

sequenceDiagram
    participant Browser
    participant ProfilePic as ProfilePic Component
    participant NextAuth as NextAuth
    participant NextImage as Next.js Image
    participant ImageSource as Image Source<br/>(Google/GitHub)
    
    Browser->>ProfilePic: Render component
    ProfilePic->>NextAuth: useSession()
    NextAuth-->>ProfilePic: session?.user?.image
    
    alt Session image available
        ProfilePic->>NextImage: src: session.user.image
    else No session image
        ProfilePic->>NextImage: src: default asset
    end
    
    rect rgb(200, 220, 240)
    Note over NextImage: Optimized via allowlisted<br/>external domains
    NextImage->>ImageSource: Fetch image
    ImageSource-->>NextImage: Image data
    end
    
    NextImage-->>Browser: Rendered image

Loading

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

• Straightforward domain allowlist configuration with no logic changes
• Single component hook integration with conditional rendering
• No complex business logic or edge cases introduced
• Minimal scope affecting two files with consistent patterns

Poem

🐰 From Google and GitHub, the avatars hop,
NextAuth's magic makes profiles pop!
With domains allowed, the images take flight,
A rabbit's delight—user profiles in sight! ✨

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run @coderabbitai generate docstrings to improve docstring coverage.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title Check	✅ Passed	The title "Fix profile pictures avatar" is related to the actual changes in the pull request, which involve enabling user profile pictures from external sources (Google and GitHub avatars) via session data in the ProfilePic component. However, the title is somewhat vague and doesn't clearly convey what specific improvement is being made—it uses "fix" without explaining whether this addresses a bug, adds a feature, or improves functionality. The phrasing is also slightly awkward. Nevertheless, it does refer to a real and central aspect of the changeset (profile pictures/avatars), making it at least partially related to the main changes.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

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

[cla-assistant]

All committers have signed the CLA.

[coderabbitai]

Actionable comments posted: 1

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

apps/web/src/components/dashboard/ProfilePic.tsx (1)

10-16: Fix the image dimension mismatch.

The width and height props are set to 10 pixels, but the container displays at 32px (h-8 w-8 in Tailwind). This severe mismatch will cause blurry, low-quality profile pictures because Next.js optimizes the image at 10px but then scales it up 3.2x for display.

Apply this diff to match the actual display size:

      <Image
        alt="User Profile"
        src={session?.user?.image||imgUrl}
        className="w-full h-full object-cover"
-       width={10}
-       height={10}
+       width={32}
+       height={32}
      ></Image>

🧹 Nitpick comments (1)

apps/web/src/components/dashboard/ProfilePic.tsx (1)

7-12: Consider adding a loading state.

While the fallback to the default image is functional, useSession initially returns undefined during the first render, which causes a brief flash when the actual profile picture loads.

You can improve the UX by checking the session status:

  export const ProfilePic = () => {
-   const { data: session } = useSession();
+   const { data: session, status } = useSession();
    return (
      <div className="rounded-full overflow-hidden inline-block h-8 w-8 border">
        <Image
          alt="User Profile"
-         src={session?.user?.image||imgUrl}
+         src={status === "authenticated" && session?.user?.image ? session.user.image : imgUrl}
          className="w-full h-full object-cover"
          width={32}
          height={32}
        ></Image>
      </div>
    );
  };

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 9813b97 and 0545ada.

⛔ Files ignored due to path filters (1)

• pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml

📒 Files selected for processing (2)

• apps/web/next.config.js (1 hunks)
• apps/web/src/components/dashboard/ProfilePic.tsx (1 hunks)

🧰 Additional context used

🧬 Code graph analysis (1)

apps/web/src/components/dashboard/ProfilePic.tsx (1)

apps/web/src/lib/auth/config.ts (1)

• session (36-42)

🔇 Additional comments (1)

apps/web/src/components/dashboard/ProfilePic.tsx (1)

5-7: No configuration changes required—the session callback correctly preserves user.image from providers.

The auth configuration uses Google and Github providers, both of which return image in the user object by default. The session callback spreads ...session, which preserves the entire session object including the user with its image field. The code in ProfilePic.tsx correctly accesses session?.user?.image with an appropriate fallback.

[apsinghdev]

@Saud12131 hey, it's going to be fixed in this #125