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/people/components/PersonChip.tsx

@@ -3,10 +3,10 @@ import { Link } from 'react-router-dom';
 import { Theme } from '@emotion/react';
 import styled from '@emotion/styled';
 
-import PersonPlaceholder from './person-placeholder.png';
+import { Avatar } from '@/users/components/Avatar';
 
 export type PersonChipPropsType = {
-  id?: string;
+  id: string;
   name: string;
   picture?: string;
 };
@@ -52,10 +52,12 @@ export function PersonChip({ id, name, picture }: PersonChipPropsType) {
   const ContainerComponent = id ? StyledContainerLink : StyledContainerNoLink;
   return (
     <ContainerComponent data-testid="person-chip" to={`/person/${id}`}>
-      <img
-        data-testid="person-chip-image"
-        src={picture ? picture.toString() : PersonPlaceholder.toString()}
-        alt="person"
+      <Avatar
+        avatarUrl={picture}
+        colorId={id}
+        placeholder={name}
+        size={14}
+        type="rounded"
       />
       <StyledName>{name}</StyledName>
     </ContainerComponent>