Rebuild communication and activity feed

[theskumar]

• Introduce machine generated avatars based on the user's name (in-future allow for gravatar or similar service)
• Color Code the user avatar based on their roles 🆕
• Render the staff roles as label (Show user group after names as a label #3916)
• Reduce the size of the rendered comment box.
• Merge activities with communication in a single timeline. 🆕
• Use htmx for comment edit function, the js version seems to break some functionality.
• Use different icons for different activities where possible.
• Render paginated comment and activities 🆕
• Cleanup/remove JSON APIs related to comments
• Use the same logic for rendering of comments on the projects module
• Async comment add (won't be done in this PR)
• fix testcases

Work in progress screenshots

Test Steps

• Checkout the activity feed and communication

[wes-otf]

@theskumar @frjo I presented this today to the program team and everyone really liked the idea of combining the comments & activities tab - feedback I got was that folks sometimes found it inconvenient to flip back & forth between tabs trying to figure out when different events happened and correlating that to the comments.

[wes-otf]

also received some enthusiasm around avatars!

[theskumar]

Glad to hear! I'm resuming work on it and keep you posted.

[theskumar]

This should too good to review for UX/UI

Pending items.

• Update test cases
• make the comment submission async, without page refresh.