♻️(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.
2025-09-12 15:45:39 +02:00
parent 48e1370ba3
commit 1bf810d596
11 changed files with 176 additions and 79 deletions
--- a/src/frontend/apps/e2e/tests/app-impress/doc-comments.spec.ts
+++ b/src/frontend/apps/e2e/tests/app-impress/doc-comments.spec.ts
@@ -51,6 +51,9 @@ test.describe('Doc Comments', () => {
    await thread.locator('[data-test="addreaction"]').first().click();
    await page.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');
@@ -88,6 +91,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();
--- a/src/frontend/apps/impress/cunningham.ts
+++ b/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',
        },
      },
    },
--- a/src/frontend/apps/impress/src/cunningham/cunningham-tokens.css
+++ b/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;
--- a/src/frontend/apps/impress/src/cunningham/cunningham-tokens.ts
+++ b/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,
--- a/src/frontend/apps/impress/src/features/auth/components/AvatarSvg.tsx
+++ b/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>
+);
--- a/src/frontend/apps/impress/src/features/auth/components/UserAvatar.tsx
+++ b/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)}`;
+};
--- a/src/frontend/apps/impress/src/features/auth/components/index.ts
+++ b/src/frontend/apps/impress/src/features/auth/components/index.ts
@@ -1,2 +1,3 @@
 export * from './Auth';
 export * from './ButtonLogin';
+export * from './UserAvatar';
--- a/src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteEditor.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteEditor.tsx
@@ -12,14 +12,15 @@ import { BlockNoteView } from '@blocknote/mantine';
 import '@blocknote/mantine/style.css';
 import { useCreateBlockNote } from '@blocknote/react';
 import { HocuspocusProvider } from '@hocuspocus/provider';
-import { useEffect, useRef } from 'react';
+import { useEffect, useMemo, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import { css } from 'styled-components';
 import * as Y from 'yjs';

 import { Box, TextErrors } from '@/components';
+import { useCunninghamTheme } from '@/cunningham';
 import { Doc, useProviderStore } from '@/docs/doc-management';
-import { useAuth } from '@/features/auth';
+import { avatarUrlFromName, useAuth } from '@/features/auth';
 import { useResponsiveStore } from '@/stores';

 import {
@@ -82,6 +83,7 @@ export const BlockNoteEditor = ({ doc, provider }: BlockNoteEditorProps) => {
  const { user } = useAuth();
  const { setEditor } = useEditorStore();
  const { t } = useTranslation();
+  const { themeTokens } = useCunninghamTheme();
  const { isDesktop } = useResponsiveStore();
  const { isSynced: isConnectedToCollabServer } = useProviderStore();
  const refEditorContainer = useRef<HTMLDivElement>(null);
@@ -93,18 +95,25 @@ export const BlockNoteEditor = ({ doc, provider }: BlockNoteEditorProps) => {

  const { uploadFile, errorAttachment } = useUploadFile(doc.id);

-  const collabName = user?.full_name || user?.email || t('Anonymous');
+  const collabName = user?.full_name || user?.email;
+  const cursorName = collabName || t('Anonymous');
  const showCursorLabels: 'always' | 'activity' | (string & {}) = 'activity';

  const threadStore = useComments(doc.id, canSeeComment, user);

+  const currentUserAvatarUrl = useMemo(() => {
+    if (canSeeComment) {
+      return avatarUrlFromName(collabName, themeTokens?.font?.families?.base);
+    }
+  }, [canSeeComment, collabName, themeTokens?.font?.families?.base]);
+
  const editor: DocsBlockNoteEditor = useCreateBlockNote(
    {
      collaboration: {
        provider: provider,
        fragment: provider.document.getXmlFragment('document-store'),
        user: {
-          name: collabName,
+          name: cursorName,
          color: randomColor(),
        },
        /**
@@ -159,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,
+              ),
            };
          }),
        );
@@ -173,7 +185,7 @@ export const BlockNoteEditor = ({ doc, provider }: BlockNoteEditorProps) => {
      uploadFile,
      schema: blockNoteSchema,
    },
-    [collabName, lang, provider, uploadFile, threadStore],
+    [cursorName, lang, provider, uploadFile, threadStore],
  );

  useHeadings(editor);
@@ -195,7 +207,7 @@ export const BlockNoteEditor = ({ doc, provider }: BlockNoteEditorProps) => {
      ref={refEditorContainer}
      $css={css`
        ${cssEditor};
-        ${cssComments(canSeeComment)}
+        ${cssComments(canSeeComment, currentUserAvatarUrl)}
      `}
    >
      {errorAttachment && (
--- a/src/frontend/apps/impress/src/features/docs/doc-editor/components/comments/styles.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-editor/components/comments/styles.tsx
@@ -1,6 +1,9 @@
 import { css } from 'styled-components';

-export const cssComments = (canSeeComment: boolean) => css`
+export const cssComments = (
+  canSeeComment: boolean,
+  currentUserAvatarUrl?: string,
+) => css`
  & .--docs--main-editor,
  & .--docs--main-editor .ProseMirror {
    // Comments marks in the editor
@@ -151,6 +154,19 @@ export const cssComments = (canSeeComment: boolean) => css`
        .bn-container.bn-comment-editor {
          min-width: 0;
        }
+
+        &::before {
+          content: '';
+          width: 26px;
+          height: 26px;
+          flex: 0 0 26px;
+          background-image: ${currentUserAvatarUrl
+            ? `url("${currentUserAvatarUrl}")`
+            : 'none'};
+          background-position: center;
+          background-repeat: no-repeat;
+          background-size: cover;
+        }
      }

      // Actions button send comment
--- a/src/frontend/apps/impress/src/features/docs/doc-share/components/SearchUserRow.tsx
+++ b/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
            }
--- a/src/frontend/apps/impress/src/features/docs/doc-share/components/UserAvatar.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-share/components/UserAvatar.tsx
@@ -1,62 +0,0 @@
-import { css } from 'styled-components';
-
-import { Text } from '@/components';
-import { tokens } from '@/cunningham';
-import { User } from '@/features/auth';
-
-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];
-};
-
-type Props = {
-  user: User;
-  background?: string;
-};
-
-export const UserAvatar = ({ user, background }: Props) => {
-  const name = user.full_name || user.email || '?';
-  const splitName = name?.split(' ');
-
-  return (
-    <Text
-      className="--docs--user-avatar"
-      $align="center"
-      $color="rgba(255, 255, 255, 0.9)"
-      $justify="center"
-      $background={background || getColorFromName(name)}
-      $width="24px"
-      $height="24px"
-      $radius="50%"
-      $size="10px"
-      $textAlign="center"
-      $textTransform="uppercase"
-      $weight={600}
-      $css={css`
-        border: 1px solid rgba(255, 255, 255, 0.5);
-        contain: content;
-      `}
-    >
-      {splitName[0]?.charAt(0)}
-      {splitName?.[1]?.charAt(0)}
-    </Text>
-  );
-};