Initial implementation of join date inclusion in hover profile card

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<IProfileHoverCard> = ({ visible = true }) => {
   const dispatch = useAppDispatch();
   const history = useHistory();
+  const intl = useIntl();
 
   const [popperElement, setPopperElement] = useState<HTMLElement | null>(null);
 
@@ -88,6 +90,7 @@ export const ProfileHoverCard: React.FC<IProfileHoverCard> = ({ 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<IProfileHoverCard> = ({ visible = true }
               )}
             </BundleContainer>
 
+            {isLocal(account) ? (
+              <HStack alignItems='center' space={0.5}>
+                <Icon
+                  src={require('@tabler/icons/calendar.svg')}
+                  className='w-4 h-4 text-gray-800 dark:text-gray-200'
+                />
+
+                <Text size='sm'>
+                  <FormattedMessage
+                    id='account.member_since' defaultMessage='Joined {date}' values={{
+                      date: memberSinceDate,
+                    }}
+                  />
+                </Text>
+              </HStack>
+            ) : null}
+
             {account.source.get('note', '').length > 0 && (
               <Text size='sm' dangerouslySetInnerHTML={accountBio} />
             )}