diff --git a/app/javascript/flavours/glitch/features/followers/components/header.tsx b/app/javascript/flavours/glitch/features/followers/components/header.tsx
new file mode 100644
index 0000000000..9d912af98c
--- /dev/null
+++ b/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 (
+ <>
+
+ {intl.formatMessage(titleText, {
+ name: ,
+ })}
+
+ {!!total && (
+
+
+
+ )}
+ >
+ );
+};
diff --git a/app/javascript/flavours/glitch/features/followers/components/list.tsx b/app/javascript/flavours/glitch/features/followers/components/list.tsx
index 359192393c..b79a441ca6 100644
--- a/app/javascript/flavours/glitch/features/followers/components/list.tsx
+++ b/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 = ({
accountId,
append,
emptyMessage,
+ header,
footer,
list,
loadMore,
@@ -99,7 +100,7 @@ export const AccountList: FC = ({
hasMore={!forceEmptyState && list?.hasMore}
isLoading={list?.isLoading ?? true}
onLoadMore={loadMore}
- prepend={}
+ prepend={header}
alwaysPrepend
append={append ?? }
emptyMessage={emptyMessage}
diff --git a/app/javascript/flavours/glitch/features/followers/index.tsx b/app/javascript/flavours/glitch/features/followers/index.tsx
index 109f161f28..5719872582 100644
--- a/app/javascript/flavours/glitch/features/followers/index.tsx
+++ b/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 (
+ )
+ }
footer={footer}
emptyMessage={}
list={followerList}
diff --git a/app/javascript/flavours/glitch/features/followers/styles.module.scss b/app/javascript/flavours/glitch/features/followers/styles.module.scss
new file mode 100644
index 0000000000..f58b345bec
--- /dev/null
+++ b/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;
+}
diff --git a/app/javascript/flavours/glitch/features/following/index.tsx b/app/javascript/flavours/glitch/features/following/index.tsx
index 7676525d2e..067fb4d732 100644
--- a/app/javascript/flavours/glitch/features/following/index.tsx
+++ b/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 && }
emptyMessage={}
+ header={
+ accountId && (
+
+ )
+ }
footer={footer}
list={followingList}
loadMore={loadMore}