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

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

packages/ui/package.json

@@ -27,12 +27,14 @@
   "dependencies": {
     "@homarr/common": "workspace:^0.1.0",
     "@homarr/definitions": "workspace:^0.1.0",
+    "@homarr/settings": "workspace:^0.1.0",
     "@homarr/translation": "workspace:^0.1.0",
     "@homarr/validation": "workspace:^0.1.0",
     "@mantine/core": "^8.3.10",
     "@mantine/dates": "^8.3.10",
     "@mantine/hooks": "^8.3.10",
     "@tabler/icons-react": "^3.36.1",
+    "crypto-js": "^4.2.0",
     "mantine-react-table": "2.0.0-beta.9",
     "next": "16.1.1",
     "react": "19.2.3",
@@ -43,6 +45,7 @@
     "@homarr/eslint-config": "workspace:^0.2.0",
     "@homarr/prettier-config": "workspace:^0.1.0",
     "@homarr/tsconfig": "workspace:^0.1.0",
+    "@types/crypto-js": "^4.2.2",
     "@types/css-modules": "^1.0.5",
     "eslint": "^9.39.2",
     "typescript": "^5.9.3"

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>;
 };