[Glitch] refactor: Remove duplicated AvatarGroup CSS and familiar followers cleanup

Port ccffa11f2b to glitch-soc

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

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

@@ -1,17 +1,21 @@
 import { useState, useCallback } from 'react';
 
 import classNames from 'classnames';
+import { Link } from 'react-router-dom';
 
 import { useHovering } from 'flavours/glitch/hooks/useHovering';
 import { autoPlayGif } from 'flavours/glitch/initial_state';
 import type { Account } from 'flavours/glitch/models/account';
 
 interface Props {
-  account: Account | undefined; // FIXME: remove `undefined` once we know for sure its always there
-  size: number;
+  account:
+    | Pick<Account, 'id' | 'acct' | 'avatar' | 'avatar_static'>
+    | undefined; // FIXME: remove `undefined` once we know for sure its always there
+  size?: number;
   style?: React.CSSProperties;
   inline?: boolean;
   animate?: boolean;
+  withLink?: boolean;
   counter?: number | string;
   counterBorderColor?: string;
 }
@@ -21,6 +25,7 @@ export const Avatar: React.FC<Props> = ({
   animate = autoPlayGif,
   size = 20,
   inline = false,
+  withLink = false,
   style: styleFromParent,
   counter,
   counterBorderColor,
@@ -35,10 +40,7 @@ export const Avatar: React.FC<Props> = ({
     height: `${size}px`,
   };
 
-  const src =
-    hovering || animate
-      ? account?.get('avatar')
-      : account?.get('avatar_static');
+  const src = hovering || animate ? account?.avatar : account?.avatar_static;
 
   const handleLoad = useCallback(() => {
     setLoading(false);
@@ -48,7 +50,7 @@ export const Avatar: React.FC<Props> = ({
     setError(true);
   }, [setError]);
 
-  return (
+  const avatar = (
     <div
       className={classNames('account__avatar', {
         'account__avatar--inline': inline,
@@ -57,7 +59,7 @@ export const Avatar: React.FC<Props> = ({
       onMouseEnter={handleMouseEnter}
       onMouseLeave={handleMouseLeave}
       style={style}
-      data-avatar-of={account && `@${account.get('acct')}`}
+      data-avatar-of={account && `@${account.acct}`}
     >
       {src && !error && (
         <img src={src} alt='' onLoad={handleLoad} onError={handleError} />
@@ -73,4 +75,18 @@ export const Avatar: React.FC<Props> = ({
       )}
     </div>
   );
+
+  if (withLink) {
+    return (
+      <Link
+        to={`/@${account?.acct}`}
+        title={`@${account?.acct}`}
+        data-hover-card-account={account?.id}
+      >
+        {avatar}
+      </Link>
+    );
+  }
+
+  return avatar;
 };