Lucas/t 366 on comment drawer when i have comments on the selected (#201)

* Fixed right drawer width and shared in theme

* Added date packages and tooltip

* Added date utils and tests

* Added comment thread components

* Fixed comment chip

* Fix from rebase

* Fix from rebase

* Fix margin right

* Fixed CSS and graphql

front/src/modules/users/components/UserAvatar.tsx

@@ -0,0 +1,61 @@
+import styled from '@emotion/styled';
+
+import { isNonEmptyString } from '@/utils/type-guards/isNonEmptyString';
+
+type OwnProps = {
+  avatarUrl: string | null | undefined;
+  size: number;
+  placeholderLetter: string;
+};
+
+export const StyledUserAvatar = styled.div<Omit<OwnProps, 'placeholderLetter'>>`
+  width: ${(props) => props.size}px;
+  height: ${(props) => props.size}px;
+  border-radius: 50%;
+  background-image: url(${(props) =>
+    isNonEmptyString(props.avatarUrl) ? props.avatarUrl : 'none'});
+  background-color: ${(props) =>
+    !isNonEmptyString(props.avatarUrl)
+      ? props.theme.tertiaryBackground
+      : 'none'};
+  background-repeat: no-repeat;
+  background-position: center center;
+  background-size: cover;
+
+  display: flex;
+  align-items: center;
+
+  justify-content: center;
+`;
+
+type StyledPlaceholderLetterProps = {
+  size: number;
+};
+
+export const StyledPlaceholderLetter = styled.div<StyledPlaceholderLetterProps>`
+  width: ${(props) => props.size}px;
+  height: ${(props) => props.size}px;
+
+  font-size: 12px;
+  font-weight: 500;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  color: ${(props) => props.theme.text80};
+`;
+
+export function UserAvatar({ avatarUrl, size, placeholderLetter }: OwnProps) {
+  const noAvatarUrl = !isNonEmptyString(avatarUrl);
+
+  return (
+    <StyledUserAvatar avatarUrl={avatarUrl} size={size}>
+      {noAvatarUrl && (
+        <StyledPlaceholderLetter size={size}>
+          {placeholderLetter}
+        </StyledPlaceholderLetter>
+      )}
+    </StyledUserAvatar>
+  );
+}

front/src/modules/users/components/__stories__/UserAvatar.stories.tsx

@@ -0,0 +1,40 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { getRenderWrapperForComponent } from '~/testing/renderWrappers';
+
+import { UserAvatar } from '../UserAvatar';
+
+const meta: Meta<typeof UserAvatar> = {
+  title: 'Components/User/UserAvatar',
+  component: UserAvatar,
+};
+
+export default meta;
+type Story = StoryObj<typeof UserAvatar>;
+
+const avatarUrl =
+  'https://s3-alpha-sig.figma.com/img/bbb5/4905/f0a52cc2b9aaeb0a82a360d478dae8bf?Expires=1687132800&Signature=iVBr0BADa3LHoFVGbwqO-wxC51n1o~ZyFD-w7nyTyFP4yB-Y6zFawL-igewaFf6PrlumCyMJThDLAAc-s-Cu35SBL8BjzLQ6HymzCXbrblUADMB208PnMAvc1EEUDq8TyryFjRO~GggLBk5yR0EXzZ3zenqnDEGEoQZR~TRqS~uDF-GwQB3eX~VdnuiU2iittWJkajIDmZtpN3yWtl4H630A3opQvBnVHZjXAL5YPkdh87-a-H~6FusWvvfJxfNC2ZzbrARzXofo8dUFtH7zUXGCC~eUk~hIuLbLuz024lFQOjiWq2VKyB7dQQuGFpM-OZQEV8tSfkViP8uzDLTaCg__&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4';
+
+export const Size40: Story = {
+  render: getRenderWrapperForComponent(
+    <UserAvatar avatarUrl={avatarUrl} size={40} placeholderLetter="L" />,
+  ),
+};
+
+export const Size32: Story = {
+  render: getRenderWrapperForComponent(
+    <UserAvatar avatarUrl={avatarUrl} size={32} placeholderLetter="L" />,
+  ),
+};
+
+export const Size16: Story = {
+  render: getRenderWrapperForComponent(
+    <UserAvatar avatarUrl={avatarUrl} size={16} placeholderLetter="L" />,
+  ),
+};
+
+export const NoAvatarPicture: Story = {
+  render: getRenderWrapperForComponent(
+    <UserAvatar avatarUrl={''} size={16} placeholderLetter="L" />,
+  ),
+};

front/src/modules/users/interfaces/__tests__/user.interface.test.ts

@@ -13,6 +13,7 @@ describe('User mappers', () => {
     const graphQLUser = {
       id: '7dfbc3f7-6e5e-4128-957e-8d86808cdf6b',
       displayName: 'John Doe',
+      avatarUrl: 'https://example.com/avatar.png',
       email: 'john.doe@gmail.com',
       workspaceMember: {
         id: '7af20dea-0412-4c4c-8b13-d6f0e6e09e88',
@@ -31,6 +32,7 @@ describe('User mappers', () => {
       __typename: 'users',
       id: graphQLUser.id,
       displayName: graphQLUser.displayName,
+      avatarUrl: graphQLUser.avatarUrl,
       email: graphQLUser.email,
       workspaceMember: {
         id: graphQLUser.workspaceMember.id,
@@ -51,6 +53,7 @@ describe('User mappers', () => {
       __typename: 'users',
       id: '7dfbc3f7-6e5e-4128-957e-8d86808cdf6b',
       displayName: 'John Doe',
+      avatarUrl: 'https://example.com/avatar.png',
       email: 'john.doe@gmail.com',
       workspaceMember: {
         id: '7af20dea-0412-4c4c-8b13-d6f0e6e09e88',
@@ -65,6 +68,7 @@ describe('User mappers', () => {
     expect(graphQLUser).toStrictEqual({
       id: user.id,
       displayName: user.displayName,
+      avatarUrl: user.avatarUrl,
       email: user.email,
       workspaceMemberId: user.workspaceMember.id,
       __typename: 'users',

front/src/modules/users/interfaces/user.interface.ts

@@ -9,6 +9,7 @@ export interface User {
   id: string;
   email?: string;
   displayName?: string;
+  avatarUrl?: string;
   workspaceMember?: WorkspaceMember | null;
 }
 
@@ -17,6 +18,7 @@ export type GraphqlQueryUser = {
   email?: string;
   displayName?: string;
   workspaceMember?: GraphqlQueryWorkspaceMember | null;
+  avatarUrl?: string;
   __typename?: string;
 };
 
@@ -24,6 +26,7 @@ export type GraphqlMutationUser = {
   id: string;
   email?: string;
   displayName?: string;
+  avatarUrl?: string;
   workspaceMemberId?: string;
   __typename?: string;
 };
@@ -33,6 +36,7 @@ export const mapToUser = (user: GraphqlQueryUser): User => ({
   id: user.id,
   email: user.email,
   displayName: user.displayName,
+  avatarUrl: user.avatarUrl,
   workspaceMember: user.workspaceMember
     ? mapToWorkspaceMember(user.workspaceMember)
     : user.workspaceMember,
@@ -42,6 +46,7 @@ export const mapToGqlUser = (user: User): GraphqlMutationUser => ({
   id: user.id,
   email: user.email,
   displayName: user.displayName,
+  avatarUrl: user.avatarUrl,
   workspaceMemberId: user.workspaceMember?.id,
   __typename: 'users',
 });