feat: Added invitation badge to sidebar

[aleksandernsilva]

Proposed changes (including videos or screenshots)

Issue(s)

FB-64

Steps to test or reproduce

Further comments

Summary by CodeRabbit

• New Features

  • Added invitation badge that appears in sidebar views, displaying when users were invited with formatted timestamps

• Tests

  • Added comprehensive test coverage for invitation badge rendering across multiple sidebar locations and accessibility compliance

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[dionisio-bot[bot]]

Looks like this PR is not ready to merge, because of the following issues:

• This PR is missing the 'stat: QA assured' label

Please fix the issues and try again

If you have any trouble, please check the PR guidelines

[changeset-bot[bot]]

🦋 Changeset detected

Latest commit: 66ac1dbc8102f4be6137d3c2b146d470d5bcd4d1

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 42 packages

Name	Type
@rocket.chat/meteor	Patch
@rocket.chat/i18n	Patch
@rocket.chat/mock-providers	Patch
@rocket.chat/ui-contexts	Patch
@rocket.chat/web-ui-registration	Patch
@rocket.chat/omnichannel-transcript	Patch
@rocket.chat/omnichannel-services	Patch
@rocket.chat/fuselage-ui-kit	Patch
@rocket.chat/ui-client	Patch
@rocket.chat/ui-voip	Patch
@rocket.chat/uikit-playground	Patch
@rocket.chat/gazzodown	Patch
@rocket.chat/livechat	Patch
@rocket.chat/ui-avatar	Patch
@rocket.chat/ui-video-conf	Patch
@rocket.chat/queue-worker	Patch
@rocket.chat/core-typings	Patch
@rocket.chat/rest-typings	Patch
@rocket.chat/api-client	Patch
@rocket.chat/apps	Patch
@rocket.chat/core-services	Patch
@rocket.chat/cron	Patch
@rocket.chat/ddp-client	Patch
@rocket.chat/freeswitch	Patch
@rocket.chat/http-router	Patch
@rocket.chat/model-typings	Patch
@rocket.chat/account-service	Patch
@rocket.chat/authorization-service	Patch
@rocket.chat/ddp-streamer	Patch
@rocket.chat/presence-service	Patch
@rocket.chat/stream-hub-service	Patch
@rocket.chat/federation-matrix	Patch
@rocket.chat/license	Patch
@rocket.chat/media-calls	Patch
@rocket.chat/pdf-worker	Patch
@rocket.chat/presence	Patch
rocketchat-services	Patch
@rocket.chat/models	Patch
@rocket.chat/network-broker	Patch
@rocket.chat/omni-core-ee	Patch
@rocket.chat/instance-status	Patch
@rocket.chat/omni-core	Patch

Not sure what this means? Click here to learn what changesets are.

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

[coderabbitai[bot]]

Walkthrough

Adds a new InvitationBadge component (with tests and i18n keys), integrates it into multiple sidebar and sidepanel badge renderers, introduces an UnreadBadge component, and updates tests, translations, and a changeset.

Changes

Cohort / File(s)	Summary
InvitationBadge component apps/meteor/client/components/InvitationBadge/InvitationBadge.tsx, apps/meteor/client/components/InvitationBadge/index.ts, apps/meteor/client/components/InvitationBadge/InvitationBadge.spec.tsx	New default-exported React component that displays a mail icon and invitation status, formats optional invitationDate via time-ago/i18n; index re-exports default; tests for no date, ISO string, and Date object.
Sidebar badges (multiple variants) apps/meteor/client/sidebar/.../SidebarItemBadges.tsx, apps/meteor/client/sidebar/.../SidebarItemBadges.spec.tsx, apps/meteor/client/sidebarv2/.../SidebarItemBadges.tsx, apps/meteor/client/sidebarv2/.../SidebarItemBadges.spec.tsx, apps/meteor/client/views/navigation/sidebar/.../SidebarItemBadges.tsx, apps/meteor/client/views/navigation/sidebar/.../SidebarItemBadges.spec.tsx	Each sidebar badge renderer imports isInviteSubscription and InvitationBadge; conditionally renders <InvitationBadge mbs={2} invitationDate={room.ts} /> for invite subscriptions; corresponding tests updated to assert presence/absence and localized date text.
Sidepanel item badges apps/meteor/client/views/navigation/sidepanel/SidepanelItem/RoomSidePanelItemBadges.tsx, apps/meteor/client/views/navigation/sidepanel/SidepanelItem/RoomSidePanelItemBadges.spec.tsx	Added isInviteSubscription + InvitationBadge rendering when room is an invite; tests added/updated to check presence/absence and formatted date label.
UnreadBadge component apps/meteor/client/views/navigation/sidebar/badges/UnreadBadge.tsx	New UnreadBadge default-exported component and UnreadBadgeProps type; renders SidebarV2ItemBadge with variant/title/aria-label and a child span for the total.
Translations & changeset packages/i18n/src/locales/en.i18n.json, .changeset/twelve-forks-destroy.md	Added Invited and Invited__date__ ("Invited {{date}}") translation keys; new changeset documenting UI change and patch bumps.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20–25 minutes

• Review InvitationBadge date handling and i18n token usage.
• Verify consistent use of isInviteSubscription(room) and room.ts across sidebar/sidepanel variants.
• Check UnreadBadge aria-label composition for accessibility.

Possibly related PRs

• RocketChat/Rocket.Chat#37638 — Integrates InvitationBadge into sidebar badges; closely related implementation.

Suggested labels

stat: ready to merge, stat: QA assured

Suggested reviewers

• dougfabris
• ggazzo

Poem

🐰 A tiny badge hopped into view,
Mail icon blinking, showing when you’re new.
Sidebars whisper dates in gentle light,
Tests tuck in snug, translations just right. ✨

Pre-merge checks and finishing touches

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The PR title directly describes the main change: adding an invitation badge to the sidebar, which aligns with the primary objective and all code changes.
Linked Issues check	✅ Passed	The PR implements the core requirement from FB-64: adding an invitation badge to the sidebar, visible across multiple sidebar view implementations.
Out of Scope Changes check	✅ Passed	All changes are directly related to implementing the invitation badge feature: new component, integrations into sidebar variants, translations, and comprehensive test coverage.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

🧪 Generate unit tests (beta)

• [ ] Create PR with unit tests
• [ ] Post copyable unit tests in a comment
• [ ] Commit unit tests in branch feat/invite-sidebar-badge

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

Disabled knowledge base sources:

• Jira integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.

📥 Commits

Reviewing files that changed from the base of the PR and between 5d5fc5cebcb631c0fdc91df767913b1a9cce5bd6 and 66ac1dbc8102f4be6137d3c2b146d470d5bcd4d1.

📒 Files selected for processing (1)

• packages/i18n/src/locales/en.i18n.json (1 hunks)

🧰 Additional context used

🧠 Learnings (1)

📚 Learning: 2025-11-19T12:32:29.696Z

Learnt from: d-gubert
Repo: RocketChat/Rocket.Chat PR: 37547
File: packages/i18n/src/locales/en.i18n.json:634-634
Timestamp: 2025-11-19T12:32:29.696Z
Learning: Repo: RocketChat/Rocket.Chat
Context: i18n workflow
Learning: In this repository, new translation keys should be added to packages/i18n/src/locales/en.i18n.json only; other locale files are populated via the external translation pipeline and/or fall back to English. Do not request adding the same key to all locale files in future reviews.

Applied to files:

• packages/i18n/src/locales/en.i18n.json

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)

• GitHub Check: 📦 Build Packages
• GitHub Check: CodeQL-Build
• GitHub Check: CodeQL-Build

🔇 Additional comments (1)

packages/i18n/src/locales/en.i18n.json (1)

2682-2683: Invitation badge i18n keys look correct and consistent

Key names, copy, and {{date}} interpolation match existing patterns (e.g., other __date__ keys). No issues from an i18n or UX wording standpoint.

---

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

[github-actions[bot]]

📦 Docker Image Size Report

📈 Changes

Service	Current	Baseline	Change	Percent
sum of all images	1.2GiB	1.2GiB	+12MiB
rocketchat	358MiB	347MiB	+12MiB
omnichannel-transcript-service	132MiB	132MiB	-887B
queue-worker-service	132MiB	132MiB	-441B
ddp-streamer-service	126MiB	126MiB	-696B
account-service	113MiB	113MiB	-189B
stream-hub-service	111MiB	111MiB	+282B
presence-service	111MiB	111MiB	+244B
authorization-service	111MiB	111MiB	+642B

📊 Historical Trend

---
config:
  theme: "dark"
  xyChart:
    width: 900
    height: 400
---
xychart
  title "Image Size Evolution by Service (Last 30 Days + This PR)"
  x-axis ["11/15 22:28", "11/16 01:28", "11/17 23:50", "11/18 22:53", "11/19 23:02", "11/21 16:49", "11/24 17:34", "11/27 22:32", "11/28 19:05", "12/01 23:01", "12/02 21:57", "12/03 21:00", "12/04 18:17", "12/05 21:56", "12/08 20:15", "12/09 22:17", "12/10 23:26", "12/11 21:56", "12/12 22:45", "12/13 01:34", "12/15 13:38 (PR)"]
  y-axis "Size (GB)" 0 --> 0.5
  line "account-service" [0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11]
  line "authorization-service" [0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11]
  line "ddp-streamer-service" [0.12, 0.12, 0.12, 0.12, 0.12, 0.12, 0.12, 0.12, 0.12, 0.12, 0.12, 0.12, 0.12, 0.12, 0.12, 0.12, 0.12, 0.12, 0.12, 0.12, 0.12]
  line "omnichannel-transcript-service" [0.14, 0.14, 0.14, 0.14, 0.14, 0.13, 0.13, 0.13, 0.13, 0.13, 0.13, 0.13, 0.13, 0.13, 0.13, 0.13, 0.13, 0.13, 0.13, 0.13, 0.13]
  line "presence-service" [0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11]
  line "queue-worker-service" [0.14, 0.14, 0.14, 0.14, 0.14, 0.13, 0.13, 0.13, 0.13, 0.13, 0.13, 0.13, 0.13, 0.13, 0.13, 0.13, 0.13, 0.13, 0.13, 0.13, 0.13]
  line "rocketchat" [0.36, 0.36, 0.35, 0.35, 0.35, 0.34, 0.34, 0.34, 0.34, 0.34, 0.34, 0.34, 0.34, 0.34, 0.34, 0.34, 0.34, 0.34, 0.34, 0.34, 0.35]
  line "stream-hub-service" [0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11]

Statistics (last 20 days):

• 📊 Average: 1.5GiB
• ⬇️ Minimum: 1.2GiB
• ⬆️ Maximum: 1.6GiB
• 🎯 Current PR: 1.2GiB

ℹ️ About this report

This report compares Docker image sizes from this build against the develop baseline.

• Tag: pr-37635
• Baseline: develop
• Timestamp: 2025-12-15 13:38:29 UTC
• Historical data points: 20

---

Updated: Mon, 15 Dec 2025 13:38:29 GMT

[aleksandernsilva]

@coderabbitai review

[coderabbitai[bot]]

✅ Actions performed

Review triggered.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

[codecov[bot]]

Codecov Report

:x: Patch coverage is 27.27273% with 8 lines in your changes missing coverage. Please review. :white_check_mark: Project coverage is 67.71%. Comparing base (d3538e7) to head (66ac1db). :warning: Report is 3 commits behind head on develop.

Additional details and impacted files

@@             Coverage Diff             @@
##           develop   #37635      +/-   ##
===========================================
- Coverage    67.80%   67.71%   -0.10%     
===========================================
  Files         3458     3459       +1     
  Lines       113955   113963       +8     
  Branches     20927    20931       +4     
===========================================
- Hits         77271    77169     -102     
- Misses       34553    34657     +104     
- Partials      2131     2137       +6     

Flag	Coverage Δ
e2e	57.33% <27.27%> (-0.05%)	:arrow_down:
e2e-api	42.28% <ø> (-1.00%)	:arrow_down:

Flags with carried forward coverage won't be shown. Click here to find out more.

:rocket: New features to boost your workflow:

• :snowflake: Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• :package: JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.