feat: Migrate sidebar room list to Virtua

[srijnabhargav]

Proposed changes

This PR migrates the v1 sidebar room list from react-virtuoso to a reusable Virtua-based implementation.

Changes include:

• Adding a reusable SidebarVirtualList component under apps/meteor/client/sidebar/components
• Replacing GroupedVirtuoso, VirtualizedScrollbars, and useResizeObserver in apps/meteor/client/sidebar/RoomList
• Flattening grouped sidebar sections into virtualized rows while preserving collapsible groups and existing room list behavior
• Updating RoomListWrapper to support Virtua container props, refs, and styles while keeping the room list accessible
• Expanding sidebar Storybook data to better exercise virtualization scenarios
• Adding focused unit tests for SidebarVirtualList, RoomList row mapping, and RoomListWrapper

The goal is to align the sidebar with the new Virtua-based virtualization approach while keeping the scope limited to the v1 sidebar implementation.

Issue(s)

Part of the Virtua migration work for Rocket.Chat lists and navigation surfaces.

COMM-176

Steps to test or reproduce

• Open the v1 sidebar and verify room lists render correctly
• Scroll through long room lists and verify virtualization behavior
• Collapse and expand room groups and verify rows update correctly
• Verify unread counts, room icons, and context menus continue to work
• Verify keyboard navigation and accessibility behavior remain unchanged

Run:

• yarn testunit --testPathPattern='client/sidebar'
• ESLint on changed sidebar files
• yarn workspace @rocket.chat/meteor typecheck
• yarn build

Further comments

This migration is intentionally scoped only to apps/meteor/client/sidebar and does not modify:

• MessageSearch
• ThreadList
• DiscussionsList
• Matrix Federation search
• V2 sidebar (secondarySidebar)
• PaginatedVirtualList

The sidebar room list is backed by the local subscription store and does not use pagination or infinite loading, so this PR introduces a dedicated SidebarVirtualList instead of reusing PaginatedVirtualList.

After syncing with the latest upstream/develop, there are existing typecheck failures outside the scope of this PR, including:

• Missing rooms.join REST typings
• MediaCallProvider context type mismatch

These failures are reproducible on a clean checkout of upstream/develop and are unrelated to the sidebar migration.

Summary by CodeRabbit

Summary

• New Features

  • Added a new virtualized grouped sidebar list component for rendering group headers and room rows.

• Refactor

  • Updated the sidebar room list to use the new grouped virtualization with consistent group slicing and stable item keys.
  • Enhanced the room list wrapper to better support container-style props while continuing to render children correctly.

• Tests

  • Added/expanded unit tests for the new virtualized list, room list, and wrapper, including accessibility coverage.

• Documentation

  • Updated the Sidebar Storybook fixture data with discussion settings and expanded sample subscriptions.

[dionisio-bot]

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

• This PR is missing the 'stat: QA assured' label
• This PR is missing the required milestone or project

Please fix the issues and try again

If you have any trouble, please check the PR guidelines

[changeset-bot]

⚠️ No Changeset found

Latest commit: cb536ad

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]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 5a16aa0c-1b34-4654-9d4d-e174b9e0fa95

📥 Commits

Reviewing files that changed from the base of the PR and between 6e323fa and cb536ad.

📒 Files selected for processing (6)

• apps/meteor/client/sidebar/RoomList/RoomList.spec.tsx
• apps/meteor/client/sidebar/RoomList/RoomList.tsx
• apps/meteor/client/sidebar/RoomList/RoomListWrapper.spec.tsx
• apps/meteor/client/sidebar/RoomList/RoomListWrapper.tsx
• apps/meteor/client/sidebar/components/SidebarVirtualList/SidebarVirtualList.spec.tsx
• apps/meteor/client/sidebar/components/SidebarVirtualList/SidebarVirtualList.tsx

🚧 Files skipped from review as they are similar to previous changes (6)

• apps/meteor/client/sidebar/RoomList/RoomListWrapper.spec.tsx
• apps/meteor/client/sidebar/RoomList/RoomListWrapper.tsx
• apps/meteor/client/sidebar/RoomList/RoomList.tsx
• apps/meteor/client/sidebar/RoomList/RoomList.spec.tsx
• apps/meteor/client/sidebar/components/SidebarVirtualList/SidebarVirtualList.spec.tsx
• apps/meteor/client/sidebar/components/SidebarVirtualList/SidebarVirtualList.tsx

📜 Recent review details

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

• GitHub Check: cubic · AI code reviewer

---

Walkthrough

Introduces a new generic SidebarVirtualList component that flattens grouped data into a single virtua-virtualized row list. RoomList is refactored to compute virtualGroups via useMemo and render through SidebarVirtualList instead of GroupedVirtuoso. RoomListWrapper props type is updated to accept CustomContainerComponentProps. Tests are added for all three components, and Storybook sidebar fixtures are expanded.

Changes

SidebarVirtualList component, RoomList integration, and tests

Layer / File(s)	Summary
SidebarVirtualList component and barrel export apps/meteor/client/sidebar/components/SidebarVirtualList/SidebarVirtualList.tsx, apps/meteor/client/sidebar/components/SidebarVirtualList/index.ts	Defines SidebarVirtualListGroup type and SidebarVirtualListProps with groups, renderGroup, renderItem, getItemKey, overscan, and as props; introduces internal discriminated union rows type; flattens groups into keyed rows via useMemo; implements renderRow callback branching on row type; renders rows inside CustomVirtuaScrollbars + Virtualizer with bufferSize={overscan}.
SidebarVirtualList tests apps/meteor/client/sidebar/components/SidebarVirtualList/SidebarVirtualList.spec.tsx	Mocks virtua Virtualizer and CustomVirtuaScrollbars to enable selective row rendering by index via mockVisibleIndexes; defines typed fixtures and a renderVirtualList test helper; tests group/item render order, empty groups, deferred item rendering with call-count assertions, overscan propagation to bufferSize, caller-provided container via as prop, and jest-axe accessibility.
RoomList: virtualGroups and SidebarVirtualList wiring apps/meteor/client/sidebar/RoomList/RoomList.tsx	Removes useResizeObserver, GroupedVirtuoso, and VirtualizedScrollbars; adds useRef for ref-based handlers; computes virtualGroups via useMemo by slicing roomList by groupsCount with running offset and attaching per-group unreadCount; renders through SidebarVirtualList with renderGroup (RoomListCollapser), renderItem (RoomListRow inside RoomListRowWrapper), and getItemKey callbacks.
RoomListWrapper: CustomContainerComponentProps apps/meteor/client/sidebar/RoomList/RoomListWrapper.tsx	Updates RoomListWrapperProps to extend CustomContainerComponentProps while omitting children and style from HTMLAttributes; adds optional 'data-testid' prop; refactors forwardRef to destructure children, style, and 'data-testid', apply style separately, and render children inside the <div>.
RoomList tests apps/meteor/client/sidebar/RoomList/RoomList.spec.tsx	Adds RoomList test suite with fixture rooms and groupedUnreadInfo data; mocks SidebarVirtualList to map groups into deterministic group sections and item wrappers; mocks external hooks and components (UI contexts, i18n, RoomManager, avatar template, collapsed-group handlers, preventDefault, useRoomList, RoomListCollapser/Row/RowWrapper); renders RoomList and asserts SidebarVirtualList receives expected groups structure and overscan: 25; validates DOM output for group headers, room wrappers with correct data-index values, and room row text.
RoomListWrapper tests apps/meteor/client/sidebar/RoomList/RoomListWrapper.spec.tsx	Adds RoomListWrapper test suite with mocks for react-i18next and useSidebarListNavigation; verifies default rendering produces legacy virtuoso-item-list with role="list" and aria-label="Channels"; validates prop forwarding of data-testid and style (height) while list remains accessible and renders nested child content.
Sidebar Storybook fixture expansion apps/meteor/client/sidebar/Sidebar.stories.tsx	Adds Discussion_enabled boolean setting to SettingsContext fixture with package value enabled; refactors subscriptions fixture by introducing createSubscription factory function that computes alert, rid, tunread* arrays, casing, and teamMain; generates larger subscription sets for channels, teams, directs, and discussions with computed unread/mention counts.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

• RocketChat/Rocket.Chat#39394: Introduces CustomVirtuaScrollbars, the shared scrollbars wrapper used by the new SidebarVirtualList component.
• RocketChat/Rocket.Chat#40816: Updates hook signatures (e.g., usePreventDefault, useShortcutOpenMenu) to accept RefObject<Element | null>, matching the useRef change in refactored RoomList.tsx.

Suggested reviewers

• ggazzo

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'Migrate sidebar room list to Virtua' accurately and specifically describes the main change—replacing the virtualization library in the sidebar room list component from react-virtuoso to Virtua, which is the core objective of this PR.
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.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

Warning

Review ran into problems

🔥 Problems

Errors were encountered while retrieving linked issues.

Errors (1)

• COMM-176: Request failed with status code 401

---

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

[cubic-dev-ai]

1 issue found across 8 files

<sub>Reply with feedback, questions, or to request a fix.

Re-trigger cubic</sub>

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 70.15%. Comparing base (7b54fb7) to head (6e323fa).

Additional details and impacted files

@@             Coverage Diff             @@
##           develop   #41036      +/-   ##
===========================================
- Coverage    70.19%   70.15%   -0.04%     
===========================================
  Files         3360     3361       +1     
  Lines       129668   129915     +247     
  Branches     22485    22481       -4     
===========================================
+ Hits         91017    91144     +127     
- Misses       35339    35458     +119     
- Partials      3312     3313       +1     

Flag	Coverage Δ
unit	70.02% <100.00%> (-0.09%)	⬇️

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

🚀 New features to boost your workflow:

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