From b9eb6d8d85b954f10bafbcfbc76730e4efa2d342 Mon Sep 17 00:00:00 2001
From: darthmaim <git@darthmaim.de>
Date: Thu, 9 Jan 2025 14:43:19 +0100
Subject: [PATCH] Add experimental gravatar image in admin user list

Just to see how many people are still using this, and if it makes sense to use gravatars when one day maybe implementing profile pictures...
---
 apps/web/app/admin/users/page.tsx     |  3 ++-
 apps/web/components/User/Gravatar.tsx | 19 +++++++++++++++++++
 2 files changed, 21 insertions(+), 1 deletion(-)
 create mode 100644 apps/web/components/User/Gravatar.tsx

diff --git a/apps/web/app/admin/users/page.tsx b/apps/web/app/admin/users/page.tsx
index 4f1ad66f..c10dc535 100644
--- a/apps/web/app/admin/users/page.tsx
+++ b/apps/web/app/admin/users/page.tsx
@@ -11,6 +11,7 @@ import { ensureUserIsAdmin } from '../admin';
 import { Tip } from '@gw2treasures/ui/components/Tip/Tip';
 import { ProviderIcon } from '@/components/Provider/Provider';
 import { FlexRow } from '@gw2treasures/ui/components/Layout/FlexRow';
+import { Gravatar } from '@/components/User/Gravatar';
 
 function getUsers() {
   return db.user.findMany({
@@ -35,7 +36,7 @@ export default async function AdminUserPage() {
 
       <Users.Table>
         <Users.Column id="id" title="Id" hidden>{({ id }) => <Code inline borderless>{id}</Code>}</Users.Column>
-        <Users.Column id="name" title="Username" sortBy="name">{({ name }) => name}</Users.Column>
+        <Users.Column id="name" title="Username" sortBy="name">{({ name, defaultEmail }) => <FlexRow><Gravatar email={defaultEmail?.email}/>{name}</FlexRow>}</Users.Column>
         <Users.Column id="providers" title="Providers" sortBy="name">
           {({ providers }) => (
             <FlexRow wrap>
diff --git a/apps/web/components/User/Gravatar.tsx b/apps/web/components/User/Gravatar.tsx
new file mode 100644
index 00000000..c69af254
--- /dev/null
+++ b/apps/web/components/User/Gravatar.tsx
@@ -0,0 +1,19 @@
+/* eslint-disable @next/next/no-img-element */
+import { createHash } from 'node:crypto';
+import { FC } from 'react';
+
+interface GravatarProps {
+  email?: string
+}
+
+export const Gravatar: FC<GravatarProps> = ({ email }) => {
+  if(!email) {
+    return null;
+  }
+
+  const hash = createHash('sha256').update(email.trim().toLocaleLowerCase()).digest('hex');
+
+  return (
+    <img src={`https://gravatar.com/avatar/${hash}?s=48`} alt="" width={24} height={24} style={{ borderRadius: 2 }}/>
+  );
+};