♻️(frontend) add user avatar to thread comments

We extracted the UserAvatar component from the
doc-share feature and integrated it into
the users feature. It will be used in the
thread comments feature as well.

Author: AntoLC

src/frontend/apps/impress/src/features/auth/components/AvatarSvg.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+
+interface AvatarSvgProps {
+  initials: string;
+  background: string;
+}
+
+export const AvatarSvg: React.FC<AvatarSvgProps> = ({
+  initials,
+  background,
+}) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+  >
+    <rect
+      x="0.5"
+      y="0.5"
+      width="23"
+      height="23"
+      rx="11.5"
+      ry="11.5"
+      fill={background}
+      stroke="rgba(255,255,255,0.5)"
+      strokeWidth="1"
+    />
+    <text
+      x="50%"
+      y="50%"
+      dy="0.35em"
+      textAnchor="middle"
+      fontFamily="Arial, Helvetica, sans-serif"
+      fontSize="10"
+      fontWeight="600"
+      fill="rgba(255,255,255,0.9)"
+    >
+      {initials}
+    </text>
+  </svg>
+);

src/frontend/apps/impress/src/features/auth/components/UserAvatar.tsx

@@ -0,0 +1,71 @@
+import { renderToStaticMarkup } from 'react-dom/server';
+
+import { Box } from '@/components';
+import { tokens } from '@/cunningham';
+
+import { AvatarSvg } from './AvatarSvg';
+
+const colors = tokens.themes.default.theme.colors;
+
+const avatarsColors = [
+  colors['blue-500'],
+  colors['brown-500'],
+  colors['cyan-500'],
+  colors['gold-500'],
+  colors['green-500'],
+  colors['olive-500'],
+  colors['orange-500'],
+  colors['pink-500'],
+  colors['purple-500'],
+  colors['yellow-500'],
+];
+
+const getColorFromName = (name: string) => {
+  let hash = 0;
+  for (let i = 0; i < name.length; i++) {
+    hash = name.charCodeAt(i) + ((hash << 5) - hash);
+  }
+  return avatarsColors[Math.abs(hash) % avatarsColors.length];
+};
+
+const getInitialFromName = (name: string) => {
+  const splitName = name?.split(' ');
+  return (splitName[0]?.charAt(0) || '?') + (splitName?.[1]?.charAt(0) || '');
+};
+
+type UserAvatarProps = {
+  fullName?: string;
+  background?: string;
+};
+
+export const UserAvatar = ({ fullName, background }: UserAvatarProps) => {
+  const name = fullName?.trim() || '?';
+
+  return (
+    <Box
+      $width="24px"
+      $height="24px"
+      $direction="row"
+      $align="center"
+      $justify="center"
+      className="--docs--user-avatar"
+    >
+      <AvatarSvg
+        initials={getInitialFromName(name).toUpperCase()}
+        background={background || getColorFromName(name)}
+      />
+    </Box>
+  );
+};
+
+export const avatarUrlFromName = (fullName?: string): string => {
+  const name = fullName?.trim() || '?';
+  const initials = getInitialFromName(name).toUpperCase();
+  const background = getColorFromName(name);
+
+  const svgMarkup = renderToStaticMarkup(
+    <AvatarSvg initials={initials} background={background} />,
+  );
+
+  return `data:image/svg+xml;charset=UTF-8,${encodeURIComponent(svgMarkup)}`;
+};

src/frontend/apps/impress/src/features/auth/components/index.ts

@@ -1,2 +1,3 @@
 export * from './Auth';
 export * from './ButtonLogin';
+export * from './UserAvatar';

src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteEditor.tsx

@@ -18,7 +18,7 @@ import * as Y from 'yjs';
 
 import { Box, TextErrors } from '@/components';
 import { Doc, useIsCollaborativeEditable } from '@/docs/doc-management';
-import { useAuth } from '@/features/auth';
+import { avatarUrlFromName, useAuth } from '@/features/auth';
 
 import {
   useHeadings,
@@ -162,7 +162,7 @@ export const BlockNoteEditor = ({ doc, provider }: BlockNoteEditorProps) => {
             return {
               id: encodedURIUserId,
               username: fullName,
-              avatarUrl: 'https://i.pravatar.cc/300',
+              avatarUrl: avatarUrlFromName(fullName),
             };
           }),
         );

src/frontend/apps/impress/src/features/docs/doc-share/components/SearchUserRow.tsx

@@ -4,9 +4,7 @@ import {
   QuickSearchItemContentProps,
 } from '@/components/quick-search';
 import { useCunninghamTheme } from '@/cunningham';
-import { User } from '@/features/auth';
-
-import { UserAvatar } from './UserAvatar';
+import { User, UserAvatar } from '@/features/auth';
 
 type Props = {
   user: User;
@@ -36,7 +34,7 @@ export const SearchUserRow = ({
           className="--docs--search-user-row"
         >
           <UserAvatar
-            user={user}
+            fullName={user.full_name || user.email}
             background={
               isInvitation ? colorsTokens['greyscale-400'] : undefined
             }