fix(profile-pics): remove sharp depenencey for serving profile pics in settings

[waleedlatif1]

Summary

• remove sharp-based optimization for serving profile pics in settings, was causing issues

Type of Change

• Bug fix

Testing

Tested manually

Checklist

• Code follows project style guidelines
• Self-reviewed my changes
• Tests added/updated and passing
• No new warnings introduced
• I confirm that I have read and agree to the terms outlined in the Contributor License Agreement (CLA)

[vercel]

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

1 Skipped Deployment

Project	Deployment	Preview	Comments	Updated (UTC)
docs	Skipped			Dec 4, 2025 11:45pm

[greptile-apps]

Greptile Overview

Greptile Summary

Disabled Next.js image optimization for profile pictures in settings modal by adding the unoptimized prop to two Image components. This resolves issues with the sharp dependency.

• Fixed profile picture rendering in general settings (general.tsx:294)
• Fixed profile picture rendering in template profile settings (template-profile.tsx:351)

The change unconditionally disables optimization for all profile pictures. The codebase has similar avatar components (user-avatar.tsx, avatars.tsx) that conditionally apply unoptimized based on whether URLs start with http. Consider adopting this pattern for consistency and to retain optimization benefits for local images.

Confidence Score: 4/5

• This PR is safe to merge with minimal risk - it's a simple bug fix that resolves sharp dependency issues
• The change is straightforward and addresses a real issue with sharp-based image optimization. However, unconditionally disabling optimization for all profile pictures (including local ones) isn't ideal. The codebase already has a better pattern (conditional unoptimized based on URL scheme) used in other avatar components. This is a non-blocking improvement opportunity.
• No files require special attention - both changes are identical single-line additions

Important Files Changed

File Analysis

Filename	Score	Overview
apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/general/general.tsx	4/5	Added unoptimized prop to profile picture Image component to bypass Next.js image optimization
apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/template-profile/template-profile.tsx	4/5	Added unoptimized prop to profile picture Image component to bypass Next.js image optimization

Sequence Diagram

sequenceDiagram
    participant User
    participant SettingsModal
    participant ProfilePictureUpload
    participant Image as Next.js Image
    participant API as /api/files/upload
    
    User->>SettingsModal: Click profile picture
    SettingsModal->>ProfilePictureUpload: handleThumbnailClick()
    ProfilePictureUpload->>User: Open file picker
    User->>ProfilePictureUpload: Select image file
    ProfilePictureUpload->>ProfilePictureUpload: validateFile()
    ProfilePictureUpload->>ProfilePictureUpload: createObjectURL()
    ProfilePictureUpload->>Image: Display preview
    Note over Image: unoptimized=true<br/>(bypasses sharp)
    ProfilePictureUpload->>API: Upload to server
    API-->>ProfilePictureUpload: Return server URL
    ProfilePictureUpload->>ProfilePictureUpload: revokeObjectURL()
    ProfilePictureUpload->>Image: Display uploaded image
    Note over Image: Renders without<br/>Next.js optimization

Loading

[greptile-apps]

_{2 files reviewed, 2 comments}

_{Edit Code Review Agent Settings | Greptile}

[greptile-apps]

style: Unconditionally disabling optimization means all images (including local ones) bypass Next.js optimization. Consider conditionally applying unoptimized based on URL:

Suggested change

	unoptimized
	unoptimized={imageUrl?.startsWith('http')}

This matches the pattern used in user-avatar.tsx:58 and avatars.tsx:65.

Prompt To Fix With AI

This is a comment left during a code review.
Path: apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/general/general.tsx
Line: 294:294

Comment:
**style:** Unconditionally disabling optimization means all images (including local ones) bypass Next.js optimization. Consider conditionally applying `unoptimized` based on URL:

```suggestion
                    unoptimized={imageUrl?.startsWith('http')}
```

This matches the pattern used in `user-avatar.tsx:58` and `avatars.tsx:65`.

How can I resolve this? If you propose a fix, please make it concise.

[greptile-apps]

style: Unconditionally disabling optimization means all images (including local ones) bypass Next.js optimization. Consider conditionally applying unoptimized based on URL:

Suggested change

	unoptimized
	unoptimized={profilePictureUrl?.startsWith('http')}

This matches the pattern used in other avatar components like user-avatar.tsx:58.

Prompt To Fix With AI

This is a comment left during a code review.
Path: apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/template-profile/template-profile.tsx
Line: 351:351

Comment:
**style:** Unconditionally disabling optimization means all images (including local ones) bypass Next.js optimization. Consider conditionally applying `unoptimized` based on URL:

```suggestion
                          unoptimized={profilePictureUrl?.startsWith('http')}
```

This matches the pattern used in other avatar components like `user-avatar.tsx:58`.

How can I resolve this? If you propose a fix, please make it concise.