Pinafore-Web-Client-Frontend/src/routes/_components/profile/AccountProfileMovedBanner.html

<div class="account-profile-moved-banner">
  <Avatar className="from-avatar" size="extra-small" {account} />
  <div class="moved-label">
    <SvgIcon className="moved-svg" href="#fa-suitcase" />
    {hasMovedLabel}
  </div>
  <a class="moved-avatar" href="/accounts/{moved.id}">
    <Avatar account={moved} />
  </a>
  <a class="moved-to-name" href="/accounts/{moved.id}" title="@{moved.acct}">{movedAccessibleName}</a>
  <a class="moved-to-acct" href="/accounts/{moved.id}">@{moved.acct}</a>
</div>
<style>
  .account-profile-moved-banner {
    display: grid;
    grid-template-areas: "from-avatar label"
                         "avatar name"
                         "avatar acct";
    grid-template-columns: max-content 1fr;
    margin: 10px 20px;
    grid-row-gap: 10px;
    grid-column-gap: 20px;
  }
  :global(.from-avatar) {
    grid-area: from-avatar;
    justify-self: flex-end;
  }
  :global(.moved-svg) {
    width: 18px;
    height: 18px;
    fill: var(--deemphasized-text-color);
    margin-right: 5px;
  }
  .moved-label, .moved-to-acct, .moved-to-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .moved-avatar {
    grid-area: avatar;
  }
  .moved-label {
    grid-area: label;
  }
  .moved-to-acct {
    grid-area: acct;
    font-size: 1.2em;
  }
  .moved-to-name {
    grid-area: name;
    font-weight: 600;
    font-size: 1.1em;
    text-decoration: none;
    color: var(--body-text-color);
  }
  .moved-to-name:hover {
    text-decoration: underline;
  }


</style>
<script>
  import { removeEmoji } from '../../_utils/removeEmoji.js'
  import Avatar from '../Avatar.html'
  import SvgIcon from '../SvgIcon.html'
  import { formatIntl } from '../../_utils/formatIntl.js'

  export default {
    computed: {
      emojis: ({ account }) => (account.emojis || []),
      displayName: ({ account }) => account.display_name || account.username,
      accessibleName: ({ displayName, emojis, $omitEmojiInDisplayNames }) => {
        return $omitEmojiInDisplayNames
          ? removeEmoji(displayName, emojis) || displayName
          : displayName
      },
      moved: ({ account }) => account.moved,
      movedEmojis: ({ moved }) => (moved.emojis || []),
      movedDisplayName: ({ moved }) => moved.display_name || moved.username,
      movedAccessibleName: ({ movedDisplayName, movedEmojis, $omitEmojiInDisplayNames }) => {
        return $omitEmojiInDisplayNames
          ? removeEmoji(movedDisplayName, movedEmojis) || movedDisplayName
          : movedDisplayName
      },
      hasMovedLabel: ({ accessibleName }) => (
        formatIntl('intl.accountHasMoved', { account: accessibleName })
      )
    },
    components: {
      Avatar,
      SvgIcon
    }
  }
</script>