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

apps/meteor/client/components/deviceManagement/DeviceIcon.tsx

@@ -0,0 +1,29 @@
+import { Box, Icon } from '@rocket.chat/fuselage';
+import type { Keys as IconName } from '@rocket.chat/icons';
+
+const iconMap: Record<string, IconName> = {
+	'browser': 'desktop',
+	'mobile': 'mobile',
+	'desktop-app': 'desktop',
+	'mobile-app': 'mobile',
+};
+
+export type DeviceIconProps = { deviceType: string };
+
+const DeviceIcon = ({ deviceType }: DeviceIconProps) => (
+	<Box
+		is='span'
+		display='inline-flex'
+		alignItems='center'
+		justifyContent='center'
+		padding={4}
+		backgroundColor='selected'
+		size='x24'
+		borderRadius='full'
+		marginInlineEnd={8}
+	>
+		<Icon name={iconMap[deviceType] || 'globe'} size='x16' color='hint' />
+	</Box>
+);
+
+export default DeviceIcon;

apps/meteor/client/components/deviceManagement/DeviceManagementTable/DeviceManagementTable.tsx

@@ -0,0 +1,82 @@
+import type { DeviceManagementSession, DeviceManagementPopulatedSession, Serialized } from '@rocket.chat/core-typings';
+import { Box, Pagination, States, StatesAction, StatesActions, StatesIcon, StatesSubtitle, StatesTitle } from '@rocket.chat/fuselage';
+import type { PaginatedResult } from '@rocket.chat/rest-typings';
+import { GenericTable, GenericTableHeader, GenericTableBody, GenericTableLoadingTable } from '@rocket.chat/ui-client';
+import type { UseQueryResult } from '@tanstack/react-query';
+import type { ComponentProps, ReactNode } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import GenericNoResults from '../../GenericNoResults/GenericNoResults';
+
+// FIXME: this tight coupling with the query result is not ideal; it indicates visual components should not be tightly
+// coupled with data fetching logic.
+type DeviceManagementTableProps<T> = UseQueryResult<PaginatedResult<{ sessions: Serialized<T>[] }>> & {
+	headers: ReactNode[];
+	renderRow: (data: Serialized<T>) => ReactNode;
+	current?: ComponentProps<typeof Pagination>['current'];
+	itemsPerPage?: ComponentProps<typeof Pagination>['itemsPerPage'];
+	setCurrent?: ComponentProps<typeof Pagination>['onSetCurrent'];
+	setItemsPerPage?: ComponentProps<typeof Pagination>['onSetItemsPerPage'];
+	paginationProps?: Partial<ComponentProps<typeof Pagination>>;
+};
+
+// TODO: Missing error state
+const DeviceManagementTable = <T extends DeviceManagementSession | DeviceManagementPopulatedSession>({
+	isPending,
+	isError,
+	error,
+	isSuccess,
+	data,
+	refetch,
+	headers,
+	renderRow,
+	current,
+	itemsPerPage,
+	setCurrent,
+	setItemsPerPage,
+	paginationProps,
+}: DeviceManagementTableProps<T>) => {
+	const { t } = useTranslation();
+
+	if (isError) {
+		return (
+			<Box display='flex' justifyContent='center' alignItems='center' height='100%'>
+				<States>
+					<StatesIcon name='warning' variation='danger' />
+					<StatesTitle>{t('Something_went_wrong')}</StatesTitle>
+					<StatesSubtitle>{t('We_Could_not_retrive_any_data')}</StatesSubtitle>
+					<StatesSubtitle>{error.message}</StatesSubtitle>
+					<StatesActions>
+						<StatesAction onClick={refetch}>{t('Retry')}</StatesAction>
+					</StatesActions>
+				</States>
+			</Box>
+		);
+	}
+
+	return (
+		<>
+			{data?.sessions.length === 0 && isSuccess && <GenericNoResults />}
+			<GenericTable aria-label={t('Devices')}>
+				{data?.sessions && data.sessions.length > 0 && headers && <GenericTableHeader>{headers}</GenericTableHeader>}
+				<GenericTableBody>
+					{isPending && <GenericTableLoadingTable headerCells={headers.filter(Boolean).length} />}
+					{isSuccess && data?.sessions && data.sessions.map(renderRow)}
+				</GenericTableBody>
+			</GenericTable>
+			{isSuccess && (
+				<Pagination
+					divider
+					current={current}
+					itemsPerPage={itemsPerPage}
+					count={data?.total || 0}
+					onSetCurrent={setCurrent}
+					onSetItemsPerPage={setItemsPerPage}
+					{...paginationProps}
+				/>
+			)}
+		</>
+	);
+};
+
+export default DeviceManagementTable;

apps/meteor/client/components/deviceManagement/DeviceManagementTable/index.ts

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

apps/meteor/client/components/deviceManagement/LoggedOutBanner.tsx

@@ -0,0 +1,14 @@
+import { Banner, Box, Icon } from '@rocket.chat/fuselage';
+import { useTranslation } from 'react-i18next';
+
+const LoggedOutBanner = () => {
+	const { t } = useTranslation();
+
+	return (
+		<Banner variant='warning' icon={<Icon name='warning' size='x24' />}>
+			<Box textAlign='left'>{t('Logged_Out_Banner_Text')}</Box>
+		</Banner>
+	);
+};
+
+export default LoggedOutBanner;