Extend Account component

app/soapbox/components/account.tsx

@@ -9,7 +9,7 @@ import { getAcct } from 'soapbox/utils/accounts';
 import { displayFqn } from 'soapbox/utils/state';
 
 import RelativeTimestamp from './relative_timestamp';
-import { Avatar, Emoji, HStack, Icon, IconButton, Text } from './ui';
+import { Avatar, Emoji, HStack, Icon, IconButton, Stack, Text } from './ui';
 
 import type { Account as AccountEntity } from 'soapbox/types/entities';
 
@@ -57,7 +57,9 @@ interface IAccount {
   timestamp?: string | Date,
   timestampUrl?: string,
   futureTimestamp?: boolean,
+  withAccountNote?: boolean,
   withDate?: boolean,
+  withLinkToProfile?: boolean,
   withRelationship?: boolean,
   showEdit?: boolean,
   emoji?: string,
@@ -78,7 +80,9 @@ const Account = ({
   timestamp,
   timestampUrl,
   futureTimestamp = false,
+  withAccountNote = false,
   withDate = false,
+  withLinkToProfile = true,
   withRelationship = true,
   showEdit = false,
   emoji,
@@ -154,12 +158,12 @@ const Account = ({
 
   if (withDate) timestamp = account.created_at;
 
-  const LinkEl: any = showProfileHoverCard ? Link : 'div';
+  const LinkEl: any = withLinkToProfile ? Link : 'div';
 
   return (
     <div data-testid='account' className='flex-shrink-0 group block w-full' ref={overflowRef}>
       <HStack alignItems={actionAlignment} justifyContent='between'>
-        <HStack alignItems='center' space={3}>
+        <HStack alignItems={withAccountNote ? 'top' : 'center'} space={3}>
           <ProfilePopper
             condition={showProfileHoverCard}
             wrapper={(children) => <HoverRefWrapper className='relative' accountId={account.id} inline>{children}</HoverRefWrapper>}
@@ -202,6 +206,7 @@ const Account = ({
               </LinkEl>
             </ProfilePopper>
 
+            <Stack space={withAccountNote ? 1 : 0}>
               <HStack alignItems='center' space={1} style={style}>
                 <Text theme='muted' size='sm' truncate>@{username}</Text>
 
@@ -231,6 +236,15 @@ const Account = ({
                   </>
                 ) : null}
               </HStack>
+
+              {withAccountNote && (
+                <Text
+                  size='sm'
+                  dangerouslySetInnerHTML={{ __html: account.note_emojified }}
+                  className='mr-2'
+                />
+              )}
+            </Stack>
           </div>
         </HStack>
 

app/soapbox/components/quoted-status.tsx

@@ -137,6 +137,7 @@ const QuotedStatus: React.FC<IQuotedStatus> = ({ status, onCancel, compose }) =>
         timestamp={status.created_at}
         withRelationship={false}
         showProfileHoverCard={!compose}
+        withLinkToProfile={false}
       />
 
       {renderReplyMentions()}

app/soapbox/components/scroll-top-button.tsx

@@ -34,6 +34,12 @@ const ScrollTopButton: React.FC<IScrollTopButton> = ({
   const [scrolled, setScrolled] = useState<boolean>(false);
   const autoload = settings.get('autoloadTimelines') === true;
 
+  const visible = count > 0 && scrolled;
+
+  const classes = classNames('left-1/2 -translate-x-1/2 fixed top-20 z-50', {
+    'hidden': !visible,
+  });
+
   const getScrollTop = (): number => {
     return (document.scrollingElement || document.documentElement).scrollTop;
   };
@@ -75,12 +81,6 @@ const ScrollTopButton: React.FC<IScrollTopButton> = ({
     maybeUnload();
   }, [count]);
 
-  const visible = count > 0 && scrolled;
-
-  const classes = classNames('left-1/2 -translate-x-1/2 fixed top-20 z-50', {
-    'hidden': !visible,
-  });
-
   return (
     <div className={classes}>
       <a className='flex items-center bg-primary-600 hover:bg-primary-700 hover:scale-105 active:scale-100 transition-transform text-white rounded-full px-4 py-2 space-x-1.5 cursor-pointer whitespace-nowrap' onClick={handleClick}>

app/soapbox/components/sidebar_menu.tsx

@@ -121,7 +121,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
   const renderAccount = (account: AccountEntity) => (
     <a href='#' className='block py-2' onClick={handleSwitchAccount(account)} key={account.id}>
       <div className='pointer-events-none'>
-        <Account account={account} showProfileHoverCard={false} withRelationship={false} />
+        <Account account={account} showProfileHoverCard={false} withRelationship={false} withLinkToProfile={false} />
       </div>
     </a>
   );
@@ -166,7 +166,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
 
               <Stack space={1}>
                 <Link to={`/@${account.acct}`} onClick={onClose}>
-                  <Account account={account} showProfileHoverCard={false} />
+                  <Account account={account} showProfileHoverCard={false} withLinkToProfile={false} />
                 </Link>
 
                 <Stack>

app/soapbox/components/status.tsx

@@ -134,11 +134,11 @@ class Status extends ImmutablePureComponent<IStatus, IStatusState> {
     this.didShowCard = Boolean(!this.props.muted && !this.props.hidden && this.props.status && this.props.status.card);
   }
 
-  getSnapshotBeforeUpdate(): ScrollPosition | undefined {
+  getSnapshotBeforeUpdate(): ScrollPosition | null {
     if (this.props.getScrollPosition) {
-      return this.props.getScrollPosition();
+      return this.props.getScrollPosition() || null;
     } else {
-      return undefined;
+      return null;
     }
   }
 
@@ -483,6 +483,7 @@ class Status extends ImmutablePureComponent<IStatus, IStatusState> {
                 hideActions={!reblogElement}
                 showEdit={!!status.edited_at}
                 showProfileHoverCard={this.props.hoverable}
+                withLinkToProfile={this.props.hoverable}
               />
             </div>
 

app/soapbox/components/ui/stack/stack.tsx

@@ -1,7 +1,7 @@
 import classNames from 'classnames';
 import React from 'react';
 
-type SIZES = 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 10
+type SIZES = 0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 10
 
 const spaces = {
   '0.5': 'space-y-0.5',

app/soapbox/features/compose/components/reply_indicator.tsx

@@ -39,6 +39,7 @@ const ReplyIndicator: React.FC<IReplyIndicator> = ({ status, hideActions, onCanc
         id={status.getIn(['account', 'id']) as string}
         timestamp={status.created_at}
         showProfileHoverCard={false}
+        withLinkToProfile={false}
       />
 
       <Text

app/soapbox/features/onboarding/steps/suggested-accounts-step.tsx

@@ -45,6 +45,7 @@ const SuggestedAccountsStep = ({ onNext }: { onNext: () => void }) => {
                 // @ts-ignore: TS thinks `id` is passed to <Account>, but it isn't
                 id={suggestion.account}
                 showProfileHoverCard={false}
+                withLinkToProfile={false}
               />
             </div>
           ))}

app/soapbox/features/ui/components/actions_modal.tsx

@@ -60,6 +60,7 @@ const ActionsModal: React.FC<IActionsModal> = ({ status, actions, onClick, onClo
                 key={status.account as string}
                 id={status.account as string}
                 showProfileHoverCard={false}
+                withLinkToProfile={false}
                 timestamp={status.created_at}
               />
               <StatusContent status={status} />

app/soapbox/features/ui/components/modals/report-modal/report-modal.tsx

@@ -49,6 +49,7 @@ const SelectedStatus = ({ statusId }: { statusId: string }) => {
       <AccountContainer
         id={status.account as any}
         showProfileHoverCard={false}
+        withLinkToProfile={false}
         timestamp={status.created_at}
         hideActions
       />

app/soapbox/features/ui/components/profile-dropdown.tsx

@@ -58,7 +58,7 @@ const ProfileDropdown: React.FC<IProfileDropdown> = ({ account, children }) => {
 
   const renderAccount = (account: AccountEntity) => {
     return (
-      <Account account={account} showProfileHoverCard={false} hideActions />
+      <Account account={account} showProfileHoverCard={false} withLinkToProfile={false} hideActions />
     );
   };