snapshot of https://github.com/RocketChat/Rocket.Chat.git (develop, 2026-09-16; blobs > 131072B omitted)

apps/meteor/client/views/navigation/sidebar/RoomList/OmnichannelFilters.tsx

@@ -0,0 +1,29 @@
+import { Box, Divider } from '@rocket.chat/fuselage';
+import { usePermission } from '@rocket.chat/ui-contexts';
+import { useTranslation } from 'react-i18next';
+
+import RoomListFiltersItem from './RoomListFiltersItem';
+import { sidePanelFiltersConfig } from '../../contexts/RoomsNavigationContext';
+
+const OmnichannelFilters = () => {
+	const { t } = useTranslation();
+	const hasAccess = usePermission('view-l-room');
+	const canViewOmnichannelQueue = usePermission('view-livechat-queue');
+
+	if (!hasAccess) {
+		return null;
+	}
+
+	return (
+		<>
+			<Box role='tablist' aria-label={t('Omnichannel_filters')} aria-orientation='vertical'>
+				<RoomListFiltersItem group='inProgress' icon={sidePanelFiltersConfig.inProgress.icon} />
+				{canViewOmnichannelQueue && <RoomListFiltersItem group='queue' icon={sidePanelFiltersConfig.queue.icon} />}
+				<RoomListFiltersItem group='onHold' icon={sidePanelFiltersConfig.onHold.icon} />
+			</Box>
+			<Divider borderColor='stroke-light' marginBlock={4} marginInline={16} />
+		</>
+	);
+};
+
+export default OmnichannelFilters;

apps/meteor/client/views/navigation/sidebar/RoomList/RoomList.tsx

@@ -0,0 +1,74 @@
+import { Box } from '@rocket.chat/fuselage';
+import { useResizeObserver } from '@rocket.chat/fuselage-hooks';
+import { VirtualizedScrollbars } from '@rocket.chat/ui-client';
+import { useUserId } from '@rocket.chat/ui-contexts';
+import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { GroupedVirtuoso } from 'react-virtuoso';
+
+import RoomListCollapser from './RoomListCollapser';
+import RoomsListFilters from './RoomListFilters';
+import RoomListRow from './RoomListRow';
+import RoomListRowWrapper from './RoomListRowWrapper';
+import RoomListWrapper from './RoomListWrapper';
+import { useOpenedRoom } from '../../../../lib/RoomManager';
+import { useSideBarRoomsList, sidePanelFiltersConfig } from '../../contexts/RoomsNavigationContext';
+import { usePreventDefault } from '../hooks/usePreventDefault';
+import { useShortcutOpenMenu } from '../hooks/useShortcutOpenMenu';
+
+const RoomList = () => {
+	const { t } = useTranslation();
+	const isAnonymous = !useUserId();
+
+	const { roomListGroups, groupCounts, collapsedGroups, handleClick, handleKeyDown, totalCount } = useSideBarRoomsList();
+	const { ref } = useResizeObserver<HTMLElement>({ debounceDelay: 100 });
+	const openedRoom = useOpenedRoom() ?? '';
+
+	const itemData = useMemo(
+		() => ({
+			t,
+			openedRoom,
+			isAnonymous,
+		}),
+		[isAnonymous, openedRoom, t],
+	);
+
+	usePreventDefault(ref);
+	useShortcutOpenMenu(ref);
+
+	return (
+		<Box position='relative' overflow='hidden' height='full' ref={ref}>
+			<VirtualizedScrollbars>
+				<GroupedVirtuoso
+					groupCounts={groupCounts}
+					groupContent={(index) => {
+						const { group, unreadInfo } = roomListGroups[index];
+
+						return (
+							<RoomListCollapser
+								collapsedGroups={collapsedGroups}
+								onClick={() => handleClick(group)}
+								onKeyDown={(e) => handleKeyDown(e, group)}
+								groupTitle={sidePanelFiltersConfig[group].title}
+								group={group}
+								unreadCount={unreadInfo}
+							/>
+						);
+					}}
+					{...(totalCount > 0 && {
+						itemContent: (index, groupIndex) => {
+							const { rooms } = roomListGroups[groupIndex];
+							// Grouped virtuoso index increases linearly, but we're indexing the list by group.
+							// Either we go back to providing a single list, or we do this.
+							const correctedIndex = index - groupCounts.slice(0, groupIndex).reduce((acc, count) => acc + count, 0);
+							return <RoomListRow data={itemData} item={rooms[correctedIndex]} />;
+						},
+					})}
+					components={{ Header: RoomsListFilters, Item: RoomListRowWrapper, List: RoomListWrapper }}
+				/>
+			</VirtualizedScrollbars>
+		</Box>
+	);
+};
+
+export default RoomList;

apps/meteor/client/views/navigation/sidebar/RoomList/RoomListCollapser.tsx

@@ -0,0 +1,41 @@
+import type { ISubscription } from '@rocket.chat/core-typings';
+import { Badge, SidebarCollapseGroup } from '@rocket.chat/fuselage';
+import type { HTMLAttributes, KeyboardEvent, MouseEventHandler } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import type { AllGroupsKeys } from '../../contexts/RoomsNavigationContext';
+import { useUnreadDisplay } from '../hooks/useUnreadDisplay';
+
+export type RoomListCollapserProps = {
+	group: AllGroupsKeys;
+	groupTitle: string;
+	collapsedGroups: string[];
+	onClick: MouseEventHandler<HTMLElement>;
+	onKeyDown: (e: KeyboardEvent) => void;
+	unreadCount: Pick<ISubscription, 'userMentions' | 'groupMentions' | 'unread' | 'tunread' | 'tunreadUser' | 'tunreadGroup'>;
+} & Omit<HTMLAttributes<HTMLElement>, 'onClick' | 'onKeyDown'>;
+
+const RoomListCollapser = ({ groupTitle, unreadCount: unreadGroupCount, collapsedGroups, group, ...props }: RoomListCollapserProps) => {
+	const { t } = useTranslation();
+
+	const { unreadTitle, unreadVariant, showUnread, unreadCount } = useUnreadDisplay(unreadGroupCount);
+	return (
+		<SidebarCollapseGroup
+			title={t(groupTitle)}
+			expanded={!collapsedGroups.includes(group)}
+			badge={
+				showUnread ? (
+					<Badge variant={unreadVariant} title={unreadTitle} aria-label={unreadTitle} role='status'>
+						{unreadCount.total}
+					</Badge>
+				) : undefined
+			}
+			aria-label={
+				!collapsedGroups.includes(group) ? t('Collapse_group', { group: t(groupTitle) }) : t('Expand_group', { group: t(groupTitle) })
+			}
+			{...props}
+		/>
+	);
+};
+
+export default RoomListCollapser;

apps/meteor/client/views/navigation/sidebar/RoomList/RoomListFilters.tsx

@@ -0,0 +1,20 @@
+import { Box } from '@rocket.chat/fuselage';
+import { forwardRef } from 'react';
+import type { Components } from 'react-virtuoso';
+
+import OmnichannelFilters from './OmnichannelFilters';
+import TeamCollabFilters from './TeamCollabFilters';
+import { useOmnichannelEnabled } from '../../../omnichannel/hooks/useOmnichannelEnabled';
+
+const RoomListFilters: Components['Header'] = forwardRef(function RoomListWrapper(_, ref) {
+	const showOmnichannel = useOmnichannelEnabled();
+
+	return (
+		<Box ref={ref} display='flex' flexDirection='column'>
+			<TeamCollabFilters />
+			{showOmnichannel && <OmnichannelFilters />}
+		</Box>
+	);
+});
+
+export default RoomListFilters;

apps/meteor/client/views/navigation/sidebar/RoomList/RoomListFiltersItem.tsx

@@ -0,0 +1,50 @@
+import { Icon, SidebarItem, SidebarItemIcon, SidebarItemTitle } from '@rocket.chat/fuselage';
+import { useButtonPattern } from '@rocket.chat/fuselage-hooks';
+import type { Keys as IconName } from '@rocket.chat/icons';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import RoomListFiltersItemBadge from './RoomListFiltersItemBadge';
+import {
+	type SidePanelFiltersKeys,
+	sidePanelFiltersConfig,
+	useSidePanelFilter,
+	useSwitchSidePanelTab,
+} from '../../contexts/RoomsNavigationContext';
+import { useUnreadGroupData } from '../../contexts/RoomsNavigationContext';
+import { useUnreadDisplay } from '../hooks/useUnreadDisplay';
+
+type SidebarFiltersItemProps = {
+	group: SidePanelFiltersKeys;
+	icon: IconName;
+};
+
+const RoomListFiltersItem = ({ group, icon }: SidebarFiltersItemProps) => {
+	const { t } = useTranslation();
+	const switchSidePanelTab = useSwitchSidePanelTab();
+
+	const unreadGroupCount = useUnreadGroupData(group);
+	const buttonProps = useButtonPattern((e) => {
+		e.preventDefault();
+		switchSidePanelTab(group);
+	});
+	const [currentTab] = useSidePanelFilter();
+	const roomTitle = sidePanelFiltersConfig[group].title;
+	const { unreadTitle, showUnread, highlightUnread: highlighted } = useUnreadDisplay(unreadGroupCount);
+
+	return (
+		<SidebarItem
+			aria-label={showUnread ? t('__unreadTitle__from__roomTitle__', { unreadTitle, roomTitle }) : roomTitle}
+			selected={group === currentTab}
+			aria-selected={group === currentTab}
+			{...buttonProps}
+			role='tab'
+		>
+			<SidebarItemIcon highlighted={highlighted} icon={<Icon size='x20' name={icon} />} />
+			<SidebarItemTitle unread={highlighted}>{t(roomTitle)}</SidebarItemTitle>
+			{showUnread && <RoomListFiltersItemBadge roomTitle={roomTitle} unreadGroupCount={unreadGroupCount} />}
+		</SidebarItem>
+	);
+};
+
+export default memo(RoomListFiltersItem);

apps/meteor/client/views/navigation/sidebar/RoomList/RoomListFiltersItemBadge.tsx

@@ -0,0 +1,37 @@
+import { SidebarItemBadge } from '@rocket.chat/fuselage';
+import type { SubscriptionWithRoom, TranslationKey } from '@rocket.chat/ui-contexts';
+import { useTranslation } from 'react-i18next';
+
+import { useUnreadDisplay } from '../hooks/useUnreadDisplay';
+
+export type RoomListFiltersItemBadgeProps = {
+	roomTitle: TranslationKey;
+	unreadGroupCount: Pick<
+		SubscriptionWithRoom,
+		'alert' | 'userMentions' | 'unread' | 'tunread' | 'tunreadUser' | 'groupMentions' | 'hideMentionStatus' | 'hideUnreadStatus'
+	>;
+};
+
+/**
+ * TODO: This component can be optimized and used in multiple places.
+ * The usage of the <span> to handle properly the aria label together with the
+ * unread number could be moved to fuselage
+ **/
+
+const RoomListFiltersItemBadge = ({ roomTitle, unreadGroupCount }: RoomListFiltersItemBadgeProps) => {
+	const { t } = useTranslation();
+	const { unreadTitle, unreadVariant, unreadCount } = useUnreadDisplay(unreadGroupCount);
+
+	return (
+		<SidebarItemBadge
+			variant={unreadVariant}
+			title={unreadTitle}
+			role='status'
+			aria-label={t('__unreadTitle__from__roomTitle__', { unreadTitle, roomTitle })}
+		>
+			<span aria-hidden>{unreadCount.total}</span>
+		</SidebarItemBadge>
+	);
+};
+
+export default RoomListFiltersItemBadge;

apps/meteor/client/views/navigation/sidebar/RoomList/RoomListRow.tsx

@@ -0,0 +1,37 @@
+import type { SubscriptionWithRoom } from '@rocket.chat/ui-contexts';
+import { useVideoConfAcceptCall, useVideoConfRejectIncomingCall, useVideoConfIncomingCalls } from '@rocket.chat/ui-video-conf';
+import type { TFunction } from 'i18next';
+import { memo, useMemo } from 'react';
+
+import SidebarItemWithData from './SidebarItemWithData';
+
+export type RoomListRowProps = {
+	data: {
+		t: TFunction;
+		openedRoom: string;
+		isAnonymous: boolean;
+	};
+	item: SubscriptionWithRoom;
+};
+
+const RoomListRow = ({ data, item }: RoomListRowProps) => {
+	const { t } = data;
+
+	const acceptCall = useVideoConfAcceptCall();
+	const rejectCall = useVideoConfRejectIncomingCall();
+	const incomingCalls = useVideoConfIncomingCalls();
+	const currentCall = incomingCalls.find((call) => call.rid === item.rid);
+
+	const videoConfActions = useMemo(
+		() =>
+			currentCall && {
+				acceptCall: (): void => acceptCall(currentCall.callId),
+				rejectCall: (): void => rejectCall(currentCall.callId),
+			},
+		[acceptCall, rejectCall, currentCall],
+	);
+
+	return <SidebarItemWithData t={t} room={item} videoConfActions={videoConfActions} />;
+};
+
+export default memo(RoomListRow);

apps/meteor/client/views/navigation/sidebar/RoomList/RoomListRowWrapper.tsx

@@ -0,0 +1,11 @@
+import { SidebarListItem } from '@rocket.chat/fuselage';
+import type { ForwardedRef, HTMLAttributes } from 'react';
+import { forwardRef } from 'react';
+
+export type RoomListRoomWrapperProps = HTMLAttributes<HTMLDivElement>;
+
+const RoomListRoomWrapper = forwardRef(function RoomListRoomWrapper(props: RoomListRoomWrapperProps, ref: ForwardedRef<HTMLDivElement>) {
+	return <SidebarListItem ref={ref} {...props} />;
+});
+
+export default RoomListRoomWrapper;

apps/meteor/client/views/navigation/sidebar/RoomList/RoomListWrapper.tsx

@@ -0,0 +1,18 @@
+import { useMergedRefs } from '@rocket.chat/fuselage-hooks';
+import type { ForwardedRef, HTMLAttributes } from 'react';
+import { forwardRef } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useSidebarListNavigation } from './useSidebarListNavigation';
+
+export type RoomListWrapperProps = HTMLAttributes<HTMLDivElement>;
+
+const RoomListWrapper = forwardRef(function RoomListWrapper(props: RoomListWrapperProps, ref: ForwardedRef<HTMLDivElement>) {
+	const { t } = useTranslation();
+	const { sidebarListRef } = useSidebarListNavigation();
+	const mergedRefs = useMergedRefs(ref, sidebarListRef);
+
+	return <div role='list' aria-label={t('Channels')} ref={mergedRefs} {...props} />;
+});
+
+export default RoomListWrapper;

apps/meteor/client/views/navigation/sidebar/RoomList/SidebarItem.tsx

@@ -0,0 +1,55 @@
+import {
+	IconButton,
+	SidebarItem as FuselageSidebarItem,
+	SidebarItemAvatarWrapper,
+	SidebarItemMenu,
+	SidebarItemTitle,
+} from '@rocket.chat/fuselage';
+import { RoomAvatar } from '@rocket.chat/ui-avatar';
+import type { SubscriptionWithRoom } from '@rocket.chat/ui-contexts';
+import type { HTMLAttributes, ReactNode } from 'react';
+import { memo } from 'react';
+
+import { useDeferredMenuMount } from '../../../../sidebar/Item/useDeferredMenuMount';
+
+export type SidebarItemProps = {
+	title: ReactNode;
+	titleIcon?: ReactNode;
+	icon?: ReactNode;
+	actions?: ReactNode;
+	href?: string;
+	unread?: boolean;
+	menu?: ReactNode;
+	menuOptions?: any;
+	selected?: boolean;
+	badges?: ReactNode;
+	clickable?: boolean;
+	room: SubscriptionWithRoom;
+} & Omit<HTMLAttributes<HTMLAnchorElement>, 'is'>;
+
+const SidebarItem = ({ icon, title, actions, unread, menu, badges, room, ...props }: SidebarItemProps) => {
+	const { mounted: menuVisibility, requestMount, mountNow } = useDeferredMenuMount();
+
+	return (
+		<FuselageSidebarItem {...props} onFocus={mountNow} onPointerEnter={requestMount} aria-selected={props.selected}>
+			<SidebarItemAvatarWrapper>
+				<RoomAvatar size='x20' room={{ ...room, _id: room.rid || room._id, type: room.t }} />
+			</SidebarItemAvatarWrapper>
+			{icon}
+			<SidebarItemTitle unread={unread}>{title}</SidebarItemTitle>
+			{badges}
+			{actions}
+			{menu && (
+				<SidebarItemMenu>
+					{menuVisibility ? (
+						menu
+					) : (
+						<IconButton tabIndex={-1} aria-hidden mini rcx-sidebar-item__menu icon='kebab' onPointerDown={mountNow} />
+					)}
+				</SidebarItemMenu>
+			)}
+		</FuselageSidebarItem>
+	);
+};
+
+export default memo(SidebarItem);

apps/meteor/client/views/navigation/sidebar/RoomList/SidebarItemWithData.tsx

@@ -0,0 +1,136 @@
+import { isOmnichannelRoom } from '@rocket.chat/core-typings';
+import { SidebarAction, SidebarActions, SidebarItemIcon } from '@rocket.chat/fuselage';
+import { useButtonPattern } from '@rocket.chat/fuselage-hooks';
+import type { SubscriptionWithRoom } from '@rocket.chat/ui-contexts';
+import { useUserId } from '@rocket.chat/ui-contexts';
+import type { TFunction } from 'i18next';
+import type { AllHTMLAttributes } from 'react';
+import { memo, useMemo } from 'react';
+
+import SidebarItem from './SidebarItem';
+import { RoomIcon } from '../../../../components/RoomIcon';
+import { useUserStatusTooltip } from '../../../../hooks/useUserStatusTooltip';
+import { roomCoordinator } from '../../../../lib/rooms/roomCoordinator';
+import { getUidDirectMessage } from '../../../../lib/utils/getUidDirectMessage';
+import { useRoomsListContext, useIsRoomFilter, useRedirectToFilter } from '../../contexts/RoomsNavigationContext';
+import SidebarItemBadges from '../badges/SidebarItemBadges';
+import { useUnreadDisplay } from '../hooks/useUnreadDisplay';
+
+type RoomListRowProps = {
+	t: TFunction;
+	openedRoom?: string;
+	isAnonymous?: boolean;
+
+	room: SubscriptionWithRoom;
+	id?: string;
+	/* @deprecated */
+	style?: AllHTMLAttributes<HTMLElement>['style'];
+
+	videoConfActions?: {
+		[action: string]: () => void;
+	};
+};
+
+const SidebarItemWithData = ({ room, id, style, t, videoConfActions }: RoomListRowProps) => {
+	const title = roomCoordinator.getRoomName(room.t, room) || '';
+	const href = roomCoordinator.getRouteLink(room.t, room) || '';
+
+	const dmUserId = getUidDirectMessage(room, useUserId());
+	const dmStatusTooltipHandlers = useUserStatusTooltip(dmUserId, title);
+
+	const { unreadTitle, showUnread, highlightUnread: highlighted } = useUnreadDisplay(room);
+
+	const icon = (
+		<SidebarItemIcon
+			highlighted={highlighted}
+			icon={<RoomIcon room={room} placement='sidebar' size='x20' isIncomingCall={Boolean(videoConfActions)} />}
+		/>
+	);
+
+	const actions = useMemo(
+		() =>
+			videoConfActions && (
+				<SidebarActions>
+					<SidebarAction onClick={videoConfActions.acceptCall} mini secondary success icon='phone' />
+					<SidebarAction onClick={videoConfActions.rejectCall} mini secondary danger icon='phone-off' />
+				</SidebarActions>
+			),
+		[videoConfActions],
+	);
+
+	const { parentRid } = useRoomsListContext();
+
+	const isRoomFilter = useIsRoomFilter();
+
+	const selected = isRoomFilter && room.rid === parentRid;
+
+	const redirectToFilter = useRedirectToFilter();
+	const buttonProps = useButtonPattern(() => redirectToFilter(room));
+
+	return (
+		<SidebarItem
+			id={id}
+			data-unread={highlighted}
+			unread={highlighted}
+			href={href}
+			selected={selected}
+			aria-label={showUnread ? t('__unreadTitle__from__roomTitle__', { unreadTitle, roomTitle: title }) : title}
+			title={title}
+			icon={icon}
+			style={style}
+			badges={<SidebarItemBadges room={room} roomTitle={title} />}
+			room={room}
+			actions={actions}
+			{...buttonProps}
+			{...dmStatusTooltipHandlers}
+		/>
+	);
+};
+
+function safeDateNotEqualCheck(a: Date | string | undefined, b: Date | string | undefined): boolean {
+	if (!a || !b) {
+		return a !== b;
+	}
+	return new Date(a).toISOString() !== new Date(b).toISOString();
+}
+
+const keys: (keyof RoomListRowProps)[] = ['id', 'style', 't', 'videoConfActions'];
+
+export default memo(SidebarItemWithData, (prevProps, nextProps) => {
+	if (keys.some((key) => prevProps[key] !== nextProps[key])) {
+		return false;
+	}
+
+	if (prevProps.room === nextProps.room) {
+		return true;
+	}
+
+	if (prevProps.room._id !== nextProps.room._id) {
+		return false;
+	}
+	if (prevProps.room._updatedAt?.toISOString() !== nextProps.room._updatedAt?.toISOString()) {
+		return false;
+	}
+	if (safeDateNotEqualCheck(prevProps.room.lastMessage?._updatedAt, nextProps.room.lastMessage?._updatedAt)) {
+		return false;
+	}
+	if (prevProps.room.alert !== nextProps.room.alert) {
+		return false;
+	}
+	if (isOmnichannelRoom(prevProps.room) && isOmnichannelRoom(nextProps.room) && prevProps.room?.v?.status !== nextProps.room?.v?.status) {
+		return false;
+	}
+	if (prevProps.room.teamMain !== nextProps.room.teamMain) {
+		return false;
+	}
+
+	if (
+		isOmnichannelRoom(prevProps.room) &&
+		isOmnichannelRoom(nextProps.room) &&
+		prevProps.room.priorityWeight !== nextProps.room.priorityWeight
+	) {
+		return false;
+	}
+
+	return true;
+});

apps/meteor/client/views/navigation/sidebar/RoomList/TeamCollabFilters.tsx

@@ -0,0 +1,24 @@
+import { Divider, Box } from '@rocket.chat/fuselage';
+import { useSetting } from '@rocket.chat/ui-contexts';
+import { useTranslation } from 'react-i18next';
+
+import RoomListFiltersItem from './RoomListFiltersItem';
+import { sidePanelFiltersConfig } from '../../contexts/RoomsNavigationContext';
+
+const TeamCollabFilters = () => {
+	const { t } = useTranslation();
+	const isDiscussionEnabled = useSetting('Discussion_enabled');
+
+	return (
+		<>
+			<Box role='tablist' aria-label={t('Team_collaboration_filters')} aria-orientation='vertical'>
+				<RoomListFiltersItem group='all' icon={sidePanelFiltersConfig.all.icon} />
+				<RoomListFiltersItem group='favorites' icon={sidePanelFiltersConfig.favorites.icon} />
+				{isDiscussionEnabled && <RoomListFiltersItem group='discussions' icon={sidePanelFiltersConfig.discussions.icon} />}
+			</Box>
+			<Divider borderColor='stroke-light' marginBlock={4} marginInline={16} />
+		</>
+	);
+};
+
+export default TeamCollabFilters;

apps/meteor/client/views/navigation/sidebar/RoomList/index.ts

@@ -0,0 +1 @@
+export { default } from './RoomList';

apps/meteor/client/views/navigation/sidebar/RoomList/useSidebarListNavigation.ts

@@ -0,0 +1,104 @@
+import { useFocusManager } from '@react-aria/focus';
+import { useCallback } from 'react';
+
+const isListItem = (node: EventTarget) =>
+	(node as HTMLElement).classList.contains('rcx-sidebar-item') && (node as HTMLElement).parentElement?.role === 'listitem';
+const isCollapseGroup = (node: EventTarget) => (node as HTMLElement).classList.contains('rcx-sidebar-collapse-group__bar');
+const isListItemMenu = (node: EventTarget) => (node as HTMLElement).classList.contains('rcx-sidebar-item__menu');
+
+/**
+ * Custom hook to provide the sidebar navigation by keyboard.
+ * @returns ref - A ref to the message list DOM element.
+ */
+export const useSidebarListNavigation = () => {
+	const sidebarListFocusManager = useFocusManager();
+
+	const sidebarListRef = useCallback(
+		(node: HTMLElement | null) => {
+			let lastItemFocused: HTMLElement | null = null;
+
+			if (!node) {
+				return;
+			}
+
+			node.addEventListener('keydown', (e) => {
+				if (!e.target) {
+					return;
+				}
+
+				if (!isListItem(e.target) && !isCollapseGroup(e.target)) {
+					return;
+				}
+
+				if (e.key === 'Tab') {
+					e.preventDefault();
+					e.stopPropagation();
+
+					if (e.shiftKey) {
+						sidebarListFocusManager?.focusPrevious({
+							accept: (node) => !isListItem(node) && !isListItemMenu(node) && !isCollapseGroup(node),
+						});
+					} else if (isListItemMenu(e.target)) {
+						sidebarListFocusManager?.focusNext({
+							accept: (node) => !isListItem(node) && !isListItemMenu(node) && !isCollapseGroup(node),
+						});
+					} else {
+						sidebarListFocusManager?.focusNext({
+							accept: (node) => !isListItem(node) && !isCollapseGroup(node),
+						});
+					}
+				}
+
+				if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
+					e.preventDefault();
+					e.stopPropagation();
+
+					if (e.key === 'ArrowUp') {
+						sidebarListFocusManager?.focusPrevious({ accept: (node) => isListItem(node) || isCollapseGroup(node) });
+					}
+
+					if (e.key === 'ArrowDown') {
+						sidebarListFocusManager?.focusNext({ accept: (node) => isListItem(node) || isCollapseGroup(node) });
+					}
+
+					lastItemFocused = document.activeElement as HTMLElement;
+				}
+			});
+
+			node.addEventListener(
+				'blur',
+				(e) => {
+					if (
+						!(e.relatedTarget as HTMLElement)?.matches(':focus-visible') ||
+						!(e.currentTarget instanceof HTMLElement && e.relatedTarget instanceof HTMLElement)
+					) {
+						return;
+					}
+
+					if (!e.currentTarget.contains(e.relatedTarget) && !lastItemFocused) {
+						lastItemFocused = e.target as HTMLElement;
+					}
+				},
+				{ capture: true },
+			);
+
+			node.addEventListener(
+				'focus',
+				(e) => {
+					const triggeredByKeyboard = (e.target as HTMLElement)?.matches(':focus-visible');
+					if (!triggeredByKeyboard || !(e.currentTarget instanceof HTMLElement && e.relatedTarget instanceof HTMLElement)) {
+						return;
+					}
+
+					if (lastItemFocused && !e.currentTarget.contains(e.relatedTarget) && node.contains(e.target as HTMLElement)) {
+						lastItemFocused?.focus();
+					}
+				},
+				{ capture: true },
+			);
+		},
+		[sidebarListFocusManager],
+	);
+
+	return { sidebarListRef };
+};

apps/meteor/client/views/navigation/sidebar/Sidebar.tsx

@@ -0,0 +1,23 @@
+import { Sidebar as FuselageSidebar } from '@rocket.chat/fuselage';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import SidebarRoomList from './RoomList';
+import SidebarFooter from '../../../sidebar/footer';
+import BannerSection from '../../../sidebar/sections/BannerSection';
+import NowPlayingSection from '../../../sidebar/sections/NowPlayingSection';
+
+const Sidebar = () => {
+	const { t } = useTranslation();
+
+	return (
+		<FuselageSidebar aria-label={t('Sidebar')} className='rcx-sidebar--main rcx-sidebar'>
+			<BannerSection />
+			<SidebarRoomList />
+			<NowPlayingSection />
+			<SidebarFooter />
+		</FuselageSidebar>
+	);
+};
+
+export default memo(Sidebar);

apps/meteor/client/views/navigation/sidebar/badges/SidebarItemBadges.spec.tsx

@@ -0,0 +1,59 @@
+import { mockAppRoot } from '@rocket.chat/mock-providers';
+import { render, screen } from '@testing-library/react';
+
+import SidebarItemBadges from './SidebarItemBadges';
+import { createFakeSubscription } from '../../../../../tests/mocks/data';
+
+describe('SidebarItemBadges', () => {
+	const appRoot = mockAppRoot()
+		.withTranslations('en', 'core', {
+			Invited__date__: 'Invited {{date}}',
+			mentions_counter_one: '{{count}} mention',
+			mentions_counter_other: '{{count}} mentions',
+			__unreadTitle__from__roomTitle__: '{{unreadTitle}} from {{roomTitle}}',
+		})
+		.build();
+
+	afterEach(() => {
+		jest.resetAllMocks();
+	});
+
+	it('should render UnreadBadge when there are unread messages', () => {
+		render(<SidebarItemBadges room={createFakeSubscription({ unread: 1, userMentions: 1, groupMentions: 0 })} roomTitle='Test Room' />, {
+			wrapper: appRoot,
+		});
+
+		expect(screen.getByRole('status', { name: '1 mention from Test Room' })).toBeInTheDocument();
+	});
+
+	it('should not render UnreadBadge when there are no unread messages', () => {
+		render(<SidebarItemBadges room={createFakeSubscription({ unread: 0, userMentions: 0, groupMentions: 0 })} roomTitle='Test Room' />, {
+			wrapper: appRoot,
+		});
+
+		expect(screen.queryByRole('status', { name: 'Test Room' })).not.toBeInTheDocument();
+	});
+
+	it('should render InvitationBadge when subscription has status INVITED and has inviter', () => {
+		render(
+			<SidebarItemBadges
+				room={createFakeSubscription({
+					status: 'INVITED',
+					inviter: { name: 'Rocket Cat', username: 'rocket.cat', _id: 'rocket.cat' },
+					ts: new Date('2025-01-01T00:00:00.000Z'),
+				})}
+			/>,
+			{
+				wrapper: appRoot,
+			},
+		);
+
+		expect(screen.getByRole('status', { name: 'Invited January 1st, 2025' })).toBeInTheDocument();
+	});
+
+	it('should not render InvitationBadge when subscription does not have status INVITED', () => {
+		render(<SidebarItemBadges room={createFakeSubscription()} />, { wrapper: appRoot });
+
+		expect(screen.queryByRole('status', { name: /Invited/ })).not.toBeInTheDocument();
+	});
+});

apps/meteor/client/views/navigation/sidebar/badges/SidebarItemBadges.tsx

@@ -0,0 +1,24 @@
+import { isInviteSubscription } from '@rocket.chat/core-typings';
+import type { SubscriptionWithRoom } from '@rocket.chat/ui-contexts';
+
+import UnreadBadge from './UnreadBadge';
+import InvitationBadge from '../../../../components/InvitationBadge';
+import { useUnreadDisplay } from '../hooks/useUnreadDisplay';
+
+export type SidebarItemBadgesProps = {
+	room: SubscriptionWithRoom;
+	roomTitle?: string;
+};
+
+const SidebarItemBadges = ({ room, roomTitle }: SidebarItemBadgesProps) => {
+	const { unreadCount, unreadTitle, unreadVariant, showUnread } = useUnreadDisplay(room);
+
+	return (
+		<>
+			{showUnread && <UnreadBadge title={unreadTitle} roomTitle={roomTitle} variant={unreadVariant} total={unreadCount.total} />}
+			{isInviteSubscription(room) && <InvitationBadge marginBlockStart={2} invitationDate={room.ts} />}
+		</>
+	);
+};
+
+export default SidebarItemBadges;

apps/meteor/client/views/navigation/sidebar/badges/UnreadBadge.tsx

@@ -0,0 +1,26 @@
+import { SidebarItemBadge } from '@rocket.chat/fuselage';
+import { useTranslation } from 'react-i18next';
+
+export type UnreadBadgeProps = {
+	title: string;
+	roomTitle?: string;
+	variant: 'primary' | 'warning' | 'danger' | 'secondary';
+	total: number;
+};
+
+const UnreadBadge = ({ title, variant, total, roomTitle }: UnreadBadgeProps) => {
+	const { t } = useTranslation();
+
+	return (
+		<SidebarItemBadge
+			variant={variant}
+			title={title}
+			role='status'
+			aria-label={t('__unreadTitle__from__roomTitle__', { unreadTitle: title, roomTitle })}
+		>
+			<span aria-hidden>{total}</span>
+		</SidebarItemBadge>
+	);
+};
+
+export default UnreadBadge;

apps/meteor/client/views/navigation/sidebar/hooks/usePreventDefault.ts

@@ -0,0 +1,21 @@
+import type { RefObject } from 'react';
+import { useEffect } from 'react';
+
+export const usePreventDefault = (ref: RefObject<Element | null>): { ref: RefObject<Element | null> } => {
+	// Flowrouter uses an addEventListener on the document to capture any clink link, since the react synthetic event use an addEventListener on the document too,
+	// it is impossible/hard to determine which one will happen before and prevent/stop propagation, so feel free to remove this effect after remove flow router :)
+
+	useEffect(() => {
+		const { current } = ref;
+		const stopPropagation: EventListener = (e) => {
+			if ([(e.target as HTMLElement).nodeName, (e.target as HTMLElement).parentElement?.nodeName].includes('BUTTON')) {
+				e.preventDefault();
+			}
+		};
+		current?.addEventListener('click', stopPropagation);
+
+		return (): void => current?.removeEventListener('click', stopPropagation);
+	}, [ref]);
+
+	return { ref };
+};

apps/meteor/client/views/navigation/sidebar/hooks/useShortcutOpenMenu.ts

@@ -0,0 +1,21 @@
+import type { RefObject } from 'react';
+import { useEffect } from 'react';
+import tinykeys from 'tinykeys';
+
+// used to open the menu option by keyboard
+export const useShortcutOpenMenu = (ref: RefObject<Element | null>): void => {
+	useEffect(() => {
+		const unsubscribe = tinykeys(ref.current as HTMLElement, {
+			Alt: (event) => {
+				if (!(event.target as HTMLElement).className.includes('rcx-sidebar-item')) {
+					return;
+				}
+				event.preventDefault();
+				(event.target as HTMLElement).querySelector('button')?.click();
+			},
+		});
+		return (): void => {
+			unsubscribe();
+		};
+	}, [ref]);
+};

apps/meteor/client/views/navigation/sidebar/hooks/useUnreadDisplay.spec.ts

@@ -0,0 +1,224 @@
+import { mockAppRoot } from '@rocket.chat/mock-providers';
+import { renderHook } from '@testing-library/react';
+
+import { useUnreadDisplay } from './useUnreadDisplay';
+import { createFakeSubscription } from '../../../../../tests/mocks/data';
+
+const dmUnread = createFakeSubscription({
+	t: 'd',
+	unread: 3,
+	userMentions: 0,
+	groupMentions: 0,
+	tunread: undefined,
+	tunreadUser: undefined,
+});
+
+const dmThread = createFakeSubscription({
+	t: 'd',
+	unread: 3,
+	userMentions: 0,
+	groupMentions: 0,
+	tunread: ['1'],
+	tunreadUser: undefined,
+});
+
+const alert = createFakeSubscription({
+	t: 'p',
+	unread: 0,
+	userMentions: 0,
+	groupMentions: 0,
+	tunread: undefined,
+	tunreadUser: undefined,
+	alert: true,
+});
+
+const mentionAndGroupMention = createFakeSubscription({
+	t: 'p',
+	unread: 2,
+	userMentions: 1,
+	groupMentions: 1,
+	tunread: undefined,
+	tunreadUser: undefined,
+	alert: true,
+});
+
+const groupMention = createFakeSubscription({
+	t: 'p',
+	unread: 2,
+	userMentions: 0,
+	groupMentions: 2,
+	tunread: undefined,
+	tunreadUser: undefined,
+	alert: true,
+});
+
+const tunread = createFakeSubscription({
+	t: 'p',
+	unread: 0,
+	userMentions: 0,
+	groupMentions: 0,
+	tunread: ['1'],
+	tunreadUser: undefined,
+	alert: true,
+});
+
+const tunreadUser = createFakeSubscription({
+	t: 'p',
+	unread: 1,
+	userMentions: 0,
+	groupMentions: 0,
+	tunread: ['1'],
+	tunreadUser: ['1'],
+	alert: true,
+});
+
+const hideUnreadStatus = createFakeSubscription({
+	t: 'p',
+	hideUnreadStatus: true,
+});
+
+const hideUnreadAndMention = createFakeSubscription({
+	t: 'p',
+	hideUnreadStatus: true,
+	hideMentionStatus: true,
+});
+
+const noUnread = createFakeSubscription({
+	t: 'p',
+	unread: 0,
+	userMentions: 0,
+	groupMentions: 0,
+	tunread: undefined,
+	tunreadUser: undefined,
+});
+
+const wrapper = mockAppRoot()
+	.withTranslations('en', 'core', {
+		mentions_counter_one: '{{count}} mention',
+		mentions_counter_other: '{{count}} mentions',
+		threads_counter_one: '{{count}} unread threaded message',
+		threads_counter_other: '{{count}} unread threaded messages',
+		group_mentions_counter_one: '{{count}} group mention',
+		group_mentions_counter_other: '{{count}} group mentions',
+		unread_messages_counter_one: '{{count}} unread message',
+		unread_messages_counter_other: '{{count}} unread messages',
+	})
+	.build();
+
+it('should return correct unread data for [Direct message unread]', async () => {
+	const { result } = renderHook(() => useUnreadDisplay(dmUnread), {
+		wrapper,
+	});
+	expect(result.current.unreadVariant).toBe('secondary');
+	expect(result.current.unreadTitle).toBe('3 unread messages');
+
+	expect(result.current.unreadCount).toHaveProperty('mentions', 0);
+	expect(result.current.unreadCount).toHaveProperty('threads', 0);
+	expect(result.current.unreadCount).toHaveProperty('groupMentions', 0);
+	expect(result.current.unreadCount).toHaveProperty('total', 3);
+});
+
+it('should return correct unread data for [Direct message with thread unread]', async () => {
+	const { result } = renderHook(() => useUnreadDisplay(dmThread), {
+		wrapper,
+	});
+	expect(result.current.unreadVariant).toBe('primary');
+	expect(result.current.unreadTitle).toBe('1 unread threaded message, 3 unread messages');
+
+	expect(result.current.unreadCount).toHaveProperty('mentions', 0);
+	expect(result.current.unreadCount).toHaveProperty('threads', 1);
+	expect(result.current.unreadCount).toHaveProperty('groupMentions', 0);
+	expect(result.current.unreadCount).toHaveProperty('total', 4);
+});
+
+it('should return correct unread data for [Channel with unread messages alert only]', async () => {
+	const { result } = renderHook(() => useUnreadDisplay(alert), {
+		wrapper,
+	});
+
+	expect(result.current.highlightUnread).toBe(true);
+	expect(result.current.showUnread).toBe(false);
+
+	expect(result.current.unreadCount).toHaveProperty('mentions', 0);
+	expect(result.current.unreadCount).toHaveProperty('threads', 0);
+	expect(result.current.unreadCount).toHaveProperty('groupMentions', 0);
+	expect(result.current.unreadCount).toHaveProperty('total', 0);
+});
+
+it('should return correct unread data for [Mention and group mention]', async () => {
+	const { result } = renderHook(() => useUnreadDisplay(mentionAndGroupMention), {
+		wrapper,
+	});
+	expect(result.current.unreadVariant).toBe('danger');
+	expect(result.current.unreadTitle).toBe('1 mention, 1 group mention');
+
+	expect(result.current.unreadCount).toHaveProperty('mentions', 1);
+	expect(result.current.unreadCount).toHaveProperty('threads', 0);
+	expect(result.current.unreadCount).toHaveProperty('groupMentions', 1);
+	expect(result.current.unreadCount).toHaveProperty('total', 2);
+});
+
+it('should return correct unread data for [Group mention]', async () => {
+	const { result } = renderHook(() => useUnreadDisplay(groupMention), {
+		wrapper,
+	});
+	expect(result.current.unreadVariant).toBe('warning');
+	expect(result.current.unreadTitle).toBe('2 group mentions');
+
+	expect(result.current.unreadCount).toHaveProperty('mentions', 0);
+	expect(result.current.unreadCount).toHaveProperty('threads', 0);
+	expect(result.current.unreadCount).toHaveProperty('groupMentions', 2);
+	expect(result.current.unreadCount).toHaveProperty('total', 2);
+});
+
+it('should return correct unread data for [Thread unread]', async () => {
+	const { result } = renderHook(() => useUnreadDisplay(tunread), {
+		wrapper,
+	});
+	expect(result.current.unreadVariant).toBe('primary');
+	expect(result.current.unreadTitle).toBe('1 unread threaded message');
+
+	expect(result.current.unreadCount).toHaveProperty('mentions', 0);
+	expect(result.current.unreadCount).toHaveProperty('groupMentions', 0);
+	expect(result.current.unreadCount).toHaveProperty('threads', 1);
+	expect(result.current.unreadCount).toHaveProperty('total', 1);
+});
+
+it('should return correct unread data for [Thread and thread user mention]', async () => {
+	const { result } = renderHook(() => useUnreadDisplay(tunreadUser), {
+		wrapper,
+	});
+	expect(result.current.unreadVariant).toBe('danger');
+	expect(result.current.unreadTitle).toBe('1 mention, 1 unread threaded message');
+
+	expect(result.current.unreadCount).toHaveProperty('mentions', 1);
+	expect(result.current.unreadCount).toHaveProperty('groupMentions', 0);
+	expect(result.current.unreadCount).toHaveProperty('threads', 1);
+	expect(result.current.unreadCount).toHaveProperty('total', 2);
+});
+
+it('should not highlight unread if hideUnreadStatus is enabled', async () => {
+	const { result } = renderHook(() => useUnreadDisplay(hideUnreadStatus));
+
+	expect(result.current.highlightUnread).toBe(false);
+	expect(result.current.showUnread).toBe(true);
+});
+
+it('should not show unread if hideUnreadStatus and hideMentionStatus is enabled', async () => {
+	const { result } = renderHook(() => useUnreadDisplay(hideUnreadAndMention));
+
+	expect(result.current.highlightUnread).toBe(false);
+	expect(result.current.showUnread).toBe(false);
+});
+
+it("should not show unread if there isn't any unread message", async () => {
+	const { result } = renderHook(() => useUnreadDisplay(noUnread));
+
+	expect(result.current.highlightUnread).toBe(false);
+	expect(result.current.showUnread).toBe(false);
+
+	expect(result.current.unreadCount).toHaveProperty('mentions', 0);
+	expect(result.current.unreadCount).toHaveProperty('groupMentions', 0);
+	expect(result.current.unreadCount).toHaveProperty('threads', 0);
+	expect(result.current.unreadCount).toHaveProperty('total', 0);
+});

apps/meteor/client/views/navigation/sidebar/hooks/useUnreadDisplay.ts

@@ -0,0 +1,10 @@
+import { useTranslation } from 'react-i18next';
+
+import type { UnreadData } from '../../../../../lib/getSubscriptionUnreadData';
+import { getSubscriptionUnreadData } from '../../../../../lib/getSubscriptionUnreadData';
+
+export const useUnreadDisplay = (unreadData: UnreadData) => {
+	const { t } = useTranslation();
+
+	return getSubscriptionUnreadData(unreadData, t);
+};

apps/meteor/client/views/navigation/sidebar/index.ts

@@ -0,0 +1 @@
+export { default } from './Sidebar';