[Glitch] Emoji: Account page

Port 6abda76d13 to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>

app/javascript/flavours/glitch/components/verified_badge.tsx

@@ -1,10 +1,17 @@
+import { EmojiHTML } from '@/flavours/glitch/components/emoji/html';
 import CheckIcon from '@/material-icons/400-24px/check.svg?react';
 
+import { isModernEmojiEnabled } from '../utils/environment';
+import type { OnAttributeHandler } from '../utils/html';
+
 import { Icon } from './icon';
 
 const domParser = new DOMParser();
 
 const stripRelMe = (html: string) => {
+  if (isModernEmojiEnabled()) {
+    return html;
+  }
   const document = domParser.parseFromString(html, 'text/html').documentElement;
 
   document.querySelectorAll<HTMLAnchorElement>('a[rel]').forEach((link) => {
@@ -15,7 +22,23 @@ const stripRelMe = (html: string) => {
   });
 
   const body = document.querySelector('body');
-  return body ? { __html: body.innerHTML } : undefined;
+  return body?.innerHTML ?? '';
+};
+
+const onAttribute: OnAttributeHandler = (name, value, tagName) => {
+  if (name === 'rel' && tagName === 'a') {
+    if (value === 'me') {
+      return null;
+    }
+    return [
+      name,
+      value
+        .split(' ')
+        .filter((x) => x !== 'me')
+        .join(' '),
+    ];
+  }
+  return undefined;
 };
 
 interface Props {
@@ -24,6 +47,10 @@ interface Props {
 export const VerifiedBadge: React.FC<Props> = ({ link }) => (
   <span className='verified-badge'>
     <Icon id='check' icon={CheckIcon} className='verified-badge__mark' />
-    <span dangerouslySetInnerHTML={stripRelMe(link)} />
+    <EmojiHTML
+      as='span'
+      htmlString={stripRelMe(link)}
+      onAttribute={onAttribute}
+    />
   </span>
 );