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) => ( + + ), + )} + + + )} {shortenNumber(followersCount)} {' '} @@ -459,7 +481,7 @@ function AccountInfo({ ); } -const FAMILIAR_FOLLOWERS_LIMIT = 10; +const FAMILIAR_FOLLOWERS_LIMIT = 3; function RelatedActions({ info, instance, authenticated, standalone }) { if (!info) return null; @@ -472,7 +494,6 @@ function RelatedActions({ info, instance, authenticated, standalone }) { const [relationshipUIState, setRelationshipUIState] = useState('default'); const [relationship, setRelationship] = useState(null); - const [familiarFollowers, setFamiliarFollowers] = useState([]); const [postingStats, setPostingStats] = useState(); const { id, acct, url, username, locked, lastStatusAt, note, fields } = info; @@ -533,7 +554,7 @@ function RelatedActions({ info, instance, authenticated, standalone }) { accountID.current = currentID; setRelationshipUIState('loading'); - setFamiliarFollowers([]); + accountInfoStates.familiarFollowers = []; setPostingStats(null); const fetchRelationships = currentMasto.v1.accounts.fetchRelationships([ @@ -559,7 +580,8 @@ function RelatedActions({ info, instance, authenticated, standalone }) { const followers = await fetchFamiliarFollowers; console.log('fetched familiar followers', followers); - setFamiliarFollowers(followers[0].accounts); + accountInfoStates.familiarFollowers = + followers[0].accounts.slice(0, FAMILIAR_FOLLOWERS_LIMIT); if (standalone) return; @@ -624,61 +646,12 @@ function RelatedActions({ info, instance, authenticated, standalone }) { const [showTranslatedBio, setShowTranslatedBio] = useState(false); const [showAddRemoveLists, setShowAddRemoveLists] = useState(false); - const hasFamiliarFollowers = familiarFollowers?.length > 0; const hasPostingStats = postingStats?.total >= 3; return ( <> - {(hasFamiliarFollowers || hasPostingStats) && ( + {hasPostingStats && (
- {hasFamiliarFollowers && ( -
-
-

- Followed by{' '} - - {familiarFollowers - .slice(0, FAMILIAR_FOLLOWERS_LIMIT) - .map((follower) => ( - { - e.preventDefault(); - states.showAccount = { - account: follower, - instance, - }; - }} - > - - - ))} - {familiarFollowers.length > FAMILIAR_FOLLOWERS_LIMIT && ( - - )} - -

-
-
- )} {hasPostingStats && (
diff --git a/src/index.css b/src/index.css index d91bf8eb..7c32737e 100644 --- a/src/index.css +++ b/src/index.css @@ -438,3 +438,24 @@ kbd { .shazam-container-inner { overflow: hidden; } + +@keyframes shazam-horizontal { + 0% { + grid-template-columns: 0fr; + } + 100% { + grid-template-columns: 1fr; + } +} +.shazam-container-horizontal { + display: grid; + grid-template-columns: 1fr; + transition: grid-template-columns 0.5s ease-in-out; + white-space: nowrap; +} +.shazam-container-horizontal:not(.no-animation) { + animation: shazam-horizontal 0.5s ease-in-out both !important; +} +.shazam-container-horizontal[hidden] { + grid-template-columns: 0fr; +}