Show account block in Composer

src/components/account-block.jsx

@@ -1,7 +1,6 @@
 import './account-block.css';
 
-import { useNavigate } from 'react-router-dom';
+// 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';
@@ -21,6 +20,8 @@ function AccountBlock({
   onClick,
   showActivity = false,
   showStats = false,
+  accountInstance,
+  hideDisplayName = false,
 }) {
   if (skeleton) {
     return (
@@ -35,7 +36,7 @@ function AccountBlock({
     );
   }
 
-  const navigate = useNavigate();
+  // const navigate = useNavigate();
 
   const {
     id,
@@ -53,7 +54,10 @@ function AccountBlock({
     note,
     group,
   } = account;
-  const [_, acct1, acct2] = acct.match(/([^@]+)(@.+)/i) || [, acct];
+  let [_, acct1, acct2] = acct.match(/([^@]+)(@.+)/i) || [, acct];
+  if (accountInstance) {
+    acct2 = `@${accountInstance}`;
+  }
 
   const verifiedField = fields?.find((f) => !!f.verifiedAt && !!f.value);
 
@@ -68,7 +72,8 @@ function AccountBlock({
         e.preventDefault();
         if (onClick) return onClick(e);
         if (internal) {
-          navigate(`/${instance}/a/${id}`);
+          // navigate(`/${instance}/a/${id}`);
+          location.hash = `/${instance}/a/${id}`;
         } else {
           states.showAccount = {
             account,
@@ -79,14 +84,18 @@ function AccountBlock({
     >
       <Avatar url={avatar} size={avatarSize} squircle={bot} />
       <span>
-        {displayName ? (
+        {!hideDisplayName && (
-          <b>
+          <>
-            <EmojiText text={displayName} emojis={emojis} />
+            {displayName ? (
-          </b>
+              <b>
-        ) : (
+                <EmojiText text={displayName} emojis={emojis} />
-          <b>{username}</b>
+              </b>
+            ) : (
+              <b>{username}</b>
+            )}
+            <br />
+          </>
         )}
-        <br />
         <span class="account-block-acct">
           @{acct1}
           <wbr />

src/components/compose.css

@@ -25,6 +25,15 @@
   position: sticky;
   top: 0;
   z-index: 100;
+  white-space: nowrap;
+}
+#compose-container .compose-top .account-block {
+  text-align: start;
+  pointer-events: none;
+  overflow: hidden;
+  color: var(--text-insignificant-color);
+  line-height: 1.1;
+  font-size: 90%;
 }
 
 #compose-container textarea {

src/components/compose.jsx

@@ -28,7 +28,8 @@ import supports from '../utils/supports';
 import useInterval from '../utils/useInterval';
 import visibilityIconsMap from '../utils/visibility-icons-map';
 
-import Avatar from './avatar';
+import AccountBlock from './account-block';
+// import Avatar from './avatar';
 import Icon from './icon';
 import Loader from './loader';
 import Modal from './modal';
@@ -508,11 +509,16 @@ function Compose({
       <div id="compose-container" class={standalone ? 'standalone' : ''}>
         <div class="compose-top">
           {currentAccountInfo?.avatarStatic && (
-            <Avatar
+            // <Avatar
-              url={currentAccountInfo.avatarStatic}
+            //   url={currentAccountInfo.avatarStatic}
-              size="xl"
+            //   size="xl"
-              alt={currentAccountInfo.username}
+            //   alt={currentAccountInfo.username}
-              squircle={currentAccountInfo?.bot}
+            //   squircle={currentAccountInfo?.bot}
+            // />
+            <AccountBlock
+              account={currentAccountInfo}
+              accountInstance={currentAccount.instanceURL}
+              hideDisplayName
             />
           )}
           {!standalone ? (