Integrate Avatar Management with Frontend

[mahid797]

Description

Integrate the avatar management backend with the frontend to allow users to upload, update, and display their avatars. This includes updating the existing profile page to fetch and display the avatar and adding functionality for uploading a new avatar.

---

Tasks

• Fetch and Display Avatar:

  • Connect the profile page to the backend GET endpoint to fetch the avatar_url.
  • Display the user's avatar or a default placeholder if no avatar exists.

• Upload and Update Avatar:

  • Add a file input or drag-and-drop area for users to select and upload an avatar.
  • Connect the input to the backend POST endpoint for uploading/updating avatars.
  • Show a loading indicator during the upload process.
  • Update the displayed avatar dynamically after a successful upload.

• UI Updates:

  • Ensure the UI design aligns with the current profile page aesthetic.
  • Add error handling for failed uploads (e.g., invalid file type, server errors) using toasts or inline error messages.
  • Display a confirmation message or toast upon successful upload.

• Edge Cases:

  • Handle cases where the user cancels an upload.
  • Prevent users from uploading files exceeding the allowed size or unsupported formats.

---

Notes

• Ensure the avatar upload logic integrates with the backend endpoints developed in (Implement Backend for User Avatar Management #148).
• Use the existing design system components for inputs, toasts, and loading indicators.

[Sapna127]

Hey, I would like to work on this issue. pleas assign it to me.

[gorkem-bwl]

@Sapna127 thanks, please go ahead. Since the codebase changes frequently, please make sure you have a good understanding of the code structure before sending a PR.