feat(circle-details): allow setting avatar image for circle

[cristianscheid]

• Resolves: Support associating a "preview" picture to teams circles#2433
• Related to: feat: add support for setting preview avatar for circle circles#2438

Summary

• Adds support for setting avatar image for circle

Screenshots

demo.webm

[codecov]

Codecov Report

❌ Patch coverage is 0% with 91 lines in your changes missing coverage. Please review.

Files with missing lines	Patch %	Lines
src/components/CircleDetails.vue	0.00%	91 Missing ⚠️

📢 Thoughts on this report? Let us know!

[cristianscheid]

@kra-mo following your suggestion:

I positioned the avatar buttons beneath the name and description in edit mode and styled them closer to the reference in this issue. The PR description has been updated with screenshots and a short video showing the current state.

Two questions I'd appreciate your input on:

1. How should we handle the button widths?
2. Right now, selecting an image opens the cropper and clicking "Set as team picture" saves immediately to the backend. Should it instead only save when the main edit mode "Save" button is clicked?

Besides that, I'm also aware that probably a spacing between the buttons is needed and also some margin from the main edit mode "Cancel" and "Save" buttons. Just waiting for another round of input before moving forward.

Any other thoughts are welcome :)

[kra-mo]

How should we handle the button widths?

The widths should definitely be homogeneous.

They should also have margins between them.

Right now, selecting an image opens the cropper and clicking "Set as team picture" saves immediately to the backend. Should it instead only save when the main edit mode "Save" button is clicked?

Since there is a "Cancel" button, the second behavior makes more sense.

[cristianscheid]

@kra-mo thanks for the input, really appreciated! I've adopted your suggestions and updated the implementation. Also updated the main comment of this PR with new screenshots and a short video demoing the current state.

[pringelmann]

🚀 nice work!