feat: add "accout has moved" banner (#1032)

fixes #472

bin/svgs.js

@@ -45,5 +45,6 @@ module.exports = [
   { id: 'fa-search-minus', src: 'src/thirdparty/font-awesome-svg-png/white/svg/search-minus.svg' },
   { id: 'fa-search-plus', src: 'src/thirdparty/font-awesome-svg-png/white/svg/search-plus.svg' },
   { id: 'fa-share-square-o', src: 'src/thirdparty/font-awesome-svg-png/white/svg/share-square-o.svg' },
-  { id: 'fa-flag', src: 'src/thirdparty/font-awesome-svg-png/white/svg/flag.svg' }
+  { id: 'fa-flag', src: 'src/thirdparty/font-awesome-svg-png/white/svg/flag.svg' },
+  { id: 'fa-suitcase', src: 'src/thirdparty/font-awesome-svg-png/white/svg/suitcase.svg' }
 ]

src/routes/_components/Avatar.html

@@ -52,7 +52,8 @@
       className: void 0,
       loaded: false,
       error: void 0,
-      isLink: false
+      isLink: false,
+      size: 'medium'
     }),
     store: () => store,
     computed: {

src/routes/_components/profile/AccountProfile.html

@@ -1,4 +1,7 @@
 <h1 class="sr-only">Profile for {accountName}</h1>
+{#if moved}
+  <AccountProfileMovedBanner {account} />
+{/if}
 <div class={className}
      style="background-image: url({headerImage});">
   <div class="account-profile-grid-wrapper">
@@ -19,6 +22,10 @@
     padding-top: 175px;
   }
 
+  .account-profile.moved {
+    filter: grayscale(0.8);
+  }
+
   .account-profile.header-image-is-missing {
     padding-top: 0;
     background-color: #ccc;
@@ -74,6 +81,7 @@
   import AccountProfileNote from './AccountProfileNote.html'
   import AccountProfileMeta from './AccountProfileMeta.html'
   import AccountProfileDetails from './AccountProfileDetails.html'
+  import AccountProfileMovedBanner from './AccountProfileMovedBanner.html'
   import { store } from '../../_store/store'
   import { classname } from '../../_utils/classname'
 
@@ -83,8 +91,10 @@
       headerImageIsMissing: ({ account }) => account.header.endsWith('missing.png'),
       headerImage: ({ $autoplayGifs, account }) => $autoplayGifs ? account.header : account.header_static,
       accountName: ({ account }) => (account && (account.display_name || account.username)) || '',
-      className: ({ headerImageIsMissing, $underlineLinks }) => (classname(
+      moved: ({ account }) => account.moved,
+      className: ({ headerImageIsMissing, $underlineLinks, moved }) => (classname(
         'account-profile',
+        moved && 'moved',
         headerImageIsMissing && 'header-image-is-missing',
         $underlineLinks && 'underline-links'
       ))
@@ -94,7 +104,8 @@
       AccountProfileFollow,
       AccountProfileNote,
       AccountProfileMeta,
-      AccountProfileDetails
+      AccountProfileDetails,
+      AccountProfileMovedBanner
     }
   }
 </script>

src/routes/_components/profile/AccountProfileHeader.html

@@ -111,10 +111,9 @@
       emojis: ({ account }) => (account.emojis || []),
       displayName: ({ account }) => account.display_name || account.username,
       accessibleName: ({ displayName, emojis, $omitEmojiInDisplayNames }) => {
-        if ($omitEmojiInDisplayNames) {
-          return removeEmoji(displayName, emojis) || displayName
-        }
-        return displayName
+        return $omitEmojiInDisplayNames
+          ? removeEmoji(displayName, emojis) || displayName
+          : displayName
       },
       bot: ({ account }) => !!account.bot,
       label: ({ bot }) => bot ? 'bot' : ''

src/routes/_components/profile/AccountProfileMovedBanner.html

@@ -0,0 +1,90 @@
+<div class="account-profile-moved-banner">
+  <Avatar className="from-avatar" size="extra-small" {account} />
+  <div class="moved-label">
+    <svg class="moved-svg">
+      <use xlink:href="#fa-suitcase"/>
+    </svg>
+    {accessibleName} has moved:
+  </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;
+  }
+  .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'
+  import Avatar from '../Avatar.html'
+
+  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
+      }
+    },
+    components: {
+      Avatar
+    }
+  }
+</script>