Feature/ba 2982 rn nested comment threads

[lbjunq]

✅ RN - Nested Threads Lv1
Key details
Description

Acceptance Criteria

Given a comment has nested replies, the user should see a "Show Replies button" at the bottom of the comment.

The button should display the count of replies for that comment.

Given the user clicks on the button, the Reply List should be expanded to show the latest 5 nested replies.

Given the user has expanded the reply list and other replies are still in the thread, the "Show Replies" button should persist and the count of replies should be updated.

Given all replies have been displayed, the "Show Replies" button should no longer appear.

The reply list should be sorted from Newest to Oldest reply.

Each nested reply shifts slightly to the right to indicate its level in the conversation.

A thin vertical line is displayed to the left of nested replies to visually connect them with their parent comment.

The line should extend from the parent comment down through all child replies.

Create a limit for the amount of thread levels, it should be configurable from the Backend.

Guardrails
At this point only 1 nested level will be available.

*Nested Replies Multi Levels

Users can reply to comments or replies, creating a multi-level thread.

Each reply/comment components should have the reaction, reply, name, avatar and timestamp information.

Each nested level gets an additional vertical line indentation.

Hide Reply interaction 

Design Link: https://www.figma.com/design/z5ZdVlKEMmGIX4GVnjwfxA/BaseApp---NATIVE?node-id=7233-167121&t=jbYKzqIHwPMDjdiS-0

Approvd
https://app.approvd.io/silverlogic/BA/stories/39783

Demo:
https://www.loom.com/share/ee85c099a92f48478e7e21fa119093db

[changeset-bot]

⚠️ No Changeset found

Latest commit: 3f5943b

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

• 🔍 Trigger a full review

✨ Finishing touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch feature/BA-2982-rn-nested-comment-threads

Important

Action Needed: IP Allowlist Update

If your organization protects your Git platform with IP whitelisting, please add the new CodeRabbit IP address to your allowlist:

• ✨ 136.113.208.247/32 (new)
• 34.170.211.100/32
• 35.222.179.152/32

Failure to add the new IP will result in interrupted reviews.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[lbjunq]

This PR is not ready for review. Wait for merge on the Reply to Comments before reviewing this.

[lbjunq]

It is also dependant on this BE PR. Wait for merge or run locally

[anicioalexandre]

@lbjunq please resolve conflicts and rebase with the epic so we can review

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[priscilladeroode]

This style seems to be the same as the variant "buttonSmall". Could you change to use the variable instead of this?

[priscilladeroode]

Since you have a function to renderCommentsReplies, could you move this logic to the function to make the code cleaner?

[priscilladeroode]

It is kind of weird to have a "RepliesListProp" and a "RepliesListProps". This RepliesListProp seems to be a component not a prop so the name with Prop in the end does not make sense.