refactor: Sidebar badges

[aleksandernsilva]

Proposed changes (including videos or screenshots)

This pull request refactors the sidebar badges extracting the logic that currently is inline and hard to test and moving them to a new SidebarItemBadges component .

This is an effort to allow better testing for this specific part of the UI and prepare the code for the new invitation badge to be introduced by #37635.

• Introduced a new SidebarItemBadges component to encapsulate logic for displaying unread and omnichannel badges.
• Updated revevant components in sidebar V1, V2, navigation and sidepanel to use SidebarItemBadges for badge rendering.
• Added a new useUnreadDisplay hook to centralize unread message and mention calculation (same thing we already do for the other sidebars) and updated sidebar V1 to use it.
• Extracted unread badge display into a dedicated UnreadBadge component for consistency.
• Changed OmnichannelBadges to be a default export and updated imports following guidelines
• Added tests for SidebarItemBadges.

Issue(s)

FB-64

Steps to test or reproduce

Further comments

Summary by CodeRabbit

• Refactor

  • Consolidated badge rendering into shared badge components across sidebar, navbar, and sidepanel for consistent visuals and behavior.
  • Simplified unread/mention display via a dedicated unread-display hook, improving accessibility and highlight logic.

• Tests

  • Added unit tests covering new badge components and the unread-display hook.
  • Added Storybook stories, snapshot and accessibility tests for omnichannel badge scenarios.

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

[dionisio-bot[bot]]

Looks like this PR is ready to merge! 🎉 If you have any trouble, please check the PR guidelines

[changeset-bot[bot]]

⚠️ No Changeset found

Latest commit: 5d30f18bcda6308d31e4d6f0de16ac97cd7784c0

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[bot]]

Walkthrough

Consolidates unread and omnichannel badge rendering into new reusable components and a hook: adds UnreadBadge, SidebarItemBadges/RoomSidePanelItemBadges, useUnreadDisplay (typed with exported UnreadData), updates many sidebar/nav components to use these primitives, and adjusts OmnichannelBadges exports/imports and several type signatures to SubscriptionWithRoom.

Changes

Cohort / File(s)	Summary
New unread badge primitives apps/meteor/client/sidebar/badges/UnreadBadge.tsx, apps/meteor/client/sidebarv2/badges/UnreadBadge.tsx	Added default-exported UnreadBadge components rendering accessible unread count badges with variant, total and localized aria-label.
Composite badge components apps/meteor/client/sidebar/badges/SidebarItemBadges.tsx, apps/meteor/client/sidebarv2/badges/SidebarItemBadges.tsx, apps/meteor/client/views/navigation/sidebar/badges/SidebarItemBadges.tsx, apps/meteor/client/views/navigation/sidepanel/SidepanelItem/RoomSidePanelItemBadges.tsx	Added default-exported composite badge components that call useUnreadDisplay and conditionally render UnreadBadge and OmnichannelBadges.
Hook for unread display apps/meteor/client/sidebar/hooks/useUnreadDisplay.tsx, apps/meteor/client/sidebarv2/hooks/useUnreadDisplay.ts, apps/meteor/client/views/navigation/sidebar/hooks/useUnreadDisplay.ts	Added/updated useUnreadDisplay implementations delegating to getSubscriptionUnreadData and accepting the exported UnreadData shape.
Unread logic type export apps/meteor/lib/getSubscriptionUnreadData.ts	Exported UnreadData type (previously private) used by hooks/components for typed input.
Sidebar / nav components updated apps/meteor/client/NavBarV2/NavBarSearch/NavBarSearchItemWithData.tsx, apps/meteor/client/sidebar/RoomList/SideBarItemTemplateWithData.tsx, apps/meteor/client/sidebarv2/RoomList/SidebarItemTemplateWithData.tsx, apps/meteor/client/views/navigation/sidebar/RoomList/SidebarItemWithData.tsx, apps/meteor/client/views/navigation/sidepanel/SidepanelItem/RoomSidePanelItem.tsx	Replaced inline unread/omnichannel badge JSX with new composite badge components and adapted unread props to use useUnreadDisplay outputs.
OmnichannelBadges export/import changes apps/meteor/client/sidebar/badges/OmnichannelBadges.tsx, apps/meteor/client/sidebarv2/badges/OmnichannelBadges.tsx (deleted), apps/meteor/client/views/omnichannel/components/OmnichannelBadges/*	Converted some OmnichannelBadges to default export with index re-export, removed a duplicate sidebarv2 copy, and adjusted import paths.
Type migrations to SubscriptionWithRoom apps/meteor/client/sidebar/RoomList/RoomList.tsx, apps/meteor/client/sidebar/RoomList/RoomListRow.tsx, apps/meteor/client/sidebar/hooks/useAvatarTemplate.tsx, apps/meteor/client/sidebar/hooks/useRoomList.ts, apps/meteor/client/sidebar/search/Row.tsx, apps/meteor/client/sidebar/search/SearchList.tsx	Migrated many props/signatures and internal types from IRoom/ISubscription to SubscriptionWithRoom and added a helper type guard where needed.
Tests & stories added apps/meteor/client/sidebar/badges/SidebarItemBadges.spec.tsx, apps/meteor/client/sidebar/hooks/useUnreadDisplay.spec.tsx, apps/meteor/client/sidebarv2/badges/SidebarItemBadges.spec.tsx, apps/meteor/client/views/navigation/sidebar/badges/SidebarItemBadges.spec.tsx, apps/meteor/client/views/navigation/sidepanel/SidepanelItem/RoomSidePanelItemBadges.spec.tsx, apps/meteor/client/views/omnichannel/components/OmnichannelBadges/OmnichannelBadges.spec.tsx, apps/meteor/client/views/omnichannel/components/OmnichannelBadges/OmnichannelBadges.stories.tsx	Added unit tests for SidebarItemBadges and useUnreadDisplay; added OmnichannelBadges stories and snapshot/a11y tests.

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~45 minutes

Potential focus areas:

• Consistency of useUnreadDisplay typings and all call sites.
• Import/export updates for OmnichannelBadges (ensure no broken imports).
• Accessibility strings / i18n keys used by UnreadBadge and composite badges.
• Tests and mocks updated to reflect default-export changes.

Possibly related PRs

• RocketChat/Rocket.Chat#37369 — overlaps on omnichannel badge export/import changes and related omnichannel badge refactors.

Suggested labels

stat: ready to merge, stat: QA assured

Suggested reviewers

• tassoevan

Poem

🐰 I hopped through code with joyful cheer,

Badges gathered, tidy and clear,
Counts that sparkle, omnichannel bright,
Small components stitched just right,
A happy rabbit celebrates tonight.

Pre-merge checks and finishing touches

❌ Failed checks (1 warning, 2 inconclusive)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run @coderabbitai generate docstrings to improve docstring coverage.
Linked Issues check	❓ Inconclusive	The linked issue FB-64 addresses implementing a sidebar invited status badge. The PR introduces SidebarItemBadges component and prepares architecture for additional badges, but does not implement the invited status badge itself.	Verify whether the PR is intended as a preparatory refactor for FB-64 or if invited status badge implementation is out of scope for this PR.
Out of Scope Changes check	❓ Inconclusive	Changes are primarily focused on badge refactoring across sidebar components, but include broader type system updates (SubscriptionWithRoom usage) that extend beyond badge logic.	Clarify whether type system changes to use SubscriptionWithRoom are necessary for badge refactoring or represent scope creep.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'refactor: Sidebar badges' accurately and concisely summarizes the main change, which is refactoring badge rendering logic across sidebar components.

✨ Finishing touches

• [ ] 📝 Generate docstrings

🧪 Generate unit tests (beta)

• [ ] Create PR with unit tests
• [ ] Post copyable unit tests in a comment
• [ ] Commit unit tests in branch refactor/sidebar-badges

---

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	+33B
queue-worker-service	132MiB	132MiB	-662B
ddp-streamer-service	126MiB	126MiB	+132B
account-service	113MiB	113MiB	-150B
stream-hub-service	111MiB	111MiB	-111B
presence-service	111MiB	111MiB	+1.3KiB
authorization-service	111MiB	111MiB	+104B

📊 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 12:47 (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]
  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]
  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]
  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]
  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]
  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]
  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.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]

Statistics (last 18 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-37638
• Baseline: develop
• Timestamp: 2025-12-12 12:47:12 UTC
• Historical data points: 18

---

Updated: Fri, 12 Dec 2025 12:47:13 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 95.74468% with 2 lines in your changes missing coverage. Please review. :white_check_mark: Project coverage is 67.71%. Comparing base (17f587b) to head (5d30f18). :warning: Report is 1 commits behind head on develop.

Additional details and impacted files

@@           Coverage Diff            @@
##           develop   #37638   +/-   ##
========================================
  Coverage    67.71%   67.71%           
========================================
  Files         3452     3458    +6     
  Lines       113979   113955   -24     
  Branches     20943    20927   -16     
========================================
- Hits         77182    77167   -15     
- Misses       34663    34664    +1     
+ Partials      2134     2124   -10     

Flag	Coverage Δ
e2e	57.32% <95.74%> (-0.01%)	:arrow_down:
e2e-api	42.31% <ø> (+0.05%)	:arrow_up:

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.