feat: 👤 Implement gravatar (#1268)

* ✨ Implement gravatar

* ♻️  refact gravatar url generation with a custom hook

* review: do not add a default value to the email if undefined

frontend/app/chat/components/ChatsList/components/ChatsListItem/components/UserButton.tsx

@@ -1,16 +1,25 @@
+import Image from "next/image";
 import Link from "next/link";
-import { MdPerson } from "react-icons/md";
 
 import { useSupabase } from "@/lib/context/SupabaseProvider";
 
+import { useGravatar } from "../hooks/useGravatar";
 import { sidebarLinkStyle } from "../styles/SidebarLinkStyle";
 
 export const UserButton = (): JSX.Element => {
   const { session } = useSupabase();
+  const { gravatarUrl } = useGravatar();
 
   return (
     <Link aria-label="account" className={sidebarLinkStyle} href={"/user"}>
-      <MdPerson className="text-4xl" />
+      <div className="relative w-8 h-8">
+        <Image
+          alt="gravatar"
+          layout="fill"
+          src={gravatarUrl}
+          className="rounded-xl"
+        />
+      </div>
       <span className="text-ellipsis overflow-hidden">
         {session?.user.email ?? ""}
       </span>

frontend/app/chat/components/ChatsList/components/ChatsListItem/hooks/useGravatar.ts

@@ -0,0 +1,30 @@
+import { createHash } from "crypto";
+import { useEffect, useState } from "react";
+
+import { useSupabase } from "@/lib/context/SupabaseProvider";
+
+// Gravatar images may be requested just like a normal image, using an IMG tag. To get an image specific to a user, you must first calculate their email hash.
+// The most basic image request URL looks like this:
+// https://www.gravatar.com/avatar/HASH
+
+const computeGravatarUrl = (email?: string) => {
+  const hash = createHash("md5")
+    .update(typeof email === "string" ? email.trim().toLowerCase() : "")
+    .digest("hex");
+
+  return `https://www.gravatar.com/avatar/${hash}?d=mp`;
+};
+
+export const useGravatar = (): { gravatarUrl: string } => {
+  const { session } = useSupabase();
+  const [gravatarUrl, setGravatarUrl] = useState<string>(computeGravatarUrl());
+
+  const email = session?.user.email;
+
+  useEffect(() => {
+    const computedUrl = computeGravatarUrl(email);
+    setGravatarUrl(computedUrl);
+  }, [email]);
+
+  return { gravatarUrl };
+};

frontend/next.config.js

@@ -1,6 +1,10 @@
 const nextConfig = {
   images: {
-    domains: ["www.quivr.app", "quivr-cms.s3.eu-west-3.amazonaws.com"]
+    domains: [
+      "www.quivr.app",
+      "quivr-cms.s3.eu-west-3.amazonaws.com",
+      "www.gravatar.com",
+    ],
   },
   // eslint-disable-next-line prefer-arrow/prefer-arrow-functions
   async headers() {