Show additional stats for accounts in search results

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;
+}

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 (
     <a
       class="account-block"
@@ -100,6 +108,33 @@ function AccountBlock({
             </small>
           </>
         )}
+        {showStats && (
+          <div class="account-block-stats">
+            <div
+              class="short-desc"
+              dangerouslySetInnerHTML={{
+                __html: enhanceContent(note, { emojis }),
+              }}
+            />
+            {bot && (
+              <>
+                <span class="tag">
+                  <Icon icon="bot" /> Automated
+                </span>
+              </>
+            )}
+            {!!verifiedField && (
+              <span class="verified-field ib">
+                <Icon icon="check-circle" size="s" />{' '}
+                <span
+                  dangerouslySetInnerHTML={{
+                    __html: enhanceContent(verifiedField.value, { emojis }),
+                  }}
+                />
+              </span>
+            )}
+          </div>
+        )}
       </span>
     </a>
   );

src/pages/search.jsx

@@ -178,6 +178,7 @@ function Search(props) {
                             <AccountBlock
                               account={account}
                               instance={instance}
+                              showStats
                             />
                           </li>
                         ))}