feat(CropImageTool): Crop profile picture tool

[lgmarchi]

What this PR does 📖

1. Add possibility to crop image for profile picture

Screen.Recording.2023-09-28.at.14.35.15.mov

Which issue(s) this PR fixes 🔨

• It solves part of feat(profile): Create image cropper for profile picture and banner picture #992, but not completely, need other PR for mask, move image, and crop tool for banner image

Special notes for reviewers 🗒️

Additional comments 🎤

[phillsatellite]

Functionally works awesome! I wanted to comment that I think its a little hard to see the slider when in light mode but that could just be my bad eyes lol other than that awesome feature so far 🔥

[lgmarchi]

Functionally works awesome! I wanted to comment that I think its a little hard to see the slider when in light mode but that could just be my bad eyes lol other than that awesome feature so far 🔥

You are correct, in dark mode is not perfect yet, but UI improvement I will let for next PR my friend.

[lgmarchi]

Testing under linux (using opensuse but i assume it is applicable on other distros) that when you select an image and zoom in with the crop tool that the image is partial and may disappear when there is any update to the UI.

2023-10-04.23-08-01.mp4

Did you have similar problem on Linux @phillsatellite ?

[phillsatellite]

When testing last night I couldnt replicate, I re-tested again with Darius and finally got the bug to appear

On Linux I set my profile picture to abour 3/4th of the way zoomed in and when I set picture it just appeared blank. It took me about 15-20 tries to try to replicate this, it seemed like maybe it was at that certain spot when zooming in that caused the bug to appear

[phillsatellite]

Was talking with Sara and Lucas this morning were thinking a better route is to get this merged in and create a new ticket for the Linux bug 👍

[sdwoodbury]

it looks functional but before approving I have some suggested improvements.

edit: the following got left out of the review - the eval on line 49, which uses the first_render hook - could be executed inside of an onmounted event of the div that starts on line 81.

[lgmarchi]

it looks functional but before approving I have some suggested improvements.

edit: the following got left out of the review - the eval on line 49, which uses the first_render hook - could be executed inside of an onmounted event of the div that starts on line 81.

I inserted inside use_future, it will run just one time as well.