diff --git a/src/components/account-info.css b/src/components/account-info.css
index 197a0579..0722deca 100644
--- a/src/components/account-info.css
+++ b/src/components/account-info.css
@@ -154,6 +154,14 @@
cursor: pointer;
text-decoration-color: var(--text-insignificant-color);
}
+
+ .stats-avatars-bunch {
+ animation: appear 1s both ease-in-out;
+
+ > *:not(:first-child) {
+ margin: 0 0 0 -4px;
+ }
+ }
}
.timeline-start .account-container .stats {
flex-wrap: wrap;
diff --git a/src/components/account-info.jsx b/src/components/account-info.jsx
index f7b04756..9e4a99a0 100644
--- a/src/components/account-info.jsx
+++ b/src/components/account-info.jsx
@@ -2,6 +2,7 @@ import './account-info.css';
import { Menu, MenuDivider, MenuItem, SubMenu } from '@szhsin/react-menu';
import { useEffect, useMemo, useReducer, useRef, useState } from 'preact/hooks';
+import { proxy, useSnapshot } from 'valtio';
import { api } from '../utils/api';
import enhanceContent from '../utils/enhance-content';
@@ -48,6 +49,10 @@ const MUTE_DURATIONS_LABELS = {
const LIMIT = 80;
+const accountInfoStates = proxy({
+ familiarFollowers: [],
+});
+
function AccountInfo({
account,
fetchAccount = () => {},
@@ -61,6 +66,7 @@ function AccountInfo({
const [uiState, setUIState] = useState('default');
const isString = typeof account === 'string';
const [info, setInfo] = useState(isString ? null : account);
+ const snapAccountInfoStates = useSnapshot(accountInfoStates);
const isSelf = useMemo(
() => account.id === store.session.get('currentAccount'),
@@ -394,6 +400,22 @@ function AccountInfo({
};
}}
>
+ {!!snapAccountInfoStates.familiarFollowers.length && (
+
+
+ {(snapAccountInfoStates.familiarFollowers || []).map(
+ (follower) => (
+