This account resolving thingie is getting ridiculous

src/components/account.jsx

@@ -3,6 +3,7 @@ import './account.css';
 import { useEffect, useState } from 'preact/hooks';
 
 import enhanceContent from '../utils/enhance-content';
+import handleAccountLinks from '../utils/handle-account-links';
 import shortenNumber from '../utils/shorten-number';
 import store from '../utils/store';
 
@@ -27,12 +28,29 @@ function Account({ account }) {
           setInfo(info);
           setUIState('default');
         } catch (e) {
-          alert(e);
+          try {
+            const result = await masto.v2.search({
+              q: account,
+              type: 'accounts',
+              limit: 1,
+              resolve: true,
+            });
+            if (result.accounts.length) {
+              setInfo(result.accounts[0]);
+              setUIState('default');
+              return;
+            }
+            alert('Account not found');
             setUIState('error');
+          } catch (err) {
+            alert(err);
+            console.error(err);
+            setUIState('error');
+          }
         }
       })();
     }
-  }, []);
+  }, [account]);
 
   const {
     acct,
@@ -138,6 +156,7 @@ function Account({ account }) {
             )}
             <div
               class="note"
+              onClick={handleAccountLinks()}
               dangerouslySetInnerHTML={{
                 __html: enhanceContent(note, { emojis }),
               }}

src/components/status.jsx

@@ -20,6 +20,7 @@ import Loader from '../components/loader';
 import Modal from '../components/modal';
 import NameText from '../components/name-text';
 import enhanceContent from '../utils/enhance-content';
+import handleAccountLinks from '../utils/handle-account-links';
 import htmlContentLength from '../utils/html-content-length';
 import shortenNumber from '../utils/shorten-number';
 import states, { saveStatus } from '../utils/states';
@@ -343,39 +344,7 @@ function Status({
             lang={language}
             ref={contentRef}
             data-read-more={readMoreText}
-            onClick={(e) => {
+            onClick={handleAccountLinks({ mentions })}
-              let { target } = e;
-              if (target.parentNode.tagName.toLowerCase() === 'a') {
-                target = target.parentNode;
-              }
-              if (
-                target.tagName.toLowerCase() === 'a' &&
-                target.classList.contains('u-url')
-              ) {
-                const targetText = (
-                  target.querySelector('span') || target
-                ).innerText.trim();
-                const username = targetText.replace(/^@/, '');
-                const url = target.getAttribute('href');
-                const mention = mentions.find(
-                  (mention) =>
-                    mention.username === username ||
-                    mention.acct === username ||
-                    mention.url === url,
-                );
-                if (mention) {
-                  e.preventDefault();
-                  e.stopPropagation();
-                  states.showAccount = mention.acct;
-                } else if (!/^http/i.test(targetText)) {
-                  console.log('mention not found', targetText);
-                  e.preventDefault();
-                  e.stopPropagation();
-                  const href = target.getAttribute('href');
-                  states.showAccount = href;
-                }
-              }
-            }}
             dangerouslySetInnerHTML={{
               __html: enhanceContent(content, {
                 emojis,

src/utils/handle-account-links.js

@@ -0,0 +1,40 @@
+import states from './states';
+
+function handleAccountLinks(opts) {
+  const { mentions = [] } = opts || {};
+  return (e) => {
+    let { target } = e;
+    if (target.parentNode.tagName.toLowerCase() === 'a') {
+      target = target.parentNode;
+    }
+    if (
+      target.tagName.toLowerCase() === 'a' &&
+      target.classList.contains('u-url')
+    ) {
+      const targetText = (
+        target.querySelector('span') || target
+      ).innerText.trim();
+      const username = targetText.replace(/^@/, '');
+      const url = target.getAttribute('href');
+      const mention = mentions.find(
+        (mention) =>
+          mention.username === username ||
+          mention.acct === username ||
+          mention.url === url,
+      );
+      if (mention) {
+        e.preventDefault();
+        e.stopPropagation();
+        states.showAccount = mention.acct;
+      } else if (!/^http/i.test(targetText)) {
+        console.log('mention not found', targetText);
+        e.preventDefault();
+        e.stopPropagation();
+        const href = target.getAttribute('href');
+        states.showAccount = href;
+      }
+    }
+  };
+}
+
+export default handleAccountLinks;