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

apps/meteor/client/components/UserCard/UserCard.tsx

@@ -0,0 +1,106 @@
+import { css } from '@rocket.chat/css-in-js';
+import { Box, Button, IconButton } from '@rocket.chat/fuselage';
+import { UserAvatar } from '@rocket.chat/ui-avatar';
+import { useEmbeddedLayout } from '@rocket.chat/ui-client';
+import type { ReactNode, ComponentProps } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import MarkdownText from '../MarkdownText';
+import * as Status from '../UserStatus';
+import UserCardActions from './UserCardActions';
+import UserCardDialog from './UserCardDialog';
+import UserCardInfo from './UserCardInfo';
+import UserCardRoles from './UserCardRoles';
+import UserCardUsername from './UserCardUsername';
+
+const clampStyle = css`
+	display: -webkit-box;
+	overflow: hidden;
+	-webkit-line-clamp: 3;
+	-webkit-box-orient: vertical;
+	word-break: break-word;
+`;
+
+export type UserCardProps = {
+	user?: {
+		nickname?: string;
+		name?: string;
+		username?: string;
+		etag?: string;
+		customStatus?: ReactNode;
+		roles?: ReactNode;
+		bio?: ReactNode;
+		status?: ReactNode;
+		localTime?: ReactNode;
+	};
+	actions?: ReactNode;
+	onOpenUserInfo?: () => void;
+	onClose?: () => void;
+} & ComponentProps<typeof UserCardDialog>;
+
+const UserCard = ({
+	user: { name, username, etag, customStatus, roles, bio, status = <Status.Offline />, localTime, nickname } = {},
+	actions,
+	onOpenUserInfo,
+	onClose,
+	...props
+}: UserCardProps) => {
+	const { t } = useTranslation();
+	const isLayoutEmbedded = useEmbeddedLayout();
+
+	return (
+		<UserCardDialog aria-label={t('User_card')} {...props}>
+			<div>
+				{username && <UserAvatar username={username} etag={etag} size='x124' />}
+				<Box flexGrow={0} display='flex' marginBlockStart={12} alignItems='center' justifyContent='center'>
+					<UserCardActions aria-label={t('User_card_actions')}>{actions}</UserCardActions>
+				</Box>
+			</div>
+			<Box display='flex' flexDirection='column' flexGrow={1} flexShrink={1} marginInlineStart={16} width='1px'>
+				<Box marginBlockEnd={4} withTruncatedText display='flex' alignItems='center'>
+					<UserCardUsername status={status} name={name} />
+					{nickname && (
+						<Box
+							flexGrow={1}
+							flexShrink={1}
+							flexBasis={0}
+							title={nickname}
+							color='hint'
+							marginInlineStart={4}
+							fontScale='p2'
+							withTruncatedText
+						>
+							({nickname})
+						</Box>
+					)}
+				</Box>
+				{customStatus && (
+					<UserCardInfo marginBlockEnd={16}>
+						{typeof customStatus === 'string' ? (
+							<MarkdownText withTruncatedText variant='inlineWithoutBreaks' content={customStatus} parseEmoji={true} />
+						) : (
+							customStatus
+						)}
+					</UserCardInfo>
+				)}
+				<UserCardRoles>{roles}</UserCardRoles>
+				<UserCardInfo>{localTime}</UserCardInfo>
+				{bio && (
+					<UserCardInfo withTruncatedText={false} className={clampStyle} height='x60'>
+						{typeof bio === 'string' ? <MarkdownText variant='inline' content={bio} /> : bio}
+					</UserCardInfo>
+				)}
+				{onOpenUserInfo && !isLayoutEmbedded && (
+					<div>
+						<Button small onClick={onOpenUserInfo}>
+							{t('See_full_profile')}
+						</Button>
+					</div>
+				)}
+			</Box>
+			{onClose && <IconButton marginInlineStart={16} small aria-label={t('Close')} icon='cross' onClick={onClose} />}
+		</UserCardDialog>
+	);
+};
+
+export default UserCard;