Show roles in account info

src/components/account-info.jsx

@@ -121,6 +121,7 @@ function AccountInfo({
     username,
     memorial,
     moved,
+    roles,
   } = info || {};
   let headerIsAvatar = false;
   let { header, headerStatic } = info || {};
@@ -134,6 +135,12 @@ function AccountInfo({
     }
   }
 
+  const accountInstance = useMemo(() => {
+    if (!url) return null;
+    const domain = new URL(url).hostname;
+    return domain;
+  }, [url]);
+
   const [headerCornerColors, setHeaderCornerColors] = useState([]);
 
   const followersIterator = useRef();
@@ -381,6 +388,17 @@ function AccountInfo({
                   <Icon icon="group" /> Group
                 </span>
               )}
+              {roles?.map((role) => (
+                <span class="tag">
+                  {role.name}
+                  {!!accountInstance && (
+                    <>
+                      {' '}
+                      <span class="more-insignificant">{accountInstance}</span>
+                    </>
+                  )}
+                </span>
+              ))}
               <div
                 class="note"
                 onClick={handleContentLinks({