Handle moved account cases

src/components/account-info.css

@@ -9,6 +9,46 @@
   color: var(--outline-color);
 }
 
+.account-container .account-moved {
+  animation: fade-in 0.3s both ease-in-out 0.3s;
+  padding: 16px;
+  background-color: var(--bg-color);
+  position: absolute;
+  top: 8px;
+  inset-inline: 8px;
+  z-index: 2;
+  border: 1px solid var(--outline-color);
+  box-shadow: 0 8px 16px var(--drop-shadow-color);
+  border-radius: calc(16px - 8px);
+  overflow: hidden;
+
+  p {
+    margin: 0 0 8px;
+    padding: 0;
+  }
+
+  .account-block {
+    background-color: var(--bg-faded-color);
+    padding: 8px;
+    border-radius: 8px;
+    border: 1px solid var(--link-faded-color);
+
+    &:hover {
+      background-color: var(--link-bg-hover-color);
+      border-color: var(--link-color);
+    }
+
+    b {
+      color: var(--link-color);
+    }
+  }
+
+  ~ * {
+    /* pointer-events: none; */
+    filter: grayscale(0.75) brightness(0.75);
+  }
+}
+
 .account-container .header-banner {
   /* pointer-events: none; */
   aspect-ratio: 6 / 1;

src/components/account-info.jsx

@@ -115,6 +115,7 @@ function AccountInfo({
     url,
     username,
     memorial,
+    moved,
   } = info || {};
   let headerIsAvatar = false;
   let { header, headerStatic } = info || {};
@@ -235,6 +236,22 @@ function AccountInfo({
       ) : (
         info && (
           <>
+            {!!moved && (
+              <div class="account-moved">
+                <p>
+                  <b>{displayName}</b> has indicated that their new account is
+                  now:
+                </p>
+                <AccountBlock
+                  account={moved}
+                  instance={instance}
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    states.showAccount = moved;
+                  }}
+                />
+              </div>
+            )}
             {header && !/missing\.png$/.test(header) && (
               <img
                 src={header}
@@ -496,7 +513,8 @@ function RelatedActions({ info, instance, authenticated, standalone }) {
   const [relationship, setRelationship] = useState(null);
   const [postingStats, setPostingStats] = useState();
 
-  const { id, acct, url, username, locked, lastStatusAt, note, fields } = info;
+  const { id, acct, url, username, locked, lastStatusAt, note, fields, moved } =
+    info;
   const accountID = useRef(id);
 
   const {
@@ -553,6 +571,8 @@ function RelatedActions({ info, instance, authenticated, standalone }) {
 
         accountID.current = currentID;
 
+        if (moved) return;
+
         setRelationshipUIState('loading');
         accountInfoStates.familiarFollowers = [];
         setPostingStats(null);