[UX Improvement]: Add interactive image cropping and scaling for User Avatars

Description:

Currently, when a user attempts to change their profile picture, the application saves the uploaded image immediately without providing any tools to scale, rotate, or crop the image. This often results in poorly framed avatars, especially when the original image aspect ratio does not match the circular/square display of the profile.

Steps to reproduce:

1. Go to My Account > Profile.
2. Click on the profile picture to change it.
3. Upload a non-square image.
4. Observe that the image is saved instantly without a preview/crop adjustment step.

Expected behavior:

After a user selects an image from their local machine, a modal should appear before the image is saved to the server. This modal should include:
1.A circular crop area to help the user center their face/identity.
2.A zoom slider (Upwork-style) to scale the image in and out.
3.Click-and-drag functionality to reposition the image within the crop frame.
4."Cancel" and "Apply" buttons, where "Apply" processes the crop and only then triggers the upload to the server.

Actual behavior:

The image is uploaded and set as the profile picture as-is.

Before:

After:

Server Setup Information:

• Version of Rocket.Chat Server: 8.2.0-develop
• License Type: Community
• Number of Users: 1
• Operating System: Linux
• Deployment Method: Local Development / yarn dsv
• Number of Running Instances: 1
• DB Replicaset Oplog: Enabled
• NodeJS Version: 22.18.0 - x64
• MongoDB Version: 7.0.16
• MongoDB Engine: wiredTiger

Client Setup Information

• Desktop App or Browser Version: Microsoft Edge
• Operating System: Linux

Additional context

I am a GSoC 2026 applicant working on a proposal for Rocket.Chat. While exploring the platform locally, I identified that the profile picture upload lacks a cropping/scaling phase (similar to the Upwork or LinkedIn UX). This issue report is aimed at introducing an interactive modal to improve user onboarding. I have already successfully set up the local development environment using yarn dsv.

Start with the profile-picture upload flow reached through My Account > Profile, using the local development setup with yarn dsv to reproduce the immediate upload behavior. Done means selecting an image opens a modal with circular cropping, zoom, repositioning, Cancel, and Apply controls, with the upload occurring only after Apply.