pl-fe: show pixelfed pronouns when set

Signed-off-by: nicole mikołajczyk <git@mkljczk.pl>

packages/pl-fe/src/components/account-hover-card.tsx

@@ -27,6 +27,10 @@ import Scrobble from './scrobble';
 
 import type { Account } from 'pl-fe/normalizers/account';
 
+const messages = {
+  pronouns: { id: 'account.pronouns.with_label', defaultMessage: 'Pronouns: {pronouns}' },
+};
+
 const getBadges = (
   account?: Pick<Account, 'is_admin' | 'is_moderator'>,
 ): JSX.Element[] => {
@@ -154,6 +158,22 @@ const AccountHoverCard: React.FC<IAccountHoverCard> = ({ visible = true }) => {
               </HStack>
             ) : null}
 
+            {account.pronouns.length > 0 && (
+              <HStack alignItems='center' space={0.5}>
+                <Icon
+                  src={require('@tabler/icons/outline/tags.svg')}
+                  className='size-4 text-gray-800 dark:text-gray-200'
+                />
+
+                <Text
+                  size='sm'
+                  title={intl.formatMessage(messages.pronouns, { pronouns: account.pronouns.join('/') })}
+                >
+                  {account.pronouns.join('/')}
+                </Text>
+              </HStack>
+            )}
+
             {!!scrobble && <Scrobble scrobble={scrobble} />}
 
             {account.note.length > 0 && (

packages/pl-fe/src/features/ui/components/panels/profile-info-panel.tsx

@@ -28,6 +28,7 @@ const messages = defineMessages({
   account_locked: { id: 'account.locked_info', defaultMessage: 'This account privacy status is set to locked. The owner manually reviews who can follow them.' },
   deactivated: { id: 'account.deactivated', defaultMessage: 'Deactivated' },
   bot: { id: 'account.badges.bot', defaultMessage: 'Bot' },
+  pronouns: { id: 'account.pronouns.with_label', defaultMessage: 'Pronouns: {pronouns}' },
 });
 
 interface IProfileInfoPanel {
@@ -129,6 +130,8 @@ const ProfileInfoPanel: React.FC<IProfileInfoPanel> = ({ account, username }) =>
   const memberSinceDate = intl.formatDate(account.created_at, { month: 'long', year: 'numeric' });
   const badges = getBadges();
 
+  account.pronouns = ['she', 'her'];
+
   return (
     <div className='mt-6 min-w-0 flex-1 sm:px-2'>
       <Stack space={2}>
@@ -204,6 +207,22 @@ const ProfileInfoPanel: React.FC<IProfileInfoPanel> = ({ account, username }) =>
           ) : null}
 
           {renderBirthday()}
+
+          {account.pronouns.length > 0 ? (
+            <HStack
+              alignItems='center' space={0.5}
+              title={intl.formatMessage(messages.pronouns, { pronouns: account.pronouns.join('/') })}
+            >
+              <Icon
+                src={require('@tabler/icons/outline/tags.svg')}
+                className='size-4 text-gray-800 dark:text-gray-200'
+              />
+
+              <Text size='sm'>
+                {account.pronouns.join('/')}
+              </Text>
+            </HStack>
+          ) : null}
         </div>
 
         {scrobble && <Scrobble scrobble={scrobble} />}

packages/pl-fe/src/locales/en.json

@@ -54,6 +54,7 @@
   "account.posts_with_replies": "Posts & replies",
   "account.profile": "Profile",
   "account.profile_external": "View profile on {domain}",
+  "account.pronouns.with_label": "Pronouns: {pronouns}",
   "account.register": "Sign up",
   "account.remote_follow": "Remote follow",
   "account.remove_from_followers": "Remove this follower",