1  import './name-text.css';
  2  
  3  import { memo } from 'preact/compat';
  4  
  5  import states from '../utils/states';
  6  
  7  import Avatar from './avatar';
  8  import EmojiText from './emoji-text';
  9  
 10  function NameText({
 11    account,
 12    instance,
 13    showAvatar,
 14    showAcct,
 15    short,
 16    external,
 17    onClick,
 18  }) {
 19    const { acct, avatar, avatarStatic, id, url, displayName, emojis, bot } =
 20      account;
 21    let { username } = account;
 22    const [_, acct1, acct2] = acct.match(/([^@]+)(@.+)/i) || [, acct];
 23  
 24    const trimmedUsername = username.toLowerCase().trim();
 25    if ((acct.indexOf('mostr.pub') >= -1) && displayName) {
 26      username = `${displayName}`;
 27    }
 28    const trimmedDisplayName = (displayName || '').toLowerCase().trim();
 29    const shortenedDisplayName = trimmedDisplayName
 30      .replace(/(\:(\w|\+|\-)+\:)(?=|[\!\.\?]|$)/g, '') // Remove shortcodes, regex from https://regex101.com/r/iE9uV0/1
 31      .replace(/\s+/g, ''); // E.g. "My name" === "myname"
 32    const shortenedAlphaNumericDisplayName = shortenedDisplayName.replace(
 33      /[^a-z0-9]/gi,
 34      '',
 35    ); // Remove non-alphanumeric characters
 36  
 37    if (
 38      !short &&
 39      (trimmedUsername === trimmedDisplayName ||
 40        trimmedUsername === shortenedDisplayName ||
 41        trimmedUsername === shortenedAlphaNumericDisplayName ||
 42        trimmedUsername.localeCompare?.(shortenedDisplayName, 'en', {
 43          sensitivity: 'base',
 44        }) === 0)
 45    ) {
 46      username = null;
 47    }
 48  
 49    return (
 50      <a
 51        class={`name-text ${showAcct ? 'show-acct' : ''} ${short ? 'short' : ''}`}
 52        href={url}
 53        target={external ? '_blank' : null}
 54        title={`${displayName ? `${displayName} ` : ''}@${acct}`}
 55        onClick={(e) => {
 56          if (external) return;
 57          e.preventDefault();
 58          e.stopPropagation();
 59          if (onClick) return onClick(e);
 60          states.showAccount = {
 61            account,
 62            instance,
 63          };
 64        }}
 65      >
 66        {showAvatar && (
 67          <>
 68            <Avatar url={avatarStatic || avatar} squircle={bot} />{' '}
 69          </>
 70        )}
 71        {displayName && !short ? (
 72          <>
 73            <b>
 74              <EmojiText text={displayName} emojis={emojis} />
 75            </b>
 76            {!showAcct && username && (
 77              <>
 78                {' '}
 79                <i>@{username}</i>
 80              </>
 81            )}
 82          </>
 83        ) : short ? (
 84          <i>{username}</i>
 85        ) : (
 86          <b>{username}</b>
 87        )}
 88        {showAcct && (
 89          <>
 90            <br />
 91            <i>
 92              @
 93              <span class="ib">{acct.split('@skybridge.fly.dev')[0]}</span>
 94            </i>
 95          </>
 96        )}
 97      </a>
 98    );
 99  }
100  
101  export default memo(NameText);