**As** a user
**I want to** have the same view that I have in web app for the activity tab
**so that** I clearly know where is the information

**NOTE**

The base of this redesign is the work done in ###54733 for the web app.

**Acceptance criteria**

* Update the UI to match the Primer style activity tab in the web app.

* Timeline UI with the vertical line

* Boxed style for comments

* Bullet point on the timeline for changes

* Follow the logic on what component of the timeline UI display for each cased based on the web app implementation.

* Begin of the insertionCompact all available actions for a singleEnd of the insertion Begin of the deletion TheEnd of the deletion comment Begin of the deletion section is transformedEnd of the deletion into Begin of the deletion a text input field that on tap expands intoEnd of the deletion the Begin of the insertionmore icon:End of the insertion Begin of the deletion current bottom sheet comment box.End of the deletion

* Begin of the insertionQuote replyEnd of the insertion Begin of the deletion Improve the bottom sheet comment box so when the user types multiple lines, the height of the box also increase.End of the deletion

* Begin of the insertionEditEnd of the insertion Begin of the deletion The icon to submit the comment is also adapted from the web app.End of the deletion

* Begin of the insertionMark as read

End of the insertion Begin of the deletion Clicking outside the bottom sheet cancels the comment.

End of the deletion * Begin of the insertionShare

End of the insertion Begin of the deletion Compact all available actions for a single comment into the more icon (e.g. quote reply, edit, mark as read).

End of the deletion * Add the option to change the sorting order (Newest on top or Newest on bottom) and remove this from the account settings.

* Begin of the insertionThe comments and activity changes don't have enumeration anymore (e.g. #26)

* End of the insertion Add a filter dropdown to be able to change between:

* Show everything

* Show changes only

* Show comments only

* Ensure the size, colours, truncation logics and other topics related to text elements are following the designs. Begin of the insertion

* Ensure GitHub actions are available and displayed in the activity tab.End of the insertion


**Technical notes**

* Check how to emulate Primer styles without really using Primer libraries.

* Check the logic behind the implementation in the web app: <mention class="mention" data-id="54733" data-type="work_package" data-text="#54733">#54733</mention>.


**Out of scope**

Begin of the insertion* ###62468

End of the insertion * Do not implement any change on the capabilities of each activity change (e.g. click on the attachment to open a file or opening the details of a description change).