From ac30963ddf4cd514261f83c4a2b4265cc85c1eef Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Sun, 12 Feb 2023 19:29:03 +0800
Subject: [PATCH] New AccountBlock component

---
 src/components/account-block.css | 14 +++++++
 src/components/account-block.jsx | 66 ++++++++++++++++++++++++++++++++
 src/components/account.jsx       | 13 ++++---
 src/pages/search.jsx             |  9 +----
 4 files changed, 90 insertions(+), 12 deletions(-)
 create mode 100644 src/components/account-block.css
 create mode 100644 src/components/account-block.jsx

diff --git a/src/components/account-block.css b/src/components/account-block.css
new file mode 100644
index 00000000..2b760d80
--- /dev/null
+++ b/src/components/account-block.css
@@ -0,0 +1,14 @@
+.account-block {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: var(--text-color);
+  text-decoration: none;
+}
+.account-block:hover b {
+  text-decoration: underline;
+}
+
+.account-block.skeleton {
+  color: var(--bg-faded-color);
+}
diff --git a/src/components/account-block.jsx b/src/components/account-block.jsx
new file mode 100644
index 00000000..c8c2e54b
--- /dev/null
+++ b/src/components/account-block.jsx
@@ -0,0 +1,66 @@
+import './account-block.css';
+
+import emojifyText from '../utils/emojify-text';
+import states from '../utils/states';
+
+import Avatar from './avatar';
+
+function AccountBlock({
+  skeleton,
+  account,
+  avatarSize = 'xl',
+  instance,
+  external,
+  onClick,
+}) {
+  if (skeleton) {
+    return (
+      <div class="account-block skeleton">
+        <Avatar size={avatarSize} />
+        <span>
+          <b>████████</b>
+          <br />
+          @██████
+        </span>
+      </div>
+    );
+  }
+
+  const { acct, avatar, avatarStatic, displayName, username, emojis, url } =
+    account;
+  const displayNameWithEmoji = emojifyText(displayName, emojis);
+
+  return (
+    <a
+      class="account-block"
+      href={url}
+      target={external ? '_blank' : null}
+      title={`@${acct}`}
+      onClick={(e) => {
+        if (external) return;
+        e.preventDefault();
+        if (onClick) return onClick(e);
+        states.showAccount = {
+          account,
+          instance,
+        };
+      }}
+    >
+      <Avatar url={avatar} size={avatarSize} />
+      <span>
+        {displayName ? (
+          <b
+            dangerouslySetInnerHTML={{
+              __html: displayNameWithEmoji,
+            }}
+          />
+        ) : (
+          <b>{username}</b>
+        )}
+        <br />@{acct}
+      </span>
+    </a>
+  );
+}
+
+export default AccountBlock;
diff --git a/src/components/account.jsx b/src/components/account.jsx
index 385e119a..60090d84 100644
--- a/src/components/account.jsx
+++ b/src/components/account.jsx
@@ -10,10 +10,10 @@ import shortenNumber from '../utils/shorten-number';
 import states, { hideAllModals } from '../utils/states';
 import store from '../utils/store';
 
+import AccountBlock from './account-block';
 import Avatar from './avatar';
 import Icon from './icon';
 import Link from './link';
-import NameText from './name-text';
 
 function Account({ account, instance: propInstance, onClose }) {
   const { masto, instance, authenticated } = api({ instance: propInstance });
@@ -158,8 +158,7 @@ function Account({ account, instance: propInstance, onClose }) {
       {uiState === 'loading' ? (
         <>
           <header>
-            <Avatar size="xxxl" />
-            ███ ████████████
+            <AccountBlock avatarSize="xxxl" skeleton />
           </header>
           <main>
             <div class="note">
@@ -177,8 +176,12 @@ function Account({ account, instance: propInstance, onClose }) {
         info && (
           <>
             <header>
-              <Avatar url={avatar} size="xxxl" />
-              <NameText account={info} instance={instance} showAcct external />
+              <AccountBlock
+                account={info}
+                instance={instance}
+                avatarSize="xxxl"
+                external
+              />
             </header>
             <main tabIndex="-1">
               {bot && (
diff --git a/src/pages/search.jsx b/src/pages/search.jsx
index 95bace4d..341b7862 100644
--- a/src/pages/search.jsx
+++ b/src/pages/search.jsx
@@ -3,6 +3,7 @@ import './search.css';
 import { useEffect, useRef, useState } from 'preact/hooks';
 import { useSearchParams } from 'react-router-dom';
 
+import AccountBlock from '../components/account-block';
 import Avatar from '../components/avatar';
 import Icon from '../components/icon';
 import Link from '../components/link';
@@ -87,13 +88,7 @@ function Search() {
                 <ul class="timeline flat accounts-list">
                   {accountResults.map((account) => (
                     <li>
-                      <Avatar url={account.avatar} size="xl" />
-                      <NameText
-                        account={account}
-                        instance={instance}
-                        showAcct
-                      />
-                      <br />
+                      <AccountBlock account={account} instance={instance} />
                     </li>
                   ))}
                 </ul>