[Glitch] Update Avatar, AvatarComposite, and AvatarOverlay components (#2508)

Various ports including 8dfe5179ee,
d1de7fb7fa and
9f8d34620b.

Co-authored-by: Eugen Rochko <eugen@zeonfederated.com>
Co-authored-by: fusagiko / takayamaki <24884114+takayamaki@users.noreply.github.com>

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

@@ -0,0 +1,56 @@
+import { useHovering } from '../hooks/useHovering';
+import { autoPlayGif } from '../initial_state';
+import type { Account } from '../types/resources';
+
+interface Props {
+  account: Account | undefined; // FIXME: remove `undefined` once we know for sure its always there
+  friend: Account | undefined; // FIXME: remove `undefined` once we know for sure its always there
+  size?: number;
+  baseSize?: number;
+  overlaySize?: number;
+}
+
+export const AvatarOverlay: React.FC<Props> = ({
+  account,
+  friend,
+  size = 46,
+  baseSize = 36,
+  overlaySize = 24,
+}) => {
+  const { hovering, handleMouseEnter, handleMouseLeave } =
+    useHovering(autoPlayGif);
+  const accountSrc = hovering
+    ? account?.get('avatar')
+    : account?.get('avatar_static');
+  const friendSrc = hovering
+    ? friend?.get('avatar')
+    : friend?.get('avatar_static');
+
+  return (
+    <div
+      className='account__avatar-overlay'
+      style={{ width: size, height: size }}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+    >
+      <div className='account__avatar-overlay-base'>
+        <div
+          className='account__avatar'
+          style={{ width: `${baseSize}px`, height: `${baseSize}px` }}
+          data-avatar-of={`@${account?.get('acct')}`}
+        >
+          {accountSrc && <img src={accountSrc} alt={account?.get('acct')} />}
+        </div>
+      </div>
+      <div className='account__avatar-overlay-overlay'>
+        <div
+          className='account__avatar'
+          style={{ width: `${overlaySize}px`, height: `${overlaySize}px` }}
+          data-avatar-of={`@${friend?.get('acct')}`}
+        >
+          {friendSrc && <img src={friendSrc} alt={friend?.get('acct')} />}
+        </div>
+      </div>
+    </div>
+  );
+};