diff --git a/app/soapbox/components/profile-hover-card.tsx b/app/soapbox/components/profile-hover-card.tsx index 3775a107c..3bbe25704 100644 --- a/app/soapbox/components/profile-hover-card.tsx +++ b/app/soapbox/components/profile-hover-card.tsx @@ -1,6 +1,6 @@ import classNames from 'clsx'; import React, { useEffect, useState } from 'react'; -import { FormattedMessage } from 'react-intl'; +import { useIntl, FormattedMessage } from 'react-intl'; import { usePopper } from 'react-popper'; import { useHistory } from 'react-router-dom'; @@ -17,10 +17,11 @@ import { useAppSelector, useAppDispatch } from 'soapbox/hooks'; import { makeGetAccount } from 'soapbox/selectors'; import { showProfileHoverCard } from './hover_ref_wrapper'; -import { Card, CardBody, Stack, Text } from './ui'; +import { Card, CardBody, HStack, Icon, Stack, Text } from './ui'; import type { AppDispatch } from 'soapbox/store'; import type { Account } from 'soapbox/types/entities'; +import { isLocal } from 'soapbox/utils/accounts'; const getAccount = makeGetAccount(); @@ -60,6 +61,7 @@ interface IProfileHoverCard { export const ProfileHoverCard: React.FC = ({ visible = true }) => { const dispatch = useAppDispatch(); const history = useHistory(); + const intl = useIntl(); const [popperElement, setPopperElement] = useState(null); @@ -88,6 +90,7 @@ export const ProfileHoverCard: React.FC = ({ visible = true } if (!account) return null; const accountBio = { __html: account.note_emojified }; + const memberSinceDate = intl.formatDate(account.created_at, { month: 'long', year: 'numeric' }); const followedBy = me !== account.id && account.relationship?.followed_by === true; return ( @@ -116,6 +119,23 @@ export const ProfileHoverCard: React.FC = ({ visible = true } )} + {isLocal(account) ? ( + + + + + + + + ) : null} + {account.source.get('note', '').length > 0 && ( )}