♻️(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/e2e/__tests__/app-impress/doc-comments.spec.ts

@@ -44,6 +44,9 @@ test.describe('Doc Comments', () => {
     await thread.locator('[data-test="addreaction"]').first().click();
     await thread.getByRole('button', { name: '👍' }).click();
 
+    await expect(
+      thread.getByRole('img', { name: 'E2E Chromium' }).first(),
+    ).toBeVisible();
     await expect(thread.getByText('This is a comment').first()).toBeVisible();
     await expect(thread.getByText(`E2E ${browserName}`).first()).toBeVisible();
     await expect(thread.locator('.bn-comment-reaction')).toHaveText('👍1');
@@ -81,6 +84,9 @@ test.describe('Doc Comments', () => {
     await otherThread.locator('[data-test="save"]').click();
 
     // We check that the second user can see the comment he just made
+    await expect(
+      otherThread.getByRole('img', { name: `E2E ${otherBrowserName}` }).first(),
+    ).toBeVisible();
     await expect(
       otherThread.getByText('This is a comment from the other user').first(),
     ).toBeVisible();

src/frontend/apps/impress/cunningham.ts

@@ -98,8 +98,8 @@ const dsfrTheme = {
       },
       font: {
         families: {
-          base: 'Marianne',
-          accent: 'Marianne',
+          base: 'Marianne, Inter, Roboto Flex Variable, sans-serif',
+          accent: 'Marianne, Inter, Roboto Flex Variable, sans-serif',
         },
       },
     },

src/frontend/apps/impress/src/cunningham/cunningham-tokens.css

@@ -556,8 +556,10 @@
   --c--theme--logo--widthHeader: 110px;
   --c--theme--logo--widthFooter: 220px;
   --c--theme--logo--alt: gouvernement logo;
-  --c--theme--font--families--base: marianne;
-  --c--theme--font--families--accent: marianne;
+  --c--theme--font--families--base:
+    marianne, inter, roboto flex variable, sans-serif;
+  --c--theme--font--families--accent:
+    marianne, inter, roboto flex variable, sans-serif;
   --c--components--la-gaufre: true;
   --c--components--home-proconnect: true;
   --c--components--favicon--ico: /assets/favicon-dsfr.ico;

src/frontend/apps/impress/src/cunningham/cunningham-tokens.ts

@@ -436,7 +436,12 @@ export const tokens = {
           widthFooter: '220px',
           alt: 'Gouvernement Logo',
         },
-        font: { families: { base: 'Marianne', accent: 'Marianne' } },
+        font: {
+          families: {
+            base: 'Marianne, Inter, Roboto Flex Variable, sans-serif',
+            accent: 'Marianne, Inter, Roboto Flex Variable, sans-serif',
+          },
+        },
       },
       components: {
         'la-gaufre': true,

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

@@ -0,0 +1,49 @@
+import React from 'react';
+
+import { Box, BoxType } from '@/components';
+
+type AvatarSvgProps = {
+  initials: string;
+  background: string;
+  fontFamily?: string;
+} & BoxType;
+
+export const AvatarSvg: React.FC<AvatarSvgProps> = ({
+  initials,
+  background,
+  fontFamily,
+  ...props
+}) => (
+  <Box
+    as="svg"
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    {...props}
+  >
+    <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"
+      fontSize="10"
+      fontWeight="600"
+      fill="rgba(255,255,255,0.9)"
+      fontFamily={fontFamily || 'Arial'}
+    >
+      {initials}
+    </text>
+  </Box>
+);

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

@@ -0,0 +1,70 @@
+import { renderToStaticMarkup } from 'react-dom/server';
+
+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 (
+    <AvatarSvg
+      className="--docs--user-avatar"
+      initials={getInitialFromName(name).toUpperCase()}
+      background={background || getColorFromName(name)}
+    />
+  );
+};
+
+export const avatarUrlFromName = (
+  fullName?: string,
+  fontFamily?: string,
+): string => {
+  const name = fullName?.trim() || '?';
+  const initials = getInitialFromName(name).toUpperCase();
+  const background = getColorFromName(name);
+
+  const svgMarkup = renderToStaticMarkup(
+    <AvatarSvg
+      className="--docs--user-avatar"
+      initials={initials}
+      background={background}
+      fontFamily={fontFamily}
+    />,
+  );
+
+  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

@@ -17,8 +17,9 @@ import { css } from 'styled-components';
 import * as Y from 'yjs';
 
 import { Box, TextErrors } from '@/components';
+import { useCunninghamTheme } from '@/cunningham';
 import { Doc, useIsCollaborativeEditable } from '@/docs/doc-management';
-import { useAuth } from '@/features/auth';
+import { avatarUrlFromName, useAuth } from '@/features/auth';
 
 import {
   useHeadings,
@@ -81,6 +82,7 @@ export const BlockNoteEditor = ({ doc, provider }: BlockNoteEditorProps) => {
   const { user } = useAuth();
   const { setEditor } = useEditorStore();
   const { t } = useTranslation();
+  const { themeTokens } = useCunninghamTheme();
 
   const { isEditable, isLoading } = useIsCollaborativeEditable(doc);
   const isConnectedToCollabServer = provider.isSynced;
@@ -166,7 +168,10 @@ export const BlockNoteEditor = ({ doc, provider }: BlockNoteEditorProps) => {
             return {
               id: encodedURIUserId,
               username: fullName || t('Anonymous'),
-              avatarUrl: 'https://i.pravatar.cc/300',
+              avatarUrl: avatarUrlFromName(
+                fullName,
+                themeTokens?.font?.families?.base,
+              ),
             };
           }),
         );

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
             }