feat: colored avatar (#554)

* feat: colored avatar

* fix: use id instead of name & remove unused

* fix: remove unused

* Allow empty ID to avoid empty string

* Fix tests

* Add person chip story

---------

Co-authored-by: Emilien <emilien.chauvet.enpc@gmail.com>

front/src/modules/comments/components/comment-thread/CommentThreadRelationPicker.tsx

@@ -10,7 +10,7 @@ import {
 
 import { useHandleCheckableCommentThreadTargetChange } from '@/comments/hooks/useHandleCheckableCommentThreadTargetChange';
 import { CommentableEntityForSelect } from '@/comments/types/CommentableEntityForSelect';
-import CompanyChip from '@/companies/components/CompanyChip';
+import { CompanyChip } from '@/companies/components/CompanyChip';
 import { useScopedHotkeys } from '@/hotkeys/hooks/useScopedHotkeys';
 import { InternalHotkeysScope } from '@/hotkeys/types/internal/InternalHotkeysScope';
 import { PersonChip } from '@/people/components/PersonChip';

front/src/modules/comments/components/comment/CommentHeader.tsx

@@ -8,7 +8,6 @@ import {
   beautifyExactDate,
   beautifyPastDateRelativeToNow,
 } from '@/utils/datetime/date-utils';
-import { isNonEmptyString } from '@/utils/type-guards/isNonEmptyString';
 
 type OwnProps = {
   comment: Pick<CommentForDrawer, 'id' | 'author' | 'createdAt'>;
@@ -74,17 +73,14 @@ export function CommentHeader({ comment, actionBar }: OwnProps) {
   const avatarUrl = author.avatarUrl;
   const commentId = comment.id;
 
-  const capitalizedFirstUsernameLetter = isNonEmptyString(authorName)
-    ? authorName.toLocaleUpperCase()[0]
-    : '';
-
   return (
     <StyledContainer>
       <StyledLeftContainer>
         <Avatar
           avatarUrl={avatarUrl}
           size={theme.icon.size.md}
-          placeholder={capitalizedFirstUsernameLetter}
+          colorId={author.id}
+          placeholder={author.displayName}
         />
         <StyledName>{authorName}</StyledName>
         {showDate && (