Uniformize folder structure (#693)

* Uniformize folder structure

* Fix icons

* Fix icons

* Fix tests

* Fix tests

front/src/modules/activities/comment/CommentHeader.tsx

@@ -0,0 +1,104 @@
+import { Tooltip } from 'react-tooltip';
+import { useTheme } from '@emotion/react';
+import styled from '@emotion/styled';
+
+import { Avatar } from '@/users/components/Avatar';
+import {
+  beautifyExactDate,
+  beautifyPastDateRelativeToNow,
+} from '~/utils/date-utils';
+
+import { CommentForDrawer } from '../types/CommentForDrawer';
+
+type OwnProps = {
+  comment: Pick<CommentForDrawer, 'id' | 'author' | 'createdAt'>;
+  actionBar?: React.ReactNode;
+};
+
+const StyledContainer = styled.div`
+  align-items: center;
+  display: flex;
+
+  justify-content: space-between;
+
+  padding: ${({ theme }) => theme.spacing(1)};
+  width: calc(100% - ${({ theme }) => theme.spacing(1)});
+`;
+
+const StyledLeftContainer = styled.div`
+  align-items: end;
+  display: flex;
+  gap: ${({ theme }) => theme.spacing(1)};
+`;
+
+const StyledName = styled.div`
+  color: ${({ theme }) => theme.font.color.primary};
+  font-size: ${({ theme }) => theme.font.size.md};
+  font-weight: ${({ theme }) => theme.font.weight.regular};
+  max-width: 160px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+
+const StyledDate = styled.div`
+  color: ${({ theme }) => theme.font.color.light};
+  font-size: ${({ theme }) => theme.font.size.sm};
+  font-weight: ${({ theme }) => theme.font.weight.regular};
+  margin-left: ${({ theme }) => theme.spacing(1)};
+`;
+
+const StyledTooltip = styled(Tooltip)`
+  background-color: ${({ theme }) => theme.background.primary};
+
+  box-shadow: 0px 2px 4px 3px
+    ${({ theme }) => theme.background.transparent.light};
+
+  box-shadow: 2px 4px 16px 6px
+    ${({ theme }) => theme.background.transparent.light};
+
+  color: ${({ theme }) => theme.font.color.primary};
+
+  opacity: 1;
+  padding: 8px;
+`;
+
+export function CommentHeader({ comment, actionBar }: OwnProps) {
+  const theme = useTheme();
+  const beautifiedCreatedAt = beautifyPastDateRelativeToNow(comment.createdAt);
+  const exactCreatedAt = beautifyExactDate(comment.createdAt);
+  const showDate = beautifiedCreatedAt !== '';
+
+  const author = comment.author;
+  const authorName = author.displayName;
+  const avatarUrl = author.avatarUrl;
+  const commentId = comment.id;
+
+  return (
+    <StyledContainer>
+      <StyledLeftContainer>
+        <Avatar
+          avatarUrl={avatarUrl}
+          size={theme.icon.size.md}
+          colorId={author.id}
+          placeholder={author.displayName}
+        />
+        <StyledName>{authorName}</StyledName>
+        {showDate && (
+          <>
+            <StyledDate id={`id-${commentId}`}>
+              {beautifiedCreatedAt}
+            </StyledDate>
+            <StyledTooltip
+              anchorSelect={`#id-${commentId}`}
+              content={exactCreatedAt}
+              clickable
+              noArrow
+            />
+          </>
+        )}
+      </StyledLeftContainer>
+      <div>{actionBar}</div>
+    </StyledContainer>
+  );
+}

front/src/modules/activities/comment/CommentThreadItem.tsx

@@ -0,0 +1,40 @@
+import styled from '@emotion/styled';
+
+import { CommentForDrawer } from '../types/CommentForDrawer';
+
+import { CommentHeader } from './CommentHeader';
+
+type OwnProps = {
+  comment: CommentForDrawer;
+  actionBar?: React.ReactNode;
+};
+
+const StyledContainer = styled.div`
+  align-items: flex-start;
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme }) => theme.spacing(1)};
+  justify-content: flex-start;
+  width: 100%;
+`;
+
+const StyledCommentBody = styled.div`
+  color: ${({ theme }) => theme.font.color.secondary};
+  font-size: ${({ theme }) => theme.font.size.md};
+
+  line-height: ${({ theme }) => theme.text.lineHeight.md};
+  overflow-wrap: anywhere;
+
+  padding-left: 24px;
+
+  text-align: left;
+`;
+
+export function CommentThreadItem({ comment, actionBar }: OwnProps) {
+  return (
+    <StyledContainer>
+      <CommentHeader comment={comment} actionBar={actionBar} />
+      <StyledCommentBody>{comment.body}</StyledCommentBody>
+    </StyledContainer>
+  );
+}

front/src/modules/activities/comment/__stories__/CommentHeader.stories.tsx

@@ -0,0 +1,132 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { DateTime } from 'luxon';
+
+import { CommentThreadActionBar } from '@/activities/right-drawer/components/CommentThreadActionBar';
+import { CommentForDrawer } from '@/activities/types/CommentForDrawer';
+import { mockedUsersData } from '~/testing/mock-data/users';
+import { getRenderWrapperForComponent } from '~/testing/renderWrappers';
+
+import { CommentHeader } from '../CommentHeader';
+
+const meta: Meta<typeof CommentHeader> = {
+  title: 'Modules/Comments/CommentHeader',
+  component: CommentHeader,
+};
+
+export default meta;
+type Story = StoryObj<typeof CommentHeader>;
+
+const mockUser = mockedUsersData[0];
+
+const mockComment: Pick<CommentForDrawer, 'id' | 'author' | 'createdAt'> = {
+  id: 'fake_comment_1_uuid',
+  author: {
+    id: 'fake_comment_1_author_uuid',
+    displayName: mockUser.displayName ?? '',
+    firstName: mockUser.firstName ?? '',
+    lastName: mockUser.lastName ?? '',
+    avatarUrl: mockUser.avatarUrl,
+  },
+  createdAt: DateTime.now().minus({ hours: 2 }).toISO() ?? '',
+};
+
+const mockCommentWithLongName: Pick<
+  CommentForDrawer,
+  'id' | 'author' | 'createdAt'
+> = {
+  id: 'fake_comment_2_uuid',
+  author: {
+    id: 'fake_comment_2_author_uuid',
+    displayName: mockUser.displayName + ' with a very long suffix' ?? '',
+    firstName: mockUser.firstName ?? '',
+    lastName: mockUser.lastName ?? '',
+    avatarUrl: mockUser.avatarUrl,
+  },
+  createdAt: DateTime.now().minus({ hours: 2 }).toISO() ?? '',
+};
+
+export const Default: Story = {
+  render: getRenderWrapperForComponent(
+    <CommentHeader
+      comment={{
+        ...mockComment,
+        createdAt: DateTime.now().minus({ hours: 2 }).toISO() ?? '',
+      }}
+    />,
+  ),
+};
+
+export const FewDaysAgo: Story = {
+  render: getRenderWrapperForComponent(
+    <CommentHeader
+      comment={{
+        ...mockComment,
+        createdAt: DateTime.now().minus({ days: 2 }).toISO() ?? '',
+      }}
+    />,
+  ),
+};
+
+export const FewMonthsAgo: Story = {
+  render: getRenderWrapperForComponent(
+    <CommentHeader
+      comment={{
+        ...mockComment,
+        createdAt: DateTime.now().minus({ months: 2 }).toISO() ?? '',
+      }}
+    />,
+  ),
+};
+
+export const FewYearsAgo: Story = {
+  render: getRenderWrapperForComponent(
+    <CommentHeader
+      comment={{
+        ...mockComment,
+        createdAt: DateTime.now().minus({ years: 2 }).toISO() ?? '',
+      }}
+    />,
+  ),
+};
+
+export const WithoutAvatar: Story = {
+  render: getRenderWrapperForComponent(
+    <CommentHeader
+      comment={{
+        ...mockComment,
+        author: {
+          ...mockComment.author,
+          avatarUrl: '',
+        },
+        createdAt: DateTime.now().minus({ hours: 2 }).toISO() ?? '',
+      }}
+    />,
+  ),
+};
+
+export const WithLongUserName: Story = {
+  render: getRenderWrapperForComponent(
+    <CommentHeader
+      comment={{
+        ...mockCommentWithLongName,
+        author: {
+          ...mockCommentWithLongName.author,
+          avatarUrl: '',
+        },
+        createdAt: DateTime.now().minus({ hours: 2 }).toISO() ?? '',
+      }}
+    />,
+  ),
+};
+
+export const WithActionBar: Story = {
+  render: getRenderWrapperForComponent(
+    <CommentHeader
+      comment={{
+        ...mockComment,
+        createdAt: DateTime.now().minus({ days: 2 }).toISO() ?? '',
+      }}
+      actionBar={<CommentThreadActionBar commentThreadId="test-id" />}
+    />,
+  ),
+};