✨ Use gravatar with user email (#1688)

* ✨ Use gravatar with user email

src/components/layout/header/AvatarMenu.tsx

@@ -8,6 +8,7 @@ import {
   IconSun,
   IconUserCog,
 } from '@tabler/icons-react';
+import { createHash } from 'crypto';
 import { User } from 'next-auth';
 import { signOut, useSession } from 'next-auth/react';
 import { useTranslation } from 'next-i18next';
@@ -26,7 +27,6 @@ export const AvatarMenu = () => {
   const defaultBoardHref = useBoardLink('/board');
 
   return (
-    <>
     <UnstyledButton>
       <Menu width={256}>
         <Menu.Target>
@@ -85,7 +85,6 @@ export const AvatarMenu = () => {
         </Menu.Dropdown>
       </Menu>
     </UnstyledButton>
-    </>
   );
 };
 
@@ -93,12 +92,29 @@ type CurrentUserAvatarProps = {
   user: User | null;
 };
 
+const getGravatar = (email?: string | undefined | null) => {
+  if (!email) return null;
+  const emailHash = createHash('sha256').update(email.trim().toLowerCase()).digest('hex');
+  return `https://gravatar.com/avatar/${emailHash}?d=null`;
+};
+
 const CurrentUserAvatar = forwardRef<HTMLDivElement, CurrentUserAvatarProps>(
   ({ user, ...others }, ref) => {
     const { primaryColor } = useMantineTheme();
-    if (!user) return <Avatar ref={ref} {...others} />;
+    const { fn } = useMantineTheme();
+    const border = fn.variant({ variant: 'default' }).border;
+
+    if (!user)
+      return <Avatar ref={ref} styles={{ root: { border: `1px solid ${border}` } }} {...others} />;
+
     return (
-      <Avatar ref={ref} color={primaryColor} {...others}>
+      <Avatar
+        ref={ref}
+        color={primaryColor}
+        src={getGravatar(user.email)}
+        styles={{ root: { border: `1px solid ${border}` } }}
+        {...others}
+      >
         {user.name?.slice(0, 2).toUpperCase()}
       </Avatar>
     );