feat: match unread separator with web

[OtavioStasiak]

Proposed changes

Issue(s)

https://rocketchat.atlassian.net/browse/NATIVE-1696

How to test or reproduce

Screenshots

Types of changes

• Bugfix (non-breaking change which fixes an issue)
• Improvement (non-breaking change which improves a current function)
• New feature (non-breaking change which adds functionality)
• Documentation update (if none of the other choices apply)

Checklist

• I have read the CONTRIBUTING doc
• I have signed the CLA
• Lint and unit tests pass locally with my changes
• I have added tests that prove my fix is effective or that my feature works (if applicable)
• I have added necessary documentation (if applicable)
• Any dependent changes have been merged and published in downstream modules

Further comments

Summary by CodeRabbit

• Style
  • Date and unread indicators now appear as separate rows when both are present.
  • The unread indicator uses an error-colored line, with updated text size, weight, spacing, and line height.

[coderabbitai]

Navigate logical layers of code changes, visualize relationships, and explore their blast radius.

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Advanced

Run ID: 7efe3f0d-6c76-45f2-a113-4eea252f3960

📥 Commits

Reviewing files that changed from the base of the PR and between d24ad03 and 8f89e7b.

⛔ Files ignored due to path filters (1)

• app/containers/message/components/__tests__/__snapshots__/Message.test.tsx.snap is excluded by !**/*.snap

📒 Files selected for processing (1)

• app/containers/Separator/MessageSeparator.tsx

Included review availability: This review used your included allowance. Your plan provides up to 8 included reviews per hour; 7 remain after this review.

📜 Recent review details

⏰ Context from checks skipped due to timeout. (3)

• GitHub Check: ESLint and Test / run-eslint-and-test
• GitHub Check: E2E Shard Preflight
• GitHub Check: format

🔇 Additional comments (1)

app/containers/Separator/MessageSeparator.tsx (1)

12-15: LGTM!

Also applies to: 19-28, 30-30, 36-39

---

Walkthrough

MessageSeparator now renders the date and unread indicators independently. When both are present, it renders DateSeparator followed by UnreadSeparator. The unread separator also uses updated line color and text styling.

Changes

Message separator rendering

Layer / File(s)	Summary
Separator styling and rendering app/containers/Separator/MessageSeparator.tsx	MessageSeparator renders DateSeparator for a timestamp and UnreadSeparator for unread state. The unread line uses colors.strokeError, and the text styling changes to 12-point bold with a 16-point line height and an 8-point left margin.

Priority: ⬇️ Low

Estimated code review effort: 2 (Simple) | ~10 minutes

Change: Feature

Suggested labels: type: feature

Merge Risk: ⚪ Minimal · up to 8f89e

When both states apply, users see separate date and unread indicators. No concrete regression is established, so the change is ready for normal checks.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff. Analyzed 0 functions across 1…
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly identifies the main change: matching the unread separator with the web version. It is concise and relevant to the changeset.

• Autopilot · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

Autopilot is currently an internal CodeRabbit preview.

Warning

Errors were encountered while retrieving linked issues.

Errors (1)

• JIRA integration encountered authorization issues. Please disconnect and reconnect the integration in the CodeRabbit UI.

---

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.}