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

apps/meteor/client/views/directory/DirectoryPage.tsx

@@ -0,0 +1,68 @@
+import { Tabs, TabsItem } from '@rocket.chat/fuselage';
+import { Page, PageHeader, PageContent } from '@rocket.chat/ui-client';
+import { useRouter, useRouteParameter, useSetting } from '@rocket.chat/ui-contexts';
+import { useEffect, useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import ChannelsTab from './tabs/channels/ChannelsTab';
+import TeamsTab from './tabs/teams/TeamsTab';
+import UsersTab from './tabs/users/UsersTab';
+
+type TabName = 'users' | 'channels' | 'teams' | 'external';
+
+const DirectoryPage = () => {
+	const { t } = useTranslation();
+
+	const defaultTab = useSetting<TabName>('Accounts_Directory_DefaultView', 'users');
+	const federationEnabled = false; // TODO old federation removed
+	const tab = useRouteParameter('tab') as TabName | undefined;
+	const router = useRouter();
+
+	useEffect(
+		() =>
+			router.subscribeToRouteChange(() => {
+				if (router.getRouteName() !== 'directory') {
+					return;
+				}
+
+				const { tab } = router.getRouteParameters();
+
+				if (!tab || (tab === 'external' && !federationEnabled)) {
+					router.navigate(`/directory/${defaultTab}`, { replace: true });
+				}
+			}),
+		[router, federationEnabled, defaultTab],
+	);
+
+	const handleTabClick = useCallback((tab: TabName) => () => router.navigate(`/directory/${tab}`), [router]);
+
+	return (
+		<Page background='room'>
+			<PageHeader title={t('Directory')} />
+			<Tabs flexShrink={0}>
+				<TabsItem selected={tab === 'channels'} onClick={handleTabClick('channels')}>
+					{t('Channels')}
+				</TabsItem>
+				<TabsItem selected={tab === 'users'} onClick={handleTabClick('users')}>
+					{t('Users')}
+				</TabsItem>
+				<TabsItem selected={tab === 'teams'} onClick={handleTabClick('teams')}>
+					{t('Teams')}
+				</TabsItem>
+				{federationEnabled && (
+					<TabsItem selected={tab === 'external'} onClick={handleTabClick('external')}>
+						{t('External_Users')}
+					</TabsItem>
+				)}
+			</Tabs>
+			<PageContent>
+				{tab === 'channels' && <ChannelsTab />}
+				{tab === 'users' && <UsersTab />}
+				{tab === 'teams' && <TeamsTab />}
+				{federationEnabled && tab === 'external' && <UsersTab workspace='external' />}
+			</PageContent>
+		</Page>
+	);
+};
+
+export default DirectoryPage;

apps/meteor/client/views/directory/RoomTags.tsx

@@ -0,0 +1,22 @@
+import type { IRoom, Serialized } from '@rocket.chat/core-typings';
+import { Box, Margins, Tag } from '@rocket.chat/fuselage';
+import { useTranslation } from 'react-i18next';
+
+export type RoomTagsProps = {
+	room: Serialized<IRoom>;
+};
+
+const RoomTags = ({ room }: RoomTagsProps) => {
+	const { t } = useTranslation();
+
+	return (
+		<Box marginInline={4} alignItems='center' display='flex' withTruncatedText>
+			<Margins inline={2}>
+				{room.default && <Tag variant='secondary'>{t('default')}</Tag>}
+				{room.featured && <Tag variant='secondary'>{t('featured')}</Tag>}
+			</Margins>
+		</Box>
+	);
+};
+
+export default RoomTags;

apps/meteor/client/views/directory/hooks/useDirectoryQuery.ts

@@ -0,0 +1,24 @@
+import { useDebouncedValue } from '@rocket.chat/fuselage-hooks';
+import { useMemo } from 'react';
+
+export function useDirectoryQuery(
+	{ text, itemsPerPage, current }: { text: string; current: number; itemsPerPage: number },
+	[column, direction]: [string, 'asc' | 'desc'],
+	type: string,
+	workspace = 'local',
+): { sort: string; offset?: number | undefined; count?: number; query?: string; text?: string; type?: string; workspace?: string } {
+	return useDebouncedValue(
+		useMemo(
+			() => ({
+				text,
+				type,
+				workspace,
+				sort: JSON.stringify({ [column]: direction === 'asc' ? 1 : -1 }),
+				...(itemsPerPage && { count: itemsPerPage }),
+				...(current && { offset: current }),
+			}),
+			[itemsPerPage, current, column, direction, type, workspace, text],
+		),
+		500,
+	);
+}

apps/meteor/client/views/directory/index.ts

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

apps/meteor/client/views/directory/tabs/channels/ChannelsTab.tsx

@@ -0,0 +1,16 @@
+import { usePermission } from '@rocket.chat/ui-contexts';
+
+import ChannelsTable from './ChannelsTable';
+import NotAuthorizedPage from '../../../notAuthorized/NotAuthorizedPage';
+
+const ChannelsTab = () => {
+	const canViewPublicRooms = usePermission('view-c-room');
+
+	if (canViewPublicRooms) {
+		return <ChannelsTable />;
+	}
+
+	return <NotAuthorizedPage />;
+};
+
+export default ChannelsTab;

apps/meteor/client/views/directory/tabs/channels/ChannelsTable/ChannelsTable.tsx

@@ -0,0 +1,145 @@
+import type { IRoom, Serialized } from '@rocket.chat/core-typings';
+import { Pagination, States, StatesIcon, StatesTitle, StatesActions, StatesAction } from '@rocket.chat/fuselage';
+import { useMediaQuery } from '@rocket.chat/fuselage-hooks';
+import {
+	GenericTable,
+	GenericTableHeader,
+	GenericTableHeaderCell,
+	GenericTableBody,
+	GenericTableLoadingTable,
+	usePagination,
+	useSort,
+} from '@rocket.chat/ui-client';
+import { useRoute, useTranslation, useEndpoint } from '@rocket.chat/ui-contexts';
+import { useQuery } from '@tanstack/react-query';
+import type { KeyboardEvent, MouseEvent } from 'react';
+import { useMemo, useState } from 'react';
+
+import ChannelsTableRow from './ChannelsTableRow';
+import FilterByText from '../../../../../components/FilterByText';
+import GenericNoResults from '../../../../../components/GenericNoResults';
+import { useDirectoryQuery } from '../../../hooks/useDirectoryQuery';
+
+const ChannelsTable = () => {
+	const t = useTranslation();
+	const mediaQuery = useMediaQuery('(min-width: 768px)');
+	const [text, setText] = useState('');
+
+	const channelRoute = useRoute('channel');
+	const groupsRoute = useRoute('group');
+
+	const { current, itemsPerPage, setItemsPerPage: onSetItemsPerPage, setCurrent: onSetCurrent, ...paginationProps } = usePagination();
+	const { sortBy, sortDirection, setSort } = useSort<'name' | 'usersCount' | 'lastMessage' | 'createdAt'>('name');
+
+	const headers = useMemo(
+		() =>
+			[
+				<GenericTableHeaderCell key='name' direction={sortDirection} active={sortBy === 'name'} onClick={setSort} sort='name'>
+					{t('Name')}
+				</GenericTableHeaderCell>,
+				<GenericTableHeaderCell
+					key='usersCount'
+					direction={sortDirection}
+					active={sortBy === 'usersCount'}
+					onClick={setSort}
+					sort='usersCount'
+					width='100px'
+				>
+					{t('Users')}
+				</GenericTableHeaderCell>,
+				mediaQuery && (
+					<GenericTableHeaderCell
+						key='createdAt'
+						direction={sortDirection}
+						active={sortBy === 'createdAt'}
+						onClick={setSort}
+						sort='createdAt'
+						width='150px'
+					>
+						{t('Created_at')}
+					</GenericTableHeaderCell>
+				),
+				mediaQuery && (
+					<GenericTableHeaderCell
+						key='lastMessage'
+						direction={sortDirection}
+						active={sortBy === 'lastMessage'}
+						onClick={setSort}
+						sort='lastMessage'
+						width='150px'
+					>
+						{t('Last_Message')}
+					</GenericTableHeaderCell>
+				),
+				mediaQuery && (
+					<GenericTableHeaderCell key='belongsTo' width='150px'>
+						{t('Belongs_To')}
+					</GenericTableHeaderCell>
+				),
+			].filter(Boolean),
+		[setSort, sortBy, t, sortDirection, mediaQuery],
+	);
+
+	const getDirectoryData = useEndpoint('GET', '/v1/directory');
+	const query = useDirectoryQuery({ text, current, itemsPerPage }, [sortBy, sortDirection], 'channels');
+	const { data, isFetched, isLoading, isError, refetch } = useQuery({
+		queryKey: ['getDirectoryData', query],
+		queryFn: () => getDirectoryData(query),
+	});
+
+	const onClick = useMemo(
+		() => (name: IRoom['name'], type: IRoom['t']) => (e: KeyboardEvent | MouseEvent) => {
+			if (name && (e.type === 'click' || (e as KeyboardEvent).key === 'Enter')) {
+				type === 'c' ? channelRoute.push({ name }) : groupsRoute.push({ name });
+			}
+		},
+		[channelRoute, groupsRoute],
+	);
+
+	return (
+		<>
+			<FilterByText placeholder={t('Search_Channels')} value={text} onChange={(event) => setText(event.target.value)} />
+			{isLoading && (
+				<GenericTable>
+					<GenericTableHeader>{headers}</GenericTableHeader>
+					<GenericTableBody>
+						<GenericTableLoadingTable headerCells={5} />
+					</GenericTableBody>
+				</GenericTable>
+			)}
+			{data?.result && data.result.length > 0 && isFetched && (
+				<>
+					<GenericTable>
+						<GenericTableHeader>{headers}</GenericTableHeader>
+						<GenericTableBody>
+							{data.result.map((room) => (
+								<ChannelsTableRow key={room._id} room={room as Serialized<IRoom>} onClick={onClick} mediaQuery={mediaQuery} />
+							))}
+						</GenericTableBody>
+					</GenericTable>
+					<Pagination
+						divider
+						current={current}
+						itemsPerPage={itemsPerPage}
+						count={data?.total || 0}
+						onSetItemsPerPage={onSetItemsPerPage}
+						onSetCurrent={onSetCurrent}
+						{...paginationProps}
+					/>
+				</>
+			)}
+			{isFetched && data?.result.length === 0 && <GenericNoResults />}
+			{isError && (
+				<States>
+					<StatesIcon name='warning' variation='danger' />
+					<StatesTitle>{t('Something_went_wrong')}</StatesTitle>
+					<StatesActions>
+						<StatesAction onClick={() => refetch()}>{t('Reload_page')}</StatesAction>
+					</StatesActions>
+				</States>
+			)}
+		</>
+	);
+};
+
+export default ChannelsTable;

apps/meteor/client/views/directory/tabs/channels/ChannelsTable/ChannelsTableRow.tsx

@@ -0,0 +1,62 @@
+import type { IRoom, Serialized } from '@rocket.chat/core-typings';
+import { Box, Avatar } from '@rocket.chat/fuselage';
+import { GenericTableRow, GenericTableCell } from '@rocket.chat/ui-client';
+import type { KeyboardEvent, MouseEvent } from 'react';
+
+import MarkdownText from '../../../../../components/MarkdownText';
+import { RoomIcon } from '../../../../../components/RoomIcon';
+import { useFormatDate } from '../../../../../hooks/useFormatDate';
+import { roomCoordinator } from '../../../../../lib/rooms/roomCoordinator';
+import RoomTags from '../../../RoomTags';
+
+export type ChannelsTableRowProps = {
+	onClick: (name: IRoom['name'], type: IRoom['t']) => (e: KeyboardEvent | MouseEvent) => void;
+	room: Serialized<IRoom & { belongsTo?: string }>;
+	mediaQuery: boolean;
+};
+
+const ChannelsTableRow = ({ onClick, room, mediaQuery }: ChannelsTableRowProps) => {
+	const formatDate = useFormatDate();
+	const { _id, ts, t, name, fname, usersCount, lastMessage, topic, belongsTo } = room;
+	const avatarUrl = roomCoordinator.getRoomDirectives(t).getAvatarPath(room);
+
+	return (
+		<GenericTableRow key={_id} onKeyDown={onClick(name, t)} onClick={onClick(name, t)} tabIndex={0} role='link' action>
+			<GenericTableCell>
+				<Box display='flex'>
+					<Box flexGrow={0}>{avatarUrl && <Avatar size='x40' title={fname || name} url={avatarUrl} />}</Box>
+					<Box flexGrow={1} marginInline={8} withTruncatedText>
+						<Box display='flex' alignItems='center'>
+							<RoomIcon room={room} />
+							<Box fontScale='p2m' marginInline={4}>
+								{fname || name}
+							</Box>
+							<RoomTags room={room} />
+						</Box>
+						{topic && <MarkdownText variant='inlineWithoutBreaks' fontScale='p2' color='hint' withTruncatedText content={topic} />}
+					</Box>
+				</Box>
+			</GenericTableCell>
+			<GenericTableCell fontScale='p2' color='hint' withTruncatedText>
+				{usersCount}
+			</GenericTableCell>
+			{mediaQuery && ts && (
+				<GenericTableCell fontScale='p2' color='hint' withTruncatedText>
+					{formatDate(ts)}
+				</GenericTableCell>
+			)}
+			{mediaQuery && (
+				<GenericTableCell fontScale='p2' color='hint' withTruncatedText>
+					{lastMessage && formatDate(lastMessage.ts)}
+				</GenericTableCell>
+			)}
+			{mediaQuery && (
+				<GenericTableCell fontScale='p2' color='hint' withTruncatedText>
+					{belongsTo}
+				</GenericTableCell>
+			)}
+		</GenericTableRow>
+	);
+};
+
+export default ChannelsTableRow;

apps/meteor/client/views/directory/tabs/channels/ChannelsTable/index.ts

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

apps/meteor/client/views/directory/tabs/teams/TeamsTab.tsx

@@ -0,0 +1,16 @@
+import { usePermission } from '@rocket.chat/ui-contexts';
+
+import TeamsTable from './TeamsTable';
+import NotAuthorizedPage from '../../../notAuthorized/NotAuthorizedPage';
+
+const TeamsTab = () => {
+	const canViewPublicRooms = usePermission('view-c-room');
+
+	if (canViewPublicRooms) {
+		return <TeamsTable />;
+	}
+
+	return <NotAuthorizedPage />;
+};
+
+export default TeamsTab;

apps/meteor/client/views/directory/tabs/teams/TeamsTable/TeamsTable.tsx

@@ -0,0 +1,126 @@
+import type { IRoom, Serialized } from '@rocket.chat/core-typings';
+import { Pagination, States, StatesIcon, StatesTitle, StatesActions, StatesAction } from '@rocket.chat/fuselage';
+import { useMediaQuery } from '@rocket.chat/fuselage-hooks';
+import {
+	GenericTable,
+	GenericTableHeader,
+	GenericTableHeaderCell,
+	GenericTableBody,
+	GenericTableLoadingTable,
+	usePagination,
+	useSort,
+} from '@rocket.chat/ui-client';
+import { useRoute, useTranslation, useEndpoint } from '@rocket.chat/ui-contexts';
+import { useQuery } from '@tanstack/react-query';
+import type { KeyboardEvent, MouseEvent } from 'react';
+import { useMemo, useState } from 'react';
+
+import TeamsTableRow from './TeamsTableRow';
+import FilterByText from '../../../../../components/FilterByText';
+import GenericNoResults from '../../../../../components/GenericNoResults';
+import { useDirectoryQuery } from '../../../hooks/useDirectoryQuery';
+
+const TeamsTable = () => {
+	const t = useTranslation();
+	const mediaQuery = useMediaQuery('(min-width: 768px)');
+	const [text, setText] = useState('');
+
+	const { current, itemsPerPage, setItemsPerPage: onSetItemsPerPage, setCurrent: onSetCurrent, ...paginationProps } = usePagination();
+	const { sortBy, sortDirection, setSort } = useSort<'name' | 'usersCount' | 'lastMessage' | 'createdAt'>('name');
+
+	const headers = useMemo(
+		() =>
+			[
+				<GenericTableHeaderCell key='name' direction={sortDirection} active={sortBy === 'name'} onClick={setSort} sort='name'>
+					{t('Name')}
+				</GenericTableHeaderCell>,
+				<GenericTableHeaderCell key='channelsCount' width='100px'>
+					{t('Channels')}
+				</GenericTableHeaderCell>,
+				mediaQuery && (
+					<GenericTableHeaderCell
+						key='createdAt'
+						direction={sortDirection}
+						active={sortBy === 'createdAt'}
+						onClick={setSort}
+						sort='createdAt'
+						width='150px'
+					>
+						{t('Created_at')}
+					</GenericTableHeaderCell>
+				),
+			].filter(Boolean),
+		[setSort, sortBy, sortDirection, t, mediaQuery],
+	);
+
+	const channelsRoute = useRoute('channel');
+	const groupsRoute = useRoute('group');
+
+	const getDirectoryData = useEndpoint('GET', '/v1/directory');
+	const query = useDirectoryQuery({ text, current, itemsPerPage }, [sortBy, sortDirection], 'teams');
+	const { data, isFetched, isLoading, isError, refetch } = useQuery({
+		queryKey: ['getDirectoryData', query],
+		queryFn: () => getDirectoryData(query),
+	});
+
+	const onClick = useMemo(
+		() => (name: IRoom['name'], type: IRoom['t']) => (e: KeyboardEvent | MouseEvent) => {
+			if (name && (e.type === 'click' || (e as KeyboardEvent).key === 'Enter')) {
+				type === 'c' ? channelsRoute.push({ name }) : groupsRoute.push({ name });
+			}
+		},
+		[channelsRoute, groupsRoute],
+	);
+
+	return (
+		<>
+			<FilterByText placeholder={t('Teams_Search_teams')} value={text} onChange={(event) => setText(event.target.value)} />
+			{isLoading && (
+				<GenericTable>
+					<GenericTableHeader>{headers}</GenericTableHeader>
+					<GenericTableBody>
+						<GenericTableLoadingTable headerCells={3} />
+					</GenericTableBody>
+				</GenericTable>
+			)}
+			{data?.result && data.result.length > 0 && isFetched && (
+				<>
+					<GenericTable>
+						<GenericTableHeader>{headers}</GenericTableHeader>
+						<GenericTableBody>
+							{data.result.map((team) => (
+								<TeamsTableRow
+									key={team._id}
+									team={team as unknown as Serialized<IRoom> & { roomsCount: number }}
+									onClick={onClick}
+									mediaQuery={mediaQuery}
+								/>
+							))}
+						</GenericTableBody>
+					</GenericTable>
+					<Pagination
+						divider
+						current={current}
+						itemsPerPage={itemsPerPage}
+						count={data?.total || 0}
+						onSetItemsPerPage={onSetItemsPerPage}
+						onSetCurrent={onSetCurrent}
+						{...paginationProps}
+					/>
+				</>
+			)}
+			{isFetched && data?.result.length === 0 && <GenericNoResults />}
+			{isError && (
+				<States>
+					<StatesIcon name='warning' variation='danger' />
+					<StatesTitle>{t('Something_went_wrong')}</StatesTitle>
+					<StatesActions>
+						<StatesAction onClick={() => refetch()}>{t('Reload_page')}</StatesAction>
+					</StatesActions>
+				</States>
+			)}
+		</>
+	);
+};
+
+export default TeamsTable;

apps/meteor/client/views/directory/tabs/teams/TeamsTable/TeamsTableRow.tsx

@@ -0,0 +1,52 @@
+import type { IRoom, Serialized } from '@rocket.chat/core-typings';
+import { Box, Avatar } from '@rocket.chat/fuselage';
+import { GenericTableRow, GenericTableCell } from '@rocket.chat/ui-client';
+import type { KeyboardEvent, MouseEvent } from 'react';
+
+import MarkdownText from '../../../../../components/MarkdownText';
+import { RoomIcon } from '../../../../../components/RoomIcon';
+import { useFormatDate } from '../../../../../hooks/useFormatDate';
+import { roomCoordinator } from '../../../../../lib/rooms/roomCoordinator';
+import RoomTags from '../../../RoomTags';
+
+export type TeamsTableRowProps = {
+	onClick: (name: IRoom['name'], type: IRoom['t']) => (e: KeyboardEvent | MouseEvent) => void;
+	team: Serialized<IRoom & { roomsCount: number }>;
+	mediaQuery: boolean;
+};
+
+const TeamsTableRow = ({ onClick, team, mediaQuery }: TeamsTableRowProps) => {
+	const formatDate = useFormatDate();
+	const { _id, ts, t, name, fname, topic, roomsCount } = team;
+	const avatarUrl = roomCoordinator.getRoomDirectives(t).getAvatarPath(team);
+
+	return (
+		<GenericTableRow key={_id} onKeyDown={onClick(name, t)} onClick={onClick(name, t)} tabIndex={0} role='link' action>
+			<GenericTableCell>
+				<Box display='flex'>
+					<Box flexGrow={0}>{avatarUrl && <Avatar size='x40' title={fname || name} url={avatarUrl} />}</Box>
+					<Box flexGrow={1} marginInline={8} withTruncatedText>
+						<Box display='flex' alignItems='center'>
+							<RoomIcon room={team} />
+							<Box fontScale='p2m' marginInline={4}>
+								{fname || name}
+							</Box>
+							<RoomTags room={team} />
+						</Box>
+						{topic && <MarkdownText variant='inlineWithoutBreaks' fontScale='p2' color='hint' withTruncatedText content={topic} />}
+					</Box>
+				</Box>
+			</GenericTableCell>
+			<GenericTableCell fontScale='p2' color='hint' withTruncatedText>
+				{roomsCount}
+			</GenericTableCell>
+			{mediaQuery && ts && (
+				<GenericTableCell fontScale='p2' color='hint' withTruncatedText>
+					{formatDate(ts)}
+				</GenericTableCell>
+			)}
+		</GenericTableRow>
+	);
+};
+
+export default TeamsTableRow;

apps/meteor/client/views/directory/tabs/teams/TeamsTable/index.ts

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

apps/meteor/client/views/directory/tabs/users/UsersTab.tsx

@@ -0,0 +1,21 @@
+import { usePermission } from '@rocket.chat/ui-contexts';
+
+import UsersTable from './UsersTable';
+import NotAuthorizedPage from '../../../notAuthorized/NotAuthorizedPage';
+
+export type UsersTabProps = {
+	workspace?: 'external' | 'local';
+};
+
+const UsersTab = (props: UsersTabProps) => {
+	const canViewOutsideRoom = usePermission('view-outside-room');
+	const canViewDM = usePermission('view-d-room');
+
+	if (canViewOutsideRoom && canViewDM) {
+		return <UsersTable {...props} />;
+	}
+
+	return <NotAuthorizedPage />;
+};
+
+export default UsersTab;

apps/meteor/client/views/directory/tabs/users/UsersTable/UsersTable.tsx

@@ -0,0 +1,156 @@
+import type { IDirectoryUserResult, IUser, Serialized } from '@rocket.chat/core-typings';
+import { Pagination, States, StatesIcon, StatesTitle, StatesActions, StatesAction } from '@rocket.chat/fuselage';
+import { useMediaQuery } from '@rocket.chat/fuselage-hooks';
+import {
+	GenericTable,
+	GenericTableHeader,
+	GenericTableHeaderCell,
+	GenericTableBody,
+	GenericTableLoadingTable,
+	usePagination,
+	useSort,
+} from '@rocket.chat/ui-client';
+import { usePermission, useRoute, useTranslation, useEndpoint } from '@rocket.chat/ui-contexts';
+import { useQuery } from '@tanstack/react-query';
+import type { KeyboardEvent, MouseEvent } from 'react';
+import { useCallback, useMemo, useState } from 'react';
+
+import UsersTableRow from './UsersTableRow';
+import FilterByText from '../../../../../components/FilterByText';
+import GenericNoResults from '../../../../../components/GenericNoResults';
+import { useDirectoryQuery } from '../../../hooks/useDirectoryQuery';
+
+export type UsersTableProps = {
+	workspace?: 'external' | 'local';
+};
+
+const UsersTable = ({ workspace = 'local' }: UsersTableProps) => {
+	const t = useTranslation();
+	const mediaQuery = useMediaQuery('(min-width: 1024px)');
+
+	const directRoute = useRoute('direct');
+	const federation = workspace === 'external';
+	const [text, setText] = useState('');
+	const canViewFullOtherUserInfo = usePermission('view-full-other-user-info');
+
+	const { current, itemsPerPage, setItemsPerPage: onSetItemsPerPage, setCurrent: onSetCurrent, ...paginationProps } = usePagination();
+	const { sortBy, sortDirection, setSort } = useSort<'name' | 'email' | 'origin' | 'createdAt'>('name');
+
+	const headers = useMemo(
+		() =>
+			[
+				<GenericTableHeaderCell key='name' direction={sortDirection} active={sortBy === 'name'} onClick={setSort} sort='name'>
+					{t('Name')}
+				</GenericTableHeaderCell>,
+				mediaQuery && canViewFullOtherUserInfo && (
+					<GenericTableHeaderCell
+						key='email'
+						direction={sortDirection}
+						active={sortBy === 'email'}
+						onClick={setSort}
+						sort='email'
+						width='x200'
+					>
+						{t('Email')}
+					</GenericTableHeaderCell>
+				),
+				federation && (
+					<GenericTableHeaderCell
+						key='origin'
+						direction={sortDirection}
+						active={sortBy === 'origin'}
+						onClick={setSort}
+						sort='origin'
+						width='x200'
+					>
+						{t('Domain')}
+					</GenericTableHeaderCell>
+				),
+				mediaQuery && (
+					<GenericTableHeaderCell
+						key='createdAt'
+						direction={sortDirection}
+						active={sortBy === 'createdAt'}
+						onClick={setSort}
+						sort='createdAt'
+						width='x200'
+					>
+						{t('Joined_at')}
+					</GenericTableHeaderCell>
+				),
+			].filter(Boolean),
+		[setSort, sortBy, sortDirection, t, mediaQuery, canViewFullOtherUserInfo, federation],
+	);
+
+	const query = useDirectoryQuery({ text, current, itemsPerPage }, [sortBy, sortDirection], 'users', workspace);
+	const getDirectoryData = useEndpoint('GET', '/v1/directory');
+
+	const { data, isFetched, isLoading, isError, refetch } = useQuery({
+		queryKey: ['getDirectoryData', query],
+		queryFn: () => getDirectoryData(query),
+	});
+
+	const handleClick = useCallback(
+		(username: IUser['username']) => (e: KeyboardEvent | MouseEvent) => {
+			if (!username) return;
+			if (e.type === 'click' || (e as KeyboardEvent).key === 'Enter') {
+				directRoute.push({ rid: username });
+			}
+		},
+		[directRoute],
+	);
+
+	return (
+		<>
+			<FilterByText placeholder={t('Search_Users')} value={text} onChange={(event) => setText(event.target.value)} />
+			{isLoading && (
+				<GenericTable>
+					<GenericTableHeader>{headers}</GenericTableHeader>
+					<GenericTableBody>
+						<GenericTableLoadingTable headerCells={5} />
+					</GenericTableBody>
+				</GenericTable>
+			)}
+			{data?.result && data.result.length > 0 && isFetched && (
+				<>
+					<GenericTable>
+						<GenericTableHeader>{headers}</GenericTableHeader>
+						<GenericTableBody>
+							{data?.result.map((user) => (
+								<UsersTableRow
+									key={user._id}
+									onClick={handleClick}
+									mediaQuery={mediaQuery}
+									user={user as unknown as Serialized<IDirectoryUserResult>}
+									federation={federation}
+									canViewFullOtherUserInfo={canViewFullOtherUserInfo}
+								/>
+							))}
+						</GenericTableBody>
+					</GenericTable>
+					<Pagination
+						divider
+						current={current}
+						itemsPerPage={itemsPerPage}
+						count={data?.total || 0}
+						onSetItemsPerPage={onSetItemsPerPage}
+						onSetCurrent={onSetCurrent}
+						{...paginationProps}
+					/>
+				</>
+			)}
+			{isFetched && data?.result.length === 0 && <GenericNoResults />}
+			{isError && (
+				<States>
+					<StatesIcon name='warning' variation='danger' />
+					<StatesTitle>{t('Something_went_wrong')}</StatesTitle>
+					<StatesActions>
+						<StatesAction onClick={() => refetch()}>{t('Reload_page')}</StatesAction>
+					</StatesActions>
+				</States>
+			)}
+		</>
+	);
+};
+
+export default UsersTable;

apps/meteor/client/views/directory/tabs/users/UsersTable/UsersTableRow.tsx

@@ -0,0 +1,62 @@
+import type { IDirectoryUserResult, IUser, Serialized } from '@rocket.chat/core-typings';
+import { Box, FlexContainer, FlexItem } from '@rocket.chat/fuselage';
+import { UserAvatar } from '@rocket.chat/ui-avatar';
+import { GenericTableRow, GenericTableCell } from '@rocket.chat/ui-client';
+import type { KeyboardEvent, MouseEvent } from 'react';
+
+import MarkdownText from '../../../../../components/MarkdownText';
+import { useFormatDate } from '../../../../../hooks/useFormatDate';
+
+export type UsersTableRowProps = {
+	user: Serialized<IDirectoryUserResult> & { domain?: string };
+	onClick: (username: IUser['username']) => (e: KeyboardEvent | MouseEvent) => void;
+	mediaQuery: boolean;
+	federation: boolean;
+	canViewFullOtherUserInfo: boolean;
+};
+
+const UsersTableRow = ({
+	user: { createdAt, emails, domain, _id, username, name, bio, avatarETag, nickname },
+	onClick,
+	mediaQuery,
+	federation,
+	canViewFullOtherUserInfo,
+}: UsersTableRowProps) => {
+	const formatDate = useFormatDate();
+
+	return (
+		<GenericTableRow key={_id} onKeyDown={onClick(username)} onClick={onClick(username)} tabIndex={0} role='link' action>
+			<GenericTableCell>
+				<FlexContainer>
+					<Box>
+						<FlexItem>{username && <UserAvatar size='x40' title={username} username={username} etag={avatarETag} />}</FlexItem>
+						<Box withTruncatedText marginInline={8}>
+							<Box display='flex'>
+								<Box fontScale='p2m' withTruncatedText>
+									{name || username}
+									{nickname && ` (${nickname})`}
+								</Box>{' '}
+								<Box marginInline={4} />{' '}
+								<Box fontScale='p2' color='hint' withTruncatedText>
+									{username}
+								</Box>
+							</Box>
+							<MarkdownText variant='inline' fontScale='p2' color='hint' content={bio} />
+						</Box>
+					</Box>
+				</FlexContainer>
+			</GenericTableCell>
+			{mediaQuery && canViewFullOtherUserInfo && (
+				<GenericTableCell withTruncatedText>{emails?.length && emails[0].address}</GenericTableCell>
+			)}
+			{federation && <GenericTableCell withTruncatedText>{domain}</GenericTableCell>}
+			{mediaQuery && (
+				<GenericTableCell fontScale='p2' color='hint' withTruncatedText>
+					{formatDate(createdAt)}
+				</GenericTableCell>
+			)}
+		</GenericTableRow>
+	);
+};
+
+export default UsersTableRow;

apps/meteor/client/views/directory/tabs/users/UsersTable/index.ts

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