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

apps/meteor/client/views/navigation/sidepanel/SidepanelItem/RoomMenu.tsx

@@ -0,0 +1,31 @@
+import type { RoomType } from '@rocket.chat/core-typings';
+import { GenericMenu } from '@rocket.chat/ui-client';
+import type { LocationPathname } from '@rocket.chat/ui-contexts';
+import { useTranslation } from '@rocket.chat/ui-contexts';
+import { memo } from 'react';
+
+import { useRoomMenuActions } from '../hooks/useRoomMenuActions';
+
+export type RoomMenuProps = {
+	rid: string;
+	unread?: boolean;
+	threadUnread?: boolean;
+	alert?: boolean;
+	roomOpen?: boolean;
+	type: RoomType;
+	cl?: boolean;
+	name?: string;
+	hideDefaultOptions: boolean;
+	href: LocationPathname | undefined;
+};
+
+const RoomMenu = ({ rid, unread, threadUnread, alert, roomOpen, type, cl, name = '', hideDefaultOptions = false, href }: RoomMenuProps) => {
+	const t = useTranslation();
+
+	const isUnread = alert || unread || threadUnread;
+	const sections = useRoomMenuActions({ rid, type, name, isUnread, cl, roomOpen, hideDefaultOptions, href });
+
+	return <GenericMenu detached title={t('Options')} mini aria-keyshortcuts='alt' sections={sections} />;
+};
+
+export default memo(RoomMenu);

apps/meteor/client/views/navigation/sidepanel/SidepanelItem/RoomSidePanelItem.tsx

@@ -0,0 +1,82 @@
+import { isOmnichannelRoom } from '@rocket.chat/core-typings';
+import { Icon, SidebarItemIcon } from '@rocket.chat/fuselage';
+import { RoomAvatar } from '@rocket.chat/ui-avatar';
+import { useUserId, type SubscriptionWithRoom } from '@rocket.chat/ui-contexts';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import RoomMenu from './RoomMenu';
+import RoomSidePanelItemBadges from './RoomSidePanelItemBadges';
+import SidePanelParent from './SidePanelParent';
+import SidePanelItem from './SidepanelItem';
+import { RoomIcon } from '../../../../components/RoomIcon';
+import { roomCoordinator } from '../../../../lib/rooms/roomCoordinator';
+import { getSubscriptionDraft } from '../../../../lib/utils/getSubscriptionDraft';
+import { isIOsDevice } from '../../../../lib/utils/isIOsDevice';
+import { getMessagePreview } from '../../../../lib/utils/normalizeMessagePreview/getMessagePreview';
+import { useOmnichannelPriorities } from '../../../omnichannel/hooks/useOmnichannelPriorities';
+import { useUnreadDisplay } from '../../sidebar/hooks/useUnreadDisplay';
+
+export type RoomSidePanelItemProps = {
+	room: SubscriptionWithRoom;
+	openedRoom?: string;
+	isRoomFilter?: boolean;
+};
+
+const RoomSidePanelItem = ({ room, openedRoom, isRoomFilter, ...props }: RoomSidePanelItemProps) => {
+	const { t } = useTranslation();
+	const isAnonymous = !useUserId();
+
+	const { highlightUnread: highlighted, unreadCount } = useUnreadDisplay(room);
+	const { unread = 0, alert, rid, t: type, cl } = room;
+
+	const time = 'lastMessage' in room ? room.lastMessage?.ts : undefined;
+	const message = getMessagePreview(room, room.lastMessage, t);
+	const title = roomCoordinator.getRoomName(room.t, room) || '';
+	const href = roomCoordinator.getRouteLink(room.t, room) || '';
+
+	const isQueued = isOmnichannelRoom(room) && room.status === 'queued';
+	const { enabled: isPriorityEnabled } = useOmnichannelPriorities();
+
+	const parentRoomId = Boolean(room.prid || (room.teamId && !room.teamMain));
+
+	const titleIcon = getSubscriptionDraft(room) ? (
+		<Icon name='pencil' size='x12' title={room.draft ? t('Unfinished_message') : t('Unfinished_thread_message')} />
+	) : undefined;
+
+	const menu =
+		!isIOsDevice && !isAnonymous && (!isQueued || (isQueued && isPriorityEnabled)) ? (
+			<RoomMenu
+				alert={alert}
+				threadUnread={unreadCount.threads > 0}
+				rid={rid}
+				unread={!!unread}
+				roomOpen={rid === openedRoom}
+				type={type}
+				cl={cl}
+				name={title}
+				hideDefaultOptions={isQueued}
+				href={href || undefined}
+			/>
+		) : undefined;
+
+	return (
+		<SidePanelItem
+			href={href}
+			selected={rid === openedRoom}
+			title={title}
+			titleIcon={titleIcon}
+			avatar={<RoomAvatar size='x20' room={{ ...room, _id: room.rid || room._id, type: room.t }} />}
+			icon={<SidebarItemIcon highlighted={highlighted} icon={<RoomIcon room={room} placement='sidebar' size='x20' />} />}
+			unread={highlighted}
+			time={time}
+			subtitle={message ? <span className='message-body--unstyled' dangerouslySetInnerHTML={{ __html: message }} /> : null}
+			parentRoom={!isRoomFilter && parentRoomId && <SidePanelParent room={room} />}
+			badges={<RoomSidePanelItemBadges room={room} roomTitle={title} />}
+			menu={menu}
+			{...props}
+		/>
+	);
+};
+
+export default memo(RoomSidePanelItem);

apps/meteor/client/views/navigation/sidepanel/SidepanelItem/RoomSidePanelItemBadges.spec.tsx

@@ -0,0 +1,78 @@
+import { mockAppRoot } from '@rocket.chat/mock-providers';
+import { render, screen } from '@testing-library/react';
+
+import RoomSidePanelItemBadges from './RoomSidePanelItemBadges';
+import { createFakeSubscription } from '../../../../../tests/mocks/data';
+
+jest.mock('../omnichannel/SidePanelOmnichannelBadges', () => ({
+	__esModule: true,
+	default: () => <i role='status' aria-label='OmnichannelBadges' />,
+}));
+
+describe('RoomSidePanelItemBadges', () => {
+	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(
+			<RoomSidePanelItemBadges 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(
+			<RoomSidePanelItemBadges 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 OmnichannelBadges when the room is an omnichannel room', () => {
+		render(<RoomSidePanelItemBadges room={createFakeSubscription({ t: 'l' })} />, { wrapper: appRoot });
+
+		expect(screen.getByRole('status', { name: 'OmnichannelBadges' })).toBeInTheDocument();
+	});
+
+	it('should not render OmnichannelBadges when the room is not an omnichannel room', () => {
+		render(<RoomSidePanelItemBadges room={createFakeSubscription({ t: 'p' })} />, { wrapper: appRoot });
+
+		expect(screen.queryByRole('status', { name: 'OmnichannelBadges' })).not.toBeInTheDocument();
+	});
+
+	it('should render InvitationBadge when subscription has status INVITED', () => {
+		render(
+			<RoomSidePanelItemBadges
+				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(<RoomSidePanelItemBadges room={createFakeSubscription()} />, { wrapper: appRoot });
+
+		expect(screen.queryByRole('status', { name: 'Invited' })).not.toBeInTheDocument();
+	});
+});

apps/meteor/client/views/navigation/sidepanel/SidepanelItem/RoomSidePanelItemBadges.tsx

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

apps/meteor/client/views/navigation/sidepanel/SidepanelItem/SidePanelParent.tsx

@@ -0,0 +1,17 @@
+import type { SubscriptionWithRoom } from '@rocket.chat/ui-contexts';
+import { memo } from 'react';
+
+import SidePanelParentRoom from './SidePanelParentRoom';
+import SidePanelParentTeam from './SidePanelParentTeam';
+
+export type SidePanelParentProps = { room: SubscriptionWithRoom };
+
+const SidePanelParent = ({ room }: SidePanelParentProps) => {
+	if (room.prid) {
+		return <SidePanelParentRoom prid={room.prid} />;
+	}
+
+	return room.teamId && !room.teamMain && <SidePanelParentTeam room={room} />;
+};
+
+export default memo(SidePanelParent);

apps/meteor/client/views/navigation/sidepanel/SidepanelItem/SidePanelParentRoom/SidePanelParentRoom.tsx

@@ -0,0 +1,22 @@
+import type { ISubscription } from '@rocket.chat/core-typings';
+import { isPrivateRoom } from '@rocket.chat/core-typings';
+
+import { roomCoordinator } from '../../../../../lib/rooms/roomCoordinator';
+import SidePanelTag from '../SidePanelTag';
+import SidePanelTagIcon from '../SidePanelTagIcon';
+
+export type SidePanelParentRoomProps = { subscription: ISubscription };
+
+const SidePanelParentRoom = ({ subscription }: SidePanelParentRoomProps) => {
+	const icon = isPrivateRoom(subscription) ? 'hashtag-lock' : 'hashtag';
+	const roomName = roomCoordinator.getRoomName(subscription?.t, subscription);
+
+	return (
+		<SidePanelTag>
+			{icon && <SidePanelTagIcon icon={{ name: icon }} />}
+			{roomName}
+		</SidePanelTag>
+	);
+};
+
+export default SidePanelParentRoom;

apps/meteor/client/views/navigation/sidepanel/SidepanelItem/SidePanelParentRoom/SidePanelParentRoomWithData.tsx

@@ -0,0 +1,17 @@
+import { useUserSubscription } from '@rocket.chat/ui-contexts';
+
+import SidePanelParentRoom from './SidePanelParentRoom';
+
+export type SidePanelParentRoomWithDataProps = { prid: string };
+
+const SidePanelParentRoomWithData = ({ prid }: SidePanelParentRoomWithDataProps) => {
+	const subscription = useUserSubscription(prid);
+
+	if (!subscription) {
+		return null;
+	}
+
+	return <SidePanelParentRoom subscription={subscription} />;
+};
+
+export default SidePanelParentRoomWithData;

apps/meteor/client/views/navigation/sidepanel/SidepanelItem/SidePanelParentRoom/index.ts

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

apps/meteor/client/views/navigation/sidepanel/SidepanelItem/SidePanelParentTeam.tsx

@@ -0,0 +1,24 @@
+import type { SubscriptionWithRoom } from '@rocket.chat/ui-contexts';
+
+import SidePanelTag from './SidePanelTag';
+import SidePanelTagIcon from './SidePanelTagIcon';
+import { useParentTeamData } from './useParentTeamData';
+
+export type SidePanelParentTeamProps = { room: SubscriptionWithRoom };
+
+const SidePanelParentTeam = ({ room }: SidePanelParentTeamProps) => {
+	const { teamName, shouldDisplayTeam, teamInfoError, isTeamPublic } = useParentTeamData(room.teamId);
+
+	if (teamInfoError || !shouldDisplayTeam) {
+		return null;
+	}
+
+	return (
+		<SidePanelTag>
+			<SidePanelTagIcon icon={{ name: isTeamPublic ? 'team' : 'team-lock' }} />
+			{teamName}
+		</SidePanelTag>
+	);
+};
+
+export default SidePanelParentTeam;

apps/meteor/client/views/navigation/sidepanel/SidepanelItem/SidePanelTag.tsx

@@ -0,0 +1,8 @@
+import { Tag } from '@rocket.chat/fuselage';
+import type { ComponentProps } from 'react';
+
+const SidePanelTag = (props: ComponentProps<typeof Tag>) => (
+	<Tag role='button' tabIndex={0} {...props} maxWidth='50%' flexShrink={1} flexGrow={0} />
+);
+
+export default SidePanelTag;

apps/meteor/client/views/navigation/sidepanel/SidepanelItem/SidePanelTagIcon.tsx

@@ -0,0 +1,8 @@
+import { Icon } from '@rocket.chat/fuselage';
+import type { ComponentProps } from 'react';
+
+export type SidePanelTagIconProps = { icon: Pick<ComponentProps<typeof Icon>, 'name' | 'color'> | null };
+
+const SidePanelTagIcon = ({ icon }: SidePanelTagIconProps) => (icon ? <Icon size='x12' marginInlineEnd={4} {...icon} /> : null);
+
+export default SidePanelTagIcon;

apps/meteor/client/views/navigation/sidepanel/SidepanelItem/SidepanelItem.tsx

@@ -0,0 +1,90 @@
+import {
+	IconButton,
+	SidebarItem,
+	SidebarItemAvatarWrapper,
+	SidebarItemCol,
+	SidebarItemContent,
+	SidebarItemMenu,
+	SidebarItemRow,
+	SidebarItemTimestamp,
+	SidebarItemTitle,
+} from '@rocket.chat/fuselage';
+import { useLayout } from '@rocket.chat/ui-contexts';
+import type { ReactNode } from 'react';
+import { memo, useState } from 'react';
+
+import { useShortTimeAgo } from '../../../../hooks/useTimeAgo';
+
+export type SidePanelItemProps = {
+	href: string;
+	selected: boolean;
+	title: string;
+	titleIcon?: ReactNode;
+	avatar: ReactNode;
+	icon: ReactNode;
+	unread: boolean;
+	time?: Date;
+	subtitle: ReactNode;
+	parentRoom?: ReactNode;
+	badges?: ReactNode;
+	menu?: ReactNode;
+};
+
+const SidePanelItem = ({
+	href,
+	selected,
+	title,
+	titleIcon,
+	avatar,
+	icon,
+	unread,
+	time,
+	subtitle,
+	parentRoom,
+	badges,
+	menu,
+	...props
+}: SidePanelItemProps) => {
+	const { sidebar } = useLayout();
+	const formatDate = useShortTimeAgo();
+	const [menuVisibility, setMenuVisibility] = useState(!!window.DISABLE_ANIMATION);
+
+	const handleFocus = () => setMenuVisibility(true);
+	const handlePointerEnter = () => setMenuVisibility(true);
+
+	return (
+		<SidebarItem
+			{...props}
+			href={href}
+			onClick={() => !selected && sidebar.toggle()}
+			selected={selected}
+			onFocus={handleFocus}
+			onPointerEnter={handlePointerEnter}
+			aria-label={title}
+			aria-current={selected ? 'page' : undefined}
+			level={2}
+		>
+			<SidebarItemCol>
+				<SidebarItemRow>
+					{avatar && <SidebarItemAvatarWrapper>{avatar}</SidebarItemAvatarWrapper>}
+					{icon}
+					<SidebarItemTitle unread={unread}>{title}</SidebarItemTitle>
+					{time && <SidebarItemTimestamp unread={unread}>{formatDate(time)}</SidebarItemTimestamp>}
+				</SidebarItemRow>
+				<SidebarItemRow>
+					<SidebarItemContent unread={unread}>{subtitle}</SidebarItemContent>
+					{parentRoom}
+					{titleIcon}
+					{badges}
+					{menu && (
+						<SidebarItemMenu>
+							{menuVisibility ? menu : <IconButton tabIndex={-1} aria-hidden mini rcx-sidebar-item__menu icon='kebab' />}
+						</SidebarItemMenu>
+					)}
+				</SidebarItemRow>
+			</SidebarItemCol>
+		</SidebarItem>
+	);
+};
+
+export default memo(SidePanelItem);

apps/meteor/client/views/navigation/sidepanel/SidepanelItem/index.ts

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

apps/meteor/client/views/navigation/sidepanel/SidepanelItem/useParentTeamData.ts

@@ -0,0 +1,40 @@
+import type { ITeam } from '@rocket.chat/core-typings';
+import { TeamType } from '@rocket.chat/core-typings';
+import { useUserId } from '@rocket.chat/ui-contexts';
+
+import { useTeamInfoQuery } from '../../../../hooks/useTeamInfoQuery';
+import { useUserTeamsQuery } from '../../../room/hooks/useUserTeamsQuery';
+
+type APIErrorResult = { success: boolean; error: string };
+
+export const useParentTeamData = (teamId?: ITeam['_id']) => {
+	const userId = useUserId();
+
+	if (!teamId) {
+		throw new Error('invalid rid');
+	}
+
+	if (!userId) {
+		throw new Error('invalid uid');
+	}
+
+	const {
+		data: teamInfo,
+		isLoading: teamInfoLoading,
+		isError: teamInfoError,
+	} = useTeamInfoQuery(teamId, { retry: (_, error) => (error as unknown as APIErrorResult)?.error !== 'unauthorized' });
+
+	const { data: userTeams, isLoading: userTeamsLoading } = useUserTeamsQuery(userId);
+
+	const userBelongsToTeam = Boolean(userTeams?.find((team) => team._id === teamId)) || false;
+	const isTeamPublic = teamInfo?.type === TeamType.PUBLIC;
+	const shouldDisplayTeam = isTeamPublic || userBelongsToTeam;
+
+	return {
+		teamName: teamInfo?.name,
+		isLoading: userTeamsLoading || teamInfoLoading,
+		teamInfoError,
+		shouldDisplayTeam,
+		isTeamPublic,
+	};
+};