Display rudimentary ProfileFieldsPanel

app/soapbox/features/ui/components/profile_fields_panel.tsx

@@ -0,0 +1,30 @@
+'use strict';
+
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+
+import { Widget, Stack } from 'soapbox/components/ui';
+
+import type { Account } from 'soapbox/types/entities';
+
+interface IProfileFieldsPanel {
+  account: Account,
+}
+
+/** Custom profile fields for sidebar. */
+const ProfileFieldsPanel: React.FC<IProfileFieldsPanel> = ({ account }) => {
+  return (
+    <Widget title={<FormattedMessage id='profile_fields_panel.title' defaultMessage='Profile fields' />}>
+      <Stack space={2}>
+        {account.fields.map(field => (
+          <div>
+            {field.name_emojified}<br />
+            {field.value_emojified}
+          </div>
+        ))}
+      </Stack>
+    </Widget>
+  );
+};
+
+export default ProfileFieldsPanel;

app/soapbox/features/ui/util/async-components.ts

@@ -362,6 +362,10 @@ export function ProfileMediaPanel() {
   return import(/* webpackChunkName: "features/account_gallery" */'../components/profile_media_panel');
 }
 
+export function ProfileFieldsPanel() {
+  return import(/* webpackChunkName: "features/account_timeline" */'../components/profile_fields_panel');
+}
+
 export function PinnedAccountsPanel() {
   return import(/* webpackChunkName: "features/pinned_accounts" */'../components/pinned_accounts_panel');
 }

app/soapbox/pages/profile_page.tsx

@@ -9,6 +9,7 @@ import {
   TrendsPanel,
   ProfileInfoPanel,
   ProfileMediaPanel,
+  ProfileFieldsPanel,
   SignUpPanel,
 } from 'soapbox/features/ui/util/async-components';
 import { useAppSelector, useFeatures, useSoapboxConfig } from 'soapbox/hooks';
@@ -141,9 +142,9 @@ const ProfilePage: React.FC<IProfilePage> = ({ params, children }) => {
         <BundleContainer fetchComponent={ProfileMediaPanel}>
           {Component => <Component account={account} />}
         </BundleContainer>
-        {features.trends && (
-          <BundleContainer fetchComponent={TrendsPanel}>
-            {Component => <Component limit={3} key='trends-panel' />}
+        {account && !account.fields.isEmpty() && (
+          <BundleContainer fetchComponent={ProfileFieldsPanel}>
+            {Component => <Component account={account} />}
           </BundleContainer>
         )}
         {features.suggestions && (