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

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

@@ -0,0 +1,101 @@
+import { Box } from '@rocket.chat/fuselage';
+import { useResizeObserver } from '@rocket.chat/fuselage-hooks';
+import { VirtualizedScrollbars } from '@rocket.chat/ui-client';
+import { useUserPreference, 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 RoomListRow from './RoomListRow';
+import RoomListRowWrapper from './RoomListRowWrapper';
+import RoomListWrapper from './RoomListWrapper';
+import { useOpenedRoom } from '../../lib/RoomManager';
+import { useMoveCategoryPosition } from '../categories/hooks/useMoveCategoryPosition';
+import { useAvatarTemplate } from '../hooks/useAvatarTemplate';
+import { SIDEBAR_DYNAMIC_GROUP_KEYS } from '../hooks/useCategoryList';
+import { useCollapsedGroups } from '../hooks/useCollapsedGroups';
+import { usePreventDefault } from '../hooks/usePreventDefault';
+import { useRoomList } from '../hooks/useRoomList';
+import { useShortcutOpenMenu } from '../hooks/useShortcutOpenMenu';
+import { useTemplateByViewMode } from '../hooks/useTemplateByViewMode';
+
+const canMoveGroup = (groups: { key: string }[], index: number, direction: 'up' | 'down'): boolean => {
+	if (SIDEBAR_DYNAMIC_GROUP_KEYS.includes(groups[index].key)) return false;
+	if (direction === 'down') return index + 1 < groups.length;
+	return groups.slice(0, index).some((g) => !SIDEBAR_DYNAMIC_GROUP_KEYS.includes(g.key));
+};
+
+const RoomList = () => {
+	const { t } = useTranslation();
+	const userId = useUserId();
+	const isAnonymous = !userId;
+
+	const { collapsedGroups, handleClick, handleKeyDown } = useCollapsedGroups();
+	const { groups, groupsCount, totalCount } = useRoomList({ collapsedGroups });
+	const moveCategory = useMoveCategoryPosition();
+	const avatarTemplate = useAvatarTemplate();
+	const sideBarItemTemplate = useTemplateByViewMode();
+	const { ref } = useResizeObserver<HTMLElement>({ debounceDelay: 100 });
+	const openedRoom = useOpenedRoom() ?? '';
+	const sidebarViewMode = useUserPreference<'extended' | 'medium' | 'condensed'>('sidebarViewMode') || 'extended';
+
+	const extended = sidebarViewMode === 'extended';
+	const itemData = useMemo(
+		() => ({
+			extended,
+			t,
+			SidebarItemTemplate: sideBarItemTemplate,
+			AvatarTemplate: avatarTemplate,
+			openedRoom,
+			sidebarViewMode,
+			isAnonymous,
+			userId,
+		}),
+		[avatarTemplate, extended, isAnonymous, openedRoom, sideBarItemTemplate, sidebarViewMode, t, userId],
+	);
+
+	const allGroupKeys = useMemo(() => groups.map((group) => group.key), [groups]);
+
+	usePreventDefault(ref);
+	useShortcutOpenMenu(ref);
+
+	return (
+		<Box position='relative' overflow='hidden' height='full' ref={ref}>
+			<VirtualizedScrollbars>
+				<GroupedVirtuoso
+					groupCounts={groupsCount}
+					groupContent={(index) => {
+						const group = groups[index];
+
+						const onMoveUp = () => moveCategory(allGroupKeys, group.key, 'up');
+						const onMoveDown = () => moveCategory(allGroupKeys, group.key, 'down');
+
+						return (
+							<RoomListCollapser
+								group={group}
+								canMoveUp={canMoveGroup(groups, index, 'up')}
+								canMoveDown={canMoveGroup(groups, index, 'down')}
+								onMoveUp={onMoveUp}
+								onMoveDown={onMoveDown}
+								onClick={() => handleClick(group.key)}
+								onKeyDown={(e) => handleKeyDown(e, group.key)}
+							/>
+						);
+					}}
+					{...(totalCount > 0 && {
+						itemContent: (index, groupIndex) => {
+							const group = groups[groupIndex];
+							const correctedIndex = index - groupsCount.slice(0, groupIndex).reduce((acc, count) => acc + count, 0);
+							const item = group.rooms[correctedIndex];
+							return item && <RoomListRow data={itemData} item={item} />;
+						},
+					})}
+					components={{ Item: RoomListRowWrapper, List: RoomListWrapper }}
+				/>
+			</VirtualizedScrollbars>
+		</Box>
+	);
+};
+
+export default RoomList;

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

@@ -0,0 +1,72 @@
+import { Badge, IconButton, SidebarCollapseGroup, SidebarCollapseGroupMenu } from '@rocket.chat/fuselage';
+import type { TranslationKey } from '@rocket.chat/ui-contexts';
+import type { HTMLAttributes, KeyboardEvent, MouseEventHandler } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useHasLicenseModule } from '../../hooks/useHasLicenseModule';
+import { usePreventPropagation } from '../../hooks/usePreventPropagation';
+import { useDeferredMenuMount } from '../Item/useDeferredMenuMount';
+import CategoryMenu from '../categories/CategoryMenu';
+import type { SidebarRoomListGroup } from '../hooks/useRoomList';
+import { useUnreadDisplay } from '../hooks/useUnreadDisplay';
+
+type RoomListCollapserProps = {
+	group: SidebarRoomListGroup;
+	canMoveUp: boolean;
+	canMoveDown: boolean;
+	onMoveUp: () => void;
+	onMoveDown: () => void;
+	onClick: MouseEventHandler<HTMLElement>;
+	onKeyDown: (e: KeyboardEvent) => void;
+} & Omit<HTMLAttributes<HTMLElement>, 'onClick' | 'onKeyDown'>;
+
+const RoomListCollapser = ({ group, canMoveUp, canMoveDown, onMoveUp, onMoveDown, ...props }: RoomListCollapserProps) => {
+	const { t } = useTranslation();
+	const { data: hasLicenseModule = false } = useHasLicenseModule('experimental-enterprise-features');
+	const preventPropagation = usePreventPropagation();
+	const { mounted: menuVisibility, requestMount, mountNow } = useDeferredMenuMount();
+	const { unreadTitle, unreadVariant, showUnread, unreadCount } = useUnreadDisplay(group.unreadInfo);
+
+	const title = group.translateTitle ? t(group.title as TranslationKey) : group.title;
+
+	return (
+		<SidebarCollapseGroup
+			title={title}
+			empty={group.empty}
+			expanded={!group.collapsed}
+			badge={
+				showUnread ? (
+					<Badge variant={unreadVariant} title={unreadTitle} aria-label={unreadTitle} role='status'>
+						{unreadCount.total}
+					</Badge>
+				) : undefined
+			}
+			onFocus={mountNow}
+			onPointerEnter={requestMount}
+			menu={
+				hasLicenseModule ? (
+					<SidebarCollapseGroupMenu onClick={preventPropagation}>
+						{menuVisibility ? (
+							<CategoryMenu
+								category={group.category}
+								groupKey={group.key}
+								showUnreads={group.showUnreads}
+								keepUnreadsOnTop={group.keepUnreadsOnTop}
+								canMoveUp={canMoveUp}
+								canMoveDown={canMoveDown}
+								onMoveUp={onMoveUp}
+								onMoveDown={onMoveDown}
+							/>
+						) : (
+							<IconButton tabIndex={-1} aria-hidden mini icon='kebab' onPointerDown={mountNow} />
+						)}
+					</SidebarCollapseGroupMenu>
+				) : undefined
+			}
+			aria-label={group.collapsed ? t('Expand_group', { group: title }) : t('Collapse_group', { group: title })}
+			{...props}
+		/>
+	);
+};
+
+export default RoomListCollapser;

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

@@ -0,0 +1,56 @@
+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 SidebarItemTemplateWithData from './SidebarItemTemplateWithData';
+import type { useAvatarTemplate } from '../hooks/useAvatarTemplate';
+import type { useTemplateByViewMode } from '../hooks/useTemplateByViewMode';
+
+export type RoomListRowProps = {
+	data: {
+		extended: boolean;
+		t: TFunction;
+		SidebarItemTemplate: ReturnType<typeof useTemplateByViewMode>;
+		AvatarTemplate: ReturnType<typeof useAvatarTemplate>;
+		openedRoom: string;
+		sidebarViewMode: 'extended' | 'condensed' | 'medium';
+		isAnonymous: boolean;
+		userId?: string;
+	};
+	item: SubscriptionWithRoom;
+};
+
+const RoomListRow = ({ data, item }: RoomListRowProps) => {
+	const { extended, t, SidebarItemTemplate, AvatarTemplate, openedRoom, sidebarViewMode, userId } = 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 (
+		<SidebarItemTemplateWithData
+			sidebarViewMode={sidebarViewMode}
+			selected={item.rid === openedRoom}
+			t={t}
+			room={item}
+			extended={extended}
+			SidebarItemTemplate={SidebarItemTemplate}
+			AvatarTemplate={AvatarTemplate}
+			videoConfActions={videoConfActions}
+			userId={userId}
+		/>
+	);
+};
+
+export default memo(RoomListRow);

apps/meteor/client/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/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/sidebar/RoomList/SidebarItemTemplateWithData.tsx

@@ -0,0 +1,227 @@
+import { isOmnichannelRoom } from '@rocket.chat/core-typings';
+import { Icon, SidebarAction, SidebarActions, SidebarItemIcon } from '@rocket.chat/fuselage';
+import type { SubscriptionWithRoom } from '@rocket.chat/ui-contexts';
+import { useLayout } from '@rocket.chat/ui-contexts';
+import type { TFunction } from 'i18next';
+import type { AllHTMLAttributes, ComponentType, ReactNode } from 'react';
+import { memo, useMemo } from 'react';
+
+import { RoomIcon } from '../../components/RoomIcon';
+import { useUserStatusTooltip } from '../../hooks/useUserStatusTooltip';
+import { roomCoordinator } from '../../lib/rooms/roomCoordinator';
+import { getSubscriptionDraft } from '../../lib/utils/getSubscriptionDraft';
+import { getUidDirectMessage } from '../../lib/utils/getUidDirectMessage';
+import { isIOsDevice } from '../../lib/utils/isIOsDevice';
+import { getMessagePreview } from '../../lib/utils/normalizeMessagePreview/getMessagePreview';
+import { useOmnichannelPriorities } from '../../views/omnichannel/hooks/useOmnichannelPriorities';
+import RoomMenu from '../RoomMenu';
+import SidebarItemBadges from '../badges/SidebarItemBadges';
+import type { useAvatarTemplate } from '../hooks/useAvatarTemplate';
+import { useUnreadDisplay } from '../hooks/useUnreadDisplay';
+
+type RoomListRowProps = {
+	extended: boolean;
+	t: TFunction;
+	SidebarItemTemplate: ComponentType<
+		{
+			icon: ReactNode;
+			title: ReactNode;
+			avatar: ReactNode;
+			actions: ReactNode;
+			href: string;
+			time?: Date;
+			menu?: () => ReactNode;
+			menuOptions?: unknown;
+			subtitle?: ReactNode;
+			titleIcon?: ReactNode;
+			badges?: ReactNode;
+			threadUnread?: boolean;
+			unread?: boolean;
+			selected?: boolean;
+			is?: string;
+			indent?: boolean;
+		} & AllHTMLAttributes<HTMLElement>
+	>;
+	AvatarTemplate: ReturnType<typeof useAvatarTemplate>;
+	openedRoom?: string;
+	// sidebarViewMode: 'extended';
+	isAnonymous?: boolean;
+	userId?: string;
+
+	room: SubscriptionWithRoom;
+	id?: string;
+	/* @deprecated */
+	style?: AllHTMLAttributes<HTMLElement>['style'];
+
+	selected?: boolean;
+
+	sidebarViewMode?: unknown;
+	videoConfActions?: {
+		[action: string]: () => void;
+	};
+};
+
+const SidebarItemTemplateWithData = ({
+	room,
+	id,
+	selected,
+	style,
+	extended,
+	SidebarItemTemplate,
+	AvatarTemplate,
+	t,
+	isAnonymous,
+	videoConfActions,
+	userId,
+}: RoomListRowProps) => {
+	const { sidebar } = useLayout();
+
+	const href = roomCoordinator.getRouteLink(room.t, room) || '';
+	const title = roomCoordinator.getRoomName(room.t, room) || '';
+
+	const dmUserId = getUidDirectMessage(room, userId);
+	const dmStatusTooltipHandlers = useUserStatusTooltip(dmUserId, title);
+
+	const { unreadTitle, showUnread, unreadCount, highlightUnread: highlighted } = useUnreadDisplay(room);
+
+	const { lastMessage, unread = 0, alert, rid, t: type, cl } = room;
+
+	const icon = (
+		<SidebarItemIcon
+			highlighted={highlighted}
+			icon={<RoomIcon room={room} placement='sidebar' size='x20' isIncomingCall={Boolean(videoConfActions)} />}
+		/>
+	);
+
+	const titleIcon = getSubscriptionDraft(room) ? (
+		<Icon name='pencil' size='x12' title={room.draft ? t('Unfinished_message') : t('Unfinished_thread_message')} />
+	) : undefined;
+
+	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 isQueued = isOmnichannelRoom(room) && room.status === 'queued';
+	const { enabled: isPriorityEnabled } = useOmnichannelPriorities();
+
+	const message = extended && getMessagePreview(room, lastMessage, t);
+	const subtitle = message ? <span className='message-body--unstyled' dangerouslySetInnerHTML={{ __html: message }} /> : null;
+
+	return (
+		<SidebarItemTemplate
+			is='a'
+			id={id}
+			indent
+			data-unread={highlighted}
+			unread={highlighted}
+			selected={selected}
+			aria-current={selected ? 'page' : undefined}
+			href={href}
+			onClick={(): void => {
+				if (!selected) sidebar.toggle();
+			}}
+			aria-label={showUnread ? t('__unreadTitle__from__roomTitle__', { unreadTitle, roomTitle: title }) : title}
+			title={title}
+			time={lastMessage?.ts}
+			subtitle={subtitle}
+			icon={icon}
+			titleIcon={titleIcon}
+			style={style}
+			badges={<SidebarItemBadges room={room} roomTitle={title} />}
+			avatar={AvatarTemplate && <AvatarTemplate {...room} />}
+			actions={actions}
+			menu={
+				!isIOsDevice && !isAnonymous && (!isQueued || (isQueued && isPriorityEnabled))
+					? () => (
+							<RoomMenu
+								alert={alert}
+								threadUnread={unreadCount.threads > 0}
+								rid={rid}
+								unread={!!unread}
+								roomOpen={selected}
+								type={type}
+								cl={cl}
+								name={title}
+								hideDefaultOptions={isQueued}
+							/>
+						)
+					: undefined
+			}
+			{...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',
+	'extended',
+	'selected',
+	'SidebarItemTemplate',
+	'AvatarTemplate',
+	't',
+	'sidebarViewMode',
+	'videoConfActions',
+];
+
+export default memo(SidebarItemTemplateWithData, (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.lastMessage?.msg !== nextProps.room.lastMessage?.msg) {
+		return false;
+	}
+	if (prevProps.room.alert !== nextProps.room.alert) {
+		return false;
+	}
+	if (prevProps.room.draft !== nextProps.room.draft) {
+		return false;
+	}
+	if (prevProps.room.threadDrafts !== nextProps.room.threadDrafts) {
+		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/sidebar/RoomList/index.ts

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

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

@@ -0,0 +1,103 @@
+import { useFocusManager } from '@react-aria/focus';
+import { useCallback } from 'react';
+
+const isListItem = (node: EventTarget) => (node as HTMLElement).classList.contains('rcx-sidebar-item');
+const isCollapseGroup = (node: EventTarget) => (node as HTMLElement).classList.contains('rcx-sidebar-collapse-group__bar-button');
+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 };
+};