[Glitch] Profile redesign: Simplify header for follower/following lists

Port 000199f003 to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>

app/javascript/flavours/glitch/features/followers/components/header.tsx

@@ -0,0 +1,36 @@
+import type { FC } from 'react';
+
+import { FormattedMessage, useIntl } from 'react-intl';
+import type { MessageDescriptor } from 'react-intl';
+
+import { DisplayNameSimple } from '@/flavours/glitch/components/display_name/simple';
+import { useAccount } from '@/flavours/glitch/hooks/useAccount';
+
+import classes from '../styles.module.scss';
+
+export const AccountListHeader: FC<{
+  accountId: string;
+  total?: number;
+  titleText: MessageDescriptor;
+}> = ({ accountId, total, titleText }) => {
+  const intl = useIntl();
+  const account = useAccount(accountId);
+  return (
+    <>
+      <h1 className={classes.title}>
+        {intl.formatMessage(titleText, {
+          name: <DisplayNameSimple account={account} />,
+        })}
+      </h1>
+      {!!total && (
+        <h2 className={classes.subtitle}>
+          <FormattedMessage
+            id='account_list.total'
+            defaultMessage='{total, plural, one {# account} other {# accounts}}'
+            values={{ total }}
+          />
+        </h2>
+      )}
+    </>
+  );
+};

app/javascript/flavours/glitch/features/followers/components/list.tsx

@@ -12,7 +12,6 @@ import { useAccountVisibility } from '@/flavours/glitch/hooks/useAccountVisibili
 import { useLayout } from '@/flavours/glitch/hooks/useLayout';
 
 import { ProfileColumnHeader } from '../../account/components/profile_column_header';
-import { AccountHeader } from '../../account_timeline/components/account_header';
 
 import { RemoteHint } from './remote';
 
@@ -26,6 +25,7 @@ interface AccountListProps {
   accountId?: string | null;
   append?: ReactNode;
   emptyMessage: ReactNode;
+  header?: ReactNode;
   footer?: ReactNode;
   list?: AccountList | null;
   loadMore: () => void;
@@ -37,6 +37,7 @@ export const AccountList: FC<AccountListProps> = ({
   accountId,
   append,
   emptyMessage,
+  header,
   footer,
   list,
   loadMore,
@@ -99,7 +100,7 @@ export const AccountList: FC<AccountListProps> = ({
         hasMore={!forceEmptyState && list?.hasMore}
         isLoading={list?.isLoading ?? true}
         onLoadMore={loadMore}
-        prepend={<AccountHeader accountId={accountId} hideTabs />}
+        prepend={header}
         alwaysPrepend
         append={append ?? <RemoteHint domain={domain} url={account.url} />}
         emptyMessage={emptyMessage}

app/javascript/flavours/glitch/features/followers/index.tsx

@@ -1,7 +1,7 @@
 import { useEffect } from 'react';
 import type { FC } from 'react';
 
-import { FormattedMessage } from 'react-intl';
+import { defineMessage, FormattedMessage } from 'react-intl';
 
 import { useDebouncedCallback } from 'use-debounce';
 
@@ -17,8 +17,14 @@ import { useAppDispatch, useAppSelector } from '@/flavours/glitch/store';
 
 import type { EmptyMessageProps } from './components/empty';
 import { BaseEmptyMessage } from './components/empty';
+import { AccountListHeader } from './components/header';
 import { AccountList } from './components/list';
 
+const titleText = defineMessage({
+  id: 'followers.title',
+  defaultMessage: 'Following {name}',
+});
+
 const Followers: FC = () => {
   const accountId = useAccountId();
   const account = useAccount(accountId);
@@ -67,6 +73,15 @@ const Followers: FC = () => {
   return (
     <AccountList
       accountId={accountId}
+      header={
+        accountId && (
+          <AccountListHeader
+            accountId={accountId}
+            titleText={titleText}
+            total={account?.followers_count}
+          />
+        )
+      }
       footer={footer}
       emptyMessage={<EmptyMessage account={account} />}
       list={followerList}

app/javascript/flavours/glitch/features/followers/styles.module.scss

@@ -0,0 +1,11 @@
+.title {
+  font-size: 20px;
+  font-weight: 600;
+  margin: 20px 16px 10px;
+}
+
+.subtitle {
+  font-size: 14px;
+  color: var(--color-text-secondary);
+  margin: 10px 16px;
+}

app/javascript/flavours/glitch/features/following/index.tsx

@@ -1,7 +1,7 @@
 import { useEffect } from 'react';
 import type { FC } from 'react';
 
-import { FormattedMessage } from 'react-intl';
+import { defineMessage, FormattedMessage } from 'react-intl';
 
 import { useDebouncedCallback } from 'use-debounce';
 
@@ -17,10 +17,16 @@ import { useAppDispatch, useAppSelector } from '@/flavours/glitch/store';
 
 import type { EmptyMessageProps } from '../followers/components/empty';
 import { BaseEmptyMessage } from '../followers/components/empty';
+import { AccountListHeader } from '../followers/components/header';
 import { AccountList } from '../followers/components/list';
 
 import { RemoteHint } from './components/remote';
 
+const titleText = defineMessage({
+  id: 'following.title',
+  defaultMessage: 'Followed by {name}',
+});
+
 const Followers: FC = () => {
   const accountId = useAccountId();
   const account = useAccount(accountId);
@@ -72,6 +78,15 @@ const Followers: FC = () => {
       accountId={accountId}
       append={domain && <RemoteHint domain={domain} url={account.url} />}
       emptyMessage={<EmptyMessage account={account} />}
+      header={
+        accountId && (
+          <AccountListHeader
+            accountId={accountId}
+            titleText={titleText}
+            total={account?.following_count}
+          />
+        )
+      }
       footer={footer}
       list={followingList}
       loadMore={loadMore}