diff --git a/src/components/account-block.css b/src/components/account-block.css index 2b760d80..0780f244 100644 --- a/src/components/account-block.css +++ b/src/components/account-block.css @@ -12,3 +12,45 @@ .account-block.skeleton { color: var(--bg-faded-color); } + +.account-block .short-desc { + max-height: 1.2em; /* just in case clamping ain't working */ +} +.account-block .short-desc, +.account-block .short-desc > * { + display: -webkit-box; + -webkit-line-clamp: 1; + -webkit-box-orient: vertical; + overflow: hidden; +} +.account-block .short-desc > * + * { + display: none; +} +.account-block .short-desc * { + margin: 0; + padding: 0; + color: inherit; + pointer-events: none; +} + +.account-block .verified-field { + color: var(--green-color); + display: inline-flex; + align-items: center; + gap: 2px; +} +.account-block .verified-field .icon { +} +.account-block .verified-field .invisible { + display: none; +} + +.account-block .account-block-stats { + margin-top: 2px; + font-size: 0.9em; + color: var(--text-insignificant-color); +} +.account-block .account-block-stats a { + color: inherit; + text-decoration: none; +} diff --git a/src/components/account-block.jsx b/src/components/account-block.jsx index a9b93da2..1208955e 100644 --- a/src/components/account-block.jsx +++ b/src/components/account-block.jsx @@ -2,11 +2,14 @@ import './account-block.css'; import { useNavigate } from 'react-router-dom'; +import enhanceContent from '../utils/enhance-content'; import niceDateTime from '../utils/nice-date-time'; +import shortenNumber from '../utils/shorten-number'; import states from '../utils/states'; import Avatar from './avatar'; import EmojiText from './emoji-text'; +import Icon from './icon'; function AccountBlock({ skeleton, @@ -17,6 +20,7 @@ function AccountBlock({ internal, onClick, showActivity = false, + showStats = false, }) { if (skeleton) { return ( @@ -45,9 +49,13 @@ function AccountBlock({ statusesCount, lastStatusAt, bot, + fields, + note, } = account; const [_, acct1, acct2] = acct.match(/([^@]+)(@.+)/i) || [, acct]; + const verifiedField = fields?.find((f) => !!f.verifiedAt && !!f.value); + return ( )} + {showStats && ( +
+
+ {bot && ( + <> + + Automated + + + )} + {!!verifiedField && ( + + {' '} + + + )} +
+ )}
); diff --git a/src/pages/search.jsx b/src/pages/search.jsx index bb507f1a..5613cfc1 100644 --- a/src/pages/search.jsx +++ b/src/pages/search.jsx @@ -178,6 +178,7 @@ function Search(props) { ))}