Add username

Author: AntoLC

src/backend/core/api/serializers.py

@@ -831,7 +831,7 @@ class ThreadSerializer(serializers.ModelSerializer):
     stored as the first comment.
     """
 
-    user = UserSerializer(read_only=True)
+    user = UserLightSerializer(read_only=True)
     abilities = serializers.SerializerMethodField(read_only=True)
     content = serializers.JSONField(write_only=True, required=True)
     document = serializers.PrimaryKeyRelatedField(read_only=True)
@@ -893,15 +893,15 @@ def update(self, instance, validated_data):  # pragma: no cover - not used yet
 class CommentInThreadSerializer(serializers.ModelSerializer):
     """Serialize comments (nested under a thread) with reactions and abilities."""
 
-    user_id = serializers.SerializerMethodField()
+    user = UserLightSerializer(read_only=True)
     reactions = serializers.SerializerMethodField()
     abilities = serializers.SerializerMethodField()
 
     class Meta:
         model = models.Comment
         fields = [
             "id",
-            "user_id",
+            "user",
             "body",
             "created_at",
             "updated_at",
@@ -910,9 +910,6 @@ class Meta:
         ]
         read_only_fields = fields
 
-    def get_user_id(self, obj):
-        return str(obj.user_id) if obj.user_id else None
-
     def get_reactions(self, obj):
         return [
             {"emoji": r.emoji, "created_at": r.created_at, "user_ids": r.user_ids}
@@ -929,7 +926,7 @@ def get_abilities(self, obj):
 class ThreadFullSerializer(serializers.ModelSerializer):
     """Full thread representation with nested comments."""
 
-    user = UserSerializer(read_only=True)
+    user = UserLightSerializer(read_only=True)
     comments = serializers.SerializerMethodField()
     abilities = serializers.SerializerMethodField()
 

src/frontend/apps/impress/src/features/auth/api/types.ts

@@ -13,3 +13,5 @@ export interface User {
   short_name: string;
   language?: string;
 }
+
+export type UserLight = Pick<User, 'full_name' | 'short_name'>;

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

@@ -17,7 +17,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,
@@ -159,13 +159,16 @@ export const BlockNoteEditor = ({ doc, provider }: BlockNoteEditorProps) => {
           multiColumnLocales?.[lang as keyof typeof multiColumnLocales],
       },
       resolveUsers: async (userIds) => {
-        // sample implementation, replace this with a call to your own user database for example
         return Promise.resolve(
-          userIds.map((userId) => ({
-            id: userId,
-            username: 'John Doe',
-            avatarUrl: 'https://placehold.co/100x100',
-          })),
+          userIds.map((encodedURIUserId) => {
+            const fullName = decodeURIComponent(encodedURIUserId);
+
+            return {
+              id: encodedURIUserId,
+              username: fullName,
+              avatarUrl: avatarUrlFromName(fullName),
+            };
+          }),
         );
       },
       tables: {

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

@@ -554,7 +554,7 @@ const serverReactionToReactionData = (r: ServerReaction) => ({
 const serverCommentToCommentData = (c: ServerComment): CommentData => ({
   type: 'comment',
   id: c.id,
-  userId: c.user_id || '',
+  userId: encodeURIComponent(c.user.full_name),
   body: c.body,
   createdAt: new Date(c.created_at),
   updatedAt: new Date(c.updated_at),

src/frontend/apps/impress/src/features/docs/doc-editor/components/comments/types.ts

@@ -1,4 +1,4 @@
-import { User } from '@/features/auth';
+import { UserLight } from '@/features/auth';
 
 export interface CommentThreadAbilities {
   destroy: boolean;
@@ -15,7 +15,7 @@ export interface ServerReaction {
 
 export interface ServerComment {
   id: string;
-  user_id: string | null;
+  user: UserLight;
   body: unknown;
   created_at: string;
   updated_at: string;
@@ -27,7 +27,7 @@ export interface ServerThread {
   id: string;
   created_at: string;
   updated_at: string;
-  user: User | null;
+  user: UserLight;
   resolved: boolean;
   resolved_updated_at: string | null;
   resolved_by: string | null;

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
             }