feat(users): add libravatar / gravatar support (#4277)

Co-authored-by: HeapReaper <kelivn@heapreaper.nl>
Co-authored-by: Meier Lukas <meierschlumpf@gmail.com>

packages/ui/src/components/user-avatar.tsx

@@ -1,9 +1,15 @@
+"use client";
+
 import type { AvatarProps } from "@mantine/core";
 import { Avatar } from "@mantine/core";
+import { enc, MD5 } from "crypto-js";
+
+import { useSettings } from "@homarr/settings";
 
 export interface UserProps {
   name: string | null;
   image: string | null;
+  email: string | null;
 }
 
 interface UserAvatarProps {
@@ -12,10 +18,18 @@ interface UserAvatarProps {
 }
 
 export const UserAvatar = ({ user, size }: UserAvatarProps) => {
+  const { enableGravatar } = useSettings();
+
   if (!user?.name) return <Avatar size={size} />;
+
   if (user.image) {
     return <Avatar src={user.image} alt={user.name} size={size} />;
   }
 
+  if (user.email && enableGravatar) {
+    const emailHash = MD5(user.email.trim().toLowerCase()).toString(enc.Hex);
+    return <Avatar src={`https://seccdn.libravatar.org/avatar/${emailHash}?d=blank`} alt={user.name} size={size} />;
+  }
+
   return <Avatar name={user.name} color="initials" size={size}></Avatar>;
 };